fix:修改成16位风向值

quanyawei

2024-02-04 7beb37c5170f93a33c059c72fac3233b82865481

 src/views/deviceDetail/index.vue

@@ -38,7 +38,10 @@
            :key="i"
            style="flex: 1; display: flex"
          >
            <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{
            <span
              style="width: 33%; font-size: 0.9rem"
              @click="chuan(val)"
            >{{
              val.sensorCode | sensorFilter
            }}</span>
            <span
@@ -75,7 +78,10 @@
            "
          >
            <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;
@@ -111,7 +117,9 @@
              justify-content: center;
            "
          >
            <div style="font-size: 0.9rem">空气质量指数(小时平均)</div>
            <div style="font-size: 0.9rem">
              空气质量指数(小时平均)
            </div>
            <div style="font-size: 1.5rem; margin-top: 7px">
              {{ aqi }}<span style="font-size: 0.8rem">(AQI)</span>
            </div>
@@ -119,22 +127,27 @@
        </div>
      </el-main>
    </el-aside>
    <el-container class="border-left border-right" style="margin: 0 10px">
    <el-container
      class="border-left border-right"
      style="margin: 0 10px"
    >
      <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;
@@ -211,8 +224,15 @@
            </div>
          </div>
        </div>
        <div class="border-top" style="display: flex; height: 50%">
          <div ref="main" class="middle1" style="flex: 1; padding-top: 2rem" />
        <div
          class="border-top"
          style="display: flex; height: 50%"
        >
          <div
            ref="main"
            class="middle1"
            style="flex: 1; padding-top: 2rem"
          />
          <!-- <line-chart :chart-data="lineChartData" /> -->
          <div
            class="border-left middle2"
@@ -223,9 +243,13 @@
              margin-left: 10px;
            "
          >
            <h3 style="font-size: 0.9rem">本月平均值</h3>
            <h3 style="font-size: 0.9rem">
              本月平均值
            </h3>
            <div>
              <div style="font-size: 0.9rem">{{ chartSensorName }}</div>
              <div style="font-size: 0.9rem">
                {{ chartSensorName }}
              </div>
              <div
                style="padding: 8px 0 0; font-size: 2.3rem; font-weight: bold"
              >
@@ -265,17 +289,30 @@
        >
          <div style="height: 100%; display: flex; flex-direction: column">
            <div style="height: 30%">
              <h3 v-if="macLat" style="text-align: center; font-size: 0.9rem">
              <h3
                v-if="macLat"
                style="text-align: center; font-size: 0.9rem"
              >
                <span>坐标：</span> {{ macLat }}, {{ macLng }}
              </h3>
              <h3 style="font-size: 0.9rem">实时监测超标预警</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>
@@ -284,7 +321,9 @@
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
        >
          <h3 style="text-align: center; font-size: 0.9rem">设备列表</h3>
          <h3 style="text-align: center; font-size: 0.9rem">
            设备列表
          </h3>
          <ul
            class="listUl"
            style="
@@ -310,7 +349,9 @@
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
        >
          <h3 style="text-align: center; font-size: 0.9rem">标准值</h3>
          <h3 style="text-align: center; font-size: 0.9rem">
            标准值
          </h3>
          <ul
            class="listUl"
            style="
@@ -336,9 +377,8 @@
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';

import { WWindUtil } from '@/components/Wind/WRatingArr.js'
import json from '@/assets/json/sensor.json'
import requestObj from '@/utils/request'
import * as echarts from 'echarts'
// import { parse } from 'path-to-regexp'
// import LineChart from '@/components/Echarts/LineChart'
@@ -351,13 +391,13 @@
  },
  filters: {
    // 过滤器替换websocket实时数据的key值
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
  },
  props: {},
  data() {
  data () {
    // 这里存放数据
    return {
      circle: 0,
@@ -440,25 +480,25 @@
  },
  // 计算属性 类似于data概念
  computed: {
    leftaSide() {
    leftaSide () {
      return this.$store.state.leftaSide
    }
  },
  // 监控data中的数据变化
  watch: {
    PM2_5Data(val) {
    PM2_5Data (val) {
      // console.log('新数据' + val)
      this.myChart = null
      this.drawChart()
    },
    leftaSide(n, o) {
    leftaSide (n, o) {
      // this.myChart.resize()
      this.myChart = null
      // this.drawChart()
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
  created () {
    this.$store.dispatch('app/toggleSideBar', 0)
    // this.$Cookies.set('sidebarStatus', 1)
    // setTimeout(() => {
@@ -490,7 +530,7 @@
    // this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  mounted () {
    // this.$nextTick(() => {
    //   console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz')
    //   this.drawChart()
@@ -504,11 +544,11 @@
    // 得到中间圆圈的宽高
    // this.getCircleWH()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {
    if (this.ws) {
      this.ws.close()
    }
@@ -516,11 +556,11 @@
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {},
  // 方法集合
  methods: {
    chuan(val) {
    chuan (val) {
      console.log(val)
      this.chartSensorKey[0] = {}
      this.chartSensorKey[0] = val
@@ -530,7 +570,7 @@
      // console.log(this.chartSensorKey[0].sensorCode);
      // console.log(this.chartSensorKey)
    },
    chuan2(val) {
    chuan2 (val) {
      console.log(val)
      this.chartSensorKey[0] = {}
      this.chartSensorKey[0] = val
@@ -539,7 +579,7 @@
      this.filterSensorName()
    },
    // 修改圆圈的宽高
    getCircleWH() {
    getCircleWH () {
      // var circleWHList = document.getElementsByClassName('circleWH')
      // var dom = this.$refs.test
      // var circleWHWidth = circleWHList[0].offsetWidth
@@ -547,13 +587,13 @@
      // console.log(circleWHWidth, circleWHeight, '宽高')
    },
    // 过滤图表因子名称
    filterSensorName() {
    filterSensorName () {
      this.chartSensorName = this.$options.filters.sensorFilter(
        this.chartSensorKey[0].sensorCode
      )
    },
    // 因子布局接口
    sensorLayout() {
    sensorLayout () {
      return new Promise((resolve, reject) => {
        this.$request({
          url: '/organizationLayout/getLayoutByMac',
@@ -583,7 +623,7 @@
      })
    },
    // 调用污染程度接口
    getAlarmLevels() {
    getAlarmLevels () {
      this.$axios
        .get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
          params: {
@@ -601,9 +641,9 @@
        })
    },
    // 获得实时日期更新
    getTime() {
    getTime () {
      var _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function() {
      this.timer = setInterval(function () {
        _this.currentTime = // 修改数据date
          _this.appendZero(new Date().getFullYear()) +
          '-' +
@@ -618,11 +658,11 @@
          _this.appendZero(new Date().getSeconds())
      }, 1000)
    },
    appendZero(obj) {
    appendZero (obj) {
      return obj < 10 ? '0' + obj : obj
    },
    // 切换设备重新加载信息
    reMac(newMac, i, name) {
    reMac (newMac, i, name) {
      this.PM2_5Data = []
      this.wsData2 = null
      this.url1 = require('@/assets/images/alarmlevel-1.png')
@@ -640,14 +680,14 @@
      }
    },
    // 遍历键名
    getkeyName() {
    getkeyName () {
      for (var kn in this.wsData2) {
        this.keyName.push(kn)
        alert(this.keyName)
      }
    },
    // 请求单台设备一个小时
    getHourlyAqi() {
    getHourlyAqi () {
      this.$request({
        url: '/deviceInfo/getHourlyAqi',
        method: 'get',
@@ -666,7 +706,7 @@
        })
    },
    // 请求单台设备某参数月平均值
    getSensorMonthAvg() {
    getSensorMonthAvg () {
      this.$request({
        url: '/deviceInfo/getMonthAvg',
        method: 'get',
@@ -686,7 +726,7 @@
        })
    },
    // 因子报警值排序
    alarmSort() {
    alarmSort () {
      this.sensorLayout().then(() => {
        var newAlarmLevel = {}
        for (let i = 0; i < this.totalArray.length; i++) {
@@ -701,7 +741,7 @@
      })
    },
    // ws请求
    websocketData() {
    websocketData () {
      if (this.ws) {
        this.ws.close()
      }
@@ -712,27 +752,26 @@
      // var param = this.macName
      // 拼写URL
      var socketUrl
      console.log('requestObj.baseUrl', requestObj.baseUrl)
      if (this.equipment === 'car') {
        socketUrl = requestObj.baseUrl + '/cruiserWebsocket/' + this.macName
        socketUrl = 'https://qx.7drlb.com/api/cruiserWebsocket/' + this.macName
        // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName
      } else {
        socketUrl = requestObj.baseUrl + '/singleDevice/' + this.macName
        socketUrl = 'https://qx.7drlb.com/api/singleDevice/' + this.macName
        // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName
      }
      // 替换http为WS
      console.log('socketUrl', socketUrl, this.macNamel)
      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)
@@ -754,20 +793,8 @@
          that.windDeg = windDirs
          if (windDirs === 0) {
            that.windDir = '北风'
          } else if (windDirs > 0 && windDirs < 90) {
            that.windDir = '东北风'
          } else if (windDirs === 90) {
            that.windDir = '东风'
          } else if (windDirs > 90 && windDirs < 180) {
            that.windDir = '东南风'
          } else if (windDirs === 180) {
            that.windDir = '南风'
          } else if (windDirs > 180 && windDirs < 270) {
            that.windDir = '西南风'
          } else if (windDirs === 270) {
            that.windDir = '西风'
          } else if (windDirs > 270 && windDirs < 360) {
            that.windDir = '西北风'
          } else {
            that.windDir = WWindUtil.windValueFormat(windDirs)
          }
        }
        that.alarmColour = {}
@@ -1201,7 +1228,7 @@
      }
    },
    // 设备因子报警值
    queryAlarmByMac() {
    queryAlarmByMac () {
      this.$request({
        url: '/deviceInfo/queryAlarmByMac',
        method: 'get',
@@ -1233,7 +1260,7 @@
        })
    },
    // 折线图
    drawChart() {
    drawChart () {
      const that = this
      var bar_dv = this.$refs.main
      if (bar_dv) {
@@ -1253,14 +1280,20 @@
            bottom: 25
          },
          tooltip: {
            // formatter:function(res){
            //   console.log(res,'res');
            //   var result=''
            //   var html1='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff;"></span>'
            //   result+=res[0].axisValue+"<br/>"+html1+res[0].value
            //   return result
            // },
            formatter: function (res) {
              console.log(res, 'res')
              var result = ''
              var html1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:red;"></span>'
              result += res[0].axisValue + '<br/>' + html1 + res[0].value
              return result
            },
            trigger: 'axis',
            backgroundColor: '#444', // 通过设置rgba调节背景颜色与透明度
            color: 'red',
            textStyle: { // 悬浮框文字样式
              color: '#fff',
              fontSize: 12
            },
            axisPointer: {
              type: 'cross',
              label: {
@@ -1289,6 +1322,22 @@
          },
          series: [
            {
              // prettier-ignore
              itemStyle: {
                normal: {
                  color: '#fff', // 拐点颜色
                  borderColor: 'red', // 拐点边框颜色
                  borderWidth: 3// 拐点边框大小
                },
                emphasis: { // 突出效果配置(鼠标置于拐点上时)
                  borderColor: '#c00', //  拐点边框颜色
                  borderWidth: 2, //  拐点边框宽度
                  shadowColor: '#c00', //  阴影颜色
                  shadowBlur: 3, //  阴影渐变范围控制
                  color: 'red'// hover拐点颜色定义
                }
              },
              symbolSize: 6,
              data: this.PM2_5Data,
              type: 'line',
              label: {
@@ -1302,8 +1351,8 @@
          ]
        }
        that.myChart.setOption(option)
        setTimeout(function() {
          window.onresize = function() {
        setTimeout(function () {
          window.onresize = function () {
            that.myChart.resize()
          }
        }, 200)