From f4dec5e5b3a400a6c0fe8cc7fade6b6a01621bfa Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Fri, 18 Aug 2023 10:21:05 +0800
Subject: [PATCH] fix:优化websocket
---
src/views/deviceDetail/index.vue | 951 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 652 insertions(+), 299 deletions(-)
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index eff6d6c..df36cb3 100644
--- a/src/views/deviceDetail/index.vue
+++ b/src/views/deviceDetail/index.vue
@@ -3,88 +3,241 @@
: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="31%">
- <el-main style="display:flex;flex-flow: column;height: 100%;padding-left: 0;padding-right: 0;margin-left:10px">
+ <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;font-size: 0.9rem">{{ 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: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>
+ <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> :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: 5.5rem; height: 5.5rem"
- :src="compassBg"
- >
- <img
- style="font-size:2rem;width: 2rem; height: 2rem;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:1rem">
+ <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:0.9rem">������������������(������������)</div>
- <div style="font-size:1.5rem;margin-top:7px">
- {{ aqi }}<span style="font-size:0.8rem">(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: 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">
+ <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%;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,}">
+ <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: 50%;left: 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: 11rem;text-align:center;padding-top:50px;margin-left:10px">
+ <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 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 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>
</div>
@@ -92,36 +245,85 @@
</el-container>
<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-bottom: 25px;margin-bottom:10px;height: 60%">
- <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"><span>���������</span> {{ macLat }}, {{ macLng }}</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 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%">
-<!-- padding-top: 4%-->
- <img style="" :src="url1" alt="" style="width:70%">
+ <div style="height: 70%">
+ <!-- padding-top: 4%-->
+ <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 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>
+ <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">
+ <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>PM2.5: [ 0, 35 ]</li>
<li>PM10: [ 0, 50 ]</li>
<li>NO2: [ 0, 40 ]</li>
- <li>SO2: [ 0, 50 ]</li>
+ <li>SO2: [ 0, 150 ]</li>
<li>CO: [ 0, 2 ]</li>
<li>O3: [ 0, 160 ]</li>
</ul>
@@ -138,20 +340,21 @@
import json from '@/assets/json/sensor.json'
// 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���
- sensorFilter: function(value) {
+ sensorFilter: function (value) {
if (!value) return ''
return json[value]
- }
+ },
},
- props: {
- },
+ props: {},
data() {
// ������������������
return {
@@ -160,7 +363,7 @@
url2: require('@/assets/images/alarmstate-1.png'),
bg: {
backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')',
- backgroundRepeat: 'round'
+ backgroundRepeat: 'round',
},
wsData1: null,
wsData2: null,
@@ -184,27 +387,12 @@
// ������������
alarmLevel: null,
alarmLevelDome: {
- a00e12: '[10000, 15000, 20000]',
- a00e13: '[60, 90, 120]',
- a00e34: null,
- a35e21: null,
- a01001: '[25, 30, 60]',
- a01002: '[60, 100, 160]',
- a01006: null,
- a01007: '[5, 6, 8]',
- a01008: null,
- a05024: '[160, 200, 300, 400, 800]',
- a06001: null,
- a19002: null,
- a21004: '[100, 200, 700, 1200, 2340]',
- a21005: '[5, 10, 35, 60, 90]',
- a21026: '[150, 500, 650, 800, 1600]',
- a34002: '[50, 150, 250, 350, 420]',
- a34004: '[35, 75, 115, 150, 250]',
- a99054: '[1.5, 3, 5]',
- dustld: null,
- flylat: null,
- flylon: null
+ 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: {},
@@ -231,6 +419,7 @@
alarmBg0: require('@/assets/images/level0_circle0.gif'),
deviceName: '',
chartSensorKey: [],
+ chartSensor1: '',
coreMonitorItems: [],
defaultMonitorItems: [],
fixedMonitorItems: [],
@@ -243,15 +432,15 @@
CO2: '',
SO2: '',
CO: '',
- O3: ''
- }
+ O3: '',
+ },
}
},
// ������������ ���������data������
computed: {
leftaSide() {
return this.$store.state.leftaSide
- }
+ },
},
// ������data������������������
watch: {
@@ -263,7 +452,7 @@
// this.myChart.resize()
this.myChart = null
// this.drawChart()
- }
+ },
},
// ������������ - ��������������������������������� this ���������
created() {
@@ -281,7 +470,8 @@
// 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()
@@ -289,7 +479,7 @@
this.websocketData()
this.getkeyName()
this.getHourlyAqi()
- this.getSensorMonthAvg()
+ // this.getSensorMonthAvg()
this.$watch('chartSensorKey', () => {
this.filterSensorName()
})
@@ -327,6 +517,24 @@
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')
@@ -337,7 +545,9 @@
},
// ������������������������
filterSensorName() {
- this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode)
+ this.chartSensorName = this.$options.filters.sensorFilter(
+ this.chartSensorKey[0].sensorCode
+ )
},
// ������������������
sensorLayout() {
@@ -346,55 +556,63 @@
url: '/organizationLayout/getLayoutByMac',
method: 'get',
params: {
- mac: this.macName
- }
+ 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.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) {
@@ -431,15 +649,18 @@
url: '/deviceInfo/getHourlyAqi',
method: 'get',
params: {
- mac: this.macName
- }
- }).then((res) => {
- // console.log('���������getHourlyAqi���������������')
- // console.log(res)
- this.aqi = res.data.AQI
- }).catch((err) => {
- console.log(err)
+ mac: this.macName,
+ },
})
+ .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() {
@@ -447,16 +668,19 @@
url: '/deviceInfo/getMonthAvg',
method: 'get',
params: {
- sensorCode: 'a24088',
- mac: this.macName
- }
- }).then((res) => {
- // console.log('���������sensorMonthAvg���������������')
- // console.log(res)
- this.average = res.data.avg
- }).catch((err) => {
- console.log(err)
+ sensorCode: this.chartSensorKey[0].sensorCode,
+ mac: this.macName,
+ },
})
+ .then((res) => {
+ // console.log(res,'123');
+ // console.log('���������sensorMonthAvg���������������')
+ // console.log(res)
+ this.average = res.data.avg
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ���������������������
alarmSort() {
@@ -486,31 +710,40 @@
var socketUrl
if (this.equipment === 'car') {
socketUrl = 'http://47.99.64.149:8081/cruiserWebsocket/' + this.macName
- // socketUrl = 'http://192.168.0.33:8081/cruiserWebsocket/' + this.macName
+ // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName
} else {
socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
+ // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName
}
// ������http���WS
socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
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)
+ 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) {
@@ -536,26 +769,46 @@
that.alarmBg = {}
// ������������
for (const key in that.wsData2) {
- if (that.chartSensorKey && 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 {
@@ -569,22 +822,46 @@
// ������������������������
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) {
@@ -600,7 +877,9 @@
for (const key in that.wsData2) {
if (key !== 'time') {
// ���������������������
- var tempDecimal = that.wsData2[key].replace(/[^\d.]/g, '').split('.')[1]
+ var tempDecimal = that.wsData2[key]
+ .replace(/[^\d.]/g, '')
+ .split('.')[1]
if (that.totalArray[i].sensorCode === key) {
// ���������������������������
if (that.totalArray[i].sensorCode === 'a19002') {
@@ -608,8 +887,13 @@
} 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 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]
}
@@ -655,83 +939,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')
@@ -739,29 +1055,48 @@
// ������������������������������
for (const key in that.wsData2) {
// ���������������������
- for (const keys in that.alarmLevel) {
+ for (const keys in that.alarmLevelDome) {
+ // console.log(that.wsData2,'11');
+ // console.log(keys,'keys');
var alarmLevel = {}
- alarmLevel[keys] = JSON.parse(that.alarmLevel[keys])
- if (key === keys && JSON.parse(that.alarmLevel[keys])) {
+ 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])
+ // 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) {
@@ -771,15 +1106,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')
@@ -865,28 +1200,31 @@
url: '/deviceInfo/queryAlarmByMac',
method: 'get',
params: {
- mac: this.macName
- }
- }).then((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)
+ mac: this.macName,
+ },
})
+ .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() {
@@ -899,22 +1237,31 @@
left: 'center',
text: this.chartSensorName + '������������',
Color: 'white',
- textStyle: { // ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
- color: '#fff'
- }
+ textStyle: {
+ // ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+ color: '#fff',
+ },
},
grid: {
- top: 25,
- bottom: 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:#fff;"></span>'
+ // result+=res[0].axisValue+"<br/>"+html1+res[0].value
+ // return result
+ // },
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: '#6a7985',
+ color: '#fff',
+ },
+ },
},
xAxis: {
type: 'category',
@@ -922,80 +1269,81 @@
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: [{
- data: this.PM2_5Data,
- type: 'line',
- areaStyle: {},
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- }
- }]
+ series: [
+ {
+ data: this.PM2_5Data,
+ type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ color: '#fff',
+ },
+ },
+ },
+ ],
}
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>
-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;
@@ -1003,114 +1351,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: 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{
+.class1 {
height: 60%;
}
-.class2{
+.class2 {
height: 100%;
}
-/deep/ .el-progress-bar__outer{
+/deep/ .el-progress-bar__outer {
height: 1rem !important;
}
-/deep/ .el-progress-bar__innerText{
+/deep/ .el-progress-bar__innerText {
font-size: 0.8rem;
}
</style>
--
Gitblit v1.8.0