<template>
|
<div data-name="batt-mon-tmp" class="page" id="">
|
<!-- Top Navbar -->
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="left">
|
<a href="#" class="link back">
|
<i class="icon f7-icons">chevron_left</i>
|
</a>
|
</div>
|
<div class="title center">单体温度({{params.groupname}})</div>
|
<div class="right">
|
<a href="#" class="batt-sel link"><i class="icon f7-icons">undo</i></a>
|
<a href="#" class="ac link"><i class="icon f7-icons">more_vertical</i></a>
|
</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" href="#batt-data-graph">柱状图</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- Scrollable page content -->
|
<div class="page-content">
|
<div class="tabs tabs-full-screen">
|
<span></span>
|
<div class="tab tab-active" id="batt-data-tbl">
|
<div class="data-table data-table-border data-table-init" id="dataTbl">
|
<table>
|
<caption style="font-size: 12px">${getStr()}</caption>
|
<thead>
|
<tr>
|
<th>序号</th>
|
<th>温度（℃）</th>
|
<th>序号</th>
|
<th>温度（℃）</th>
|
</tr>
|
</thead>
|
<tbody></tbody>
|
</table>
|
</div>
|
</div>
|
<div class="tab tab-full" id="batt-data-graph">
|
<div class="graph-container" id="battDataGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style>
|
.tabs-full-screen{
|
height: 100%;
|
}
|
.tabs-full-screen .tab-full {
|
height: 100%;
|
}
|
.graph-container {
|
height: 100%;
|
background-color: #FFFFFF;
|
}
|
</style>
|
<script>
|
return {
|
data: function() {
|
var params = this.$route.params;
|
var cView = app.views.current;
|
var history = cView.router.history;
|
return {
|
params: params,
|
history: history,
|
isRun: true,
|
str: getUrlStr({
|
province: params.province,
|
city: params.city,
|
county: params.county,
|
home: params.home,
|
fbsid: params.fbsid,
|
stationid: params.stationid,
|
groupid: params.groupid,
|
groupname: params.groupname
|
})
|
}
|
},
|
methods: {
|
searchData: function(callback) {
|
if(!this.isRun) {
|
return;
|
}
|
var _this = this;
|
var params = this.params;
|
if(!params) {
|
return;
|
}
|
var searchCondition = {
|
BattGroupId: params.groupid
|
};
|
// 请求后台
|
$.ajax({
|
type: "post",
|
async: true,
|
url: "Batt_rtdataAction_serchByCondition",
|
data: "json="+JSON.stringify(searchCondition),
|
dataType: "json",
|
success: function(res) {
|
if(typeof callback == "function") {
|
callback(res);
|
}
|
},
|
complete: function() {
|
setTimeout(_this.searchData.bind(_this, callback), 5000);
|
}
|
});
|
},
|
formaterData: function(data) {
|
var rs = {
|
num: [],
|
tbody: [],
|
data: [],
|
max: 0,
|
min: 0,
|
avg: 0,
|
sum: 0
|
};
|
// 遍历data的值返回指定的格式
|
for(var i=0; i<data.length; i+=2) {
|
var _rs = [];
|
for(var k=i;k<i+2; k++) {
|
if(k>=data.length) {
|
break;
|
}
|
var _data = data[k];
|
_rs.push(k+1);
|
_rs.push(_data.mon_tmp);
|
var num = k+1;
|
rs.num.push("#"+num);
|
rs.data.push(_data.mon_tmp);
|
}
|
rs.tbody.push(_rs);
|
}
|
rs.max = Math.max.apply(null, rs.data);
|
rs.min = Math.min.apply(null, rs.data);
|
for(var i=0; i<rs.data.length; i++) {
|
rs.sum += rs.data[i];
|
}
|
rs.avg = (rs.sum/rs.data.length).toFixed(2);
|
return rs;
|
},
|
searchBattGroup: function(callback) {
|
var params = this.params;
|
var temp = {
|
StationName1: params.province,
|
StationName2: params.city,
|
StationName5: params.county,
|
StationName: params.home,
|
StationId: params.stationid
|
};
|
|
// 查询后台
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchBattByStation',
|
data: 'json='+JSON.stringify(temp),
|
dataType: 'json',
|
beforeSend: function() {
|
app.preloader.show();
|
},
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
if(typeof callback == 'function') {
|
callback(data);
|
}
|
}
|
},
|
complete: function() {
|
app.preloader.hide();
|
}
|
});
|
}
|
},
|
on: {
|
pageAfterOut: function() {
|
this.isRun=false;
|
},
|
pageAfterIn: function() {
|
this.isRun = true;
|
},
|
pageInit: function(e, page) {
|
var _this = this;
|
var params = this.params;
|
var cView = app.views.current;
|
// 添加Vue数据监控
|
var dataTbl = new Vue({
|
el: "#dataTbl",
|
delimiters: ['${', '}'],
|
data: function() {
|
return {
|
min: 0,
|
max: 0,
|
sum: 0,
|
avg: 0
|
}
|
},
|
methods:{
|
getStr: function() {
|
var str = '';
|
str += '最大：'+this.getNumber(this.max)+"℃ ";
|
str += '最小：'+this.getNumber(this.min)+"℃ ";
|
str += '平均：'+this.getNumber(this.avg)+"℃ ";
|
return str;
|
},
|
getNumber: function(num, fixed) {
|
if(fixed) {
|
return Number(num.toFixed(fixed));
|
}else {
|
return Number(num);
|
}
|
|
}
|
}
|
});
|
|
// 饼状图
|
var battDataGraph = new BarEcharts('battDataGraph');
|
|
// 查询数据
|
this.searchData(function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
var formaterData = _this.formaterData(data);
|
dataTbl.min = formaterData.min;
|
dataTbl.max = formaterData.max;
|
dataTbl.sum = formaterData.sum;
|
dataTbl.avg = formaterData.avg;
|
createTblBody($('#dataTbl tbody'), formaterData.tbody, {
|
maxinum: true,
|
max: formaterData.max,
|
min: formaterData.min
|
});
|
battDataGraph.setOption({
|
subtitle: dataTbl.getStr(),
|
x: "center",
|
name: "单体温度",
|
seriesData: formaterData.data,
|
yData: formaterData.num,
|
color:[]
|
})
|
}
|
});
|
|
// 点击头部标签进行重置graph大小
|
$(".mainData-tab").on("click", ".tab-link", resizeGraph);
|
|
// 重置图表的大小
|
function resizeGraph() {
|
setTimeout(function() {
|
battDataGraph.resize();
|
}, 10);
|
}
|
|
var ac = app.actions.create({
|
buttons:[
|
{
|
text: "单体电压",
|
onClick: function() {
|
cView.router.navigate("/monitor/batt/mon/vol/"+_this.str+'vol/', {
|
reloadCurrent: true
|
});
|
}
|
},
|
{
|
text: "单体内阻",
|
onClick: function() {
|
cView.router.navigate("/monitor/batt/mon/res/"+_this.str+'res/', {
|
reloadCurrent: true
|
});
|
}
|
},
|
{
|
text: "单体电导",
|
onClick: function() {
|
cView.router.navigate("/monitor/batt/mon/cond/"+_this.str+'cond/', {
|
reloadCurrent: true
|
});
|
}
|
},
|
]
|
});
|
|
// 点击ac显示选择内容
|
$$('.ac').click(function() {
|
ac.open();
|
});
|
|
var battSelAc;
|
this.searchBattGroup(function(res) {
|
var battSelOpts ={
|
buttons: []
|
}
|
for(var i=0; i<res.length; i++) {
|
var _res = res[i];
|
var pageUrl = '/monitor/batt/mon/'+getUrlStr({
|
temp: params.pagename,
|
province: params.province,
|
city: params.city,
|
county: params.county,
|
home: params.home,
|
fbsid: params.fbsid,
|
stationid: params.stationid,
|
groupid: _res.BattGroupId,
|
groupname: _res.BattGroupName,
|
pagename: params.pagename
|
});
|
var tmp = {
|
text: _res.BattGroupName,
|
onClick: function(pageUrl) {
|
return function() {
|
cView.router.navigate(pageUrl, {
|
reloadCurrent: true
|
});
|
}
|
}(pageUrl)
|
}
|
battSelOpts.buttons.push(tmp);
|
}
|
battSelAc = app.actions.create(battSelOpts);
|
});
|
|
// 获取不同的参数
|
$$('.batt-sel').click(function() {
|
battSelAc.open();
|
});
|
}
|
}
|
}
|
</script>
|
