<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">
|
<i class="icon f7-icons">chevron_left</i>
|
</a>
|
</div>
|
<div class="title center">实时监测</div>
|
<div class="right">
|
<a href="#" class="control-ac link"><i class="icon f7-icons">more_vertical</i></a>
|
</div>
|
</div>
|
</div>
|
<!-- Scrollable page content -->
|
<div class="page-content">
|
<p class="monitor-index-url">地址:<span class="bread-item" onclick="breadItemClick(0)">{{ params.home}}</span>
|
/<span class="bread-item" onclick="breadItemClick(1)">{{params.groupname}}</span>/实时监测</p>
|
<div class="list links-list card" style="margin-top: 8px;">
|
<ul>
|
<li><a href="{{battMonVolUrl}}vol/">数据图表</a></li>
|
</ul>
|
</div>
|
<div class="card data-table-collapsible data-table data-table-init" id="devStatus">
|
<div class="card-header">
|
<div class="data-table-title">BTS设备状态</div>
|
</div>
|
<div class="card-content">
|
<table v-if="isLink">
|
<thead>
|
<tr>
|
<th class="label-cell">SD卡</th>
|
<th class="numeric-cell">通信计数</th>
|
<th class="numeric-cell">通信丢包率</th>
|
<th class="numeric-cell">测试组号</th>
|
<th class="numeric-cell">设备工作状态</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td class="label-cell">${sdStatus|sdStatusFilter}</td>
|
<td class="numeric-cell">${signalNum}</td>
|
<td class="numeric-cell">${lossNum}</td>
|
<td class="numeric-cell">${groupName}</td>
|
<td class="numeric-cell">${workStatus| workStatusFilter}</td>
|
</tr>
|
</tbody>
|
</table>
|
<table v-else>
|
<thead>
|
<tr>
|
<th class="label-cell">设备状态</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td class="label-cell" data-collapsible-title="设备状态">设备未连接</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div class="popover popover-links" id="popoverList">
|
<div class="popover-inner">
|
<div class="list">
|
<ul>
|
<li><a class="list-button item-link" href="#">Link 1</a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div id="battStatus">
|
<!-- Additional "tabbar" class -->
|
<div class="toolbar tabbar">
|
<div class="toolbar-inner">
|
<a v-for="value in battGroup" v-bind:href="value.href" class="tab-link" v-bind:class='value.cla1'>电池组${value.index+1}</a>
|
</div>
|
</div>
|
<div class="tabs">
|
<div v-for="value in battGroup" class="page-content tab" v-bind:id="value.id" v-bind:class="value.cla2" style="padding-top: 0">
|
<div class="card data-table data-table-collapsible data-table-init">
|
<div class="card-content">
|
<table>
|
<thead>
|
<tr>
|
<th class="label-cell">电池状态</th>
|
<th class="numeric-cell">端电压</th>
|
<th class="numeric-cell">电池电流</th>
|
<th class="numeric-cell">更新时间</th>
|
<th class="numeric-cell">测试日期</th>
|
<th class="numeric-cell">测试时长</th>
|
<th class="numeric-cell">测试容量</th>
|
<th class="numeric-cell">剩余容量</th>
|
<th class="numeric-cell">续航时间</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-if='battGroupData[value.index]'>
|
<td class="label-cell" data-collapsible-title="电池状态">${battGroupData[value.index].battStats|battStatsFilter}</td>
|
<td class="numeric-cell" data-collapsible-title="端电压">${battGroupData[value.index].termVol}</td>
|
<td class="numeric-cell" data-collapsible-title="电池电流">${battGroupData[value.index].battCurr}</td>
|
<td class="numeric-cell" data-collapsible-title="更新时间">${battGroupData[value.index].lastUpdateTime}</td>
|
<td class="numeric-cell" data-collapsible-title="测试日期">${battGroupData[value.index].testTime}</td>
|
<td class="numeric-cell" data-collapsible-title="测试时长">${battGroupData[value.index].testLong}</td>
|
<td class="numeric-cell" data-collapsible-title="测试容量">${battGroupData[value.index].testCap}</td>
|
<td class="numeric-cell" data-collapsible-title="剩余容量">${battGroupData[value.index].resCap}</td>
|
<td class="numeric-cell" data-collapsible-title="续航时间">${battGroupData[value.index].timeLong}</td>
|
</tr>
|
<tr v-else>
|
<td>
|
数据加载中...
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style>
|
.ios .navbar .navbar-inner .right a + a {
|
margin-left: 0;
|
}
|
</style>
|
<script>
|
return {
|
data:function() {
|
var params = this.$route.params;
|
var cView = app.views.current;
|
var history = cView.router.history;
|
var 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
|
|
});
|
return {
|
params: params,
|
history: history,
|
battMonVolUrl: '/monitor/batt/mon/vol/'+str,
|
devStatus: '',
|
battStatus: ''
|
}
|
},
|
methods: {
|
searchData: function(props) {
|
if(!this.isRun) {
|
return;
|
}
|
var _this = this;
|
// 查询后台数据
|
$.ajax({
|
type: "post",
|
async: true,
|
url: props.url,
|
data: props.data,
|
dataType: "json",
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(typeof props.success == "function") {
|
props.success(rs);
|
}
|
},
|
complete: function() {
|
setTimeout(_this.searchData.bind(_this, props), 5000);
|
}
|
});
|
},
|
searchBattData: function(props) {
|
if(!this.isRun) {
|
return;
|
}
|
var _this = this;
|
// 查询后台数据
|
$.ajax({
|
type: "post",
|
async: true,
|
url: "Batt_rtstateAction_serchByCondition",
|
data: props.data,
|
dataType: "json",
|
success: function(res) {
|
if(typeof props.success == "function") {
|
props.success(res);
|
}
|
},
|
complete: function() {
|
setTimeout(_this.searchBattData.bind(_this, props), 5000);
|
}
|
});
|
},
|
getHouBeiTime: function(value){
|
value = Math.abs(value);
|
var str = "";
|
if(value>0){
|
var hour = parseInt(value);
|
var min = parseInt((parseFloat(value) - hour)*60);
|
if(hour<10){
|
str = "0";
|
}
|
str+=hour+"H";
|
if(min<10){
|
str+="0";
|
}
|
str+=min+"M";
|
}else{
|
str = "00H00M";
|
}
|
return str;
|
},
|
formatSignal(signal) {
|
var rs = {
|
signal: '未知',
|
bitError: '未知',
|
img: 0
|
};
|
var ptn = new RegExp(".*:\\s(\\d{2}),(\\d{2})");
|
var testCsq = ptn.test(signal);
|
if(testCsq) {
|
rs.signal = RegExp.$1;
|
rs.bitError = RegExp.$2;
|
if(rs.signal>25) {
|
rs.img = 1;
|
rs.signal += '（强）';
|
}else if(rs.signal>19) {
|
rs.img = 1;
|
rs.signal += '（中）';
|
}else {
|
rs.signal += '（弱）';
|
}
|
}
|
//console.info(rs);
|
return rs;
|
}
|
},
|
on: {
|
pageAfterOut: function() {
|
this.isRun= false;
|
// 关闭页面中的循环请求
|
this.battStatus.stopTimeout();
|
},
|
pageAfterIn: function() {
|
this.isRun = true;
|
var _this = this;
|
var params = this.params;
|
var devStatus = this.devStatus; // 设备工作状态Vue
|
var battStatus = this.battStatus; // 电池状态Vue
|
// 开启页面中的循环请求
|
battStatus.openTimeout();
|
// 查询设备的状态
|
this.searchData({
|
url: 'Fbs9100_stateAction_action_serchContactorState',
|
data: "json="+JSON.stringify({
|
dev_id: params.fbsid
|
}),
|
success: function(res) {
|
if(res.code == 1) {
|
var data = res.data[0];
|
devStatus.isLink=true;
|
devStatus.signalNum = data.dev_commcount; // 通信计数
|
devStatus.lossNum = (data.dev_commcount==0?0:(data.dev_errcommcount*100/data.dev_commcount)).toFixed(2); // 丢包率
|
devStatus.workStatus= data.dev_workstate; // 设备工作状态
|
}else {
|
devStatus.isLink=false;
|
}
|
}
|
});
|
|
// 查询sd的状态
|
this.searchData({
|
url: 'Bts_station_stateAction_action_serchSDCard',
|
data: "json="+JSON.stringify({
|
FBSDeviceId: params.fbsid
|
}),
|
success: function(res) {
|
//console.log(params);
|
devStatus.sdStatus = res.data;
|
}
|
});
|
},
|
pageInit: function() {
|
var params = this.params;
|
var _this = this;
|
var cView = app.views.current;
|
var history = cView.router.history;
|
// 定义devStatus
|
this.devStatus = new Vue({
|
el: '#devStatus',
|
delimiters: ['${', '}'],
|
data: {
|
sdStatus: '未知', // sd状态
|
signalNum: 0, // 通信计数
|
lossNum: 0, // 通信丢包率
|
groupName: params.groupname,
|
workStatus: '',
|
isLink: true,
|
isRun: true
|
},
|
filters: {
|
workStatusFilter: function(value) {
|
switch (value){
|
case 0:
|
return "在线浮充";
|
break;
|
case 1:
|
return "放电状态";
|
break;
|
case 2:
|
return "充电状态";
|
break;
|
case 3:
|
return "内阻测试";
|
break;
|
case 4:
|
return "未知"
|
break;
|
default:{
|
//未连接
|
return "未连接";
|
}
|
break;
|
}
|
},
|
sdStatusFilter(value) {
|
//console.log(value);
|
var str = value==0?'正常':'故障';
|
return str;
|
}
|
}
|
});
|
// 定义battStatus
|
this.battStatus = new Vue({
|
el:"#battStatus",
|
delimiters: ['${', '}'],
|
data: {
|
battStats: '未知',
|
termVol: '',
|
groupVol: 0.0,
|
onlineVol: 0.0,
|
battCurr: '0.0A',
|
lastUpdateTime: '1982-01-01 00:00:00',
|
testTime: '1982-01-01 00:00:00',
|
testLong: '00:00:00',
|
testCap: '0.0AH',
|
resCap: '0.0AH',
|
timeLong: '------',
|
params: params,
|
battGroup: [],
|
battGroupData: [],
|
battGroupTimeout: []
|
},
|
mounted: function() {
|
var self = this;
|
this.searchBattGroup(function(res) {
|
for(var i=0; i<res.length; i++){
|
var _battGroup = {
|
index: i,
|
href: '#tab-'+i,
|
id: 'tab-'+i,
|
cla1: '',
|
cla2: ''
|
};
|
if(i==0) {
|
_battGroup.cla1 = 'tab-link-active';
|
_battGroup.cla2 = 'tab-active';
|
}
|
self.battGroup.push(_battGroup);
|
self.searchBattData(res[i].BattGroupId, i);
|
}
|
});
|
},
|
methods: {
|
getTermVol: function() { // 获取端电压
|
var str = "";
|
var vol = this.onlineVol;
|
},
|
stopTimeout: function() {
|
// 遍历页面中的计时器
|
for(var i=0; i<this.battGroupTimeout.length; i++) {
|
this.battGroupTimeout[i].stop();
|
}
|
},
|
openTimeout: function() {
|
// 遍历页面中的计时器
|
for(var i=0; i<this.battGroupTimeout.length; i++) {
|
this.battGroupTimeout[i].open();
|
}
|
},
|
setBattGroupData: function(index, data) {
|
this.battGroupData.splice(index, 1, data);
|
},
|
searchBattData: function(id, index) {
|
var self = this;
|
var timeout = new Timeout();
|
self.battGroupTimeout.push(timeout);
|
// 开启延时执行
|
timeout.start(function() {
|
$.ajax({
|
type: 'post',
|
url: 'Batt_rtstateAction_serchByCondition',
|
async: true,
|
data: 'rtstate.battGroupId='+id,
|
dataType: 'json',
|
success: function(res) {
|
var model = res.model;
|
if(model.code==1) {
|
var data = model.data[0];
|
var temp = {};
|
var batt_test_starttime = data.batt_test_starttime;
|
temp.index = index;
|
temp.battStats = data.batt_state; // 电池状态
|
temp.termVol = "在线:"+Number(data.online_vol.toFixed(2))
|
+"V;组端:"+Number(data.group_vol.toFixed(2))+"V"; // 端电压
|
temp.battCurr = data.group_curr.toFixed(1)+"A"; // 测试电流
|
temp.lastUpdateTime = new Date(data.rec_datetime).format("yyyy-MM-dd hh:mm:ss"); // 更新时间
|
temp.testTime = new Date(batt_test_starttime).format("yyyy-MM-dd hh:mm:ss"); // 测试日期
|
temp.testLong = formatSeconds(data.batt_test_tlong); // 测试时长
|
temp.testCap = data.batt_test_cap.toFixed(1)+"AH"; // 测试容量
|
// 剩余容量
|
var resCap = "---";
|
if(data.batt_state!=2){
|
resCap = data.batt_rest_cap.toFixed(1)+"AH";
|
}
|
temp.resCap = resCap;
|
// 续航时间
|
var timeLong = "------";
|
if(data.batt_state == 3){
|
timeLong = _this.getHouBeiTime(parseFloat(data.batt_rest_cap)/parseFloat(data.group_curr)); //续航时间
|
}
|
temp.timeLong = timeLong;
|
//console.log(temp);
|
self.setBattGroupData(index, temp);
|
}
|
},
|
complete: function() {
|
timeout.open();
|
}
|
});
|
}, 5000);
|
|
},
|
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();
|
}
|
});
|
}
|
},
|
filters: {
|
battStatsFilter: function(value) {
|
var battstate=['无','浮充','充电','放电','均充','电导/内阻','电导','温度','连接条','在线监测'];
|
var str="";
|
switch(value){
|
case 1:str = battstate[1];break;
|
case 2:str = battstate[2];break;
|
case 3:str = battstate[3];break;
|
case 4:str = battstate[4];break;
|
case 5:str = battstate[5];break;
|
case 6:str = battstate[6];break;
|
case 7:str = battstate[7];break;
|
case 8:str = battstate[8];break;
|
case 9:str = battstate[9];break;
|
default:str=battstate[0];
|
}
|
return str;
|
}
|
}
|
});
|
|
// 定义头部导航栏更多点击
|
var ac = app.actions.create({
|
buttons:[
|
{
|
text: "电池参数",
|
onClick: function() {
|
var str = getUrlStr({
|
fbsid: params.fbsid,
|
stationid: params.stationid
|
});
|
cView.router.navigate('/monitor/batt/param/'+str);
|
}
|
},
|
{
|
text: "系统参数",
|
onClick: function() {
|
var str = getUrlStr({
|
fbsid: params.fbsid,
|
stationid: params.stationid
|
});
|
cView.router.navigate('/monitor/sys/param/'+str);
|
}
|
},
|
{
|
text: "信号质量",
|
onClick: function() {
|
var param={
|
num: 145,
|
AT_cmd: "CSQ",
|
dev_id: params.fbsid
|
}
|
app.preloader.show();
|
// 查询信号质量
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: "Bts_gprs_stateAction_action_update?t="+(new Date().getTime()),
|
data: 'json='+JSON.stringify(param),
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
var msg = _this.formatSignal(data.ack_inf);
|
app.dialog.alert('信号质量：'+msg.signal);
|
}else {
|
app.dialog.alert('信号质量：未知');
|
}
|
},
|
complete: function() {
|
app.preloader.hide();
|
}
|
});
|
|
|
}
|
},
|
]
|
});
|
|
// 点击ac显示选择内容
|
$$('.control-ac').click(function() {
|
ac.open();
|
});
|
}
|
}
|
}
|
</script>
|
