From a19b20afeacf84c1c743c76b5018bcfbddac2270 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 15 Nov 2024 09:10:12 +0800
Subject: [PATCH] fix: 国控站

---
 src/components/Wind/Map.vue | 1155 ++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 1,016 insertions(+), 139 deletions(-)

diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 61678cc..e0c8fcb 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"
@@ -23,12 +28,36 @@
           alt=""
           @click="turnState"
         >
-        <span class="text_Time">{{ dateFormat }}</span>
-        <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
+        <span class="text_Time">
+          <el-date-picker
+            v-model="selectData"
+            popper-class="tpc"
+            value-format="yyyy-MM-dd HH"
+            format="yyyy-MM-dd HH"
+            :clearable="false"
+            :editable="false"
+            type="datetime"
+            :picker-options="pickerOptions"
+            placeholder="������������������"
+            @change="changeData"
+          />
+        </span>
+        <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" />
@@ -110,7 +139,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 />
@@ -224,7 +256,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"
@@ -247,7 +283,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"
@@ -255,7 +294,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"
@@ -266,7 +308,9 @@
           <el-button
             type="primary"
             @click="alertData(PageSize, currentPage)"
-          >������</el-button>
+          >
+            ������
+          </el-button>
         </div>
       </div>
       <el-table
@@ -284,8 +328,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,11 +365,16 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
-      <div slot="footer" class="dialog-footer">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button
           size="mini"
           @click="alarmTableVisible = false"
-        >��� ���</el-button>
+        >
+          ��� ���
+        </el-button>
       </div>
     </el-dialog>
   </div>
@@ -327,12 +384,14 @@
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-velocity/dist/leaflet-velocity.css'
 import L from 'leaflet'
+import _ from 'lodash'
 import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
 import 'leaflet-velocity/dist/leaflet-velocity'
 import $ from 'jquery'
+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: {
@@ -340,13 +399,21 @@
     weidu: Number,
     jingdu: Number,
     monitorPointId: Number,
-    monitorPointIds: Array
+    monitorPointIds: Array,
+    defaultData: Array
   },
-  data() {
+  data () {
     return {
+      compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
+      compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
       timerKey: '', // ���������������������������
       map: null,
       code: [],
+      pickerOptions: {
+        disabledDate: (time) => {
+          return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000
+        },
+      },
       latlng: [],
       noneData: false,
       params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
@@ -383,7 +450,7 @@
       // ������������������������������������������(���������������������������)
       totalCount: 0,
       // ������������������������������
-      pageSizes: [10, 20, 30, 40],
+      pageSizes: [10, 50, 100, 200],
       // ������������������������������������������
       PageSize: 20,
       factorOptions: [
@@ -458,39 +525,43 @@
       turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
       showOrHidden: true,
       dateFormat: '',
+      selectData: new Date(),
       alarmTableVisible: false,
       chooseTimeInfo: false, // ������������������������
       chooseTime: false,
       dateInfo: '', // ���������������
       timeInfo: '', // ���������������
       nyr: '', // ������������������
-      windJsonData: []
+      windJsonData: [],
+      clickmac: '',
+      childerItem: {},
+      farterItem: {},
+      indexsLaber: 0,
+      time: new Date()
     }
   },
   computed: {
     ...mapGetters(['regionCode'])
   },
   watch: {
-    dateValue(n, o) {
-      // console.log(n)
+    dateValue (n, o) {
       // this.newDate()
     },
-    regionCode(newCode, oldCode) {
+    regionCode (newCode, oldCode) {
       this.timerKey = newCode // ������������code���������������������������
     },
-    windJsonData(newCode, oldCode) {
+    windJsonData (newCode, oldCode) {
       this.$nextTick(() => {
-        console.log('111')
-
         this.canvasWind(newCode)
       })
     }
   },
-  mounted() {
+  mounted () {
     this.currentHour()
     this.$Bus.$on(
       'alarmTableVisible',
-      (res) => (
+      res => (
+        // eslint-disable-next-line no-sequences
         (this.alarmTableVisible = res),
         this.alertData(this.PageSize, this.currentPage)
       )
@@ -500,8 +571,12 @@
 
     // ������������
     this.eventProxy()
+    window.deviceDetail = this.deviceDetail
   },
-  created() {
+  created () {
+    if (this.$store.state.orgId === 72) {
+      this.changeColor = 1
+    }
     const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
     this.jingduNew = newLL[1]
     this.weiduNew = newLL[0]
@@ -510,29 +585,25 @@
     this.newDate()
     // this.alertData(this.PageSize, this.currentPage)
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (this.timer) {
       clearInterval(this.timer)
-      // console.log('timer���������������������')
     }
     if (this.timer2) {
-      // console.log(this.timer2)
       clearInterval(this.timer2)
-      // console.log('timer2���������������������')
     }
     // ���������������������websocket
     if (this.ws) {
-      // console.log('WS������')
       this.ws.close()
     }
   },
   methods: {
     // ������������������������������
-    getDayXQ(day) {
-      var days = new Date().getDay() // ������
+    getDayXQ (day) {
+      var days = new Date().getDay() // ������ // ������
       var rq = '' // ������
       if (day === 'today') {
-        rq = this.newData(0)
+        rq = this.newData(0) // ������������
       } else if (day === 'yesterday') {
         days = (days + 7 - 1) % 7
         rq = this.newData(-1) // ������������
@@ -566,7 +637,7 @@
       return `${rq}(${days})`
     },
     // ���������������������������������������
-    newData(day, info) {
+    newData (day, info) {
       var today = new Date()
       var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
       today.setTime(targetday_milliseconds)
@@ -582,7 +653,7 @@
       }
     },
     // ������������
-    eventProxy() {
+    eventProxy () {
       // ������������������������������
       var ul = document.querySelector('#eventPro')
       var lis = document.querySelectorAll('#eventPro>li')
@@ -600,7 +671,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���������������������
@@ -621,6 +692,7 @@
               inText2.innerHTML = times + ':00'
               this.chooseTimeInfo = true // ���������������
               this.chooseTime = true // ���������������
+              console.log('times', times)
               if ((i + 1) / 24 < 1) {
                 this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
               } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
@@ -638,7 +710,7 @@
         that.getParamsData(true)
       }
       // timeUl������������������
-      timeUl.onclick = (e) => {
+      timeUl.onclick = e => {
         // ������������li���������������������
         var target = e.target
         if (target.tagName.toLowerCase() === 'li') {
@@ -654,6 +726,7 @@
               inText2.innerHTML = times + ':00'
               this.chooseTimeInfo = true // ���������������
               this.chooseTime = true // ���������������
+              console.log('times', times)
               if (i / 24 < 1) {
                 this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
               } else if (i / 24 < 2 && i / 24 >= 1) {
@@ -673,49 +746,40 @@
               lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
             }
           }
-          // console.log('���������������������', greenInfo, 'index')
         }
         that.times = 1
         that.getParamsData(true)
       }
       // ������������������������
       for (let i = 0; i < lis.length; i++) {
-        lis[i].onmouseenter = function() {
-          // console.log('mouseenter', i)
-          // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+        lis[i].onmouseenter = function () {
           mouseDiv.style.transform = 'translateX(-50%)'
           mouseDiv.style.left = 1.36986 * (i + 1) + '%'
           mouseDiv.style.display = 'block'
           var times = (i - 0 + 1) % 24
           times = times > 9 ? times : '0' + times
           inText.innerHTML = times + ':00'
-          // console.log(mouseDiv)
         }
-        lis[i].onmouseleave = function() {
+        lis[i].onmouseleave = function () {
           mouseDiv.style.display = 'none'
-          // console.log('������������', i)
         }
       }
       for (let i = 0; i < timeLis.length; i++) {
-        timeLis[i].onmouseenter = function() {
-          // console.log('mouseenter', i)
-          // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
+        timeLis[i].onmouseenter = function () {
           mouseDiv.style.left = 1.36986 * i + '%'
           mouseDiv.style.transform = 'translateX(-50%)'
           mouseDiv.style.display = 'block'
           var times = i % 24
           times = times > 9 ? times : '0' + times
           inText.innerHTML = times + ':00'
-          // console.log(mouseDiv)
         }
-        timeLis[i].onmouseleave = function() {
+        timeLis[i].onmouseleave = function () {
           mouseDiv.style.display = 'none'
-          // console.log('������������', i)
         }
       }
     },
     // ���������������������
-    currentHour() {
+    currentHour () {
       // const aData = new Date()
       // const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
       // const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
@@ -735,7 +799,7 @@
       this.dateFormat = currentDate.toString()
     },
     // ���������������
-    newDate() {
+    newDate () {
       var aData = new Date()
       var month =
         aData.getMonth() < 9
@@ -743,19 +807,18 @@
           : aData.getMonth() + 1
       var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
       this.currentDate = aData.getFullYear() + '-' + month + '-' + date
-      // console.log(this.currentDate)
       this.dateValue = [this.currentDate, this.currentDate]
     },
     // ������������������
-    mouseOver() {
+    mouseOver () {
       this.map.scrollWheelZoom.disable()
     },
     // ������������������
-    mouseLeave() {
+    mouseLeave () {
       this.map.scrollWheelZoom.enable()
     },
     // ���������������������������������
-    bd09togcj02(bd_lon, bd_lat) {
+    bd09togcj02 (bd_lon, bd_lat) {
       var x_pi = (3.14159265358979324 * 3000.0) / 180.0
       var x = bd_lon - 0.0065
       var y = bd_lat - 0.006
@@ -766,9 +829,9 @@
       return [gg_lat, gg_lng]
     },
     // ������������������,���������
-    deviceMaker() {
+    deviceMaker () {
       if (this.map) {
-        this.map.eachLayer(function(layer) {
+        this.map.eachLayer(function (layer) {
           // ���������������������������
           if (
             !layer._container &&
@@ -789,18 +852,15 @@
           chooseTime: this.chooseTime,
           time: this.nyr
         }
-      }).then((data) => {
-        // console.log('���������������������')
-        console.log(data, 'tata')
+      }).then(data => {
         this.markDeviceSite(data)
+        this.stateControlStation()// ���������������������
       })
     },
     // ���������������
-    markDeviceSite(data) {
+    markDeviceSite (data) {
       var keyData = data.data.devices
       this.keyData = data.data.devices
-      // ���������������������
-      // this.stateControlStation()
       var groupIcon = L.layerGroup().addTo(this.map)
       var groupText = L.layerGroup().addTo(this.map)
       this.keys = []
@@ -831,7 +891,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
@@ -869,7 +929,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
@@ -907,7 +967,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
@@ -945,7 +1005,7 @@
               break
           }
         } else if (keyData[i].a21004) {
-          var data = Math.floor(
+          let data = Math.floor(
             Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
           )
           switch (true) {
@@ -985,7 +1045,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
@@ -1023,7 +1083,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
@@ -1061,7 +1121,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
@@ -1113,7 +1173,6 @@
           icon: blueIcon
         })
         groupIcon.addLayer(iconMarker)
-        // console.log(JSON.parse(this.keys[i]))
         var myIcon = L.divIcon({
           html: this.keys[i],
           className: 'my-div-icon',
@@ -1122,13 +1181,16 @@
         })
 
         const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+        TexteMarker.inforData = keyData[i]
         groupText.addLayer(TexteMarker)
         const _this = this
         // ������������������������������������mouseover���������������
-        TexteMarker.on('click', function(e) {
+        TexteMarker.on('click', function (e) {
           const MarkerTarget = e.target
-          _this.getMarkerInfor(keyData[i], MarkerTarget)
+          // _this.getMarkerInfor(keyData[i], MarkerTarget)
           this.noneData = false
+          // const _this = e.target.vuecontext
+          _this.handleClick(keyData[i], MarkerTarget)
         })
         // ������������������������������������
         // TexteMarker.on('mouseout', function(e) {
@@ -1137,7 +1199,641 @@
         // })
       }
     },
-    getMarkerInfor(data, marker) {
+    styleBgColor (keyName) {
+      let bgColorList = {
+        pm25colorbg: '',
+        pm10colorbg: '',
+        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) || 0)
+          switch (true) {
+            case data < 0: {
+              bgColorList.pm10colorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.pm10colorbg = '#688fb1'
+              break
+            }
+            case data <= 50: {
+              bgColorList.pm10colorbg = '#00ff01'
+              break
+            }
+            case data <= 150: {
+              bgColorList.pm10colorbg = '#fdfe00'
+              break
+            }
+            case data <= 250: {
+              bgColorList.pm10colorbg = '#fd8102'
+              break
+            }
+            case data <= 350: {
+              bgColorList.pm10colorbg = '#fc0101'
+              break
+            }
+            case data <= 420: {
+              bgColorList.pm10colorbg = '#c00261'
+              break
+            }
+            case data > 420: {
+              bgColorList.pm10colorbg = '#9f012f'
+              break
+            }
+            default:
+              break
+          }
+        } else if (i === 'a34004') {
+          data = Math.floor(JSON.parse(keyName.a34004) || 0)
+          switch (true) {
+            case data < 0: {
+              bgColorList.pm25colorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.pm25colorbg = '#688fb1'
+              break
+            }
+            case data <= 35: {
+              bgColorList.pm25colorbg = '#00ff01'
+              break
+            }
+            case data <= 75: {
+              bgColorList.pm25colorbg = '#fdfe00'
+              break
+            }
+            case data <= 115: {
+              bgColorList.pm25colorbg = '#fd8102'
+              break
+            }
+            case data <= 150: {
+              bgColorList.pm25colorbg = '#fc0101'
+              break
+            }
+            case data <= 250: {
+              bgColorList.pm25colorbg = '#c00261'
+              break
+            }
+            case data > 250: {
+              bgColorList.pm25colorbg = '#9f012f'
+              break
+            }
+            default:
+              break
+          }
+        } else if (i === 'a21026') {
+          data = Math.floor(JSON.parse(keyName.a21026) || 0)
+          switch (true) {
+            case data < 0: {
+              bgColorList.so2colorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.so2colorbg = '#688fb1'
+              break
+            }
+            case data <= 50: {
+              bgColorList.so2colorbg = '#00ff01'
+              break
+            }
+            case data <= 150: {
+              bgColorList.so2colorbg = '#fdfe00'
+              break
+            }
+            case data <= 475: {
+              bgColorList.so2colorbg = '#fd8102'
+              break
+            }
+            case data <= 800: {
+              bgColorList.so2colorbg = '#fc0101'
+              break
+            }
+            case data <= 1600: {
+              bgColorList.so2colorbg = '#c00261'
+              break
+            }
+            case data > 1600: {
+              bgColorList.so2colorbg = '#9f012f'
+              break
+            }
+            default:
+              break
+          }
+        } else if (i === 'a21004') {
+          data = Math.floor(
+            Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))
+          )
+          switch (true) {
+            case data < 0: {
+              bgColorList.no210colorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.no210colorbg = '#688fb1'
+              break
+            }
+            case data <= 40: {
+              bgColorList.no210colorbg = '#00ff01'
+              break
+            }
+            case data <= 80: {
+              bgColorList.no210colorbg = '#fdfe00'
+              break
+            }
+            case data <= 180: {
+              bgColorList.no210colorbg = '#fd8102'
+              break
+            }
+            case data <= 280: {
+              bgColorList.no210colorbg = '#fc0101'
+              break
+            }
+            case data <= 565: {
+              bgColorList.no210colorbg = '#c00261'
+              break
+            }
+            case data > 565: {
+              bgColorList.no210colorbg = '#9f012f'
+              break
+            }
+            default:
+              break
+          }
+        } else if (i === 'a21005') {
+          data = JSON.parse(keyName.a21005 || 0).toFixed(3)
+          switch (true) {
+            case data < 0: {
+              bgColorList.cocolorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.cocolorbg = '#688fb1'
+              break
+            }
+            case data <= 2: {
+              bgColorList.cocolorbg = '#00ff01'
+              break
+            }
+            case data <= 4: {
+              bgColorList.cocolorbg = '#fdfe00'
+              break
+            }
+            case data <= 14: {
+              bgColorList.cocolorbg = '#fd8102'
+              break
+            }
+            case data <= 24: {
+              bgColorList.cocolorbg = '#fc0101'
+              break
+            }
+            case data <= 36: {
+              bgColorList.cocolorbg = '#c00261'
+              break
+            }
+            case data > 36: {
+              bgColorList.cocolorbg = '#9f012f'
+              break
+            }
+            default:
+              break
+          }
+        } else if (i === 'a05024') {
+          data = Math.floor(JSON.parse(keyName.a05024) || 0)
+          switch (true) {
+            case data < 0: {
+              bgColorList.o3colorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.o3colorbg = '#688fb1'
+              break
+            }
+            case data <= 160: {
+              bgColorList.o3colorbg = '#00ff01'
+              break
+            }
+            case data <= 200: {
+              bgColorList.o3colorbg = '#fdfe00'
+              break
+            }
+            case data <= 300: {
+              bgColorList.o3colorbg = '#fd8102'
+              break
+            }
+            case data <= 400: {
+              bgColorList.o3colorbg = '#fc0101'
+              break
+            }
+            case data <= 800: {
+              bgColorList.o3colorbg = '#c00261'
+              break
+            }
+            case data > 800: {
+              bgColorList.o3colorbg = '#9f012f'
+              break
+            }
+            default:
+              break
+          }
+        } else if (i === 'a99054') {
+          data = JSON.parse(keyName.a99054 || 0).toFixed(3)
+          switch (true) {
+            case data < 0: {
+              bgColorList.tvoccolorbg = '#999999'
+              break
+            }
+            case data === '-': {
+              bgColorList.tvoccolorbg = '#999999'
+              break
+            }
+            case data === 0: {
+              bgColorList.tvoccolorbg = '#688fb1'
+              break
+            }
+            case data <= 0.5: {
+              bgColorList.tvoccolorbg = '#00ff01'
+              break
+            }
+            case data <= 1: {
+              bgColorList.tvoccolorbg = '#fdfe00'
+              break
+            }
+            case data <= 1.5: {
+              bgColorList.tvoccolorbg = '#fd8102'
+              break
+            }
+            case data <= 2: {
+              bgColorList.tvoccolorbg = '#fc0101'
+              break
+            }
+            case data <= 3: {
+              bgColorList.tvoccolorbg = '#c00261'
+              break
+            }
+            case data > 3: {
+              bgColorList.tvoccolorbg = '#9f012f'
+              break
+            }
+            // default:
+            //   break
+          }
+        }
+      }
+      return bgColorList
+    },
+    deviceDetail () {
+      console.log('this.farterItem', this.clickmac)
+      console.log('this.childerItem', this.childerItem)
+      this.monitorPointInfo = this.farterItem
+
+      this.$router.push({
+        name: 'deviceDetail',
+        params: {
+          monitorPointInfo: this.farterItem,
+          device: this.childerItem,
+          macName: this.clickmac,
+          indexs: this.indexsLaber,
+          items: [this.childerItem.latitude, this.childerItem.longitude]
+        },
+        query: {
+          monitorPointInfo: JSON.stringify(this.farterItem),
+          device: JSON.stringify(this.childerItem),
+          macName: this.clickmac,
+          indexs: this.indexsLaber,
+          items: [this.childerItem.latitude, this.childerItem.longitude]
+        }
+      })
+    },
+    handleClick (data, marker) {
+      this.clickmac = ''
+      this.childerItem = {}
+      this.farterItem = {}
+      this.indexsLaber = 0
+      this.clickmac = marker.inforData.mac
+      this.childerItem = marker.inforData
+      console.log('this.defaultData', this.defaultData)
+      this.defaultData.forEach(item => {
+        if (item.devices) {
+          item.devices.forEach((dev, index) => {
+            if (dev.mac === marker.inforData.mac) {
+              this.farterItem = item
+              this.indexsLaber = index
+            }
+          })
+        }
+      })
+      this.$request({
+        url: '/historyFiveMinutely/queryFiveDataByMac',
+        method: 'get',
+        params: {
+          mac: data.mac,
+          chooseTime: this.chooseTime,
+          time: this.nyr
+        }
+      })
+        .then(res => {
+          if (res.message === '���������������������') {
+            var datafalse = '���������������������'
+            marker.bindPopup(datafalse).openPopup()
+            return
+          }
+          this.childerItem.name = res.data.name
+          let colorliststyleBgColor = this.styleBgColor(res.data)
+          console.log('colorliststyleBgColor', colorliststyleBgColor)
+          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
+          console.log('level', level)
+          if (deviceDetails.a01008) {
+            var windDirs = dushu === '-' ? 0 : Number(dushu)
+            WWindUtil.windValueFormat(windDirs)
+            console.log('windDirs', WWindUtil.windValueFormat(windDirs))
+            windDeg = windDirs
+            windTip = 'inline'
+            if (windDirs === 0 || windDirs === '-') {
+              windDir = '-'
+              windTip = 'none'
+            } else {
+              windDir = WWindUtil.windValueFormat(windDirs)
+              windTip = 'inline'
+            }
+          }
+          // ������������������������������
+          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>
+          </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 class='windBox'>
+            <div style="position: relative;width: 50%;text-align: center;color: #999;border-right: 1px dotted #999;" clss='windIcon'>
+              <img style="width:140px; height:140px" src=${this.compassBg}>
+              <img style="width: 40px;height: 40px;position: absolute;left: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg);display: ${windTip};"
+                src=${this.compassDirection}
+              >
+            </div>
+            <div class='windInfor'>
+              <div v-if="false">������: ${windDir} ( ${dushu} �� )</div>
+              <div>������: ${levelNumber} m/s</div>
+              <div>������: ${level}</div>
+            </div>
+          </div>
+         
+        </div>`
+          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 => {
+          console.log(err)
+        })
+    },
+    handleCutZero (data) {
+      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
+          if (
+            newstr.lastIndexOf('0') > -1 &&
+            newstr.substr(newstr.length - 1, 1) === 0
+          ) {
+            let k = newstr.lastIndexOf('0')
+            // ������������������������������0 ���������������
+            if (newstr.charAt(k - 1) === '.') {
+              return newstr.substring(0, k - 1)
+            } else {
+              // ������ ������������0
+              newstr = newstr.substring(0, k)
+            }
+          } else {
+            // ������������������0
+            return newstr
+          }
+        }
+      }
+      return num
+    },
+    getMarkerInfor (data, marker) {
       this.$request({
         url: '/historyFiveMinutely/queryPopDataByMac',
         method: 'get',
@@ -1147,24 +1843,23 @@
           time: this.nyr
         }
       })
-        .then((res) => {
+        .then(res => {
           if (res.message === '���������������������') {
             var datafalse = '���������������������'
             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]
+                  parseInt(res.data[key]) + res.data[key].split(' ')[1]
               } else {
                 res.data[key] =
-                      Number(res.data[key].split(' ')[0]).toFixed(2) +
-                      res.data[key].split(' ')[1]
+                  Number(res.data[key].split(' ')[0]).toFixed(2) +
+                  res.data[key].split(' ')[1]
               }
             }
           }
@@ -1174,19 +1869,19 @@
           console.log(data)
           marker.bindPopup(data).openPopup()
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
       return data
     },
     // ���������������
-    windDir() {
+    windDir () {
       // console.log('������������')
       //   console.log('���������ws������������')
       // const that = this
       // ������������������
       if (this.map) {
-        this.map.eachLayer(function(layer) {
+        this.map.eachLayer(function (layer) {
           // ���������������������������
           if (
             !layer._container &&
@@ -1201,13 +1896,13 @@
       this.deviceMaker()
     },
     // ���������������������regionCode���������������api������
-    getRegionApiRequest() {
+    getRegionApiRequest () {
       this.getParamsData(true)
       setTimeout(() => {
         $.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('������������')
           }
@@ -1215,11 +1910,11 @@
       }, 1000)
     },
     // ���������������������������������������
-    jumpMap(LngLat) {
+    jumpMap (LngLat) {
       this.map.setView(LngLat, 18)
     },
     // ������������������������
-    getParamsData(isFirst = true) {
+    getParamsData (isFirst = true) {
       clearInterval(this.timer)
       this.timer = setInterval(() => {
         this.currentHour()
@@ -1252,12 +1947,14 @@
         }
       }, 1000)
     },
-    findLayer(layerName) { // ������������������������������
+    findLayer (layerName) {
+      // ������������������������������
       if (!this.map) {
         return null
       }
       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]
@@ -1266,7 +1963,7 @@
       return layer
     },
     // ���������������������
-    initMap() {
+    initMap () {
       var map = L.map('mapContent', {
         inertia: false,
         minZoom: 2,
@@ -1296,8 +1993,24 @@
       // })
       window.map = map
     },
+    changeData (val) {
+      console.log(val)
+      this.nyr = val + ':00'
+      const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00'))
+
+      console.log(date)
+      this.chooseTime = true
+      // var p1 = document.querySelector('.p1')
+      // var p2 = document.querySelector('.p2')
+      // var p3 = document.querySelector('.p3')
+      // this.time = date
+      // p3.innerHTML = this.getDayXQ('today')
+      // p2.innerHTML = this.getDayXQ('yesterday')
+      // p1.innerHTML = this.getDayXQ('beforeYea')
+      this.initData()
+    },
     // ������������������������
-    change(index) {
+    change (index) {
       this.changeColor = index
       var pr = ''
       switch (index) {
@@ -1341,9 +2054,9 @@
       }
     },
     // ���������������������
-    initData() {
+    initData () {
       if (this.map) {
-        this.map.eachLayer(function(layer) {
+        this.map.eachLayer(function (layer) {
           // ���������������������������
           if (
             !layer._container &&
@@ -1358,7 +2071,7 @@
       this.windData()
     },
     // ���������������
-    windData() {
+    windData () {
       this.$request({
         url: '/monitorPoint/getWindData',
         method: 'get',
@@ -1368,15 +2081,15 @@
           time: this.nyr
         }
       })
-        .then((res) => {
+        .then(res => {
           this.windJsonData = res.data[0]
           return this.windJsonData
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
-    canvasWind(data) {
+    canvasWind (data) {
       const res = this.findLayer('wmsid')
       if (res) {
         this.map.removeLayer(res)
@@ -1419,7 +2132,7 @@
       }, 1000)
     },
     // ������������������������������������������������������������������
-    alertData(n1, n2) {
+    alertData (n1, n2) {
       // ������������axios���������������������������
       this.$request({
         url: '/alarmInfo/getDataByConditionWithoutPage',
@@ -1435,7 +2148,7 @@
           index: this.factorValue,
           alarmType: this.alartValue
         }
-      }).then((res) => {
+      }).then(res => {
         // console.log('������������')
         // console.log(res)
         var tempData = res.data
@@ -1451,20 +2164,21 @@
     },
     // ������
     // ���������������������
-    handleSizeChange(val) {
+    handleSizeChange (val) {
       // ���������������������������
       this.PageSize = val
       // ���������������������������������������������������������������������������
       this.currentPage = 1
     },
     // ���������������
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       // ���������������������
       this.currentPage = val
       // console.log(val)
     },
     // ���������������
-    tableCellClassName({ row, column, rowIndex, columnIndex }) {
+    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
@@ -1484,7 +2198,7 @@
       }
       return ''
     },
-    turnState() {
+    turnState () {
       // console.log(this.showOrHidden)
       if (this.showOrHidden === true) {
         this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
@@ -1494,20 +2208,17 @@
       this.showOrHidden = !this.showOrHidden
     },
     // ������������������
-    stateControlStation() {
+    stateControlStation () {
       // this.$axios.get('monitorPoint/queryStateControlStation', {
       this.$request({
-        url: '/govMonitorPoint/queryStateControlStation',
-        method: 'get',
-        params: {
-          regionCode: 130900,
-          sensorCode: 'a34002'
-        }
+        url: '/govMonitorPoint/getGovMonitorPoints',
+        method: 'get'
       })
-        .then((res) => {
-          // console.log('���������������')
-          // console.log(res)
+        .then(res => {
+          console.log('���������������')
+          console.log(res)
           var gkData = res.data
+          let _this = this
           var group = L.layerGroup().addTo(this.map)
           for (let i = 0; i < gkData.length; i++) {
             var glat = gkData[i].latitude
@@ -1515,30 +2226,177 @@
             var gIcon = L.icon({
               iconUrl: require('@/assets/icon/gk.png'),
               // iconUrl:require('@/assets/images/tl_PM10.png'),
-              iconSize: [55, 55],
-              iconAnchor: [13, 21],
+              iconSize: [60, 60],
+              iconAnchor: [30, 48],
               className: 'my-device'
             })
             // ���������������������
-            L.marker([glat, glng], {
+            let marker = L.marker([glat, glng], {
               icon: gIcon
             }).addTo(group)
-            var myIcon = L.divIcon({
-              html: gkData[i].data,
-              className: 'my-div-icon-g',
-              iconSize: 30
+            marker.inforData = gkData[i]
+            marker.on('click', function (e) {
+              console.log('Marker clicked!', e.target)
+              _this.handleguoClick(gkData[i], e.target)
             })
-            L.marker([glat, glng], {
-              icon: myIcon
-            }).addTo(group)
+            // var myIcon = L.divIcon({
+            //   html: gkData[i].data,
+            //   className: 'my-div-icon-g',
+            //   iconSize: 30
+            // })
+            // L.marker([glat, glng], {
+            //   icon: myIcon
+            // }).addTo(group)
           }
         })
-        .catch((err) => {
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    handleguoClick (data, marker) {
+      this.clickmac = ''
+      this.childerItem = {}
+      this.farterItem = {}
+      this.indexsLaber = 0
+      this.clickmac = marker.inforData.guid
+      this.childerItem = marker.inforData
+      console.log('this.defaultData', this.defaultData)
+      this.defaultData.forEach(item => {
+        if (item.devices) {
+          item.devices.forEach((dev, index) => {
+            if (dev.mac === marker.inforData.mac) {
+              this.farterItem = item
+              this.indexsLaber = index
+            }
+          })
+        }
+      })
+      this.$request({
+        url: '/historyFiveMinutely/historyAqi',
+        method: 'get',
+        params: {
+          guid: data.guid,
+        }
+      })
+        .then(res => {
+          if (res.message === '���������������������') {
+            var datafalse = '������������'
+            marker.bindPopup(datafalse).openPopup()
+            return
+          }
+          this.childerItem.name = marker.inforData.name
+          let colorliststyleBgColor = this.styleBgColor(res.data[0])
+          console.log('colorliststyleBgColor', colorliststyleBgColor)
+          let deviceDetails = _.cloneDeep(res.data[0])
+          deviceDetails.name = marker.inforData.name
+          deviceDetails.a99054 = '-'
+          // eslint-disable-next-line no-unused-vars
+          for (let key in deviceDetails) {
+            if (deviceDetails[key] === null) {
+              deviceDetails[key] = '-'
+            }
+          }
+          console.log('deviceDetails', deviceDetails)
+          let htmlClassName = 'mypopupNoWind'
+          let html = ` <div data-reactroot="" class="marker_maptip">
+          <div class="marker_title_1nQ">
+            <span >������������</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">
+                ${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(String(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(String(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(String(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(String(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(String(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(String(deviceDetails.a05024))}
+              </div>
+            </div>
+          </div>        
+        </div>`
+
+          marker.bindPopup(html, { className: htmlClassName }).openPopup()
+        })
+        .catch(err => {
           console.log(err)
         })
     },
     // ������������������������
-    toggleWindState() {
+    toggleWindState () {
       if (this.ws) {
         this.ws.close()
       }
@@ -1554,7 +2412,7 @@
         // console.log(this.windState)
       }
     },
-    closeAlarmTableVisible() {
+    closeAlarmTableVisible () {
       this.$store.state.alarmTableVisible = false
     }
   }
@@ -1562,6 +2420,7 @@
 </script>
 
 <style lang="scss">
+@import './dataModel.css';
 html,
 body,
 #mapContent {
@@ -1763,11 +2622,36 @@
   margin-top: 9px;
   margin-left: 10px;
 }
-
 .text_Time {
   float: left;
   margin-left: 37px;
+  .el-date-editor{
+    width: 145px!important;
+    .el-input__prefix{
+      display: none!important;
+    }
+    .el-input__inner{
+      cursor: pointer;
+      font-size: 18px;
+      color: #fff;
+      padding: 0px!important;
+      border: none;
+      background: inherit;
+
+    }
+  }
 }
+.tpc{
+  left: unset!important;
+  right: 60px;
+}
+.tpc .el-time-spinner__wrapper {
+  width:100% !important;
+}
+.tpc .el-scrollbar:nth-of-type(2) {
+  display: none !important;
+}
+
 .my-div-icon {
   font-size: 14px;
   text-align: center;
@@ -1800,14 +2684,7 @@
   /* padding-left: 10px; */
   /* padding-top: 30px; */
 }
-.leaflet-popup-content {
-  width: 235px !important;
-  font-size: 12px;
-  -webkit-transform-origin-x: 0;
-  z-index: 1000;
-  /* -webkit-transform: scale(0.90); */
-  /* font-family: ui-serif; */
-}
+
 .buttom-left {
   /* background-image: url("@/assets/images/tl_PM10.png"); */
   position: absolute;

--
Gitblit v1.8.0