fix

src/components/list.vue

@@ -157,6 +157,9 @@ export default {
     isRefresh: { // 是否定时刷新
       type: Boolean,
       default: false
+    },
+    tableListData: {
+      type: Array
     }
   },
   data() {
@@ -171,7 +174,12 @@ export default {
     }
   },
   mounted() {
-    this.getList()
+    if (this.funcName) {
+      this.getList()
+    } else {
+      this.tableData = this.tableListData
+    }
+
     this.listColumns = this.columns || this.mapToColums(this.map)
   },
   beforeDestroy() {

src/main.js

@@ -14,7 +14,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 
-import echarts from 'echarts'
+// import echarts from 'echarts'
 import axios from 'axios'
 
 import './icons' // icon
@@ -36,7 +36,7 @@ import HandleFunc from '@/utils/get-Kube-List' // global filters
 //   const { mockXHR } = require('../mock')
 //   mockXHR()
 // }
-Vue.prototype.$echarts = echarts
+// Vue.prototype.$echarts = echarts
 Vue.prototype.$ajax = axios
 Vue.prototype.$HandleFunc = HandleFunc
 

src/views/overview/components/virtualMachine.vue

@@ -1,14 +1,20 @@
 <template>
-  <el-card shadow="never">
+  <el-card shadow="never" class="virtualMachineChart">
     <el-row :gutter="5">
       <el-col :span="8">
         <h4>cpu</h4>
+        <div id="cpuGauge" ref="cpuGauge" />
+        <p>cpu4中的0.39</p>
       </el-col>
       <el-col :span="8">
-        <h4>cpu</h4>
+        <h4>内存</h4>
+        <div id="memoryGauge" ref="memoryGauge" />
+        <p>内存7.75GiB中的4.27</p>
       </el-col>
       <el-col :span="8">
-        <h4>cpu</h4>
+        <h4>存储</h4>
+        <div id="storageGauge" ref="storageGauge" />
+        <p>存储197GiB中的9.84</p>
       </el-col>
 
     </el-row>
@@ -26,19 +32,134 @@
         <td>3</td>
         <td>2</td>
         <td>2</td>
-
       </tr>
     </table>
     <h4>事件</h4>
+    <List
+      ref="multipleTable"
+      :table-list-data="listData"
+      :columns="columns"
+    />
   </el-card>
 </template>
 
 <script>
-export default {
+import List from '@/components/list'
+import * as echarts from 'echarts'
 
+export default {
+  components: { List },
+  data() {
+    return {
+      columns: [
+        { prop: 'reason', label: '原因', width: '150' },
+        { prop: 'info', label: '资源信息' },
+        { prop: 'time', label: '发生时间', width: '150' }
+      ],
+      listData: [
+        {
+          reason: 'Created',
+          info: 'VirtualMachineInstance educoder-main   VirtualMachineInstance defined. ',
+          time: '2021/4/23 9:40'
+        },
+        {
+          reason: 'Started',
+          info: 'VirtualMachineInstance educoder-main   VirtualMachineInstance defined. ',
+          time: '2021/4/23 9:40'
+        },
+        {
+          reason: 'Stopped',
+          info: 'VirtualMachineInstance educoder-main   VirtualMachineInstance defined. ',
+          time: '2021/4/23 9:40'
+        }
+      ],
+      cpuGaugeOption: {
+        series: [
+          {
+            type: 'gauge',
+            detail: {
+              formatter: '{value}%',
+              color: '#000000',
+              fontSize: 20,
+              offsetCenter: [0, '0']
+            },
+            center: ['50%', '78%'],
+            radius: '100%',
+            data: [{ value: 16 }],
+            itemStyle: {
+              color: 'transparent'
+              // show: false,
+            },
+            // splitLine: { show: false },
+            // axisTick: { show: false },
+            axisLabel: { show: false },
+
+            startAngle: 200,
+            endAngle: -20,
+            // progress: {
+            //   show: false,
+            //   // width: 1,
+            //   // itemStyle: { color: '#419ef4' }
+            // },
+
+            axisTick: {
+              length: 16,
+              lineStyle: {
+                color: 'auto',
+                width: 1
+              }
+            },
+            splitLine: {
+              length: 20,
+              lineStyle: {
+                color: 'auto',
+                width: 2
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                width: 6,
+                color: [
+                  [0.16, '#419ef4'],
+                  [1, '#dddddd']
+                ]
+              }
+            }
+            // axisLine: { lineStyle: { color: [[1, '#409eff']], width: 10 }}
+
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    console.log('fff')
+    this.$nextTick(() => {
+      this.drawChart()
+    })
+  },
+  methods: {
+    drawChart() {
+      const cpuGauge = echarts.init(this.$refs.cpuGauge)
+      cpuGauge.setOption(this.cpuGaugeOption)
+      const memoryGauge = echarts.init(this.$refs.memoryGauge)
+      memoryGauge.setOption(this.cpuGaugeOption)
+      const storageGauge = echarts.init(this.$refs.storageGauge)
+      storageGauge.setOption(this.cpuGaugeOption)
+    }
+  }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+#cpuGauge,#memoryGauge,#storageGauge{
+  width: 100%;
+  height: 210px;
+}
+.virtualMachineChart{
+  p{
+    text-align: center;
+  }
+}
 
 </style>

src/views/overview/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" class="overviewTabs" @tab-click="handleClick">
+    <el-tabs v-model="activeName" class="overviewTabs">
       <el-tab-pane name="first">
         <!-- <span ><i class="el-icon-date"></i> 我的行程</span> -->
         <el-card slot="label" class="overviewTab" shadow="never">
@@ -14,7 +14,7 @@
           <img src="@/assets/img/host.png">
           <h4>虚拟机概览</h4>
         </el-card>
-        <VirtualMachine />
+        <VirtualMachine v-if="activeName==='second'" />
       </el-tab-pane>
       <el-tab-pane name="third">
         <el-card slot="label" class="overviewTab" shadow="never">