fix:查询修改和表格添加

quanyawei

2023-10-13 64b642cfbe4f34706ed40af77e51079ddf919d54

 src/components/Wind/Map.vue

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

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

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

      windALLData: []

      windJsonData: []

    }

  },

  computed: {

@@ -477,6 +477,13 @@
    },

    regionCode(newCode, oldCode) {

      this.timerKey = newCode // 用于监听code变化重新渲染子组件

    },

    windJsonData(newCode, oldCode) {

      this.$nextTick(() => {

        console.log('111')



        this.canvasWind(newCode)

      })

    }

  },

  mounted() {

@@ -498,14 +505,9 @@
    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() {

@@ -621,23 +623,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) => {

@@ -658,16 +656,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

            }

@@ -682,7 +676,7 @@
          // console.log('下边点击进来了', greenInfo, 'index')

        }

        that.times = 1

        that.getParamsData()

        that.getParamsData(true)

      }

      // 鼠标移入移出事件

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

@@ -722,6 +716,12 @@
    },

    // 当前小时默认值

    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

@@ -767,12 +767,18 @@
    },

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

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

@@ -786,7 +792,6 @@
      }).then((data) => {

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

        console.log(data, 'tata')

        that.loading = false

        this.markDeviceSite(data)

      })

    },

@@ -796,9 +801,9 @@
      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)))

@@ -1099,169 +1104,122 @@
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

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

          iconSize: [60, 60],

          iconAnchor: [30, 48],

          className: 'my-device'

        })



        // 添加标记到地图

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

        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)

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

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

        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)

            })

        })

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

        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', {

    getMarkerInfor(data, marker) {

      this.$request({

        url: '/govMonitorPoint/queryStateControlStation',

        url: '/historyFiveMinutely/queryPopDataByMac',

        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002'

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr

        }

      })

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

          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

    },

    // 切换风场风向状态

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

    },

    // 获得父组件改变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) {

      this.map.setView(LngLat, 18)

    },

    // 请求更新风场数据

    getParamsData() {

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

    getParamsData(isFirst = true) {

      clearInterval(this.timer)

      this.timer = setInterval(() => {

        this.currentHour()

@@ -1282,63 +1240,17 @@
            // 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) { // 根据图层名称查找图层

      if (!this.map) {

@@ -1353,9 +1265,39 @@
      }

      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)

      this.changeColor = index

      var pr = ''

      switch (index) {

@@ -1391,13 +1333,29 @@
      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()

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

@@ -1411,24 +1369,21 @@
        }

      })

        .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',

@@ -1436,12 +1391,13 @@
          displayPosition: 'bottomleft',

          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, // 每秒所需的帧数

@@ -1456,8 +1412,11 @@
          '#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) {

@@ -1533,6 +1492,67 @@
        this.turnImg = require('@/assets/images/regionalOverview/putAway.png')

      }

      this.showOrHidden = !this.showOrHidden

    },

    // 国控站经纬度

    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

@@ -1751,10 +1771,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); */

}

@@ -1765,8 +1785,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); */

}

@@ -1775,8 +1793,6 @@
}

.my-device {

  z-index: 999;

  pointer-events: none !important;

  cursor: pointer !important;

}

.windDir-icon {

  z-index: 10001;

@@ -1837,5 +1853,4 @@
  margin-left: -45px;

  margin-top: -40px;

}



</style>