<template>
|
<el-container
|
:style="{
|
color: '#fff',
|
backgroundSize: 'cover',
|
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;
|
"
|
>
|
<div
|
class="left0"
|
: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>
|
<!-- <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" @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
|
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="
|
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: 1rem">
|
<div>{{ windDir }}</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;
|
"
|
>
|
<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">
|
<!-- 中间核心数组 -->
|
<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: 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"
|
@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: 2rem" />
|
<!-- <line-chart :chart-data="lineChartData" /> -->
|
<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">{{ 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="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-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%">
|
<!-- padding-top: 4%-->
|
<img :src="url1" alt="" style="width: 70%">
|
</div>
|
<div>
|
<img style="width: 75%" :src="url2" alt="">
|
</div>
|
</div>
|
</div>
|
<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>
|
</el-aside>
|
</el-container>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：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 引入的组件需要注入到对象中才能使用
|
components: {
|
// LineChart
|
// draggable
|
},
|
filters: {
|
// 过滤器替换websocket实时数据的key值
|
sensorFilter: function(value) {
|
if (!value) return ''
|
return json[value]
|
}
|
},
|
props: {},
|
data() {
|
// 这里存放数据
|
return {
|
circle: 0,
|
url1: require('@/assets/images/alarmlevel-1.png'),
|
url2: require('@/assets/images/alarmstate-1.png'),
|
bg: {
|
backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')',
|
backgroundRepeat: 'round'
|
},
|
wsData1: null,
|
wsData2: null,
|
regionCode: this.$store.state.regionCode,
|
accountId: this.$store.state.accountId,
|
orgId: this.$store.state.orgId,
|
macName: '',
|
compassBg: require('@/assets/images/compass_bg.png'),
|
compassDirection: require('@/assets/images/compass_direction1.png'),
|
keyName: [],
|
windDir: 'null',
|
windDeg: 180,
|
aqi: 0,
|
average: 0,
|
monitorPointInfo: null,
|
currentTime: new Date(),
|
timer: '',
|
macLat: this.$route.query.items[0],
|
macLng: this.$route.query.items[1],
|
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: {},
|
// 报警颜色
|
alarmColour: {},
|
// 报警圆环图片
|
alarmBg: {},
|
newWs: null,
|
alarmLevelsStatus: 0,
|
libg: 0,
|
PM2_5Data: [],
|
myChart: null,
|
e1Bg: require('@/assets/images/level0_circle0.gif'),
|
e2Bg: require('@/assets/images/level0_circle0.gif'),
|
e10Bg: require('@/assets/images/level0_circle0.gif'),
|
e11Bg: require('@/assets/images/level0_circle0.gif'),
|
e15Bg: require('@/assets/images/level0_circle0.gif'),
|
e16Bg: require('@/assets/images/level0_circle0.gif'),
|
alarmBg5: require('@/assets/images/level0_circle5.gif'),
|
alarmBg4: require('@/assets/images/level0_circle4.gif'),
|
alarmBg3: require('@/assets/images/level0_circle3.gif'),
|
alarmBg2: require('@/assets/images/level0_circle2.gif'),
|
alarmBg1: require('@/assets/images/level0_circle1.gif'),
|
alarmBg0: require('@/assets/images/level0_circle0.gif'),
|
deviceName: '',
|
chartSensorKey: [],
|
chartSensor1: '',
|
coreMonitorItems: [],
|
defaultMonitorItems: [],
|
fixedMonitorItems: [],
|
totalArray: [],
|
chartSensorName: '',
|
equipment: '', // 设备名称
|
standardValue: {
|
PM2_5: '',
|
PM10: '',
|
CO2: '',
|
SO2: '',
|
CO: '',
|
O3: ''
|
}
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {
|
leftaSide() {
|
return this.$store.state.leftaSide
|
}
|
},
|
// 监控data中的数据变化
|
watch: {
|
PM2_5Data(val) {
|
// console.log('新数据' + val)
|
this.myChart = null
|
this.drawChart()
|
},
|
leftaSide(n, o) {
|
// this.myChart.resize()
|
this.myChart = null
|
// this.drawChart()
|
}
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
this.$store.dispatch('app/toggleSideBar', 0)
|
// this.$Cookies.set('sidebarStatus', 1)
|
// setTimeout(() => {
|
// this.drawChart()
|
// }, 3000)
|
this.getTime()
|
// 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)
|
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()
|
this.queryAlarmByMac()
|
this.websocketData()
|
this.getkeyName()
|
this.getHourlyAqi()
|
// this.getSensorMonthAvg()
|
this.$watch('chartSensorKey', () => {
|
this.filterSensorName()
|
})
|
// this.getAlarmLevels()
|
// this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {
|
// this.$nextTick(() => {
|
// console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz')
|
// this.drawChart()
|
// })
|
// this.$nextTick(() => {
|
// this.drawChart()
|
// })
|
// setTimeout(() => {
|
// this.drawChart()
|
// }, 1000)
|
// 得到中间圆圈的宽高
|
// this.getCircleWH()
|
},
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {
|
if (this.ws) {
|
this.ws.close()
|
}
|
if (this.timer) {
|
clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
|
}
|
}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
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
|
)
|
},
|
// 因子布局接口
|
sensorLayout() {
|
return new Promise((resolve, reject) => {
|
this.$request({
|
url: '/organizationLayout/getLayoutByMac',
|
method: 'get',
|
params: {
|
mac: this.macName
|
}
|
})
|
.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.getSensorMonthAvg()
|
resolve()
|
})
|
.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)
|
})
|
},
|
// 获得实时日期更新
|
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())
|
}, 1000)
|
},
|
appendZero(obj) {
|
return obj < 10 ? '0' + obj : obj
|
},
|
// 切换设备重新加载信息
|
reMac(newMac, i, name) {
|
this.PM2_5Data = []
|
this.wsData2 = null
|
this.url1 = require('@/assets/images/alarmlevel-1.png')
|
this.url2 = require('@/assets/images/alarmstate-1.png')
|
this.deviceName = name
|
this.alarmLevelsStatus = 0
|
this.libg = i
|
this.macName = newMac
|
this.getHourlyAqi()
|
this.getSensorMonthAvg()
|
this.websocketData()
|
if (this.monitorPointInfo.devices) {
|
this.macLat = this.monitorPointInfo.devices[i].latitude
|
this.macLng = this.monitorPointInfo.devices[i].longitude
|
}
|
},
|
// 遍历键名
|
getkeyName() {
|
for (var kn in this.wsData2) {
|
this.keyName.push(kn)
|
alert(this.keyName)
|
}
|
},
|
// 请求单台设备一个小时
|
getHourlyAqi() {
|
this.$request({
|
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(this.chartSensorKey[0].sensorCode);
|
console.log(err)
|
})
|
},
|
// 请求单台设备某参数月平均值
|
getSensorMonthAvg() {
|
this.$request({
|
url: '/deviceInfo/getMonthAvg',
|
method: 'get',
|
params: {
|
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() {
|
this.sensorLayout().then(() => {
|
var newAlarmLevel = {}
|
for (let i = 0; i < this.totalArray.length; i++) {
|
for (const keys in this.alarmLevel) {
|
if (this.totalArray[i].sensorCode === keys) {
|
newAlarmLevel[keys] = this.alarmLevel[keys]
|
}
|
}
|
}
|
// console.log(newAlarmLevel, 'newAlarmLevel')
|
this.alarmLevel = newAlarmLevel
|
})
|
},
|
// ws请求
|
websocketData() {
|
if (this.ws) {
|
this.ws.close()
|
}
|
|
var that = this
|
// 拼写参数
|
// var param = this.accountId + '&' + this.orgId + '&' + this.macName
|
// var param = this.macName
|
// 拼写URL
|
var socketUrl
|
if (this.equipment === 'car') {
|
socketUrl = 'http://47.99.64.149:8081/api/cruiserWebsocket/' + this.macName
|
// socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName
|
} else {
|
socketUrl = 'http://47.99.64.149:8081/api/singleDevice/' + this.macName
|
// socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName
|
}
|
// 替换http为WS
|
console.log('socketUrl', socketUrl, this.macNamel)
|
socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
|
|
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, '0')
|
// 风向算法
|
if (that.wsData2.a01008) {
|
var windDirs = Number(
|
that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1)
|
)
|
// console.log(windDirs)
|
that.windDeg = windDirs
|
if (windDirs === 0) {
|
that.windDir = '北风'
|
} else if (windDirs > 0 && windDirs < 90) {
|
that.windDir = '东北风'
|
} else if (windDirs === 90) {
|
that.windDir = '东风'
|
} else if (windDirs > 90 && windDirs < 180) {
|
that.windDir = '东南风'
|
} else if (windDirs === 180) {
|
that.windDir = '南风'
|
} else if (windDirs > 180 && windDirs < 270) {
|
that.windDir = '西南风'
|
} else if (windDirs === 270) {
|
that.windDir = '西风'
|
} else if (windDirs > 270 && windDirs < 360) {
|
that.windDir = '西北风'
|
}
|
}
|
that.alarmColour = {}
|
that.alarmProgress = {}
|
that.alarmBg = {}
|
// 报警等级
|
for (const key in that.wsData2) {
|
// 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] = '#000000'
|
that.alarmBg[keys] = 5
|
} 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])
|
) {
|
that.alarmColour[keys] = '#fc0101'
|
that.alarmBg[keys] = 3
|
} 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])
|
) {
|
that.alarmColour[keys] = '#fdff00'
|
that.alarmBg[keys] = 1
|
} else {
|
that.alarmColour[keys] = '#00ff01'
|
that.alarmBg[keys] = 0
|
}
|
} else if (key === keys) {
|
that.alarmColour[keys] = '#00ff01'
|
that.alarmBg[keys] = 0
|
}
|
// 遍历进度条百分比
|
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
|
)
|
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
|
)
|
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
|
)
|
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
|
)
|
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
|
)
|
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
|
)
|
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) {
|
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]
|
}
|
}
|
}
|
}
|
for (const key in that.alarmProgress) {
|
if (that.totalArray[i].sensorCode === key) {
|
that.totalArray[i].alarm = that.alarmProgress[key]
|
}
|
}
|
for (const key in that.alarmColour) {
|
if (that.totalArray[i].sensorCode === key) {
|
that.totalArray[i].colour = that.alarmColour[key]
|
}
|
}
|
for (const key in that.alarmBg) {
|
if (that.totalArray[i].sensorCode === key) {
|
that.totalArray[i].bg = that.alarmBg[key]
|
}
|
}
|
}
|
// for (let i = 0; i < Object.keys(that.wsData2).length; i++) {
|
// PM2.5动态走势
|
if (that.PM2_5Data.length < 10) {
|
// 下方图表数组
|
that.PM2_5Data.push(parseInt(that.chartSensorKey[0].value))
|
} else {
|
that.PM2_5Data.splice(0, 1)
|
that.PM2_5Data.push(parseInt(that.chartSensorKey[0].value))
|
}
|
// 遍历监测超标标准 塞如6参
|
// for(let i = 0;i<that.alarmLevels.length;i++){
|
// // 判断6参把数据加入params6对象
|
// if(that.alarmLevels[i].key === "e1" || )
|
// }
|
const e1Data = parseInt(that.wsData2.a34004)
|
const e2Data = parseInt(that.wsData2.a34002)
|
const e10Data = parseInt(that.wsData2.a21005)
|
const e11Data = parseInt(that.wsData2.a21026)
|
const e15Data = parseInt(that.wsData2.a05024)
|
const e16Data = parseInt(that.wsData2.a21004)
|
// 判断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 > 1600) {
|
that.coreMonitorItems[3].bg = 5
|
that.e11Bg = require('@/assets/images/level0_circle5.gif')
|
} else if (e11Data > 800) {
|
that.coreMonitorItems[3].bg = 4
|
that.e11Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e11Data > 650) {
|
that.coreMonitorItems[3].bg = 3
|
that.e11Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e11Data > 500) {
|
that.coreMonitorItems[3].bg = 2
|
that.e11Bg = require('@/assets/images/level0_circle2.gif')
|
} 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')
|
}
|
// 判断实时监测超标预警
|
for (const key in that.wsData2) {
|
// 右侧报警背景图
|
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])
|
// 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
|
) {
|
that.alarmLevelsStatus = 4
|
} else if (
|
wsData2KeyData > alarmLevelsData3 &&
|
that.alarmLevelsStatus < 4
|
) {
|
that.alarmLevelsStatus = 3
|
} else if (
|
wsData2KeyData > alarmLevelsData2 &&
|
that.alarmLevelsStatus < 3
|
) {
|
that.alarmLevelsStatus = 2
|
} else if (
|
wsData2KeyData > alarmLevelsData1 &&
|
that.alarmLevelsStatus < 2
|
) {
|
that.alarmLevelsStatus = 1
|
} else if (
|
wsData2KeyData > alarmLevelsData0 &&
|
that.alarmLevelsStatus < 1
|
) {
|
that.alarmLevelsStatus = 0
|
}
|
switch (that.alarmLevelsStatus) {
|
case 0:
|
that.url1 = require('@/assets/images/alarmlevel0.gif')
|
that.url2 = require('@/assets/images/alarmstate0.png')
|
break
|
case 1:
|
that.url1 = require('@/assets/images/alarmlevel1.gif')
|
that.url2 = require('@/assets/images/alarmstate11.png')
|
break
|
case 2:
|
that.url1 = require('@/assets/images/alarmlevel2.gif')
|
that.url2 = require('@/assets/images/alarmstate22.png')
|
break
|
case 3:
|
that.url1 = require('@/assets/images/alarmlevel3.gif')
|
that.url2 = require('@/assets/images/alarmstate33.png')
|
break
|
case 4:
|
that.url1 = require('@/assets/images/alarmlevel4.gif')
|
that.url2 = require('@/assets/images/alarmstate4.png')
|
break
|
case 5:
|
that.url1 = require('@/assets/images/alarmlevel5.gif')
|
that.url2 = require('@/assets/images/alarmstate5.png')
|
}
|
}
|
}
|
}
|
// 把json的key放入一个数组
|
// var JsonKeys = Object.keys(JSON.(JSON.stringify(json)))
|
// // 把json的value放入一个数组
|
// var JsonValues = Object.values(JSON.parse(JSON.stringify(json)))
|
// // 把实时数据的key放入一个数组
|
// var wsKeys = Object.keys(JSON.parse(JSON.stringify(that.wsData2)))
|
// // 把实时数据的key放入一个数组
|
// var wsValues = Object.values(JSON.parse(JSON.stringify(that.wsData2)))
|
// for (let i = 0; i < JsonKeys.length; i++) {
|
// for (var key in json) {
|
// if (wsKeys[i] === json[key]) {
|
// console.log(wsKeys[i] + key + '匹配成功')
|
// that.$set(that.newWs, 'e', wsValues[i])
|
// }
|
// }
|
// }
|
|
// var objs = Object.keys(that.wsData2).reduce((newData, key) => {
|
// var newKey = json[key]
|
// console.log(json)
|
// newData[newKey] = that.wsData2[key]
|
// return newData
|
// }, {})
|
// console.log(objs)
|
|
// for (var kn in that.wsData2) {
|
// that.keyName.push(kn)
|
// console.log(kn)
|
// }
|
// switch (windDirs) {
|
// case windDirs === 0:
|
// this.windDir = '北风'
|
// break
|
// case windDirs > 0 < 90:
|
// this.windDir = '东北风'
|
// break
|
// case windDirs === 90:
|
// this.windDir = '东风'
|
// break
|
// case windDirs > 90 < 180:
|
// this.windDir = '东南风'
|
// break
|
// case windDirs === 180:
|
// this.windDir = '南风'
|
// break
|
// case windDirs > 180 < 270:
|
// this.windDir = '西南风'
|
// break
|
// case windDirs === 270:
|
// this.windDir = '西风'
|
// break
|
// case windDirs > 270 < 360:
|
// this.windDir = '西北风'
|
// break
|
|
// default:
|
// break
|
// }
|
// console.log(msg.data.地址)
|
// that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
// console.log(that.wsData2)
|
// } else {
|
// that.wsData1 = msg.data
|
// console.log(that.wsData1)
|
// }
|
}
|
},
|
// 设备因子报警值
|
queryAlarmByMac() {
|
this.$request({
|
url: '/deviceInfo/queryAlarmByMac',
|
method: 'get',
|
params: {
|
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() {
|
const that = this
|
var bar_dv = this.$refs.main
|
if (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"}
|
color: '#fff'
|
}
|
},
|
grid: {
|
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',
|
color: '#fff'
|
}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
series: [
|
{
|
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('容器为空')
|
}
|
}
|
// circles() {
|
// for (let index = this.circle; index < 100; index++) {
|
// index++
|
// this.circle++
|
// }
|
// }
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped>
|
h3 {
|
font-size: 16px;
|
}
|
.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);
|
}
|
.cirqueRed {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
background-color: #e31514;
|
z-index: 1;
|
}
|
ul > li {
|
list-style-type: none;
|
margin-top: 15px;
|
cursor: pointer;
|
}
|
.liActive {
|
/* color: #555; */
|
/* background: #fff; */
|
color: #fff;
|
background: #083577;
|
padding: 5px;
|
}
|
::-webkit-scrollbar {
|
width: 7px;
|
height: 10px;
|
}
|
/* 滚动条的滑块 */
|
::-webkit-scrollbar-thumb {
|
background-color: #aaa;
|
border-radius: 3px;
|
}
|
.main-container > section {
|
display: flex !important;
|
}
|
.main-container {
|
background: url('../../assets/images/sixBg.jpg');
|
}
|
article,
|
aside,
|
footer,
|
header,
|
nav,
|
section {
|
display: flex !important;
|
}
|
.app-main {
|
display: flex;
|
padding-bottom: 0;
|
}
|
.left0 {
|
background: url('../../assets/images/左框.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.left1 {
|
background: url('../../assets/images/左框1.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.left2 {
|
background: url('../../assets/images/左框2.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.middle0 {
|
background: url('../../assets/images/中框.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.middle1 {
|
background: url('../../assets/images/中框1.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.middle2 {
|
background: url('../../assets/images/中框2.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.right0 {
|
background: url('../../assets/images/右框.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.right1 {
|
background: url('../../assets/images/右框1.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
.title0 {
|
background: url('../../assets/images/标题.png') no-repeat;
|
background-size: 70% 90%;
|
background-position: center;
|
}
|
.alarmBg5 {
|
background: url('../../assets/images/level0_circle5.gif') no-repeat;
|
background-size: 100% 100%;
|
}
|
.alarmBg4 {
|
background: url('../../assets/images/level0_circle4.gif') no-repeat;
|
background-size: 100% 100%;
|
}
|
.alarmBg3 {
|
background: url('../../assets/images/level0_circle3.gif') no-repeat;
|
background-size: 100% 100%;
|
}
|
.alarmBg2 {
|
background: url('../../assets/images/level0_circle2.gif') no-repeat;
|
background-size: 100% 100%;
|
}
|
.alarmBg1 {
|
background: url('../../assets/images/level0_circle1.gif') no-repeat;
|
background-size: 100% 100%;
|
}
|
.alarmBg0 {
|
background: url('../../assets/images/level0_circle0.gif') no-repeat;
|
background-size: 100% 100%;
|
}
|
.border-left {
|
/* border-left:1px solid #eee */
|
border: none;
|
}
|
.border-right {
|
/* border-right:1px solid #eee */
|
border: none;
|
}
|
.border-top {
|
/* border-top: 1px solid #fff; */
|
border: none;
|
}
|
.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>
|
