From 7ce6f4361b22ff88f863ad5293c37d9e8bff0c7d Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 20 Dec 2023 13:06:25 +0800
Subject: [PATCH] fix:热力图播放

---
 src/components/Wind/Map.vue |  514 ++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 324 insertions(+), 190 deletions(-)

diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 1883977..68813ac 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -5,7 +5,12 @@
     element-loading-text="���������"
     element-loading-background="rgba(0, 0, 0, 0.6)"
   >
-    <div v-if="noneData" class="noneData">������������������������������</div>
+    <div
+      v-if="noneData"
+      class="noneData"
+    >
+      ������������������������������
+    </div>
     <div class="top">
       <span
         v-for="(item, index) in params"
@@ -13,8 +18,7 @@
         class="left"
         :class="{ click: changeColor === index }"
         @click="change(index)"
-        >{{ item }}</span
-      >
+      >{{ item }}</span>
       <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
       <span class="right">{{ times }}���</span>
       <span class="dropDown">
@@ -23,13 +27,24 @@
           :src="require('@/assets/images/regionalOverview/realTimeImg.png')"
           alt=""
           @click="turnState"
-        />
+        >
         <span class="text_Time">{{ dateFormat }}</span>
-        <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
+        <img
+          class="drop-icon"
+          :src="turnImg"
+          alt=""
+          @click="turnState"
+        >
       </span>
     </div>
-    <div class="topDate" style="height: 60px">
-      <div id="eventPro" class="jdt">
+    <div
+      class="topDate"
+      style="height: 60px"
+    >
+      <div
+        id="eventPro"
+        class="jdt"
+      >
         <div class="mouseDiv">
           <span class="inText" />
           <div class="sjDiv" />
@@ -111,7 +126,10 @@
         <li />
         <li />
       </div>
-      <div class="timeDiv" style="position: relative">
+      <div
+        class="timeDiv"
+        style="position: relative"
+      >
         <ul id="timeUl">
           <li style="width: 0.83%" />
           <li />
@@ -225,7 +243,11 @@
         </div>
       </div>
     </div>
-    <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
+    <regional-overview
+      :key="timerKey"
+      :map="map"
+      :show-flag="showOrHidden"
+    />
     <div
       :style="{ background: 'url(' + bg + ') no-repeat' }"
       class="buttom-left"
@@ -248,7 +270,10 @@
             end-placeholder="������������"
             value-format="yyyy-MM-dd"
           />
-          <el-select v-model="factorValue" placeholder="������������">
+          <el-select
+            v-model="factorValue"
+            placeholder="������������"
+          >
             <el-option
               v-for="item in factorOptions"
               :key="item.value"
@@ -256,7 +281,10 @@
               :value="item.value"
             />
           </el-select>
-          <el-select v-model="alartValue" placeholder="������������������">
+          <el-select
+            v-model="alartValue"
+            placeholder="������������������"
+          >
             <el-option
               v-for="item in alertOptions"
               :key="item.value"
@@ -264,7 +292,10 @@
               :value="item.value"
             />
           </el-select>
-          <el-button type="primary" @click="alertData(PageSize, currentPage)">
+          <el-button
+            type="primary"
+            @click="alertData(PageSize, currentPage)"
+          >
             ������
           </el-button>
         </div>
@@ -284,8 +315,16 @@
           width="50"
           align="center"
         />
-        <el-table-column property="alarm_time" label="������������" width="150" />
-        <el-table-column property="deviceName" label="������������" width="200" />
+        <el-table-column
+          property="alarm_time"
+          label="������������"
+          width="150"
+        />
+        <el-table-column
+          property="deviceName"
+          label="������������"
+          width="200"
+        />
         <el-table-column
           property="index"
           label="������"
@@ -313,8 +352,14 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="alarmTableVisible = false">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="alarmTableVisible = false"
+        >
           ��� ���
         </el-button>
       </div>
@@ -333,7 +378,7 @@
 import { WWindUtil } from '@/components/Wind/WRatingArr.js'
 import RegionalOverview from '@/components/Wind/RegionalOverview' // ������������������
 import { mapGetters } from 'vuex'
-import { gcj02towgs84 } from '@/assets/json/transform'
+// import { gcj02towgs84 } from '@/assets/json/transform'
 export default {
   components: { RegionalOverview },
   props: {
@@ -342,7 +387,7 @@
     jingdu: Number,
     monitorPointId: Number,
     monitorPointIds: Array,
-    defaultData: Array,
+    defaultData: Array
   },
   data () {
     return {
@@ -393,70 +438,70 @@
       factorOptions: [
         {
           label: '������������',
-          value: 'all',
+          value: 'all'
         },
         {
           label: 'PM10',
-          value: 'PM10',
+          value: 'PM10'
         },
         {
           label: 'PM2.5',
-          value: 'PM2.5',
+          value: 'PM2.5'
         },
         {
           label: 'SO2',
-          value: 'SO2',
+          value: 'SO2'
         },
         {
           label: 'NO2',
-          value: 'NO2',
+          value: 'NO2'
         },
         {
           label: 'CO',
-          value: 'CO',
+          value: 'CO'
         },
         {
           label: 'O3',
-          value: 'O3',
-        },
+          value: 'O3'
+        }
       ],
       alertOptions: [
         {
           label: '������������������',
-          value: 'all',
+          value: 'all'
         },
         {
           label: '������',
-          value: 'overrun',
+          value: 'overrun'
         },
         {
           label: '���������',
-          value: 'sudden',
+          value: 'sudden'
         },
         {
           label: '������������������100%',
-          value: 'state100',
+          value: 'state100'
         },
         {
           label: '������������������150%',
-          value: 'state150',
+          value: 'state150'
         },
         {
           label: '������������������250%',
-          value: 'state250',
+          value: 'state250'
         },
         {
           label: '������������������100%',
-          value: 'city100',
+          value: 'city100'
         },
         {
           label: '������������������150%',
-          value: 'city150',
+          value: 'city150'
         },
         {
           label: '������������������250%',
-          value: 'city250',
-        },
+          value: 'city250'
+        }
       ],
       currentDate: '',
       turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
@@ -476,7 +521,7 @@
     }
   },
   computed: {
-    ...mapGetters(['regionCode']),
+    ...mapGetters(['regionCode'])
   },
   watch: {
     dateValue (n, o) {
@@ -489,13 +534,14 @@
       this.$nextTick(() => {
         this.canvasWind(newCode)
       })
-    },
+    }
   },
   mounted () {
     this.currentHour()
     this.$Bus.$on(
       'alarmTableVisible',
-      (res) => (
+      res => (
+        // eslint-disable-next-line no-sequences
         (this.alarmTableVisible = res),
         this.alertData(this.PageSize, this.currentPage)
       )
@@ -531,8 +577,7 @@
   methods: {
     // ������������������������������
     getDayXQ (day) {
-      var days = new Date()
-        .getDay() // ������
+      var days = new Date().getDay() // ������
       var rq = '' // ������
       if (day === 'today') {
         rq = this.newData(0)
@@ -603,7 +648,7 @@
       p1.innerHTML = this.getDayXQ('beforeYea')
       var greenInfo = 0
       var that = this
-      ul.onclick = (e) => {
+      ul.onclick = e => {
         var target = e.target
         if (target.tagName.toLowerCase() === 'li') {
           // ������������li���������������������
@@ -641,7 +686,7 @@
         that.getParamsData(true)
       }
       // timeUl������������������
-      timeUl.onclick = (e) => {
+      timeUl.onclick = e => {
         // ������������li���������������������
         var target = e.target
         if (target.tagName.toLowerCase() === 'li') {
@@ -676,7 +721,6 @@
               lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
             }
           }
-
         }
         that.times = 1
         that.getParamsData(true)
@@ -766,9 +810,8 @@
           // ���������������������������
           if (
             !layer._container &&
-            ('' + $(layer._container)
-              .attr('class')).replace(/\s/g, '') !==
-            'leaflet-layer'
+            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+              'leaflet-layer'
           ) {
             layer.remove()
           }
@@ -782,12 +825,11 @@
           organizationId: this.$store.state.orgId,
           regionCode: this.$store.state.regionCode,
           chooseTime: this.chooseTime,
-          time: this.nyr,
-        },
+          time: this.nyr
+        }
+      }).then(data => {
+        this.markDeviceSite(data)
       })
-        .then((data) => {
-          this.markDeviceSite(data)
-        })
     },
     // ���������������
     markDeviceSite (data) {
@@ -795,10 +837,8 @@
       this.keyData = data.data.devices
       // ���������������������
       // this.stateControlStation()
-      var groupIcon = L.layerGroup()
-        .addTo(this.map)
-      var groupText = L.layerGroup()
-        .addTo(this.map)
+      var groupIcon = L.layerGroup().addTo(this.map)
+      var groupText = L.layerGroup().addTo(this.map)
       this.keys = []
       for (let i = 0; i < keyData.length; i++) {
         if (keyData[i].a34002) {
@@ -808,16 +848,13 @@
         } else if (keyData[i].a21026) {
           this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
         } else if (keyData[i].a21004) {
-          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004)
-            .toFixed(0)))
+          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
         } else if (keyData[i].a21005) {
-          this.keys.push(JSON.parse(keyData[i].a21005)
-            .toFixed(3))
+          this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
         } else if (keyData[i].a05024) {
           this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
         } else if (keyData[i].a99054) {
-          this.keys.push(JSON.parse(keyData[i].a99054)
-            .toFixed(3))
+          this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
         } else {
           // for (let j = 0; j < keyData.length; j++) {
           this.keys.push(JSON.parse('null'))
@@ -830,7 +867,7 @@
         // ������������key������������������������������������������������
         var colorNum = 7
         if (keyData[i].a34002) {
-          var data = Math.floor(JSON.parse(keyData[i].a34002))
+          let data = Math.floor(JSON.parse(keyData[i].a34002))
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -868,7 +905,7 @@
               break
           }
         } else if (keyData[i].a34004) {
-          var data = Math.floor(JSON.parse(keyData[i].a34004))
+          let data = Math.floor(JSON.parse(keyData[i].a34004))
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -906,7 +943,7 @@
               break
           }
         } else if (keyData[i].a21026) {
-          var data = Math.floor(JSON.parse(keyData[i].a21026))
+          let data = Math.floor(JSON.parse(keyData[i].a21026))
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -944,9 +981,8 @@
               break
           }
         } else if (keyData[i].a21004) {
-          var data = Math.floor(
-            Math.floor(JSON.parse(keyData[i].a21004)
-              .toFixed(0))
+          let data = Math.floor(
+            Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
           )
           switch (true) {
             case data < 0: {
@@ -985,8 +1021,7 @@
               break
           }
         } else if (keyData[i].a21005) {
-          var data = JSON.parse(keyData[i].a21005)
-            .toFixed(3)
+          let data = JSON.parse(keyData[i].a21005).toFixed(3)
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -1024,7 +1059,7 @@
               break
           }
         } else if (keyData[i].a05024) {
-          var data = Math.floor(JSON.parse(keyData[i].a05024))
+          let data = Math.floor(JSON.parse(keyData[i].a05024))
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -1062,8 +1097,7 @@
               break
           }
         } else if (keyData[i].a99054) {
-          var data = JSON.parse(keyData[i].a99054)
-            .toFixed(3)
+          let data = JSON.parse(keyData[i].a99054).toFixed(3)
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -1107,19 +1141,19 @@
           // iconUrl: require('@/assets/icon/ico2.png'),
           iconSize: [60, 60],
           iconAnchor: [30, 48],
-          className: 'my-device',
+          className: 'my-device'
         })
 
         // ���������������������
         const iconMarker = L.marker([lat, lng], {
-          icon: blueIcon,
+          icon: blueIcon
         })
         groupIcon.addLayer(iconMarker)
         var myIcon = L.divIcon({
           html: this.keys[i],
           className: 'my-div-icon',
           iconSize: [60, 60],
-          iconAnchor: [40, 40],
+          iconAnchor: [40, 40]
         })
 
         const TexteMarker = L.marker([lat, lng], { icon: myIcon })
@@ -1145,17 +1179,18 @@
       let bgColorList = {
         pm25colorbg: '',
         pm10colorbg: '',
-        so2colorbg: '', //������������
-        no210colorbg: '', //������������
-        cocolorbg: '', //������������
-        o3colorbg: '', //������
-        tvoccolorbg: '', //TVOC
+        so2colorbg: '', // ������������
+        no210colorbg: '', // ������������
+        cocolorbg: '', // ������������
+        o3colorbg: '', // ������
+        tvoccolorbg: '' // TVOC
       }
 
       let data = ''
+      // eslint-disable-next-line no-unused-vars
       for (let i in keyName) {
         if (i === 'a34002') {
-          data = Math.floor(JSON.parse(keyName.a34002))
+          data = Math.floor(JSON.parse(keyName.a34002) || 0)
           switch (true) {
             case data < 0: {
               bgColorList.pm10colorbg = '#999999'
@@ -1193,7 +1228,7 @@
               break
           }
         } else if (i === 'a34004') {
-          data = Math.floor(JSON.parse(keyName.a34004))
+          data = Math.floor(JSON.parse(keyName.a34004) || 0)
           switch (true) {
             case data < 0: {
               bgColorList.pm25colorbg = '#999999'
@@ -1231,7 +1266,7 @@
               break
           }
         } else if (i === 'a21026') {
-          data = Math.floor(JSON.parse(keyName.a21026))
+          data = Math.floor(JSON.parse(keyName.a21026) || 0)
           switch (true) {
             case data < 0: {
               bgColorList.so2colorbg = '#999999'
@@ -1269,8 +1304,9 @@
               break
           }
         } else if (i === 'a21004') {
-          data = Math.floor(Math.floor(JSON.parse(keyName.a21004)
-            .toFixed(0)))
+          data = Math.floor(
+            Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))
+          )
           switch (true) {
             case data < 0: {
               bgColorList.no210colorbg = '#999999'
@@ -1308,8 +1344,7 @@
               break
           }
         } else if (i === 'a21005') {
-          data = JSON.parse(keyName.a21005)
-            .toFixed(3)
+          data = JSON.parse(keyName.a21005 || 0).toFixed(3)
           switch (true) {
             case data < 0: {
               bgColorList.cocolorbg = '#999999'
@@ -1347,7 +1382,7 @@
               break
           }
         } else if (i === 'a05024') {
-          data = Math.floor(JSON.parse(keyName.a05024))
+          data = Math.floor(JSON.parse(keyName.a05024) || 0)
           switch (true) {
             case data < 0: {
               bgColorList.o3colorbg = '#999999'
@@ -1385,8 +1420,7 @@
               break
           }
         } else if (i === 'a99054') {
-          data = JSON.parse(keyName.a99054)
-            .toFixed(3)
+          data = JSON.parse(keyName.a99054 || 0).toFixed(3)
           switch (true) {
             case data < 0: {
               bgColorList.tvoccolorbg = '#999999'
@@ -1471,28 +1505,41 @@
         params: {
           mac: data.mac,
           chooseTime: this.chooseTime,
-          time: this.nyr,
-        },
+          time: this.nyr
+        }
       })
-        .then((res) => {
+        .then(res => {
           if (res.message === '���������������������') {
             var datafalse = '���������������������'
-            marker.bindPopup(datafalse)
-              .openPopup()
+            marker.bindPopup(datafalse).openPopup()
             return
           }
           this.childerItem.name = res.data.name
           let colorliststyleBgColor = this.styleBgColor(res.data)
           console.log('colorliststyleBgColor', colorliststyleBgColor)
-          let deviceDetails = res.data
+          let deviceDetails = _.cloneDeep(res.data)
+          // eslint-disable-next-line no-unused-vars
+          for (let key in deviceDetails) {
+            if (deviceDetails[key] === null) {
+              deviceDetails[key] = '-'
+            }
+          }
+          console.log('deviceDetails', deviceDetails)
           let windTip = 'inline'
           let windDeg = 0
           let windDir = ''
-          let dushu = deviceDetails.a01008 === '-' ? '-' : JSON.parse(deviceDetails.a01008)
-            .toFixed(0)
-          let levelNumber = deviceDetails.a01007 === '-' ? '0.0' : Number(deviceDetails.a01007)
-            .toFixed(1)
-          let level = deviceDetails.a01007 === '0.0' ? '-' : WWindUtil.WindtoLevel(levelNumber).name
+          let dushu =
+            deviceDetails.a01008 === '-'
+              ? '-'
+              : JSON.parse(deviceDetails.a01008).toFixed(0)
+          let levelNumber =
+            deviceDetails.a01007 === '-'
+              ? '0.0'
+              : Number(deviceDetails.a01007).toFixed(1)
+          let level =
+            deviceDetails.a01007 === '0.0'
+              ? '-'
+              : WWindUtil.WindtoLevel(levelNumber).name
           console.log('level', level)
           if (deviceDetails.a01008) {
             var windDirs = dushu === '-' ? 0 : Number(dushu)
@@ -1526,6 +1573,7 @@
             }
           }
           // ������������������������������
+          let htmlClassName = 'mypopup'
           let html = ` <div data-reactroot="" class="marker_maptip">
           <div class="marker_title_1nQ">
             <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>������������</span>
@@ -1538,8 +1586,9 @@
             <div class="marker_indexpart_2UI">
               <div
                 class="marker_indexname_3TP"
-                style="color: black;background:${colorliststyleBgColor.tvoccolorbg
-            }"
+                style="color: black;background:${
+  colorliststyleBgColor.tvoccolorbg
+}"
               >
                 TVOC
               </div>
@@ -1552,8 +1601,9 @@
             <div class="marker_item_2Kk">
               <div
                 class="marker_itemname_Wq5"
-                style="color: black;background:${colorliststyleBgColor.pm25colorbg
-            } "
+                style="color: black;background:${
+  colorliststyleBgColor.pm25colorbg
+} "
               >
                 PM2.5
               </div>
@@ -1564,8 +1614,9 @@
             <div class="marker_item_2Kk">
               <div
                 class="marker_itemname_Wq5"
-                style="color: black;background:${colorliststyleBgColor.pm10colorbg
-            }"
+                style="color: black;background:${
+  colorliststyleBgColor.pm10colorbg
+}"
               >
                 PM10
               </div>
@@ -1576,8 +1627,9 @@
             <div class="marker_item_2Kk">
               <div
                 class="marker_itemname_Wq5"
-                style="color: black;background:${colorliststyleBgColor.so2colorbg
-            }"
+                style="color: black;background:${
+  colorliststyleBgColor.so2colorbg
+}"
               >
                 SO2
               </div>
@@ -1588,8 +1640,9 @@
             <div class="marker_item_2Kk">
               <div
                 class="marker_itemname_Wq5"
-                style="color: black;background:${colorliststyleBgColor.no210colorbg
-            }"
+                style="color: black;background:${
+  colorliststyleBgColor.no210colorbg
+}"
               >
                 NO2
               </div>
@@ -1600,8 +1653,7 @@
             <div class="marker_item_2Kk">
               <div
                 class="marker_itemname_Wq5"
-                style="color: black;background:${colorliststyleBgColor.cocolorbg
-            }"
+                style="color: black;background:${colorliststyleBgColor.cocolorbg}"
               >
                 CO
               </div>
@@ -1612,8 +1664,7 @@
             <div class="marker_item_2Kk">
               <div
                 class="marker_itemname_Wq5"
-                style="color: black; background:${colorliststyleBgColor.o3colorbg
-            }"
+                style="color: black; background:${colorliststyleBgColor.o3colorbg}"
               >
                 O3
               </div>
@@ -1630,47 +1681,138 @@
               >
             </div>
             <div class='windInfor'>
-              <div>������: ${windDir} ( ${dushu} �� )</div>
+              <div v-if="false">������: ${windDir} ( ${dushu} �� )</div>
               <div>������: ${levelNumber} m/s</div>
               <div>������: ${level}</div>
             </div>
           </div>
          
         </div>`
-          marker.bindPopup(html, { className: 'mypopup' })
-            .openPopup()
+          if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') {
+            htmlClassName = 'mypopupNoWind'
+            html = ` <div data-reactroot="" class="marker_maptip">
+          <div class="marker_title_1nQ">
+            <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>������������</span>
+          </div>
+          <div class="marker_firstline_2WH">
+            <div class="marker_citypart_keg">
+              <div class="marker_name_small_1VU">${deviceDetails.name}</div>
+              <div class="marker_time_w5m">${deviceDetails.dataTime}</div>
+            </div>
+            <div class="marker_indexpart_2UI">
+              <div
+                class="marker_indexname_3TP"
+                style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"
+              >
+                TVOC
+              </div>
+              <div class="marker_indexvalue_1O7">
+                ${this.handleCutZero(deviceDetails.a99054)}
+              </div>
+            </div>
+          </div>
+          <div class="marker_secondline_2Om">
+            <div class="marker_item_2Kk">
+              <div
+                class="marker_itemname_Wq5"
+                style="color: black;background:${colorliststyleBgColor.pm25colorbg} "
+              >
+                PM2.5
+              </div>
+              <div class="marker_itemvalue_1l1">
+                 ${this.handleCutZero(deviceDetails.a34004)}
+              </div>
+            </div>
+            <div class="marker_item_2Kk">
+              <div
+                class="marker_itemname_Wq5"
+                style="color: black;background:${colorliststyleBgColor.pm10colorbg}"
+              >
+                PM10
+              </div>
+              <div class="marker_itemvalue_1l1">
+                 ${this.handleCutZero(deviceDetails.a34002)}
+              </div>
+            </div>
+            <div class="marker_item_2Kk">
+              <div
+                class="marker_itemname_Wq5"
+                style="color: black;background:${colorliststyleBgColor.so2colorbg}"
+              >
+                SO2
+              </div>
+              <div class="marker_itemvalue_1l1">
+                   ${this.handleCutZero(deviceDetails.a21026)}
+              </div>
+            </div>
+            <div class="marker_item_2Kk">
+              <div
+                class="marker_itemname_Wq5"
+                style="color: black;background:${colorliststyleBgColor.no210colorbg}"
+              >
+                NO2
+              </div>
+              <div class="marker_itemvalue_1l1">
+                ${this.handleCutZero(deviceDetails.a21004)}
+              </div>
+            </div>
+            <div class="marker_item_2Kk">
+              <div
+                class="marker_itemname_Wq5"
+                style="color: black;background:${colorliststyleBgColor.cocolorbg}"
+              >
+                CO
+              </div>
+              <div class="marker_itemvalue_1l1">
+                ${this.handleCutZero(deviceDetails.a21005)}
+              </div>
+            </div>
+            <div class="marker_item_2Kk">
+              <div
+                class="marker_itemname_Wq5"
+                style="color: black; background:${colorliststyleBgColor.o3colorbg}"
+              >
+                O3
+              </div>
+              <div class="marker_itemvalue_1l1">
+                 ${this.handleCutZero(deviceDetails.a05024)}
+              </div>
+            </div>
+          </div>        
+        </div>`
+          }
+          marker.bindPopup(html, { className: htmlClassName }).openPopup()
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
     handleCutZero (data) {
-
-      let num = data.substring(0, data.indexOf(".") + 4);
-      //������������ ������������������������
+      let num = data.substring(0, data.indexOf('.') + 4)
+      // ������������ ������������������������
       // let num = Number(data).toFixed(3).toString()
       let newstr = num
-      //������������ ������������������
+      // ������������ ������������������
       let leng = num.length - num.indexOf('.') - 1
-      //���������������������
+      // ���������������������
       if (num.indexOf('.') > -1) {
-        //������������������
+        // ������������������
         for (let i = leng; i > 0; i--) {
-          //������newstr���������0
+          // ������newstr���������0
           if (
             newstr.lastIndexOf('0') > -1 &&
             newstr.substr(newstr.length - 1, 1) === 0
           ) {
             let k = newstr.lastIndexOf('0')
-            //������������������������������0 ���������������
+            // ������������������������������0 ���������������
             if (newstr.charAt(k - 1) === '.') {
               return newstr.substring(0, k - 1)
             } else {
-              //������ ������������0
+              // ������ ������������0
               newstr = newstr.substring(0, k)
             }
           } else {
-            //������������������0
+            // ������������������0
             return newstr
           }
         }
@@ -1684,27 +1826,25 @@
         params: {
           mac: data.mac,
           chooseTime: this.chooseTime,
-          time: this.nyr,
-        },
+          time: this.nyr
+        }
       })
-        .then((res) => {
+        .then(res => {
           if (res.message === '���������������������') {
             var datafalse = '���������������������'
-            this.bindPopup(datafalse)
-              .openPopup()
+            this.bindPopup(datafalse).openPopup()
             return
           }
+          // eslint-disable-next-line no-unused-vars
           for (const key in res.data) {
-            var tempDecimal = res.data[key].replace(/[^\d.]/g, '')
-              .split('.')[1]
+            var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
             if (key !== '������' && key !== '������') {
               if (Number(tempDecimal) === 0) {
                 res.data[key] =
                   parseInt(res.data[key]) + res.data[key].split(' ')[1]
               } else {
                 res.data[key] =
-                  Number(res.data[key].split(' ')[0])
-                    .toFixed(2) +
+                  Number(res.data[key].split(' ')[0]).toFixed(2) +
                   res.data[key].split(' ')[1]
               }
             }
@@ -1713,10 +1853,9 @@
             .replace(/,/g, `<br>`)
             .replace(/{|}|"/g, '')
           console.log(data)
-          marker.bindPopup(data)
-            .openPopup()
+          marker.bindPopup(data).openPopup()
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
       return data
@@ -1732,9 +1871,8 @@
           // ���������������������������
           if (
             !layer._container &&
-            ('' + $(layer._container)
-              .attr('class')).replace(/\s/g, '') !==
-            'leaflet-layer'
+            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+              'leaflet-layer'
           ) {
             layer.remove()
           }
@@ -1750,7 +1888,7 @@
         $.getJSON(
           'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
           { monitorPointId: this.$store.state.monitorPointId },
-          (data) => {
+          data => {
             this.map.setView([data[2], data[1]], 12)
             //   console.log('������������')
           }
@@ -1802,6 +1940,7 @@
       }
       const gisMap_layers = this.map._layers
       let layer = null
+      // eslint-disable-next-line no-unused-vars
       for (const i in gisMap_layers) {
         if (gisMap_layers[i].options.id === layerName) {
           layer = gisMap_layers[i]
@@ -1820,13 +1959,12 @@
         renderer: L.canvas(),
         zoomControl: false, // ������������
         attributionControl: false, // ���������������logol
-        crs: L.CRS.EPSG3857, // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
+        crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
       })
       // ������������������
       L.tileLayer(
         'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
-      )
-        .addTo(map)
+      ).addTo(map)
       this.map = map // data���������������
       // const that = this
       // this.map.on('mousedown', function(ev) {
@@ -1892,9 +2030,8 @@
           // ���������������������������
           if (
             !layer._container &&
-            ('' + $(layer._container)
-              .attr('class')).replace(/\s/g, '') !==
-            'leaflet-layer'
+            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+              'leaflet-layer'
           ) {
             layer.remove()
           }
@@ -1911,14 +2048,14 @@
         params: {
           monitorPointIds: this.monitorPointIds.toString(),
           chooseTime: this.chooseTime,
-          time: this.nyr,
-        },
+          time: this.nyr
+        }
       })
-        .then((res) => {
+        .then(res => {
           this.windJsonData = res.data[0]
           return this.windJsonData
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
@@ -1935,7 +2072,7 @@
           // velocityType: 'Global Wind',
           velocityType: 'GBR Wind',
           displayPosition: 'bottomleft',
-          displayEmptyString: 'No wind data',
+          displayEmptyString: 'No wind data'
         },
         data: data, // ������  ���������������
         // data: data2,
@@ -1955,8 +2092,8 @@
           '#345B1B',
           '#186303',
           '#175103',
-          '#053F03',
-        ],
+          '#053F03'
+        ]
         // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
       })
       velocityLayer.addTo(this.map) // ���������������
@@ -1979,22 +2116,21 @@
           startTime: this.dateValue[0],
           endTime: this.dateValue[1],
           index: this.factorValue,
-          alarmType: this.alartValue,
-        },
+          alarmType: this.alartValue
+        }
+      }).then(res => {
+        // console.log('������������')
+        // console.log(res)
+        var tempData = res.data
+        // console.log(tempData)
+        for (let i = 0; i < tempData.alarmInfos.length; i++) {
+          tempData.alarmInfos[i].alarmInfoId = i + 1
+        }
+        // ������������������tableData
+        this.gridData = tempData.alarmInfos
+        // ���������������������������totalCount
+        this.totalCount = tempData.alarmInfos.length
       })
-        .then((res) => {
-          // console.log('������������')
-          // console.log(res)
-          var tempData = res.data
-          // console.log(tempData)
-          for (let i = 0; i < tempData.alarmInfos.length; i++) {
-            tempData.alarmInfos[i].alarmInfoId = i + 1
-          }
-          // ������������������tableData
-          this.gridData = tempData.alarmInfos
-          // ���������������������������totalCount
-          this.totalCount = tempData.alarmInfos.length
-        })
     },
     // ������
     // ���������������������
@@ -2012,6 +2148,7 @@
     },
     // ���������������
     tableCellClassName ({ row, column, rowIndex, columnIndex }) {
+      // eslint-disable-next-line no-unused-vars
       for (const key in row) {
         if (key === column.property) {
           const code = column.property
@@ -2048,15 +2185,14 @@
         method: 'get',
         params: {
           regionCode: 130900,
-          sensorCode: 'a34002',
-        },
+          sensorCode: 'a34002'
+        }
       })
-        .then((res) => {
+        .then(res => {
           // console.log('���������������')
           // console.log(res)
           var gkData = res.data
-          var group = L.layerGroup()
-            .addTo(this.map)
+          var group = L.layerGroup().addTo(this.map)
           for (let i = 0; i < gkData.length; i++) {
             var glat = gkData[i].latitude
             var glng = gkData[i].longitude
@@ -2065,25 +2201,23 @@
               // iconUrl:require('@/assets/images/tl_PM10.png'),
               iconSize: [55, 55],
               iconAnchor: [13, 21],
-              className: 'my-device',
+              className: 'my-device'
             })
             // ���������������������
             L.marker([glat, glng], {
-              icon: gIcon,
-            })
-              .addTo(group)
+              icon: gIcon
+            }).addTo(group)
             var myIcon = L.divIcon({
               html: gkData[i].data,
               className: 'my-div-icon-g',
-              iconSize: 30,
+              iconSize: 30
             })
             L.marker([glat, glng], {
-              icon: myIcon,
-            })
-              .addTo(group)
+              icon: myIcon
+            }).addTo(group)
           }
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
@@ -2106,8 +2240,8 @@
     },
     closeAlarmTableVisible () {
       this.$store.state.alarmTableVisible = false
-    },
-  },
+    }
+  }
 }
 </script>
 

--
Gitblit v1.8.0