efc
/
scr-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改大屏使用情况接口

wfbk
TangShan_DD 2025-06-06 18:10:01 +08:00
parent e4d390c1ec
commit 5cf9e98765
4 changed files with 94 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/OverviewState/index.vue
View File

@ -1,28 +1,28 @@
<template>
<el-row class="stat-container">
<!-- <dv-border-box-8 :reverse="true" style="height: 74px"> -->
<div class="stat-border" style="top: -2px"></div>
<div class="stat-border" style="top: -2px; right: 1px"></div>
<div class="stat-border" style="bottom: 0; right: 1px"></div>
<div class="stat-border" style="bottom: 0;"></div>
<el-col :span="24/configs.length" class="stat-part" v-for="item in configs" :key="item.title">
<div class="title">
<i class="icon" :class="item.icon"></i>
<span>{{item.title}}</span>
</div>
<div class="stat-count" v-for="(cell,index) in item.data" :key="index">
<template v-if="item.type === 'COUNT'">
<div>{{cell.title}}</div>
<div class="number" :class="cell.className" :style="cell.style">{{cell.value}} {{cell.unit}}</div>
</template>
<template v-if="item.type === 'PROGRESS'">
<div :style="item.titleStyle">{{cell.title}}</div>
<div class="progress-wrap">
<Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
</div>
</template>
</div>
</el-col>
<div class="stat-border" style="top: -2px"></div>
<div class="stat-border" style="top: -2px; right: 1px"></div>
<div class="stat-border" style="bottom: 0; right: 1px"></div>
<div class="stat-border" style="bottom: 0;"></div>
<el-col :span="24 / configs.length" class="stat-part" v-for="item in configs" :key="item.title">
<div class="title">
<i class="icon" :class="item.icon"></i>
<span>{{ item.title }}</span>
</div>
<div class="stat-count" v-for="(cell, index) in item.data" :key="index">
<template v-if="item.type === 'COUNT'">
<div>{{ cell.title }}</div>
<div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
</template>
<template v-if="item.type === 'PROGRESS'">
<div :style="item.titleStyle">{{ cell.title }}</div>
<div class="progress-wrap">
<Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
</div>
</template>
</div>
</el-col>
<!-- </dv-border-box-8> -->
</el-row>
</template>
@ -97,7 +97,7 @@ export default {
font-size: 28px;
margin-right: 5px;
}
span{
span {
max-width: 90px;
}
}

19
src/services/screen/resource.js
View File

@ -1,22 +1,22 @@
import request from 'utils/request'
import { wrapperParams } from 'utils'
export function getOverview (type) {
export function getOverview(type) {
return request.get('/cos/v1/cloud/resource/overview', { params: { type } })
}
export function getPlatformOverview (type) {
export function getPlatformOverview(type) {
return request.get('/cos/v1/cloud/resource', { params: { type } })
}
export function getUsed (type) {
export function getUsed(type) {
return request.get('/cos/v1/cloud/resource/used', { params: { type } })
}
export function getVendors () {
export function getVendors() {
return request.get('/cos/v1/cloud/resource/type')
}
export function getPlatforms (type) {
export function getPlatforms(type) {
return request.get('/cos/v1/cloud/resource/platform', { params: wrapperParams({ type }) })
}
@ -26,11 +26,11 @@ export function getAlarmPieChart() {
})
}
export function getResourceApply (type) {
export function getResourceApply(type) {
return request.get('/cos/v1/cloud/resource/apply', { params: { type } })
}
export function getResourceTrend (type) {
export function getResourceTrend(type) {
return request.get('/cos/v1/cloud/resource/trend', { params: { type } })
}
@ -54,3 +54,8 @@ export function getResourceCount(type) {
params: { type }
})
}
export function getCapacityCountNew(params) {
return request.get('/ims/v1/cloudResource/vendors/resource/capacity', {
params: params
})
}

62
src/views/resource_screen/data.js
View File

@ -42,36 +42,36 @@ export const overviewConfigs = [
// value: 0,
// },
]
},
{
title: '私有云使用情况',
icon: 'el-icon-data-line',
type: 'PROGRESS',
titleStyle: {
fontSize: '14px'
},
data: [
{
title: 'CPU总量/剩余量',
unit: '核',
color: '#3AE13A',
used: 0,
total: 0
},
{
title: '内存总量/剩余量',
unit: 'G',
color: '#FFC400',
used: 0,
total: 0
},
{
title: '存储总量/剩余量',
unit: 'T',
color: '#33A1FF',
used: 0,
total: 0
}
]
}
// {
// title: "私有云使用情况",
// icon: "el-icon-data-line",
// type: "PROGRESS",
// titleStyle: {
// fontSize: "14px",
// },
// data: [
// {
// title: "CPU总量/剩余量",
// unit: "核",
// color: "#3AE13A",
// used: 0,
// total: 0,
// },
// {
// title: "内存总量/剩余量",
// unit: "G",
// color: "#FFC400",
// used: 0,
// total: 0,
// },
// {
// title: "存储总量/剩余量",
// unit: "T",
// color: "#33A1FF",
// used: 0,
// total: 0,
// },
// ],
// },
]

87
src/views/resource_screen/index.vue
View File

@ -8,16 +8,16 @@
<div class="card-body">
<el-row :gutter="15" class="resource-count">
<el-col :span="12">
<ResourceCount title="云主机总数(台)" :value="resourceCount.serverNum" color=""></ResourceCount>
<ResourceCount title="云主机总数(台)" :value="resourceCount.vmCount" color=""></ResourceCount>
</el-col>
<el-col :span="12">
<ResourceCount title="CPU总量(核)" :value="resourceCount.cpu" color="#18BE6A" icon="/scr-web/static/img/sip/cpu.png"></ResourceCount>
<ResourceCount title="CPU分配量(C)" :value="resourceCount.assignedCpu" color="#18BE6A" icon="/scr-web/static/img/sip/cpu.png"></ResourceCount>
</el-col>
<el-col :span="12">
<ResourceCount title="内存总量(GB)" :value="resourceCount.mem" color="#1890FF" icon="/scr-web/static/img/sip/mem.png"></ResourceCount>
<ResourceCount title="内存分配量(GB)" :value="resourceCount.assignedMemory" color="#1890FF" icon="/scr-web/static/img/sip/mem.png"></ResourceCount>
</el-col>
<el-col :span="12">
<ResourceCount title="存储总量(TB)" :value="resourceCount.disk" color="#FF6600" icon="/scr-web/static/img/sip/storage.png"></ResourceCount>
<ResourceCount title="存储分配量(TB)" :value="resourceCount.assignedDisk" color="#FF6600" icon="/scr-web/static/img/sip/storage.png"></ResourceCount>
</el-col>
</el-row>
</div>
@ -31,7 +31,7 @@
<div class="card h-300">
<div class="card-title">告警统计</div>
<div class="card-body">
<pie-charts :data="alarmCount" width="100%" height="240px" unit="" :configs="{color: ['#EC1C24', '#FF7F27', '#FFF200', '#4EAFF5']}"></pie-charts>
<pie-charts :data="alarmCount" width="100%" height="240px" unit="" :configs="{ color: ['#EC1C24', '#FF7F27', '#FFF200', '#4EAFF5'] }"></pie-charts>
</div>
</div>
</el-col>
@ -75,18 +75,7 @@ import OverviewState from 'components/OverviewState'
import PlatformCard from './PlatformCard'
import ResourceCount from '../count_screen/ResourceCount'
import { overviewConfigs } from './data'
import {
getOverview,
getPlatformOverview,
getUsed,
getPlatforms,
getAlarmPieChart,
getResourceApply,
getResourceTrend,
getResTops,
getHostStatus,
getResourceCount
} from 'services/screen/resource'
import { getOverview, getPlatformOverview, getUsed, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount, getCapacityCountNew } from 'services/screen/resource'
export default {
components: {
ScreenWrapper,
@ -114,6 +103,7 @@ export default {
// 处理数据对configs赋值
const { hosts, servers, running } = res.data
const unit = state.overviewConfigs[0]
console.log(unit, '....')
;[hosts, servers, running].forEach((item, index) => {
unit.data[index].value = item
})
@ -131,30 +121,6 @@ export default {
})
}
}
// 使用情况
const getUsedState = async () => {
const res = await getUsed()
if (res.success) {
// 处理数据对configs赋值
const {
menUnused,
memTotal,
cpuUnused,
cpuTotal,
diskTotal,
diskUnused
} = res.data
const unit = state.overviewConfigs[2]
;[
{ used: cpuUnused, total: cpuTotal },
{ used: menUnused, total: memTotal },
{ used: diskUnused, total: diskTotal }
].forEach((item, index) => {
unit.data[index].used = item.used
unit.data[index].total = item.total
})
}
}
// 公有私有统计
const getPlatformCount = async () => {
const colors = ['#1890FF', '#19BE6B', '#4144E3', '#ecbc1e']
@ -181,9 +147,25 @@ export default {
}
// 云资源统计
const getResource = async () => {
const res = await getResourceCount(state.vendorType)
const params = {
vendorTypes: 'VMWARE,INSPURRAIL,USPHERE',
realTime: false
}
const res = await getCapacityCountNew(params)
if (res.success) {
state.resourceCount = res.data
// 2
const { hostLastMemory, hostTotalMemory, hostTotalCpuHz, hostLastCpuHz, hostTotalDisk, hostLastDisk } = res.data
const unit2 = state.overviewConfigs[2]
;[
{ used: hostLastCpuHz, total: hostTotalCpuHz },
{ used: hostLastMemory, total: hostTotalMemory },
{ used: hostLastDisk, total: hostTotalDisk }
].forEach((item, index) => {
unit2.data[index].used = item.used
unit2.data[index].total = item.total
})
}
}
// 云主机状态
@ -237,27 +219,14 @@ export default {
}
}
// 切换平台
const change = async (type) => {
const change = async type => {
state.vendorType = type
const proArr = [
getApplyCount(),
getUsedCount(),
getCpuTop5(),
getMemTop5(),
getHostCount(),
getResource()
]
const proArr = [getApplyCount(), getUsedCount(), getCpuTop5(), getMemTop5(), getHostCount(), getResource()]
await Promise.all(proArr)
}
const init = async () => {
try {
await Promise.all([
getOverviewState(),
getUsedState(),
getPlatformState(),
getAlarmCount(),
change()
])
await Promise.all([getOverviewState(), getPlatformState(), getAlarmCount(), change()])
} catch (error) {}
state.loading = false
}
@ -296,7 +265,7 @@ export default {
height: calc(100% - 30px);
}
}
.resource-count ::v-deep .cell{
.resource-count ::v-deep .cell {
height: 85px;
}
</style>