fix:设备详情折线图修改

quanyawei

2023-09-28 1ed56de483f781924515fda5613e5c4072b3fcf7

fix:设备详情折线图修改

 src/views/deviceDetail/index.vue

@@ -41,12 +41,13 @@
            <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
@@ -74,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;
@@ -91,7 +92,7 @@
                :style="{
                  transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
                }"
              />
              >
            </div>
            <div style="text-align: center; font-size: 1rem">
              <div>{{ windDir }}</div>
@@ -122,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;
@@ -159,6 +159,7 @@
            <div
              v-for="(val, key, i) in coreMonitorItems"
              :key="i"
              ref="test"
              style="
                position: relative;
                width: 33%;
@@ -166,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
@@ -237,7 +237,7 @@
                  padding-right: 10px;
                  font-size: 0.9rem;
                "
              ></div>
              />
            </div>
          </div>
        </div>
@@ -265,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
@@ -306,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
@@ -338,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'
@@ -349,10 +350,10 @@
  },
  filters: {
    // 过滤器替换websocket实时数据的key值
    sensorFilter: function (value) {
    sensorFilter: function(value) {
      if (!value) return ''
      return json[value]
    },
    }
  },
  props: {},
  data() {
@@ -363,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,
@@ -387,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: {},
@@ -432,15 +433,15 @@
        CO2: '',
        SO2: '',
        CO: '',
        O3: '',
      },
        O3: ''
      }
    }
  },
  // 计算属性 类似于data概念
  computed: {
    leftaSide() {
      return this.$store.state.leftaSide
    },
    }
  },
  // 监控data中的数据变化
  watch: {
@@ -452,7 +453,7 @@
      // this.myChart.resize()
      this.myChart = null
      // this.drawChart()
    },
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
@@ -556,8 +557,8 @@
          url: '/organizationLayout/getLayoutByMac',
          method: 'get',
          params: {
            mac: this.macName,
          },
            mac: this.macName
          }
        })
          .then((res) => {
            console.log(res, '因子布局接口')
@@ -585,8 +586,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 +601,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 +650,8 @@
        url: '/deviceInfo/getHourlyAqi',
        method: 'get',
        params: {
          mac: this.macName,
        },
          mac: this.macName
        }
      })
        .then((res) => {
          // console.log('以下是getHourlyAqi请求的返回')
@@ -669,8 +670,8 @@
        method: 'get',
        params: {
          sensorCode: this.chartSensorKey[0].sensorCode,
          mac: this.macName,
        },
          mac: this.macName
        }
      })
        .then((res) => {
          // console.log(res,'123');
@@ -720,13 +721,13 @@

      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)
@@ -1200,8 +1201,8 @@
        url: '/deviceInfo/queryAlarmByMac',
        method: 'get',
        params: {
          mac: this.macName,
        },
          mac: this.macName
        }
      })
        .then((res) => {
          console.log(res, 'res')
@@ -1231,7 +1232,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,29 +1240,35 @@
            Color: 'white',
            textStyle: {
              // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              color: '#fff',
            },
              color: '#fff'
            }
          },
          grid: {
            top: 50,
            bottom: 25,
            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: {
                backgroundColor: '#6a7985',
                color: '#fff',
              },
            },
                color: '#fff'
              }
            }
          },
          xAxis: {
            type: 'category',
@@ -1269,49 +1276,68 @@
            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: [
            {
              // 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: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#fff',
                },
                  color: '#fff'
                }
              },
            },
          ],
              lineStyle: {
                color: '#e9071c' // 设置线的颜色为红色
              }
            }
          ]
        }
        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>