From 9d5749906553853c536b9874caebdd453e84ddf9 Mon Sep 17 00:00:00 2001
From: ann <aannzee@gmail.com>
Date: Mon, 15 Jan 2024 16:57:52 +0800
Subject: [PATCH] rewrite dashboard page

---
 src/views/monitorSelect/index.vue | 977 ++++++++----------------------
 1 file changed, 243 insertions(+), 734 deletions(-)

diff --git a/src/views/monitorSelect/index.vue b/src/views/monitorSelect/index.vue
index 295b604..e2638f9 100644
--- a/src/views/monitorSelect/index.vue
+++ b/src/views/monitorSelect/index.vue
@@ -1,200 +1,124 @@
 <template>
   <div>
+    <Navbar />
     <div class="monitor">
-      <div class="top-menu">
+      <!-- <div class="top-menu">
         <div class="menu">
           <a href="">首页</a>
           <a @click="viewMenu()">数算资源</a>
         </div>
-        <div class="right">
-          <a @click="viewMenu('hpc/hpcOverview')">超算资源</a>
-          <a @click="viewMenu('modelarts/autoStudy')">智算资源</a>
-        </div>
-      </div>
+      </div> -->
       <div class="top">
         <div class="top-title">
-          <h1>{{ monitorSettingForm.title }}</h1>
+          <h1>综合信息展示</h1>
         </div>
       </div>
-      <div class="floatLeft">
-        <div class="left">
-          <div class="left_1">
-            <div class="title"><p>计算域信息</p></div>
-            <ComputeDomain />
-          </div>
-          <div class="left_2">
-            <div class="title"><p>云际组件状态</p></div>
-            <el-row class="taskDiv">
-              <el-col v-for="(item,index) in taskDetail" :key="'task'+index" :span="12">
-                <div class="num">{{ item.num }}</div>
-                <div class="name">{{ item.name }}</div>
-              </el-col>
-            </el-row>
-            <!-- <ComputingPowerTrend id="ComputingPowerTrend" :data="tendData" :config="tendConfig" /> -->
-          </div>
-          <div class="left_3">
-            <div class="title"><p>存储资源用量</p></div>
-            <StorageResourceUsage />
-            <!-- <ComputingPowerUse id="ComputingPowerUse" :data="centerData" :config="statusConfig" /> -->
-          </div>
-          <!-- <div class="left_4">
-            <div class="title"><p>分布记账</p></div>
-            <ChainLink :key="resizeKey" />
-          </div> -->
-        </div>
-      </div>
-      <div class="floatRight">
-        <div class="right">
-          <div class="right_1">
-            <div class="title"> <el-button class="createBtn" type="primary" size="mini" round @click="dialogVisible = true"><div>创建跨域调度任务</div></el-button><p>累计任务情况</p></div>
-            <CumulativeTasks :data="taskData" />
-          </div>
-          <div class="right_2">
-            <div class="title"><p>计算资源整体负载</p></div>
-            <ResourceLoadWhole />
-          </div>
-          <div class="right_3">
-            <div class="title"><p>计算资源平均负载</p></div>
-            <ResourceLoadAverage />
-          </div>
-        </div>
-      </div>
-      <div class="middle">
-        <ComputingPowerTotal />
+      <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>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <h3>作业任务</h3>
+            <el-card class="dashboardChart">
+              <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">
+              <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> -->
+              <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> -->
+              <List
+                ref="multipleTable"
+                :table-list-data="listData"
+                :pagination="true"
+                :pagination-auto="true"
+                :columns="columns"
+              />
+            </el-card>
+          </el-col>
+
+        </el-row>
+
       </div>
     </div>
-    <el-dialog
-      title="创建云际跨域任务"
-      :visible.sync="dialogVisible"
-      width="30%"
-    >
-      <el-upload
-        action="#"
-        :http-request="httpRequest"
-        :limit="1"
-        :on-remove="handleRemove"
-        :file-list="fileList"
-      >
-        <el-button size="small" type="primary">点击选择yaml文件</el-button>
-      </el-upload>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitFile()">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 
 </template>
 
 <script>
+import List from '@/components/list'
+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'
-import ComputeDomain from './components/ComputeDomain.vue'
-import ComputingPowerTotal from './components/ComputingPowerTotal.vue'
-import ResourceLoadWhole from './components/ResourceLoadWhole.vue'
-import ResourceLoadAverage from './components/ResourceLoadAverage.vue'
-import CumulativeTasks from './components/CumulativeTasks.vue'
-import StorageResourceUsage from './components/StorageResourceUsage.vue'
-import { getComputePower, getCPUsage } from '@/api/container/monitorSelect.js'
-import { getTaskCount, createScheduleTask } from '@/api/top-menu/TotalNum'
-import { order } from '@/utils/data-process'
-import { getMonitorSetting } from '@/api/container/monitorSelect'
-import { debounce } from '@/utils'
+import { parseSi } from '@/utils'
+import variables from '@/styles/variables.js'
 
 export default {
-  components: { ComputeDomain, ComputingPowerTotal, ResourceLoadAverage, ResourceLoadWhole, CumulativeTasks, StorageResourceUsage },
+  components: { List, Navbar },
   data() {
     return {
-      monitorSettingForm: {
-        'title': '广域协同智能计算系统面板',
-        'titleColor': '#409EFF',
-        'mainColor': '',
-        'mainColor2': '',
-        'textColor': '',
-        'backgroundColor': '',
-        'center': '',
-        'centerPosition': '',
-        'provinceBgColor': ''
+      moment,
+      info: {
+        version: '',
+        createTime: ''
       },
-      taskDetail: [
-        {
-          name: 'API每秒请求数 times/s',
-          num: 119.083
-        },
-        {
-          name: 'API请求延迟 ms',
-          num: 2.71
-        },
-        {
-          name: '调度器 调度次数',
-          num: 5
-        },
-        {
-          name: '调度失败的 容器节点',
-          num: 1
-        }
+      counts: {
+        host: '',
+        virtualMachine: '',
+        networking: '',
+        mirror: '',
+        volume: ''
+      },
+      columns: [
+        { prop: 'reason', label: '原因', width: '150' },
+        { prop: 'info', label: '事件详情', formatter: (row) => {
+          return <div>
+            <span>{row.involvedObject.kind + ' ' + row.involvedObject.name}</span> <br />
+            <span>{row.message}</span>
+          </div>
+        } },
+        { prop: 'lastTimestamp', label: '更新时间', width: '160', formatter: (row) => {
+          return <div>{this.formatDate(row.lastTimestamp)}</div>
+        } }
       ],
-      resizeKey: 0,
-      dialogVisible: false,
-      rs: new FormData(),
-      fileList: [],
-      pageSize: 100,
-      taskData: {},
-      currentDate: '',
-      tendData: { used: [], xData: [] },
-      centerData: { used: [], xData: [] },
-      tendConfig: { unit: '单位:  卡时', status: ['使用量'] },
-      statusConfig: { unit: '单位:  卡时', status: ['使用量'] },
-      tabLightList: [
-        {
-          id: 'cluster',
-          title: '容器管理',
-          icon: 'rongqiguanli',
-          path: '/cluster/clusterMapViews'
-        },
-        {
-          id: 'virtual',
-          title: '虚拟机管理',
-          icon: 'xunijiguanlimokuai',
-          path: '/virtual/overview'
-        },
-        {
-          id: 'jccSchedule',
-          title: '调度中心',
-          icon: 'yunweijiankongmokuai',
-          path: '/jccSchedule/resourceLogicView'
-        },
-        {
-          id: 'disk',
-          title: '云际存储',
-          icon: 'xunijiguanli-juan',
-          path: '/disk'
-        },
-        {
-          id: 'functions',
-          title: '函数管理',
-          icon: 'fuwu',
-          path: '/functions/overview'
-        },
-        {
-          id: 'blockChain',
-          title: '云际记账',
-          icon: 'yunjijizhang',
-          path: '/blockChain/blockChainBrowser'
-        },
-        {
-          id: 'hpc',
-          title: '超算管理',
-          icon: 'fuwu',
-          path: '/hpc/hpcOverview'
-        },
-        {
-          id: 'hpc',
-          title: '智算管理',
-          icon: 'fuwu',
-          description: '智算管理描述',
-          path: '/modelarts/overview'
-        }
-      ]
+      listData: [
+      ],
+      cpuTotal: 0,
+      memoryTotal: 0,
+      storageTotal: 0,
+      cpuUsage: 0,
+      memoryUsage: 0,
+      storageUsage: 0
     }
   },
   computed: {
@@ -206,211 +130,153 @@ export default {
     }
   },
   created() {
-    getMonitorSetting().then(e => {
-      this.monitorSettingForm = e.data
+    // 表格数据
+    getDashboardCounts().then(res => {
+      this.counts.host = res.data[0].counts.node.summary.count
+      this.counts.virtualMachine = res.data[0].counts['kubevirt.io.virtualmachine'].summary.count
+      this.counts.networking = res.data[0].counts['k8s.cni.cncf.io.networkattachmentdefinition'].summary.count
+      this.counts.mirror = res.data[0].counts['harvesterhci.io.virtualmachineimage'].summary.count - (res.data[0].counts['harvesterhci.io.virtualmachineimage'].summary.errors || 0)
+      this.counts.volume = res.data[0].counts['longhorn.io.volume'].summary.count
+    })
+    // 事件数据
+    getDashboardEvents().then(res => {
+      this.listData = res.data
+    })
+    Promise.all([
+      getDashboardInfo(), // cpu 内存 总量
+      getUsageStatus(), // cpu 内存 使用量
+      getStorageStatus()]).then(res => {
+      res[0].data.forEach(element => {
+        this.cpuTotal += Number(element.status.capacity.cpu)
+        this.memoryTotal += Number(element.status.capacity.memory.replace('Ki', ''))
+        if (element.metadata.fields[2].indexOf('master') > -1) {
+          this.info.version = element.metadata.fields[7].replace('Harvester ', '')
+          this.info.createTime = element.metadata.fields[3].replace('d', '天').replace('h', '小时')
+        }
+      })
+      this.memoryUsage = 0
+      this.cpuUsage = 0
+      res[1].data.forEach(element => {
+        const containers = element.spec.containers || []
+        let memoryCounts = 0
+        let cpuCounts = 0
+        containers.forEach(e => {
+          memoryCounts += parseSi(e?.resources?.requests?.memory || '0m', { increment: 1024 })
+          cpuCounts += parseSi(e?.resources?.requests?.cpu || '0m')
+        })
+        this.memoryUsage += memoryCounts
+        this.cpuUsage += cpuCounts
+      })
+      this.cpuUsage = parseInt(this.cpuUsage)
+      this.storageUsage = 0
+      this.storageTotal = 0
+      res[2].data.forEach(element => {
+        const diskStatus = element.status?.diskStatus || {}
+        Object.values(diskStatus).map((disk) => {
+          if (disk?.conditions?.Schedulable?.status === 'True' && disk?.storageAvailable && disk?.storageMaximum) {
+            this.storageUsage += (disk.storageMaximum - disk.storageAvailable)
+          }
+          if (disk?.storageMaximum) {
+            this.storageTotal += disk.storageMaximum
+          }
+        })
+      })
+      this.drawChart()
     })
-    this.getTend()
-    this.getAccrueCenter()
-    this.getTrainJob()
-    this.resize()
-
-    window.addEventListener('resize', debounce(() => {
-      this.resizeKey++
-    }, 100))
-  },
-  mounted() {
-    // this.scaleListener()
   },
   methods: {
-    handleRemove() {
-      this.rs.delete('file')
+    formatDate(t) {
+      return moment(t).local().format('YYYY-MM-DD hh:mm:ss')
     },
-    httpRequest(data) {
-      const isJar = data.file.name.indexOf('.yaml') === (data.file.name.length - 5)
-      if (!isJar) {
-        this.$message.warning('上传文件只能是 yaml 格式!')
-      } else {
-        this.rs.set('file', data.file)
-      }
+    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()
+      })
     },
-    submitFile() {
-      if (!this.rs.has('file')) {
-        this.$message.warning('请上传yaml文件')
-        return false
-      } else {
-        createScheduleTask(this.rs).then(res => {
-          if (res.code === 200) {
-            this.$message.success('操作成功')
-            this.dialogVisible = false
-            this.getTrainJob()
-          }
-        })
-      }
-    },
-    viewMenu(path) {
-      path ? this.$store.dispatch('user/setRouteType', path.split('/')[0]) : {}
-      this.$router.push({ path: path || `/monitorSelectBk` })
-    },
-    // scaleListener() {
-    //   window.addEventListener('resize', this.resize())
-    // },
-    resize() {
-      // 与原来 1080 的比值
-      const scale = window.innerHeight / 900
-      if (scale >= 1) {
-        document.documentElement.style.fontSize = `${16 * scale}px`
-      } else {
-        document.documentElement.style.fontSize = `${14 * scale}px`
-      }
-    },
-    getCurrentDate() {
-      const date = moment().format('yyyy年MM月DD日')
-      const week = moment().format('E')
-      switch (week) {
-        case '1':
-          this.currentDate = date + ' ' + '星期一'
-          break
-        case '2':
-          this.currentDate = date + ' ' + '星期二'
-          break
-        case '3':
-          this.currentDate = date + ' ' + '星期三'
-          break
-        case '4':
-          this.currentDate = date + ' ' + '星期四'
-          break
-        case '5':
-          this.currentDate = date + ' ' + '星期五'
-          break
-        case '6':
-          this.currentDate = date + ' ' + '星期六'
-          break
-        case '0':
-          this.currentDate = date + ' ' + '星期日'
-          break
-      }
-    },
-    // changePage(type) {
-    //   if (type === 'left') {
-    //     // 滑动到最左
-    //   } else {
-    //     // 滑到最右
-    //   }
-    // },
-    getImg(src) {
-      const srcName = src === 'disk' || src === 'jccSchedule' ? 'blockChain' : src
-      return require('@/assets/img/' + srcName + '.png')
-    },
-    selectMonitor(monitor) {
-      if (monitor === '/disk') {
-        if (this.name === 'admin') {
-          window.location.href = '/disk/storage/sourceSetting'
-        } else {
-          window.location.href = '/disk/storage/diskList'
-        }
-      }
-      this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
-      this.$router.push({ path: monitor })
-    },
-    getTend() {
-      getComputePower().then((res) => {
-        this.tendData = { used: [], xData: [] }
-        if (res.dailyComputerPowers !== null) {
-          const timeArr = []// 最近12个月的月份
-          for (let i = 0; i < 180; i++) {
-            timeArr.push(
-              `${moment(new Date()).subtract(i, 'days').format('YYYY-MM-DD')}`
-            )
-          }
-          timeArr.reverse()// 时间排序
-          const arr = [] // 模拟一个假数据
-          for (let i = 0; i < timeArr.length; i++) {
-            arr.push({ date: timeArr[i], computerPower: 0 })
-            // 将真实数据塞进arr里面
-            for (let j = 0; j < res.dailyComputerPowers.length; j++) {
-              if (res.dailyComputerPowers[j].date === timeArr[i]) {
-                arr[i] = { date: res.dailyComputerPowers[j].date, computerPower: res.dailyComputerPowers[j].computerPower }
+    returnGaugeOption(data) {
+      return {
+        series: [
+          {
+            type: 'gauge',
+            detail: {
+              formatter: '{value}%',
+              color: variables[this.jcceTheme].vitualGaugeColor,
+              fontSize: 24,
+              fontFamily: 'Impact',
+              fontWeight: '400',
+              offsetCenter: [0, '30%']
+            },
+            center: ['50%', '70%'],
+            radius: '125%',
+            data: [{ value: data }],
+            itemStyle: {
+              color: 'rgba(49, 130, 206, 1)'
+              // show: false,
+            },
+            // splitLine: { show: false },
+            // axisTick: { show: false },
+            axisLabel: { show: false },
+
+            startAngle: 200,
+            endAngle: -20,
+
+            // pointer: {
+            //   width: 10,
+            //   length: '70%'
+            // },
+            pointer: {
+              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+              width: 8,
+              length: '70%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: 'rgba(49, 130, 206, 1)',
+                shadowColor: 'rgba(49, 130, 206, 1)',
+                shadowBlur: 8,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 10
+            },
+            axisTick: {
+              length: 16,
+              lineStyle: {
+                color: 'auto',
+                width: 1
+              }
+            },
+            splitLine: {
+              length: 20,
+              lineStyle: {
+                color: 'auto',
+                width: 2
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                width: 12,
+                color: [
+                  [data / 100, 'rgba(49, 130, 206, 1)'],
+                  [1, 'rgba(228, 240, 251, 1)']
+                ]
               }
             }
+            // axisLine: { lineStyle: { color: [[1, '#409eff']], width: 10 }}
+
           }
-          arr.forEach((item) => {
-            this.tendData.used.push(item.computerPower.toFixed(1))
-            this.tendData.xData.push(item.date)
-          })
-        }
-      })
-    },
-    getTaskTotal() {
-      // getAccrueCenter().then((res) => {
-      //   if (res.perCenterComputerPowers) {
-      //     const data = res.accOtJobInfo
-      //     this.accrueData = {
-      //       config1: data.accCardRunSec,
-      //       config2: data.accOtJobNum,
-      //       config3: data.accRunSec
-      //     }
-      //   }
-      // })
-    },
-    getAccrueCenter() {
-      getCPUsage().then((res) => {
-        this.centerData = { used: [], xData: [] }
-        if (res.perCenterComputerPowers) {
-          const data = res.accOtJobInfo
-          this.accrueData = {
-            config1: data.accCardRunSec,
-            config2: data.accOtJobNum,
-            config3: data.accRunSec
-          }
-          const data1 = res.perCenterComputerPowers.filter(item => {
-            if (item.computerPower !== 0) {
-              return item
-            }
-          })
-          // this.timer = setInterval(() => {
-          //   this.getTaskTotal()
-          // }, 1000)
-          data1.sort(order)
-          data1.forEach((item) => {
-            if (item.computerPower !== 0) {
-              this.centerData.used.push(item.computerPower.toFixed(1))
-              this.centerData.xData.push(item.centerName)
-            }
-          })
-        }
-      })
-    },
-    getTrainJob() {
-      getTaskCount().then(e => {
-        this.taskData = {
-          tableData: [],
-          totalCount: e.data?.allJobCount || 0,
-          cardTime: e.data?.allCardRunTime || 0,
-          totalRunTime: e.data?.allJobRunTime || 0
-        }
-        e.data?.trainJobs?.forEach((item) => {
-          this.taskData.tableData.push({
-            name: item.name,
-            status: item.status,
-            strategy: item.strategy,
-            serviceName: item.serviceName,
-            synergyStatus: item.synergyStatus
-            // undertaker: this.showUnderTaker(item)
-          })
-        })
-      })
-    },
-    showUnderTaker(item) {
-      if (item.tasks == null) {
-        return ''
-      } else if (item.tasks.length > 2) {
-        return item.tasks[0].centerName[0] + '等'
-      } else {
-        if (item.tasks[0].centerName == null) {
-          return ''
-        } else {
-          return item.tasks[0].centerName[0]
-        }
+        ]
       }
     }
   }
@@ -420,6 +286,14 @@ export default {
 <style lang="scss" scoped>
 @import "~@/styles/variables.scss";
 
+.monitor{
+  padding: 0 20px;
+  .el-row{
+    h3{
+      padding: 0 15px;
+    }
+  }
+}
 ::v-deep {
   .el-dialog {
     background: #2c3a4e !important;
@@ -441,371 +315,6 @@ export default {
   }
 }
 
-.monitor {
-  background: url('../../assets/monitor/monitor_bg.jpeg') no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  min-width: 1200px;
-  height: 100vh;
-  min-height: 900px;
-  overflow: hidden;
-  color: white;
-  font-size: 0.8rem;
-  font-family: Source Han Sans CN;
-  font-weight: 400;
-  display: block;
-  overflow: hidden;
-  .top {
-    width: 100%;
-    height: 8vh;
-    // vertical-align: baseline;
-    position: absolute;
-    z-index: 99;
-    background: url(../../assets/monitor/top-bg.png) center top no-repeat;
-    background-size: 100% 65%;
-    .top-title{
-      margin:0 auto;
-      // font-weight: bold;
-      // font-family: PangMenZhengDao;
-      // float: left;
-      // padding: 1rem 8rem;
-      // padding-right: 0;
-      height: 100%;
-      background: url(../../assets/monitor/c-top.png) center no-repeat;
-      background-size: 55% 10vh;
-      h1{
-        margin: 0;
-        font-size: 2rem;
-        line-height: 6vh;
-        letter-spacing: 0.3rem;
-        text-align: center;
-        text-shadow: 3px 5px 0px rgba(17,20,22,0.22);
-        background: linear-gradient(0deg, rgba(36,83,152,0.35) 0%, rgba(255,255,255,0.35) 100%);
-        background-clip: text;
-        -webkit-text-fill-color: #ffffff;
-        // background: linear-gradient(0deg, rgba(36,83,152,0.35) 0%, rgba(255,255,255,0.35) 100%);
-        // -webkit-background-clip: text;
-        // -webkit-text-fill-color: transparent;
-      }
-      // box-shadow: 0px 20px 10px 0px #02020a96;
-    }
-  }
-  .top-menu{
-    width: 100%;
-    position: absolute;
-    z-index: 100;
-    .menu a, .right a {
-      float: left;
-      font-size: 1.13rem;
-      display: block;
-      padding: 0.9rem 60px;
-      height: 3.5rem;
-      letter-spacing: 0.2rem;
-    }
-    .menu a, .right a{
-      &:hover{
-        background: url(../../assets/monitor/t-p.png) center no-repeat;
-        background-size: auto 70%;
-      }
-    }
-    .menu a:first-child{
-      background: url(../../assets/monitor/t-p.png) center no-repeat;
-      background-size: auto 70%;
-    }
-    .right {
-      a { float: right;}
-      // float: right;
-    }
-
-  }
-  .title{
-    background: url('../../assets/monitor/title-bg.png') no-repeat left;
-    background-size: 105% 100%;
-    background-position: -3.5vh;
-    height: 4.5vh;
-    p{
-      font-size: 1.4rem;
-      height: 2.8rem;
-      line-height: 2.3rem;
-      text-indent: 2.8vw;
-      margin: 0;
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      color: #FFFFFF;
-      letter-spacing: 0.2rem;
-      text-shadow: 0px 2px 8px rgba(5,28,55,0.42);
-
-      background: linear-gradient(0deg, rgba(14,197,236,1) 0%, rgba(49,190,255,1) 0%, rgba(239,252,254,1) 58.7646484375%);
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-
-    }
-  }
-  .floatLeft, .floatRight{
-    margin-top: 5vh;
-  }
-  .middle{
-    width: 38vw;
-    position: absolute;
-    left: 31vw;
-    z-index: 99;
-    margin-top: 10vh;
-  }
-  .floatLeft, .floatRight{
-    padding: 0 1vh 0 2vh;
-    padding-top: 5vh;
-    padding-bottom: 4vh;
-  }
-  .floatLeft .left::before, .floatRight .right::after{
-    // margin-top: 6vh;
-    content: '';
-    width: 27vw;
-    height: 95vh;
-    display:block;
-    position: absolute;
-    top: -5.2vh;
-    right: -2vh;
-    background: url(../../assets/monitor/left.png) no-repeat;
-    background-size: 100% 98%;
-    z-index: -1;
-  }
-
-  .floatLeft .left:after, .floatRight .right:before{
-    content: '';
-    width: 2vw;
-    height: 85vh;
-    position: absolute;
-    right: -3.5vw;
-    top: 3px;
-    display: block;
-    background: url(../../assets/monitor/leftr.png) no-repeat;
-    background-size: 100% 98%;
-  }
-  .floatRight .right:before{
-    left: -3.5vw;
-    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-    -o-transform:matrix(-1,0,0,1,0,0);
-  }
-  .floatLeft{
-    // background: #02020a96;
-    // box-shadow: 20px -30px 30px 0px #02020a96;
-    width: 27vw;
-    display: block;
-    // overflow: hidden;
-    position: absolute;
-    left: 0;
-    z-index: 10;
-    height: 95vh;
-    min-height: 800px;
-    .left {
-      width: 100%;
-      height: 90vh;
-      padding-left: 10px;
-      display: block;
-      position: relative;
-      &:before{
-        left: -2vh;
-      }
-      .left_1{
-        height: 29vh;
-        overflow: hidden;
-      }
-      .left_2 {
-        height: 33vh;
-        .taskDiv{
-          // display: flex;
-          // justify-content: space-between;
-          text-align: center;
-          margin-bottom: 1%;
-          // height: calc(100% - 190px);
-          >div{
-            background: url('../../assets/images/monitorSelect/data-bg.png') no-repeat center;
-            background-size: auto 100%;
-            height: 11vh;
-            margin-top: 2vh;
-            // width: 25%;
-            .num{
-              font-size: 1.5rem;
-              font-family: Impact;
-              color: #FFFFFF;
-              letter-spacing: 0.1rem;
-              font-family: PangMenZhengDao;
-              // height: 3vh;
-              // line-height: 4vh;
-              height: 3vh;
-              line-height: 2rem;
-              margin-bottom: 1vh;
-            }
-            .name{
-              font-size: 0.8rem;
-              letter-spacing: 0.1rem;
-              width: 60%;
-              margin: auto;
-              // font-weight: bold;
-              height: 70%;
-              // line-height: 300%;
-            }
-          }
-        }
-      }
-      .left_3 {
-        width: 100%;
-        height: 15vh;
-      }
-      // .left_4{
-      //   height: 12vh;
-      // }
-    }
-  }
-  .floatRight {
-    // background: #02020a96;
-    // box-shadow: -20px -30px 30px 0px #02020a96;
-    background: none;
-    width: 27vw;
-    display: block;
-    // overflow: hidden;
-    position: absolute;
-    right: 0;
-    z-index: 10;
-    height: 95vh;
-    min-height: 800px;
-    padding: 0 2vh 0 1vh;
-    padding-top: 5vh;
-    padding-bottom: 4vh;
-    .createBtn{
-      height: 2.5vh;
-      line-height: 2.3vh;
-      margin: 0;
-      padding: 0 1rem;
-      position: absolute;
-      top: 0.5vh;
-      right: 2vh;
-      div{
-        font-size: 0.9rem;
-        @media screen and (max-height: 900px) {
-          transform: scale(0.8);
-          // transform-origin:  0;
-        }
-      }
-    }
-    .right {
-      width: 100%;
-      height: 100%;
-      padding-right: 10px;
-      display: block;
-      position: relative;
-      &:after{
-        // padding: 0 20px 0 10px;
-        -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-        -o-transform:matrix(-1,0,0,1,0,0);
-        z-index: -1;
-        // padding-top: 50px;
-        // padding-bottom: 40px;
-      }
-      .right_1{
-        height: 35vh;
-        overflow: hidden;
-      }
-      .right_2{
-        // height: 31%;
-        height: 27vh;
-      }
-      .right_3{
-        height: 21vh;
-        // height: 27%;
-      }
-    }
-  }
-  // .fixedBottom {
-  //   width:50vw;
-  //   bottom: 0;
-  //   display: block;
-  //   position: absolute;
-  //   z-index: 10;
-  //   height: 13vh;
-  //   left: 25vw;
-  //   .el-row{position:relative; height: 100%}
-  //   .lightLeft{
-  //     font-size: 30px;
-  //     position: absolute;
-  //     left: -20px;
-  //     top: 3vh;
-  //     z-index: 10;
-  //     color: #DDD;
-  //   }
-  //   .lightRight{
-  //     font-size: 30px;
-  //     position: absolute;
-  //     right: -20px;
-  //     top: 3vh;
-  //     z-index: 10;
-  //     color: #DDD;
-  //   }
-  //   // display：flex 样式
-  //   .div-block{
-  //     display: flex;
-  //     width: 100%;
-  //     height: 100%;
-  //     overflow: hidden;
-  //     .monitorSelectDiv{
-  //       display: block;
-  //       height: 100%;
-  //       width: 8.33vw;
-  //     }
-  //     > div{
-  //       display: block;
-  //       width: 100%;
-  //       max-width: 8.5vw;
-  //       font-size: 20px;
-  //       color: #ffffff;
-  //       height: 100vh;
-  //       position: relative;
-  //       text-align: center;
-  //       &:hover{
-  //         color: #3182CE;
-  //       }
-  //       .svg-icon {
-  //         font-size: 80px;
-  //         margin: 0 auto;
-  //       }
-  //       .selectTitle {
-  //         margin-bottom: 24px;
-  //         font-size: 16px;
-  //       }
-  //       span{
-  //         display: block;
-  //         padding: 0 100px;
-  //         font-size: 14px;
-  //         line-height: 24px;
-  //       }
-  //     }
-  //   }
-  // }
-}
-
-// @media screen and (min-width: 1921px) {
-//   .monitor {
-//     font-size: 16px;
-//     .top {
-//       .top-title {
-//         font-size: 32px;
-//         padding: 10px 100px;
-//         img{
-//           top: 35px;
-//         }
-//       }
-//     }
-//     .title{
-//       font-size: 20px;
-//       height: 70px;
-//     }
-//     .middle, .floatLeft, .floatRight{
-//       margin-top: 110px;
-//     }
-//   }
-// }
 </style>
 
 <style lang="less" rel="stylesheet/less">