<template>
|
<div>
|
<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="downloadHisData"></Button>
|
</Tooltip>
|
<DatePicker :value="dateRange.values" @on-change="setTimeRange" type="daterange" :options="dateRange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
|
</div>
|
</div>
|
<Tabs value="smoke" @on-click="graphResize()">
|
<TabPane label="烟感" name="smoke">
|
<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 ref="table" class="mrt8" max-height="500" border :columns="columns1" :data="tbl"></Table>
|
<div style="margin: 10px;overflow: hidden">
|
<div style="float: right;">
|
<Page :total="pages.total" :page-size="pages.pageSize" :current="pages.current" show-sizer @on-page-size-change="chagePageSize" @on-change="changePage"></Page>
|
</div>
|
</div>
|
<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 {setTimeout } from 'timers';
|
import AlarmsSetting from '../../components/AlarmsSetting';
|
export default {
|
components: {
|
LineGraph,
|
AlarmsSetting
|
},
|
data: function() {
|
var params = this.$router.currentRoute.params; // 获取路由参数
|
var start = new Date(); // 起始时间
|
var end = new Date(); // 结束时间
|
start.setTime(start.getTime() - 3600 * 1000 * 24)
|
return {
|
params: params,
|
servlet: CORS+'EchartPictureDowload.servlet',
|
sensor_dev_id: 0,
|
alarms: {
|
airhum_alarm: {
|
min: 0,
|
max: 50
|
},
|
airtmp_alarm: {
|
min: -40,
|
max: 50
|
},
|
smoke_alarm: {
|
min: 100,
|
max: 500
|
}
|
},
|
alarmsSetting: {
|
airhum_alarm: 0,
|
airtmp_alarm: 0,
|
smoke_alarm: 0
|
},
|
alarmsModal: false,
|
pagenew: true, // 标记页面第一次加载
|
split1: '260px',
|
treeView: [],
|
columns1: [
|
{
|
title: '烟感（PPM）',
|
key: 'smoke'
|
},
|
{
|
title: '空气温度（℃）',
|
key: 'airtmp'
|
},
|
{
|
title: '空气湿度（%RH）',
|
key: 'airhum'
|
},
|
{
|
title: '更新时间',
|
key: 'record_time'
|
}
|
],
|
allTbl: [],
|
tbl: [],
|
pages:{
|
total: 0,
|
current: 1,
|
pageSize: 10
|
},
|
dateRangeVals: [start.format('yyyy-MM-dd')+' 23:59:59', end.format('yyyy-MM-dd')+' 23:59:59'],
|
dateRange: {
|
values: [start.format('yyyy-MM-dd'), end.format('yyyy-MM-dd')],
|
shortcuts: [
|
{
|
text: '近24小时',
|
value () {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
return [start, end];
|
}
|
},
|
{
|
text: '近3天',
|
value () {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
|
return [start, end];
|
}
|
},
|
{
|
text: '近7天',
|
value () {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
return [start, end];
|
}
|
},
|
{
|
text: '近1个月',
|
value () {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
return [start, end];
|
}
|
},
|
{
|
text: '近1年',
|
value () {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
return [start, end];
|
}
|
}
|
]
|
}
|
}
|
},
|
watch: {
|
dateRangeVals: {
|
handler: function(range) {
|
this.search();
|
},
|
deep: true
|
}
|
},
|
created: function() {
|
// 设置主导航
|
this.$store.commit('setActiveName', 'history');
|
|
this.$bus.$emit('changePageState', 'history');
|
},
|
methods: {
|
showAlarmsSetting: function() {
|
this.alarmsModal = true;
|
},
|
downloadHisData: 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.allTbl);
|
|
//设置值
|
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 start = new Date(this.dateRangeVals[0]).format('yyyy-MM-dd');
|
var end = new Date(this.dateRangeVals[1]).format('yyyy-MM-dd');
|
// 拼接文件名称
|
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:''; // 设备名称
|
fullName += '('+start+'至'+end+')';
|
}
|
return fullName;
|
|
},
|
getTabData: function(cols, rows) { // 获取导出数据tabData
|
//console.log(rows);
|
// 遍历表格头部数据
|
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;
|
},
|
graphResize: function() {
|
this.$refs['smoke'].resize(); // 烟感
|
this.$refs['temp'].resize(); // 温度
|
this.$refs['humidity'].resize(); // 湿度
|
},
|
setTimeRange: function(range) { // 设置时间
|
if(range[0].length !=0 && range[1].length !=0) {
|
var start = range[0]+' 23:59:59';
|
var end = range[1]+' 23:59:59';
|
this.dateRangeVals = [start, end];
|
}else {
|
this.$Message.warning('请选择日期');
|
}
|
},
|
setPages: function(total, current) { // 设置页面的分页信息
|
this.pages.total = total;
|
this.pages.current = current;
|
},
|
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;
|
},
|
changePage: function(current) { // 修改当前页
|
this.pages.current = current;
|
this.tbl = this.getTblData();
|
},
|
chagePageSize: function(size) { // 修改每页的条数
|
this.pages.pageSize = size;
|
this.tbl = this.getTblData();
|
},
|
loadData: function(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;
|
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) {
|
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); // 设置告警范围
|
this.search();
|
}
|
},
|
search: function() {
|
var _self = this;
|
var searchParams = {
|
sensor_dev_id: this.sensor_dev_id,
|
record_time1: this.dateRangeVals[0],
|
record_time: this.dateRangeVals[1]
|
};
|
// console.log(searchParams);
|
// 烟感折线图配置项
|
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
|
}]
|
}
|
}
|
};
|
// 查询后台获取设备的历史数据
|
this.$Spin.show();
|
ajax({
|
url: 'Sensor_hisdataAction!serchByCondition',
|
data: 'json='+JSON.stringify(searchParams),
|
success: function(res) {
|
_self.$Spin.hide();
|
var rs = JSON.parse(res.result);
|
//console.log(rs);
|
if(rs.code == 1) {
|
var data = rs.data;
|
_self.setPages(data.length, 1); // 设置分页信息
|
_self.allTbl = data;
|
_self.tbl = _self.getTblData();
|
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);
|
|
}
|
}else {
|
_self.tbl = [];
|
_self.$Message.warning('未查询到信息');
|
}
|
_self.$refs['smoke'].setOption(smokeOpts); // 烟感
|
_self.$refs['temp'].setOption(airtmpOpts) // 温度
|
_self.$refs['humidity'].setOption(airhumOpts) // 湿度
|
},
|
error: function() {
|
_self.$Spin.hide();
|
_self.$Message.error('查询失败!请检测网络连接！');
|
}
|
});
|
},
|
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) // 湿度
|
},
|
getTblData: function() {
|
var data = this.allTbl;
|
var pages = this.pages;
|
var currentIndex = (pages.current-1)*pages.pageSize;
|
var leng = currentIndex+pages.pageSize;
|
var result = [];
|
for(var i=currentIndex; i<leng; i++) {
|
if(i>=data.length) {
|
break;
|
}
|
result.push(data[i]);
|
}
|
return result;
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
this.$bus.$emit('setMainNav', 'history'); // 修改actionName
|
|
// 查询省-市-区县-机房
|
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();
|
});
|
}
|
}
|
</script>
|
<style scoped>
|
.demo-split{
|
height: 200px;
|
border: 1px solid #dcdee2;
|
}
|
.demo-split-pane{
|
padding: 10px;
|
}
|
</style>
|
