<template>
|
<div data-name="monitor.control" class="page">
|
<!-- Top Navbar -->
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="left">
|
<a href="#" class="link back popup-close">
|
<i class="icon icon-back"></i>
|
<span class="ios-only">返回</span>
|
</a>
|
</div>
|
<div class="title center">实时监测</div>
|
<div class="subnavbar">
|
<div class="subnavbar-inner">
|
<div class="segmented segmented-raised mainData-tab">
|
<a class="button tab-link tab-link-active" href="#batt-data-tbl">数据表格</a>
|
<a class="button tab-link graph-resize" href="#batt-data-graph">折线图</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- Scrollable page content -->
|
<div class="page-content data-page-content">
|
<div class="tabs">
|
<div class="tab" id="batt-data-graph">
|
<div class="graph-group">
|
<div data-direction="vertical" class="swiper-container swiper-init demo-swiper">
|
<div class="swiper-pagination"></div>
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="graph-container" id="smokeLine">
|
<div class="graph-inner">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="graph-container" id="airtmpLine">
|
<div class="graph-inner">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="graph-container" id="airhumLine">
|
<div class="graph-inner">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="tab tab-active" id="batt-data-tbl">
|
<primary-table v-bind:cols="tbl.cols" v-bind:rows="tbl.data"></primary-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
return {
|
data() {
|
var params = this.$route.params;
|
return {
|
params: params,
|
timeout: new Timeout()
|
}
|
},
|
on: {
|
pageInit: function(e, pages) {
|
var _page = this;
|
var pageContent = pages.$el.find('.page-content')[0]; // 内容容器
|
var params = this.params; // 基础参数
|
// console.log(params);
|
var vm = this.vm = new Vue({
|
el: pageContent,
|
delimiters: ['${', '}'],
|
data: {
|
params: params,
|
alarms: {
|
airhum_alarm: {
|
min: 0,
|
max: 50
|
},
|
airtmp_alarm: {
|
min: -40,
|
max: 50
|
},
|
smoke_alarm: {
|
min: 100,
|
max: 500
|
}
|
},
|
tbl: {
|
cols: [
|
{
|
title: '烟感（PPM）',
|
key: 'smoke'
|
},
|
{
|
title: '空气温度（℃）',
|
key: 'airtmp'
|
},
|
{
|
title: '空气湿度（%RH）',
|
key: 'airhum'
|
},
|
{
|
title: '更新时间',
|
key: 'record_time'
|
},
|
{
|
title: '通信计数',
|
key: 'dev_commcount'
|
}
|
],
|
data: []
|
},
|
smokeLine: '',
|
airtmpLine: '',
|
airhumLine: ''
|
},
|
methods: {
|
searchDeviceInfo: function() {
|
var _self = this;
|
var searchParams = {
|
sensor_dev_id: this.params.sensor_dev_id
|
};
|
|
// 烟感折线图配置项
|
var smokeOpts= {
|
xAxis: {
|
data: []
|
},
|
series: {
|
name: '烟感',
|
data: []
|
}
|
};
|
// 空气温度
|
var airtmpOpts = {
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: false
|
}
|
};
|
|
// 空气湿度
|
var airhumOpts = {
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: false
|
}
|
};
|
|
// 请求后台,获取最近的几笔数据
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_hisdataAction!serchByInfo',
|
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];
|
// 烟感配置项
|
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);
|
}
|
}
|
|
_page.timeout.start(function() {
|
// 请求后台
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_stateAction!serchByCondition',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
// console.log(rs);
|
if(rs.code == 1) {
|
var data = rs.data[0];
|
//console.log(data.record_time);
|
setOpts(data.record_time, data.smoke, smokeOpts); // 设置烟感配置项
|
setOpts(data.record_time, data.airtmp, airtmpOpts); // 设置空气温度置项
|
setOpts(data.record_time, data.airhum, airhumOpts); // 设置空气湿度置项
|
// 设置表格的数据
|
_self.tbl.data = rs.data;
|
}
|
//console.log(smokeOpts);
|
_self.smokeLine.setOption(smokeOpts);
|
_self.airtmpLine.setOption(airtmpOpts);
|
_self.airhumLine.setOption(airhumOpts);
|
// 开启计时器
|
_page.timeout.open();
|
}
|
});
|
}, 4000);
|
}
|
});
|
// 设置配置项
|
function setOpts(time, value, opts) {
|
var xdata = opts.xAxis.data;
|
var sdata = opts.series.data;
|
console.log()
|
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;
|
}
|
},
|
search: function() {
|
var _self = this;
|
var searchParams = {
|
sensor_dev_id: this.params.sensor_dev_id
|
};
|
}
|
},
|
mounted() {
|
// 环境温度
|
this.airtmpLine = new LineGraph('airtmpLine', {
|
title: '环境温度',
|
name: "环境温度",
|
min: -40,
|
max: 80,
|
unit: '(℃)'
|
});
|
// 烟感
|
this.smokeLine = new LineGraph('smokeLine', {
|
title: '烟感',
|
name: '烟感',
|
min: 100,
|
max: 10000,
|
unit: '(PPM)'
|
});
|
// 空气湿度
|
this.airhumLine = new LineGraph('airhumLine', {
|
title: '空气湿度',
|
name: '空气湿度',
|
min: 0,
|
max: 100,
|
unit: '(%RH)'
|
});
|
this.searchDeviceInfo();
|
}
|
});
|
// 定义滑动轮播组件
|
var swiper = app.swiper.create('.swiper-container', {
|
speed: 400,
|
spaceBetween: 0,
|
direction: 'vertical',
|
setWrapperSize: true,
|
autoHeight: true,
|
pagination: {
|
el: '.swiper-pagination',
|
}
|
});
|
|
// 页面中的点击事件
|
$('.graph-resize').click(function() {
|
var pageHt = $('.data-page-content').height();
|
$('.graph-group').height(pageHt-1);
|
swiper.update();
|
vm.smokeLine.resize();
|
vm.airhumLine.resize();
|
vm.airtmpLine.resize();
|
});
|
},
|
pageAfterIn: function() {
|
this.timeout.open(); // 开启计时器
|
},
|
pageBeforeOut:function() {
|
this.timeout.stop(); // 关闭计时器
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
/* A bit of demo styles */;
|
.demo-swiper .swiper-slide {
|
font-size: 25px;
|
font-weight: 300;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: #fff;
|
color: #000;
|
}
|
.demo-swiper .swiper-slide {
|
box-sizing: border-box;
|
border: 1px solid #ddd;
|
background: #fff;
|
}
|
.demo-swiper {
|
font-size: 18px;
|
height: 100%;
|
}
|
.demo-swiper.demo-swiper-auto .swiper-slide {
|
width: 85%;
|
}
|
.demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
|
width: 70%;
|
}
|
.demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
|
width: 30%;
|
}
|
</style>
|
