Merge branch 'feature_1.0'

quanyawei

2023-10-25 a386f08fcf875f54860951834cfc6c888091e192

 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,653 @@
          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 windDeg = 0

          let windDir = ''

          let dushu = deviceDetails.a01008 === '-' ? '-' : JSON.parse(deviceDetails.a01008)

            .toFixed(0)

          let level = deviceDetails.a01007 === '0.0' ? '-' : WWindUtil.WindtoLevel(deviceDetails.a01007).level

          console.log('level', level)

          if (deviceDetails.a01008) {

            var windDirs = Number(

              deviceDetails.a01008.substr(0, deviceDetails.a01008.length - 1)

            )

            // console.log(windDirs)

            windDeg = windDirs

            if (windDirs === 0 || windDirs === '-') {

              windDir = '北风'

            } else if (windDirs > 0 && windDirs < 90) {

              windDir = '东北风'

            } else if (windDirs === 90) {

              windDir = '东风'

            } else if (windDirs > 90 && windDirs < 180) {

              windDir = '东南风'

            } else if (windDirs === 180) {

              windDir = '南风'

            } else if (windDirs > 180 && windDirs < 270) {

              windDir = '西南风'

            } else if (windDirs === 270) {

              windDir = '西风'

            } else if (windDirs > 270 && windDirs < 360) {

              windDir = '西北风'

            }

          }

          // 请求数据更新弹框内容

          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)"

                src=${this.compassDirection}

              >

            </div>

            <div class='windInfor'>

              <div>风向: ${windDir} (${dushu}℃)</div>

              <div>风速: ${deviceDetails.a01007}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 +1773,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 +1799,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 +1868,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 +1945,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 +1969,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 +2021,7 @@
      }

      return ''

    },

    turnState() {

    turnState () {

      // console.log(this.showOrHidden)

      if (this.showOrHidden === true) {

        this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')

@@ -1535,14 +2030,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 +2312,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 +2326,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 +2334,6 @@
}

.my-device {

  z-index: 999;

  pointer-events: none !important;

  cursor: pointer !important;

}

.windDir-icon {

  z-index: 10001;

@@ -1785,14 +2341,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 +2387,4 @@
  margin-left: -45px;

  margin-top: -40px;

}



</style>