<template>
|
<el-container
|
:style="{
|
color: '#fff',
|
backgroundSize: 'cover',
|
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">
|
<div
|
class="left0"
|
:style="{display:'flex',flexDirection:'column',alignContent:'center',flex:'1',padding: '0 20px 10px 20px'}"
|
>
|
<h3 style="text-align:center">{{ 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>
|
<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>
|
<div class="border-top" style="height:150px;display:flex;margin-top:10px">
|
<!-- 左下角风向数组 -->
|
<div v-if="wsData2 && wsData2.a01008" class="border-right left1" style="display:flex;flex:1;justify-content: space-around;align-items: center">
|
<div style="position:relative">
|
<img
|
style="width: 80px; height: 80px"
|
:src="compassBg"
|
>
|
<img
|
style="width: 30px; height: 30px;position: absolute;left: 0;top: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);"
|
:src="compassDirection"
|
:style="{transform:'translate(-50%, -50%) rotate('+ windDeg +'deg)'}"
|
>
|
</div>
|
<div style="text-align:center;font-size:20px">
|
<div>{{ 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:18px">空气质量指数(小时平均)</div>
|
<div style="font-size:30px;margin-top:7px">
|
{{ aqi }}<span style="font-size:16px">(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">
|
<!-- 中间核心数组 -->
|
<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,}">
|
<!-- <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>
|
<div style="text-align:center;padding-top:5px">{{ 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" />
|
<!-- <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>
|
<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>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
<el-aside width="400px">
|
<el-main
|
style="padding-left:0;padding-right:0;display: flex;flex-direction: column;margin-right:10px;overflow:hidden"
|
>
|
<div class="border-bottom right0" style="text-align: center;padding:20px 0 33px 0;margin-bottom:10px;height:60%">
|
<div 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>
|
<div style="height:70%">
|
<img style="" :src="url1" alt="" style="height:100%">
|
</div>
|
<div>
|
<img style="" :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>
|
</ul>
|
</div>
|
</el-main>
|
</el-aside>
|
</el-container>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
|
import json from '@/assets/json/sensor.json'
|
// import { parse } from 'path-to-regexp'
|
// import LineChart from '@/components/Echarts/LineChart'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {
|
// LineChart
|
},
|
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,
|
// 报警进度条
|
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: [],
|
coreMonitorItems: [],
|
defaultMonitorItems: [],
|
fixedMonitorItems: [],
|
totalArray: [],
|
chartSensorName: ''
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {
|
leftaSide() {
|
return this.$store.state.leftaSide
|
}
|
},
|
// 监控data中的数据变化
|
watch: {
|
PM2_5Data(val) {
|
// console.log('新数据' + val)
|
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.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
|
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)
|
},
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {
|
if (this.ws) {
|
this.ws.close()
|
}
|
if (this.timer) {
|
clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
|
}
|
}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
activated() {},
|
// 方法集合
|
methods: {
|
// 过滤图表因子名称
|
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('因子布局接口')
|
// 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)
|
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()
|
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(err)
|
})
|
},
|
// 请求单台设备某参数月平均值
|
getSensorMonthAvg() {
|
this.$request({
|
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)
|
})
|
},
|
// 因子报警值排序
|
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]
|
}
|
}
|
}
|
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 = 'http://47.99.64.149:8081/singleDevice/' + this.macName
|
// 替换http为WS
|
socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
|
|
this.ws = new WebSocket(socketUrl)
|
|
this.ws.onopen = function() {
|
console.log('websocket开启成功')
|
}
|
// this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
|
// 获得消息事件
|
this.ws.onmessage = function(msg) {
|
// if (JSON.parse(msg.data).名称) {
|
that.wsData2 = JSON.parse(msg.data)
|
// console.log('以下是websocket返回数据')
|
// console.log(that.wsData2)
|
// 风向算法
|
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)
|
if (key === that.chartSensorKey[0].sensorCode) {
|
that.chartSensorKey[0].value = that.wsData2[key]
|
}
|
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'
|
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
|
}
|
}
|
}
|
// 实时数据改变合并数组的值
|
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]
|
}
|
}
|
}
|
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')
|
} else if (e1Data > 150) {
|
that.e1Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e1Data > 115) {
|
that.e1Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e1Data > 75) {
|
that.e1Bg = require('@/assets/images/level0_circle2.gif')
|
} else if (e1Data > 35) {
|
that.e1Bg = require('@/assets/images/level0_circle1.gif')
|
} else {
|
that.e1Bg = require('@/assets/images/level0_circle0.gif')
|
}
|
// 判断PM10的超标预警
|
if (e2Data > 420) {
|
that.e2Bg = require('@/assets/images/level0_circle5.gif')
|
} else if (e2Data > 350) {
|
that.e2Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e2Data > 250) {
|
that.e2Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e2Data > 150) {
|
that.e2Bg = require('@/assets/images/level0_circle2.gif')
|
} else if (e2Data > 50) {
|
that.e2Bg = require('@/assets/images/level0_circle1.gif')
|
} else {
|
that.e2Bg = require('@/assets/images/level0_circle0.gif')
|
}
|
// 判断CO的超标预警
|
if (e10Data > 90) {
|
that.e10Bg = require('@/assets/images/level0_circle5.gif')
|
} else if (e10Data > 60) {
|
that.e10Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e10Data > 35) {
|
that.e10Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e10Data > 10) {
|
that.e10Bg = require('@/assets/images/level0_circle2.gif')
|
} else if (e10Data > 5) {
|
that.e10Bg = require('@/assets/images/level0_circle1.gif')
|
} else {
|
that.e10Bg = require('@/assets/images/level0_circle0.gif')
|
}
|
// 判断SO2的超标预警
|
if (e11Data > 90) {
|
that.e11Bg = require('@/assets/images/level0_circle5.gif')
|
} else if (e11Data > 60) {
|
that.e11Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e11Data > 35) {
|
that.e11Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e11Data > 10) {
|
that.e11Bg = require('@/assets/images/level0_circle2.gif')
|
} else if (e11Data > 5) {
|
that.e11Bg = require('@/assets/images/level0_circle1.gif')
|
} else {
|
that.e11Bg = require('@/assets/images/level0_circle0.gif')
|
}
|
// 判断O3的超标预警
|
if (e15Data > 800) {
|
that.e15Bg = require('@/assets/images/level0_circle5.gif')
|
} else if (e15Data > 400) {
|
that.e15Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e15Data > 300) {
|
that.e15Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e15Data > 200) {
|
that.e15Bg = require('@/assets/images/level0_circle2.gif')
|
} else if (e15Data > 160) {
|
that.e15Bg = require('@/assets/images/level0_circle1.gif')
|
} else {
|
that.e15Bg = require('@/assets/images/level0_circle0.gif')
|
}
|
// 判断NO2的超标预警
|
if (e16Data > 2340) {
|
that.e16Bg = require('@/assets/images/level0_circle5.gif')
|
} else if (e16Data > 1200) {
|
that.e16Bg = require('@/assets/images/level0_circle4.gif')
|
} else if (e16Data > 700) {
|
that.e16Bg = require('@/assets/images/level0_circle3.gif')
|
} else if (e16Data > 200) {
|
that.e16Bg = require('@/assets/images/level0_circle2.gif')
|
} else if (e16Data > 100) {
|
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.alarmLevel) {
|
if (key === keys && JSON.parse(that.alarmLevel[keys])) {
|
const wsData2KeyData = parseInt(that.wsData2[key])
|
const alarmLevelsData0 = that.alarmLevel[keys][0]
|
const alarmLevelsData1 = that.alarmLevel[keys][1]
|
const alarmLevelsData2 = that.alarmLevel[keys][2]
|
const alarmLevelsData3 = that.alarmLevel[keys][3]
|
const alarmLevelsData4 = that.alarmLevel[keys][4]
|
const alarmLevelsData5 = that.alarmLevel[keys][5]
|
|
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/alarmstate1.png')
|
break
|
case 2:
|
that.url1 = require('@/assets/images/alarmlevel2.gif')
|
that.url2 = require('@/assets/images/alarmstate2.png')
|
break
|
case 3:
|
that.url1 = require('@/assets/images/alarmlevel3.gif')
|
that.url2 = require('@/assets/images/alarmstate3.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('以下是queryAlarmByMac请求的返回')
|
this.alarmLevel = res.data.alarmLevel
|
// console.log(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)
|
var option = {
|
title: {
|
left: 'center',
|
text: this.chartSensorName + '动态走势',
|
Color: 'white',
|
textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
|
color: '#fff'
|
}
|
},
|
grid: {
|
top: 25,
|
bottom: 25
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
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',
|
areaStyle: {},
|
label: {
|
normal: {
|
show: true,
|
position: 'top'
|
}
|
}
|
}]
|
}
|
that.myChart.setOption(option)
|
} 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: 50% 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;
|
}
|
</style>
|
