Add overview data for cluster pages

src/api/container/cluster.js

@@ -16,3 +16,10 @@ export function getServerResources() {
     method: 'get'
   })
 }
+
+export function getClusterSum() {
+  return request({
+    url: '/pcm/v1/adapter/clusterSum',
+    method: 'get'
+  })
+}

src/views/cluster/index.vue

@@ -8,6 +8,32 @@
         对多集群以及每个集群的基础资源, 服务组件和应用资源等的统一管理
       </span>
     </el-card>
+    <el-row>
+      <el-col :span="8">
+        <el-card>
+          <div class="nodeType">
+            <div>集群总数</div>
+            <div class="nodeNum">{{ sumData.ClusterSum || 0 }}</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <div class="nodeType nodeType-2">
+            <div>驱动器总数</div>
+            <div class="nodeNum">{{ sumData.AdapterSum || 0 }}</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <div class="nodeType nodeType-3">
+            <div>任务总数</div>
+            <div class="nodeNum">{{ sumData.TaskSum || 0 }}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
     <el-card>
       <List
         ref="multipleTable"
@@ -24,7 +50,7 @@
 <script>
 import List from '@/components/list'
 import Navbar from '@/layout/components/Navbar'
-import { getClusterList } from '@/api/container/cluster'
+import { getClusterList, getClusterSum } from '@/api/container/cluster'
 
 export default {
   name: 'Cluster',
@@ -32,36 +58,54 @@ export default {
   data() {
     return {
       getClusterList,
-      clusterNum: 0,
+      sumData: {},
       columns: [
         { prop: 'name', label: '集群名', formatter: (row) => { return <a onClick={() => this.selectCluster(row)}>{row.name}</a> } },
         { prop: 'label', label: '分类', formatter: (row) => { return row.label === 'openstack' ? '虚拟机集群' : '容器集群' } },
         { prop: 'description', label: '描述' },
-        // { prop: 'group', label: '演示环境' },
-        // { prop: 'node_num', label: '节点数' },
         { prop: 'version', label: 'kubernetes版本' },
         { prop: 'createTime', label: '创建时间', formatter: (row) => { return row.createTime } }
       ]
     }
   },
-  created() {},
+  mounted() {
+    getClusterSum().then(response => {
+      this.sumData = response.data
+    })
+  },
   methods: {
     selectCluster(row) {
       // set cluster
-      // 设置左侧菜单
+      // set left menu
       this.$store.dispatch('user/setRouteType', row.label === 'openstack' ? 'virtual' : 'cluster')
       this.$store.dispatch('cluster/setCluster', row.name)
-      // 边缘节点
+      // edge node
       // this.$store.dispatch('cluster/setEdge', row.edge)
       this.$store.dispatch('cluster/setMonitor', row.monitoring)
 
-      // 根据集群类型 分别跳转到容器概览或虚拟机概览
+      // Jump to container overview or virtual machine overview based on cluster type
       this.$router.push({ name: row.label === 'openstack' ? 'virtualOverview' : 'clusterOverview', params: { 'clusterName': row.name }})
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.nodeType{
+  background: url('../../assets/images/exhibition/node-1.png') no-repeat Top left;
+  background-size: auto 6vh;
+  padding-left: 100px;
+  min-height: 6vh;
+  .nodeNum{
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 10px;
+  }
+}
+.nodeType-2{
+  background-image: url('../../assets/images/exhibition/node-2.png');
+}
+.nodeType-3{
+  background-image: url('../../assets/images/exhibition/node-3.png');
+}
 </style>

src/views/nodeManagement/index.vue

@@ -82,7 +82,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #gaugeChart{
   width: 100%;
   height: 110px;

vue.config.js

@@ -49,14 +49,12 @@ module.exports = {
       '^/jcc-': {
         ws: false,
         target: 'https://dev.jointcloud.net/apis',
-        // target: 'https://jointcloud.net/apis',
         changeOrigin: true,
         secure: false
       },
       '^/pcm': {
         ws: false,
         target: 'https://jcos.jointcloud.net:443/',
-        // target: 'https://jointcloud.net/apis',
         changeOrigin: true,
         secure: false
       }