Merge branch 'feature_1.0'

quanyawei

2023-10-11 0b9e8a88c5f23886a18616c83c7649a34445a7eb

 src/components/Wind/Map.vue

@@ -17,185 +17,218 @@
      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->

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

      <span class="dropDown">

        <img class="realTime_top" :src="require('@/assets/images/regionalOverview/realTimeImg.png')" alt="" @click="turnState">

        <img

          class="realTime_top"

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

    </div>

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

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

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

        <div class="mouseDiv">

          <span class="inText"></span>

          <div class="sjDiv"></div>

          <span class="inText" />

          <div class="sjDiv" />

        </div>

        <div class="mouseDiv2">

          <span class="inText2"></span>

          <div class="sjDiv2"></div>

          <span class="inText2" />

          <div class="sjDiv2" />

        </div>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

        <li />

      </div>

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

        <ul id="timeUl">

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

          <li></li>

          <li></li>

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

          <li />

          <li />

          <li>03</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>06</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>09</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>12</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>15</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>18</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>21</li>

          <li></li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li />

          <!--          -->

          <li></li>

          <li></li>

          <li />

          <li />

          <li>03</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>06</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>09</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>12</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>15</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>18</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>21</li>

          <li></li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li />

          <!--          -->

          <li></li>

          <li></li>

          <li />

          <li />

          <li>03</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>06</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>09</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>12</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>15</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>18</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>21</li>

          <li></li>

          <li></li>

          <li />

          <li />

          <li>00</li>

        </ul>

        <div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">

          <p class="p1"></p>

        <div

          style="

            display: flex;

            width: 100%;

            border-top: 1px solid rgba(255, 255, 255, 0.5);

          "

          class="dayDiv"

        >

          <p class="p1" />

          <p style="position: relative">

            <span class="borderLine" style="position: absolute; left: 0; border-left: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>

            <span class="p2"></span>

            <span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>

            <span

              class="borderLine"

              style="

                position: absolute;

                left: 0;

                border-left: 1px solid rgba(255, 255, 255, 1);

                height: 47px;

                bottom: 0;

              "

            />

            <span class="p2" />

            <span

              class="borderLine"

              style="

                position: absolute;

                right: 0;

                border-right: 1px solid rgba(255, 255, 255, 1);

                height: 47px;

                bottom: 0;

              "

            />

          </p>

          <p class="p3"></p>

          <p class="p3" />

        </div>

      </div>

    </div>

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

    <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" />

    <div

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

      class="buttom-left"

    />

    <el-dialog

      title="污染报警查询"

      :visible.sync="alarmTableVisible"

@@ -207,7 +240,7 @@
        <div>

          <el-date-picker

            v-model="dateValue"

            style="width:400px"

            style="width: 400px"

            type="daterange"

            range-separator="至"

            start-placeholder="开始日期"

@@ -230,22 +263,46 @@
              :value="item.value"

            />

          </el-select>

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

          <el-button

            type="primary"

            @click="alertData(PageSize, currentPage)"

          >查询</el-button>

        </div>

      </div>

      <el-table

        :data="gridData.slice((currentPage-1)*PageSize,currentPage*PageSize)"

        :data="

          gridData.slice((currentPage - 1) * PageSize, currentPage * PageSize)

        "

        border

        stripe

        :cell-class-name="tableCellClassName"

        height="400"

      >

        <el-table-column property="alarmInfoId" label="序号" width="50" align="center" />

        <el-table-column

          property="alarmInfoId"

          label="序号"

          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="index" label="因子" width="80" align="center" />

        <el-table-column property="alarm_type" label="报警类型" width="200" align="center" />

        <el-table-column property="alarm_information" label="报警信息" align="center" />

        <el-table-column

          property="index"

          label="因子"

          width="80"

          align="center"

        />

        <el-table-column

          property="alarm_type"

          label="报警类型"

          width="200"

          align="center"

        />

        <el-table-column

          property="alarm_information"

          label="报警信息"

          align="center"

        />

      </el-table>

      <el-pagination

        :current-page="currentPage"

@@ -257,7 +314,10 @@
        @current-change="handleCurrentChange"

      />

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

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

        <el-button

          size="mini"

          @click="alarmTableVisible = false"

        >关 闭</el-button>

      </div>

    </el-dialog>

  </div>

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

@@ -289,15 +350,7 @@
      code: [],

      latlng: [],

      noneData: false,

      params: [

        'PM10',

        'PM2.5',

        'SO2',

        'NO2',

        'CO',

        'O3',

        'TVOC'

      ],

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

      changeColor: 0,

      times: 1,

      sensorKey: 'a34002',

@@ -412,6 +465,7 @@
      dateInfo: '', // 选择的日期

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

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

      windALLData: []

    }

  },

  computed: {

@@ -428,7 +482,13 @@
  },

  mounted() {

    this.currentHour()

    this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)

    this.$Bus.$on(

      'alarmTableVisible',

      (res) => (

        (this.alarmTableVisible = res),

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

      )

    )

    // 初始化地图容器

    this.initMap()



@@ -440,12 +500,14 @@
    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)



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

  },

  beforeDestroy() {

    if (this.timer) {

@@ -471,10 +533,10 @@
      if (day === 'today') {

        rq = this.newData(0)

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

        days = ((days + 7) - 1) % 7

        days = (days + 7 - 1) % 7

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

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

        days = ((days + 7) - 2) % 7

        days = (days + 7 - 2) % 7

        rq = this.newData(-2) // 前天日期

      }

      switch (days) {

@@ -550,7 +612,7 @@
            lis[i].style.backgroundColor = 'green'

            if (lis[i] === target) {

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

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

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

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

              mouseDiv2.style.display = 'block'

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

@@ -579,7 +641,7 @@
        that.getParamsData()

      }

      // timeUl绑定点击事件

      timeUl.onclick = e => {

      timeUl.onclick = (e) => {

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

        var target = e.target

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

@@ -587,7 +649,7 @@
            if (timeLis[i] === target) {

              greenInfo = i

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

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

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

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

              mouseDiv2.style.display = 'block'

              var times = i % 24

@@ -629,7 +691,7 @@
          // 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.left = 1.36986 * (i + 1) + '%'

          mouseDiv.style.display = 'block'

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

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

@@ -645,7 +707,7 @@
        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.left = 1.36986 * i + '%'

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

          mouseDiv.style.display = 'block'

          var times = i % 24

@@ -661,23 +723,25 @@
    },

    // 当前小时默认值

    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 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1

      const date = aData.getDate() 
      const hour = aData.getHours() 
      const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'

      const month =

        aData.getMonth() < 9

          ? '0' + (aData.getMonth() + 1)

          : aData.getMonth() + 1

      const date =

        aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()

      const hour = aData.getHours()

      const currentDate =

        aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'

      this.dateFormat = currentDate.toString()

    },

    // 日期格式化

    newDate() {

      var aData = new Date()

      var month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1

      var month =

        aData.getMonth() < 9

          ? '0' + (aData.getMonth() + 1)

          : aData.getMonth() + 1

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

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

      // console.log(this.currentDate)

@@ -691,186 +755,9 @@
    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

      var x_pi = (3.14159265358979324 * 3000.0) / 180.0

      var x = bd_lon - 0.0065

      var y = bd_lat - 0.006

      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)

@@ -879,63 +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({

@@ -950,21 +786,20 @@
        }

      }).then((data) => {

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

        // console.log(data)

        console.log(data, 'tata')

        that.loading = false

        this.markDeviceSite(data)

      })

    },

    // 标记设备点

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

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

          // }

        }

        // console.log(this.keys)

        var lat = keyData[i].latitude

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

        var lng = keyData[i].longitude

@@ -995,35 +829,35 @@
        if (keyData[i].a34002) {

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

          switch (true) {

            case (data < 0): {

            case data < 0: {

              colorNum = 7

              break

            }

            case (data === 0): {

            case data === 0: {

              colorNum = 0

              break

            }

            case (data <= 50): {

            case data <= 50: {

              colorNum = 1

              break

            }

            case (data <= 150): {

            case data <= 150: {

              colorNum = 2

              break

            }

            case (data <= 250): {

            case data <= 250: {

              colorNum = 3

              break

            }

            case (data <= 350): {

            case data <= 350: {

              colorNum = 4

              break

            }

            case (data <= 420): {

            case data <= 420: {

              colorNum = 5

              break

            }

            case (data > 420): {

            case data > 420: {

              colorNum = 6

              break

            }

@@ -1107,7 +941,9 @@
              break

          }

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

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

          var data = Math.floor(

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

          )

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1255,8 +1091,8 @@
              colorNum = 6

              break

            }

              // default:

              //   break

            // default:

            //   break

          }

        }



@@ -1264,62 +1100,77 @@
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

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

          iconSize: [60, 60],

          iconAnchor: [13, 21],

          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: 30

        })

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

            method: 'get',

            params: {

              mac: keyData[i].mac,

              chooseTime: _this.chooseTime,

              time: _this.nyr

            }

          }).then((res) => {

            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)

          _this

            .$request({

              url: '/historyFiveMinutely/queryPopDataByMac',

              method: 'get',

              params: {

                mac: keyData[i].mac,

                chooseTime: _this.chooseTime,

                time: _this.nyr

              }

            }

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

            this.bindPopup(data).openPopup()

          }).catch((err) => {

            console.log(err)

          })

            })

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

            })

        })

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

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

@@ -1335,131 +1186,86 @@
          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)

      }

    },

    // 请求风向标

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

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

          }

        })

      }

      // 执行生成设备点方法

      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('跳转成功')

        .catch((err) => {

          console.log(err)

        })

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

    },

    // 切换风场风向状态

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

    //   }

    // },

    // 请求风向标

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

    //   }

    // },

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

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

        this.times--

        if (this.times === 0) {

          // 时间点选择标记消失

@@ -1476,30 +1282,36 @@
            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

          }, 100)

        }

        this.currentHour();

      }, 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],

@@ -1509,70 +1321,84 @@
        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)

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

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

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

        case 0: pr = 'a34002'

        case 0:

          pr = 'a34002'

          this.bg = require('@/assets/images/tl_PM10.png')

          break

        case 1: pr = 'a34004'

        case 1:

          pr = 'a34004'

          this.bg = require('@/assets/images/tl_PM2.5.png')

          break

        case 2: pr = 'a21026'

        case 2:

          pr = 'a21026'

          this.bg = require('@/assets/images/tl_SO2.png')

          break

        case 3: pr = 'a21004'

        case 3:

          pr = 'a21004'

          this.bg = require('@/assets/images/tl_NO2.png')

          break

        case 4: pr = 'a21005'

        case 4:

          pr = 'a21005'

          this.bg = require('@/assets/images/tl_CO.png')

          break

        case 5: pr = 'a05024'

        case 5:

          pr = 'a05024'

          this.bg = require('@/assets/images/tl_O3.png')

          break

        case 6: pr = 'a99054'

        case 6:

          pr = 'a99054'

          this.bg = require('@/assets/images/tl_TVOCNew.png')

          break

      }

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

@@ -1584,49 +1410,55 @@
          chooseTime: this.chooseTime,

          time: this.nyr

        }

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

      }).catch(err => {

        console.log(err)

      })

        .then((res) => {

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

@@ -1645,20 +1477,19 @@
          index: this.factorValue,

          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

        })

    },

    // 分页

    // 每页显示的条数

@@ -1683,11 +1514,11 @@
            // console.log(row[key])

            if (row[key] === 0 || row[key] === '' || row[key] === null) {

              return ''

            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 100) {

            } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) {

              return 'yellow'

            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 150) {

            } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) {

              return 'orange'

            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 250) {

            } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) {

              return 'red'

            }

          }

@@ -1707,7 +1538,6 @@
    closeAlarmTableVisible() {

      this.$store.state.alarmTableVisible = false

    }



  }

}

</script>

@@ -1754,7 +1584,8 @@
  box-shadow: 1px 1px 5px #666;

  cursor: pointer;

}

.mouseDiv, .mouseDiv2{

.mouseDiv,

.mouseDiv2 {

  position: absolute;

  left: 0;

  background-color: #009845;

@@ -1768,7 +1599,8 @@
  padding: 1px;

  color: white;

}

.sjDiv, .sjDiv2{

.sjDiv,

.sjDiv2 {

  width: 0px;

  height: 0px;

  border: 10px solid transparent;

@@ -1780,48 +1612,48 @@
  top: 100%;

  z-index: -1;

}

.mouseDiv2{

.mouseDiv2 {

  background-color: #2b2b2b;

}

.sjDiv2{

.sjDiv2 {

  border-top-color: #2b2b2b;

}

.jdt{

.jdt {

  height: 5px;

  width: 100%;

  display: flex;

  position: relative;

}

.timeDiv{

.timeDiv {

  width: 100%;

  float: left;

}

.topDate .timeDiv:nth-child(3){

.topDate .timeDiv:nth-child(3) {

  border-left: 1px solid white;

  border-right: 1px solid white;

}

.topDate ul{

.topDate ul {

  margin: 0;

  padding: 0;

  list-style: none;

  display: flex;

}

.topDate li{

.topDate li {

  width: 1.36986%;

  //padding: 0 2%;

  box-sizing: border-box;

  //transform: translateX(50%);

}

.topDate p{

.topDate p {

  text-align: center;

  font-size: 16px;

  margin: 0;

  padding: 0;

}

.jdt li{

.jdt li {

  //box-sizing: border-box;

  border-left: 1px solid white;

  background-color: rgba(0,0,0,0.3);

  background-color: rgba(0, 0, 0, 0.3);

  height: 100%;

  width: 1.36986%;

  list-style: none;

@@ -1829,7 +1661,7 @@
  left: 0;

  top: 0;

}

.dayDiv p{

.dayDiv p {

  width: 32.87664%;

  text-align: center;

}

@@ -1897,7 +1729,7 @@
  position: fixed;

  right: 0;

  top: 50px;

  background-color:  rgba(15, 69, 103, 0.8);

  background-color: rgba(15, 69, 103, 0.8);

}

.dropDown > .drop-icon {

  vertical-align: middle;

@@ -1920,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); */

}

@@ -1934,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); */

}

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

.my-device {

  z-index: 999;

  pointer-events: none !important;

  cursor: pointer !important;

}

.windDir-icon {

  z-index: 10001;

@@ -1979,22 +1815,28 @@
  -webkit-transform-origin-x: 0;

  margin-left: 20px;

}

.el-dialog__body{

.el-dialog__body {

  padding: 10px 20px;

}

.el-dialog__footer{

.el-dialog__footer {

  padding: 0px 20px 15px;

}

.yellow{

  background-color: #ffff00!important;

  color: #868600!important;

.yellow {

  background-color: #ffff00 !important;

  color: #868600 !important;

}

.orange{

  background-color: #ff7e00!important;

  color: #844100!important;

.orange {

  background-color: #ff7e00 !important;

  color: #844100 !important;

}

.red{

  background-color: #ff0000!important;

  color: #790000!important;

.red {

  background-color: #ff0000 !important;

  color: #790000 !important;

}

.leaflet-marker-icon.leaflet-interactive {

  pointer-events: auto;

  margin-left: -45px;

  margin-top: -40px;

}



</style>