From 9eb85404a96658d83fc0168f306adabb8c1c992e Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 14 Nov 2023 10:31:03 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/views/deviceDetail/index.vue | 975 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 730 insertions(+), 245 deletions(-)
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index 8a6ee6c..0fe0de8 100644
--- a/src/views/deviceDetail/index.vue
+++ b/src/views/deviceDetail/index.vue
@@ -3,113 +3,329 @@
:style="{
color: '#fff',
backgroundSize: 'cover',
- backgroundImage:
- 'url(' + require('../../assets/images/sixBg2.jpg') + ')',
- height:'100%'
+ backgroundImage: 'url(' + require('../../assets/images/sixBg2.jpg') + ')',
+ height: '100%',
}"
>
- <el-aside width="450px">
- <el-main style="display:flex;flex-flow: column;height: 100%;padding-left: 0;padding-right: 0;margin-left:10px">
+ <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'}"
+ :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><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>
+ <div
+ 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>
+ <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
+ 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">
+ <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: 5.5rem; height: 5.5rem" :src="compassBg">
<img
- style="width: 80px; height: 80px"
- :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)'}"
+ :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 style="margin-top: 15px">
+ {{ wsData2 ? wsData2.a01008 : '���������' }}
+ </div>
</div>
</div>
<div
class="left2"
- style="flex: 1 1 0%;text-align: center;display: flex;flex-direction: column;justify-content: center"
+ 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-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">
+ <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: 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"
+ ref="test"
+ style="
+ position: relative;
+ width: 33%;
+ height: 50%;
+ font-size: 0.9rem;
+ "
+ class="circleWH"
+ >
+ <!-- <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
+ style="text-align: center; padding-top: 5px"
+ @click="chuan2(val)"
+ >
+ {{ val.sensorCode | sensorFilter }}
+ </div>
</div>
</div>
</div>
- <div class="border-top" style="display:flex;height:50%">
- <div ref="main" class="middle1" style="flex:1;padding-top:30px" />
+ <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" 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">{{ chartSensorName }}</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;
+ "
+ />
</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"
+ 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 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
+ 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: 30%">
+ <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%">
- <img style="" :src="url1" alt="" style="height:100%">
+ <div style="height: 70%">
+ <!-- padding-top: 4%-->
+ <img :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">
- <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>
+ <div
+ v-if="monitorPointInfo"
+ class="right1"
+ style="height: 40%; display: flex; flex-direction: column"
+ >
+ <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
+ v-else
+ class="right1"
+ style="height: 40%; display: flex; flex-direction: column"
+ >
+ <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>PM2.5: [ 0, 35 ]</li>
+ <li>PM10: [ 0, 50 ]</li>
+ <li>NO2: [ 0, 40 ]</li>
+ <li>SO2: [ 0, 150 ]</li>
+ <li>CO: [ 0, 2 ]</li>
+ <li>O3: [ 0, 160 ]</li>
</ul>
</div>
</el-main>
@@ -122,12 +338,15 @@
// ���������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'
export default {
-// import ���������������������������������������������������
+ // import ���������������������������������������������������
components: {
// LineChart
+ // draggable
},
filters: {
// ���������������websocket���������������key���
@@ -136,8 +355,7 @@
return json[value]
}
},
- props: {
- },
+ props: {},
data() {
// ������������������
return {
@@ -169,6 +387,14 @@
alarmLevels: null,
// ������������
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
+ }, // ������������������
// ���������������
alarmProgress: {},
// ������������
@@ -194,11 +420,21 @@
alarmBg0: require('@/assets/images/level0_circle0.gif'),
deviceName: '',
chartSensorKey: [],
+ chartSensor1: '',
coreMonitorItems: [],
defaultMonitorItems: [],
fixedMonitorItems: [],
totalArray: [],
- chartSensorName: ''
+ chartSensorName: '',
+ equipment: '', // ������������
+ standardValue: {
+ PM2_5: '',
+ PM10: '',
+ CO2: '',
+ SO2: '',
+ CO: '',
+ O3: ''
+ }
}
},
// ������������ ���������data������
@@ -211,6 +447,7 @@
watch: {
PM2_5Data(val) {
// console.log('���������' + val)
+ this.myChart = null
this.drawChart()
},
leftaSide(n, o) {
@@ -230,11 +467,13 @@
// 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
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()
@@ -242,7 +481,7 @@
this.websocketData()
this.getkeyName()
this.getHourlyAqi()
- this.getSensorMonthAvg()
+ // this.getSensorMonthAvg()
this.$watch('chartSensorKey', () => {
this.filterSensorName()
})
@@ -261,6 +500,8 @@
// setTimeout(() => {
// this.drawChart()
// }, 1000)
+ // ���������������������������
+ // this.getCircleWH()
},
beforeCreate() {}, // ������������ - ������������
beforeMount() {}, // ������������ - ������������
@@ -278,9 +519,37 @@
activated() {},
// ������������
methods: {
+ chuan(val) {
+ console.log(val)
+ this.chartSensorKey[0] = {}
+ this.chartSensorKey[0] = val
+ this.getSensorMonthAvg()
+ this.PM2_5Data = []
+ this.filterSensorName()
+ // console.log(this.chartSensorKey[0].sensorCode);
+ // console.log(this.chartSensorKey)
+ },
+ chuan2(val) {
+ console.log(val)
+ this.chartSensorKey[0] = {}
+ this.chartSensorKey[0] = val
+ this.getSensorMonthAvg()
+ this.PM2_5Data = []
+ this.filterSensorName()
+ },
+ // ���������������������
+ 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)
+ this.chartSensorName = this.$options.filters.sensorFilter(
+ this.chartSensorKey[0].sensorCode
+ )
},
// ������������������
sensorLayout() {
@@ -292,52 +561,60 @@
mac: this.macName
}
})
- .then(res => {
- // console.log('������������������')
- // console.log(res)
+ .then((res) => {
+ console.log(res, '������������������')
this.chartSensorKey = res.data.chartSensorKey
this.coreMonitorItems = res.data.coreMonitorItems
this.defaultMonitorItems = res.data.defaultMonitorItems
this.fixedMonitorItems = res.data.fixedMonitorItems
- this.totalArray.push(...this.chartSensorKey, ...this.coreMonitorItems, ...this.defaultMonitorItems, ...this.fixedMonitorItems)
+ this.totalArray.push(
+ ...this.chartSensorKey,
+ ...this.coreMonitorItems,
+ ...this.defaultMonitorItems,
+ ...this.fixedMonitorItems
+ )
+ this.getSensorMonthAvg()
resolve()
})
- .catch(err => {
+ .catch((err) => {
console.log(err)
})
})
},
// ������������������������
getAlarmLevels() {
- this.$axios.get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
- params: {
- mac: this.macName,
- primaryKey: this.macName
- }
- }).then((res) => {
- this.alarmLevels = res.data
- // console.log('���������alarm-levels���������')
- // console.log(this.alarmLevels)
- }).catch((err) => {
- console.log(err)
- })
+ this.$axios
+ .get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
+ params: {
+ mac: this.macName,
+ primaryKey: this.macName
+ }
+ })
+ .then((res) => {
+ this.alarmLevels = res.data
+ // console.log('���������alarm-levels���������')
+ // console.log(this.alarmLevels)
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ������������������������
getTime() {
var _this = this // ������������������������Vue������this������������������������
this.timer = setInterval(function() {
_this.currentTime = // ������������date
- _this.appendZero(new Date().getFullYear()) +
- '-' +
- _this.appendZero((new Date().getMonth() + 1)) +
- '-' +
- _this.appendZero(new Date().getDate()) +
- ' ' +
- _this.appendZero(new Date().getHours()) +
- ': ' +
- _this.appendZero(new Date().getMinutes()) +
- ': ' +
- _this.appendZero(new Date().getSeconds())
+ _this.appendZero(new Date().getFullYear()) +
+ '-' +
+ _this.appendZero(new Date().getMonth() + 1) +
+ '-' +
+ _this.appendZero(new Date().getDate()) +
+ ' ' +
+ _this.appendZero(new Date().getHours()) +
+ ': ' +
+ _this.appendZero(new Date().getMinutes()) +
+ ': ' +
+ _this.appendZero(new Date().getSeconds())
}, 1000)
},
appendZero(obj) {
@@ -356,8 +633,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() {
@@ -374,13 +653,16 @@
params: {
mac: this.macName
}
- }).then((res) => {
- // console.log('���������getHourlyAqi���������������')
- // console.log(res)
- this.aqi = res.data.AQI
- }).catch((err) => {
- console.log(err)
})
+ .then((res) => {
+ // console.log('���������getHourlyAqi���������������')
+ // console.log(res)
+ this.aqi = res.data.AQI
+ })
+ .catch((err) => {
+ // console.log(this.chartSensorKey[0].sensorCode);
+ console.log(err)
+ })
},
// ���������������������������������������
getSensorMonthAvg() {
@@ -388,16 +670,19 @@
url: '/deviceInfo/getMonthAvg',
method: 'get',
params: {
- sensorCode: 'a24088',
+ sensorCode: this.chartSensorKey[0].sensorCode,
mac: this.macName
}
- }).then((res) => {
- // console.log('���������sensorMonthAvg���������������')
- // console.log(res)
- this.average = res.data.avg
- }).catch((err) => {
- console.log(err)
})
+ .then((res) => {
+ // console.log(res,'123');
+ // console.log('���������sensorMonthAvg���������������')
+ // console.log(res)
+ this.average = res.data.avg
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ���������������������
alarmSort() {
@@ -410,6 +695,7 @@
}
}
}
+ // console.log(newAlarmLevel, 'newAlarmLevel')
this.alarmLevel = newAlarmLevel
})
},
@@ -418,30 +704,50 @@
if (this.ws) {
this.ws.close()
}
+
var that = this
// ������������
// 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 = 'https://qx.7drlb.com/api/cruiserWebsocket/' + this.macName
+ // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName
+ } else {
+ 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() {
console.log('websocket������������')
}
+ console.log(2)
// this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
// ������������������
this.ws.onmessage = function(msg) {
+ // console.log(1);
// if (JSON.parse(msg.data).������) {
that.wsData2 = JSON.parse(msg.data)
+ console.log(that.wsData2, 'that.wsData2')
+ // that.wsData2.on('click',function (params) {
+ // console.log(params);
+ // })
+ if (that.wsData2.dustld) {
+ that.wsData2.dustld = that.wsData2.dustld.replace(/g/, 'ug')
+ }
// console.log('���������websocket������������')
- // console.log(that.wsData2)
+ // console.log(that.wsData2, '0')
// ������������
if (that.wsData2.a01008) {
- var windDirs = Number(that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1))
+ var windDirs = Number(
+ that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1)
+ )
// console.log(windDirs)
that.windDeg = windDirs
if (windDirs === 0) {
@@ -467,26 +773,46 @@
that.alarmBg = {}
// ������������
for (const key in that.wsData2) {
- // console.log(key)
- if (key === that.chartSensorKey[0].sensorCode) {
+ // console.log(key,'key');
+ if (
+ that.chartSensorKey &&
+ key === that.chartSensorKey[0].sensorCode
+ ) {
+ // console.log(that.wsData2[key],'kk');
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])) {
- if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[5])) {
- that.alarmColour[keys] = '#9f012f'
+ if (
+ parseFloat(that.wsData2[key]) >=
+ parseFloat(JSON.parse(that.alarmLevel[keys])[5])
+ ) {
+ that.alarmColour[keys] = '#000000'
that.alarmBg[keys] = 5
- } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[4])) {
+ } else if (
+ parseFloat(that.wsData2[key]) >=
+ parseFloat(JSON.parse(that.alarmLevel[keys])[4])
+ ) {
that.alarmColour[keys] = '#c00261'
that.alarmBg[keys] = 4
- } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[3])) {
+ } else if (
+ parseFloat(that.wsData2[key]) >=
+ parseFloat(JSON.parse(that.alarmLevel[keys])[3])
+ ) {
that.alarmColour[keys] = '#fc0101'
that.alarmBg[keys] = 3
- } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[2])) {
+ } else if (
+ parseFloat(that.wsData2[key]) >=
+ parseFloat(JSON.parse(that.alarmLevel[keys])[2])
+ ) {
that.alarmColour[keys] = '#ff8202'
that.alarmBg[keys] = 2
- } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[1])) {
+ } else if (
+ parseFloat(that.wsData2[key]) >=
+ parseFloat(JSON.parse(that.alarmLevel[keys])[1])
+ ) {
that.alarmColour[keys] = '#fdff00'
that.alarmBg[keys] = 1
} else {
@@ -500,45 +826,81 @@
// ������������������������
if (key === keys && JSON.parse(that.alarmLevel[keys])) {
if (JSON.parse(that.alarmLevel[keys])[5]) {
- const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[5]) * 100)
+ const percentage = Math.round(
+ (parseFloat(that.wsData2[key]) /
+ parseFloat(JSON.parse(that.alarmLevel[keys])[5])) *
+ 100
+ )
that.alarmProgress[keys] = percentage
} else if (JSON.parse(that.alarmLevel[keys])[4]) {
- const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[4]) * 100)
+ const percentage = Math.round(
+ (parseFloat(that.wsData2[key]) /
+ parseFloat(JSON.parse(that.alarmLevel[keys])[4])) *
+ 100
+ )
that.alarmProgress[keys] = percentage
} else if (JSON.parse(that.alarmLevel[keys])[3]) {
- const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[3]) * 100)
+ const percentage = Math.round(
+ (parseFloat(that.wsData2[key]) /
+ parseFloat(JSON.parse(that.alarmLevel[keys])[3])) *
+ 100
+ )
that.alarmProgress[keys] = percentage
} else if (JSON.parse(that.alarmLevel[keys])[2]) {
- const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[2]) * 100)
+ const percentage = Math.round(
+ (parseFloat(that.wsData2[key]) /
+ parseFloat(JSON.parse(that.alarmLevel[keys])[2])) *
+ 100
+ )
that.alarmProgress[keys] = percentage
} else if (JSON.parse(that.alarmLevel[keys])[1]) {
- const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[1]) * 100)
+ const percentage = Math.round(
+ (parseFloat(that.wsData2[key]) /
+ parseFloat(JSON.parse(that.alarmLevel[keys])[1])) *
+ 100
+ )
that.alarmProgress[keys] = percentage
} else if (JSON.parse(that.alarmLevel[keys])[0]) {
- const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[0]) * 100)
+ const percentage = Math.round(
+ (parseFloat(that.wsData2[key]) /
+ parseFloat(JSON.parse(that.alarmLevel[keys])[0])) *
+ 100
+ )
that.alarmProgress[keys] = percentage
}
} 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]
+ }
}
}
}
@@ -581,83 +943,115 @@
// ������PM2.5���������������
if (e1Data > 250) {
that.e1Bg = require('@/assets/images/level0_circle5.gif')
+ that.coreMonitorItems[0].bg = 5
} else if (e1Data > 150) {
+ that.coreMonitorItems[0].bg = 4
that.e1Bg = require('@/assets/images/level0_circle4.gif')
} else if (e1Data > 115) {
+ that.coreMonitorItems[0].bg = 3
that.e1Bg = require('@/assets/images/level0_circle3.gif')
} else if (e1Data > 75) {
+ that.coreMonitorItems[0].bg = 2
that.e1Bg = require('@/assets/images/level0_circle2.gif')
} else if (e1Data > 35) {
+ that.coreMonitorItems[0].bg = 1
that.e1Bg = require('@/assets/images/level0_circle1.gif')
} else {
+ // console.log(that.coreMonitorItems[0].bg,'bg');
+ // that.coreMonitorItems[0].bg=1
that.e1Bg = require('@/assets/images/level0_circle0.gif')
}
// ������PM10���������������
if (e2Data > 420) {
+ that.coreMonitorItems[1].bg = 5
that.e2Bg = require('@/assets/images/level0_circle5.gif')
} else if (e2Data > 350) {
+ that.coreMonitorItems[1].bg = 4
that.e2Bg = require('@/assets/images/level0_circle4.gif')
} else if (e2Data > 250) {
+ that.coreMonitorItems[1].bg = 3
that.e2Bg = require('@/assets/images/level0_circle3.gif')
} else if (e2Data > 150) {
+ that.coreMonitorItems[1].bg = 2
that.e2Bg = require('@/assets/images/level0_circle2.gif')
} else if (e2Data > 50) {
+ 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[4].bg = 5
that.e10Bg = require('@/assets/images/level0_circle5.gif')
} else if (e10Data > 60) {
+ that.coreMonitorItems[4].bg = 4
that.e10Bg = require('@/assets/images/level0_circle4.gif')
} else if (e10Data > 35) {
+ that.coreMonitorItems[4].bg = 3
that.e10Bg = require('@/assets/images/level0_circle3.gif')
} else if (e10Data > 10) {
+ that.coreMonitorItems[4].bg = 2
that.e10Bg = require('@/assets/images/level0_circle2.gif')
} else if (e10Data > 5) {
+ 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 > 90) {
+ if (e11Data > 1600) {
+ that.coreMonitorItems[3].bg = 5
that.e11Bg = require('@/assets/images/level0_circle5.gif')
- } else if (e11Data > 60) {
+ } else if (e11Data > 800) {
+ that.coreMonitorItems[3].bg = 4
that.e11Bg = require('@/assets/images/level0_circle4.gif')
- } else if (e11Data > 35) {
+ } else if (e11Data > 650) {
+ that.coreMonitorItems[3].bg = 3
that.e11Bg = require('@/assets/images/level0_circle3.gif')
- } else if (e11Data > 10) {
+ } else if (e11Data > 500) {
+ that.coreMonitorItems[3].bg = 2
that.e11Bg = require('@/assets/images/level0_circle2.gif')
- } else if (e11Data > 5) {
+ } else if (e11Data > 150) {
+ 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.e15Bg = require('@/assets/images/level0_circle5.gif')
} else if (e15Data > 400) {
+ that.coreMonitorItems[5].bg = 4
that.e15Bg = require('@/assets/images/level0_circle4.gif')
} else if (e15Data > 300) {
+ that.coreMonitorItems[5].bg = 3
that.e15Bg = require('@/assets/images/level0_circle3.gif')
} else if (e15Data > 200) {
+ that.coreMonitorItems[5].bg = 2
that.e15Bg = require('@/assets/images/level0_circle2.gif')
} else if (e15Data > 160) {
+ 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.e16Bg = require('@/assets/images/level0_circle5.gif')
} else if (e16Data > 1200) {
+ that.coreMonitorItems[2].bg = 4
that.e16Bg = require('@/assets/images/level0_circle4.gif')
} else if (e16Data > 700) {
+ that.coreMonitorItems[2].bg = 3
that.e16Bg = require('@/assets/images/level0_circle3.gif')
} else if (e16Data > 200) {
+ that.coreMonitorItems[2].bg = 2
that.e16Bg = require('@/assets/images/level0_circle2.gif')
} else if (e16Data > 100) {
+ that.coreMonitorItems[2].bg = 1
that.e16Bg = require('@/assets/images/level0_circle1.gif')
} else {
that.e16Bg = require('@/assets/images/level0_circle0.gif')
@@ -665,27 +1059,48 @@
// ������������������������������
for (const key in that.wsData2) {
// ���������������������
- for (const keys in that.alarmLevel) {
- if (key === keys && JSON.parse(that.alarmLevel[keys])) {
+ for (const keys in that.alarmLevelDome) {
+ // console.log(that.wsData2,'11');
+ // console.log(keys,'keys');
+ var alarmLevel = {}
+ alarmLevel[keys] = JSON.parse(that.alarmLevelDome[keys])
+ // console.log(alarmLevel[keys],'111');
+ if (key === keys && JSON.parse(that.alarmLevelDome[keys])) {
+ // console.log(key, 'kk')
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]
-
+ // console.log(that.wsData2[key],'22');
+ 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
- } else if (wsData2KeyData > alarmLevelsData4 && that.alarmLevelsStatus < 5) {
+ } else if (
+ wsData2KeyData > alarmLevelsData4 &&
+ that.alarmLevelsStatus < 5
+ ) {
that.alarmLevelsStatus = 4
- } else if (wsData2KeyData > alarmLevelsData3 && that.alarmLevelsStatus < 4) {
+ } else if (
+ wsData2KeyData > alarmLevelsData3 &&
+ that.alarmLevelsStatus < 4
+ ) {
that.alarmLevelsStatus = 3
- } else if (wsData2KeyData > alarmLevelsData2 && that.alarmLevelsStatus < 3) {
+ } else if (
+ wsData2KeyData > alarmLevelsData2 &&
+ that.alarmLevelsStatus < 3
+ ) {
that.alarmLevelsStatus = 2
- } else if (wsData2KeyData > alarmLevelsData1 && that.alarmLevelsStatus < 2) {
+ } else if (
+ wsData2KeyData > alarmLevelsData1 &&
+ that.alarmLevelsStatus < 2
+ ) {
that.alarmLevelsStatus = 1
- } else if (wsData2KeyData > alarmLevelsData0 && that.alarmLevelsStatus < 1) {
+ } else if (
+ wsData2KeyData > alarmLevelsData0 &&
+ that.alarmLevelsStatus < 1
+ ) {
that.alarmLevelsStatus = 0
}
switch (that.alarmLevelsStatus) {
@@ -695,15 +1110,15 @@
break
case 1:
that.url1 = require('@/assets/images/alarmlevel1.gif')
- that.url2 = require('@/assets/images/alarmstate1.png')
+ that.url2 = require('@/assets/images/alarmstate11.png')
break
case 2:
that.url1 = require('@/assets/images/alarmlevel2.gif')
- that.url2 = require('@/assets/images/alarmstate2.png')
+ that.url2 = require('@/assets/images/alarmstate22.png')
break
case 3:
that.url1 = require('@/assets/images/alarmlevel3.gif')
- that.url2 = require('@/assets/images/alarmstate3.png')
+ that.url2 = require('@/assets/images/alarmstate33.png')
break
case 4:
that.url1 = require('@/assets/images/alarmlevel4.gif')
@@ -791,39 +1206,70 @@
params: {
mac: this.macName
}
- }).then((res) => {
- // console.log('���������queryAlarmByMac���������������')
- this.alarmLevel = res.data.alarmLevel
- // console.log(this.alarmLevel)
- }).catch((err) => {
- console.log(err)
})
+ .then((res) => {
+ console.log(res, 'res')
+ // console.log('���������queryAlarmByMac���������������')
+ this.alarmLevel = res.data.alarmLevel
+ // var levelList = res.data.alarmLevel
+ // var info = false
+ // for (let key in levelList) {
+ // if (levelList[key] !== null) {
+ // info = true
+ // break
+ // }
+ // }
+ // if (info) {
+ // this.alarmLevel = res.data.alarmLevel
+ // } else {
+ // this.alarmLevel = this.alarmLevelDome
+ // }
+ // console.log(this.alarmLevel, 'this.alarmLevel')
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ���������
drawChart() {
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',
text: this.chartSensorName + '������������',
Color: 'white',
- textStyle: { // ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+ textStyle: {
+ // ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
color: '#fff'
}
},
grid: {
- top: 25,
+ top: 50,
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: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'
+ backgroundColor: '#6a7985',
+ color: '#fff'
}
}
},
@@ -844,21 +1290,43 @@
color: '#fff'
}
}
-
},
- series: [{
- data: this.PM2_5Data,
- type: 'line',
- areaStyle: {},
- label: {
- normal: {
- show: true,
- position: 'top'
+ 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'
+ }
}
}
- }]
+ ]
}
that.myChart.setOption(option)
+ setTimeout(function() {
+ window.onresize = function() {
+ that.myChart.resize()
+ }
+ }, 200)
} else {
console.log('������������')
}
@@ -873,35 +1341,35 @@
}
</script>
<style scoped>
-h3{
+h3 {
font-size: 16px;
}
-.noneScoll::-webkit-scrollbar{
+.noneScoll::-webkit-scrollbar {
display: none;
}
-.cirqueBox{
- position: relative;
- width: 140px;
- height: 140px;
- border-radius: 50%;
- -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
- mask: radial-gradient(transparent 60px, #000 0);
+.cirqueBox {
+ position: relative;
+ width: 140px;
+ height: 140px;
+ border-radius: 50%;
+ -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
+ mask: radial-gradient(transparent 60px, #000 0);
}
-.cirqueRed{
- position: absolute;
- width:100%;
- height: 100%;
- left:0;
- top:0;
- background-color:#e31514;
- z-index: 1;
+.cirqueRed {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background-color: #e31514;
+ z-index: 1;
}
-ul>li{
- list-style-type:none;
+ul > li {
+ list-style-type: none;
margin-top: 15px;
cursor: pointer;
}
-.liActive{
+.liActive {
/* color: #555; */
/* background: #fff; */
color: #fff;
@@ -909,102 +1377,119 @@
padding: 5px;
}
::-webkit-scrollbar {
- width: 7px;
- height: 10px;
+ width: 7px;
+ height: 10px;
}
/* ������������������ */
::-webkit-scrollbar-thumb {
- background-color: #aaa;
- border-radius: 3px;
+ background-color: #aaa;
+ border-radius: 3px;
}
-.main-container>section{
- display: flex!important;
+.main-container > section {
+ display: flex !important;
}
-.main-container{
+.main-container {
background: url('../../assets/images/sixBg.jpg');
}
-article, aside, footer, header, nav, section{
- display: flex!important;
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: flex !important;
}
-.app-main{
+.app-main {
display: flex;
padding-bottom: 0;
}
-.left0{
+.left0 {
background: url('../../assets/images/������.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.left1{
+.left1 {
background: url('../../assets/images/������1.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.left2{
+.left2 {
background: url('../../assets/images/������2.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.middle0{
+.middle0 {
background: url('../../assets/images/������.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.middle1{
+.middle1 {
background: url('../../assets/images/������1.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.middle2{
+.middle2 {
background: url('../../assets/images/������2.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.right0{
+.right0 {
background: url('../../assets/images/������.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.right1{
+.right1 {
background: url('../../assets/images/������1.png') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.title0{
+.title0 {
background: url('../../assets/images/������.png') no-repeat;
- background-size: 50% 90%;
+ background-size: 70% 90%;
background-position: center;
}
-.alarmBg5{
+.alarmBg5 {
background: url('../../assets/images/level0_circle5.gif') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.alarmBg4{
+.alarmBg4 {
background: url('../../assets/images/level0_circle4.gif') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.alarmBg3{
+.alarmBg3 {
background: url('../../assets/images/level0_circle3.gif') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.alarmBg2{
+.alarmBg2 {
background: url('../../assets/images/level0_circle2.gif') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.alarmBg1{
+.alarmBg1 {
background: url('../../assets/images/level0_circle1.gif') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.alarmBg0{
+.alarmBg0 {
background: url('../../assets/images/level0_circle0.gif') no-repeat;
- background-size: 100% 100%
+ background-size: 100% 100%;
}
-.border-left{
+.border-left {
/* border-left:1px solid #eee */
border: none;
}
-.border-right{
+.border-right {
/* border-right:1px solid #eee */
border: none;
}
-.border-top{
+.border-top {
/* border-top: 1px solid #fff; */
border: none;
}
-.border-bottom{
+.border-bottom {
/* 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