feat: 修改

src/components/OverviewState/index.vue

@@ -11,16 +11,20 @@
         <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 :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>
-          </template>
+        </div>
-          <template v-if="item.type === 'PROGRESS'">
+        <div v-else>
+          <div>{{ cell.title }}</div>
+          <div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
+        </div>
+        <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>
-          </template>
+        </div>
       </div>
     </el-col>
     <!-- </dv-border-box-8> -->
@@ -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;

src/services/screen/resource.js

@@ -1,8 +1,8 @@
 import request from 'utils/request'
 import { wrapperParams } from 'utils'
-
+import { isObject } from 'lodash-es'
 export function getOverview(type) {
-  return request.get('/cos/v1/cloud/resource/overview', { params: { type } })
+  return request.get('/cos/v1/cloud/resource/overview', { params: isObject(type) ? type : { type } })
 }
 export function getPlatformOverview(type) {
   return request.get('/cos/v1/cloud/resource', { params: { type } })
@@ -20,18 +20,18 @@ 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 } })
+  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 } })
+  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() {
+export function getVendorTypes(isPublic) {
-  return request.get('/cos/v1/cloud/resource/types')
+  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 }
   })
 }

src/views/resource_screen/PlatformCard.vue

@@ -5,7 +5,7 @@
       <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="">
+          <img :src="item.icon" alt="" />
           <span>{{ item.name }}</span>
         </div>
       </div>
@@ -39,9 +39,9 @@ export default {
     const state = reactive({
       list: []
     })
-    let style;
+    let style
-    const getVendorsList = async () => {
+    const getVendorsList = async (isPublic = null) => {
-      const res = await getVendorTypes();
+      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
     }
   }
 }

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

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">
@@ -36,7 +36,7 @@
         </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 {
+import { getOverview, getPlatformOverview, getPlatforms, getAlarmPieChart, getResourceApply, getResourceTrend, getResTops, getHostStatus, getResourceCount } from 'services/screen/resource'
-  getOverview,
-  getPlatformOverview,
-  getUsed,
-  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 = [
+      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
     }
+    const PlatformCard = ref(null)
     init()
     return {
       ...toRefs(state),
-      change
+      change,
+      plateformClick,
+      PlatformCard
     }
   }
 }

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/' : '/'