remove useless image and add new

package-lock.json

@@ -20,7 +20,7 @@
         "driver.js": "0.9.5",
         "dropzone": "5.5.1",
         "echarts": "^5.0.0",
-        "element-ui": "2.13.2",
+        "element-ui": "^2.13.2",
         "file-saver": "2.0.1",
         "flv.js": "^1.6.2",
         "fuse.js": "3.4.4",
@@ -41,8 +41,6 @@
         "script-loader": "0.7.2",
         "sortablejs": "1.8.4",
         "spark-md5": "^3.0.2",
-        "three": "^0.126.1",
-        "three.meshline": "^1.4.0",
         "vue": "2.6.10",
         "vue-codemirror": "^4.0.6",
         "vue-count-to": "1.0.13",
@@ -21709,16 +21707,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/three": {
-      "version": "0.126.1",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz",
-      "integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
-    },
-    "node_modules/three.meshline": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/three.meshline/-/three.meshline-1.4.0.tgz",
-      "integrity": "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
-    },
     "node_modules/throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
@@ -41533,16 +41521,6 @@
         }
       }
     },
-    "three": {
-      "version": "0.126.1",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz",
-      "integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
-    },
-    "three.meshline": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/three.meshline/-/three.meshline-1.4.0.tgz",
-      "integrity": "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
-    },
     "throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",

package.json

@@ -26,7 +26,7 @@
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "^5.0.0",
-    "element-ui": "2.13.2",
+    "element-ui": "^2.13.2",
     "file-saver": "2.0.1",
     "flv.js": "^1.6.2",
     "fuse.js": "3.4.4",

src/views/monitorSelect/index.vue

@@ -8,59 +8,80 @@
           <a @click="viewMenu()">数算资源</a>
         </div>
       </div> -->
-      <div class="top">
-        <div class="top-title">
-          <h1>综合信息展示</h1>
-        </div>
-      </div>
       <div class="dashboard">
         <el-row :gutter="5">
           <el-col :span="8">
-            <h3>资源中心使用TOP3</h3>
             <el-card class="dashboardChart">
-              <div>cpu</div>
-              <div id="cpuGauge" ref="cpuGauge" />
-              <p>已预留 {{ cpuUsage }}/{{ cpuTotal }}</p>
+              <h3>资源中心使用TOP3</h3>
+              <el-row v-for="(item, index) in UsageTopList" :key="index" class="usageList">
+                <el-col :span="10">
+                  <div :class="'img-'+item.icon" />
+                </el-col>
+                <el-col :span="14">
+                  <div class="area">{{ item.name }}</div>
+                  <table>
+                    <tr>
+                      <td>
+                        <span>cpu</span>
+                      </td>
+                      <td>
+                        <el-progress :stroke-width="8" :percentage="80" />
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <span>内存</span>
+                      </td>
+                      <td>
+                        <el-progress :stroke-width="8" :percentage="50" />
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <span>本地存储</span>
+                      </td>
+                      <td>
+                        <el-progress :stroke-width="8" :percentage="30" />
+                      </td>
+                    </tr>
+                  </table>
+                </el-col>
+              </el-row>
             </el-card>
           </el-col>
           <el-col :span="8">
-            <h3>作业任务</h3>
             <el-card class="dashboardChart">
+              <h3>作业任务</h3>
               <div>内存</div>
               <div id="memoryGauge" ref="memoryGauge" />
               <p>已预留 {{ parseInt(memoryUsage/1024/1024/1024) }}/{{ parseInt(memoryTotal/1024/1024) + 'GiB' }}</p>
             </el-card>
           </el-col>
           <el-col :span="8">
-            <h3>调度情况</h3>
             <el-card class="dashboardChart">
+              <h3>调度情况</h3>
+
               <div>存储</div>
               <div id="storageGauge" ref="storageGauge" />
               <p>已使用 {{ (storageUsage/1024/1024/1024/1024).toFixed(2) }} / {{ (storageTotal/1024/1024/1024/1024).toFixed(2) }} TiB</p>
             </el-card>
           </el-col>
           <el-col :span="12">
-            <h3>消息列表</h3>
             <el-card class="dashboardChart">
-              <!-- <div>事件</div> -->
+              <h3>消息列表</h3>
               <List
                 ref="multipleTable"
                 :table-list-data="listData"
-                :pagination="true"
-                :pagination-auto="true"
                 :columns="columns"
               />
             </el-card>
           </el-col>
           <el-col :span="12">
-            <h3>告警通知</h3>
             <el-card class="dashboardChart">
-              <!-- <div>事件</div> -->
+              <h3>告警通知</h3>
               <List
                 ref="multipleTable"
                 :table-list-data="listData"
-                :pagination="true"
-                :pagination-auto="true"
                 :columns="columns"
               />
             </el-card>
@@ -76,7 +97,7 @@
 
 <script>
 import List from '@/components/list'
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
 import Navbar from '@/layout/components/Navbar'
 import { getDashboardCounts, getDashboardEvents, getDashboardInfo, getUsageStatus, getStorageStatus } from '@/api/virtual-machine/virtualMachine'
 import moment from 'moment'
@@ -88,6 +109,20 @@ export default {
   data() {
     return {
       moment,
+      UsageTopList: [
+        {
+          icon: 'ys',
+          name: '阿里云'
+        },
+        {
+          icon: 'cs',
+          name: '阿里云'
+        },
+        {
+          icon: 'zs',
+          name: '阿里云'
+        }
+      ],
       info: {
         version: '',
         createTime: ''
@@ -140,7 +175,7 @@ export default {
     })
     // 事件数据
     getDashboardEvents().then(res => {
-      this.listData = res.data
+      this.listData = res.data.slice(0, 3)
     })
     Promise.all([
       getDashboardInfo(), // cpu 内存 总量
@@ -189,17 +224,17 @@ export default {
       return moment(t).local().format('YYYY-MM-DD hh:mm:ss')
     },
     drawChart() {
-      const cpuGauge = echarts.init(this.$refs.cpuGauge)
-      cpuGauge.setOption(this.returnGaugeOption(((this.cpuUsage / this.cpuTotal).toFixed(4) * 100).toFixed(2)))
-      const memoryGauge = echarts.init(this.$refs.memoryGauge)
-      memoryGauge.setOption(this.returnGaugeOption(((parseInt(this.memoryUsage / 1024 / 1024 / 1024) / parseInt(this.memoryTotal / 1024 / 1024)) * 100).toFixed(2)))
-      const storageGauge = echarts.init(this.$refs.storageGauge)
-      storageGauge.setOption(this.returnGaugeOption((((this.storageUsage / 1024 / 1024 / 1024 / 1024).toFixed(2) / (this.storageTotal / 1024 / 1024 / 1024 / 1024).toFixed(2)).toFixed(4) * 100).toFixed(2)))
-      window.addEventListener('resize', function() {
-        cpuGauge.resize()
-        memoryGauge.resize()
-        storageGauge.resize()
-      })
+      // const cpuGauge = echarts.init(this.$refs.cpuGauge)
+      // cpuGauge.setOption(this.returnGaugeOption(((this.cpuUsage / this.cpuTotal).toFixed(4) * 100).toFixed(2)))
+      // const memoryGauge = echarts.init(this.$refs.memoryGauge)
+      // memoryGauge.setOption(this.returnGaugeOption(((parseInt(this.memoryUsage / 1024 / 1024 / 1024) / parseInt(this.memoryTotal / 1024 / 1024)) * 100).toFixed(2)))
+      // const storageGauge = echarts.init(this.$refs.storageGauge)
+      // storageGauge.setOption(this.returnGaugeOption((((this.storageUsage / 1024 / 1024 / 1024 / 1024).toFixed(2) / (this.storageTotal / 1024 / 1024 / 1024 / 1024).toFixed(2)).toFixed(4) * 100).toFixed(2)))
+      // window.addEventListener('resize', function() {
+      //   cpuGauge.resize()
+      //   memoryGauge.resize()
+      //   storageGauge.resize()
+      // })
     },
     returnGaugeOption(data) {
       return {
@@ -288,10 +323,64 @@ export default {
 
 .monitor{
   padding: 0 20px;
-  .el-row{
+  .dashboardChart{
     h3{
-      padding: 0 15px;
+      padding: 0;
+      margin: 0;
+      margin-bottom: 20px;
+      font-size: 1.2rem;
     }
+    .usageList{
+      width: 100%;
+      // height: 8vh;
+
+      $class-prefix: "img";
+      .#{$class-prefix} {
+        width: 100%;
+        height: 8vh;
+        display: block;
+        background-size: auto 100%;
+        &-cs{
+          background: url('../../assets/monitor/cs.png') center no-repeat;
+          width: 100%;
+        height: 8vh;
+        display: block;
+        background-size: auto 100%;
+        }
+        &-ys{
+          background: url('../../assets/monitor/ys.png') center no-repeat;
+          width: 100%;
+        height: 8vh;
+        display: block;
+        background-size: auto 100%;
+        }
+        &-zs{
+          background: url('../../assets/monitor/zs.png') center no-repeat;
+          width: 100%;
+        height: 8vh;
+        display: block;
+        background-size: auto 100%;
+        }
+      }
+      // .img-cs{
+      // }
+      // .img-ys{
+      //   width: 100%;
+      //   height: 8vh;
+      //   display: block;
+      //   background: url('../../assets/monitor/ys.png') center no-repeat;
+      //   background-size: auto 100%;
+      // }
+      // .img-zs{
+      //   width: 100%;
+      //   height: 8vh;
+      //   display: block;
+      //   background: url('../../assets/monitor/zs.png') center no-repeat;
+      //   background-size: auto 100%;
+      // }
+
+    }
+
   }
 }
 ::v-deep {

yarn.lock

@@ -4792,7 +4792,7 @@
   dependencies:
     "batch-processor" "1.0.0"
 
-"element-ui@2.13.2":
+"element-ui@^2.13.2":
   "integrity" "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ=="
   "resolved" "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz"
   "version" "2.13.2"
@@ -12332,16 +12332,6 @@
     "loader-utils" "^1.1.0"
     "neo-async" "^2.6.0"
 
-"three.meshline@^1.4.0":
-  "integrity" "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
-  "resolved" "https://registry.npmmirror.com/three.meshline/-/three.meshline-1.4.0.tgz"
-  "version" "1.4.0"
-
-"three@^0.126.1":
-  "integrity" "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
-  "resolved" "https://registry.npmjs.org/three/-/three-0.126.1.tgz"
-  "version" "0.126.1"
-
 "throat@^4.0.0":
   "integrity" "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
   "resolved" "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz"