fix:实时风场图点击弹窗修改

quanyawei

2023-10-25 7c99f16331b22b46b3992f28f10afcdcc4f1f2c0

fix:实时风场图点击弹窗修改

 .eslintrc.js

@@ -15,7 +15,7 @@
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    'eqeqeq': ['error', 'always'], // 强制使用三个等于号
    'semi': 2, // 语句可以不需要分号结尾
    'semi': 0, // 语句可以不需要分号结尾
    'no-use-before-define': [1, 'nofunc'], // 未定义前不能使用
    'max-lines': ['error', { 'max': 2000, 'skipBlankLines': true }],
    'no-mixed-spaces-and-tabs': 'warn', // 禁止使用空格和tab混合缩进

 src/components/Wind/Map.vue

@@ -5,7 +5,9 @@
    element-loading-text="请稍等"

    element-loading-background="rgba(0, 0, 0, 0.6)"

  >

    <div v-if="noneData" class="noneData">当前区域设备没有风场</div>

    <div v-if="noneData" class="noneData">

      当前区域设备没有风场

    </div>

    <div class="top">

      <span

        v-for="(item, index) in params"

@@ -24,7 +26,12 @@
          @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 +270,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 +320,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,9 +332,11 @@
import 'leaflet/dist/leaflet.css'

import 'leaflet-velocity/dist/leaflet-velocity.css'

import L from 'leaflet'

import _ from 'lodash'

import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'

import 'leaflet-velocity/dist/leaflet-velocity'

import $ from 'jquery'

import { WWindUtil } from '@/components/Wind/WRatingArr.js'

import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件

import { mapGetters } from 'vuex'

import { gcj02towgs84 } from '@/assets/json/transform'

@@ -340,10 +347,12 @@
    weidu: Number,

    jingdu: Number,

    monitorPointId: Number,

    monitorPointIds: Array

    monitorPointIds: Array,

  },

  data() {

    return {

      compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),

      compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),

      timerKey: '', // 用于重新渲染子组件

      map: null,

      code: [],

@@ -389,70 +398,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'),

@@ -464,11 +473,11 @@
      dateInfo: '', // 选择的日期

      timeInfo: '', // 选择的时间

      nyr: '', // 选择的年月日

      windJsonData: []

      windJsonData: [],

    }

  },

  computed: {

    ...mapGetters(['regionCode'])

    ...mapGetters(['regionCode']),

  },

  watch: {

    dateValue(n, o) {

@@ -484,7 +493,7 @@


        this.canvasWind(newCode)

      })

    }

    },

  },

  mounted() {

    this.currentHour()

@@ -529,7 +538,8 @@
  methods: {

    // 拿到某天的日期和星期

    getDayXQ(day) {

      var days = new Date().getDay() // 星期

      var days = new Date()

.getDay() // 星期

      var rq = '' // 日期

      if (day === 'today') {

        rq = this.newData(0)

@@ -680,7 +690,7 @@
      }

      // 鼠标移入移出事件

      for (let i = 0; i < lis.length; i++) {

        lis[i].onmouseenter = function() {

        lis[i].onmouseenter = function () {

          // console.log('mouseenter', i)

          // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'

          mouseDiv.style.transform = 'translateX(-50%)'

@@ -691,13 +701,13 @@
          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() {

        timeLis[i].onmouseenter = function () {

          // console.log('mouseenter', i)

          // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'

          mouseDiv.style.left = 1.36986 * i + '%'

@@ -708,7 +718,7 @@
          inText.innerHTML = times + ':00'

          // console.log(mouseDiv)

        }

        timeLis[i].onmouseleave = function() {

        timeLis[i].onmouseleave = function () {

          mouseDiv.style.display = 'none'

          // console.log('移出事件', i)

        }

@@ -768,11 +778,12 @@
    // 请求设备坐标,当前的

    deviceMaker() {

      if (this.map) {

        this.map.eachLayer(function(layer) {

        this.map.eachLayer(function (layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

            ('' + $(layer._container)

.attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

@@ -787,11 +798,11 @@
          organizationId: this.$store.state.orgId,

          regionCode: this.$store.state.regionCode,

          chooseTime: this.chooseTime,

          time: this.nyr

        }

      }).then((data) => {

          time: this.nyr,

        },

      })

.then((data) => {

        // console.log('五分钟设备数据')

        console.log(data, 'tata')

        this.markDeviceSite(data)

      })

    },

@@ -801,8 +812,10 @@
      this.keyData = data.data.devices

      // 遍历国控站位置

      // this.stateControlStation()

      var groupIcon = L.layerGroup().addTo(this.map)

      var groupText = L.layerGroup().addTo(this.map)

      var groupIcon = L.layerGroup()

.addTo(this.map)

      var groupText = L.layerGroup()

.addTo(this.map)

      this.keys = []

      for (let i = 0; i < keyData.length; i++) {

        if (keyData[i].a34002) {

@@ -812,13 +825,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'))

@@ -946,7 +962,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: {

@@ -985,7 +1002,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

@@ -1061,7 +1079,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

@@ -1105,12 +1124,12 @@
          // iconUrl: require('@/assets/icon/ico2.png'),

          iconSize: [60, 60],

          iconAnchor: [30, 48],

          className: 'my-device'

          className: 'my-device',

        })



        // 添加标记到地图

        const iconMarker = L.marker([lat, lng], {

          icon: blueIcon

          icon: blueIcon,

        })

        groupIcon.addLayer(iconMarker)

        // console.log(JSON.parse(this.keys[i]))

@@ -1118,17 +1137,20 @@
          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: [60, 60],

          iconAnchor: [40, 40]

          iconAnchor: [40, 40],

        })



        const TexteMarker = L.marker([lat, lng], { icon: myIcon })

        TexteMarker.vuecontext = this

        groupText.addLayer(TexteMarker)

        const _this = this

        // 给标记添加鼠标移入事件，mouseover事件会冒泡

        TexteMarker.on('click', function(e) {

        TexteMarker.on('click', function (e) {

          const MarkerTarget = e.target

          _this.getMarkerInfor(keyData[i], MarkerTarget)

          // _this.getMarkerInfor(keyData[i], MarkerTarget)

          this.noneData = false

          // const _this = e.target.vuecontext

          _this.handleClick(keyData[i], MarkerTarget)

        })

        // 给标记点添加鼠标移出事件

        // TexteMarker.on('mouseout', function(e) {

@@ -1136,6 +1158,510 @@
        //   this.bindPopup().closePopup()

        // })

      }

      console.log(' this.keys', this.keys)

    },

    styleBgColor(keyName) {

      console.log('keyName', 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

    },

    handleClick(data, marker) {

      this.$request({

        url: '/historyFiveMinutely/queryFiveDataByMac',

        method: 'get',

        params: {

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

      })

        .then((res) => {

          console.log('res.data', res)

          if (res.message === '操作目标不存在') {

            var datafalse = '暂无五分钟数据'

            marker.bindPopup(datafalse)

.openPopup()

            return

          }

          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 === '-'

              ? WWindUtil.windFormatLevel(deviceDetails.a01007)

              : '-'

          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>设备详情</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: 53%;top: 47%;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)

        })

    },

    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({

@@ -1144,27 +1670,28 @@
        params: {

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr

        }

          time: this.nyr,

        },

      })

        .then((res) => {

          if (res.message === '操作目标不存在') {

            var datafalse = '暂无五分钟数据'

            this.bindPopup(datafalse).openPopup()

            this.bindPopup(datafalse)

.openPopup()

            return

          }

          for (const key in res.data) {

            var tempDecimal = res.data[key]

              .replace(/[^\d.]/g, '')

              .split('.')[1]

            var tempDecimal = res.data[key].replace(/[^\d.]/g, '')

.split('.')[1]

            if (key !== '名称' && key !== '时间') {

              if (Number(tempDecimal) === 0) {

                res.data[key] =

                      parseInt(res.data[key]) + res.data[key].split(' ')[1]

                  parseInt(res.data[key]) + res.data[key].split(' ')[1]

              } else {

                res.data[key] =

                      Number(res.data[key].split(' ')[0]).toFixed(2) +

                      res.data[key].split(' ')[1]

                  Number(res.data[key].split(' ')[0])

.toFixed(2) +

                  res.data[key].split(' ')[1]

              }

            }

          }

@@ -1172,7 +1699,8 @@
            .replace(/,/g, `<br>`)

            .replace(/{|}|"/g, '')

          console.log(data)

          marker.bindPopup(data).openPopup()

          marker.bindPopup(data)

.openPopup()

        })

        .catch((err) => {

          console.log(err)

@@ -1186,11 +1714,12 @@
      // const that = this

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

        this.map.eachLayer(function (layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

            ('' + $(layer._container)

.attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

@@ -1252,7 +1781,8 @@
        }

      }, 1000)

    },

    findLayer(layerName) { // 根据图层名称查找图层

    findLayer(layerName) {

      // 根据图层名称查找图层

      if (!this.map) {

        return null

      }

@@ -1276,12 +1806,13 @@
        renderer: L.canvas(),

        zoomControl: false, // 缩放组件

        attributionControl: false, // 去掉右下角logol

        crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84

        crs: L.CRS.EPSG3857, // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84

      })

      // 定义图层样式

      L.tileLayer(

        'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'

      ).addTo(map)

      )

.addTo(map)

      this.map = map // data上需要挂载

      // const that = this

      // this.map.on('mousedown', function(ev) {

@@ -1343,11 +1874,12 @@
    // 请求风场图接口

    initData() {

      if (this.map) {

        this.map.eachLayer(function(layer) {

        this.map.eachLayer(function (layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

            ('' + $(layer._container)

.attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

@@ -1365,8 +1897,8 @@
        params: {

          monitorPointIds: this.monitorPointIds.toString(),

          chooseTime: this.chooseTime,

          time: this.nyr

        }

          time: this.nyr,

        },

      })

        .then((res) => {

          this.windJsonData = res.data[0]

@@ -1389,7 +1921,7 @@
          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data'

          displayEmptyString: 'No wind data',

        },

        data: data, // 数据  格式可参照

        // data: data2,

@@ -1409,8 +1941,8 @@
          '#345B1B',

          '#186303',

          '#175103',

          '#053F03'

        ]

          '#053F03',

        ],

        // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']

      })

      velocityLayer.addTo(this.map) // 添加到图上

@@ -1433,9 +1965,10 @@
          startTime: this.dateValue[0],

          endTime: this.dateValue[1],

          index: this.factorValue,

          alarmType: this.alartValue

        }

      }).then((res) => {

          alarmType: this.alartValue,

        },

      })

.then((res) => {

        // console.log('分页数据')

        // console.log(res)

        var tempData = res.data

@@ -1501,14 +2034,15 @@
        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002'

        }

          sensorCode: 'a34002',

        },

      })

        .then((res) => {

          // console.log('国控站信息')

          // console.log(res)

          var gkData = res.data

          var group = L.layerGroup().addTo(this.map)

          var group = L.layerGroup()

.addTo(this.map)

          for (let i = 0; i < gkData.length; i++) {

            var glat = gkData[i].latitude

            var glng = gkData[i].longitude

@@ -1517,20 +2051,22 @@
              // iconUrl:require('@/assets/images/tl_PM10.png'),

              iconSize: [55, 55],

              iconAnchor: [13, 21],

              className: 'my-device'

              className: 'my-device',

            })

            // 添加标记到地图

            L.marker([glat, glng], {

              icon: gIcon

            }).addTo(group)

              icon: gIcon,

            })

.addTo(group)

            var myIcon = L.divIcon({

              html: gkData[i].data,

              className: 'my-div-icon-g',

              iconSize: 30

              iconSize: 30,

            })

            L.marker([glat, glng], {

              icon: myIcon

            }).addTo(group)

              icon: myIcon,

            })

.addTo(group)

          }

        })

        .catch((err) => {

@@ -1556,12 +2092,13 @@
    },

    closeAlarmTableVisible() {

      this.$store.state.alarmTableVisible = false

    }

  }

    },

  },

}

</script>



<style lang="scss">

@import './dataModel.css';

html,

body,

#mapContent {

@@ -1800,14 +2337,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;


 src/components/Wind/WRatingArr.js

New file
@@ -0,0 +1,429 @@
/**
 * 气象-风向转化工具
 */
var WWindUtil = {};
/**
 * 风向json
 */
WWindUtil.WDJson = {
  "N": {
    "en": "N",
    "cn": "北",
    "desc": "北"
  },
  "NNE": {
    "en": "NNE",
    "cn": "北东北",
    "desc": "东北偏北"
  },
  "NE": {
    "en": "NE",
    "cn": "东北",
    "desc": "东北"
  },
  "ENE": {
    "en": "ENE",
    "cn": "东东北",
    "desc": "东北偏北"
  },
  "E": {
    "en": "E",
    "cn": "东",
    "desc": "东"
  },
  "ESE": {
    "en": "ESE",
    "cn": "东东南",
    "desc": "东南偏东"
  },
  "SE": {
    "en": "SNE",
    "cn": "东南",
    "desc": "东南"
  },
  "SSE": {
    "en": "SSE",
    "cn": "南东南",
    "desc": "东南偏南"
  },
  "S": {
    "en": "S",
    "cn": "南",
    "desc": "南"
  },
  "SSW": {
    "en": "SSW",
    "cn": "南西南",
    "desc": "西南偏南"
  },
  "SW": {
    "en": "SW",
    "cn": "西南",
    "desc": "西南"
  },
  "WSW": {
    "en": "WSW",
    "cn": "西西南",
    "desc": "西南偏西"
  },
  "W": {
    "en": "W",
    "cn": "西",
    "desc": "西"
  },
  "WNW": {
    "en": "WNW",
    "cn": "西西北",
    "desc": "西北偏西"
  },
  "NW": {
    "en": "NW",
    "cn": "西北",
    "desc": "西北"
  },
  "NNW": {
    "en": "NW",
    "cn": "北西北",
    "desc": "西北偏北"
  },
  "ERROR": {
    "en": "error value",
    "cn": "错误数值",
    "desc": "错误数值"
  }

};

/**
 * 风力等级
 */
WWindUtil.WRatingArr = [
  {
    "min": 0,
    "max": 1.5,
    "level": 1,
    "name": "软风",
    "landScene": "烟示风向"
  },
  {
    "min": 1.6,
    "max": 3.3,
    "level": 2,
    "name": "轻风",
    "landScene": "感觉有风"
  },
  {
    "min": 3.4,
    "max": 5.4,
    "level": 3,
    "name": "微风",
    "landScene": "旌旗展开"
  },
  {
    "min": 5.5,
    "max": 7.9,
    "level": 4,
    "name": "和风",
    "landScene": "吹起尘土"
  },
  {
    "min": 8.0,
    "max": 10.7,
    "level": 5,
    "name": "劲风",
    "landScene": "小树摇摆"
  },
  {
    "min": 10.8,
    "max": 13.8,
    "level": 6,
    "name": "强风",
    "landScene": "电线有声"
  },
  {
    "min": 13.9,
    "max": 17.1,
    "level": 7,
    "name": "疾风",
    "landScene": "步行困难"
  },
  {
    "min": 17.2,
    "max": 20.7,
    "level": 8,
    "name": "大风",
    "landScene": "折毁树枝"
  },
  {
    "min": 20.8,
    "max": 24.4,
    "level": 9,
    "name": "烈风",
    "landScene": "小损房屋"
  },
  {
    "min": 24.5,
    "max": 28.4,
    "level": 10,
    "name": "狂风",
    "landScene": "拔起树木"
  },
  {
    "min": 28.5,
    "max": 32.6,
    "level": 11,
    "name": "暴风",
    "landScene": "损毁重大"
  },
  {
    "min": 32.7,
    "max": 36.9,
    "level": 0,
    "name": "飓风",
    "landScene": "摧毁极大"
  },
  {
    "min": 37.0,
    "max": 41.4,
    "level": 13,
    "name": "",
    "landScene": ""
  },
  {
    "min": 41.5,
    "max": 46.1,
    "level": 14,
    "name": "",
    "landScene": ""
  },
  {
    "min": 46.2,
    "max": 50.9,
    "level": 15,
    "name": "",
    "landScene": ""
  },
  {
    "min": 51.0,
    "max": 56.0,
    "level": 16,
    "name": "",
    "landScene": ""
  },
  {
    "min": 56.1,
    "max": null,
    "level": 17,
    "name": "",
    "landScene": ""
  }
]

/** 风向值转文字风向
 * @param {Object} windNumberValue 风向值
 */
WWindUtil.to16WindDirection = function (windNumberValue) {
  if (windNumberValue > 360) {
    return WWindUtil.WDJson.ERROR;
  }
  let a = Math.ceil(windNumberValue / 11.25);
  let ret;
  switch (a) {
    case 32:
    case 1:
      ret = WWindUtil.WDJson.N;
      break;

    case 2:
    case 3:
      ret = WWindUtil.WDJson.NNE;
      break;


    case 4:
    case 5:
      ret = WWindUtil.WDJson.NE;
      break;

    case 6:
    case 7:
      ret = WWindUtil.WDJson.ENE;
      break;

    case 8:
    case 9:
      ret = WWindUtil.WDJson.E;
      break;

    case 10:
    case 11:
      ret = WWindUtil.WDJson.ESE;
      break;

    case 12:
    case 13:
      ret = WWindUtil.WDJson.SE;
      break;

    case 14:
    case 15:
      ret = WWindUtil.WDJson.SSE;
      break;

    case 16:
    case 17:
      ret = WWindUtil.WDJson.S;
      break;

    case 18:
    case 19:
      ret = WWindUtil.WDJson.SSW;
      break;

    case 20:
    case 21:
      ret = WWindUtil.WDJson.SW;
      break;

    case 22:
    case 23:
      ret = WWindUtil.WDJson.WSW;
      break;

    case 24:
    case 25:
      ret = WWindUtil.WDJson.W;
      break;

    case 26:
    case 27:
      ret = WWindUtil.WDJson.WNW;
      break;

    case 28:
    case 29:
      ret = WWindUtil.WDJson.NW;
      break;

    case 30:
    case 31:
      ret = WWindUtil.WDJson.NNW;
      break;

    default:
      ret = WWindUtil.WDJson.ERROR;
      break;

  }
  return ret;
}

/** 风向值转文字风向
 * @param {Object} windNumberValue 风向值
 */
WWindUtil.to8WindDirection = function (windNumberValue) {
  if (windNumberValue > 360) {
    return WWindUtil.WDJson.ERROR;
  }
  let a = Math.ceil(windNumberValue / 22.5);
  let ret;
  switch (a) {
    case 16:
    case 1:
      ret = WWindUtil.WDJson.N;
      break;

    case 2:
    case 3:
      ret = WWindUtil.WDJson.NE;
      break;


    case 4:
    case 5:
      ret = WWindUtil.WDJson.E;
      break;

    case 6:
    case 7:
      ret = WWindUtil.WDJson.SE;
      break;

    case 8:
    case 9:
      ret = WWindUtil.WDJson.S;
      break;

    case 10:
    case 11:
      ret = WWindUtil.WDJson.SW;
      break;

    case 12:
    case 13:
      ret = WWindUtil.WDJson.W;
      break;

    case 14:
    case 15:
      ret = WWindUtil.WDJson.NW;
      break;

    default:
      ret = WWindUtil.WDJson.ERROR;
      break;

  }
  return ret;
}

/** 风速转风力等级
 * @param {Object} value 风速值 (m/s)
 */
WWindUtil.WindtoLevel = function (value) {
  let vl = Number(value);
  if (!vl || vl < 0) { return null; }
  let arr = WWindUtil.WRatingArr;
  if (vl >= arr[arr.length - 1].min) {
    return arr[arr.length - 1];
  }
  for (let i = 0; i < arr.length; i++) {
    if (vl >= arr[i].min && vl <= arr[i].max) {
      return arr[i];
    }
  }
  return null;
}

// 风向值转文字
WWindUtil.windValueFormat = function (value) {
  try {
    let vl = Number(value);
    if (!vl || vl > 360 || vl < 0) {
      return '-';
    }
    return WWindUtil.to16WindDirection(value).desc;
  } catch (e) {
    return '-';
  }
}

/** 风速值转文字描述
 * @param {Object} value 风速值
 */
WWindUtil.windFormatLevel = function (value) {
  try {
    let vl = Number(value);
    if (!vl || vl > 100 || vl < 0) {
      return "-";
    }
    return WWindUtil.WindtoLevel(value).level + "级(" + WWindUtil.WindtoLevel(value).name + ")";
  } catch (e) {
    return "-";
  }
}


export {
  WWindUtil
};

 src/components/Wind/dataModel.css

New file
@@ -0,0 +1,173 @@
.mypopup {
  .leaflet-popup-content-wrapper {
    width: 415px;
    height: 300px;

  }

}

.marker_maptip {
  width: 380px;
  background: #fff;
  padding: 0;
}

.marker_maptip .marker_title_1nQ {
  font-size: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.marker_maptip .marker_title_1nQ icon {
  float: right;
  display: block;
  margin-right: 8px;
  margin-top: 8px;
  cursor: pointer;
}

.marker_maptip .marker_title_1nQ icon:hover {
  box-shadow: 2px 2px 1px #888;
}

.marker_maptip .marker_firstline_2WH {
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
  text-align: center;
}

.marker_maptip .marker_firstline_2WH .marker_citypart_keg {
  float: left;
  width: 74.6%;
  margin-right: 0.8%;
  background: #eee;
}

.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_name_3Lz {
  font-size: 20px;
  white-space: nowrap;
}

.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_name_small_1VU {
  font-size: 16px;
  height: 28px;
  line-height: 28px;
  white-space: nowrap;
}

.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_time_w5m {
  font-size: 12px;
}

.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI {
  width: 24.4%;
  float: left;
  margin-right: 0.8%;
}

.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI .marker_indexname_3TP {
  height: 20px;
  line-height: 20px;
}

.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI .marker_indexvalue_1O7 {
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  color: #666;
  background: #eee;
}

.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI:last-child {
  margin-right: 0;
}

.marker_maptip .marker_secondline_2Om {
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
}

.marker_maptip .marker_secondline_2Om .marker_item_2Kk {
  width: 16%;
  height: 44px;
  float: left;
  text-align: center;
  margin-right: 0.8%;
}

.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemname_Wq5 {
  height: 20px;
  line-height: 20px;
}

.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemvalue_1l1 {
  height: 24px;
  font-size: 15px;
  line-height: 24px;
  color: #666;
  background: #eee;
  text-align: center;
}

.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemvalue_1l1 .marker_redpoint_2aL {
  width: 4px;
  height: 4px;
  padding: 3px;
  border-radius: 50%;
  background: red;
  margin: -5px auto 0;
}

.marker_maptip .marker_secondline_2Om .marker_item_2Kk:last-child {
  margin-right: 0;
}

.marker_maptip .marker_thirdline_1q_ {
  border: 0;
  color: #999;
  width: 100%;
  margin-bottom: 8px;
}

.marker_maptip .marker_thirdline_1q_ .marker_tablename_XLo {
  text-align: left;
  width: 12%;
}

.marker_maptip .marker_thirdline_1q_ .marker_tablevalue_23Q {
  text-align: left;
  width: 18.333%;
  white-space: nowrap;
}

.marker_maptip .marker_fourthline_27d {
  height: 120px;
  width: 100%;
}

.marker_maptip .windBox {
  display: flex;
  justify-content: space-between;
}

.marker_maptip .windBox .windInfor {
  width: 50%;
  color: #999;
  font-size: 17px;
  padding-top: 15px;
  padding-left: 30px;
}

.marker_maptip .windBox .windInfor div {
  margin-top: 10px;
}

.marker_maptip .windBox .windIcon {
  text-align: center;
  font-size: 15px;
  width: 50%;
  color: #999;
}