边界入侵功能地图监管段代码

src/views/map/components/zhongdian.vue

@@ -14,35 +14,10 @@
         </div>
       </div>
     </div>
-    <div v-if="false" class="block2">
+    <div class="block2">
-      <layout-title title="区域报警数"/>
+      <layout-title title="区域摄像头数量"/>
       <div class="options">
-        <div v-for="(item,index) in block2OptionsList" :key="index" class="option">
+        <div id="main1"/>
-          <div class="circular"><img :src="item.img" alt=""></div>
-          <div class="info">
-            <div class="title">{{ item.label }}</div>
-            <div class="count"> <count-to :start-val="0" :end-val="+item.count" :duration="3600"/></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-if="false" class="block3">
-      <layout-title title="安全管理记录"/>
-      <div class="content">
-        <div class="table">
-          <div class="tr">
-            <div class="td">公司名称</div>
-            <div class="td">创建数</div>
-            <div class="td">检查次数</div>
-            <div class="td">隐患数量</div>
-          </div>
-          <div v-for="(item,index) in block3List" :key="index" class="tr">
-            <div class="td">{{ item.CORP_NAME }}</div>
-            <div class="td">{{ item.OUTSOURCED_COUNT }}</div>
-            <div class="td">{{ item.CHECK_COUNT }}</div>
-            <div class="td">{{ item.HIDDEN_COUNT }}</div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="block4">
@@ -69,7 +44,9 @@
 import layoutTitle from './title.vue'
 import CountTo from 'vue-count-to'
 import { requestFN } from '@/utils/request'
+import * as echarts from 'echarts'
 
+let Echarts1
 export default {
   components: {
     CountTo,
@@ -131,6 +108,12 @@ export default {
   mounted() {
     this.initNum()
     this.initgetTable()
+    window.onresize = function() {
+      Echarts1 && Echarts1.resize()
+    }
+  },
+  beforeDestroy() {
+    Echarts1 = null
   },
   methods: {
     getCount() {
@@ -153,13 +136,14 @@ export default {
       })
     },
     initNum() {
-      requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId }
+      requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId, source: '0' }
       ).then((data0) => {
-        this.block1OptionsList[0].count = data0.alarmList.total
+        this.block1OptionsList[0].count = data0.alarmList.page.total
         requestFN('/map/mapPlatformelectronic/listAllLocation', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
         ).then((data1) => {
           this.block4List = data0.alarmList.list
-          this.block1OptionsList[0].count = data1.varList.total
+          this.block1OptionsList[1].count = data1.varList.length
+          this.initEcharts1(data1.iconData)
         }).catch((e) => {
           this.$message.error(e)
         })
@@ -178,6 +162,112 @@ export default {
       ).then((data) => {
         this.block3List = data.varList
       })
+    },
+    initEcharts1(data) {
+      console.log(data)
+      const XaxisData = []
+      const seriesData1 = []
+      for (const optionKey in data) {
+        console.log(data[optionKey])
+        for (let i = 0; i < data[optionKey].length; i++) {
+          console.log(data[optionKey][i])
+          XaxisData.push(data[optionKey][i].NAME)
+          seriesData1.push(data[optionKey][i].num)
+        }
+      }
+
+      // eslint-disable-next-line no-undef
+      Echarts1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '5%',
+          top: '12%',
+          containLabel: true
+        },
+        legend: {
+          top: '0%',
+          right: '0%',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          itemWidth: 12,
+          itemHeight: 10
+        },
+        xAxis: {
+          type: 'category',
+          data: XaxisData,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 12
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: '50',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#8c9493'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 14
+            }
+          }
+        },
+        series: [
+          {
+            name: '摄像头',
+            type: 'bar',
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#00f0ff'
+                    },
+                    {
+                      offset: 1,
+                      color: '#0066ff'
+                    }
+                  ],
+                  false
+                )
+              }
+            },
+            data: seriesData1
+          }
+        ]
+      }
+      Echarts1.setOption(option)
     }
   }
 }
@@ -263,6 +353,7 @@ export default {
       }
     }
   }
+
   .block2 {
     width: 410px;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
@@ -273,67 +364,12 @@ export default {
       border: 1px solid;
       border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
       border-top: none;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-items: center;
-      position: relative;
-      height: 150px;
 
-      .option{
+      #main1 {
-        width: 50%;
+        width: 100%;
-        display: flex;
+        height: 250px;
-        align-items: center;
-
-        justify-content: space-around;
-        .circular {
-          margin-top: 5px;
-          background-image: url("../../../assets/map/anquan/icobg.png");
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          width: 70px;
-          height: 70px;
-          text-align: center;
-          padding-top: 13px;
-
-          img {
-            width: 25px;
-            height: 26px;
-            animation: slideY 2s infinite;
       }
     }
-
-        .info{
-          flex: 1;
-          text-align: center;
-
-          .title{
-            background-image: url("../../../assets/map/anquan/label.png");
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            width: 120px;
-            height: 24px;
-            margin-top: 5px;
-            font-size: 12px;
-            line-height: 25px;
-            text-align: center;
-            color: #fff;
-          }
-          .count{
-            margin-top: 10px;
-            font-size: 24px;
-            background: linear-gradient(to top, #48bbf0, #ffffff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: bold;
-            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
-
-          }
-        }
-
-      }
-
-    }
   }
 
   .block3 {
@@ -432,6 +468,7 @@ export default {
     transform: scale(0.9);
   }
 }
+
 @keyframes slideY {
   0% {
     transform: translateY(0);