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

src/components/OverviewState/index.vue

@@ -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"></div>
-      <div class="stat-border" style="top: -2px; right: 1px"></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; right: 1px"></div>
-      <div class="stat-border" style="bottom: 0;"></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">
+    <el-col :span="24 / configs.length" class="stat-part" v-for="item in configs" :key="item.title">
-        <div class="title">
+      <div class="title">
-          <i class="icon" :class="item.icon"></i>
+        <i class="icon" :class="item.icon"></i>
-          <span>{{item.title}}</span>
+        <span>{{ item.title }}</span>
-        </div>
+      </div>
-        <div class="stat-count" v-for="(cell,index) in item.data" :key="index">
+      <div class="stat-count" v-for="(cell, index) in item.data" :key="index">
-          <template v-if="item.type === 'COUNT'">
+        <template v-if="item.type === 'COUNT'">
-            <div>{{cell.title}}</div>
+          <div>{{ cell.title }}</div>
-            <div class="number" :class="cell.className" :style="cell.style">{{cell.value}} {{cell.unit}}</div>
+          <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
-          </template>
+        </template>
-          <template v-if="item.type === 'PROGRESS'">
+        <template v-if="item.type === 'PROGRESS'">
-            <div :style="item.titleStyle">{{cell.title}}</div>
+          <div :style="item.titleStyle">{{ cell.title }}</div>
-            <div class="progress-wrap">
+          <div class="progress-wrap">
-              <Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
+            <Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
-            </div>
+          </div>
-          </template>
+        </template>
-        </div>
+      </div>
-      </el-col>
+    </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;
       }
     }

src/services/screen/resource.js

@@ -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
+  })
+}

src/views/resource_screen/data.js

@@ -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,
-  //     },
-  //   ],
-  // },
 ]

src/views/resource_screen/index.vue

@@ -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 {
+import { getOverview, getPlatformOverview, getUsed, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount, getCapacityCountNew } from 'services/screen/resource'
-  getOverview,
-  getPlatformOverview,
-  getUsed,
-  getPlatforms,
-  getAlarmPieChart,
-  getResourceApply,
-  getResourceTrend,
-  getResTops,
-  getHostStatus,
-  getResourceCount
-} 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 = [
+      const proArr = [getApplyCount(), getUsedCount(), getCpuTop5(), getMemTop5(), getHostCount(), getResource()]
-        getApplyCount(),
-        getUsedCount(),
-        getCpuTop5(),
-        getMemTop5(),
-        getHostCount(),
-        getResource()
-      ]
       await Promise.all(proArr)
     }
     const init = async () => {
       try {
-        await Promise.all([
+        await Promise.all([getOverviewState(), getPlatformState(), getAlarmCount(), change()])
-          getOverviewState(),
-          getUsedState(),
-          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>