大屏的基本布局，告警数据模块的数据处理

src/views/chart/boxBoardBody.vue

@@ -26,20 +26,22 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 0 0 20px 0;
+  /* padding: 0 0 20px 0; */
+  background-image: url("../../assets/image/kuang.png");
+  background-size: 100% 100%;
 }
 .body {
   position: relative;
   width: 99%;
   height: 100%;
+  padding-top: 50px;
   text-align: center;
   vertical-align: middle;
   line-height: 100%;
-  background-color: rgba(7, 26, 72, 0.2);
+  /* background-color: rgba(7, 26, 72, 0.2); */
-  border: 0px solid rgba(70, 233, 255, 1);
+  
-  border-radius: 3px 3px 3px 3px;
+  /* border: 0px solid rgba(70, 233, 255, 1); */
-  -webkit-box-shadow: #666 0px 0px 10px;
+  /* border-radius: 3px 3px 3px 3px; */
-  -moz-box-shadow: #666 0px 0px 10px;
   /* box-shadow: #666 0px 0px 10px; */
   pointer-events: auto;
   z-index: 10100;
@@ -47,7 +49,9 @@ export default {
 }
 .BoxBoardTit {
   position: absolute;
-  left: 50px;
+  /* left: 50px;
-  top: -10px;
+  top: -10px; */
+  left: 32px;
+  top: 30px;
 }
 </style>

src/views/chart/boxBoardTit.vue

@@ -18,20 +18,21 @@ export default {
 
 <style scoped>
 .boxBoardTit {
-  font-size: 12px;
+  text-align: left;
+  font-size: 14px;
   width: 70px;
   height: 20px;
   line-height: 20px;
-  background-color: transparent;
+  /* background-color: transparent; */
-  color: rgba(70, 233, 255, 1);
+  /* color: rgba(70, 233, 255, 1); */
+  color: #85d8ff;
   font-weight: bold;
-  border: 0.5px solid rgba(70, 233, 255, 1);
+  /* border: 0.5px solid rgba(70, 233, 255, 1); */
-  border-radius: 10px 1px 10px 1px;
+  /* border-radius: 10px 1px 10px 1px; */
-  text-align: center;
   vertical-align: middle;
   z-index: 10100;
-  -webkit-box-shadow: #666 0px 0px 10px;
+  /* -webkit-box-shadow: #666 0px 0px 10px; */
-  -moz-box-shadow: #666 0px 0px 10px;
+  /* -moz-box-shadow: #666 0px 0px 10px; */
-  box-shadow: #666 0px 0px 10px;
+  /* box-shadow: #666 0px 0px 10px; */
 }
 </style>

src/views/chart/components/leftTop.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="content-box">
+    <div><span>电池总数</span><span>748</span></div>
+    <div><span>电池白名单数</span><span>334</span></div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped>
+.content-box {
+  // padding: 10px;
+  padding: 10px 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  height: calc(100% - 20px);
+  div{
+    // border: 1px solid #f00;
+    // box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
+    background-image: url("../../../assets/image/ltbg.png");
+    background-size: 100% 100%;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    >span:nth-child(2){
+      font-weight:700;
+      font-size: 24px;
+      color: #ff4c4c;
+    }
+  }
+  >div:nth-child(2) span:nth-child(2){
+    color: #35ffff;
+  }
+}
+</style>

src/views/chart/index.vue

@@ -1,83 +1,85 @@
 <template>
-  <div style="width: 100vw;height:100vh;position: relative;background-color:#010b34;overflow:hidden">
+  <div class="box">
-    
+    <!-- <div ref="bmap" id="main" style="width: 100%;height:100%;"></div> -->
     <div id="chart">
-      <div style="width: 100vw;height:40px;line-height:40px;position: absolute;padding-top:5px;display: flex;overflow:hidden;justify-content: space-between;">
-        <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
-          <div style="display: flex;flex:1">
-            <!-- <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> -->
-            <dv-decoration-8 :color="['#568aea', '#000000']" style="height:50px;" />
-            <div class="" style="min-width: 200px;font-size:20px">锐能BMS管理系统</div>
-            <dv-decoration-8
-              :reverse="true"
-              :color="['#568aea', '#000000']"
-              style="height:50px;"
-            />
-          </div>
-          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
-      </div>
       <div class="center tc">
+        <div class="tit">{{ time }}</div>
         <!-- <div class="des">锐能在线设备：{{ devCount }}</div> -->
-        <!-- <div class="des">锐能BMS管理系统</div> -->
+        <div ref="bmap" id="main" style="width: 100%;height:65%;"></div>
-        <div class="tit" style="color:#fff">{{time}}</div>
+        <div class="my_cenbottom">
-        <div ref="bmap" id="main" style="width: 100%;height:60%;"></div>
+          <div>产品总数：<span style="color:#4ee7e6">10</span></div>
-        <div>
+          <div>产品总数：<span style="color:#ff4c4c">10</span></div>
-          <div style="display:flex;color:#fff">
+          <div>产品总数：<span style="color:#d96dd6">10</span></div>
-          <dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
-          <dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
-          <dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
-          </div>
-          <div style="display:flex;color:#fff">
-            <dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
-            <dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
-            <dv-border-box-12 style="width:200px;height:50px;line-height: 50px;overflow:hidden">dv-border-box-12</dv-border-box-12>
         </div>
+        <div class="my_cenbottom">
+          <div>产品总数：<span style="color:#41dd83">10</span></div>
+          <div>产品总数：<span style="color:#edcc1a">10</span></div>
+          <div>产品总数：<span style="color:#ff4c4c">10</span></div>
         </div>
       </div>
       <div class="left column">
-          <dv-border-box-4 :color="['#00c2ff', '#568aea']" :reverse="true"><div ref="ticketAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
+        <boxBoardBody class="flex">
-          <div style="height:20px"></div>
-          <dv-border-box-4 :color="['#00c2ff', '#568aea']" :reverse="true"><div ref="ticketAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
-          <div style="height:20px"></div>
-          <dv-border-box-4 :color="['#00c2ff', '#568aea']" :reverse="true"><div ref="ticketAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
-        <!-- <boxBoardBody class="flex">
           <boxBoardTit slot="tit" tit="总览"></boxBoardTit>
-          <div ref="ticketAll" style="width: 100%;height:100%;"></div>
+          <leftTop></leftTop>
         </boxBoardBody>
         <div style="height:20px"></div>
         <boxBoardBody class="flex">
           <boxBoardTit slot="tit" tit="工单总览"></boxBoardTit>
-          <div ref="ticketAll" style="width: 100%;height:100%;"></div>
+          <div class="my_context">
+            <div class="my_item">
+              <el-progress
+                type="circle"
+                :percentage="33"
+                :stroke-width="13"
+                color="#13cf5e"
+                stroke-linecap="square"
+              ></el-progress>
+              <span>代派单：150</span>
+            </div>
+            <div class="my_item">
+              <el-progress
+                type="circle"
+                :percentage="22"
+                :stroke-width="13"
+              ></el-progress>
+              <span>处理中：100</span>
+            </div>
+            <div class="my_item">
+              <el-progress
+                type="circle"
+                :percentage="44"
+                :stroke-width="13"
+                color="#ff9494"
+              ></el-progress>
+              <span>已关闭：200</span>
+            </div>
+          </div>
         </boxBoardBody>
         <div style="height:20px"></div>
-        <boxBoardBody class="flex">
+        <boxBoardBody class="flex" style="height:300px">
           <boxBoardTit slot="tit" tit="设备趋势"></boxBoardTit>
-          <div ref="alarmAll" style="width: 100%;height:100%;"></div>
+          <div ref="bottomLeftChart" class="bottom_left"></div>
-        </boxBoardBody> -->
+        </boxBoardBody>
-
       </div>
       <div class="right column">
-        <!-- <div class="flex"></div>
+        <boxBoardBody class="flex">
-        <div style="height:20px"></div> -->
-        <dv-border-box-4 :color="['#00c2ff', '#568aea']"><div ref="alarmTrend" style="width: 100%;height:100%;"></div></dv-border-box-4>
-        <div style="height:20px"></div>
-        <dv-border-box-4 :color="['#00c2ff', '#568aea']"><div ref="alarmAll" style="width: 100%;height:100%;"></div></dv-border-box-4>
-        <div style="height:20px"></div>
-        <dv-border-box-4 :color="['#00c2ff', '#568aea']"><div ref="alarmTrend" style="width: 100%;height:100%;"></div></dv-border-box-4>
-        <!-- <boxBoardBody class="flex">
           <boxBoardTit slot="tit" tit="设备类型"></boxBoardTit>
-          <div ref="alarmTrend" style="width: 100%;height:100%;"></div>
+          <div
+            ref="topLeftChart"
+            style="width: 100%;height:100%;padding:15px"
+          ></div>
         </boxBoardBody>
         <div style="height:20px"></div>
         <boxBoardBody class="flex">
           <boxBoardTit slot="tit" tit="告警数据"></boxBoardTit>
-          <div ref="alarmAll" style="width: 100%;height:100%;"></div>
+          <!-- <div ref="alarmAll" style="width: 100%;height:100%;"></div> -->
+          <div ref="centerRight" style="width: 100%;height:100%;"></div>
         </boxBoardBody>
         <div style="height:20px"></div>
-        <boxBoardBody class="flex">
+        <boxBoardBody class="flex" style="height:300px">
           <boxBoardTit slot="tit" tit="告警趋势"></boxBoardTit>
           <div ref="alarmTrend" style="width: 100%;height:100%;"></div>
-        </boxBoardBody> -->
+        </boxBoardBody>
       </div>
     </div>
   </div>
@@ -93,14 +95,19 @@ import resize from '../dashboard/mixins/resize';
 
 import boxBoardTit from './boxBoardTit';
 import boxBoardBody from './boxBoardBody';
-import { parseTime } from "@/utils/ruoyi";
+import leftTop from './components/leftTop';
+
+import { parseTime } from '@/utils/ruoyi';
 
 export default {
   name: 'Chart',
   mixins: [resize],
-  components: { boxBoardTit, boxBoardBody },
+  components: { boxBoardTit, boxBoardBody, leftTop },
   data() {
     return {
+      bottomChart: null,
+      topChart: null,
+      centerChart: null,
       bmapChart: null,
       ticketAllChart: null,
       alarmAllChart: null,
@@ -114,33 +121,33 @@ export default {
       workStatusList: {
         '1': '待接单',
         '2': '待回单',
-        '3': '已回单',
+        '3': '已回单'
       },
       myStyleJson: [
         {
-          "featureType": "land",
+          featureType: 'land',
-          "elementType": "geometry",
+          elementType: 'geometry',
-          "stylers": {
+          stylers: {
-            "color": "#f5f6f7ff"
+            color: '#f5f6f7ff'
           }
         }
       ]
-    }
+    };
   },
 
   computed: {
     time() {
-      return parseTime(this.date, '{h} : {i} : {s}')
+      return parseTime(this.date, '{h} : {i} : {s}');
     }
   },
   mounted() {
     let timer = setInterval(() => {
-      this.date = new Date()
+      this.date = new Date();
     }, 1000);
     this.$once('hook:beforeDestroy', () => {
       clearInterval(timer);
       timer = null;
-    })
+    });
 
     this.getData().then(({ code, msg, list, work, activity, devCount }) => {
       if (200 == code) {
@@ -150,50 +157,51 @@ export default {
             id: v.id,
             deviceId: v.deviceId,
             deviceName: v.deviceName,
-            value: [parseFloat(v.longitude), parseFloat(v.latitude),]
+            value: [parseFloat(v.longitude), parseFloat(v.latitude)]
-          })
+          });
-        })
+        });
 
         this.spotList = spotList;
         this.devCount = devCount;
 
-
         this.$nextTick(() => {
-          this.initBmpChart()
+          this.initBmpChart();
-          this.initTicketAllChart(work)
+          // this.initTicketAllChart(work);
-          this.initAlarmAllChart(activity)
+          // this.initAlarmAllChart(activity);
+          this.initCenterChart(activity);
+          this.initBottomChart();
+          this.initTopChart();
+          this.initAlarmTrendChart();
         });
       }
-    })
-
-    this.initAlarmTrendChart()
-    this.getTicketData().then(({ code, msg, day, month }) => {
-      if (200 == code) {
-        this.alarmTrendDay = day;
-        this.alarmTrendMonth = month;
-        this.$nextTick(() => {
-          this.alarmTrendChartSetDay()
     });
-      }
-    })
 
+    // this.getTicketData().then(({ code, msg, day, month }) => {
+    //   if (200 == code) {
+    //     this.alarmTrendDay = day;
+    //     this.alarmTrendMonth = month;
+    //     this.$nextTick(() => {
+    //       this.alarmTrendChartSetDay();
+    //     });
+    //   }
+    // });
   },
   methods: {
     getData() {
       return request({
         url: '/system/device/deviceSignal',
-        method: 'get',
+        method: 'get'
-      })
+      });
     },
     getTicketData() {
       return request({
         url: '/system/warning/warningList',
-        method: 'get',
+        method: 'get'
-      })
+      });
     },
     initTicketAllChart(ticketAll) {
       if (!this.ticketAllChart) {
-        this.ticketAllChart = echarts.init(this.$refs.ticketAll)
+        this.ticketAllChart = echarts.init(this.$refs.ticketAll);
       }
 
       let legends = Object.values(this.workStatusList);
@@ -202,9 +210,9 @@ export default {
         return {
           name: this.workStatusList[v.workStatus],
           value: v.workCount
-        }
+        };
-      })
+      });
-      console.log(data, ticketAll)
+      console.log(data, ticketAll);
       let option = {
         tooltip: {
           trigger: 'item',
@@ -234,7 +242,7 @@ export default {
             emphasis: {
               label: {
                 show: true,
-                fontSize: '20',
+                fontSize: '20'
               }
             },
             labelLine: {
@@ -247,139 +255,229 @@ export default {
       this.ticketAllChart.setOption(option);
     },
     initAlarmTrendChart() {
-      if (!this.alarmTrendChart) {
+      this.alarmTrendChart = echarts.init(this.$refs.alarmTrend);
-        this.alarmTrendChart = echarts.init(this.$refs.alarmTrend)
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '01月',
+            '02月',
+            '03月',
+            '04月',
+            '05月',
+            '06月',
+            '07月',
+            '08月',
+            '09月',
+            '10月',
+            '11月',
+            '12月'
+          ],
+          axisLine: {
+            //这是x轴文字颜色
+            lineStyle: {
+              color: '#709fd9'
             }
-      this.alarmTrendChart.setOption({
-        visualMap: [{
-          show: false,
-          type: 'continuous',
-          seriesIndex: 0
-        }],
-        toolbox: {
-          show: true,
-          feature: {
-            // myHour: {
-            //   show: true,
-            //   title: '每小时',
-            //   name: '时',
-            //   icon: 'path://M113.48438,148.58984H248.25v318.35938h-30.85938v-32.42188h-73.04688v37.10938h-30.85938V148.58984zM217.39062,177.49609h-73.04688v98.82812h73.04688V177.49609zM144.34375,405.62109h73.04688V304.44922h-73.04688V405.62109zM261.14062,197.80859H399.8125v-86.32812h31.25v86.32812h55.46875v28.90625H431.0625v210.15625c0,34.89355-16.66895,52.34375-50,52.34375c-15.10645,0-37.24023-0.39062-66.40625-1.17188c-1.30273-9.375-3.3877-20.3125-6.25-32.8125c27.34375,2.08105,48.69727,3.125,64.0625,3.125c18.22852,0,27.34375-9.24707,27.34375-27.73438V226.71484H261.14062V197.80859zM304.89062,264.21484c20.83105,38.02197,36.58789,68.35938,47.26562,91.01562c-6.77148,3.125-17.1875,8.33398-31.25,15.625c-10.15625-24.7373-24.74023-55.59668-43.75-92.57812L304.89062,264.21484z',
-            //   onclick: function () {
-            //     console.log('每小时')
-            //   }
-            // },
-            myDay: {
-              show: true,
-              title: '每天',
-              name: '天',
-              icon: 'path://M105.46875,450.16797c97.5249-41.53418,154.29688-99.34668,170.3125-173.4375H110.54688v-29.6875h169.33594c1.17188-18.4873,1.75781-50.39062,1.75781-95.70312H132.03125v-29.6875h337.5v29.6875H316.01562c-0.2627,27.21582-0.78125,59.11572-1.5625,95.70312h175v29.6875H319.72656c24.86914,82.55273,83.26758,137.7627,175.19531,165.625c-10.67773,12.75977-19.66211,23.56543-26.95312,32.42188c-84.89648-34.24707-140.75586-90.82031-167.57812-169.72656c-20.5752,73.4375-77.4751,131.70508-170.70312,174.80469C124.21875,472.82422,116.14355,462.92773,105.46875,450.16797z',
-              onclick: () => {
-                this.alarmTrendChartSetDay()
           }
         },
-            myMonth: {
+        yAxis: {
-              show: true,
+          type: 'value',
-              title: '每月',
+          axisLine: {
-              name: '月',
+            //这是x轴文字颜色
-              icon: 'path://M225.19531,349.82422c-5.85938,50.2627-25.45801,95.70312-58.78906,136.32812c-8.33447-8.0752-17.31885-15.8877-26.95312-23.4375c25.25928-27.34375,42.1875-59.89355,50.78125-97.65625c5.9873-27.8623,8.98438-66.40625,8.98438-115.625V114.27734h260.9375v304.6875c0,38.54102-18.35938,57.8125-55.07812,57.8125c-15.36523,0-35.15625-0.2627-59.375-0.78125c-1.30273-9.375-3.25586-20.3125-5.85938-32.8125c23.95605,1.5625,42.83789,2.34375,56.64062,2.34375c21.09375,0,31.64062-10.28711,31.64062-30.85938v-64.84375H225.19531zM228.32031,321.30859H428.125v-75H231.25C231.25,272.35254,230.27344,297.35254,228.32031,321.30859z M231.25,143.57422v74.21875h196.875v-74.21875H231.25z',
+            lineStyle: {
-              onclick: () => {
+              color: '#709fd9'
-                this.alarmTrendChartSetMonth()
+            }
           }
         },
+        series: [
+          {
+            data: [
+              820,
+              932,
+              901,
+              934,
+              1290,
+              1330,
+              1320,
+              820,
+              932,
+              901,
+              934,
+              1290
+            ],
+            // 线的颜色
+            lineStyle: {
+              color: '#06ccf9'
+            },
+            //  点的颜色
+            itemStyle: {
+              normal: {
+                color: '#06ccf9'
               }
             },
-        title: [{
-          left: 'center',
-          text: ''
-        }],
-        tooltip: {
-          trigger: 'axis',
-          formatter: '{b0}<br />告警数: {c0}'
-        },
-        textStyle: {
-          color: '#ffffff'
-        },
-        xAxis: [{
-          data: [],
-          axisLabel: { show: false }
-        }],
-        yAxis: [{
-          splitLine: { show: false }
-        }],
-        grid: [{
-          containLabel: true,
-          left: '5',
-          right: '5',
-          top: '20%',
-          height: '70%'
-        }],
-        series: [{
             type: 'line',
-          showSymbol: false,
+            smooth: true
-          data: []
+          }
-        }]
+        ]
-      });
+      };
-      this.alarmTrendChart.showLoading();
+      this.alarmTrendChart.setOption(option);
+      // this.alarmTrendChart.showLoading();
     },
     alarmTrendChartSetDay() {
       let dateX = [];
       let dateY = [];
       this.alarmTrendDay.forEach(v => {
-        dateX.push(v.datas)
+        dateX.push(v.datas);
-        dateY.push(v.count)
+        dateY.push(v.count);
       });
-      this.alarmTrendChartSetData(dateX, dateY)
+      this.alarmTrendChartSetData(dateX, dateY);
       this.alarmTrendChart.hideLoading();
     },
     alarmTrendChartSetMonth() {
       let dateX = [];
       let dateY = [];
       this.alarmTrendMonth.forEach(v => {
-        dateX.push(v.datas)
+        dateX.push(v.datas);
-        dateY.push(v.count)
+        dateY.push(v.count);
       });
-      this.alarmTrendChartSetData(dateX, dateY)
+      this.alarmTrendChartSetData(dateX, dateY);
       this.alarmTrendChart.hideLoading();
     },
     alarmTrendChartSetData(dateX, dateY) {
       this.alarmTrendChart.setOption({
-        visualMap: [{
+        visualMap: [
+          {
             show: false,
             type: 'continuous',
             seriesIndex: 0,
             min: Math.min.apply(null, dateY),
             max: Math.max.apply(null, dateY)
-        }],
+          }
-        xAxis: [{
+        ],
+        xAxis: [
+          {
             data: dateX
-        }],
+          }
-        series: [{
+        ],
+        series: [
+          {
             type: 'line',
             showSymbol: false,
             data: dateY
-        }]
+          }
-      })
+        ]
+      });
+    },
+    initCenterChart(alarmAll) {
+    // initCenterChart1(alarmAll) {
+      this.centerChart = echarts.init(this.$refs.centerRight);
+      let snapAlarmAll = [];
+      for (let index = 0; index < 4; index++) {
+        let snap = alarmAll.find(v => v.signalLevel == index + 1);
+        if (snap) {
+          snapAlarmAll.push(snap.warningCount);
+        } else {
+          snapAlarmAll.push(0);
+        }
+      }
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: ['一级告警', '二级告警', '三级告警', '四级告警'],
+          axisLine: {
+            //这是x轴文字颜色
+            lineStyle: {
+              color: '#709fd9'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            //这是x轴文字颜色
+            lineStyle: {
+              color: '#709fd9'
+            }
+          },
+          splitLine: {
+            //网格线
+            lineStyle: {
+              type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+            },
+            show: false //隐藏或显示
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 20,
+            data: [
+              {
+                value: snapAlarmAll[0],
+                itemStyle: {
+                  color: '#19f1ec'
+                }
+              },
+              {
+                value: snapAlarmAll[1],
+                itemStyle: {
+                  color: '#e070dc'
+                }
+              },
+              {
+                value: snapAlarmAll[2],
+                itemStyle: {
+                  color: '#f1d019'
+                }
+              },
+              {
+                value: snapAlarmAll[3],
+                itemStyle: {
+                  color: '#ff4c4c'
+                }
+              }
+            ], //数据
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示
+                  position: 'top', //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: '#709fd9',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          }
+        ]
+      };
+      this.centerChart.setOption(option);
     },
 
     initAlarmAllChart(alarmAll) {
-      if (!this.alarmAllChart) {
+    // initCenterChart(alarmAll) {
-        this.alarmAllChart = echarts.init(this.$refs.alarmAll)
+      // if (!this.alarmAllChart) {
-      }
+      //   this.alarmAllChart = echarts.init(this.$refs.alarmAll);
-      let snapAlarmAll = []
+      // }
+      let snapAlarmAll = [];
       for (let index = 0; index < 4; index++) {
-        let snap = alarmAll.find(v => v.signalLevel == index + 1)
+        let snap = alarmAll.find(v => v.signalLevel == index + 1);
         if (snap) {
-          snapAlarmAll.push(snap.warningCount)
+          snapAlarmAll.push(snap.warningCount);
         } else {
-          snapAlarmAll.push(0)
+          snapAlarmAll.push(0);
         }
       }
-      let level4 = '四级告警 ' + snapAlarmAll[3]
+      console.log(snapAlarmAll);
-      let level3 = '三级告警 ' + snapAlarmAll[2]
+      debugger
-      let level2 = '二级告警 ' + snapAlarmAll[1]
+      let level4 = '四级告警 ' + snapAlarmAll[3];
-      let level1 = '一级告警 ' + snapAlarmAll[0]
+      let level3 = '三级告警 ' + snapAlarmAll[2];
+      let level2 = '二级告警 ' + snapAlarmAll[1];
+      let level1 = '一级告警 ' + snapAlarmAll[0];
       let levels = [level1, level2, level3, level4];
-      let levelsColors = ['#ee504f', '#edb14f', '#42cabe', '#407ebb']
+      let levelsColors = ['#ee504f', '#edb14f', '#42cabe', '#407ebb'];
       let freeStyle = {
         normal: {
           color: 'rgba(192,192,192,0.2)',
@@ -412,7 +510,7 @@ export default {
         }
       };
       let maxRadius = this.$refs.alarmAll.offsetHeight / 3;
-      let sum = eval(snapAlarmAll.join("+"));
+      let sum = eval(snapAlarmAll.join('+'));
 
       let series = [];
       for (let index = 0; index < snapAlarmAll.length; index++) {
@@ -421,7 +519,10 @@ export default {
           clockWise: false,
           hoverAnimation: false,
           center: ['70%', '50%'],
-          radius: [maxRadius * (0.85 - index * 0.2), maxRadius * (1 - index * 0.2)],
+          radius: [
+            maxRadius * (0.85 - index * 0.2),
+            maxRadius * (1 - index * 0.2)
+          ],
           itemStyle: dataStyle,
           data: [
             {
@@ -439,15 +540,16 @@ export default {
               }
             },
             {
-              value: sum == 0 ? 1 : (sum - snapAlarmAll[index]),
+              value: sum == 0 ? 1 : sum - snapAlarmAll[index],
               name: 'invisible',
               itemStyle: freeStyle
             }
           ]
+        };
+        series.push(snap);
       }
-        series.push(snap)
+      this.alarmAllChart.setOption({
-      }
+        //加载数据图表
-      this.alarmAllChart.setOption({ //加载数据图表
         legend: {
           show: true,
           orient: 'vertical',
@@ -464,28 +566,152 @@ export default {
         series: series
       });
     },
+    initBottomChart() {
+      this.bottomChart = echarts.init(this.$refs.bottomLeftChart);
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '01月',
+            '02月',
+            '03月',
+            '04月',
+            '05月',
+            '06月',
+            '07月',
+            '08月',
+            '09月',
+            '10月',
+            '11月',
+            '12月'
+          ],
+          axisLine: {
+            //这是x轴文字颜色
+            lineStyle: {
+              color: '#709fd9'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            //这是y轴文字颜色
+            lineStyle: {
+              color: '#709fd9'
+            }
+          },
+          splitLine: {
+            //网格线
+            lineStyle: {
+              type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+            },
+            show: true //隐藏或显示
+          }
+        },
+        legend: {
+          bottom: 10
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: 20,
+            data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 900, 800], //数据
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#06B5D7' }, //柱图渐变色
+                  { offset: 0.5, color: '#44C0C1' }, //柱图渐变色
+                  { offset: 1, color: '#71C8B1' } //柱图渐变色
+                ])
+              },
+              emphasis: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#71C8B1' }, //柱图高亮渐变色
+                  { offset: 0.7, color: '#44C0C1' }, //柱图高亮渐变色
+                  { offset: 1, color: '#06B5D7' } //柱图高亮渐变色
+                ])
+              }
+            },
+            legend: {
+              bottom: 10,
+              textStyle: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      };
+      this.bottomChart.setOption(option);
+    },
+    initTopChart() {
+      this.topChart = echarts.init(this.$refs.topLeftChart);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+         series : [{
+                name: '设备详情',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                center: ['50%', '50%'],
+                data:[
+              { value: 580, name: '锐能设备',itemStyle: { color: '#0a7ef6' } },
+              { value: 484, name: '铁塔设备',itemStyle: { color: '#77c8ff' } },
+            ],
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    },
+                    normal:{ 
+                        label:{ 
+                            show: true, 
+                            // formatter: '{b} : {c} ({d}%)' 
+                        }, 
+                        labelLine :{show:true} 
+                    } 
+                }
+            }
+        ]
+      };
+      this.topChart.setOption(option);
+    },
     initBmpChart() {
       if (!this.bmapChart) {
-        this.bmapChart = echarts.init(this.$refs.bmap)
+        this.bmapChart = echarts.init(this.$refs.bmap);
       }
-      this.setOptions()
+      this.setOptions();
     },
     setOptions() {
       let option = {
-        title: {　　//标题
+        title: {
+          //标题
           textStyle: {
             color: '#fff'
           },
-          left: 'center'　　//标题位置，居中
+          left: 'center' //标题位置，居中
         },
         tooltip: {
           formatter: function(params) {
             return (
-              "设备名: " + params.data.deviceName + "<br>设备sn: " + params.data.deviceId
+              '设备名: ' +
+              params.data.deviceName +
+              '<br>设备sn: ' +
+              params.data.deviceId
             );
           }
         },
-        bmap: {　　//百度地图的设置
+        bmap: {
+          //百度地图的设置
           center: [104.114129, 37.550339],
           zoom: 5,
           roam: true,
@@ -512,49 +738,52 @@ export default {
             rippleEffect: { brushType: 'stroke' },
             hoverAnimation: true,
             animation: false,
-            itemStyle: { normal: { color: 'red', shadowBlur: 10, shadowColor: 'red' } },
+            itemStyle: {
-            zlevel: 1
+              normal: { color: 'red', shadowBlur: 10, shadowColor: 'red' }
             },
+            zlevel: 1
+          }
         ]
       };
-      loadBMap("mKEqGSlYu4puhYjqtRZlsyVOtstkQ9A6")
+      loadBMap('mKEqGSlYu4puhYjqtRZlsyVOtstkQ9A6').then(() => {
-        .then(() => {
         // 配置option
-          this.bmapChart.setOption(option)
+        this.bmapChart.setOption(option);
-          let bmap = this.bmapChart.getModel().getComponent('bmap').getBMap();
+        let bmap = this.bmapChart
+          .getModel()
+          .getComponent('bmap')
+          .getBMap();
         bmap.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
         bmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
         bmap.enableScrollWheelZoom(); //启用滚轮放大缩小
         // bmap.addControl(new BMap.MapTypeControl());//添加地图类型控件
         bmap.disable3DBuilding();
-          let zoomdrag = (() => {
+        let zoomdrag = () => {
-            let bounds = bmap.getBounds()
+          let bounds = bmap.getBounds();
-            let sw = bounds.getSouthWest()//获取西南角的经纬度(左下端点)
+          let sw = bounds.getSouthWest(); //获取西南角的经纬度(左下端点)
           let ne = bounds.getNorthEast(); //获取东北角的经纬度(右上端点)
           let wn = new BMap.Point(sw.lng, ne.lat); //获取西北角的经纬度(左上端点)
           let es = new BMap.Point(ne.lng, sw.lat); //获取东南角的经纬度(右下端点)
           // this.lng = bmap.getCenter().lng//经度
           // this.lat = bmap.getCenter().lat//纬度
           // this.lngLatZoom = [Number(this.lng.toFixed(2)), Number(this.lat.toFixed(2)), this.zoom]//经度 纬度 放大级别 用于watch监听
-            this.zoom = bmap.getZoom()//获取缩放级别
+          this.zoom = bmap.getZoom(); //获取缩放级别
-            console.log('zoom', bmap.getZoom())
+          console.log('zoom', bmap.getZoom());
-          })
+        };
-          bmap.addEventListener("zoomend", zoomdrag) //监听地图缩放
+        bmap.addEventListener('zoomend', zoomdrag); //监听地图缩放
-          bmap.addEventListener("dragend", zoomdrag) //监听地图拖拽平移
+        bmap.addEventListener('dragend', zoomdrag); //监听地图拖拽平移
 
         this.bmapChart.on('click', function(params) {
-            if (params.componentType == "series") {
+          if (params.componentType == 'series') {
             let { id } = params.data;
             window.open(`/hardware/device/detail?id=${id}`);
           }
-          })
+        });
-        })
+      });
-    },
     }
   }
+};
 </script>
 
-
 <style>
 .ec-extension-bmap {
   background: #a6c2df !important;
@@ -571,8 +800,14 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url('../../assets/image/chartbg.png');
+  background-size: cover;
+}
 #chart {
-  background-color: rgba(0, 0, 0, 0);
   padding: 0px;
   z-index: 10100;
   border: 0px;
@@ -585,21 +820,23 @@ export default {
 .center,
 .left,
 .right {
+  border: 1px solid #f00;
   position: absolute;
-  top: 30px;
+  top: 0;
   width: 28vw;
   height: 100vh;
   box-sizing: border-box;
   display: flex;
-  overflow: hidden;
 }
 .center {
-  width: 30vw;
+  // width: 30vw;
-  right: 35vw;
+  // right: 35vw;
+  width: 44vw;
+  right: 28vw;
   display: block;
-  color: black;
+  color: #fff;
   .tit {
-    padding-top: 20px;
+    padding-top: 105px;
     font-size: 40px;
     text-align: center;
     vertical-align: middle;
@@ -610,10 +847,49 @@ export default {
 }
 .left {
   left: 0;
-  padding: 35px 0 35px 35px;
+  padding: 70px 2px 15px 35px;
 }
 .right {
   right: 0;
-  padding: 35px 35px 35px 0;
+  padding: 70px 35px 15px 2px;
+}
+.my_context {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .my_item {
+    display: flex;
+    flex-direction: column;
+    span {
+      margin-top: 10px;
+    }
+    /deep/ svg path:first-child {
+      stroke: #19f1ec;
+    }
+  }
+}
+.bottom_left {
+  width: 100%;
+  height: 100%;
+  padding-top: 15px;
+}
+.my_cenbottom{
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 23px;
+  div{
+    width: 210px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url('../../assets/image/xiaokuang.png');
+    background-size: cover;
+    span{
+      font-size: 20px;
+    }
+  }
 }
 </style>