zc

.env.development

@@ -25,7 +25,7 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 # ####################内网接口配置####################
 
 # 西农现场
-VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
+# VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
 
 # 43内网
 # VUE_APP_BASE_LOCAL_API = '192.168.1.43/labSystem'
@@ -38,7 +38,7 @@ VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
 # 柴
 # VUE_APP_BASE_LOCAL_API = '192.168.1.9:8080'
 # 小飞
-# VUE_APP_BASE_LOCAL_API = '192.168.1.17:8080'
+VUE_APP_BASE_LOCAL_API = '192.168.1.17:8080'
 # 志伟
 # VUE_APP_BASE_LOCAL_API = '192.168.1.20:8080'
 # 林总
@@ -49,7 +49,7 @@ VUE_APP_BASE_LOCAL_API = '172.16.0.65/api'
 # ####################外网接口配置####################
 
 # 西农现场
-VUE_APP_BASE_API = '172.16.0.65/api'
+# VUE_APP_BASE_API = '172.16.0.65/api'
 
 # 实验室安全管理系统/开发环境
 # 1.8内网V3地址
@@ -72,7 +72,7 @@ VUE_APP_BASE_API = '172.16.0.65/api'
 # 志伟
 # VUE_APP_BASE_API = '192.168.1.20:8080'
 # 小飞
-# VUE_APP_BASE_API = '192.168.1.17:8080'
+VUE_APP_BASE_API = '192.168.1.17:8080'
 # 高升
 # VUE_APP_BASE_API = '192.168.1.39:8080'
 

src/api/index.js

@@ -119,3 +119,44 @@ export function iotCameraFindByCondition(data) {
     data: data
   })
 }
+/******************************** 安全总览 ********************************/
+//实验室状态统计
+export function reportReportBigDataLabStateStatistics(query) {
+  return request({
+    url: '/report/report/bigData/labStateStatistics',
+    method: 'get',
+    params: query
+  })
+}
+//危险源总数排行
+export function reportReportBigDataHazardTotalSort (query) {
+  return request({
+    url: '/report/report/bigData/hazardTotalSort',
+    method: 'get',
+    params: query
+  })
+}
+//危化品存量排行
+export function reportReportBigDataChemicalStockSort (query) {
+  return request({
+    url: '/report/report/bigData/chemicalStockSort',
+    method: 'get',
+    params: query
+  })
+}
+//安全风险预警处置
+export function reportReportBigDataWarningHandle (query) {
+  return request({
+    url: '/report/report/bigData/warningHandle',
+    method: 'get',
+    params: query
+  })
+}
+//访问人数
+export function reportReportBigDataCountStatistics (query) {
+  return request({
+    url: '/report/report/bigData/countStatistics',
+    method: 'get',
+    params: query
+  })
+}

src/views/safetyOverview/pageComponent/dangerComponents.vue

@@ -6,27 +6,36 @@
       <div class="danger-num">
         <div class="danger-left-box">
           <p>危险源总数：</p>
-          <p>739</p>
+          <p>{{hazardTotal}}</p>
         </div>
         <div class="danger-right-box">
           <p>今日新增危险源：</p>
-          <p>2</p>
+          <p>{{newHazard}}</p>
         </div>
       </div>
-      <div id="dangerComponentsECharts"></div>
-      <div class="position-num-max-big-box">
+      <div id="dangerComponentsECharts" v-if="dataList[0]"></div>
+      <div class="position-num-max-name-box" v-if="dataList[0]" v-for="(item,index) in dataList" :key="index">
         <div class="position-for-box" v-for="(item,index) in dataList" :key="index">
-          <p>总数:{{item.data1}}</p>
+          {{item.deptSortName}}
+        </div>
+      </div>
+      <div class="position-num-max-big-box" v-if="dataList[0]">
+        <div class="position-for-box" v-for="(item,index) in dataList" :key="index">
+          <p>总数:{{item.total}}</p>
           <p>丨</p>
-          <p>危险品:{{item.data2}}</p>
+          <p>危险品:{{item.chemical}}</p>
           <p>丨</p>
-          <p>冷热设备:{{item.data3}}</p>
+          <p>冷热设备:{{item.coolHotdevice}}</p>
         </div>
       </div>
+      <p v-if="!dataList[0]" style="color:#dedede;font-size:18px;line-height:200px;text-align: center;">暂无数据</p>
     </div>
   </div>
 </template>
 <script>
+  import {
+    reportReportBigDataHazardTotalSort,
+  } from "@/api/index";
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   export default {
     name: 'dangerComponents',
@@ -41,22 +50,70 @@
         },
         //eCharts定时器
         eChartsTimer:null,
-        dataList:[
-          {data1:'954',data2:'78',data3:'18'},
-          {data1:'865',data2:'56',data3:'25'},
-          {data1:'732',data2:'25',data3:'12'},
-          {data1:'512',data2:'15',data3:'33'},
-          {data1:'368',data2:'32',data3:'21'},
-        ],
+        dataList:[],
+        hazardTotal:0,
+        newHazard:0,
+        refreshNum:0,
+        maxData:[],
+        dataIndex:0,
       }
     },
     created() {
 
     },
     mounted() {
-      this.eChartsMethod();
+      this.timedRefresh();
     },
     methods: {
+      timedRefresh(){
+        let self = this;
+        self.getData();
+        //定时动画
+        clearInterval(self.eChartsTimer);
+        self.eChartsTimer = setInterval(function(){
+          self.judgmentData();
+        },1000*30);
+      },
+      //执行判断
+      judgmentData(){
+        this.dataIndex++
+        if(this.maxData[this.dataIndex]){
+          this.setData();
+        }else{
+          this.getData();
+        }
+      },
+      //滚动数据
+      setData(){
+        this.$set(this,'dataList',this.maxData[this.dataIndex]);
+        this.eChartsMethod();
+      },
+      //获取数据
+      getData(){
+        reportReportBigDataHazardTotalSort().then( response => {
+          this.$set(this,'hazardTotal',response.data.hazardTotal?response.data.hazardTotal:0);
+          this.$set(this,'newHazard',response.data.newHazard?response.data.newHazard:0);
+          let maxList = [];
+          let list = [];
+          let num = 0;
+          for(let i=0;i<response.data.hazardTotalSortSubs.length;i++){
+            if(num < 5){
+              list.push(response.data.hazardTotalSortSubs[i])
+              num++
+            }else{
+              maxList.push(list);
+              maxList = JSON.parse(JSON.stringify(maxList));
+              list = [response.data.hazardTotalSortSubs[i]];
+              num = 1;
+            }
+          }
+          maxList.push(list);
+          maxList = JSON.parse(JSON.stringify(maxList));
+          this.$set(this,'maxData',maxList);
+          this.$set(this,'dataIndex',0);
+          this.setData();
+        });
+      },
       eChartsMethod() {
         let msg = {
           data: [25, 35.5, 46.5, 56.5, 63.5],
@@ -159,14 +216,8 @@
           ]
         }
         let echartsBox = this.$echarts.init(document.getElementById('dangerComponentsECharts'));
+        echartsBox.clear();
         echartsBox.setOption(option);
-        //定时动画
-        clearInterval(this.eChartsTimer);
-        this.eChartsTimer = setInterval(function(){
-          echartsBox.clear();
-          echartsBox.setOption(option);
-        },1000*6);
-
       }
     },
     beforeDestroy() {
@@ -247,6 +298,18 @@
         width: 800px;
         height: 330px;
       }
+      .position-num-max-name-box{
+        z-index:5;
+        position: absolute;
+        top:112px;
+        left:35px;
+        div{
+          color:#fff;
+          line-height:18px;
+          font-size:18px;
+          margin-bottom:43px;
+        }
+      }
       .position-num-max-big-box{
         z-index:5;
         position: absolute;

src/views/safetyOverview/pageComponent/subComponents.vue

@@ -12,17 +12,17 @@
       <div class="sub-sort-num">
         <div class="sub-sort-num-min">
           <p class="sub-sort-num-name-left">使用数量：</p>
-          <p class="sub-sort-num-p colorA">175</p>
+          <p class="sub-sort-num-p colorA">{{useTotal}}</p>
           <p class="sub-sort-num-name-right">间</p>
         </div>
         <div class="sub-sort-num-min">
           <p class="sub-sort-num-name-left">空闲数量：</p>
-          <p class="sub-sort-num-p colorB">130</p>
+          <p class="sub-sort-num-p colorB">{{availableTotal}}</p>
           <p class="sub-sort-num-name-right">间</p>
         </div>
         <div class="sub-sort-num-min">
           <p class="sub-sort-num-name-left">异常数量：</p>
-          <p class="sub-sort-num-p colorC">19</p>
+          <p class="sub-sort-num-p colorC">{{exceptionalTotal}}</p>
           <p class="sub-sort-num-name-right">间</p>
         </div>
       </div>
@@ -31,6 +31,9 @@
   </div>
 </template>
 <script>
+  import {
+    reportReportBigDataLabStateStatistics,
+  } from "@/api/index";
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
   export default {
     name: 'subComponents',
@@ -45,17 +48,64 @@
         },
         //eCharts定时器
         eChartsTimer:null,
-        totalityNum:[3,6,4],
+        totalityNum:[],
+        useTotal:0,//使用数量
+        availableTotal:0,//空闲数量
+        exceptionalTotal:0,//异常数量
       }
     },
     created () {
 
     },
     mounted () {
-      this.eChartsMethod();
+      this.timedRefresh();
     },
     methods: {
-      eChartsMethod(){
+      timedRefresh(){
+        let self = this;
+        self.getData();
+        //定时动画
+        clearInterval(self.eChartsTimer);
+        self.eChartsTimer = setInterval(function(){
+          self.getData();
+        },1000*30);
+      },
+      getData(){
+        reportReportBigDataLabStateStatistics({deptId:0}).then( response => {
+          let totalityNum = [];
+          if(response.data.labTotal != '0'){
+            response.data.labTotal = response.data.labTotal+'';
+            for(let i=0;i<response.data.labTotal.length;i++){
+              totalityNum.push(response.data.labTotal[i]);
+            }
+            this.$set(this,'totalityNum',totalityNum);
+          }else{
+            this.$set(this,'totalityNum',[0]);
+          }
+          this.$set(this,'useTotal',response.data.useTotal&&response.data.useTotal<10000?response.data.useTotal:(response.data.useTotal&&response.data.useTotal>9999?9999:0));
+          this.$set(this,'availableTotal',response.data.availableTotal&&response.data.availableTotal<10000?response.data.availableTotal:(response.data.availableTotal&&response.data.availableTotal>9999?9999:0));
+          this.$set(this,'exceptionalTotal',response.data.exceptionalTotal&&response.data.exceptionalTotal<10000?response.data.exceptionalTotal:(response.data.exceptionalTotal&&response.data.exceptionalTotal>9999?9999:0));
+          let hour = [];
+          let useTotal = [];
+          let availableTotal = [];
+          let exceptionalTotal = [];
+          if(response.data.labStateSubs[0]){
+            for(let i=0;i<response.data.labStateSubs.length;i++){
+              hour.push(response.data.labStateSubs[i].hour)
+              useTotal.push(response.data.labStateSubs[i].useTotal)
+              availableTotal.push(response.data.labStateSubs[i].availableTotal)
+              exceptionalTotal.push(response.data.labStateSubs[i].exceptionalTotal)
+            }
+          }else{
+            hour = ["0.00", "3.00", "6.00", "9.00", "12.00", "15.00", "18.00", "21.00", "24.00",];
+            useTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+            availableTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+            exceptionalTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+          }
+          this.eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal,);
+        });
+      },
+      eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal){
         let option = {
           title: {
             text: "",
@@ -111,17 +161,7 @@
                   color: "#042226",
                 },
               },
-              data: [
-                "0.00",
-                "3.00",
-                "6.00",
-                "9.00",
-                "12.00",
-                "15.00",
-                "18.00",
-                "21.00",
-                "24.00",
-              ],
+              data: hour,
             },
           ],
           yAxis: [
@@ -189,9 +229,7 @@
                   color: "rgb(1,131,250)",
                 },
               },
-              data: [
-                40, 14, 52, 30, 12, 35, 45, 12, 46,
-              ],
+              data: useTotal,
             },
             {
               name: "空闲数量",
@@ -231,9 +269,7 @@
                   color: "rgb(21,130,124)",
                 },
               },
-              data: [
-                10, 22, 12, 15, 4, 15, 17, 9, 4,
-              ],
+              data: availableTotal,
             },
             {
               name: "异常数量",
@@ -273,20 +309,13 @@
                   color: "rgb(255,132,0)",
                 },
               },
-              data: [
-                7, 5, 2, 6, 4, 1, 5, 2, 3,
-              ],
+              data: exceptionalTotal,
             },
           ],
         };
         let echartsBox = this.$echarts.init(document.getElementById('subComponentsECharts'));
+        echartsBox.clear();
         echartsBox.setOption(option);
-        //定时动画
-        clearInterval(this.eChartsTimer);
-        this.eChartsTimer = setInterval(function(){
-          echartsBox.clear();
-          echartsBox.setOption(option);
-        },1000*6);
       }
     },
     beforeDestroy() {
@@ -354,7 +383,7 @@
             color:#fff;
             height:62px;
             line-height:62px;
-            margin:0 10px 0 30px;
+            margin:0 10px 0 18px;
           }
           .sub-sort-num-p{
             margin-top:15px;
@@ -395,7 +424,7 @@
             color:#fff;
             height:62px;
             line-height:62px;
-            margin-right:30px;
+            margin-right:18px;
           }
         }
       }

src/views/safetyOverview/pageComponent/troubleDistributionComponents.vue

@@ -186,7 +186,7 @@
         this.eChartsTimerLeft = setInterval(function(){
           echartsBox.clear();
           echartsBox.setOption(option);
-        },1000*6);
+        },1000*30);
       },
       eChartsMethodRight() {
         const indicatorList = [
@@ -315,7 +315,7 @@
         this.eChartsTimerRight = setInterval(function(){
           echartsBox.clear();
           echartsBox.setOption(option);
-        },1000*6);
+        },1000*30);
 
       }
     },

src/views/safetyOverview/pageComponent/troubleRankingComponents.vue

@@ -242,7 +242,7 @@
         this.eChartsTimer = setInterval(function(){
           echartsBox.clear();
           echartsBox.setOption(option);
-        },1000*6);
+        },1000*30);
       },
     },
     beforeDestroy() {

src/views/safetyOverview/pageComponent/userNumComponents.vue

@@ -4,50 +4,76 @@
     <div class="userNum-max-box">
       <p class="userNum-title-p">今日访问人数</p>
       <div class="userNum-big-box">
-        <span>6547</span>
+        <span>{{userData.visitorCount}}</span>
         <span>人</span>
       </div>
     </div>
     <div class="userNum-max-box" style="margin:0 18px;">
       <p class="userNum-title-p">今日实验人数</p>
       <div class="userNum-big-box">
-        <span>3215</span>
+        <span>{{userData.labOccupancyCount}}</span>
         <span>人</span>
       </div>
     </div>
     <div class="userNum-max-box" style="margin-right:18px;">
       <p class="userNum-title-p">今日值日人数</p>
       <div class="userNum-big-box">
-        <span>769</span>
+        <span>{{userData.dutyCount}}</span>
         <span>人</span>
       </div>
     </div>
     <div class="userNum-max-box">
       <p class="userNum-title-p">今日检查次数</p>
       <div class="userNum-big-box">
-        <span>215</span>
+        <span>{{userData.checkCount}}</span>
         <span>次</span>
       </div>
     </div>
   </div>
 </template>
 <script>
+import {
+  reportReportBigDataCountStatistics,
+} from "@/api/index";
   export default {
     name: 'userNumComponents',
     data () {
       return {
-
+        //eCharts定时器
+        eChartsTimer:null,
+        userData:{},
       }
     },
     created () {
 
     },
     mounted () {
-
+      this.timedRefresh();
     },
     methods: {
-
+      timedRefresh(){
+        let self = this;
+        this.getList();
+        //定时动画
+        clearInterval(self.eChartsTimer);
+        self.eChartsTimer = setInterval(function(){
+          this.getList();
+        },1000*30);
+      },
+      getList(){
+        reportReportBigDataCountStatistics().then( response => {
+          this.$set(this,'userData',response.data);
+        });
+      },
     },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.eChartsTimer);
+    },
+    destroyed() {
+      //清除定时器
+      clearInterval(this.eChartsTimer);
+    }
   }
 </script>
 <style scoped lang="scss">

src/views/safetyOverview/pageComponent/warningComponents.vue

@@ -8,308 +8,339 @@
         <div class="position-text-max-box">
           <div>
             <p>预警处置总数:</p>
-            <p>15</p>
+            <p>{{deptData.handleTotal}}</p>
           </div>
           <div>
             <p>昨日处置总数:</p>
-            <p>6</p>
+            <p>{{deptData.yesterdayHandleTotal}}</p>
           </div>
           <div>
             <p>今日处置总数:</p>
-            <p>1</p>
+            <p>{{deptData.todayHandleTotal}}</p>
           </div>
           <div>
             <p>环比增长:</p>
-            <p>3%</p>
+            <p>{{deptData.rate}}</p>
           </div>
         </div>
         <div class="date-max-box">
-          <div :class="dateData==0?'checkColor':''">
-            <p>1</p>
-            <p>Mon</p>
-          </div>
-          <div :class="dateData==1?'checkColor':''">
-            <p>2</p>
-            <p>Tue</p>
-          </div>
-          <div :class="dateData==2?'checkColor':''">
-            <p>3</p>
-            <p>Wed</p>
-          </div>
-          <div :class="dateData==3?'checkColor':''">
-            <p>4</p>
-            <p>Thur</p>
-          </div>
-          <div :class="dateData==4?'checkColor':''">
-            <p>5</p>
-            <p>Fri</p>
-          </div>
-          <div :class="dateData==5?'checkColor':''">
-            <p>6</p>
-            <p>Sat</p>
-          </div>
-          <div :class="dateData==6?'checkColor':''">
-            <p>7</p>
-            <p>Sun</p>
-          </div>
-        </div>
-        <div class="for-position-dept-box" :style="'top:'+item.top+'px;left:'+item.left+'px;'"
-             v-for="(item,index) in deptList" :key="index">
-          <div class="for-position-name-box-one" v-if="item.type">
+          <div :class="dayIndex==index?'checkColor':''" v-for="(item,index) in timeList" :key="index" @click="dayButton(index)">
+            <p>{{item.label}}</p>
             <p>{{item.name}}</p>
-            <p>今日预警处置：{{item.value}}</p>
-            <img src="@/assets/ZDimages/img_bg_xtred@1x.png">
           </div>
-          <div class="for-position-name-box" v-if="!item.type">
-            <p>{{item.name}}</p>
-            <img src="@/assets/ZDimages/img_bg_xtblu@1x.png">
+        </div>
+        <div class="for-position-dept-max-box">
+          <div class="for-position-dept-box"
+               v-for="(item,index) in deptData.warningHandleSubs" :key="index">
+            <div class="for-position-name-box-one" v-if="item.handleTotal>0">
+              <p>{{item.deptSortName}}</p>
+              <p>今日预警处置：{{item.handleTotal}}</p>
+              <img src="@/assets/ZDimages/img_bg_xtred@1x.png">
+            </div>
+            <div class="for-position-name-box" v-if="item.handleTotal == 0">
+              <p>{{item.deptSortName}}</p>
+              <img src="@/assets/ZDimages/img_bg_xtblu@1x.png">
+            </div>
+            <p class="for-position-address-img-one" v-if="item.handleTotal>0">{{item.handleTotal}}</p>
+            <p class="for-position-address-img" v-if="item.handleTotal == 0">{{item.handleTotal}}</p>
           </div>
-          <p class="for-position-address-img-one" v-if="item.type">{{item.value}}</p>
-          <p class="for-position-address-img" v-if="!item.type">{{item.value}}</p>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import {
+  reportReportBigDataWarningHandle,
+} from "@/api/index";
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
+
   export default {
     name: 'warningComponents',
     components: {
       titlePageImgComponents
     },
-    data () {
+    data() {
       return {
-        propsData:{
-          title:'安全风险预警处置',
+        propsData: {
+          title: '安全风险预警处置'
         },
-        dateData:new Date().getDay(),
-        deptList:[
-          {
-            name:"农学院",
-            value:"1",
-            top:171,
-            left:257,
-            type:true,
-          },
-          {
-            name:"理学院",
-            value:"1",
-            top:165,
-            left:544,
-            type:false,
-          },
-          {
-            name:"化学与药物",
-            value:"4",
-            top:90,
-            left:739,
-            type:false,
-          },
-          {
-            name:"生命科学",
-            value:"2",
-            top:231,
-            left:742,
-            type:false,
-          },
-          {
-            name:"园林艺术",
-            value:"1",
-            top:282,
-            left:294,
-            type:false,
-          },
-          {
-            name:"植物保护",
-            value:"3",
-            top:271,
-            left:533,
-            type:false,
-          },
-          {
-            name:"资源环境",
-            value:"1",
-            top:333,
-            left:717,
-            type:false,
-          },
-          {
-            name:"国重楼",
-            value:"2",
-            top:373,
-            left:454,
-            type:false,
-          },
-          // {
-          //   name:"林学院",
-          //   value:"0",
-          //   top:375,
-          //   left:230,
-          // },
-          // {
-          //   name:"林学院",
-          //   value:"0",
-          //   top:100,
-          //   left:384,
-          // },
-        ],
+        dateData: new Date().getDay(),
+        dayIndex:null,
+        timeList:[],
+        //获取数据
+        deptList: [],
+        //展示数据
+        deptData:{},
+        deptListIndex:0,
+        eChartsTimer:null,
+        eChartsTimerNum:0,
       }
     },
-    created () {
+    created() {
 
     },
-    mounted () {
-
+    mounted() {
+      this.initialize()
     },
     methods: {
-
+      timedRefresh(){
+        let self = this;
+        self.getData();
+        //定时动画
+        clearInterval(self.eChartsTimer);
+        self.eChartsTimer = setInterval(function(){
+          self.deptListIndex++
+          if(self.deptList[self.deptListIndex]){
+            self.$set(self,'deptData',self.deptList[self.deptListIndex]);
+          }else{
+            self.getData();
+          }
+        },1000*30);
+      },
+      //日期初始化
+      initialize() {
+        let thisWeekDates = this.getThisWeekDates();
+        let timeList = [];
+        let day = new Date().getDay();
+        day = day==0 ? 7 : day;
+        this.$set(this,'dayIndex',day-1);
+        for(let i=0;i<thisWeekDates.length;i++){
+          timeList.push({
+            label:i+1,
+            name:i==0?'Mon':(i==1?'Tue':(i==2?'Wed':(i==3?'Thur':(i==4?'Fri':(i==5?'Sat':(i==6?'Sun':'')))))),
+            value:thisWeekDates[i],
+          })
+        }
+        this.$set(this,'timeList',timeList);
+        this.timedRefresh();
+      },
+      getThisWeekDates() {
+        const today = new Date();
+        const dayOfWeek = today.getDay();
+        const firstDayOfWeek = new Date(today);
+        if (dayOfWeek === 0) {
+          firstDayOfWeek.setDate(firstDayOfWeek.getDate() - 6);
+        } else {
+          firstDayOfWeek.setDate(firstDayOfWeek.getDate() - dayOfWeek + 1);
+        }
+        const dates = [];
+        for (let i = 0; i < 7; i++) {
+          dates.push(new Date(firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000).toLocaleDateString().split("/") .join("-") );
+        }
+        return dates;
+      },
+      //日期点击
+      dayButton(index){
+        if(index != this.dayIndex){
+          this.$set(this,'dayIndex',index);
+        }
+      },
+      //获取数据
+      getData(){
+        reportReportBigDataWarningHandle({date:this.timeList[this.dayIndex].value}).then( response => {
+          this.$set(this,'deptList',response.data);
+          this.$set(this,'deptListIndex',0);
+          this.$set(this,'deptData',this.deptList[this.deptListIndex]);
+        });
+      },
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.eChartsTimer);
     },
+    destroyed() {
+      //清除定时器
+      clearInterval(this.eChartsTimer);
+    }
   }
 </script>
 <style scoped lang="scss">
-  .warningComponents{
-    width:934px;
-    margin:16px 30px;
-    height:530px;
-    .map-max-big-box{
-      .map-one-max-big-box{
-        height:468px;
-        width:933px;
+  .warningComponents {
+    width: 934px;
+    margin: 16px 30px;
+    height: 530px;
+    .map-max-big-box {
+      .map-one-max-big-box {
+        height: 468px;
+        width: 933px;
         background: no-repeat;
         background-image: url("../../../assets/ZDimages/mapBackImg.png");
         background-size: 100%;
         position: relative;
       }
-      .position-text-max-box{
+      .position-text-max-box {
         position: absolute;
-        top:64px;
-        left:20px;
+        top: 64px;
+        left: 20px;
         display: flex;
         flex-direction: column;
-        div:nth-child(1),div:nth-child(2),div:nth-child(3){
-          margin-bottom:40px;
+        div:nth-child(1), div:nth-child(2), div:nth-child(3) {
+          margin-bottom: 40px;
         }
-        div{
-          width:202px;
-          height:50px;
+        div {
+          width: 202px;
+          height: 50px;
           background: no-repeat;
           background-image: url("../../../assets/ZDimages/img_yjczbg@1x.png");
           background-size: 100%;
           display: flex;
-          p:nth-child(1){
-            color:#fff;
-            line-height:52px;
-            font-size:18px;
-            font-weight:700;
-            margin-left:20px;
-            flex:1;
+          p:nth-child(1) {
+            color: #fff;
+            line-height: 52px;
+            font-size: 18px;
+            font-weight: 700;
+            margin-left: 20px;
+            flex: 1;
           }
-          p:nth-child(2){
-            color:#FF8400;
-            line-height:52px;
-            font-size:18px;
-            font-weight:700;
-            margin-right:15px;
+          p:nth-child(2) {
+            color: #FF8400;
+            line-height: 52px;
+            font-size: 18px;
+            font-weight: 700;
+            margin-right: 15px;
           }
         }
       }
-      .date-max-box{
+      .date-max-box {
         position: absolute;
-        top:15px;
-        right:30px;
+        top: 15px;
+        right: 30px;
         display: flex;
-        .checkColor{
-          p{
+        .checkColor {
+          p {
 
-            color:#00FFFF!important;
+            color: #00FFFF !important;
           }
         }
-        div{
-          /*cursor: pointer;*/
-          width:60px;
-          height:60px;
-          margin-right:10px;
-          padding:5px 0;
-          p{
-            font-size:18px;
-            color:#fff;
-            line-height:25px;
+        div {
+          cursor: pointer;
+          width: 60px;
+          height: 60px;
+          margin-right: 10px;
+          padding: 5px 0;
+          p {
+            font-size: 18px;
+            color: #fff;
+            line-height: 25px;
             text-align: center;
           }
         }
       }
-      .for-position-dept-box{
-        display: inline-block;
-        position:absolute;
-        .for-position-name-box-one{
-          border-radius:8px;
+      .for-position-dept-max-box{
+        position: relative;
+        .for-position-dept-box {
           display: inline-block;
-          min-width:180px;
-          height:54px;
-          border:1px solid #D80707;
-          box-shadow: inset 0px 0px 10px 0px #D80707;
-          p{
-            text-align: center;
-            color:#fff;
-            font-size:16px;
-            line-height:16px;
-            height:16px;
-            margin:6px 0 0;
+          position: absolute;
+          .for-position-name-box-one {
+            border-radius: 8px;
+            display: inline-block;
+            min-width: 180px;
+            height: 54px;
+            border: 1px solid #D80707;
+            box-shadow: inset 0px 0px 10px 0px #D80707;
+            p {
+              text-align: center;
+              color: #fff;
+              font-size: 16px;
+              line-height: 16px;
+              height: 16px;
+              margin: 6px 0 0;
+            }
+            img {
+              display: block;
+              width: 159px;
+              height: 4px;
+              margin: 0 auto;
+            }
           }
-          img{
-            display: block;
-            width:159px;
-            height:4px;
-            margin:0 auto;
+          .for-position-name-box {
+            border-radius: 8px;
+            display: inline-block;
+            min-width: 180px;
+            height: 30px;
+            border: 1px solid #00E6FF;
+            box-shadow: inset 0px 0px 10px 0px #047581;
+            p {
+              text-align: center;
+              color: #fff;
+              font-size: 16px;
+              line-height: 16px;
+              height: 16px;
+              margin: 6px 0 0;
+            }
+            img {
+              display: block;
+              width: 159px;
+              height: 4px;
+              margin: 0 auto;
+            }
           }
-        }
-        .for-position-name-box{
-          border-radius:8px;
-          display: inline-block;
-          min-width:180px;
-          height:30px;
-          border:1px solid #00E6FF;
-          box-shadow: inset 0px 0px 10px 0px #047581;
-          p{
+          .for-position-address-img-one {
+            height: 50px;
+            width: 50px;
+            margin: 4px auto 0;
+            background: no-repeat;
+            background-image: url("../../../assets/ZDimages/address_1.png");
+            background-size: 100%;
+            color: #D80707;
+            font-size: 16px;
+            line-height: 31px;
             text-align: center;
-            color:#fff;
-            font-size:16px;
-            line-height:16px;
-            height:16px;
-            margin:6px 0 0;
           }
-          img{
-            display: block;
-            width:159px;
-            height:4px;
-            margin:0 auto;
+          .for-position-address-img {
+            height: 50px;
+            width: 50px;
+            margin: 4px auto 0;
+            background: no-repeat;
+            background-image: url("../../../assets/ZDimages/address_2.png");
+            /*background-image: url("../../../assets/ZDimages/address_1.png");*/
+            background-size: 100%;
+            color: #00E6FF;
+            font-size: 16px;
+            line-height: 31px;
+            text-align: center;
           }
         }
-        .for-position-address-img-one{
-          height:50px;
-          width:50px;
-          margin:4px auto 0;
-          background: no-repeat;
-          background-image: url("../../../assets/ZDimages/address_1.png");
-          background-size: 100%;
-          color:#D80707;
-          font-size:16px;
-          line-height: 31px;
-          text-align: center;
+        .for-position-dept-box:nth-child(1){
+          top: 171px;
+          left: 257px;
         }
-        .for-position-address-img{
-          height:50px;
-          width:50px;
-          margin:4px auto 0;
-          background: no-repeat;
-          background-image: url("../../../assets/ZDimages/address_2.png");
-          /*background-image: url("../../../assets/ZDimages/address_1.png");*/
-          background-size: 100%;
-          color:#00E6FF;
-          font-size:16px;
-          line-height: 31px;
-          text-align: center;
+        .for-position-dept-box:nth-child(2){
+          top: 165px;
+          left: 544px;
+        }
+        .for-position-dept-box:nth-child(3){
+          top: 90px;
+          left: 739px;
+        }
+        .for-position-dept-box:nth-child(4){
+          top: 231px;
+          left: 742px;
+        }
+        .for-position-dept-box:nth-child(5){
+          top: 282px;
+          left: 294px;
+        }
+        .for-position-dept-box:nth-child(6){
+          top: 271px;
+          left: 533px;
+        }
+        .for-position-dept-box:nth-child(7){
+          top: 333px;
+          left: 717px;
+        }
+        .for-position-dept-box:nth-child(8){
+          top: 373px;
+          left: 454px;
+        }
+        .for-position-dept-box:nth-child(9){
+          top: 375px;
+          left: 230px;
+        }
+        .for-position-dept-box:nth-child(10){
+          top: 100px;
+          left: 384px;
         }
       }
     }