From 41d3232a6ffd25d9d0f3612b59d17e3515b5bb89 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 26 Oct 2023 16:28:23 +0800
Subject: [PATCH] Merge branch 'feature_1.0'

---
 src/components/Wind/Map.vue | 1272 +++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 916 insertions(+), 356 deletions(-)

diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 0fb34a3..f658980 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -13,7 +13,8 @@
         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">
@@ -22,9 +23,9 @@
           :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">
@@ -263,10 +264,9 @@
               :value="item.value"
             />
           </el-select>
-          <el-button
-            type="primary"
-            @click="alertData(PageSize, currentPage)"
-          >������</el-button>
+          <el-button type="primary" @click="alertData(PageSize, currentPage)">
+            ������
+          </el-button>
         </div>
       </div>
       <el-table
@@ -314,10 +314,9 @@
         @current-change="handleCurrentChange"
       />
       <div slot="footer" class="dialog-footer">
-        <el-button
-          size="mini"
-          @click="alarmTableVisible = false"
-        >��� ���</el-button>
+        <el-button size="mini" @click="alarmTableVisible = false">
+          ��� ���
+        </el-button>
       </div>
     </el-dialog>
   </div>
@@ -327,10 +326,11 @@
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-velocity/dist/leaflet-velocity.css'
 import L from 'leaflet'
-import 'wind-js-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'
@@ -341,10 +341,13 @@
     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: [],
@@ -390,70 +393,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'),
@@ -465,22 +468,30 @@
       dateInfo: '', // ���������������
       timeInfo: '', // ���������������
       nyr: '', // ������������������
-      windALLData: []
+      windJsonData: [],
+      clickmac: '',
+      childerItem: {},
+      farterItem: {},
+      indexsLaber: 0
     }
   },
   computed: {
-    ...mapGetters(['regionCode'])
+    ...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) {
+      this.$nextTick(() => {
+        this.canvasWind(newCode)
+      })
+    },
   },
-  mounted() {
+  mounted () {
     this.currentHour()
     this.$Bus.$on(
       'alarmTableVisible',
@@ -494,41 +505,34 @@
 
     // ������������
     this.eventProxy()
+    window.deviceDetail = this.deviceDetail
   },
-  created() {
+  created () {
     const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
     this.jingduNew = newLL[1]
     this.weiduNew = newLL[0]
-    // ���������������������
-    // this.initData()
-    // this.change(0)
-    this.windData()
-    this.getParamsData()
-    // this.deviceMaker()
+    this.getParamsData(false)
+    // this.windDir()
     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)
@@ -565,7 +569,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)
@@ -581,7 +585,7 @@
       }
     },
     // ������������
-    eventProxy() {
+    eventProxy () {
       // ������������������������������
       var ul = document.querySelector('#eventPro')
       var lis = document.querySelectorAll('#eventPro>li')
@@ -622,23 +626,19 @@
               this.chooseTime = true // ���������������
               if ((i + 1) / 24 < 1) {
                 this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
-                console.log(111, this.nyr)
               } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
                 this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
-                console.log(222, this.nyr)
               } else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
                 this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
-                console.log(333, this.nyr)
               } else {
                 this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
-                console.log(444, this.nyr)
               }
               break
             }
           }
         }
         that.times = 1
-        that.getParamsData()
+        that.getParamsData(true)
       }
       // timeUl������������������
       timeUl.onclick = (e) => {
@@ -659,16 +659,12 @@
               this.chooseTime = true // ���������������
               if (i / 24 < 1) {
                 this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
-                console.log(111, this.nyr)
               } else if (i / 24 < 2 && i / 24 >= 1) {
                 this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
-                console.log(222, this.nyr)
               } else if (i / 24 < 3 && i / 24 >= 2) {
                 this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
-                console.log(333, this.nyr)
               } else {
                 this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
-                console.log(444, this.nyr)
               }
               break
             }
@@ -680,49 +676,47 @@
               lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
             }
           }
-          // console.log('���������������������', greenInfo, 'index')
+
         }
         that.times = 1
-        that.getParamsData()
+        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()
+      // const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
+      // const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
+      // this.dateFormat = currentDate.toString()
       const aData = new Date()
       const month =
         aData.getMonth() < 9
@@ -736,7 +730,7 @@
       this.dateFormat = currentDate.toString()
     },
     // ���������������
-    newDate() {
+    newDate () {
       var aData = new Date()
       var month =
         aData.getMonth() < 9
@@ -744,19 +738,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
@@ -767,13 +760,20 @@
       return [gg_lat, gg_lng]
     },
     // ������������������,���������
-    deviceMaker() {
-      // ������������������
+    deviceMaker () {
       if (this.map) {
-        // const res = this.findLayer('wmsid')
-        // this.map.removeLayer(res)
+        this.map.eachLayer(function (layer) {
+          // ���������������������������
+          if (
+            !layer._container &&
+            ('' + $(layer._container)
+              .attr('class')).replace(/\s/g, '') !==
+            'leaflet-layer'
+          ) {
+            layer.remove()
+          }
+        })
       }
-      const that = this
       this.$request({
         url: '/historyFiveMinutely/queryDeviceAndData',
         method: 'get',
@@ -782,24 +782,24 @@
           organizationId: this.$store.state.orgId,
           regionCode: this.$store.state.regionCode,
           chooseTime: this.chooseTime,
-          time: this.nyr
-        }
-      }).then((data) => {
-        // console.log('���������������������')
-        console.log(data, 'tata')
-        that.loading = false
-        this.markDeviceSite(data)
+          time: this.nyr,
+        },
       })
+        .then((data) => {
+          this.markDeviceSite(data)
+        })
     },
     // ���������������
-    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 = []
-      var markerList = []
       for (let i = 0; i < keyData.length; i++) {
         if (keyData[i].a34002) {
           this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
@@ -808,13 +808,16 @@
         } 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'))
@@ -942,7 +945,8 @@
           }
         } else if (keyData[i].a21004) {
           var data = Math.floor(
-            Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
+            Math.floor(JSON.parse(keyData[i].a21004)
+              .toFixed(0))
           )
           switch (true) {
             case data < 0: {
@@ -981,7 +985,8 @@
               break
           }
         } else if (keyData[i].a21005) {
-          var data = JSON.parse(keyData[i].a21005).toFixed(3)
+          var data = JSON.parse(keyData[i].a21005)
+            .toFixed(3)
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -1057,7 +1062,8 @@
               break
           }
         } else if (keyData[i].a99054) {
-          var data = JSON.parse(keyData[i].a99054).toFixed(3)
+          var data = JSON.parse(keyData[i].a99054)
+            .toFixed(3)
           switch (true) {
             case data < 0: {
               colorNum = 7
@@ -1100,169 +1106,665 @@
           iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
           // iconUrl: require('@/assets/icon/ico2.png'),
           iconSize: [60, 60],
-          className: 'my-device'
+          iconAnchor: [30, 48],
+          className: 'my-device',
         })
+
         // ���������������������
-        const a = L.marker([lat, lng], {
-          icon: blueIcon
+        const iconMarker = L.marker([lat, lng], {
+          icon: blueIcon,
         })
-        markerList.push(a)
-        const bg = `<div style='height:20px;cursor: pointer;'>${this.keys[i]}</div>`
-        console.log(JSON.parse(this.keys[i]))
+        groupIcon.addLayer(iconMarker)
         var myIcon = L.divIcon({
-          html: bg,
+          html: this.keys[i],
           className: 'my-div-icon',
-          iconSize: [50, 20],
-          iconAnchor: [26, 30]
+          iconSize: [60, 60],
+          iconAnchor: [40, 40],
         })
-        var b = L.marker([lat, lng], { icon: myIcon })
+
+        const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+        TexteMarker.inforData = keyData[i]
+        groupText.addLayer(TexteMarker)
+        const _this = this
         // ������������������������������������mouseover���������������
-        var _this = this
-        b.on('mouseover', function(e) {
-          console.log('e', e)
+        TexteMarker.on('click', function (e) {
+          const MarkerTarget = e.target
+          // _this.getMarkerInfor(keyData[i], MarkerTarget)
           this.noneData = false
-          _this
-            .$request({
-              url: '/historyFiveMinutely/queryPopDataByMac',
-              method: 'get',
-              params: {
-                mac: keyData[i].mac,
-                chooseTime: _this.chooseTime,
-                time: _this.nyr
-              }
-            })
-            .then((res) => {
-              if (res.message === '���������������������') {
-                var datafalse = '���������������������'
-                this.bindPopup(datafalse).openPopup()
-                return
-              }
-              for (const key in res.data) {
-                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) +
-                      res.data[key].split(' ')[1]
-                  }
-                  // var num = res.data[key].split(' ')[0]
-                  // res.data[key] = (num - 0).toFixed(3)
-                }
-              }
-              var data = JSON.stringify(res.data)
-                .replace(/,/g, `<br>`)
-                .replace(/{|}|"/g, '')
-              this.bindPopup(data).togglePopup()
-            })
-            .catch((err) => {
-              console.log(err)
-            })
+          // const _this = e.target.vuecontext
+          _this.handleClick(keyData[i], MarkerTarget)
         })
         // ������������������������������������
-        b.on('mouseout', function(e) {
-          this.noneData = false
-          this.bindPopup().togglePopup()
-        })
-        markerList.push(b)
+        // TexteMarker.on('mouseout', function(e) {
+        //   this.noneData = false
+        //   this.bindPopup().closePopup()
+        // })
       }
-      L.layerGroup(markerList).addTo(this.map)
     },
-    // ������������������������������������
-    // moveInAndOut() {
-    //
-    // },
-    // ������������������
-    stateControlStation() {
-      // this.$axios.get('monitorPoint/queryStateControlStation', {
-      this.$request({
-        url: '/govMonitorPoint/queryStateControlStation',
-        method: 'get',
+    styleBgColor (keyName) {
+      let bgColorList = {
+        pm25colorbg: '',
+        pm10colorbg: '',
+        so2colorbg: '', //������������
+        no210colorbg: '', //������������
+        cocolorbg: '', //������������
+        o3colorbg: '', //������
+        tvoccolorbg: '', //TVOC
+      }
+
+      let data = ''
+      for (let i in keyName) {
+        if (i === 'a34002') {
+          data = Math.floor(JSON.parse(keyName.a34002))
+          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))
+          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))
+          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)
+            .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)
+            .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))
+          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)
+            .toFixed(3)
+          switch (true) {
+            case data < 0: {
+              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: {
-          regionCode: 130900,
-          sensorCode: 'a34002'
+          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]
         }
       })
-        .then((res) => {
-          // console.log('���������������')
-          // console.log(res)
-          var gkData = res.data
-          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
-            var gIcon = L.icon({
-              iconUrl: require('@/assets/icon/gk.png'),
-              // iconUrl:require('@/assets/images/tl_PM10.png'),
-              iconSize: [55, 55],
-              iconAnchor: [13, 21],
-              className: 'my-device'
-            })
-            // ���������������������
-            L.marker([glat, glng], {
-              icon: gIcon
-            }).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)
+    },
+    handleClick (data, marker) {
+      this.clickmac = ''
+      this.childerItem = {}
+      this.farterItem = {}
+      this.indexsLaber = 0
+      this.clickmac = marker.inforData.mac
+      this.childerItem = marker.inforData
+      this.defaultData.forEach(item => {
+        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 = res.data
+          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 = Number(
+              deviceDetails.a01008.substr(0, deviceDetails.a01008.length - 1)
+            )
+            // console.log(windDirs)
+            windDeg = windDirs
+            windTip = 'inline'
+            if (windDirs === 0 || windDirs === '-') {
+              windDir = '-'
+              windTip = 'none'
+            } else if (windDirs > 0 && windDirs < 90) {
+              windDir = '���������'
+              windTip = 'inline'
+            } else if (windDirs === 90) {
+              windDir = '������'
+              windTip = 'inline'
+            } else if (windDirs > 90 && windDirs < 180) {
+              windDir = '���������'
+              windTip = 'inline'
+            } else if (windDirs === 180) {
+              windDir = '������'
+              windTip = 'inline'
+            } else if (windDirs > 180 && windDirs < 270) {
+              windDir = '���������'
+              windTip = 'inline'
+            } else if (windDirs === 270) {
+              windDir = '������'
+              windTip = 'inline'
+            } else if (windDirs > 270 && windDirs < 360) {
+              windDir = '���������'
+              windTip = 'inline'
+            }
+          }
+          // ������������������������������
+          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>������: ${windDir} ( ${dushu} �� )</div>
+              <div>������: ${levelNumber} m/s</div>
+              <div>������: ${level}</div>
+            </div>
+          </div>
+         
+        </div>`
+          marker.bindPopup(html, { className: 'mypopup' })
+            .openPopup()
         })
         .catch((err) => {
           console.log(err)
         })
     },
-    // ������������������������
-    // toggleWindState() {
-    //   if (this.ws) {
-    //     this.ws.close()
-    //   }
-    //   if (this.windState === 2) {
-    //     this.windState = 1
-    //     this.windStateText = '���������'
-    //     this.initData()
-    //     // console.log(this.windState)
-    //   } else if (this.windState === 1) {
-    //     this.windState = 2
-    //     this.windStateText = '���������'
-    //     this.windDir()
-    //     // console.log(this.windState)
-    //   }
-    // },
+    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',
+        params: {
+          mac: data.mac,
+          chooseTime: this.chooseTime,
+          time: this.nyr,
+        },
+      })
+        .then((res) => {
+          if (res.message === '���������������������') {
+            var datafalse = '���������������������'
+            this.bindPopup(datafalse)
+              .openPopup()
+            return
+          }
+          for (const key in res.data) {
+            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) +
+                  res.data[key].split(' ')[1]
+              }
+            }
+          }
+          var data = JSON.stringify(res.data)
+            .replace(/,/g, `<br>`)
+            .replace(/{|}|"/g, '')
+          console.log(data)
+          marker.bindPopup(data)
+            .openPopup()
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+      return data
+    },
     // ���������������
+    windDir () {
+      // console.log('������������')
+      //   console.log('���������ws������������')
+      // const that = this
+      // ������������������
+      if (this.map) {
+        this.map.eachLayer(function (layer) {
+          // ���������������������������
+          if (
+            !layer._container &&
+            ('' + $(layer._container)
+              .attr('class')).replace(/\s/g, '') !==
+            'leaflet-layer'
+          ) {
+            layer.remove()
+          }
+        })
+      }
+      // ���������������������������
+      this.deviceMaker()
+    },
     // ���������������������regionCode���������������api������
-    // getRegionApiRequest() {
-    //   this.getParamsData()
-    //   setTimeout(() => {
-    //     $.getJSON(
-    //       'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
-    //       { monitorPointId: this.$store.state.monitorPointId },
-    //       (data) => {
-    //         this.map.setView([data[2], data[1]], 12)
-    //       }
-    //     )
-    //   }, 1000)
-    //   if (this.windState === 1) {
-    //     this.initData()
-    //   } else if (this.windState === 2) {
-    //     this.windDir()
-    //   }
-    // },
+    getRegionApiRequest () {
+      this.getParamsData(true)
+      setTimeout(() => {
+        $.getJSON(
+          'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
+          { monitorPointId: this.$store.state.monitorPointId },
+          (data) => {
+            this.map.setView([data[2], data[1]], 12)
+            //   console.log('������������')
+          }
+        )
+      }, 1000)
+    },
     // ���������������������������������������
-    jumpMap(LngLat) {
+    jumpMap (LngLat) {
       this.map.setView(LngLat, 18)
     },
     // ������������������������
-    getParamsData() {
-      console.log('getParamsData', this.windState)
+    getParamsData (isFirst = true) {
       clearInterval(this.timer)
       this.timer = setInterval(() => {
         this.currentHour()
@@ -1283,65 +1785,20 @@
             // console.log('else')
           }
           setTimeout(() => {
-            this.change(this.changeColor)
+            console.log('change', isFirst)
+            if (isFirst) {
+              this.windData()
+              this.deviceMaker()
+            } else {
+              this.change(this.changeColor)
+            }
             this.times = 300
           }, 100)
         }
       }, 1000)
     },
-
-    // ���������������
-    // initMap() {
-    //   var map = new AMap.Map('container', {
-    //     resizeEnable: true,
-    //     rotateEnable: true,
-    //     pitchEnable: true,
-    //     zoom: 14,
-    //     pitch: 80,
-    //     expandZoomRange: true,
-    //     zooms: [3, 20],
-    //     center: [120.9781494, 31.4265156]
-    //   })
-    //   this.map = map
-    //   this.map.on('click', () => {
-    //     if (this.infoWindow !== null) {
-    //       this.infoWindow.close()
-    //     }
-    //   })
-    // },
-    // ���������������������
-    initMap() {
-      const map = L.map('mapContent', {
-        minZoom: 2,
-        maxZoom: 18,
-        center: [this.weiduNew, this.jingduNew],
-        zoom: 14,
-        zoomControl: false, // ������������
-        attributionControl: false, // ���������������logol
-        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)
-      this.map = map // data���������������
-      window.map = map
-      const that = this
-      this.map.invalidateSize(true)
-      this.map.on('movestart', function(ev) {
-        that.map.stop()
-        console.log('move')
-        const res = that.findLayer('wmsid')
-        if (that.map.hasLayer(res)) {
-          const res = that.findLayer('wmsid')
-          that.map.removeLayer(res)
-        }
-      })
-      this.map.on('moveend', function(ev) {
-        that.openLayer()
-      })
-    },
-    findLayer(layerName) { // ������������������������������
+    findLayer (layerName) {
+      // ������������������������������
       if (!this.map) {
         return null
       }
@@ -1354,9 +1811,40 @@
       }
       return layer
     },
+    // ���������������������
+    initMap () {
+      var map = L.map('mapContent', {
+        inertia: false,
+        minZoom: 2,
+        maxZoom: 18,
+        center: [this.weiduNew, this.jingduNew],
+        zoom: 14,
+        renderer: L.canvas(),
+        zoomControl: false, // ������������
+        attributionControl: false, // ���������������logol
+        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)
+      this.map = map // data���������������
+      // const that = this
+      // this.map.on('mousedown', function(ev) {
+      //   const res = that.findLayer('wmsid')
+      //   if (res) {
+      //     that.map.removeLayer(res)
+      //   }
+      // })
+      // this.map.on('mouseup', function(ev) {
+      //   console.log('1111111')
+      //   that.canvasWind(this.windJsonData)
+      // })
+      window.map = map
+    },
     // ������������������������
-    change(index) {
-      console.log('change', this.windState)
+    change (index) {
       this.changeColor = index
       var pr = ''
       switch (index) {
@@ -1392,57 +1880,72 @@
       this.sensorKey = pr
       // ������������������
       // this.toggleWindState()
-      this.deviceMaker()
-      this.openLayer()
+      if (this.windState === 1) {
+        this.deviceMaker()
+        this.windData()
+      } else if (this.windState === 2) {
+        this.windDir()
+      }
     },
     // ���������������������
-    initData() {
-      this.windData()
+    initData () {
+      if (this.map) {
+        this.map.eachLayer(function (layer) {
+          // ���������������������������
+          if (
+            !layer._container &&
+            ('' + $(layer._container)
+              .attr('class')).replace(/\s/g, '') !==
+            'leaflet-layer'
+          ) {
+            layer.remove()
+          }
+        })
+      }
       this.deviceMaker()
+      this.windData()
     },
     // ���������������
-    windData() {
+    windData () {
       this.$request({
         url: '/monitorPoint/getWindData',
         method: 'get',
         params: {
           monitorPointIds: this.monitorPointIds.toString(),
           chooseTime: this.chooseTime,
-          time: this.nyr
-        }
+          time: this.nyr,
+        },
       })
         .then((res) => {
-          this.windALLData = []
-          this.windALLData = res.data[0]
-          this.openLayer()
+          this.windJsonData = res.data[0]
+          return this.windJsonData
         })
         .catch((err) => {
           console.log(err)
         })
     },
-    openLayer() {
+    canvasWind (data) {
       const res = this.findLayer('wmsid')
-      if (this.map.hasLayer(res)) {
-        const res = this.findLayer('wmsid')
+      if (res) {
         this.map.removeLayer(res)
       }
       var velocityLayer = L.velocityLayer({
+        displayValues: false, // ���������������������������������������������������
         id: 'wmsid',
-        localMode: true,
-        displayValues: true, // ���������������������������������������������������
         displayOptions: {
           // ������������������
           // velocityType: 'Global Wind',
           velocityType: 'GBR Wind',
           displayPosition: 'bottomleft',
-          displayEmptyString: 'No wind data'
+          displayEmptyString: 'No wind data',
         },
-        data: this.windALLData, // ������  ���������������
+        data: data, // ������  ���������������
+        // data: data2,
         // ������������������������������������������
         minVelocity: 0, // ��������������������� m/s ���
         maxVelocity: 8, // ��������������������� m/s ���
         velocityScale: 0.1, // ��������������� ( ������������������������ )
-        particleAge: 50, // ������������������������������������������
+        particleAge: 90, // ������������������������������������������
         lineWidth: 1.5, // ���������������������
         particleMultiplier: 1 / 300, // ��������������������� ������������ ���
         frameRate: 15, // ���������������������
@@ -1454,14 +1957,17 @@
           '#345B1B',
           '#186303',
           '#175103',
-          '#053F03'
-        ]
+          '#053F03',
+        ],
         // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
-      }, { collapsed: false, hideSingleBase: true })
+      })
       velocityLayer.addTo(this.map) // ���������������
+      setTimeout(() => {
+        this.loading = false
+      }, 1000)
     },
     // ������������������������������������������������������������������
-    alertData(n1, n2) {
+    alertData (n1, n2) {
       // ������������axios���������������������������
       this.$request({
         url: '/alarmInfo/getDataByConditionWithoutPage',
@@ -1475,38 +1981,39 @@
           startTime: this.dateValue[0],
           endTime: this.dateValue[1],
           index: this.factorValue,
-          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
+          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
+        })
     },
     // ������
     // ���������������������
-    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 }) {
       for (const key in row) {
         if (key === column.property) {
           const code = column.property
@@ -1526,7 +2033,7 @@
       }
       return ''
     },
-    turnState() {
+    turnState () {
       // console.log(this.showOrHidden)
       if (this.showOrHidden === true) {
         this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
@@ -1535,14 +2042,79 @@
       }
       this.showOrHidden = !this.showOrHidden
     },
-    closeAlarmTableVisible() {
+    // ������������������
+    stateControlStation () {
+      // this.$axios.get('monitorPoint/queryStateControlStation', {
+      this.$request({
+        url: '/govMonitorPoint/queryStateControlStation',
+        method: 'get',
+        params: {
+          regionCode: 130900,
+          sensorCode: 'a34002',
+        },
+      })
+        .then((res) => {
+          // console.log('���������������')
+          // console.log(res)
+          var gkData = res.data
+          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
+            var gIcon = L.icon({
+              iconUrl: require('@/assets/icon/gk.png'),
+              // iconUrl:require('@/assets/images/tl_PM10.png'),
+              iconSize: [55, 55],
+              iconAnchor: [13, 21],
+              className: 'my-device',
+            })
+            // ���������������������
+            L.marker([glat, glng], {
+              icon: gIcon,
+            })
+              .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) => {
+          console.log(err)
+        })
+    },
+    // ������������������������
+    toggleWindState () {
+      if (this.ws) {
+        this.ws.close()
+      }
+      if (this.windState === 2) {
+        this.windState = 1
+        this.windStateText = '���������'
+        this.initData()
+        // console.log(this.windState)
+      } else if (this.windState === 1) {
+        this.windState = 2
+        this.windStateText = '���������'
+        this.windDir()
+        // console.log(this.windState)
+      }
+    },
+    closeAlarmTableVisible () {
       this.$store.state.alarmTableVisible = false
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
+@import './dataModel.css';
 html,
 body,
 #mapContent {
@@ -1752,10 +2324,10 @@
 .my-div-icon {
   font-size: 14px;
   text-align: center;
-  padding-top: 13px;
+  padding-left: 20px;
+  padding-top: 6px;
   font-family: '������������';
   z-index: 10003;
-  cursor: pointer !important;
   /* -webkit-transform-origin-x: 0; */
   /* -webkit-transform: scale(0.90); */
 }
@@ -1766,8 +2338,6 @@
   padding-top: 11px;
   font-family: '������������';
   z-index: 10003;
-  pointer-events: none !important;
-  cursor: pointer !important;
   /* -webkit-transform-origin-x: 0; */
   /* -webkit-transform: scale(0.90); */
 }
@@ -1776,8 +2346,6 @@
 }
 .my-device {
   z-index: 999;
-  pointer-events: none !important;
-  cursor: pointer !important;
 }
 .windDir-icon {
   z-index: 10001;
@@ -1785,14 +2353,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;
@@ -1838,5 +2399,4 @@
   margin-left: -45px;
   margin-top: -40px;
 }
-
 </style>

--
Gitblit v1.8.0