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

quanyawei

2023-10-26 6e229822c315f85465d27f2c411e0c9382acf7f5

 src/views/deviceDetail/index.vue

@@ -37,17 +37,17 @@
            v-for="(val, key, i) in defaultMonitorItems"
            :key="i"
            style="flex: 1; display: flex"
            
          >
            <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{
              val.sensorCode | sensorFilter
            }}</span>
            <span style="width: 33%; height: 0.9rem; font-size: 0.9rem"
              ><el-progress
                :text-inside="true"
                :percentage="val.alarm"
                :color="val.colour"
                style="width: 100%"
            <span
              style="width: 33%; height: 0.9rem; font-size: 0.9rem"
            ><el-progress
              :text-inside="true"
              :percentage="val.alarm"
              :color="val.colour"
              style="width: 100%"
            /></span>
            <span style="width: 34%; text-align: right; font-size: 0.9rem">{{
              val.value
@@ -75,7 +75,7 @@
            "
          >
            <div style="position: relative">
              <img style="width: 5.5rem; height: 5.5rem" :src="compassBg" />
              <img style="width: 5.5rem; height: 5.5rem" :src="compassBg">
              <img
                style="
                  font-size: 2rem;
@@ -92,7 +92,7 @@
                :style="{
                  transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
                }"
              />
              >
            </div>
            <div style="text-align: center; font-size: 1rem">
              <div>{{ windDir }}</div>
@@ -123,19 +123,18 @@
      <el-header
        class="title0"
        style="text-align: center; display: unset !important; margin-top: 10px"
        ><h1
          style="
      ><h1
        style="
            text-align: center;
            text-align: center;
            margin: 0;
            padding-top: 20px;
            font-size: 1.2rem;
          "
          @click="websocketData()"
        >
          {{ deviceName ? deviceName : '停机' }}
        </h1></el-header
        @click="websocketData()"
      >
        {{ deviceName ? deviceName : '停机' }}
      </h1></el-header>
      <el-main
        style="
          padding-left: 0;
@@ -160,6 +159,7 @@
            <div
              v-for="(val, key, i) in coreMonitorItems"
              :key="i"
              ref="test"
              style="
                position: relative;
                width: 33%;
@@ -167,7 +167,6 @@
                font-size: 0.9rem;
              "
              class="circleWH"
              ref="test"
            >
              <!--              <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">-->
              <div
@@ -238,7 +237,7 @@
                  padding-right: 10px;
                  font-size: 0.9rem;
                "
              ></div>
              />
            </div>
          </div>
        </div>
@@ -266,24 +265,24 @@
        >
          <div style="height: 100%; display: flex; flex-direction: column">
            <div style="height: 30%">
              <h3 style="text-align: center; font-size: 0.9rem" v-if="macLat">
              <h3 v-if="macLat" style="text-align: center; font-size: 0.9rem">
                <span>坐标：</span> {{ macLat }}, {{ macLng }}
              </h3>
              <h3 style="font-size: 0.9rem">实时监测超标预警</h3>
            </div>
            <div style="height: 70%">
              <!--              padding-top: 4%-->
              <img :src="url1" alt="" style="width: 70%" />
              <img :src="url1" alt="" style="width: 70%">
            </div>
            <div>
              <img style="width: 75%" :src="url2" alt="" />
              <img style="width: 75%" :src="url2" alt="">
            </div>
          </div>
        </div>
        <div
          v-if="monitorPointInfo"
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
          v-if="monitorPointInfo"
        >
          <h3 style="text-align: center; font-size: 0.9rem">设备列表</h3>
          <ul
@@ -307,9 +306,9 @@
          </ul>
        </div>
        <div
          v-else
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
          v-else
        >
          <h3 style="text-align: center; font-size: 0.9rem">标准值</h3>
          <ul
@@ -339,6 +338,7 @@
// 例如：import《组件名称》from'《组件路径》';

import json from '@/assets/json/sensor.json'
import * as echarts from 'echarts'
// import { parse } from 'path-to-regexp'
// import LineChart from '@/components/Echarts/LineChart'
// import draggable from 'vuedraggable'
@@ -350,10 +350,10 @@
  },
  filters: {
    // 过滤器替换websocket实时数据的key值
    sensorFilter: function (value) {
    sensorFilter: function(value) {
      if (!value) return ''
      return json[value]
    },
    }
  },
  props: {},
  data() {
@@ -364,7 +364,7 @@
      url2: require('@/assets/images/alarmstate-1.png'),
      bg: {
        backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')',
        backgroundRepeat: 'round',
        backgroundRepeat: 'round'
      },
      wsData1: null,
      wsData2: null,
@@ -388,12 +388,12 @@
      // 报警等级
      alarmLevel: null,
      alarmLevelDome: {
        a05024: '[0, 160, 200, 300, 400, 800]', //臭氧
        a21004: '[0, 100, 200, 700, 1200, 2340]', //二氧化氮
        a21005: '[0, 5, 10, 35, 60, 90]', //一氧化碳
        a21026: '[0, 150, 500, 650, 800, 1600]', //二氧化硫
        a34002: '[0, 50, 150, 250, 350, 420]', //PM10
        a34004: '[0, 35, 75, 115, 150, 250]', //PM2.5
        a05024: '[0, 160, 200, 300, 400, 800]', // 臭氧
        a21004: '[0, 100, 200, 700, 1200, 2340]', // 二氧化氮
        a21005: '[0, 5, 10, 35, 60, 90]', // 一氧化碳
        a21026: '[0, 150, 500, 650, 800, 1600]', // 二氧化硫
        a34002: '[0, 50, 150, 250, 350, 420]', // PM10
        a34004: '[0, 35, 75, 115, 150, 250]' // PM2.5
      }, // 假设报警等级
      // 报警进度条
      alarmProgress: {},
@@ -433,27 +433,28 @@
        CO2: '',
        SO2: '',
        CO: '',
        O3: '',
      },
        O3: ''
      }
    }
  },
  // 计算属性 类似于data概念
  computed: {
    leftaSide() {
      return this.$store.state.leftaSide
    },
    }
  },
  // 监控data中的数据变化
  watch: {
    PM2_5Data(val) {
      // console.log('新数据' + val)
      this.myChart = null
      this.drawChart()
    },
    leftaSide(n, o) {
      // this.myChart.resize()
      this.myChart = null
      // this.drawChart()
    },
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
@@ -471,7 +472,8 @@
    // this.macLng = this.$route.query.items
    // this.monitorPointInfo = this.$route.params.monitorPointInfo
    this.monitorPointInfo = JSON.parse(this.$route.query.monitorPointInfo)
    this.deviceName = this.$route.query.device.name
    var obj = JSON.parse(this.$route.query.device)
    this.deviceName = obj.name
    this.regionCode = this.$store.state.regionCode
    // this.regionCode = this.$store.state.regionCode
    this.sensorLayout()
@@ -556,8 +558,8 @@
          url: '/organizationLayout/getLayoutByMac',
          method: 'get',
          params: {
            mac: this.macName,
          },
            mac: this.macName
          }
        })
          .then((res) => {
            console.log(res, '因子布局接口')
@@ -585,8 +587,8 @@
        .get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
          params: {
            mac: this.macName,
            primaryKey: this.macName,
          },
            primaryKey: this.macName
          }
        })
        .then((res) => {
          this.alarmLevels = res.data
@@ -600,7 +602,7 @@
    // 获得实时日期更新
    getTime() {
      var _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function () {
      this.timer = setInterval(function() {
        _this.currentTime = // 修改数据date
          _this.appendZero(new Date().getFullYear()) +
          '-' +
@@ -649,8 +651,8 @@
        url: '/deviceInfo/getHourlyAqi',
        method: 'get',
        params: {
          mac: this.macName,
        },
          mac: this.macName
        }
      })
        .then((res) => {
          // console.log('以下是getHourlyAqi请求的返回')
@@ -669,8 +671,8 @@
        method: 'get',
        params: {
          sensorCode: this.chartSensorKey[0].sensorCode,
          mac: this.macName,
        },
          mac: this.macName
        }
      })
        .then((res) => {
          // console.log(res,'123');
@@ -702,6 +704,7 @@
      if (this.ws) {
        this.ws.close()
      }

      var that = this
      // 拼写参数
      // var param = this.accountId + '&' + this.orgId + '&' + this.macName
@@ -709,28 +712,29 @@
      // 拼写URL
      var socketUrl
      if (this.equipment === 'car') {
        socketUrl = 'http://47.99.64.149:8081/cruiserWebsocket/' + this.macName
        // socketUrl = 'http://192.168.0.33:8081/cruiserWebsocket/' + this.macName
        socketUrl = 'https://qx.7drlb.com/api/cruiserWebsocket/' + this.macName
        // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName
      } else {
        socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
        // socketUrl = 'http://192.168.0.4:8081/singleDevice/' + this.macName
        socketUrl = 'https://qx.7drlb.com/api/singleDevice/' + this.macName
        // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName
      }
      // 替换http为WS
      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

      socketUrl = socketUrl.replace('https', 'wss').replace('http', 'ws')
      console.log('socketUrl', socketUrl)
      this.ws = new WebSocket(socketUrl)

      this.ws.onopen = function () {
      this.ws.onopen = function() {
        console.log('websocket开启成功')
      }
      console.log(2)
      // this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
      // 获得消息事件
      this.ws.onmessage = function (msg) {
      this.ws.onmessage = function(msg) {
        // console.log(1);
        // if (JSON.parse(msg.data).名称) {
        that.wsData2 = JSON.parse(msg.data)
        // console.log(msg.data, 'data2')
        console.log(that.wsData2, 'that.wsData2')
        // that.wsData2.on('click',function (params) {
        //     console.log(params);
        // })
@@ -939,18 +943,18 @@
        // 判断PM2.5的超标预警
        if (e1Data > 250) {
          that.e1Bg = require('@/assets/images/level0_circle5.gif')
          that.coreMonitorItems[0].bg=5
          that.coreMonitorItems[0].bg = 5
        } else if (e1Data > 150) {
          that.coreMonitorItems[0].bg=4
          that.coreMonitorItems[0].bg = 4
          that.e1Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e1Data > 115) {
          that.coreMonitorItems[0].bg=3
          that.coreMonitorItems[0].bg = 3
          that.e1Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e1Data > 75) {
          that.coreMonitorItems[0].bg=2
          that.coreMonitorItems[0].bg = 2
          that.e1Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e1Data > 35) {
          that.coreMonitorItems[0].bg=1
          that.coreMonitorItems[0].bg = 1
          that.e1Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          // console.log(that.coreMonitorItems[0].bg,'bg');
@@ -959,95 +963,95 @@
        }
        // 判断PM10的超标预警
        if (e2Data > 420) {
          that.coreMonitorItems[1].bg=5
          that.coreMonitorItems[1].bg = 5
          that.e2Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e2Data > 350) {
          that.coreMonitorItems[1].bg=4
          that.coreMonitorItems[1].bg = 4
          that.e2Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e2Data > 250) {
          that.coreMonitorItems[1].bg=3
          that.coreMonitorItems[1].bg = 3
          that.e2Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e2Data > 150) {
          that.coreMonitorItems[1].bg=2
          that.coreMonitorItems[1].bg = 2
          that.e2Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e2Data > 50) {
          that.coreMonitorItems[1].bg=1
          that.coreMonitorItems[1].bg = 1
          that.e2Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e2Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断CO的超标预警
        if (e10Data > 90) {
          that.coreMonitorItems[3].bg=5
          that.coreMonitorItems[4].bg = 5
          that.e10Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e10Data > 60) {
          that.coreMonitorItems[3].bg=4
          that.coreMonitorItems[4].bg = 4
          that.e10Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e10Data > 35) {
          that.coreMonitorItems[3].bg=3
          that.coreMonitorItems[4].bg = 3
          that.e10Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e10Data > 10) {
          that.coreMonitorItems[3].bg=2
          that.coreMonitorItems[4].bg = 2
          that.e10Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e10Data > 5) {
          that.coreMonitorItems[3].bg=1
          that.coreMonitorItems[4].bg = 1
          that.e10Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e10Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断SO2的超标预警
        if (e11Data > 1600) {
          that.coreMonitorItems[4].bg=5
          that.coreMonitorItems[3].bg = 5
          that.e11Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e11Data > 800) {
          that.coreMonitorItems[4].bg=4
          that.coreMonitorItems[3].bg = 4
          that.e11Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e11Data > 650) {
          that.coreMonitorItems[4].bg=3
          that.coreMonitorItems[3].bg = 3
          that.e11Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e11Data > 500) {
          that.coreMonitorItems[4].bg=2
          that.coreMonitorItems[3].bg = 2
          that.e11Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e11Data > 150) {
          that.coreMonitorItems[4].bg=1
          that.coreMonitorItems[3].bg = 1
          that.e11Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e11Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断O3的超标预警
        if (e15Data > 800) {
          that.coreMonitorItems[5].bg=5
          that.coreMonitorItems[5].bg = 5
          that.e15Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e15Data > 400) {
          that.coreMonitorItems[5].bg=4
          that.coreMonitorItems[5].bg = 4
          that.e15Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e15Data > 300) {
          that.coreMonitorItems[5].bg=3
          that.coreMonitorItems[5].bg = 3
          that.e15Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e15Data > 200) {
          that.coreMonitorItems[5].bg=2
          that.coreMonitorItems[5].bg = 2
          that.e15Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e15Data > 160) {
          that.coreMonitorItems[5].bg=1
          that.coreMonitorItems[5].bg = 1
          that.e15Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e15Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断NO2的超标预警
        if (e16Data > 2340) {
          that.coreMonitorItems[2].bg=5
          that.coreMonitorItems[2].bg = 5
          that.e16Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e16Data > 1200) {
          that.coreMonitorItems[2].bg=4
          that.coreMonitorItems[2].bg = 4
          that.e16Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e16Data > 700) {
          that.coreMonitorItems[2].bg=3
          that.coreMonitorItems[2].bg = 3
          that.e16Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e16Data > 200) {
          that.coreMonitorItems[2].bg=2
          that.coreMonitorItems[2].bg = 2
          that.e16Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e16Data > 100) {
          that.coreMonitorItems[2].bg=1
          that.coreMonitorItems[2].bg = 1
          that.e16Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e16Bg = require('@/assets/images/level0_circle0.gif')
@@ -1200,8 +1204,8 @@
        url: '/deviceInfo/queryAlarmByMac',
        method: 'get',
        params: {
          mac: this.macName,
        },
          mac: this.macName
        }
      })
        .then((res) => {
          console.log(res, 'res')
@@ -1231,7 +1235,7 @@
      const that = this
      var bar_dv = this.$refs.main
      if (bar_dv) {
        that.myChart = this.$echarts.init(bar_dv)
        that.myChart = echarts.init(bar_dv)
        var option = {
          title: {
            left: 'center',
@@ -1239,12 +1243,12 @@
            Color: 'white',
            textStyle: {
              // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              color: '#fff',
            },
              color: '#fff'
            }
          },
          grid: {
            top: 50,
            bottom: 25,
            bottom: 25
          },
          tooltip: {
            // formatter:function(res){
@@ -1259,9 +1263,9 @@
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
                color: '#fff',
              },
            },
                color: '#fff'
              }
            }
          },
          xAxis: {
            type: 'category',
@@ -1269,17 +1273,17 @@
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
                color: '#fff'
              }
            }
          },
          series: [
            {
@@ -1289,29 +1293,29 @@
                normal: {
                  show: true,
                  position: 'top',
                  color: '#fff',
                },
              },
            },
          ],
                  color: '#fff'
                }
              }
            }
          ]
        }
        that.myChart.setOption(option)
        setTimeout(function () {
          window.onresize = function () {
        setTimeout(function() {
          window.onresize = function() {
            that.myChart.resize()
          }
        }, 200)
      } else {
        console.log('容器为空')
      }
    },
    }
    // circles() {
    //   for (let index = this.circle; index < 100; index++) {
    //     index++
    //     this.circle++
    //   }
    // }
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>