fix:接口修改和echarts修改

quanyawei

2023-10-08 d1b793c51a67e7aebf04d35c0200b21681337024

 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>

@@ -273,6 +333,7 @@
import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件

import { mapGetters } from 'vuex'

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

import requestObj from '@/utils/request'

export default {

  components: { RegionalOverview },

  props: {

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

@@ -411,7 +464,7 @@
      chooseTime: false,

      dateInfo: '', // 选择的日期

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

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

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

    }

  },

  computed: {

@@ -428,7 +481,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()



@@ -445,7 +504,7 @@
    this.getParamsData()

    this.windDir()

    this.newDate()

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

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

  },

  beforeDestroy() {

    if (this.timer) {

@@ -471,10 +530,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 +609,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 +638,7 @@
        that.getParamsData()

      }

      // timeUl绑定点击事件

      timeUl.onclick = e => {

      timeUl.onclick = (e) => {

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

        var target = e.target

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

@@ -587,7 +646,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 +688,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 +704,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,17 +720,31 @@
    },

    // 当前小时默认值

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

      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)

@@ -685,186 +758,186 @@
    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()

    },

    // 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心跳开启')

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

                    }

                  }

                }

              }

            }

          }

        }

      }

    },

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

@@ -926,7 +999,11 @@
      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

          if (

            !layer._container &&

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

@@ -944,7 +1021,7 @@
        }

      }).then((data) => {

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

        // console.log(data)

        console.log(data, 'tata')

        that.loading = false

        this.markDeviceSite(data)

      })

@@ -980,6 +1057,11 @@
          // }

        }

        // console.log(this.keys)

        // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)

        // var lat = newL[0]

        // this.lats[i] = newL[0]

        // var lng = newL[1]

        // this.lngs[i] = newL[1]

        var lat = keyData[i].latitude

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

        var lng = keyData[i].longitude

@@ -989,35 +1071,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

            }

@@ -1101,7 +1183,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

@@ -1249,8 +1333,8 @@
              colorNum = 6

              break

            }

              // default:

              //   break

            // default:

            //   break

          }

        }



@@ -1258,7 +1342,7 @@
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

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

          iconSize: [60, 60],

          iconAnchor: [13, 21],

          iconAnchor: [30, 48],

          className: 'my-device'

        })

        // 添加标记到地图

@@ -1269,7 +1353,8 @@
        var myIcon = L.divIcon({

          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: 30

          iconSize: [60, 60],

          iconAnchor: [40, 40]

        })

        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)

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

@@ -1281,32 +1366,47 @@
          //   // 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).openPopup()

            })

            .catch((err) => {

              console.log(err)

            })

        })

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

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

@@ -1329,37 +1429,39 @@
          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)

      })

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

@@ -1387,7 +1489,11 @@
      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

          if (

            !layer._container &&

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

@@ -1396,7 +1502,7 @@
      this.deviceMaker()

      // 执行ws方法

      // this.wsStart()

      this.initWebpack()

      // this.initWebpack()

      // console.log('这是ws需要的三个参数')

      // console.log(this.accountId, this.orgId, this.regionCode)

      // this.timer2 = setInterval(() => {

@@ -1417,19 +1523,23 @@
      // 请求更新风场数据

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

        })

        $.getJSON(

          `${requestObj.baseUrl}/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('跳转成功')

          }

        )

      }, 1000)

      if (this.windState === 1) {

        // this.ws.close()

@@ -1454,6 +1564,7 @@
    getParamsData() {

      clearInterval(this.timer)

      this.timer = setInterval(() => {

        this.currentHour()

        this.times--

        if (this.times === 0) {

          // 时间点选择标记消失

@@ -1502,7 +1613,9 @@
        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(

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

@@ -1514,25 +1627,32 @@
      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

      }

@@ -1555,7 +1675,11 @@
      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

          if (

            !layer._container &&

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

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

@@ -1577,49 +1701,61 @@
          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) => {

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

        })

    },

    // 将页码，及每页显示的条数以参数传递提交给后台

    alertData(n1, n2) {

@@ -1638,20 +1774,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

        })

    },

    // 分页

    // 每页显示的条数

@@ -1676,11 +1811,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'

            }

          }

@@ -1700,7 +1835,6 @@
    closeAlarmTableVisible() {

      this.$store.state.alarmTableVisible = false

    }



  }

}

</script>

@@ -1747,7 +1881,8 @@
  box-shadow: 1px 1px 5px #666;

  cursor: pointer;

}

.mouseDiv, .mouseDiv2{

.mouseDiv,

.mouseDiv2 {

  position: absolute;

  left: 0;

  background-color: #009845;

@@ -1761,7 +1896,8 @@
  padding: 1px;

  color: white;

}

.sjDiv, .sjDiv2{

.sjDiv,

.sjDiv2 {

  width: 0px;

  height: 0px;

  border: 10px solid transparent;

@@ -1773,48 +1909,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;

@@ -1822,7 +1958,7 @@
  left: 0;

  top: 0;

}

.dayDiv p{

.dayDiv p {

  width: 32.87664%;

  text-align: center;

}

@@ -1890,7 +2026,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;

@@ -1972,22 +2108,27 @@
  -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>