From 1ce8dd8980692da59fac09d4f868b490f7f74b88 Mon Sep 17 00:00:00 2001
From: yupan <yupanx@163.com>
Date: Thu, 27 Oct 2022 10:24:24 +0800
Subject: [PATCH] Merge branch 'master' of http://blit.7drlb.com:8888/r/moral_fronted
---
src/views/deviceDetail/index.vue | 180 +++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 123 insertions(+), 57 deletions(-)
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index 8a6ee6c..5e33e9e 100644
--- a/src/views/deviceDetail/index.vue
+++ b/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: [ 0, 35 ]</li>
+ <li :class="{liActive:libg==i}">PM10: [ 0, 50 ]</li>
+ <li :class="{liActive:libg==i}">NO2: [ 0, 40 ]</li>
+ <li :class="{liActive:libg==i}">SO2: [ 0, 50 ]</li>
+ <li :class="{liActive:libg==i}">CO: [ 0, 2 ]</li>
+ <li :class="{liActive:libg==i}">O3: [ 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>
--
Gitblit v1.8.0