From 0462617a0277286249c038747b32331fa609e093 Mon Sep 17 00:00:00 2001
From: ann <aannzee@gmail.com>
Date: Wed, 22 Feb 2023 17:28:01 +0800
Subject: [PATCH] change layout

---
 src/views/monitorSelect/index-bk.vue       | 324 +++++++--
 src/views/monitorSelect/index.vue          | 776 ++++++++++++++-------
 src/views/prometheusMonitor/index copy.vue |   1 +
 vue.config.js                              |   4 +-
 4 files changed, 787 insertions(+), 318 deletions(-)

diff --git a/src/views/monitorSelect/index-bk.vue b/src/views/monitorSelect/index-bk.vue
index 135e78c..2c47262 100644
--- a/src/views/monitorSelect/index-bk.vue
+++ b/src/views/monitorSelect/index-bk.vue
@@ -1,83 +1,207 @@
 <template>
-  <div class="monitor-select">
+  <div v-if="jcceTheme === 'jcceDark'">
     <Navbar />
     <div id="menuChoose">
+      <a v-show="filteredDarkTab.length > 6" class="darkLeft" @click="changePage('left')">
+        <svg-icon icon-class="zuojiantou" />
+      </a>
       <div id="drag-container">
         <div id="spin-container">
-          <!-- <div class="box" style="transform: rotateY(57deg) translateZ(-800px);">
-          <svg-icon icon-class="rongqiguanli" />
-          容器管理
-        </div>
-        <div class="box" style="transform: rotateY(32deg) translateZ(-800px);">
-          <svg-icon icon-class="rongqiguanli" />
-          容器管理
-        </div>
-        <div class="box" style="transform: rotateY(-22deg) translateZ(-800px);">
-          <svg-icon icon-class="rongqiguanli" />
-          容器管理
-        </div>
-        <div class="box" style="transform: rotateY(-54deg) translateZ(-800px);">
-          <svg-icon icon-class="rongqiguanli" />
-          容器管理
-        </div> -->
-          <div class="box" style="transform:  rotateY(57deg) translateZ(-800px);">
-            <a @click="selectMonitor('/cluster/clusterMapViews')">
+          <div v-for="item in filteredDarkTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id" class="box" :style="{ 'transform': 'rotateY('+item.Y+'deg) translateZ(-800px)' }">
+            <a @click="selectMonitor(item.path)">
               <div class="inner-box">
-                <svg-icon icon-class="rongqiguanli" /> 容器管理
+                <svg-icon :icon-class="item.icon" /> {{ item.title }}
               </div>
             </a>
           </div>
-          <div class="box" style="transform: rotateY(34deg) translateZ(-800px);">
-            <a @click="selectMonitor('/virtual/overview')">
-              <div class="inner-box">
-                <svg-icon icon-class="xunijiguanlimokuai" /> 虚拟机管理
-              </div>
-            </a>
-          </div>
-          <div class="box" style="transform:rotateY(11deg) translateZ(-800px)">
-            <a @click="selectMonitor('/functions/overview')">
-              <div class="inner-box">
-                <svg-icon icon-class="gongzuofuzai" /> 函数管理
-              </div>
-            </a>
-          </div>
-          <div class="box" style="transform: rotateY(-12deg) translateZ(-800px)">
-            <a @click="selectMonitor('/blockChain/blockChainBrowser')">
-              <div class="inner-box">
-                <svg-icon icon-class="yunjijizhang" /> 云际记账
-              </div>
-            </a>
-          </div>
-          <div class="box" style="transform: rotateY(-35deg) translateZ(-800px)">
-            <div class="inner-box">
-              <svg-icon icon-class="xunijiguanli-juan" /> 存储管理
-            </div>
-          </div>
-          <div class="box" style="transform: rotateY(-58deg) translateZ(-800px)">
-            <div class="inner-box">
-              <svg-icon icon-class="yunweijiankongmokuai" /> 运维监控
-            </div>
-          </div>
         </div>
       </div>
+      <a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
+        <svg-icon icon-class="youjiantou" />
+      </a>
     </div>
   </div>
+  <div v-else class="monitor-select">
+    <Navbar />
+    <el-row>
+      <a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
+        <svg-icon icon-class="zuojiantou" />
+      </a>
+      <div class="div-block">
+        <div v-for="item in filteredLightTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id">
+          <a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
+            <div class="monitorSelectBtn">
+              <svg-icon :style="{'margin-top': filteredLightTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
+              <div>
+                <div class="selectTitle">{{ item.title }}</div>
+                <span v-if="filteredLightTab.length < 6">{{ item.description }}</span>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
+        <svg-icon icon-class="youjiantou" />
+      </a>
+    </el-row>
+  </div>
 </template>
 
 <script>
 import Navbar from '@/layout/components/Navbar'
-
+import { mapGetters } from 'vuex'
 export default {
   name: 'MonitorSelect',
   components: { Navbar },
   data() {
     return {
+      pageSize: 6,
+      pageNum: 1,
+      tabDarkList: [
+        {
+          id: 'cluster',
+          Y: 57,
+          title: '容器管理',
+          icon: 'rongqiguanli',
+          path: '/cluster/clusterMapViews'
+        },
+        {
+          id: 'virtual',
+          Y: 34,
+          title: '虚拟机管理',
+          icon: 'xunijiguanlimokuai',
+          path: '/virtual/overview'
+        },
+        {
+          id: 'functions',
+          Y: 11,
+          title: '函数管理',
+          icon: 'gongzuofuzai',
+          path: '/functions/overview'
+        },
+        {
+          id: 'blockChain',
+          Y: -12,
+          title: '云际记账',
+          icon: 'yunjijizhang',
+          path: '/blockChain/blockChainBrowser'
+        },
+        {
+          id: 'disk',
+          Y: -35,
+          title: '存储管理',
+          icon: 'xunijiguanli-juan',
+          path: '/disk'
+        },
+        {
+          id: 'monitorManagement',
+          Y: -58,
+          title: '运维监控',
+          icon: 'yunweijiankongmokuai',
+          path: '/monitorManagement/warnList'
+        },
+        {
+          id: 'hpc',
+          Y: 57,
+          title: '超算中心',
+          icon: 'fuwu',
+          path: '/hpc/hpcOverview'
+        }
+      ],
+      tabLightList: [
+        {
+          id: 'cluster',
+          title: '容器管理',
+          icon: 'rongqiguanli',
+          description: '从容器维度中支持以跨云跨域多源异构方式，提供高性能可伸缩的容器应用管理服务。',
+          path: '/cluster/clusterMapViews'
+        },
+        {
+          id: 'virtual',
+          title: '虚拟机管理',
+          icon: 'xunijiguanlimokuai',
+          description: '在虚拟机的控制台中管理属于主机或群集的单个虚拟机或一组虚拟机。',
+          path: '/virtual/overview'
+        },
+        {
+          id: 'jccSchedule',
+          title: '调度中心',
+          icon: 'yunweijiankongmokuai',
+          description: '针对业务应用，设计多类型资源策略，实现标签话综合策略调度管理。',
+          path: '/jccSchedule/resourceLogicView'
+        },
+        {
+          id: 'disk',
+          title: '云际存储',
+          icon: 'xunijiguanli-juan',
+          description: '以广域异构分布式存储服务，提供用户快捷、安全的数据管理。',
+          path: '/disk'
+        },
+        {
+          id: 'functions',
+          title: '函数管理',
+          icon: 'fuwu',
+          description: '支持一个服务下对多个函数进行创建、编辑、运行，对函数运行全生命周期进行监控调度。',
+          path: '/functions/overview'
+        },
+        {
+          id: 'blockChain',
+          title: '云际记账',
+          icon: 'yunjijizhang',
+          description: '基于区块链分布记账机制，以去中心化的方式对云际交易数据进行留痕存证。',
+          path: '/blockChain/blockChainBrowser'
+        },
+        {
+          id: 'hpc',
+          title: '超算管理',
+          icon: 'fuwu',
+          description: '提供屏蔽资源异构的跨域调度超算服务，确保计算任务在各大超算节点的稳定运行。',
+          path: '/hpc/hpcOverview'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'menus'
+    ]),
+    jcceTheme() {
+      return localStorage.getItem('jcceTheme')
+    },
+    filteredDarkTab() {
+      return this.tabDarkList.filter(e => this.menus.includes(e.id))
+    },
+    filteredLightTab() {
+      return this.tabLightList.filter(e => this.menus.includes(e.id))
     }
   },
   created() {
   },
   methods: {
+    changePage(type) {
+      if (type === 'left') {
+        this.pageNum = this.pageNum === 1 ? 1 : this.pageNum - 1
+      } else {
+        if (this.jcceTheme === 'jcceLight') {
+          this.pageNum = this.pageNum < (this.filteredLightTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
+        } else {
+          this.pageNum = this.pageNum < (this.filteredDarkTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
+        }
+      }
+    },
+    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 })
     }
@@ -86,6 +210,90 @@ export default {
 </script>
 
 <style lang="scss">
+.monitor-select{
+  height: 100%;
+  background: white url('../../assets/img/monitorSelect_bg.png') center no-repeat;
+  position: relative;
+  .navbar{
+    background-color: transparent;
+    position: absolute;
+    right: 0px;
+    z-index: 10;
+    .right-menu .avatar-container{
+      margin-right: 0;
+    }
+    .selectBtn  {
+      color: #454B53;
+    }
+  }
+
+  .lightLeft{
+    font-size: 90px;
+    position: absolute;
+    left: 0px;
+    top: 45%;
+    z-index: 10;
+    color: #DDD;
+  }
+  .lightRight{
+    font-size: 90px;
+    position: absolute;
+    right: 0px;
+    top: 45%;
+    z-index: 10;
+    color: #DDD;
+  }
+  // display：flex 样式
+  .div-block{
+    display: flex;
+    .monitorSelectDiv{
+      display: block;
+      height: 100vh;
+    }
+    > div{
+      display: block;
+      width: 100%;
+      max-width: 20%;
+      font-size: 24px;
+      color: #333333;
+      height: 100vh;
+      position: relative;
+      text-align: center;
+      &:hover{
+        color: #ffffff;
+        background: #3182CE;
+      }
+      &::after{
+        content: '';
+        position: absolute;
+        width: 1px;
+        height: 100vh;
+        background: #CCD9E0;
+        top: 0;
+        right: 0;
+      }
+      &:last-of-type a::after{
+        width: 0;
+      }
+      .svg-icon {
+        font-size: 100px;
+        margin: 36vh auto;
+        margin-bottom: 51px;
+      }
+      .selectTitle {
+        margin-bottom: 35px;
+        font-size: 30px;
+      }
+      span{
+        display: block;
+        padding: 0 100px;
+        font-size: 14px;
+        line-height: 24px;
+      }
+    }
+  }
+}
+
 #menuChoose{
   width: 80%;
   overflow: hidden;
@@ -95,6 +303,18 @@ export default {
   position: absolute;
   top: 50%;
   margin-top: -10%;
+  .darkLeft{
+    font-size: 90px;
+    position: relative;
+    margin: auto;
+    color: #6ECAFC;
+  }
+  .darkRight{
+    font-size: 90px;
+    position: relative;
+    margin: auto;
+    color: #6ECAFC;
+  }
   #drag-container {
     width: 1200px;
     background: rgba(248, 0, 0, 0.075);
diff --git a/src/views/monitorSelect/index.vue b/src/views/monitorSelect/index.vue
index 2c47262..660da7d 100644
--- a/src/views/monitorSelect/index.vue
+++ b/src/views/monitorSelect/index.vue
@@ -1,163 +1,312 @@
 <template>
-  <div v-if="jcceTheme === 'jcceDark'">
-    <Navbar />
-    <div id="menuChoose">
-      <a v-show="filteredDarkTab.length > 6" class="darkLeft" @click="changePage('left')">
-        <svg-icon icon-class="zuojiantou" />
-      </a>
-      <div id="drag-container">
-        <div id="spin-container">
-          <div v-for="item in filteredDarkTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id" class="box" :style="{ 'transform': 'rotateY('+item.Y+'deg) translateZ(-800px)' }">
-            <a @click="selectMonitor(item.path)">
-              <div class="inner-box">
-                <svg-icon :icon-class="item.icon" /> {{ item.title }}
+  <div class="monitor">
+    <div class="top">
+      <div class="weather">
+        天气晴
+      </div>
+      <div class="time">
+        2023年2月22日
+      </div>
+      <h1>区域运维服务实时监控</h1>
+    </div>
+    <div class="floatLeft">
+      <div class="left">
+        <div class="left_1">
+          <div class="title">服务器总数量</div>
+          <div class="left_12">{{ number }}</div>
+          <div class="left_22">
+            <div class="left_22_chart">
+              <PercentPieChart id="PercentPieChart" />
+            </div>
+            <div class="left_22_num">
+              <div class="left_22_title">
+                <span> 已部署 </span>
+                <span style="color: #23B9FF"> {{ usagedCount }} </span>
+              </div>
+              <ProgressChart id="progress1" color="#23B9FF" />
+              <div class="left_22_title">
+                <span> 未部署 </span>
+                <span> {{ usageingCount }} </span>
+              </div>
+              <ProgressChart1 id="progress2" />
+            </div>
+          </div>
+        </div>
+        <div class="left_2">
+          <div class="title">告警通知</div>
+          <div class="warn">
+            <div class="warn_div">
+              <img class="warn_icon" src="@/assets/monitor/icon_11.png" alt="">
+              <div>
+                <div>紧急通知</div>
+                <span class="warn_num">12</span>
+              </div>
+            </div>
+            <div class="warn_div">
+              <img class="warn_icon" src="@/assets/monitor/icon_12.png" alt="">
+              <div>
+                <div>重要通知</div>
+                <span class="warn_num">8</span>
+              </div>
+            </div>
+            <div class="warn_div">
+              <img class="warn_icon" src="@/assets/monitor/icon_13.png" alt="">
+              <div>
+                <div>一般通知</div>
+                <span class="warn_num">5</span>
+              </div>
+            </div>
+            <div class="warn_div">
+              <img class="warn_icon" src="@/assets/monitor/icon_14.png" alt="">
+              <div>
+                <div>待办事项</div>
+                <span class="warn_num">15</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="left_3">
+          <span class="title"> 整体总负载 </span>
+          <div class="cartDraw">
+            <TotalLoadChart id="loadChart" :data="dataBar" :data2="dataBar2" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="floatRight">
+      <div class="right">
+        <div class="right_1">
+          <div class="title">资源服务厂商占比</div>
+          <LeftPieChart id="bottomChart" />
+        </div>
+        <div class="right_2">
+          <span class="allGet">
+            <span class="title">计量计费</span>
+            <span>
+              <span class="num">{{ num }}</span>
+              元
+            </span>
+          </span>
+          <TotalRevenueChart id="allGetChart" :data="dataBar" :data2="dataBar2" />
+        </div>
+        <div class="right_3">
+          <span class="title"> 平均使用情况 </span>
+          <div class="cartDraw">
+            <AverageChart id="averageChart" :data="dataList" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="fixedBottom">
+      <el-row>
+        <a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
+          <svg-icon icon-class="zuojiantou" />
+        </a>
+        <div class="div-block">
+          <!-- <div class="block"></div> -->
+          <div v-for="item in filteredLightTab" :key="item.id">
+            <a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
+              <div class="monitorSelectBtn">
+                <svg-icon :icon-class="item.icon" />
+                <div>
+                  <div class="selectTitle">{{ item.title }}</div>
+                </div>
               </div>
             </a>
           </div>
         </div>
-      </div>
-      <a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
-        <svg-icon icon-class="youjiantou" />
-      </a>
+        <a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
+          <svg-icon icon-class="youjiantou" />
+        </a>
+      </el-row>
     </div>
-  </div>
-  <div v-else class="monitor-select">
-    <Navbar />
-    <el-row>
-      <a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
-        <svg-icon icon-class="zuojiantou" />
-      </a>
-      <div class="div-block">
-        <div v-for="item in filteredLightTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id">
-          <a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
-            <div class="monitorSelectBtn">
-              <svg-icon :style="{'margin-top': filteredLightTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
-              <div>
-                <div class="selectTitle">{{ item.title }}</div>
-                <span v-if="filteredLightTab.length < 6">{{ item.description }}</span>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
-        <svg-icon icon-class="youjiantou" />
-      </a>
-    </el-row>
+    <Earth />
   </div>
 </template>
 
 <script>
-import Navbar from '@/layout/components/Navbar'
 import { mapGetters } from 'vuex'
+import ProgressChart from '@/views/prometheusMonitorNew/components/ProgressChart'
+import ProgressChart1 from '@/views/prometheusMonitorNew/components/ProgressChart1'
+import AverageChart from '@/views/prometheusMonitorNew/components/AverageChart'
+import TotalLoadChart from '@/views/prometheusMonitorNew/components/TotalLoadChart'
+import TotalRevenueChart from '@/views/prometheusMonitorNew/components/TotalRevenueChart'
+import PercentPieChart from '@/views/prometheusMonitorNew/components/PercentPieChart'
+import LeftPieChart from '@/views/prometheusMonitorNew/components/LeftPieChart'
+import Earth from '@/views/prometheusMonitor/earth'
+import { getTotalNum, getMeasure } from '@/api/top-menu/TotalNum'
+// 获取七天前日期方法
+function getDay(day) {
+  var today = new Date()
+  var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
+  today.setTime(targetday_milliseconds) // 注意，这行是关键代码
+  // var tYear = today.getFullYear()
+  var tMonth = today.getMonth()
+  var tDate = today.getDate()
+  tMonth = doHandleMonth(tMonth + 1)
+  tDate = doHandleMonth(tDate)
+  return tMonth + '/' + tDate
+}
+function doHandleMonth(month) {
+  var m = month
+  if (month.toString().length === 1) {
+    m = '0' + month
+  }
+  return m
+}
 export default {
-  name: 'MonitorSelect',
-  components: { Navbar },
+  components: {
+    ProgressChart,
+    ProgressChart1,
+    AverageChart,
+    TotalLoadChart,
+    TotalRevenueChart,
+    PercentPieChart,
+    LeftPieChart,
+    Earth
+  },
   data() {
     return {
-      pageSize: 6,
-      pageNum: 1,
-      tabDarkList: [
-        {
-          id: 'cluster',
-          Y: 57,
-          title: '容器管理',
-          icon: 'rongqiguanli',
-          path: '/cluster/clusterMapViews'
-        },
-        {
-          id: 'virtual',
-          Y: 34,
-          title: '虚拟机管理',
-          icon: 'xunijiguanlimokuai',
-          path: '/virtual/overview'
-        },
-        {
-          id: 'functions',
-          Y: 11,
-          title: '函数管理',
-          icon: 'gongzuofuzai',
-          path: '/functions/overview'
-        },
-        {
-          id: 'blockChain',
-          Y: -12,
-          title: '云际记账',
-          icon: 'yunjijizhang',
-          path: '/blockChain/blockChainBrowser'
-        },
-        {
-          id: 'disk',
-          Y: -35,
-          title: '存储管理',
-          icon: 'xunijiguanli-juan',
-          path: '/disk'
-        },
-        {
-          id: 'monitorManagement',
-          Y: -58,
-          title: '运维监控',
-          icon: 'yunweijiankongmokuai',
-          path: '/monitorManagement/warnList'
-        },
-        {
-          id: 'hpc',
-          Y: 57,
-          title: '超算中心',
-          icon: 'fuwu',
-          path: '/hpc/hpcOverview'
-        }
-      ],
       tabLightList: [
         {
           id: 'cluster',
           title: '容器管理',
           icon: 'rongqiguanli',
-          description: '从容器维度中支持以跨云跨域多源异构方式，提供高性能可伸缩的容器应用管理服务。',
           path: '/cluster/clusterMapViews'
         },
         {
           id: 'virtual',
           title: '虚拟机管理',
           icon: 'xunijiguanlimokuai',
-          description: '在虚拟机的控制台中管理属于主机或群集的单个虚拟机或一组虚拟机。',
           path: '/virtual/overview'
         },
         {
           id: 'jccSchedule',
           title: '调度中心',
           icon: 'yunweijiankongmokuai',
-          description: '针对业务应用，设计多类型资源策略，实现标签话综合策略调度管理。',
           path: '/jccSchedule/resourceLogicView'
         },
         {
           id: 'disk',
           title: '云际存储',
           icon: 'xunijiguanli-juan',
-          description: '以广域异构分布式存储服务，提供用户快捷、安全的数据管理。',
           path: '/disk'
         },
         {
           id: 'functions',
           title: '函数管理',
           icon: 'fuwu',
-          description: '支持一个服务下对多个函数进行创建、编辑、运行，对函数运行全生命周期进行监控调度。',
           path: '/functions/overview'
         },
         {
           id: 'blockChain',
           title: '云际记账',
           icon: 'yunjijizhang',
-          description: '基于区块链分布记账机制，以去中心化的方式对云际交易数据进行留痕存证。',
           path: '/blockChain/blockChainBrowser'
         },
         {
           id: 'hpc',
           title: '超算管理',
           icon: 'fuwu',
-          description: '提供屏蔽资源异构的跨域调度超算服务，确保计算任务在各大超算节点的稳定运行。',
           path: '/hpc/hpcOverview'
         }
+      ],
+      num: '2643.68',
+      number: 12345,
+      usagedCount: 12345,
+      usageingCount: 12345,
+      // 平均
+      dataList: [
+        {
+          name: '02/12'
+        },
+        {
+          name: '02/13'
+        },
+        {
+          name: '02/14'
+        },
+        {
+          name: '02/15'
+        },
+        {
+          name: '02/16'
+        },
+        {
+          name: '02/17'
+        },
+        {
+          name: '02/1'
+        }
+      ],
+      bottomList: [
+        {
+          name: 'UCloud',
+          value: '0.02'
+        },
+        {
+          name: '金山云',
+          value: '0.10'
+        },
+        {
+          name: '腾讯云',
+          value: '0.02'
+        },
+        {
+          name: '华为云',
+          value: '0.13'
+        },
+        {
+          name: '阿里云',
+          value: '0.10'
+        }
+      ],
+      dataBar: [
+        {
+          name: '02/12'
+        },
+        {
+          name: '02/13'
+        },
+        {
+          name: '02/14'
+        },
+        {
+          name: '02/15'
+        },
+        {
+          name: '02/16'
+        },
+        {
+          name: '02/17'
+        },
+        {
+          name: '02/16'
+        }
+      ],
+      //  计量和整体
+      dataBar2: [
+        {
+          name: '02/12'
+        },
+        {
+          name: '02/13'
+        },
+        {
+          name: '02/14'
+        },
+        {
+          name: '02/15'
+        },
+        {
+          name: '02/16'
+        },
+        {
+          name: '02/17'
+        },
+        {
+          name: '02/17'
+        }
       ]
     }
   },
@@ -176,18 +325,26 @@ export default {
       return this.tabLightList.filter(e => this.menus.includes(e.id))
     }
   },
-  created() {
+  beforeMount() {
+    this.getTotalNumber()
+  },
+  mounted() {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Loading',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+    setTimeout(() => {
+      loading.close()
+    }, 1000)
   },
   methods: {
     changePage(type) {
       if (type === 'left') {
-        this.pageNum = this.pageNum === 1 ? 1 : this.pageNum - 1
+        // 滑动到最左
       } else {
-        if (this.jcceTheme === 'jcceLight') {
-          this.pageNum = this.pageNum < (this.filteredLightTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
-        } else {
-          this.pageNum = this.pageNum < (this.filteredDarkTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
-        }
+        // 滑到最右
       }
     },
     getImg(src) {
@@ -204,178 +361,269 @@ export default {
       }
       this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
       this.$router.push({ path: monitor })
+    },
+    toRoot() {
+      this.$router.replace('/')
+    },
+    getTotalNumber() {
+      getTotalNum().then(res => {
+        this.number = res.data.deviceCount
+        this.usagedCount = res.data.usagedCount
+        this.usageingCount = res.data.usageingCount
+      })
+      const a = Math.round(new Date() / 1000)
+      // console.log(a)
+      const b = a - 604800
+      getMeasure(b, a, 86400).then(res => {
+        const demo1 = Number(res.results[1].data.result[0].fee)
+        const demo2 = Number(res.results[2].data.result[0].fee)
+        const demo3 = Number(res.results[3].data.result[0].fee)
+        const demo4 = Number(res.results[4].data.result[0].fee)
+        const demo = demo1 + demo2 + demo3 + demo4
+        this.num = demo.toFixed(2)
+        // const demo = res
+        // console.log(this.num)
+        const Day = []
+        for (let i = 0; i < 7; i++) {
+          Day[i] = getDay(i - 6)
+        }
+        this.dataBar2.name = Day
+        this.dataList.name = Day
+        this.dataBar.name = Day
+      })
     }
+
   }
 }
 </script>
 
-<style lang="scss">
-.monitor-select{
-  height: 100%;
-  background: white url('../../assets/img/monitorSelect_bg.png') center no-repeat;
-  position: relative;
-  .navbar{
-    background-color: transparent;
-    position: absolute;
-    right: 0px;
-    z-index: 10;
-    .right-menu .avatar-container{
-      margin-right: 0;
-    }
-    .selectBtn  {
-      color: #454B53;
-    }
-  }
+<style lang="scss" >
+@import "~@/styles/variables.scss";
 
-  .lightLeft{
-    font-size: 90px;
-    position: absolute;
-    left: 0px;
-    top: 45%;
-    z-index: 10;
-    color: #DDD;
-  }
-  .lightRight{
-    font-size: 90px;
-    position: absolute;
-    right: 0px;
-    top: 45%;
-    z-index: 10;
-    color: #DDD;
-  }
-  // display：flex 样式
-  .div-block{
-    display: flex;
-    .monitorSelectDiv{
-      display: block;
-      height: 100vh;
-    }
-    > div{
-      display: block;
-      width: 100%;
-      max-width: 20%;
-      font-size: 24px;
-      color: #333333;
-      height: 100vh;
-      position: relative;
-      text-align: center;
-      &:hover{
-        color: #ffffff;
-        background: #3182CE;
-      }
-      &::after{
-        content: '';
-        position: absolute;
-        width: 1px;
-        height: 100vh;
-        background: #CCD9E0;
-        top: 0;
-        right: 0;
-      }
-      &:last-of-type a::after{
-        width: 0;
-      }
-      .svg-icon {
-        font-size: 100px;
-        margin: 36vh auto;
-        margin-bottom: 51px;
-      }
-      .selectTitle {
-        margin-bottom: 35px;
-        font-size: 30px;
-      }
-      span{
-        display: block;
-        padding: 0 100px;
-        font-size: 14px;
-        line-height: 24px;
-      }
-    }
-  }
-}
-
-#menuChoose{
-  width: 80%;
-  overflow: hidden;
-  display: flex;
-  perspective: 1000px;
-  width: 100%;
+.back{
   position: absolute;
-  top: 50%;
-  margin-top: -10%;
-  .darkLeft{
-    font-size: 90px;
-    position: relative;
-    margin: auto;
-    color: #6ECAFC;
+  right: 12px;
+  top: 22px;
+  color: #ddd;
+  font-size: 0.9rem;
+}
+.monitor {
+  background: url('../../assets/monitor/monitor_bg.jpeg') no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: white;
+  font-family: 'SourceHanSansCN';
+  font-weight: 400;
+  .top {
+    width: 100%;
+    height: 10%;
+    padding: 2% 3.13%;
+    text-align: center;
+    color: #FEFCFC;
+    h1{
+      font-size: 40px;
+      margin:0;
+      font-weight: 400;
+    }
+    .weather{
+      float: left;
+    }
+    .time{
+      float: right;
+    }
   }
-  .darkRight{
-    font-size: 90px;
-    position: relative;
-    margin: auto;
-    color: #6ECAFC;
+  .title{
+    color: #{$monitorColor};
+    font-size: 24px;
   }
-  #drag-container {
-    width: 1200px;
-    background: rgba(248, 0, 0, 0.075);
-    position: relative;
-    display: flex;
-    margin: auto;
-    transform-style: preserve-3d;
-    background: url('../../assets/images/menubg.png') top no-repeat;
-    background-size:  130%;
-    .box  {
-      transform-style: preserve-3d;
-      position: absolute;
-      top: 0;
+  .floatLeft,.floatRight {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    z-index: 10;
+    height: 90%;
+    padding: 0 3.13%;
+    .el-col{
       height: 100%;
-      border-bottom: 2px solid #6ECAFC;
-      -webkit-box-reflect: below 20px linear-gradient(transparent, transparent, #0005);
-
-      .inner-box{
-        width: 100%;
-        height: 98%;
-        line-height: 200px;
-        font-size: 30px;
-        text-align: center;
-        background: #1425389d ;
-        background-position: 200px -160px;
-        background-size: 70%;
-        border: 2px solid #6ECAFC;
-        border-radius: 20px;
-        &:hover {
-          box-shadow: 0 0 15px #6ECAFC;
-          -webkit-box-reflect: below 40px linear-gradient(transparent, transparent, #0007);
+    }
+    .left {
+      height: 100%;
+      padding-top: 3vh;
+      .left_1{
+        height: 34.6%;
+        .left_12{
+          font-size: 7vh;
+          font-family: Impact;
+          font-weight: 400;
+          color: #FFFFFF;
+          padding-top: 1vh;
+        }
+        .left_22{
+          height: 14vh;
+          display: flex;
+          align-items: center;
+          .left_22_chart{
+            width: 45%;
+          }
+          .left_22_num{
+            width: 50%;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #D3D9D9;
+            .left_22_title{
+              display: flex;
+              justify-content: space-between;
+              padding: 1.5vh 0;
+            }
+          }
         }
       }
-      &::after{
-        content: url('../../assets/images/star.png');
-        position:absolute;
-        top: -88px;
-        left: 260px;
+      .left_2 {
+        height: 27.4%;
+        .warn {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          .warn_div{
+            display: flex;
+            width: 50%;
+            align-items: center;
+            padding-top: 2vh;
+            font-size: 16px;
+            justify-content: space-around;
+            > div{
+              margin: 0 4%;
+            }
+            .warn_icon{
+              width: 6vh;
+              height: 6vh;
+            }
+            .warn_num{
+              font-size: 24px;
+              font-family: Impact;
+            }
+          }
+        }
       }
-      svg{
-        font-size: 150px;
-        display: block;
+      .left_3 {
         width: 100%;
-        margin: 20% 0 -10%;
+        height: 37.8%;
+        .cartDraw{
+          height: 90%;
+        }
+      }
+    }
+    .right {
+      border-radius: 4px;
+      height: 100%;
+      padding-top: 9%;
+      .right_1{
+        height: 37%;
+        .allGet{
+          display: flex;
+          justify-content: space-between;
+          font-size: 18px;
+          color: white;
+          align-items: center;
+          font-weight: 400;
+          .num{
+            font-size: 36px;
+            color: #{$monitorColor};
+            font-family: Impact;
+          }
+        }
+      }
+      .right_2{
+        height: 33%;
+      }
+      .right_3{
+        height: 27%;
+      }
+      .cartDraw {
+        width: 100%;
+        height: 90%;
       }
     }
   }
-  #spin-container{
-    position: relative;
-    display: flex;
-    margin: auto;
-    transform-style: preserve-3d;
-    width: 300px;
-    height: 380px;
+  .floatLeft{
+    left: 0;
+    width: 25vw;
   }
-}
-@keyframes spinRevert {
-  from{
-    transform: rotateY(5deg);
-  } to{
-    transform: rotateY(15deg);
+  .floatRight{
+    width: 25vw;
+    right: 0;
+  }
+  .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;
+        }
+      }
+    }
   }
 }
 </style>
+
+<style lang="less" rel="stylesheet/less">
+  @import "../../common/font/font.css";
+</style>
diff --git a/src/views/prometheusMonitor/index copy.vue b/src/views/prometheusMonitor/index copy.vue
index 4737e9a..7449942 100644
--- a/src/views/prometheusMonitor/index copy.vue	
+++ b/src/views/prometheusMonitor/index copy.vue	
@@ -1,3 +1,4 @@
+<!-- 中国地图版本 -->
 <template>
   <div class="monitor">
     <div class="title" @click="toRoot">
diff --git a/vue.config.js b/vue.config.js
index ff4e78f..892c99d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -60,8 +60,8 @@ module.exports = {
       },
       '^/jcc-': {
         ws: false,
-        target: 'https://10.101.15.6/apis', /* 测试环境 */
-        // target: 'https://jointcloud.net/apis', /* 演示环境 */
+        // target: 'https://10.101.15.6/apis', /* 测试环境 */
+        target: 'https://jointcloud.net/apis', /* 演示环境 */
         changeOrigin: true,
         secure: false
       },