<template>
|
<div data-name="mainData" class="page">
|
<div class="navbar">
|
<div class="navbar-inner">
|
<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="#data-tbl">数据表格</a>
|
<a class="button tab-link" href="#data-graph">数据饼图</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content data-page-content">
|
<div class="tabs">
|
<div class="tab tab-active tab-full-120" id="data-tbl">
|
<div class="data-table card">
|
<table>
|
<thead>
|
<tr>
|
<th>数据类型</th>
|
<th>个数统计</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>停电机房数</td>
|
<td><a href="#" class="link" id="dataPowerCut">0</a></td>
|
</tr>
|
<tr>
|
<td>续航不足机房数</td>
|
<td><a href="#" class="link" id="dataWeakHome">0</a></td>
|
</tr>
|
<tr>
|
<td>电池告警数</td>
|
<td><a href="#" class="link red" id="dataEleWarnNum">0</a></td>
|
</tr>
|
<tr>
|
<td>容量落后单体数</td>
|
<td><a href="#" class="link" id="dataBehindNum">0</a></td>
|
</tr>
|
<tr>
|
<td>设备告警数</td>
|
<td><a href="#" class="link red" id="dataEquipWarnNum">0</a></td>
|
</tr>
|
<tr>
|
<td>核容测试设备数</td>
|
<td><a href="#" class="link" id="dataNuclearNum">0</a></td>
|
</tr>
|
<tr>
|
<td colspan="2" class="red">
|
电池总数：<a href="#" class="link red" id="dataBattSum">0</a>，
|
机房总数：<a href="#" class="link red" id="dataHomeSum">0</a>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div class="tab" id="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="dataPowerCutGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="graph-container" id="dataTimeLongGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="graph-container" id="dataBattStatusGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="graph-container" id="dataBattWarnGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="graph-container" id="dataBattHeathGraph">
|
<div class="graph"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style>
|
.tabs-full-screen{
|
height: 100%;
|
}
|
.tabs-full-screen .tab-full {
|
height: 100%;
|
overflow-y: auto;
|
}
|
.graph-container {
|
height: 100%;
|
background-color: #FFFFFF;
|
}
|
/* 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>
|
<script>
|
return {
|
afterout: function() {
|
console.log("out");
|
},
|
methods: {
|
setText:function(params) {
|
var _this = this;
|
if(!this.isRun || !appLinkStats) {
|
setTimeout(_this.setText.bind(_this, params), 100);
|
return;
|
}
|
|
// 请求后台
|
$.ajax({
|
method: "post",
|
async: true,
|
url: params.url,
|
data: params.data,
|
dataType: "json",
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
params.success(rs);
|
},
|
complete: function() {
|
setTimeout(_this.setText.bind(_this, params), 5000);
|
}
|
});
|
},
|
setGraph: function(params) {
|
var _this = this;
|
if(!this.isRun || !appLinkStats) {
|
setTimeout(_this.setGraph.bind(_this, params), 100);
|
return;
|
}
|
|
// 请求后台
|
$.ajax({
|
method: "post",
|
async: true,
|
url: params.url,
|
data: params.data,
|
dataType: "json",
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
params.success(rs);
|
},
|
complete: function() {
|
setTimeout(_this.setGraph.bind(_this, params), 5000);
|
}
|
});
|
},
|
getBattState: function(state) {
|
var res = false;
|
// 遍历battStates
|
for(var i=0; i<this.battStates.length; i++) {
|
var battState = this.battStates[i];
|
if(battState.state == state) {
|
res=battState;
|
}
|
}
|
return res;
|
}
|
},
|
data:function() {
|
return {
|
isRun: false, // 标记是否执行计时器的的后台请求， 默认关闭
|
battStates:[ // 电池状态
|
{state:1,value:"浮充",color:'#31CB36'}, // 浮充
|
{state:2,value:"充电",color:'#D1D105'}, // 充电
|
{state:3,value:"放电",color:'#FF0000'}, // 放电
|
{state:4,value:"均充",color:'#800080'}, // 均充
|
]
|
}
|
},
|
on:{
|
pageInit:function(e, page) {
|
var _this = this;
|
|
// 设置机房停电数
|
this.setText({
|
url: "Bts_station_stateAction_action_serchByState",
|
data: null,
|
success: function(res) {
|
$("#dataPowerCut").text(res.newsum);
|
}
|
});
|
|
// 设置续航不足机房数
|
this.setText({
|
url: "Batt_enduranceAction!serchxuhangNotInThree",
|
data: null,
|
success: function(res) {
|
$("#dataWeakHome").text(res.sum);
|
}
|
});
|
|
// 设置电池告警数
|
this.setText({
|
url: "Battalarm_dataAction!serchRealTime",
|
data: null,
|
success: function(res) {
|
$("#dataEleWarnNum").text(res.sum);
|
}
|
});
|
|
// 设置容量落后个数
|
this.setText({
|
url: "BadBatt_monAction!searchNums",
|
data: null,
|
success: function(res) {
|
$("#dataBehindNum").text(res.sum);
|
}
|
});
|
|
// 设置设备告警数
|
this.setText({
|
url: "Batt_devalarm_dataAction!searchNums",
|
data: null,
|
success: function(res) {
|
$("#dataEquipWarnNum").text(res.sum);
|
}
|
});
|
|
// 设置核容测试设备
|
this.setText({
|
url: "Fbs9100_stateAction_action_seachNuclear_cap",
|
data: null,
|
success: function(res) {
|
var sum = 0;
|
if(res.code == 1) {
|
var data = res.data;
|
sum = data.length;
|
}
|
$("#dataNuclearNum").text(sum);
|
}
|
});
|
|
// 设置电池总数
|
this.setText({
|
url: "BattInfAction!serchByInstall_count",
|
data: null,
|
success: function(res) {
|
$("#dataBattSum").text(res.sum);
|
}
|
});
|
|
// 设置机房总数
|
this.setText({
|
url: "BattInfAction!serchByDeviceId",
|
data: null,
|
success: function(res) {
|
$("#dataHomeSum").text(res.sum);
|
}
|
});
|
|
// 定义滑动轮播组件
|
var swiper = app.swiper.create('.swiper-container', {
|
speed: 400,
|
spaceBetween: 5,
|
direction: 'vertical',
|
setWrapperSize: true,
|
autoHeight: true,
|
pagination: {
|
el: '.swiper-pagination',
|
}
|
});
|
|
|
// 定义机房停电饼状图
|
var powerCut = new PieEcharts('dataPowerCutGraph');
|
|
// 定义机房续航饼状图
|
var timeLong = new PieEcharts('dataTimeLongGraph');
|
|
// 定义电池状态饼状图
|
var battStatus = new PieEcharts('dataBattStatusGraph');
|
|
// 定义电池告警率
|
var alarmRate = new PieEcharts('dataBattWarnGraph');
|
|
// 单体容量健康率
|
battHeath = new PieEcharts('dataBattHeathGraph');
|
|
// 设置重置大小的graph
|
function resizeGraph() {
|
var pageHt = $('.data-page-content').height();
|
$('.graph-group').height(pageHt-1);
|
swiper.update();
|
setTimeout(function() {
|
powerCut.resize();
|
timeLong.resize();
|
battStatus.resize();
|
alarmRate.resize();
|
battHeath.resize();
|
}, 100);
|
|
}
|
|
// 停电机房饼状图
|
this.setGraph({
|
url: "Bts_station_stateAction_action_serchPowerOff",
|
data: null,
|
success: function(res) {
|
var seriesData = [];
|
// 机房停电
|
if(res.sum) {
|
seriesData.push({value: res.sum,name: '机房停电'});
|
}
|
// 机房未停电
|
if((res.sum>=0) && (res.newsum>=0) && (res.newsum>=res.sum)) {
|
seriesData.push({value: res.newsum-res.sum,name: '机房未停电'});
|
}else {
|
seriesData.push({value: res.sum,name: '机房未停电'});
|
}
|
// 机房掉站
|
if(res.code) {
|
seriesData.push({value:res.code,name: '机房掉站'});
|
}
|
// 更新
|
powerCut.setOption({
|
title: '机房停电',
|
x: 'left',
|
color: ['#c23531', '#31CB36', '#61a0a8'],
|
legendData: ['机房停电', '机房未停电','机房掉站'],
|
name: "机房状态",
|
seriesData: seriesData,
|
});
|
}
|
});
|
|
// 定义机房续航饼状图
|
this.setGraph({
|
url: "Batt_enduranceAction!serchByState_xuhang",
|
data: null,
|
success: function(res) {
|
if(res.code == 1) {
|
var data = res.data;
|
var seriesData = [
|
{name:"续航不足1小时",value: data[0]},
|
{name:"续航1~2小时",value: data[1]},
|
{name:"续航2~3小时",value: data[2]},
|
{name:"续航3小时以上",value: data[3]}
|
];
|
// 更新机房续航能力饼状图
|
timeLong.setOption({
|
title: '机房续航能力',
|
x: 'left',
|
color:['#FF0000', '#D1D105', '#31CB36', '#619FA7'],
|
legendData: ['续航不足1小时', '续航1~2小时','续航2~3小时','续航3小时以上'],
|
name: "机房状态",
|
seriesData: seriesData
|
});
|
}
|
|
}
|
});
|
|
// 定义电池状态饼状图
|
this.setGraph({
|
url: "Batt_rtstateAction!serchBattStateRate",
|
data: null,
|
success: function(res) {
|
if(res.code == 1) {
|
var data = res.data;
|
//console.log(data);
|
var seriesData = [];
|
var color = [];
|
for(var i=0; i<data.length;i++) {
|
var _data = data[i];
|
var battState = _this.getBattState(_data.batt_state);
|
if(battState) {
|
color.push(battState.color);
|
seriesData.push({name: battState.value, value: _data.num});
|
}
|
}
|
|
battStatus.setOption({
|
title: '电池状态',
|
x: 'left',
|
color: color,
|
name: "电池状态",
|
seriesData: seriesData,
|
});
|
}
|
|
}
|
});
|
|
|
// 定义电池告警率
|
this.setGraph({
|
url: "Battalarm_dataAction!serchAlm",
|
data: "bmd.binf.StationName="+"",
|
success: function(res) {
|
var seriesData = [];
|
var color = [];
|
if(res.code == 1) {
|
var data = res.data;
|
var total = parseInt(data.MonNum) + parseInt(data.alm_id) + parseInt(data.alm_signal_id) + parseInt(data.alm_level)+parseInt(data.alm_value)+parseInt(data.BattGroupId);
|
if(total == 0) {
|
color.push('#0CD312');
|
seriesData.push({name:"暂无告警",value:0});
|
}else {
|
color = ["#D1D105"];
|
seriesData.push(
|
{name: "容量更换告警", value: parseInt(data.alm_value) + parseInt(data.BattGroupId)},
|
{name: "在线电压", value: parseInt(data.Record_Id)},
|
{name: "组端电压", value: parseInt(data.MonNum)},
|
{name: "充电电流", value: parseInt(data.alm_id)},
|
{name: "放电电流", value: parseInt(data.alm_signal_id)},
|
{name: "单体电压", value: parseInt(data.alm_level)}
|
);
|
}
|
}else {
|
seriesData.push({name:"暂无告警", value: 0});
|
}
|
|
// 生成电池告警率的饼状图
|
alarmRate.setOption({
|
title: '电池告警率',
|
x: 'left',
|
color: color,
|
name: "电池状态",
|
seriesData: seriesData,
|
});
|
}
|
});
|
|
// 定义单体容量健康率
|
this.setGraph({
|
url: "Battalarm_dataAction!serchGood",
|
data: null,
|
success: function(res) {
|
var seriesData = [];
|
var color = ['#31CB36', '#D1D105', '#FF0000'];
|
if(res.code == 1) {
|
seriesData.push(
|
{name:"单体容量健康",value: res.sum-res.data[0]-res.data[1]},
|
{name:"单体容量告警",value: res.data[0]},
|
{name:"单体容量更换",value: res.data[1]}
|
);
|
}else {
|
seriesData.push(
|
{name:"单体容量健康",value: 0},
|
{name:"单体容量告警",value: 0},
|
{name:"单体容量更换",value: 0}
|
);
|
}
|
|
// 生成电池告警率的饼状图
|
battHeath.setOption({
|
title: '单体容量健康率',
|
x: 'left',
|
color: color,
|
name: "电池状态",
|
seriesData: seriesData,
|
});
|
}
|
});
|
|
// 点击头部标签进行重置graph大小
|
$(".mainData-tab").on("click", ".tab-link", resizeGraph);
|
|
// 定义计时器查看当前page所在的view是否显示
|
var interval = setInterval(function(){
|
_this.isRun = viewCheckStatus("#view-data");
|
}, 100);
|
},
|
pageAfterIn: function() {
|
this.isRun = true; // 进入页面开启请求后台的计时器
|
},
|
pageAfterOut: function() {
|
console.log("out")
|
this.isRun = false; // 离开页面关闭请求后台的计时器
|
}
|
}
|
}
|
</script>
|
|
