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

quanyawei

2023-10-25 3d47b03fb107e73f96b631c98ba1e275576da064

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

 src/components/Wind/Map.vue

@@ -5,9 +5,7 @@
    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"

@@ -15,7 +13,8 @@
        class="left"

        :class="{ click: changeColor === index }"

        @click="change(index)"

      >{{ item }}</span>

        >{{ item }}</span

      >

      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->

      <span class="right">{{ times }}秒</span>

      <span class="dropDown">

@@ -24,14 +23,9 @@
          :src="require('@/assets/images/regionalOverview/realTimeImg.png')"

          alt=""

          @click="turnState"

        >

        />

        <span class="text_Time">{{ dateFormat }}</span>

        <img

          class="drop-icon"

          :src="turnImg"

          alt=""

          @click="turnState"

        >

        <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />

      </span>

    </div>

    <div class="topDate" style="height: 60px">

@@ -348,6 +342,7 @@
    jingdu: Number,

    monitorPointId: Number,

    monitorPointIds: Array,

    defaultData: Array,

  },

  data() {

    return {

@@ -474,6 +469,10 @@
      timeInfo: '', // 选择的时间

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

      windJsonData: [],

      clickmac: '',

      childerItem: {},

      farterItem: {},

      indexsLaber: 0

    }

  },

  computed: {

@@ -481,7 +480,6 @@
  },

  watch: {

    dateValue(n, o) {

      // console.log(n)

      // this.newDate()

    },

    regionCode(newCode, oldCode) {

@@ -489,8 +487,6 @@
    },

    windJsonData(newCode, oldCode) {

      this.$nextTick(() => {

        console.log('111')



        this.canvasWind(newCode)

      })

    },

@@ -509,6 +505,7 @@


    // 事件代理

    this.eventProxy()

    window.deviceDetail = this.deviceDetail

  },

  created() {

    const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度

@@ -522,16 +519,12 @@
  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer)

      // console.log('timer定时器销毁成功')

    }

    if (this.timer2) {

      // console.log(this.timer2)

      clearInterval(this.timer2)

      // console.log('timer2定时器销毁成功')

    }

    // 离开页面时关闭websocket

    if (this.ws) {

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

      this.ws.close()

    }

  },

@@ -683,7 +676,7 @@
              lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'

            }

          }

          // console.log('下边点击进来了', greenInfo, 'index')



        }

        that.times = 1

        that.getParamsData(true)

@@ -691,36 +684,28 @@
      // 鼠标移入移出事件

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

        lis[i].onmouseenter = function () {

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

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

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

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

          mouseDiv.style.display = 'block'

          var times = (i - 0 + 1) % 24

          times = times > 9 ? times : '0' + times

          inText.innerHTML = times + ':00'

          // console.log(mouseDiv)

        }

        lis[i].onmouseleave = function () {

          mouseDiv.style.display = 'none'

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

        }

      }

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

        timeLis[i].onmouseenter = function () {

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

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

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

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

          mouseDiv.style.display = 'block'

          var times = i % 24

          times = times > 9 ? times : '0' + times

          inText.innerHTML = times + ':00'

          // console.log(mouseDiv)

        }

        timeLis[i].onmouseleave = function () {

          mouseDiv.style.display = 'none'

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

        }

      }

    },

@@ -753,7 +738,6 @@
          : aData.getMonth() + 1

      var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      this.currentDate = aData.getFullYear() + '-' + month + '-' + date

      // console.log(this.currentDate)

      this.dateValue = [this.currentDate, this.currentDate]

    },

    // 报警弹窗移入

@@ -802,7 +786,6 @@
        },

      })

.then((data) => {

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

        this.markDeviceSite(data)

      })

    },

@@ -1132,7 +1115,6 @@
          icon: blueIcon,

        })

        groupIcon.addLayer(iconMarker)

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

        var myIcon = L.divIcon({

          html: this.keys[i],

          className: 'my-div-icon',

@@ -1141,7 +1123,7 @@
        })



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

        TexteMarker.vuecontext = this

        TexteMarker.inforData = keyData[i]

        groupText.addLayer(TexteMarker)

        const _this = this

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

@@ -1158,10 +1140,8 @@
        //   this.bindPopup().closePopup()

        // })

      }

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

    },

    styleBgColor(keyName) {

      console.log('keyName', keyName)

      let bgColorList = {

        pm25colorbg: '',

        pm10colorbg: '',

@@ -1447,7 +1427,43 @@
      }

      return bgColorList

    },

    deviceDetail () {

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

      this.monitorPointInfo = this.farterItem



      this.$router.push({

        name: 'deviceDetail',

        params: {

          monitorPointInfo: this.farterItem,

          device: this.clickmac,

          macName: this.clickmac,

          indexs: this.indexsLaber,

          items: [this.clickmac.latitude, this.clickmac.longitude]

        },

        query: {

          monitorPointInfo: JSON.stringify(this.farterItem),

          device: JSON.stringify(this.clickmac),

          macName: this.clickmac,

          indexs: this.indexsLaber,

          items: [this.clickmac.latitude, this.clickmac.longitude]

        }

      })

    },

    handleClick(data, marker) {

      this.clickmac = ''

      this.childerItem = {}

      this.farterItem = {}

      this.indexsLaber = 0

      this.clickmac = marker.inforData.mac

      this.childerItem = marker.inforData

      this.defaultData.forEach(item => {

        item.devices.forEach((dev, index) => {

          if (dev.mac === marker.inforData.mac) {

            this.farterItem = item

            this.indexsLaber = index

          }

        })

      })

      this.$request({

        url: '/historyFiveMinutely/queryFiveDataByMac',

        method: 'get',

@@ -1458,7 +1474,6 @@
        },

      })

        .then((res) => {

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

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

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

            marker.bindPopup(datafalse)

@@ -1470,15 +1485,9 @@
          let deviceDetails = res.data

          let windDeg = 0

          let windDir = ''

          let dushu =

            !deviceDetails.a01008 === '-'

              ? JSON.parse(deviceDetails.a01008)

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

.toFixed(0)

              : '-'

          let level =

            !deviceDetails.a01007 === '-'

              ? WWindUtil.windFormatLevel(deviceDetails.a01007)

              : '-'

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

          console.log('level', level)

          if (deviceDetails.a01008) {

            var windDirs = Number(

@@ -1507,7 +1516,7 @@
          // 请求数据更新弹框内容

          let html = ` <div data-reactroot="" class="marker_maptip">

          <div class="marker_title_1nQ">

            <span>设备详情</span>

            <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>

          </div>

          <div class="marker_firstline_2WH">

            <div class="marker_citypart_keg">

@@ -1517,8 +1526,7 @@
            <div class="marker_indexpart_2UI">

              <div

                class="marker_indexname_3TP"

                style="color: black;background:${

                  colorliststyleBgColor.tvoccolorbg

                style="color: black;background:${colorliststyleBgColor.tvoccolorbg

                }"

              >

                TVOC

@@ -1532,8 +1540,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${

                  colorliststyleBgColor.pm25colorbg

                style="color: black;background:${colorliststyleBgColor.pm25colorbg

                } "

              >

                PM2.5

@@ -1545,8 +1552,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${

                  colorliststyleBgColor.pm10colorbg

                style="color: black;background:${colorliststyleBgColor.pm10colorbg

                }"

              >

                PM10

@@ -1558,8 +1564,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${

                  colorliststyleBgColor.so2colorbg

                style="color: black;background:${colorliststyleBgColor.so2colorbg

                }"

              >

                SO2

@@ -1571,8 +1576,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${

                  colorliststyleBgColor.no210colorbg

                style="color: black;background:${colorliststyleBgColor.no210colorbg

                }"

              >

                NO2

@@ -1584,8 +1588,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${

                  colorliststyleBgColor.cocolorbg

                style="color: black;background:${colorliststyleBgColor.cocolorbg

                }"

              >

                CO

@@ -1597,8 +1600,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black; background:${

                  colorliststyleBgColor.o3colorbg

                style="color: black; background:${colorliststyleBgColor.o3colorbg

                }"

              >

                O3

@@ -1611,14 +1613,14 @@
          <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)"

              <img style="width: 40px;height: 40px;position: absolute;left: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg)"

                src=${this.compassDirection}

              >

            </div>

            <div class='windInfor'>

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

              <div>风速: ${deviceDetails.a01007}m/s</div>

              <div>等级: ${level}</div>

              <div>等级: ${level}级</div>

            </div>

          </div>