From 6a0e381dcbd913c9c31f4baad937a229f57a9bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E5=90=AF=E9=BE=99?= <shiqilong@beyondcent.com>
Date: Fri, 20 Sep 2024 17:15:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OverviewState/index.vue     |  74 ++++++++++-----
 src/services/screen/resource.js            |  36 +++----
 src/views/resource_screen/PlatformCard.vue |  19 ++--
 src/views/resource_screen/data.js          |  49 ++--------
 src/views/resource_screen/index.vue        | 103 +++++++--------------
 vue.config.js                              |   2 +-
 6 files changed, 123 insertions(+), 160 deletions(-)

diff --git a/src/components/OverviewState/index.vue b/src/components/OverviewState/index.vue
index 4aaa58a..a99b910 100644
--- a/src/components/OverviewState/index.vue
+++ b/src/components/OverviewState/index.vue
@@ -1,28 +1,32 @@
 <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 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">
+        <div :class="['hover', { active: activePlateform === index }]" v-if="item.title === '平台情况' && item.type === 'COUNT'" @click="plateformClick(index)">
+          <div>{{ cell.title }}</div>
+          <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
         </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 v-else>
+          <div>{{ cell.title }}</div>
+          <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
         </div>
-      </el-col>
+        <div 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>
+        </div>
+      </div>
+    </el-col>
     <!-- </dv-border-box-8> -->
   </el-row>
 </template>
@@ -35,10 +39,38 @@ export default {
       type: Array,
       required: true
     }
+  },
+  data() {
+    return {
+      activePlateform: ''
+    }
+  },
+  methods: {
+    plateformClick(index) {
+      let isPublic
+      if (this.activePlateform === index) {
+        this.activePlateform = ''
+        isPublic = null
+      } else {
+        this.activePlateform = index
+        isPublic = index === 1
+      }
+      this.$emit('plateformClick', isPublic)
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
+.hover {
+  cursor: pointer;
+  padding-left: 5px;
+  &:hover {
+    background: #161c5f;
+  }
+  &.active {
+    background: #161c5f;
+  }
+}
 .stat-container {
   position: relative;
   height: 74px;
@@ -97,7 +129,7 @@ export default {
         font-size: 28px;
         margin-right: 5px;
       }
-      span{
+      span {
         max-width: 90px;
       }
     }
diff --git a/src/services/screen/resource.js b/src/services/screen/resource.js
index 3db5436..34615d9 100644
--- a/src/services/screen/resource.js
+++ b/src/services/screen/resource.js
@@ -1,37 +1,37 @@
 import request from 'utils/request'
 import { wrapperParams } from 'utils'
-
-export function getOverview (type) {
-  return request.get('/cos/v1/cloud/resource/overview', { params: { type } })
+import { isObject } from 'lodash-es'
+export function getOverview(type) {
+  return request.get('/cos/v1/cloud/resource/overview', { params: isObject(type) ? type : { 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 }) })
 }
 
-export function getAlarmPieChart() {
+export function getAlarmPieChart(isPublic) {
   return request.get('/cms/v1/alarms/chart', {
-    params: { action: 'pieChart' }
+    params: { action: 'pieChart', isPublic }
   })
 }
 
-export function getResourceApply (type) {
-  return request.get('/cos/v1/cloud/resource/apply', { params: { type } })
+export function getResourceApply(type) {
+  return request.get('/cos/v1/cloud/resource/apply', { params: isObject(type) ? type : { type } })
 }
 
-export function getResourceTrend (type) {
-  return request.get('/cos/v1/cloud/resource/trend', { params: { type } })
+export function getResourceTrend(type) {
+  return request.get('/cos/v1/cloud/resource/trend', { params: isObject(type) ? type : { type } })
 }
 
 // 资源利用率TOP5
@@ -41,16 +41,18 @@ export function getResTops(params) {
   })
 }
 
-export function getVendorTypes() {
-  return request.get('/cos/v1/cloud/resource/types')
+export function getVendorTypes(isPublic) {
+  return request.get('/cos/v1/cloud/resource/types', {
+    params: { action: 'pieChart', isPublic }
+  })
 }
 export function getHostStatus(type) {
   return request.get('/cos/v1/cloud/resource/status', {
-    params: { type }
+    params: isObject(type) ? type : { type }
   })
 }
 export function getResourceCount(type) {
   return request.get('/cos/v1/cloud/resource/count', {
-    params: { type }
+    params: isObject(type) ? type : { type }
   })
 }
diff --git a/src/views/resource_screen/PlatformCard.vue b/src/views/resource_screen/PlatformCard.vue
index 170a69c..976803c 100644
--- a/src/views/resource_screen/PlatformCard.vue
+++ b/src/views/resource_screen/PlatformCard.vue
@@ -2,11 +2,11 @@
   <div class="platform-card">
     <div class="platform-card-title">云资源</div>
     <div class="item-wrapper">
-      <div class="item" :style="{animation: `move${i} 20s infinite linear`}" @click="selectPlatform(item.value)" v-for="(item, i) in list" :key="item.name">
+      <div class="item" :style="{ animation: `move${i} 20s infinite linear` }" @click="selectPlatform(item.value)" v-for="(item, i) in list" :key="item.name">
         <div class="item-animate"></div>
         <div class="item-content">
-          <img :src="item.icon" alt="">
-          <span>{{item.name}}</span>
+          <img :src="item.icon" alt="" />
+          <span>{{ item.name }}</span>
         </div>
       </div>
     </div>
@@ -39,9 +39,9 @@ export default {
     const state = reactive({
       list: []
     })
-    let style;
-    const getVendorsList = async () => {
-      const res = await getVendorTypes();
+    let style
+    const getVendorsList = async (isPublic = null) => {
+      const res = await getVendorTypes(isPublic)
       if (res.success) {
         state.list = res.data
       }
@@ -49,14 +49,15 @@ export default {
     }
     onUnmounted(() => {
       style && style.remove()
-    });
+    })
     getVendorsList()
     function selectPlatform(type) {
       context.emit('changePlatform', type)
     }
     return {
       ...toRefs(state),
-      selectPlatform
+      selectPlatform,
+      getVendorsList
     }
   }
 }
@@ -131,7 +132,7 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-         transform: rotateZ(-62deg);
+        transform: rotateZ(-62deg);
         img {
           width: 80px;
         }
diff --git a/src/views/resource_screen/data.js b/src/views/resource_screen/data.js
index 93def59..8ca5cbd 100644
--- a/src/views/resource_screen/data.js
+++ b/src/views/resource_screen/data.js
@@ -4,12 +4,6 @@ export const overviewConfigs = [
     icon: 'el-icon-tickets',
     type: 'COUNT',
     data: [
-      {
-        title: '物理机',
-        className: 'lgreen',
-        unit: '台',
-        value: 0
-      },
       {
         title: '云主机',
         className: 'green',
@@ -34,44 +28,13 @@ export const overviewConfigs = [
         className: 'lgreen',
         unit: '个',
         value: 0
+      },
+      {
+        title: '公有云',
+        className: 'green',
+        unit: '个',
+        value: 0
       }
-      // {
-      //   title: "公有云",
-      //   className: "green",
-      //   unit: "个",
-      //   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,
-  //     },
-  //   ],
-  // },
 ]
diff --git a/src/views/resource_screen/index.vue b/src/views/resource_screen/index.vue
index d4e65fd..7ddb953 100644
--- a/src/views/resource_screen/index.vue
+++ b/src/views/resource_screen/index.vue
@@ -1,6 +1,6 @@
 <template>
   <ScreenWrapper code="RESOURCE_SCREEN" :loading="loading">
-    <OverviewState :configs="overviewConfigs"></OverviewState>
+    <OverviewState :configs="overviewConfigs" @plateformClick="plateformClick"></OverviewState>
     <el-row class="m-t-md" :gutter="10">
       <el-col :span="8" class="left">
         <div class="card">
@@ -31,12 +31,12 @@
         <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>
       <el-col :span="8" class="center">
-        <PlatformCard @changePlatform="change"></PlatformCard>
+        <PlatformCard @changePlatform="change" ref="PlatformCard"></PlatformCard>
         <div class="card h-300">
           <div class="card-title">云主机资源申请趋势</div>
           <div class="card-body">
@@ -69,24 +69,13 @@
 </template>
 
 <script>
-import { reactive, toRefs } from '@vue/composition-api'
+import { reactive, toRefs, ref } from '@vue/composition-api'
 import ScreenWrapper from 'components/ScreenWrapper'
 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, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount } from 'services/screen/resource'
 export default {
   components: {
     ScreenWrapper,
@@ -105,16 +94,24 @@ export default {
       applyTrendData: {},
       usedTrendData: {},
       vendorType: '',
-      loading: true
+      loading: true,
+      isPublic: null
     })
+    const plateformClick = isPublic => {
+      state.isPublic = isPublic
+      init()
+      PlatformCard.value.getVendorsList(isPublic)
+    }
     // 总体情况
     const getOverviewState = async () => {
-      const res = await getOverview()
+      const res = await getOverview({
+        isPublic: state.isPublic
+      })
       if (res.success) {
         // 处理数据对configs赋值
-        const { hosts, servers, running } = res.data
+        const { servers, running } = res.data
         const unit = state.overviewConfigs[0]
-        ;[hosts, servers, running].forEach((item, index) => {
+        ;[servers, running].forEach((item, index) => {
           unit.data[index].value = item
         })
       }
@@ -131,30 +128,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,35 +154,35 @@ export default {
     }
     // 云资源统计
     const getResource = async () => {
-      const res = await getResourceCount(state.vendorType)
+      const res = await getResourceCount({ type: state.vendorType, isPublic: state.isPublic })
       if (res.success) {
         state.resourceCount = res.data
       }
     }
     // 云主机状态
     const getHostCount = async () => {
-      const res = await getHostStatus(state.vendorType)
+      const res = await getHostStatus({ type: state.vendorType, isPublic: state.isPublic })
       if (res.success) {
         state.hostCount = res.data
       }
     }
     // 告警统计
     const getAlarmCount = async () => {
-      const res = await getAlarmPieChart()
+      const res = await getAlarmPieChart(state.isPublic)
       if (res.success) {
         state.alarmCount = res.data
       }
     }
     // 申请趋势
     const getApplyCount = async () => {
-      const res = await getResourceApply(state.vendorType)
+      const res = await getResourceApply({ type: state.vendorType, isPublic: state.isPublic })
       if (res.success) {
         state.applyTrendData = res.data
       }
     }
     // 使用趋势
     const getUsedCount = async () => {
-      const res = await getResourceTrend(state.vendorType)
+      const res = await getResourceTrend({ type: state.vendorType, isPublic: state.isPublic })
       if (res.success) {
         state.usedTrendData = res.data
       }
@@ -219,7 +192,8 @@ export default {
       const res = await getResTops({
         vendorType: state.vendorType,
         type: 'vmCpu',
-        limit: 5
+        limit: 5,
+        isPublic: state.isPublic
       })
       if (res.success) {
         state.cpuTop5 = res.data
@@ -230,41 +204,32 @@ export default {
       const res = await getResTops({
         vendorType: state.vendorType,
         type: 'vmMem',
-        limit: 5
+        limit: 5,
+        isPublic: state.isPublic
       })
       if (res.success) {
         state.memTop5 = res.data
       }
     }
     // 切换平台
-    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
     }
+    const PlatformCard = ref(null)
     init()
     return {
       ...toRefs(state),
-      change
+      change,
+      plateformClick,
+      PlatformCard
     }
   }
 }
@@ -296,7 +261,7 @@ export default {
     height: calc(100% - 30px);
   }
 }
-.resource-count ::v-deep .cell{
+.resource-count ::v-deep .cell {
   height: 85px;
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index a52001c..c5a4e03 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -8,7 +8,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 const httpType = 'https://'
-const proxyUrl = '23.33.3.22:60006' // 代理地址设置
+const proxyUrl = '10.10.33.54:60006' // 代理地址设置
 
 // const proxyUrl = '10.20.51.92:7001' // 代理地址设置
 const publicPath = process.env.NODE_ENV === 'production' ? '/scr-web/' : '/'