<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="right">
|
<a href="#" class="link toggle-my-modal" data-href="#myModal">
|
<i class="icon f7-icons">menu</i>
|
</a>
|
</div>
|
<div class="subnavbar">
|
<div class="subnavbar-inner">
|
<div class="segmented segmented-raised mainData-tab">
|
<a class="button tab-link tabs-tbl 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 class="my-pages my-pages-pre">
|
<a href="#" class="link">
|
<i class="icon f7-icons">chevron_left_round</i>
|
</a>
|
</div>
|
<div class="my-pages my-pages-next">
|
<a href="#" class="link">
|
<i class="icon f7-icons">chevron_right_round</i>
|
</a>
|
</div>
|
<!-- 左侧面板 -->
|
<div class="my-modal" id="myModal">
|
<div class="my-modal-rel">
|
<div class="my-modal-bg my-modal-close"></div>
|
<div class="my-modal-container">
|
<div class="my-modal-rel">
|
<div class="my-modal-header">
|
<div class="title center">条件筛选</div>
|
</div>
|
<div class="my-modal-content">
|
<div class="list no-margin">
|
<ul>
|
<li>
|
<div class="item-content item-input">
|
<div class="item-inner">
|
<div class="item-title item-label">更新时间（开始）</div>
|
<div class="item-input-wrap">
|
<input type="text"
|
placeholder="请输入日期"
|
readonly="readonly"
|
v-model="initTimeRange.record_time1"
|
id="record_time1"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content item-input">
|
<div class="item-inner">
|
<div class="item-title item-label">更新时间（结束）</div>
|
<div class="item-input-wrap">
|
<input type="text"
|
placeholder="请输入日期"
|
readonly="readonly"
|
v-model="initTimeRange.record_time"
|
id="record_time"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="my-modal-footer">
|
<div class="row">
|
<button class="col button button-fill" v-on:click="enSure">确定</button>
|
<button class="col button button-fill color-orange my-modal-close">关闭</button>
|
</div>
|
</div>
|
</div>
|
</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'
|
}
|
],
|
data: []
|
},
|
smokeLine: '',
|
airtmpLine: '',
|
airhumLine: ''
|
},
|
methods: {
|
|
},
|
mounted() {
|
var _self = this;
|
var myPages = new MyPages($('.my-pages.my-pages-pre'),$('.my-pages.my-pages-next'), {
|
pageSize: 40
|
});
|
// 环境温度
|
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)'
|
});
|
|
// 监听获取设备信息
|
bus.$off('getDeviceInfo').$on('getDeviceInfo', function(data) {
|
// 根据分页信息设置表格
|
myPages.setData(data,function(res) {
|
_self.tbl.data = res; // 设置表格的数据
|
}, function(res) {
|
_self.tbl.data = res; // 设置表格的数据
|
});
|
// 烟感折线图配置项
|
var smokeOpts= {
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: false
|
}
|
};
|
|
// 空气温度
|
var airtmpOpts = {
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: false
|
}
|
};
|
|
// 空气湿度
|
var airhumOpts = {
|
xAxis: {
|
data: []
|
},
|
series: {
|
data: [],
|
markLine: false
|
}
|
};
|
// 遍历结果集解析数据
|
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);
|
}
|
_self.smokeLine.setOption(smokeOpts);
|
_self.airtmpLine.setOption(airtmpOpts);
|
_self.airhumLine.setOption(airhumOpts);
|
});
|
}
|
});
|
|
var start = new Date(); // 起始时间
|
var end = new Date(); // 结束时间
|
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
|
var myModalVm = new Vue({
|
el: '#myModal',
|
delimiters: ['${', '}'],
|
data: {
|
params: params,
|
initTimeRange: {
|
record_time1: start.format('yyyy-MM-dd'), // 起始时间
|
record_time: end.format('yyyy-MM-dd') // 结束时间
|
},
|
timeRange: {
|
record_time1: start.format('yyyy-MM-dd'), // 起始时间
|
record_time: end.format('yyyy-MM-dd') // 结束时间
|
},
|
myModal: ''
|
},
|
methods: {
|
enSure: function() {
|
var _self = this;
|
var searchParams = {
|
sensor_dev_id: this.params.sensor_dev_id,
|
record_time1: this.timeRange.record_time1+' 00:00:00',
|
record_time: this.timeRange.record_time+' 23:59:59'
|
};
|
//console.log(searchParams);
|
// 加载等待
|
app.preloader.show();
|
// 请求后台获取
|
ajax({
|
url: 'Sensor_hisdataAction!serchByCondition',
|
data: 'json='+JSON.stringify(searchParams),
|
success: function(res) {
|
// 关闭等待
|
app.preloader.hide();
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
_self.myModal.hide(); // 关闭面板
|
bus.$emit('getDeviceInfo', data);
|
}else {
|
// Create center toast
|
var toastCenter = app.toast.create({
|
text: '未查询到结果',
|
position: 'center',
|
closeTimeout: 2000,
|
});
|
toastCenter.open();
|
}
|
|
}
|
});
|
}
|
}
|
});
|
|
// 自定义左侧面板
|
var myModal = myModalVm.myModal = new MyModal('#myModal');
|
myModal.show();
|
// 更新时间（开始）
|
var recordTime1 = app.calendar.create({
|
inputEl: '#record_time1',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定',
|
on:{
|
change: function(calendar, value) {
|
var date = value[0].format('yyyy-MM-dd');
|
myModalVm.timeRange.record_time1 = date+' 00:00:00'
|
}
|
}
|
});
|
// 更新时间（结束）
|
var recordTime = app.calendar.create({
|
inputEl: '#record_time',
|
monthNames: monthNames,
|
monthNamesShort: monthNamesShort,
|
dayNames: dayNames,
|
dayNamesShort: dayNamesShort,
|
footer: true,
|
toolbarCloseText: '确定',
|
on:{
|
change: function(calendar, value) {
|
var date = value[0].format('yyyy-MM-dd');
|
myModalVm.timeRange.record_time = date+' 23:59:59'
|
}
|
}
|
});
|
|
// 定义滑动轮播组件
|
var swiper = app.swiper.create('.swiper-container', {
|
speed: 400,
|
spaceBetween: 1,
|
direction: 'vertical',
|
setWrapperSize: true,
|
autoHeight: true,
|
pagination: {
|
el: '.swiper-pagination',
|
}
|
});
|
|
// 页面中的点击事件
|
$('.graph-resize').click(function() {
|
var pageHt = $('.data-page-content').height();
|
console.log(pageHt);
|
$('.graph-group').height(pageHt-1);
|
swiper.update();
|
vm.smokeLine.resize();
|
vm.airhumLine.resize();
|
vm.airtmpLine.resize();
|
|
$('.my-pages').addClass('my-pages-hide');
|
});
|
|
// 页面中的点击事件
|
pages.$navbarEl.find('.tabs-tbl').click(function() {
|
$('.my-pages').removeClass('my-pages-hide')
|
});
|
}
|
}
|
}
|
</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>
|
