Merge branch 'master' of http://blit.7drlb.com:8888/r/moral_fronted

yupan

2022-10-27 1ce8dd8980692da59fac09d4f868b490f7f74b88

 src/views/deviceDetail/index.vue

@@ -8,41 +8,41 @@
      height:'100%'
    }"
  >
    <el-aside width="450px">
    <el-aside width="31%">
      <el-main style="display:flex;flex-flow: column;height: 100%;padding-left: 0;padding-right: 0;margin-left:10px">
        <div
          class="left0"
          :style="{display:'flex',flexDirection:'column',alignContent:'center',flex:'1',padding: '0 20px 10px 20px'}"
        >
          <h3 style="text-align:center">{{ currentTime }}</h3>
          <h3 style="text-align:center;font-size: 0.9rem">{{ currentTime }}</h3>
          <!-- <div v-for="(val,key,i) in wsData2" v-if="i!=='name'&&i!=='address'" :key="i" style="flex:1;display:flex"> -->
          <!-- 左侧列表数组 -->
          <div v-for="(val,key,i) in defaultMonitorItems" :key="i" style="flex:1;display:flex">
            <span style="width:50%">{{ val.sensorCode |sensorFilter }}</span>
            <span><el-progress :text-inside="true" :stroke-width="15" :percentage="val.alarm" :color="val.colour" style="width:150px" /></span>
            <span style="width:50%;text-align:right">{{ val.value }}</span>
            <span style="width:33%;font-size: 0.9rem">{{ 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>
            <span style="width:34%;text-align:right;font-size: 0.9rem">{{ val.value }}</span>
<!--            <span><el-progress v-if="val.alarm" :text-inside="true" :stroke-width="15" :percentage="val.alarm>100?100:val.alarm" :color="val.colour" style="width:150px" /></span>
            <span style="width:50%;text-align:right">{{ val.value }}</span>-->
          </div>
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="0" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="50" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="33" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="33" status="success" /><span>mg/m³</span> </div>   :stroke-width="15"-->
        </div>
        <div class="border-top" style="height:150px;display:flex;margin-top:10px">
          <!-- 左下角风向数组 -->
          <div v-if="wsData2 && wsData2.a01008" class="border-right left1" style="display:flex;flex:1;justify-content: space-around;align-items: center">
            <div style="position:relative">
              <img
                style="width: 80px; height: 80px"
                style="width: 5.5rem; height: 5.5rem"
                :src="compassBg"
              >
              <img
                style="width: 30px; height: 30px;position: absolute;left: 0;top: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);"
                style="font-size:2rem;width: 2rem; height: 2rem;position: absolute;left: 0;top: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);"
                :src="compassDirection"
                :style="{transform:'translate(-50%, -50%) rotate('+ windDeg +'deg)'}"
              >
            </div>
            <div style="text-align:center;font-size:20px">
            <div style="text-align:center;font-size:1rem">
              <div>{{ windDir }}</div>
              <div style="margin-top:15px">{{ wsData2? wsData2.a01008:'无数据' }}</div>
            </div>
@@ -51,24 +51,26 @@
            class="left2"
            style="flex: 1 1 0%;text-align: center;display: flex;flex-direction: column;justify-content: center"
          >
            <div style="font-size:18px">空气质量指数(小时平均)</div>
            <div style="font-size:30px;margin-top:7px">
              {{ aqi }}<span style="font-size:16px">(AQI)</span>
            <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>
          </div>
        </div>
      </el-main>
    </el-aside>
    <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="text-align:center;text-align: center;margin: 0;padding-top: 20px;font-size: 20px;" @click="websocketData()">{{ deviceName? deviceName:'停机' }}</h1></el-header>
      <el-header class="title0" style="text-align:center;display:unset!important;margin-top:10px;"><h1 style="text-align:center;text-align: center;margin: 0;padding-top: 20px;font-size: 1.2rem" @click="websocketData()">{{ deviceName? deviceName:'停机' }}</h1></el-header>
      <el-main style="padding-left:0;padding-right:0;padding-top:0;display: flex;flex-direction: column;" class="noneScoll">
        <div class="middle0" style="padding: 20px 0;margin-bottom: 10px;height:50%;min-height:394px">
          <div style="display:flex;flex-flow: row wrap;height:356px">
            <!-- 中间核心数组 -->
            <div v-for="(val,key,i) in coreMonitorItems" :key="i" style="position: relative;width:33%">
              <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 v-for="(val,key,i) in coreMonitorItems" :key="i" style="position: relative;width:33%;height: 50%;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 style="position: relative;width: 75%;height:80%;margin: 0px auto;background-size: contain;background-position:center" :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,}">
                <!-- <img :src="{alarmBg5:val.bg === 5,alarmBg4:val.bg === 4,alarmBg3:val.bg === 3,alarmBg2:val.bg === 2,alarmBg1:val.bg === 1,alarmBg0:val.bg === 0}" alt="" style="display: block;margin: 0 auto;"> -->
                <div style="position: absolute;top: 0;left: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>
<!--                <div style="position: absolute;top: 0;left: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>-->
                <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>
              </div>
              <div style="text-align:center;padding-top:5px">{{ val.sensorCode |sensorFilter }}</div>
            </div>
@@ -77,39 +79,51 @@
        <div class="border-top" style="display:flex;height:50%">
          <div ref="main" class="middle1" style="flex:1;padding-top:30px" />
          <!-- <line-chart :chart-data="lineChartData" /> -->
          <div class="border-left middle2" style="width: 150px;text-align:center;padding-top:50px;margin-left:10px">
            <h3>本月平均值</h3>
          <div class="border-left middle2" style="width: 11rem;text-align:center;padding-top:50px;margin-left:10px">
            <h3 style="font-size: 0.9rem">本月平均值</h3>
            <div>
              <div>非甲烷总烃</div>
              <div style="padding:8px 0 0;font-size:40px;font-weight:bold">{{ average }}</div>
              <div style="text-align:right;padding-right:10px">(ppm)</div>
              <div style="font-size: 0.9rem">非甲烷总烃</div>
              <div style="padding:8px 0 0;font-size:2.3rem;font-weight:bold">{{ average }}</div>
              <div style="text-align:right;padding-right:10px;font-size: 0.9rem">(ppm)</div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-aside width="400px">
    <el-aside width="21%">
      <el-main
        style="padding-left:0;padding-right:0;display: flex;flex-direction: column;margin-right:10px;overflow:hidden"
      >
        <div class="border-bottom right0" style="text-align: center;padding:20px 0 33px 0;margin-bottom:10px;height:60%">
        <div class="border-bottom right0" style="text-align: center;padding-bottom: 25px;margin-bottom:10px;height: 60%">
          <div style="height:100%;display: flex;flex-direction: column;">
            <div style="height:20%">
              <h3 style="text-align:center"><span>坐标：</span>  {{ macLat }}, {{ macLng }}</h3>
              <h3>实时监测超标预警</h3>
            <div style="height:30%">
              <h3 style="text-align:center;font-size: 0.9rem" v-if="macLat"><span>坐标：</span>  {{ macLat }}, {{ macLng }}</h3>
              <h3 style="font-size: 0.9rem">实时监测超标预警</h3>
            </div>
            <div style="height:70%">
              <img style="" :src="url1" alt="" style="height:100%">
<!--              padding-top: 4%-->
              <img style="" :src="url1" alt="" style="width:70%">
            </div>
            <div>
              <img style="" :src="url2" alt="">
              <img style="width: 75%" :src="url2" alt="">
            </div>
          </div>
        </div>
        <div class="right1" style="height:40%;display: flex;flex-direction: column;">
          <h3 style="text-align:center">设备列表</h3>
          <ul class="listUl" style="overflow: auto;padding-right:40px">
        <div class="right1" style="height:40%;display: flex;flex-direction: column;" v-if="monitorPointInfo">
          <h3 style="text-align:center; font-size: 0.9rem">设备列表</h3>
          <ul class="listUl" style="overflow: auto;padding:0 10% 10% 10%;font-size: 0.9rem; margin-top: 0">
            <li v-for="(v,i) in monitorPointInfo.devices" :key="i" class="listLi" :class="{liActive:libg==i}" @click="reMac(v.mac,i,v.name)">{{ v.name }}</li>
          </ul>
        </div>
        <div class="right1" style="height:40%;display: flex;flex-direction: column;" v-else>
          <h3 style="text-align:center; font-size: 0.9rem">标准值</h3>
          <ul class="listUl" style="overflow: auto;padding:0 10%;font-size: 0.9rem; margin-top: 0">
            <li :class="{liActive:libg==i}">PM2.5: &nbsp;[ 0, 35 ]</li>
            <li :class="{liActive:libg==i}">PM10: &nbsp;&nbsp;[ 0, 50 ]</li>
            <li :class="{liActive:libg==i}">NO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 40 ]</li>
            <li :class="{liActive:libg==i}">SO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 50 ]</li>
            <li :class="{liActive:libg==i}">CO: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 2 ]</li>
            <li :class="{liActive:libg==i}">O3: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 100 ]</li>
          </ul>
        </div>
      </el-main>
@@ -198,7 +212,16 @@
      defaultMonitorItems: [],
      fixedMonitorItems: [],
      totalArray: [],
      chartSensorName: ''
      chartSensorName: '',
      equipment: '', // 设备名称
      standardValue: {
        PM2_5: '',
        PM10: '',
        CO2: '',
        SO2: '',
        CO: '',
        O3: ''
      }
    }
  },
  // 计算属性 类似于data概念
@@ -230,6 +253,7 @@
    // this.macName = this.$route.params.macName
    this.macName = this.$route.query.macName
    this.libg = this.$route.query.indexs
    this.equipment = this.$route.query.equipment
    // this.macLat = this.$route.query.items
    // this.macLng = this.$route.query.items
    // this.monitorPointInfo = this.$route.params.monitorPointInfo
@@ -261,6 +285,8 @@
    // setTimeout(() => {
    //   this.drawChart()
    // }, 1000)
    // 得到中间圆圈的宽高
    // this.getCircleWH()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
@@ -278,6 +304,14 @@
  activated() {},
  // 方法集合
  methods: {
    // 修改圆圈的宽高
    getCircleWH() {
      // var circleWHList = document.getElementsByClassName('circleWH')
      // var dom = this.$refs.test
      // var circleWHWidth = circleWHList[0].offsetWidth
      // var circleWHeight = circleWHList[0].offsetHeight
      // console.log(circleWHWidth, circleWHeight, '宽高')
    },
    // 过滤图表因子名称
    filterSensorName() {
      this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode)
@@ -356,8 +390,10 @@
      this.getHourlyAqi()
      this.getSensorMonthAvg()
      this.websocketData()
      this.macLat = this.monitorPointInfo.devices[i].latitude
      this.macLng = this.monitorPointInfo.devices[i].longitude
      if (this.monitorPointInfo.devices) {
        this.macLat = this.monitorPointInfo.devices[i].latitude
        this.macLng = this.monitorPointInfo.devices[i].longitude
      }
    },
    // 遍历键名
    getkeyName() {
@@ -410,6 +446,7 @@
            }
          }
        }
        // console.log(newAlarmLevel, 'newAlarmLevel')
        this.alarmLevel = newAlarmLevel
      })
    },
@@ -423,7 +460,12 @@
      // var param = this.accountId + '&' + this.orgId + '&' + this.macName
      // var param = this.macName
      // 拼写URL
      var socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
      var socketUrl
      if (this.equipment === 'car') {
        socketUrl = 'http://47.99.64.149:8081/cruiserWebsocket/' + this.macName
      } else {
        socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
      }
      // 替换http为WS
      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

@@ -467,10 +509,10 @@
        that.alarmBg = {}
        // 报警等级
        for (const key in that.wsData2) {
          // console.log(key)
          if (key === that.chartSensorKey[0].sensorCode) {
          if (that.chartSensorKey && key === that.chartSensorKey[0].sensorCode) {
            that.chartSensorKey[0].value = that.wsData2[key]
          }
          // console.log(that.alarmLevel, 'that.alarmLevel')
          for (const keys in that.alarmLevel) {
            // 遍历进度条颜色
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
@@ -521,24 +563,29 @@
            } else if (key === keys) {
              that.alarmProgress[keys] = 0
            }
            if (that.alarmProgress[keys] > 100) {
              that.alarmProgress[keys] = 100
            }
          }
        }
        // 实时数据改变合并数组的值
        for (let i = 0; i < that.totalArray.length; i++) {
          for (const key in that.wsData2) {
          // 获取数据的小数
            var tempDecimal = that.wsData2[key].replace(/[^\d.]/g, '').split('.')[1]
            if (that.totalArray[i].sensorCode === key) {
              // 臭气和湿度保留整数
              if (that.totalArray[i].sensorCode === 'a19002') {
                that.totalArray[i].value = parseInt(that.wsData2[key])
              } else if (that.totalArray[i].sensorCode === 'a01002') {
                that.totalArray[i].value = parseInt(that.wsData2[key]) + '%'
                // 除了TVOCQ其他因子数据小数是零的就去掉小数
              } else if (that.totalArray[i].sensorCode !== 'a99054' && Number(tempDecimal) === 0) {
                that.totalArray[i].value = parseInt(that.wsData2[key]) + that.wsData2[key].split(' ')[1]
              } else {
                that.totalArray[i].value = that.wsData2[key]
            if (key !== 'time') {
              // 获取数据的小数
              var tempDecimal = that.wsData2[key].replace(/[^\d.]/g, '').split('.')[1]
              if (that.totalArray[i].sensorCode === key) {
                // 臭气和湿度保留整数
                if (that.totalArray[i].sensorCode === 'a19002') {
                  that.totalArray[i].value = parseInt(that.wsData2[key])
                } else if (that.totalArray[i].sensorCode === 'a01002') {
                  that.totalArray[i].value = parseInt(that.wsData2[key]) + '%'
                  // 除了TVOCQ其他因子数据小数是零的就去掉小数
                } else if (that.totalArray[i].sensorCode !== 'a99054' && Number(tempDecimal) === 0) {
                  that.totalArray[i].value = parseInt(that.wsData2[key]) + that.wsData2[key].split(' ')[1]
                } else {
                  that.totalArray[i].value = that.wsData2[key]
                }
              }
            }
          }
@@ -666,14 +713,16 @@
        for (const key in that.wsData2) {
          // 右侧报警背景图
          for (const keys in that.alarmLevel) {
            var alarmLevel = {}
            alarmLevel[keys] = JSON.parse(that.alarmLevel[keys])
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
              const wsData2KeyData = parseInt(that.wsData2[key])
              const alarmLevelsData0 = that.alarmLevel[keys][0]
              const alarmLevelsData1 = that.alarmLevel[keys][1]
              const alarmLevelsData2 = that.alarmLevel[keys][2]
              const alarmLevelsData3 = that.alarmLevel[keys][3]
              const alarmLevelsData4 = that.alarmLevel[keys][4]
              const alarmLevelsData5 = that.alarmLevel[keys][5]
              const alarmLevelsData0 = alarmLevel[keys][0]
              const alarmLevelsData1 = alarmLevel[keys][1]
              const alarmLevelsData2 = alarmLevel[keys][2]
              const alarmLevelsData3 = alarmLevel[keys][3]
              const alarmLevelsData4 = alarmLevel[keys][4]
              const alarmLevelsData5 = alarmLevel[keys][5]

              if (wsData2KeyData > alarmLevelsData5) {
                that.alarmLevelsStatus = 5
@@ -859,6 +908,11 @@
          }]
        }
        that.myChart.setOption(option)
        setTimeout(function() {
          window.onresize = function() {
            that.myChart.resize()
          }
        }, 200)
      } else {
        console.log('容器为空')
      }
@@ -964,7 +1018,7 @@
}
.title0{
  background: url('../../assets/images/标题.png') no-repeat;
  background-size: 50% 90%;
  background-size: 70% 90%;
  background-position: center;
}
.alarmBg5{
@@ -1007,4 +1061,16 @@
  /* border-bottom: 1px solid #eee; */
  border: none;
}
.class1{
  height: 60%;
}
.class2{
  height: 100%;
}
/deep/ .el-progress-bar__outer{
  height: 1rem !important;
}
/deep/ .el-progress-bar__innerText{
  font-size: 0.8rem;
}
</style>