fix: bug修改

quanyawei

2024-06-17 afb9e7c8c9865be6a73d19e35819b5aa6b8afbdd

 src/components/Wind/Map.vue

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

@@ -13,8 +18,7 @@
        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">

@@ -23,13 +27,37 @@
          :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" />

        >

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

          alt=""

          @click="turnState"

        >

      </span>

    </div>

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

      <div id="eventPro" class="jdt">

    <div

      class="topDate"

      style="height: 60px"

    >

      <div

        id="eventPro"

        class="jdt"

      >

        <div class="mouseDiv">

          <span class="inText" />

          <div class="sjDiv" />

@@ -111,7 +139,10 @@
        <li />

        <li />

      </div>

      <div class="timeDiv" style="position: relative">

      <div

        class="timeDiv"

        style="position: relative"

      >

        <ul id="timeUl">

          <li style="width: 0.83%" />

          <li />

@@ -225,7 +256,11 @@
        </div>

      </div>

    </div>

    <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />

    <regional-overview

      :key="timerKey"

      :map="map"

      :show-flag="showOrHidden"

    />

    <div

      :style="{ background: 'url(' + bg + ') no-repeat' }"

      class="buttom-left"

@@ -248,7 +283,10 @@
            end-placeholder="结束日期"

            value-format="yyyy-MM-dd"

          />

          <el-select v-model="factorValue" placeholder="选择因子">

          <el-select

            v-model="factorValue"

            placeholder="选择因子"

          >

            <el-option

              v-for="item in factorOptions"

              :key="item.value"

@@ -256,7 +294,10 @@
              :value="item.value"

            />

          </el-select>

          <el-select v-model="alartValue" placeholder="选择报警类型">

          <el-select

            v-model="alartValue"

            placeholder="选择报警类型"

          >

            <el-option

              v-for="item in alertOptions"

              :key="item.value"

@@ -264,7 +305,10 @@
              :value="item.value"

            />

          </el-select>

          <el-button type="primary" @click="alertData(PageSize, currentPage)">

          <el-button

            type="primary"

            @click="alertData(PageSize, currentPage)"

          >

            查询

          </el-button>

        </div>

@@ -284,8 +328,16 @@
          width="50"

          align="center"

        />

        <el-table-column property="alarm_time" label="报警时间" width="150" />

        <el-table-column property="deviceName" label="站点名称" width="200" />

        <el-table-column

          property="alarm_time"

          label="报警时间"

          width="150"

        />

        <el-table-column

          property="deviceName"

          label="站点名称"

          width="200"

        />

        <el-table-column

          property="index"

          label="因子"

@@ -313,8 +365,14 @@
        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

      />

      <div slot="footer" class="dialog-footer">

        <el-button size="mini" @click="alarmTableVisible = false">

      <div

        slot="footer"

        class="dialog-footer"

      >

        <el-button

          size="mini"

          @click="alarmTableVisible = false"

        >

          关 闭

        </el-button>

      </div>

@@ -333,7 +391,7 @@
import { WWindUtil } from '@/components/Wind/WRatingArr.js'

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

import { mapGetters } from 'vuex'

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

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

export default {

  components: { RegionalOverview },

  props: {

@@ -342,7 +400,7 @@
    jingdu: Number,

    monitorPointId: Number,

    monitorPointIds: Array,

    defaultData: Array,

    defaultData: Array

  },

  data () {

    return {

@@ -351,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'],

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

      totalCount: 0,

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

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

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

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

      PageSize: 20,

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

      showOrHidden: true,

      dateFormat: '',

      selectData: new Date(),

      alarmTableVisible: false,

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

      chooseTime: false,

@@ -472,11 +536,12 @@
      clickmac: '',

      childerItem: {},

      farterItem: {},

      indexsLaber: 0

      indexsLaber: 0,

      time: new Date()

    }

  },

  computed: {

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

    ...mapGetters(['regionCode'])

  },

  watch: {

    dateValue (n, o) {

@@ -489,13 +554,14 @@
      this.$nextTick(() => {

        this.canvasWind(newCode)

      })

    },

    }

  },

  mounted () {

    this.currentHour()

    this.$Bus.$on(

      'alarmTableVisible',

      (res) => (

      res => (

        // eslint-disable-next-line no-sequences

        (this.alarmTableVisible = res),

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

      )

@@ -508,6 +574,9 @@
    window.deviceDetail = this.deviceDetail

  },

  created () {

    if (this.$store.state.orgId === 72) {

      this.changeColor = 1

    }

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

    this.jingduNew = newLL[1]

    this.weiduNew = newLL[0]

@@ -531,11 +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) // 昨天日期

@@ -603,7 +671,7 @@
      p1.innerHTML = this.getDayXQ('beforeYea')

      var greenInfo = 0

      var that = this

      ul.onclick = (e) => {

      ul.onclick = e => {

        var target = e.target

        if (target.tagName.toLowerCase() === 'li') {

          // 给所有的li颜色设为初始值

@@ -624,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) {

@@ -641,7 +710,7 @@
        that.getParamsData(true)

      }

      // timeUl绑定点击事件

      timeUl.onclick = (e) => {

      timeUl.onclick = e => {

        // 给所有的li颜色设为初始值

        var target = e.target

        if (target.tagName.toLowerCase() === 'li') {

@@ -657,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) {

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

            }

          }



        }

        that.times = 1

        that.getParamsData(true)

@@ -766,9 +835,8 @@
          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container)

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

            'leaflet-layer'

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

@@ -782,12 +850,11 @@
          organizationId: this.$store.state.orgId,

          regionCode: this.$store.state.regionCode,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      }).then(data => {

        this.markDeviceSite(data)

      })

        .then((data) => {

          this.markDeviceSite(data)

        })

    },

    // 标记设备点

    markDeviceSite (data) {

@@ -795,10 +862,8 @@
      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) {

@@ -808,16 +873,13 @@
        } 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'))

@@ -830,7 +892,7 @@
        // 对比各个key中的标准数据，标记展示不同的颜色

        var colorNum = 7

        if (keyData[i].a34002) {

          var data = Math.floor(JSON.parse(keyData[i].a34002))

          let data = Math.floor(JSON.parse(keyData[i].a34002))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -868,7 +930,7 @@
              break

          }

        } else if (keyData[i].a34004) {

          var data = Math.floor(JSON.parse(keyData[i].a34004))

          let data = Math.floor(JSON.parse(keyData[i].a34004))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -906,7 +968,7 @@
              break

          }

        } else if (keyData[i].a21026) {

          var data = Math.floor(JSON.parse(keyData[i].a21026))

          let data = Math.floor(JSON.parse(keyData[i].a21026))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -944,9 +1006,8 @@
              break

          }

        } else if (keyData[i].a21004) {

          var data = Math.floor(

            Math.floor(JSON.parse(keyData[i].a21004)

              .toFixed(0))

          let data = Math.floor(

            Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))

          )

          switch (true) {

            case data < 0: {

@@ -985,8 +1046,7 @@
              break

          }

        } else if (keyData[i].a21005) {

          var data = JSON.parse(keyData[i].a21005)

            .toFixed(3)

          let data = JSON.parse(keyData[i].a21005).toFixed(3)

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1024,7 +1084,7 @@
              break

          }

        } else if (keyData[i].a05024) {

          var data = Math.floor(JSON.parse(keyData[i].a05024))

          let data = Math.floor(JSON.parse(keyData[i].a05024))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1062,8 +1122,7 @@
              break

          }

        } else if (keyData[i].a99054) {

          var data = JSON.parse(keyData[i].a99054)

            .toFixed(3)

          let data = JSON.parse(keyData[i].a99054).toFixed(3)

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1107,19 +1166,19 @@
          // 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)

        var myIcon = L.divIcon({

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

@@ -1145,17 +1204,18 @@
      let bgColorList = {

        pm25colorbg: '',

        pm10colorbg: '',

        so2colorbg: '', //二氧化硫

        no210colorbg: '', //二氧化氮

        cocolorbg: '', //一氧化碳

        o3colorbg: '', //臭氧

        tvoccolorbg: '', //TVOC

        so2colorbg: '', // 二氧化硫

        no210colorbg: '', // 二氧化氮

        cocolorbg: '', // 一氧化碳

        o3colorbg: '', // 臭氧

        tvoccolorbg: '' // TVOC

      }



      let data = ''

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

      for (let i in keyName) {

        if (i === 'a34002') {

          data = Math.floor(JSON.parse(keyName.a34002))

          data = Math.floor(JSON.parse(keyName.a34002) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.pm10colorbg = '#999999'

@@ -1193,7 +1253,7 @@
              break

          }

        } else if (i === 'a34004') {

          data = Math.floor(JSON.parse(keyName.a34004))

          data = Math.floor(JSON.parse(keyName.a34004) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.pm25colorbg = '#999999'

@@ -1231,7 +1291,7 @@
              break

          }

        } else if (i === 'a21026') {

          data = Math.floor(JSON.parse(keyName.a21026))

          data = Math.floor(JSON.parse(keyName.a21026) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.so2colorbg = '#999999'

@@ -1269,8 +1329,9 @@
              break

          }

        } else if (i === 'a21004') {

          data = Math.floor(Math.floor(JSON.parse(keyName.a21004)

            .toFixed(0)))

          data = Math.floor(

            Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))

          )

          switch (true) {

            case data < 0: {

              bgColorList.no210colorbg = '#999999'

@@ -1308,8 +1369,7 @@
              break

          }

        } else if (i === 'a21005') {

          data = JSON.parse(keyName.a21005)

            .toFixed(3)

          data = JSON.parse(keyName.a21005 || 0).toFixed(3)

          switch (true) {

            case data < 0: {

              bgColorList.cocolorbg = '#999999'

@@ -1347,7 +1407,7 @@
              break

          }

        } else if (i === 'a05024') {

          data = Math.floor(JSON.parse(keyName.a05024))

          data = Math.floor(JSON.parse(keyName.a05024) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.o3colorbg = '#999999'

@@ -1385,8 +1445,7 @@
              break

          }

        } else if (i === 'a99054') {

          data = JSON.parse(keyName.a99054)

            .toFixed(3)

          data = JSON.parse(keyName.a99054 || 0).toFixed(3)

          switch (true) {

            case data < 0: {

              bgColorList.tvoccolorbg = '#999999'

@@ -1428,24 +1487,25 @@
      return bgColorList

    },

    deviceDetail () {

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

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

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

      this.monitorPointInfo = this.farterItem



      this.$router.push({

        name: 'deviceDetail',

        params: {

          monitorPointInfo: this.farterItem,

          device: this.clickmac,

          device: this.childerItem,

          macName: this.clickmac,

          indexs: this.indexsLaber,

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

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

        },

        query: {

          monitorPointInfo: JSON.stringify(this.farterItem),

          device: JSON.stringify(this.clickmac),

          device: JSON.stringify(this.childerItem),

          macName: this.clickmac,

          indexs: this.indexsLaber,

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

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

        }

      })

    },

@@ -1456,13 +1516,16 @@
      this.indexsLaber = 0

      this.clickmac = marker.inforData.mac

      this.childerItem = marker.inforData

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

      this.defaultData.forEach(item => {

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

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

            this.farterItem = item

            this.indexsLaber = index

          }

        })

        if (item.devices) {

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

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

              this.farterItem = item

              this.indexsLaber = index

            }

          })

        }

      })

      this.$request({

        url: '/historyFiveMinutely/queryFiveDataByMac',

@@ -1470,50 +1533,58 @@
        params: {

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

        .then(res => {

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

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

            marker.bindPopup(datafalse)

              .openPopup()

            marker.bindPopup(datafalse).openPopup()

            return

          }

          this.childerItem.name = res.data.name

          let colorliststyleBgColor = this.styleBgColor(res.data)

          console.log('colorliststyleBgColor', colorliststyleBgColor)

          let deviceDetails = res.data

          let deviceDetails = _.cloneDeep(res.data)

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

          for (let key in deviceDetails) {

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

              deviceDetails[key] = '-'

            }

          }

          console.log('deviceDetails', deviceDetails)

          let windTip = 'inline'

          let windDeg = 0

          let windDir = ''

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

            .toFixed(0)

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

          let dushu =

            deviceDetails.a01008 === '-'

              ? '-'

              : JSON.parse(deviceDetails.a01008).toFixed(0)

          let levelNumber =

            deviceDetails.a01007 === '-'

              ? '0.0'

              : Number(deviceDetails.a01007).toFixed(1)

          let level =

            deviceDetails.a01007 === '0.0'

              ? '-'

              : WWindUtil.WindtoLevel(levelNumber).name

          console.log('level', level)

          if (deviceDetails.a01008) {

            var windDirs = Number(

              deviceDetails.a01008.substr(0, deviceDetails.a01008.length - 1)

            )

            // console.log(windDirs)

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

            WWindUtil.windValueFormat(windDirs)

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

            windDeg = windDirs

            windTip = 'inline'

            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 = '西北风'

              windDir = '-'

              windTip = 'none'

            } else {

              windDir = WWindUtil.windValueFormat(windDirs)

              windTip = 'inline'

            }

          }

          // 请求数据更新弹框内容

          let htmlClassName = 'mypopup'

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

          <div class="marker_title_1nQ">

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

@@ -1526,8 +1597,9 @@
            <div class="marker_indexpart_2UI">

              <div

                class="marker_indexname_3TP"

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

            }"

                style="color: black;background:${

  colorliststyleBgColor.tvoccolorbg

}"

              >

                TVOC

              </div>

@@ -1540,8 +1612,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

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

            } "

                style="color: black;background:${

  colorliststyleBgColor.pm25colorbg

} "

              >

                PM2.5

              </div>

@@ -1552,8 +1625,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

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

            }"

                style="color: black;background:${

  colorliststyleBgColor.pm10colorbg

}"

              >

                PM10

              </div>

@@ -1564,8 +1638,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

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

            }"

                style="color: black;background:${

  colorliststyleBgColor.so2colorbg

}"

              >

                SO2

              </div>

@@ -1576,8 +1651,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

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

            }"

                style="color: black;background:${

  colorliststyleBgColor.no210colorbg

}"

              >

                NO2

              </div>

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

              <div

                class="marker_itemname_Wq5"

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

            }"

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

              >

                CO

              </div>

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

              <div

                class="marker_itemname_Wq5"

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

            }"

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

              >

                O3

              </div>

@@ -1613,52 +1687,143 @@
          <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: 51%;top: 49%;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);display: ${windTip};"

                src=${this.compassDirection}

              >

            </div>

            <div class='windInfor'>

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

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

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

              <div v-if="false">风向: ${windDir} ( ${dushu} ° )</div>

              <div>风速: ${levelNumber} m/s</div>

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

            </div>

          </div>

         

        </div>`

          marker.bindPopup(html, { className: 'mypopup' })

            .openPopup()

          if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') {

            htmlClassName = 'mypopupNoWind'

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

          <div class="marker_title_1nQ">

            <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</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>`

          }

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

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

    },

    handleCutZero (data) {



      let num = data.substring(0, data.indexOf(".") + 4);

      //拷贝一份 返回去掉零的新串

      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

          // 如果newstr末尾有0

          if (

            newstr.lastIndexOf('0') > -1 &&

            newstr.substr(newstr.length - 1, 1) === 0

          ) {

            let k = newstr.lastIndexOf('0')

            //如果小数点后只有一个0 去掉小数点

            // 如果小数点后只有一个0 去掉小数点

            if (newstr.charAt(k - 1) === '.') {

              return newstr.substring(0, k - 1)

            } else {

              //否则 去掉一个0

              // 否则 去掉一个0

              newstr = newstr.substring(0, k)

            }

          } else {

            //如果末尾没有0

            // 如果末尾没有0

            return newstr

          }

        }

@@ -1672,27 +1837,25 @@
        params: {

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

        .then(res => {

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

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

            this.bindPopup(datafalse)

              .openPopup()

            this.bindPopup(datafalse).openPopup()

            return

          }

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

          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]

              } else {

                res.data[key] =

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

                    .toFixed(2) +

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

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

              }

            }

@@ -1701,10 +1864,9 @@
            .replace(/,/g, `<br>`)

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

          console.log(data)

          marker.bindPopup(data)

            .openPopup()

          marker.bindPopup(data).openPopup()

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

      return data

@@ -1720,9 +1882,8 @@
          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container)

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

            'leaflet-layer'

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

@@ -1738,7 +1899,7 @@
        $.getJSON(

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

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

          (data) => {

          data => {

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

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

          }

@@ -1790,6 +1951,7 @@
      }

      const gisMap_layers = this.map._layers

      let layer = null

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

      for (const i in gisMap_layers) {

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

          layer = gisMap_layers[i]

@@ -1808,13 +1970,12 @@
        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) {

@@ -1828,6 +1989,22 @@
      //   that.canvasWind(this.windJsonData)

      // })

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

@@ -1880,9 +2057,8 @@
          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container)

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

            'leaflet-layer'

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

@@ -1899,14 +2075,14 @@
        params: {

          monitorPointIds: this.monitorPointIds.toString(),

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

        .then(res => {

          this.windJsonData = res.data[0]

          return this.windJsonData

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

    },

@@ -1923,7 +2099,7 @@
          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data',

          displayEmptyString: 'No wind data'

        },

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

        // data: data2,

@@ -1943,8 +2119,8 @@
          '#345B1B',

          '#186303',

          '#175103',

          '#053F03',

        ],

          '#053F03'

        ]

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

      })

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

@@ -1967,22 +2143,21 @@
          startTime: this.dateValue[0],

          endTime: this.dateValue[1],

          index: this.factorValue,

          alarmType: this.alartValue,

        },

          alarmType: this.alartValue

        }

      }).then(res => {

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

        // console.log(res)

        var tempData = res.data

        // console.log(tempData)

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

          tempData.alarmInfos[i].alarmInfoId = i + 1

        }

        // 将数据赋值给tableData

        this.gridData = tempData.alarmInfos

        // 将数据的长度赋值给totalCount

        this.totalCount = tempData.alarmInfos.length

      })

        .then((res) => {

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

          // console.log(res)

          var tempData = res.data

          // console.log(tempData)

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

            tempData.alarmInfos[i].alarmInfoId = i + 1

          }

          // 将数据赋值给tableData

          this.gridData = tempData.alarmInfos

          // 将数据的长度赋值给totalCount

          this.totalCount = tempData.alarmInfos.length

        })

    },

    // 分页

    // 每页显示的条数

@@ -2000,6 +2175,7 @@
    },

    // 单元格样式

    tableCellClassName ({ row, column, rowIndex, columnIndex }) {

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

      for (const key in row) {

        if (key === column.property) {

          const code = column.property

@@ -2036,15 +2212,14 @@
        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002',

        },

          sensorCode: 'a34002'

        }

      })

        .then((res) => {

        .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

@@ -2053,25 +2228,23 @@
              // 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) => {

        .catch(err => {

          console.log(err)

        })

    },

@@ -2094,8 +2267,8 @@
    },

    closeAlarmTableVisible () {

      this.$store.state.alarmTableVisible = false

    },

  },

    }

  }

}

</script>



@@ -2302,11 +2475,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;