fix: 国控站

quanyawei

2024-11-15 a19b20afeacf84c1c743c76b5018bcfbddac2270

 src/components/Wind/Map.vue

@@ -28,7 +28,20 @@
          alt=""

          @click="turnState"

        >

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

        <span class="text_Time">

          <el-date-picker

            v-model="selectData"

            popper-class="tpc"

            value-format="yyyy-MM-dd HH"

            format="yyyy-MM-dd HH"

            :clearable="false"

            :editable="false"

            type="datetime"

            :picker-options="pickerOptions"

            placeholder="选择日期时间"

            @change="changeData"

          />

        </span>

        <img

          class="drop-icon"

          :src="turnImg"

@@ -396,6 +409,11 @@
      timerKey: '', // 用于重新渲染子组件

      map: null,

      code: [],

      pickerOptions: {

        disabledDate: (time) => {

          return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000

        },

      },

      latlng: [],

      noneData: false,

      params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],

@@ -432,7 +450,7 @@
      // 总条数，根据接口获取数据长度(注意：这里不能为空)

      totalCount: 0,

      // 个数选择器（可修改）

      pageSizes: [10, 20, 30, 40],

      pageSizes: [10, 50, 100, 200],

      // 默认每页显示的条数（可修改）

      PageSize: 20,

      factorOptions: [

@@ -507,6 +525,7 @@
      turnImg: require('@/assets/images/regionalOverview/dropDown.png'),

      showOrHidden: true,

      dateFormat: '',

      selectData: new Date(),

      alarmTableVisible: false,

      chooseTimeInfo: false, // 是否选择了时间点

      chooseTime: false,

@@ -517,7 +536,8 @@
      clickmac: '',

      childerItem: {},

      farterItem: {},

      indexsLaber: 0

      indexsLaber: 0,

      time: new Date()

    }

  },

  computed: {

@@ -580,10 +600,10 @@
  methods: {

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

    getDayXQ (day) {

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

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

      var rq = '' // 日期

      if (day === 'today') {

        rq = this.newData(0)

        rq = this.newData(0) // 今天日期

      } else if (day === 'yesterday') {

        days = (days + 7 - 1) % 7

        rq = this.newData(-1) // 昨天日期

@@ -672,6 +692,7 @@
              inText2.innerHTML = times + ':00'

              this.chooseTimeInfo = true // 选择时间点

              this.chooseTime = true // 选择时间点

              console.log('times', times)

              if ((i + 1) / 24 < 1) {

                this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'

              } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {

@@ -705,6 +726,7 @@
              inText2.innerHTML = times + ':00'

              this.chooseTimeInfo = true // 选择时间点

              this.chooseTime = true // 选择时间点

              console.log('times', times)

              if (i / 24 < 1) {

                this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'

              } else if (i / 24 < 2 && i / 24 >= 1) {

@@ -832,14 +854,13 @@
        }

      }).then(data => {

        this.markDeviceSite(data)

        this.stateControlStation()// 遍历国控站位置

      })

    },

    // 标记设备点

    markDeviceSite (data) {

      var keyData = data.data.devices

      this.keyData = data.data.devices

      // 遍历国控站位置

      // this.stateControlStation()

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

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

      this.keys = []

@@ -1429,6 +1450,10 @@
              bgColorList.tvoccolorbg = '#999999'

              break

            }

            case data === '-': {

              bgColorList.tvoccolorbg = '#999999'

              break

            }

            case data === 0: {

              bgColorList.tvoccolorbg = '#688fb1'

              break

@@ -1549,32 +1574,15 @@
          console.log('level', level)

          if (deviceDetails.a01008) {

            var windDirs = dushu === '-' ? 0 : Number(dushu)

            console.log('windDirs', windDirs)

            WWindUtil.windValueFormat(windDirs)

            console.log('windDirs', WWindUtil.windValueFormat(windDirs))

            windDeg = windDirs

            windTip = 'inline'

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

              windDir = '-'

              windTip = 'none'

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

              windDir = '东北风'

              windTip = 'inline'

            } else if (windDirs === 90) {

              windDir = '东风'

              windTip = 'inline'

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

              windDir = '东南风'

              windTip = 'inline'

            } else if (windDirs === 180) {

              windDir = '南风'

              windTip = 'inline'

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

              windDir = '西南风'

              windTip = 'inline'

            } else if (windDirs === 270) {

              windDir = '西风'

              windTip = 'inline'

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

              windDir = '西北风'

            } else {

              windDir = WWindUtil.windValueFormat(windDirs)

              windTip = 'inline'

            }

          }

@@ -1985,6 +1993,22 @@
      // })

      window.map = map

    },

    changeData (val) {

      console.log(val)

      this.nyr = val + ':00'

      const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00'))



      console.log(date)

      this.chooseTime = true

      // var p1 = document.querySelector('.p1')

      // var p2 = document.querySelector('.p2')

      // var p3 = document.querySelector('.p3')

      // this.time = date

      // p3.innerHTML = this.getDayXQ('today')

      // p2.innerHTML = this.getDayXQ('yesterday')

      // p1.innerHTML = this.getDayXQ('beforeYea')

      this.initData()

    },

    // 更改不同的值区间

    change (index) {

      this.changeColor = index

@@ -2187,17 +2211,14 @@
    stateControlStation () {

      // this.$axios.get('monitorPoint/queryStateControlStation', {

      this.$request({

        url: '/govMonitorPoint/queryStateControlStation',

        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002'

        }

        url: '/govMonitorPoint/getGovMonitorPoints',

        method: 'get'

      })

        .then(res => {

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

          // console.log(res)

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

          console.log(res)

          var gkData = res.data

          let _this = this

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

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

            var glat = gkData[i].latitude

@@ -2205,23 +2226,170 @@
            var gIcon = L.icon({

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

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

              iconSize: [55, 55],

              iconAnchor: [13, 21],

              iconSize: [60, 60],

              iconAnchor: [30, 48],

              className: 'my-device'

            })

            // 添加标记到地图

            L.marker([glat, glng], {

            let marker = L.marker([glat, glng], {

              icon: gIcon

            }).addTo(group)

            var myIcon = L.divIcon({

              html: gkData[i].data,

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

              iconSize: 30

            marker.inforData = gkData[i]

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

              console.log('Marker clicked!', e.target)

              _this.handleguoClick(gkData[i], e.target)

            })

            L.marker([glat, glng], {

              icon: myIcon

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

        })

    },

    handleguoClick (data, marker) {

      this.clickmac = ''

      this.childerItem = {}

      this.farterItem = {}

      this.indexsLaber = 0

      this.clickmac = marker.inforData.guid

      this.childerItem = marker.inforData

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

      this.defaultData.forEach(item => {

        if (item.devices) {

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

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

              this.farterItem = item

              this.indexsLaber = index

            }

          })

        }

      })

      this.$request({

        url: '/historyFiveMinutely/historyAqi',

        method: 'get',

        params: {

          guid: data.guid,

        }

      })

        .then(res => {

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

            var datafalse = '暂无数据'

            marker.bindPopup(datafalse).openPopup()

            return

          }

          this.childerItem.name = marker.inforData.name

          let colorliststyleBgColor = this.styleBgColor(res.data[0])

          console.log('colorliststyleBgColor', colorliststyleBgColor)

          let deviceDetails = _.cloneDeep(res.data[0])

          deviceDetails.name = marker.inforData.name

          deviceDetails.a99054 = '-'

          // eslint-disable-next-line no-unused-vars

          for (let key in deviceDetails) {

            if (deviceDetails[key] === null) {

              deviceDetails[key] = '-'

            }

          }

          console.log('deviceDetails', deviceDetails)

          let htmlClassName = 'mypopupNoWind'

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

                ${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(String(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(String(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(String(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(String(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(String(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(String(deviceDetails.a05024))}

              </div>

            </div>

          </div>        
        </div>`



          marker.bindPopup(html, { className: htmlClassName }).openPopup()

        })

        .catch(err => {

          console.log(err)

@@ -2454,11 +2622,36 @@
  margin-top: 9px;

  margin-left: 10px;

}



.text_Time {

  float: left;

  margin-left: 37px;

  .el-date-editor{

    width: 145px!important;

    .el-input__prefix{

      display: none!important;

    }

    .el-input__inner{

      cursor: pointer;

      font-size: 18px;

      color: #fff;

      padding: 0px!important;

      border: none;

      background: inherit;



    }

  }

}

.tpc{

  left: unset!important;

  right: 60px;

}

.tpc .el-time-spinner__wrapper {

  width:100% !important;

}

.tpc .el-scrollbar:nth-of-type(2) {

  display: none !important;

}



.my-div-icon {

  font-size: 14px;

  text-align: center;