<template>
|
<div class="page-container">
|
<Card>
|
<Breadcrumb>
|
<BreadcrumbItem>实时监测</BreadcrumbItem>
|
<BreadcrumbItem>{{params.province}}</BreadcrumbItem>
|
<BreadcrumbItem>{{params.city}}</BreadcrumbItem>
|
<BreadcrumbItem>{{params.county}}</BreadcrumbItem>
|
<BreadcrumbItem>{{params.device_name}}</BreadcrumbItem>
|
|
</Breadcrumb>
|
</Card>
|
<Card class="mrt8">
|
<div class="graph-tabs-tooltip" style="position:absolute; right: 10px;z-index: 999">
|
<div style="position: relative">
|
<Tooltip content="告警阀值设置" placement="top">
|
<Button icon="ios-notifications" type="primary" shape="circle" class="mrr8" @click="showAlarmsSetting"></Button>
|
</Tooltip>
|
<Tooltip content="导出实时折线图" placement="top">
|
<Button icon="ios-download" type="primary" shape="circle" class="mrr8" @click="downloadControlData"></Button>
|
</Tooltip>
|
</div>
|
</div>
|
<Tabs value="name3" @on-click="graphResize()">
|
<TabPane label="烟感" name="name3">
|
<line-graph class="h600 bg-white"
|
ref="smoke"
|
unit="PPM"
|
title="烟感"
|
name="烟感"
|
min= "100"
|
max="10000"></line-graph>
|
</TabPane>
|
<TabPane label="空气温度" name="name2">
|
<line-graph class="h600 bg-white"
|
ref="temp"
|
unit="℃"
|
min="-40"
|
max="80"
|
title="空气温度"></line-graph>
|
</TabPane>
|
<TabPane label="空气湿度" name="name1">
|
<line-graph class="h600 bg-white"
|
ref="humidity"
|
unit="%RH"
|
min="0"
|
max="100"
|
title="空气湿度"></line-graph>
|
</TabPane>
|
</Tabs>
|
</Card>
|
<Table class="mrt8" max-height="400" border :columns="columns1" :data="tbl"></Table>
|
<Modal
|
title="告警参数设置"
|
v-model="alarmsModal"
|
footer-hide>
|
<alarms-setting :device_id="sensor_dev_id" :alarmRange="alarms"></alarms-setting>
|
</Modal>
|
<form :action="servlet" method="post" id="all_picture">
|
<input type="hidden" name="pageName" value="normal"/>
|
<input type="hidden" name="excelName" id="excelName" value="Echarts"/>
|
<input type="hidden" name="picNames" id="picNames"/>
|
<input type="hidden" name="picSours" id="picSours"/>
|
<input type="hidden" name="tabData" id="tabData"/>
|
</form>
|
</div>
|
</template>
|
<script>
|
import LineGraph from '../../components/LineGraph';
|
import {Timeout, ajax, CORS} from '../../libs/common';
|
import {threshold} from '../../libs/constant';
|
import AlarmsSetting from '../../components/AlarmsSetting';
|
export default {
|
components:{
|
LineGraph,
|
AlarmsSetting
|
},
|
data: function() {
|
var params = this.$router.currentRoute.params; // 获取路由参数
|
return {
|
params: params,
|
servlet: CORS+'EchartPictureDowload.servlet',
|
autocomplete: {
|
value:'',
|
data: []
|
},
|
alarms: {
|
airhum_alarm: {
|
min: 0,
|
max: 50
|
},
|
airtmp_alarm: {
|
min: -40,
|
max: 50
|
},
|
smoke_alarm: {
|
min: 100,
|
max: 500
|
}
|
},
|
alarmsModal: false,
|
pagenew: true, // 标记页面第一次加载
|
split1: '260px',
|
breadcrumb: '',
|
timeout: new Timeout(),
|
treeView: [],
|
sensor_dev_id:0,
|
smoke: {
|
title: '烟感'
|
},
|
columns1: [
|
{
|
title: '烟感（PPM）',
|
key: 'smoke'
|
},
|
{
|
title: '空气温度（℃）',
|
key: 'airtmp'
|
},
|
{
|
title: '空气湿度（%RH）',
|
key: 'airhum'
|
},
|
{
|
title: '更新时间',
|
key: 'record_time'
|
},
|
{
|
title: '通信计数',
|
key: 'dev_commcount'
|
}
|
],
|
tbl:[]
|
}
|
},
|
created: function() {
|
// 设置主导航
|
this.$store.commit('setActiveName', 'control');
|
|
this.$bus.$emit('changePageState', 'control');
|
},
|
methods: {
|
setAutoComplete: function() {
|
this.autocomplete.data = []; // 初始化可搜索内容
|
var _self = this;
|
// 请求查询后台，获取点信息
|
ajax({
|
type: 'post',
|
url: 'Sensor_mapinfoAction!searchAll',
|
async: true,
|
data: null,
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
// 遍历data的值
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_self.autocomplete.data.push(_data.sinf.device_name);
|
}
|
}
|
}
|
});
|
},
|
autoCompleteMethod (value, option) {
|
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
},
|
update: function() {
|
var _self = this;
|
|
// 烟感折线图配置项
|
var smokeOpts= {
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: []
|
}
|
}
|
this.timeout.start(function() {
|
var newTime = new Date().format('yyyy-MM-dd hh:mm:ss');
|
var xdata = smokeOpts.xAxis.data;
|
var sdata = smokeOpts.series.data;
|
if(newTime in xdata) {
|
|
}else {
|
if(xdata.length>10) {
|
xdata.shift();
|
sdata.shift();
|
}
|
xdata.push(newTime);
|
sdata.push(getRandom());
|
}
|
_self.$refs['smoke'].setOption(smokeOpts);
|
|
// 开启延时计时器
|
_self.timeout.open();
|
}, 4000);
|
|
function getRandom() {
|
var value = 100;
|
var times = Math.round(Math.random()*10000);
|
return Math.round(value+Math.random()*times)
|
}
|
},
|
showAlarmsSetting: function() {
|
this.alarmsModal = true;
|
},
|
downloadControlData: function() {
|
// form表单的元素
|
var excelNameForm = document.getElementById("excelName");
|
var picNamesForm = document.getElementById("picNames");
|
var picSoursForm = document.getElementById('picSours');
|
var tabDataForm = document.getElementById('tabData');
|
|
// excel文件名称
|
var excelName = this.getDeviceFullName();
|
// 图片
|
var smokeURL = this.$refs['smoke'].getDataURL(); // 烟感
|
var airhumURL = this.$refs['humidity'].getDataURL(); // 湿度
|
var airtmpURL = this.$refs['temp'].getDataURL(); // 温度
|
var picNames = ['烟感折线图', '空气湿度折线图', '空气温度折线图'];
|
var picSours = [smokeURL, airhumURL, airtmpURL];
|
var tabData = this.getTabData(this.columns1, this.tbl);
|
|
//设置值
|
excelNameForm.value = excelName;
|
picNamesForm.value = JSON.stringify(picNames);
|
picSoursForm.value = JSON.stringify(picSours);
|
tabDataForm.value = JSON.stringify(tabData);
|
// console.log(tabData)
|
document.getElementById("all_picture").submit();
|
},
|
getDeviceFullName: function() {
|
var params = this.params;
|
// 拼接文件名称
|
var fullName = '';
|
if(params.device_name) {
|
fullName += params.province?params.province+'-':''; // 省
|
fullName += params.city?params.city+'-':''; // 市
|
fullName += params.county?params.county+'-':''; // 区县
|
fullName += params.device_name?params.device_name:''; // 设备名称
|
}
|
return fullName;
|
|
},
|
getTabData: function(cols, rows) { // 获取导出数据tabData
|
// 遍历表格头部数据
|
var result = [];
|
// 获取头部数据
|
var col = [];
|
for(var i=0; i<cols.length; i++) {
|
var _cols = cols[i];
|
col.push(_cols.title);
|
}
|
result.push(col);
|
// 获取表格的内容
|
for(var i=0; i<rows.length; i++) {
|
var row = [];
|
var _rows = rows[i];
|
for(var k=0; k<cols.length; k++) {
|
var _cols = cols[k];
|
var key = _cols.key;
|
var val = _rows[key] == undefined?'':_rows[key];
|
row.push(val);
|
}
|
result.push(row);
|
}
|
return result;
|
},
|
setAlarms: function(alarms) {
|
this.alarms.smoke_alarm.max = alarms.smoke_alarm>this.alarms.smoke_alarm.min?alarms.smoke_alarm: this.alarms.smoke_alarm.min+1;
|
this.alarms.airhum_alarm.max = alarms.airhum_alarm>this.alarms.airhum_alarm.min?alarms.airhum_alarm: this.alarms.airhum_alarm.min+1;
|
this.alarms.airtmp_alarm.max = alarms.airtmp_alarm>this.alarms.airtmp_alarm.min?alarms.airtmp_alarm: this.alarms.airtmp_alarm.min+1;
|
},
|
setTbl: function(data) { // 设置表格的数据
|
//console.log(data);
|
var alarms = this.alarms;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.cellClassName = {};
|
// 设置烟雾告警
|
if(_data.smoke>alarms.smoke_alarm.max) {
|
_data.cellClassName.smoke='bg-error'
|
}
|
|
// 设置空气温度告警
|
if(_data.airtmp>alarms.airtmp_alarm.max) {
|
_data.cellClassName.airtmp='bg-error'
|
}
|
|
// 设置空气湿度告警
|
if(_data.airhum>alarms.airhum_alarm.max) {
|
_data.cellClassName.airhum='bg-error'
|
}
|
}
|
//console.log(alarms.airtmp_alarm.max);
|
this.tbl = data;
|
},
|
graphResize: function() {
|
this.$refs['smoke'].resize(); // 烟感
|
this.$refs['temp'].resize(); // 温度
|
this.$refs['humidity'].resize(); // 湿度
|
},
|
loadData (item, callback) {
|
// 根据item的type调用方法
|
switch(item.type) {
|
case 'province':
|
this.searchCity(item, callback);
|
break;
|
case 'city':
|
this.searchCounty(item, callback);
|
break;
|
case 'county':
|
this.searchDevice(item, callback);
|
break;
|
default:
|
callback([])
|
break;
|
}
|
},
|
searchProvince: function() { // 查询所有的省
|
var _self = this;
|
_self.treeView = [];
|
var params = this.params;
|
// 请求后台获取所有的省份
|
ajax({
|
data: null,
|
url: 'Sensor_infAction!serchProvice',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code ==1) {
|
var data = rs.data;
|
for(var i=0;i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data,
|
name: _data,
|
province: _data,
|
type: 'province',
|
loading: false,
|
children: []
|
};
|
var func = function(tmp) {
|
// 如果
|
if(params.province) {
|
if(_data == params.province) {
|
tmp.expand = true;
|
_self.searchCity(tmp, function(result) {
|
tmp.children = result;
|
});
|
}
|
|
}else if(i==0 && _self.pagenew) {
|
tmp.expand = true;
|
_self.searchCity(tmp, function(result) {
|
tmp.children = result;
|
});
|
}
|
}(tmp);
|
|
_self.treeView.push(tmp);
|
}
|
}
|
}
|
});
|
},
|
searchCity: function(item, callback) { // 查询某省下的所有市
|
var _self = this;
|
var params = this.params;
|
var searchParams = {
|
province: item.province
|
};
|
// 请求后台获取所有的市
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_infAction!serchCity',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data;
|
|
for(var i=0;i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data,
|
name: _data,
|
province: item.province,
|
city: _data,
|
type: 'city',
|
loading: false,
|
children: []
|
};
|
|
// 设置闭包
|
var func = function(tmp) {
|
// 如果
|
if(params.city) {
|
if(params.city == _data)
|
tmp.expand = true;
|
_self.searchCounty(tmp, function(res) {
|
tmp.children = res;
|
});
|
}else if(i==0 && _self.pagenew) {
|
tmp.expand = true;
|
_self.searchCounty(tmp, function(res) {
|
tmp.children = res;
|
});
|
}
|
}(tmp);
|
|
result.push(tmp);
|
}
|
}
|
callback(result);
|
}
|
});
|
},
|
searchCounty: function(item, callback) { // 查询某市下的所有的区县
|
var _self = this;
|
var params = this.params;
|
var searchParams = {
|
province: item.province,
|
city: item.city
|
};
|
// 请求后台获取所有的区县
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_infAction!serchCounty',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data;
|
for(var i=0;i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data,
|
name: _data,
|
province: item.province,
|
city: item.city,
|
county: _data,
|
type: 'county',
|
loading: false,
|
children: []
|
};
|
|
// 设置闭包
|
var func = function(tmp) {
|
// 如果
|
if(params.county) {
|
if(_data == params.county) {
|
tmp.expand = true;
|
_self.searchDevice(tmp, function(res) {
|
tmp.children = res;
|
});
|
}
|
|
}else if(i==0 && _self.pagenew) {
|
tmp.expand = true;
|
_self.searchDevice(tmp, function(res) {
|
tmp.children = res;
|
});
|
}
|
}(tmp);
|
|
result.push(tmp);
|
}
|
}
|
callback(result);
|
}
|
});
|
},
|
searchDevice: function(item, callback) { // 查询某区县下的所有的设备
|
var _self = this;
|
var params = this.params;
|
var searchParams = {
|
province: item.province,
|
city: item.city,
|
county: item.county
|
};
|
// 请求后台获取所有的设备
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_infAction!serchDevice',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data;
|
//console.log(rs);
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data.device_name,
|
name: _data.device_name,
|
province: item.province,
|
city: item.city,
|
county: _data.county,
|
device_name: _data.device_name,
|
sensor_dev_id: _data.sensor_dev_id,
|
plus: _data,
|
type: 'device'
|
};
|
|
// 设置闭包
|
var func = function(tmp) {
|
// 如果
|
if(params.device_name) {
|
if(tmp.device_name == params.device_name) {
|
tmp.selected = true;
|
_self.searchDeviceInfo({}, tmp);
|
}
|
}else if(i==0 && _self.pagenew) {
|
tmp.selected = true;
|
_self.searchDeviceInfo({}, tmp);
|
}
|
}(tmp);
|
|
result.push(tmp);
|
}
|
}
|
callback(result);
|
}
|
});
|
},
|
searchDeviceInfo: function(data, item) {
|
//console.log(this.treeView);
|
var _self = this;
|
this.pagenew = false;
|
if(item.type=='device' && this.sensor_dev_id != item.sensor_dev_id) {
|
this.params = item;
|
this.sensor_dev_id = item.sensor_dev_id;
|
this.setAlarms(item.plus); // 设置告警范围
|
var searchParams = {
|
sensor_dev_id: item.sensor_dev_id
|
};
|
//console.log(this.alarms);
|
// 烟感折线图配置项
|
var smokeOpts= {
|
visualMap: {
|
show: false,
|
pieces: [{
|
gt: this.alarms.smoke_alarm.min,
|
lte: this.alarms.smoke_alarm.max,
|
color: '#2d8cf0' // 蓝色
|
},{
|
gt: this.alarms.smoke_alarm.max,
|
color: '#ed4014' // 红色
|
}],
|
outOfRange: {
|
color: '#19be6b' // 绿色
|
}
|
},
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: {
|
silent: true,
|
data: [{
|
yAxis: this.alarms.smoke_alarm.max
|
}]
|
}
|
}
|
};
|
|
// 空气温度
|
var airtmpOpts = {
|
visualMap: {
|
show: false,
|
pieces: [{
|
gt: this.alarms.airtmp_alarm.min,
|
lte: this.alarms.airtmp_alarm.max,
|
color: '#2d8cf0' // 蓝色
|
},{
|
gt: this.alarms.airtmp_alarm.max,
|
color: '#ed4014' // 红色
|
}],
|
outOfRange: {
|
color: '#19be6b' // 绿色
|
}
|
},
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: {
|
silent: true,
|
data: [{
|
yAxis: this.alarms.airtmp_alarm.max
|
}]
|
}
|
}
|
};
|
|
// 空气湿度
|
var airhumOpts = {
|
visualMap: {
|
show: false,
|
pieces: [{
|
gt: this.alarms.airhum_alarm.min,
|
lte: this.alarms.airhum_alarm.max,
|
color: '#2d8cf0' // 蓝色
|
},{
|
gt: this.alarms.airhum_alarm.max,
|
color: '#ed4014' // 红色
|
}],
|
outOfRange: {
|
color: '#19be6b' // 绿色
|
}
|
},
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: {
|
silent: true,
|
data: [{
|
yAxis: this.alarms.airhum_alarm.max
|
}]
|
}
|
}
|
};
|
|
// 请求后台,获取最近的几笔数据
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_hisdataAction!serchByInfo',
|
success:function(res) {
|
var rs = JSON.parse(res.result);
|
// 对最近的10笔数据进行处理
|
if(rs.code == 1) {
|
var data = rs.data;
|
// console.log(rs);
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
// 烟感配置项
|
smokeOpts.xAxis.data.push(_data.record_time);
|
smokeOpts.series.data.push(_data.smoke);
|
|
// 空气温度
|
airtmpOpts.xAxis.data.push(_data.record_time);
|
airtmpOpts.series.data.push(_data.airtmp);
|
|
// 空气湿度
|
airhumOpts.xAxis.data.push(_data.record_time);
|
airhumOpts.series.data.push(_data.airhum);
|
|
}
|
}
|
var isNew=true;
|
// 查询实时数据并开启计时器
|
_self.timeout.start(function() {
|
// 请求后台获取设备的实时数据
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_stateAction!serchByCondition',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data[0];
|
setOpts(data.record_time, data.smoke, smokeOpts); // 设置烟感配置项
|
setOpts(data.record_time, data.airtmp, airtmpOpts); // 设置空气温度置项
|
setOpts(data.record_time, data.airhum, airhumOpts); // 设置空气湿度置项
|
|
// 设置表格的值
|
_self.setTbl(rs.data);
|
}
|
if(isNew) {
|
_self.$refs['smoke'].setOption(smokeOpts); // 烟感
|
_self.$refs['temp'].setOption(airtmpOpts) // 温度
|
_self.$refs['humidity'].setOption(airhumOpts) // 湿度
|
}else {
|
_self.$refs['smoke'].setOption(smokeOpts, true); // 烟感
|
_self.$refs['temp'].setOption(airtmpOpts, true) // 温度
|
_self.$refs['humidity'].setOption(airhumOpts, true) // 湿度
|
}
|
|
isNew=false; // 加载标志符
|
// 开启延时计时器
|
_self.timeout.open();
|
}
|
});
|
}, 4000);
|
}
|
});
|
|
|
}
|
|
// 设置配置项
|
function setOpts(time, value, opts) {
|
var xdata = opts.xAxis.data;
|
var sdata = opts.series.data;
|
if(!checkValueInArr(time, xdata)) {
|
if(xdata.length>40) {
|
xdata.shift();
|
sdata.shift();
|
}
|
xdata.push(time);
|
sdata.push(value);
|
}
|
}
|
|
// 监测当前的数据是否存在数组中
|
function checkValueInArr(val, arr) {
|
var result = false;
|
for(var i=0; i<arr.length; i++) {
|
var _arr = arr[i];
|
if(_arr == val) {
|
result = true;
|
break;
|
}
|
}
|
return result;
|
}
|
},
|
updateGraphWarnLine: function(alarms) {
|
// 烟感折线图配置项
|
var smokeOpts= {
|
visualMap: {
|
show: false,
|
pieces: [{
|
gt: this.alarms.smoke_alarm.min,
|
lte: this.alarms.smoke_alarm.max,
|
color: '#2d8cf0' // 蓝色
|
},{
|
gt: this.alarms.smoke_alarm.max,
|
color: '#ed4014' // 红色
|
}],
|
outOfRange: {
|
color: '#19be6b' // 绿色
|
}
|
},
|
series: {
|
markLine: {
|
silent: true,
|
data: [{
|
yAxis: this.alarms.smoke_alarm.max
|
}]
|
}
|
}
|
};
|
|
// 空气温度
|
var airtmpOpts = {
|
visualMap: {
|
show: false,
|
pieces: [{
|
gt: this.alarms.airtmp_alarm.min,
|
lte: this.alarms.airtmp_alarm.max,
|
color: '#2d8cf0' // 蓝色
|
},{
|
gt: this.alarms.airtmp_alarm.max,
|
color: '#ed4014' // 红色
|
}],
|
outOfRange: {
|
color: '#19be6b' // 绿色
|
}
|
},
|
series: {
|
markLine: {
|
silent: true,
|
data: [{
|
yAxis: this.alarms.airtmp_alarm.max
|
}]
|
}
|
}
|
};
|
|
// 空气湿度
|
var airhumOpts = {
|
visualMap: {
|
show: false,
|
pieces: [{
|
gt: this.alarms.airhum_alarm.min,
|
lte: this.alarms.airhum_alarm.max,
|
color: '#2d8cf0' // 蓝色
|
},{
|
gt: this.alarms.airhum_alarm.max,
|
color: '#ed4014' // 红色
|
}],
|
outOfRange: {
|
color: '#19be6b' // 绿色
|
}
|
},
|
series: {
|
markLine: {
|
silent: true,
|
data: [{
|
yAxis: this.alarms.airhum_alarm.max
|
}]
|
}
|
}
|
};
|
//console.log(smokeOpts);
|
this.$refs['smoke'].updateLine(smokeOpts.visualMap, smokeOpts.series.markLine); // 烟感
|
this.$refs['temp'].updateLine(airtmpOpts.visualMap, airtmpOpts.series.markLine) // 温度
|
this.$refs['humidity'].updateLine(airhumOpts.visualMap, airhumOpts.series.markLine) // 湿度
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
this.$bus.$emit('setMainNav', 'control'); // 修改actionName
|
|
// 设置自动完成的数据
|
this.setAutoComplete();
|
|
// 查询省-市-区县-机房
|
this.searchProvince();
|
|
|
// 监控关闭面板
|
this.$bus.$off('closeModal').$on('closeModal',function() {
|
//console.log(123);
|
_self.alarmsModal = false;
|
});
|
|
// 监控告警值设置
|
this.$bus.$off('setAlarms').$on('setAlarms', function(alarms){
|
_self.setAlarms(alarms);
|
_self.updateGraphWarnLine();
|
});
|
},
|
beforeDestroy: function() {
|
this.timeout.stop(); // 关闭页面中的计时器
|
}
|
}
|
</script>
|
<style scoped>
|
.demo-split{
|
height: 200px;
|
border: 1px solid #dcdee2;
|
}
|
.demo-split-pane{
|
padding: 10px;
|
}
|
</style>
|
