fix:风场粒子修改

quanyawei

2023-10-11 8ecfcc670c6059b37833a95214896e4ad2463988

fix:风场粒子修改

 src/components/Wind/Map.vue

@@ -327,6 +327,7 @@
import 'leaflet/dist/leaflet.css'

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

import L from 'leaflet'

import 'wind-js-leaflet'

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

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

import $ from 'jquery'

@@ -463,7 +464,8 @@
      chooseTime: false,

      dateInfo: '', // 选择的日期

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

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

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

      windALLData: []

    }

  },

  computed: {

@@ -498,11 +500,13 @@
    this.jingduNew = newLL[1]

    this.weiduNew = newLL[0]

    // 初始化风场数据

    // this.initData()

    // this.change(0)

    this.windData()

    this.change(0)

    this.getParamsData()

    this.windDir()

    // this.deviceMaker()

    this.newDate()



    // this.alertData(this.PageSize, this.currentPage)

  },

  beforeDestroy() {

@@ -719,12 +723,6 @@
    },

    // 当前小时默认值

    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

@@ -757,183 +755,6 @@
    mouseLeave() {

      this.map.scrollWheelZoom.enable()

    },

    // initWebpack() {

    //   // 拼写参数

    //   var param = this.accountId + '&' + this.orgId + '&' + this.regionCode

    //   // 拼写URL

    //   var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param

    //   socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

    //   this.ws = new WebSocket(socketUrl)

    //   this.ws.onopen = this.onopen

    //   this.ws.onmessage = this.onmessage

    //   this.ws.onclose = this.onclose

    //   this.ws.onerror = this.onerror

    // },

    // reconnect() { // 重新连接

    //   var that = this

    //   if (that.lockReconnect) {

    //     return

    //   }

    //   that.lockReconnect = true

    //   // 没连接上会一直重连，设置延迟避免请求过多

    //   that.timeoutnum && clearTimeout(that.timeoutnum)

    //   that.timeoutnum = setTimeout(function() {

    //     // 新连接

    //     that.initWebpack()

    //     that.lockReconnect = false

    //   }, 5000)

    // },

    // reset() { // 重置心跳

    //   var that = this

    //   // 清除时间

    //   clearTimeout(that.timeoutObj)

    //   clearTimeout(that.serverTimeoutObj)

    //   // 重启心跳

    //   that.start()

    // },

    // start() { // 开启心跳

    //   // console.log('开启心跳')

    //   var self = this

    //   self.timeoutObj && clearTimeout(self.timeoutObj)

    //   self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)

    //   self.timeoutObj = setTimeout(function() {

    //     // 这里发送一个心跳，后端收到后，返回一个心跳消息，

    //     if (self.ws.readyState === 1) { // 如果连接正常

    //       self.ws.send('heartCheck')

    //     } else { // 否则重连

    //       self.reconnect()

    //     }

    //     self.serverTimeoutObj = setTimeout(function() {

    //       // 超时关闭

    //       self.ws.close()

    //     }, self.timeout)

    //   }, self.timeout)

    // },

    // onopen() {

    //   // console.log('连接开启')

    //   // 开启心跳

    //   this.start()

    // },

    // onmessage(msg) {

    //   var that = this

    //   if (JSON.parse(msg.data).名称) {

    //     that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')

    //   } else {

    //     that.wsData1 = msg.data

    //     if (that.windState === 2) {

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

    //         // 更新风向标

    //         // 遍历出(通过mac匹配)要更新的风向标

    //         if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {

    //           var blueIcon1 = L.icon({ // 设置图标样式

    //             iconUrl: require('@/assets/images/icoWind03.png'),

    //             iconSize: [30, 30],

    //             iconAnchor: [15, 25],

    //             className: 'iconWind'

    //           })

    //           // L.marker用来在地图中放置注记

    //           that.marker = L.marker([that.lats[i], that.lngs[i]], {

    //             icon: blueIcon1,

    //             rotationAngle: Number(JSON.parse(that.wsData1).风向)

    //           })

    //           if (i === 0) {

    //             that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //             that.map.addLayer(that.marker)

    //           } else {

    //             that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //             for (let j = 0; j < that.markerObject.length; j++) {

    //               if (that.coordinates[0] === that.markerObject[j].mac1) {

    //                 that.map.removeLayer(that.markerObject[j].marker)

    //                 that.map.addLayer(that.marker)

    //               } else if (that.coordinates[i] === that.markerObject[j].mac1) {

    //                 that.map.removeLayer(that.markerObject[j].marker)

    //                 that.map.addLayer(that.marker)

    //               }

    //             }

    //           }

    //         }

    //       }

    //     }

    //   }

    //   // 收到服务器信息，心跳重置

    //   this.reset()

    // },

    // onclose(e) {

    //   // console.log('连接关闭')

    //   // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)

    //   // 重连

    //   this.reconnect()

    // },

    // onerror(e) {

    //   console.log('出现错误')

    //   // 重连

    //   this.reconnect()

    // },

    // ws方法

    // wsStart() {

    //   var that = this

    //   // 拼写参数

    //   var param = this.accountId + '&' + this.orgId + '&' + this.regionCode

    //   // 拼写URL

    //   var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param

    //   // 替换http为WS

    //   //   console.log(socketUrl)

    //   socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

    //   this.ws = new WebSocket(socketUrl)

    //   // if (this.ws) {

    //   //   this.ws.close()

    //   //   console.log('ws心跳关闭')

    //   // }

    //   // this.ws = new WebSocket(socketUrl)

    //   // console.log('ws心跳开启')



    //   this.ws.onopen = function() {

    //     // console.log('websocket开启成功')

    //   }

    // 获得消息事件

    //   this.ws.onmessage = function(msg) {

    //     if (JSON.parse(msg.data).名称) {

    //       that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')

    //       //   console.log(that.wsData2)

    //     } else {

    //       that.wsData1 = msg.data

    //       //   console.log(that.wsData1)

    //       if (that.windState === 2) {

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

    //           // 更新风向标

    //           // 遍历出(通过mac匹配)要更新的风向标

    //           if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {

    //             var blueIcon1 = L.icon({

    //               iconUrl: require('@/assets/images/icoWind03.png'),

    //               iconSize: [30, 30],

    //               iconAnchor: [15, 25],

    //               className: 'iconWind'

    //             })

    //             that.marker = L.marker([that.lats[i], that.lngs[i]], {

    //               icon: blueIcon1,

    //               rotationAngle: Number(JSON.parse(that.wsData1).风向)

    //             })

    //             if (i === 0) {

    //               that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //               that.map.addLayer(that.marker)

    //             } else {

    //               that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //               for (let j = 0; j < that.markerObject.length; j++) {

    //                 if (that.coordinates[0] === that.markerObject[j].mac1) {

    //                   that.map.removeLayer(that.markerObject[j].marker)

    //                   that.map.addLayer(that.marker)

    //                 } else if (that.coordinates[i] === that.markerObject[j].mac1) {

    //                   that.map.removeLayer(that.markerObject[j].marker)

    //                   that.map.addLayer(that.marker)

    //                 }

    //               }

    //             }

    //           }

    //         }

    //       }

    //     }

    //   }

    // },

    // 百度经纬度转高德经纬度

    bd09togcj02(bd_lon, bd_lat) {

      var x_pi = (3.14159265358979324 * 3000.0) / 180.0

@@ -945,67 +766,12 @@
      var gg_lat = z * Math.sin(theta)

      return [gg_lat, gg_lng]

    },

    // /**

    //  * GCJ02 转换为 WGS84

    //  * @param lng

    //  * @param lat

    //  * @returns {*[]}

    //  */

    // gcj02towgs84(lng, lat) {

    //   if (this.out_of_china(lng, lat)) {

    //     return [lat,lng]

    //   } else {

    //     var dlat = this.transformlat(lng - 105.0, lat - 35.0);

    //     var dlng = this.transformlng(lng - 105.0, lat - 35.0);

    //     var radlat = lat / 180.0 * PI;

    //     var magic = Math.sin(radlat);

    //     magic = 1 - ee * magic * magic;

    //     var sqrtmagic = Math.sqrt(magic);

    //     dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);

    //     dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);

    //     var mglat = lat + dlat;

    //     var mglng = lng + dlng;

    //     return [ lat * 2 - mglat,lng * 2 - mglng]

    //   }

    // },

    //

    // transformlat(lng, lat) {

    //   var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));

    //   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    //   ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;

    //   ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;

    //   return ret

    // },

    // transformlng(lng, lat) {

    //   var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));

    //   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    //   ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;

    //   ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;

    //   return ret

    // },

    // /**

    //  * 判断是否在国内，不在国内则不做偏移

    //  * @param lng

    //  * @param lat

    //  * @returns {boolean}

    //  */

    // out_of_china(lng, lat) {

    //   return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);

    // },

    // 请求设备坐标,当前的

    deviceMaker() {

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

        // const res = this.findLayer('wmsid')

        // this.map.removeLayer(res)

      }

      const that = this

      this.$request({

@@ -1027,14 +793,13 @@
    },

    // 标记设备点

    markDeviceSite(data) {

      // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]

      // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]

      var keyData = data.data.devices

      this.keyData = data.data.devices

      // 遍历国控站位置

      this.stateControlStation()

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

      // this.stateControlStation()



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

@@ -1055,12 +820,6 @@
          this.keys.push(JSON.parse('null'))

          // }

        }

        // console.log(this.keys)

        // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)

        // var lat = newL[0]

        // this.lats[i] = newL[0]

        // var lng = newL[1]

        // this.lngs[i] = newL[1]

        var lat = keyData[i].latitude

        this.lats[i] = keyData[i].latitude

        var lng = keyData[i].longitude

@@ -1341,30 +1100,27 @@
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

          // iconUrl: require('@/assets/icon/ico2.png'),

          iconSize: [60, 60],

          iconAnchor: [30, 48],

          className: 'my-device'

        })

        // 添加标记到地图

        L.marker([lat, lng], {

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

          icon: blueIcon

        }).addTo(group)

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

        var myIcon = L.divIcon({

          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: [60, 60],

          iconAnchor: [40, 40]

        })

        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)

        markerList.push(a)

        const bg = `<div style='height:20px;cursor: pointer;'>${this.keys[i]}</div>`

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

        var myIcon = L.divIcon({

          html: bg,

          className: 'my-div-icon',

          iconSize: [50, 20],

          iconAnchor: [26, 30]

        })

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

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

        var _this = this

        marker.on('mouseover', function(e) {

        b.on('mouseover', function(e) {

          console.log('e', e)

          this.noneData = false

          // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {

          //   var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')

          //   // console.log(data)

          //   this.bindPopup(data).openPopup()

          // })

          _this

            .$request({

              url: '/historyFiveMinutely/queryPopDataByMac',

@@ -1376,7 +1132,7 @@
              }

            })

            .then((res) => {

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

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

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

                this.bindPopup(datafalse).openPopup()

                return

@@ -1401,18 +1157,20 @@
              var data = JSON.stringify(res.data)

                .replace(/,/g, `<br>`)

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

              this.bindPopup(data).openPopup()

              this.bindPopup(data).togglePopup()

            })

            .catch((err) => {

              console.log(err)

            })

        })

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

        marker.on('mouseout', function(e) {

        b.on('mouseout', function(e) {

          this.noneData = false

          this.bindPopup().closePopup()

          this.bindPopup().togglePopup()

        })

        markerList.push(b)

      }

      L.layerGroup(markerList).addTo(this.map)

    },

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

    // moveInAndOut() {

@@ -1463,104 +1221,48 @@
        })

    },

    // 切换风场风向状态

    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)

      }

    },

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

    //   }

    // },

    // 请求风向标

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

      // 执行ws方法

      // this.wsStart()

      // this.initWebpack()

      // console.log('这是ws需要的三个参数')

      // console.log(this.accountId, this.orgId, this.regionCode)

      // this.timer2 = setInterval(() => {

      //   if (this.ws) {

      //     this.ws.close()

      //     console.log('ws心跳关闭')

      //   }

      //   // 执行ws方法

      //   this.wsStart()

      //   console.log('ws心跳开启')

      // }, 60000)

    },

    // 获得父组件改变regionCode子组件请求api功能

    getRegionApiRequest() {

      // console.log(this.$store.state.regionCode)

      // this.ws.close()

      // console.log('ws关闭')

      // 请求更新风场数据

      this.getParamsData()

      setTimeout(() => {

        $.getJSON(

          'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',

          { monitorPointId: this.$store.state.monitorPointId },

          (data) => {

            // 遍历所有图层

            //   console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')

            //   console.log(data)

            // this.map.eachLayer(function(layer) {

            // // 卸载之前的风场图层

            //   if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

            //     layer.remove()

            //   }

            // })

            this.map.setView([data[2], data[1]], 12)

            //   console.log('跳转成功')

          }

        )

      }, 1000)

      if (this.windState === 1) {

        // this.ws.close()

        this.initData()

        // console.log('请求风场图')

      } else if (this.windState === 2) {

        this.windDir()

        // console.log('请求风向标')

      }

      // 请求设备坐标

      // this.deviceMaker()

      // this.getParamsData()

    },

    // 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()

    //   }

    // },

    // 子组件地图的跳转中心点方法

    jumpMap(LngLat) {

      // console.log('我是子组件方法')

      // console.log(this.jumpData)

      // console.log(LngLat)

      this.map.setView(LngLat, 18)

    },

    // 请求更新风场数据

    getParamsData() {

      console.log('getParamsData', this.windState)

      clearInterval(this.timer)

      this.timer = setInterval(() => {

        this.currentHour()

@@ -1580,16 +1282,6 @@
            this.chooseTimeInfo = false

            // console.log('else')

          }

          // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')

          // clearInterval(this.timer)

          if (this.windState === 1) {

            // this.ws.close()

            this.initData()

            // console.log('请求风场图')

          } else if (this.windState === 2) {

            this.windDir()

            // console.log('请求风向标')

          }

          setTimeout(() => {

            this.change(this.changeColor)

            this.times = 300

@@ -1597,12 +1289,29 @@
        }

      }, 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() {

      //   console.log('这是index传到map的经纬度')

      //   console.log(this.weidu)

      //   console.log(this.jingdu)

      var map = L.map('mapContent', {

      const map = L.map('mapContent', {

        minZoom: 2,

        maxZoom: 18,

        center: [this.weiduNew, this.jingduNew],

@@ -1615,14 +1324,39 @@
      L.tileLayer(

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

      ).addTo(map)

      // L.tileLayer(

      //   'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=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) { // 根据图层名称查找图层

      if (!this.map) {

        return null

      }

      const gisMap_layers = this.map._layers

      let layer = null

      for (const i in gisMap_layers) {

        if (gisMap_layers[i].options.id === layerName) {

          layer = gisMap_layers[i]

        }

      }

      return layer

    },

    // 更改不同的值区间

    change(index) {

      console.log('change', this.windState)

      this.changeColor = index

      var pr = ''

      switch (index) {

@@ -1658,37 +1392,13 @@
      this.sensorKey = pr

      // 请求设备坐标

      // this.toggleWindState()

      if (this.windState === 1) {

        this.initData()

      } else if (this.windState === 2) {

        this.windDir()

      }

      this.deviceMaker()

      this.openLayer()

    },

    // 请求风场图接口

    initData() {

      // console.log('加载风场')

      // const that = this

      // 请求更新风场数据

      //   console.log(this.monitorPointId)

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

      }

      this.deviceMaker()

      //   console.log('请求风场之前')

      // $.ajaxSettings.async = false

      // for (let i = 0; i < this.monitorPointIds.length; i++) {

      this.windData()

      // }

      this.deviceMaker()

    },

    // 风场图数据

    windData() {

@@ -1702,59 +1412,53 @@
        }

      })

        .then((res) => {

          // console.log('新风场数据')

          // console.log(res)

          // if (res.data[0][0].data.length === 0) {

          //   this.noneData = true

          // }

          // 生成风场实例

          // var data2 = res.data[0]

          // data2[1].header.parameterNumberName = 'northward_wind'

          // data2[0].header.parameterUnit = 'm.s-1'

          // data2[1].header.parameterUnit = 'm.s-1'

          // data2[0].header.dx = 0.00234842479

          // data2[1].header.dx = 0.00234842479

          // data2[0].header.dy = 0.0018464922

          // data2[1].header.dy = 0.0018464922

          // console.log(data2, 'data2')

          var velocityLayer = L.velocityLayer({

            displayValues: false, // 是否显示当前鼠标移动位置，风场信息

            displayOptions: {

              // 显示信息配置

              // velocityType: 'Global Wind',

              velocityType: 'GBR Wind',

              displayPosition: 'bottomleft',

              displayEmptyString: 'No wind data'

            },

            data: res.data[0], // 数据  格式可参照

            // data: data2,

            // 以下为控制参数，后面为默认值

            minVelocity: 0, // 粒子最小速度（ m/s ）

            maxVelocity: 8, // 粒子最大速度（ m/s ）

            velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )

            particleAge: 90, // 粒子在再生之前绘制的最大帧数

            lineWidth: 1.5, // 绘制粒子的线宽

            particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）

            frameRate: 15, // 每秒所需的帧数

            colorScale: [

              '#A2D839',

              '#7EB530',

              '#6E9F26',

              '#4E7522',

              '#345B1B',

              '#186303',

              '#175103',

              '#053F03'

            ]

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

          })

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

          // console.log('风场数据')

          // console.log(res.data[0])

          this.windALLData = []

          this.windALLData = res.data[0]

          this.openLayer()

        })

        .catch((err) => {

          console.log(err)

        })

    },

    openLayer() {

      const res = this.findLayer('wmsid')

      if (this.map.hasLayer(res)) {

        const res = this.findLayer('wmsid')

        this.map.removeLayer(res)

      }

      var velocityLayer = L.velocityLayer({

        id: 'wmsid',

        localMode: true,

        displayValues: true, // 是否显示当前鼠标移动位置，风场信息

        displayOptions: {

          // 显示信息配置

          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data'

        },

        data: this.windALLData, // 数据  格式可参照

        // 以下为控制参数，后面为默认值

        minVelocity: 0, // 粒子最小速度（ m/s ）

        maxVelocity: 8, // 粒子最大速度（ m/s ）

        velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )

        particleAge: 50, // 粒子在再生之前绘制的最大帧数

        lineWidth: 1.5, // 绘制粒子的线宽

        particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）

        frameRate: 15, // 每秒所需的帧数

        colorScale: [

          '#A2D839',

          '#7EB530',

          '#6E9F26',

          '#4E7522',

          '#345B1B',

          '#186303',

          '#175103',

          '#053F03'

        ]

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

      }, { collapsed: false, hideSingleBase: true })

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

    },

    // 将页码，及每页显示的条数以参数传递提交给后台

    alertData(n1, n2) {

@@ -2048,10 +1752,10 @@
.my-div-icon {

  font-size: 14px;

  text-align: center;

  padding-left: 20px;

  padding-top: 6px;

  padding-top: 13px;

  font-family: '微软雅黑';

  z-index: 10003;

  cursor: pointer !important;

  /* -webkit-transform-origin-x: 0; */

  /* -webkit-transform: scale(0.90); */

}

@@ -2062,6 +1766,8 @@
  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); */

}

@@ -2070,6 +1776,8 @@
}

.my-device {

  z-index: 999;

  pointer-events: none !important;

  cursor: pointer !important;

}

.windDir-icon {

  z-index: 10001;

@@ -2130,4 +1838,5 @@
  margin-left: -45px;

  margin-top: -40px;

}



</style>


 src/views/main/index.vue

@@ -154,27 +154,27 @@
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  components: {
    Map,
    LineChart,
    Charts,
    ReportForm,
    ReportForm
    // vLineChart
  },
  data() {
@@ -196,66 +196,35 @@
      jingdu: 0,
      weidu: 0,
      options: [],
      newRegion: [],
      newRegion: []
    }
  },
  computed: {
    changeCity() {
      return this.$store.state.regionCode
    },
    }
  },
  watch: {
    searchText(newVal, oldVal) {
      // console.log(oldVal)
      // console.log(newVal)
      // defaultData是站点名，包含设备
      // this.openeds="['1','2','3']"
      this.openeds = []
      let ke = 1
      if (newVal !== oldVal) {
        // let that = this
        const newDefaultData = [
          {
            name: '',
            devices: [],
          },
        ]
        let ke = 1
        this.defaultData.forEach((v, k, a) => {
          for (let i = 0; i < v.devices.length; i++) {
            // console.log(v.devices[i].name)
            if (v.devices[i].name.match(newVal)) {
              // console.log(v)
              // console.log('匹配')
              this.openeds.push((ke++).toString())
              // return value.devices[i].name.match(newVal)
              newDefaultData[k].name = this.defaultData[k].name
              newDefaultData[k].devices.push(v.devices[i])
              // this.$set(newDefaultData[k], 'name', this.defaultData[k].name)
              // this.$set(newDefaultData[k], 'devices', v.devices[i])
              // console.log(newDefaultData)
            } else {
              // console.log('不匹配')
              // return value.name.match(newVal)
        var arr = []
        for (var i = 0; i < this.defaultData.length; i++) {
          this.openeds.push((ke++).toString())
          for (var j = 0; j < this.defaultData[i].devices.length; j++) {
            if (this.defaultData[i].devices[j].name.indexOf(newVal) >= 0) {
              let a = []
              a = this.defaultData[i]
              a.devices = [this.defaultData[i].devices[j]]
              arr.push(a)
            }
            // console.log(newDefaultData)
          }
        })
        // const newDevices = this.defaultData.filter(value => {
        // const newDevices = this.defaultData.filter(value => {
        //   for (let i = 0; i < value.devices.length; i++) {
        //     console.log(value.devices[i].name)
        //     if (value.devices[i].name.match(newVal)) {
        //       console.log('匹配')
        //       this.openeds.push((ke++).toString())
        //       return value.devices[i].name.match(newVal)
        //       this.newDefaultData.push(value.devices[i].name.match(newVal))
        //     } else {
        //       console.log('不匹配')
        //       return value.name.match(newVal)
        //     }
        //   }
        // })
        // console.log(this.openeds)
        this.defaultData = newDefaultData
        }
        this.defaultData = arr
      }
      if (newVal === '') {
        this.defaultData = this.defaultDataMiddle
@@ -269,7 +238,7 @@
        // this.newRegion = newVal
        this.getRegionApi()
      }
    },
    }
  },
  beforeCreate() {
    // this.$store.state.regionCode = this.$route.params.cName
@@ -279,6 +248,7 @@
    this.getRegion()
  },
  methods: {

    // 百度经纬度转高德经纬度
    bd09togcj02(bd_lon, bd_lat) {
      var x_pi = (3.14159265358979324 * 3000.0) / 180.0
@@ -326,15 +296,15 @@
          device: items,
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude],
          items: [items.latitude, items.longitude]
        },
        query: {
          monitorPointInfo: JSON.stringify(item),
          device: JSON.stringify(items),
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude],
        },
          items: [items.latitude, items.longitude]
        }
      })
    },
    // 改变regionCode触发子组件重新请求五分钟接口功能
@@ -357,8 +327,8 @@
        method: 'get',
        params: {
          organizationId: this.organizationId,
          regionCode: this.$store.state.regionCode,
        },
          regionCode: this.$store.state.regionCode
        }
      })
        .then((res) => {
          console.log(res, '123')
@@ -415,8 +385,8 @@
        url: '/organization/getMapPath',
        method: 'get',
        params: {
          organizationId: this.$store.state.orgId,
        },
          organizationId: this.$store.state.orgId
        }
      })
        .then((res) => {
          // console.log('请求主页getMapPath成功')
@@ -426,19 +396,19 @@
          for (let i = 0; i < data.length; i++) {
            this.options.push({
              value: data[i].provinceCode,
              label: data[i].provinceName,
              label: data[i].provinceName
            })
            this.options[i].children = []
            for (let j = 0; j < data[i].cities.length; j++) {
              this.options[i].children.push({
                value: data[i].cities[j].cityCode,
                label: data[i].cities[j].cityName,
                label: data[i].cities[j].cityName
              })
              this.options[i].children[j].children = []
              for (let k = 0; k < data[i].cities[j].areas.length; k++) {
                this.options[i].children[j].children.push({
                  value: data[i].cities[j].areas[k].areaCode,
                  label: data[i].cities[j].areas[k].areaName,
                  label: data[i].cities[j].areas[k].areaName
                })
              }
            }
@@ -449,7 +419,7 @@
          console.log(err)
        })
      // console.log('请求Region结束')
    },
    }
    // 请求地图数据
    // getMap() {
    //   axios.get('http://47.99.64.149:8080/screen_api_v2/screen/newMap-page?areaCode=130900&accountId=223')
@@ -461,7 +431,7 @@
    //       console.log('失败')
    //     })
    // }
  },
  }
}
</script>