<template>
|
<div class="view-root">
|
<div class="view-root-inner">
|
<div class="view-layout">
|
<div class="view-layout-left">
|
<science-card width="100%" height="100%">
|
<home-tree @on-select-change="handlerSelectChange"></home-tree>
|
</science-card>
|
</div>
|
<div class="view-layout-middle">
|
<h-collapse
|
:data="records"
|
@on-select-change="recordSelect"
|
v-show="states.fbs"></h-collapse>
|
<square-box
|
title="放电数据"
|
full
|
v-show="states.ld9">
|
</square-box>
|
<square-box style="margin-top: 8px;" minHeight="220px" title="机房基础信息">
|
<table style="color: #468FB6;">
|
<tr>
|
<td>电池状态：</td>
|
<td>{{testInfo.eleState}}</td>
|
</tr>
|
<tr>
|
<td>组端电压：</td>
|
<td>
|
在线:{{testInfo.onlineVol}}V;
|
组端:{{testInfo.groupVol}}V
|
</td>
|
</tr>
|
<tr>
|
<td>电池电流：</td>
|
<td>{{testInfo.curr}}A</td>
|
</tr>
|
<tr>
|
<td>测试日期：</td>
|
<td>{{testInfo.testTime}}</td>
|
</tr>
|
<tr>
|
<td>测试时长：</td>
|
<td>{{testInfo.testTimeLong}}</td>
|
</tr>
|
<tr>
|
<td>测试容量：</td>
|
<td>{{testInfo.cap}}AH</td>
|
</tr>
|
<tr>
|
<td>剩余容量：</td>
|
<td>{{testInfo.resCap}}</td>
|
</tr>
|
<tr>
|
<td>续航时间：</td>
|
<td>{{testInfo.xuhang}}</td>
|
</tr>
|
</table>
|
</square-box>
|
</div>
|
<div class="view-layout-right">
|
<science-card width="100%" height="100%">
|
<Spin size="large" fix v-if="spinShow">
|
<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
|
<div>加载中...</div>
|
</Spin>
|
<!-- <content-title title="历史数据"></content-title> -->
|
<square-box title="历史数据图谱" icon="ios-podium">
|
<Tabs value="monBar" class="ivu-tabs-yellow" name="controlTabs" @on-click="handlerTabClick">
|
<TabPane label="单体信息" name="monBar" tab="controlTabs">
|
<div class="tab-pane-inner">
|
<div class="chart-tool">
|
<div class="chart-tool-inner">
|
<Select v-model="chartTools.barType" style="width:120px" @on-change="barTypeChange">
|
<Option value="monvol">单体电压</Option>
|
<Option value="montmp">单体温度</Option>
|
</Select>
|
</div>
|
</div>
|
<bar-chart
|
height="400px"
|
ref="monBar"
|
:show-value=true
|
:range="{'min': 0,'max': 1}"></bar-chart>
|
</div>
|
</TabPane>
|
<TabPane label="数据统计" name="groupVolLine" tab="controlTabs"></TabPane>
|
</Tabs>
|
</square-box>
|
<!-- 滚动条 -->
|
<div class="slider-container">
|
<div class="slider-container-inner"></div>
|
<Slider
|
v-model="slider"
|
:tip-format="formatSlider"
|
@on-input="handlerSliderChange"></Slider>
|
</div>
|
</science-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import ScienceCard from '../../components/ScienceCard'
|
import HomeTree from "../../components/HomeTree"
|
import SquareBox from "../../components/SquareBox"
|
import HomeStateList from "../../components/HomeStateList"
|
import HCollapse from "../../components/HCollapse"
|
import BarChart from "../../components/BarChart"
|
import ContentTitle from "../../components/ContentTitle"
|
import {ajax, getMaxFromArr, getMinFromArr, getAvgFromArr, formatSeconds} from "../../libs/common"
|
export default {
|
components: {
|
ScienceCard,
|
HomeTree,
|
SquareBox,
|
HomeStateList,
|
HCollapse,
|
BarChart,
|
ContentTitle,
|
},
|
data() {
|
return {
|
spinShow: false,
|
slider: 100,
|
batt: '',
|
states: {
|
fbs: true,
|
ld9: false,
|
},
|
testList:{
|
active: 1,
|
data:[]
|
},
|
records: [
|
{
|
name: '核容放电',
|
items: []
|
},
|
{
|
name: '监测放电',
|
items: []
|
},
|
{
|
name: '核容充电',
|
items: []
|
},
|
{
|
name: '监测充电',
|
items: []
|
}
|
],
|
monList: [], // 单体编号
|
hisData: {
|
batt_test_every_record: [], //记录当前测试记录的每笔的组端测试值
|
hisBar: {}
|
},
|
chartTools: {
|
barType: 'monvol',
|
},
|
testInfo: {
|
eleState: '未知', // 电池状态
|
groupVol: 0, // 组端电压
|
onlineVol: 0, // 在线电压
|
curr: 0, // 电池电流
|
testTime: '---', // 测试时间
|
testTimeLong: '---', // 测试时长
|
cap: 0, // 测试容量
|
resCap: 0, // 剩余容量
|
xuhang: '---', // 续航时间
|
}
|
}
|
},
|
methods: {
|
initTestInfo: function() {
|
var testInfo = {
|
eleState: '未知', // 电池状态
|
groupVol: 0, // 组端电压
|
onlineVol: 0, // 在线电压
|
curr: 0, // 电池电流
|
testTime: '---', // 测试时间
|
testTimeLong: '---', // 测试时长
|
cap: 0, // 测试容量
|
resCap: 0, // 剩余容量
|
xuhang: '---', // 续航时间
|
};
|
this.testInfo = testInfo;
|
},
|
formatSlider: function(value) {
|
var batt_test_every_record = this.hisData.batt_test_every_record;
|
var result = '00:00:00';
|
if(batt_test_every_record.length != 0) {
|
var slide_index = Math.floor((batt_test_every_record.length-1)*value/100);
|
var record = batt_test_every_record[slide_index];
|
this.testInfo.groupVol = record.group_vol; // 组端电压
|
this.testInfo.onlineVol = record.online_vol; // 在线电压
|
this.testInfo.curr = record.test_curr; // 测试电流
|
this.testInfo.cap = Number(record.test_cap.toFixed(1)); // 测试容量
|
result = formatSeconds(record.test_timelong); // 测试时长
|
this.testInfo.testTimeLong = result;
|
}
|
return result;
|
},
|
handlerSliderChange: function() {
|
this.setOptions();
|
},
|
handlerSelectChange: function(item) {
|
if(item && item.type == 'group') {
|
this.batt = item;
|
var isSpecail = this.regFbsId(item.FBSDeviceId);
|
this.setMonList(item.MonCount); // 设置电池编号
|
if(isSpecail) {
|
this.states.fbs = false;
|
this.states.ld9 = true;
|
this.searchLd9Records(item);
|
}else {
|
this.states.ld9 = false;
|
this.states.fbs = true;
|
this.initHis(true); // 初始化数据
|
this.searchRecords(item); // 查询电池的充电电记录
|
}
|
}
|
},
|
setMonList: function(monCount) { // 设置单体列表
|
this.monList = [];
|
for(var i=0; i<monCount; i++) {
|
var num = i+1;
|
this.monList.push('#'+num);
|
}
|
},
|
initRecords: function() {
|
var records = this.records;
|
for(var i=0; i<records.length; i++) {
|
var record = records[i];
|
record.item = [];
|
}
|
},
|
setRecords: function(nuclearDis, controlDis, nuclearCharge, controlCharge) {
|
// console.log(controlDis);
|
this.initRecords();
|
var records = this.records;
|
this.formaterRecords(records[0].name, nuclearDis);
|
this.formaterRecords(records[1].name, controlDis);
|
this.formaterRecords(records[2].name, nuclearCharge);
|
this.formaterRecords(records[3].name, controlCharge);
|
// console.log(nuclearDis);
|
records[0].items = nuclearDis;
|
records[1].items = controlDis;
|
records[2].items = nuclearCharge;
|
records[3].items = controlCharge;
|
},
|
formaterRecords: function(title, data) {
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
_data.txt = (i+1)+'.'+title+'-'+_data.test_starttime;
|
}
|
},
|
searchRecords: function(batt) { // 查询充电放电记录
|
var self = this;
|
var searchParams = {
|
num: batt.FBSDeviceId,
|
BattGroupId: batt.BattGroupId
|
};
|
// console.log(searchParams);
|
// 查询后台
|
ajax({
|
url: 'Batttestdata_infAction_searchBattTestInfDataById',
|
data: 'json='+JSON.stringify(searchParams),
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
self.initRecords(); // 初始化充放电记录
|
var nuclearDis = []; // 核容放电
|
var controlDis = []; // 监测放电
|
var nuclearCharge = []; // 核容充电
|
var controlCharge = []; // 监测充电
|
if(rs.code == 1) {
|
var data = rs.data;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
if(_data.test_type == 3) {
|
if(_data.test_starttype == 3) {
|
nuclearDis.push(_data);
|
}else {
|
controlDis.push(_data);
|
}
|
}else if(_data.test_type == 2) {
|
if(_data.test_starttype == 3) {
|
nuclearCharge.push(_data);
|
}else {
|
controlCharge.push(_data);
|
}
|
}
|
}
|
}
|
self.setRecords(nuclearDis, controlDis, nuclearCharge, controlCharge);
|
}
|
});
|
},
|
searchLd9Records: function(batt) {
|
var searchParams = {
|
BattGroupId: batt.BattGroupId,
|
};
|
// 查询后台
|
ajax({
|
url: 'Ld9testdata_infAction_ld9action_serchByCondition',
|
data: 'json='+JSON.stringify(searchParams),
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
// console.log(data);
|
}
|
}
|
});
|
},
|
recordSelect: function(record) {
|
var self = this;
|
if(record) {
|
// 设置电池的状态
|
// console.log(record);
|
// console.log(this.batt);
|
this.setEleState(record);
|
this.testInfo.testTime = record.test_starttime;
|
// 构造查询条件
|
var searchParams = {
|
BattGroupId: record.BattGroupId,
|
test_record_count: record.test_record_count,
|
};
|
// 查询后台
|
this.spinShow = true;
|
ajax({
|
url: 'BatttestdataAction!findhistory',
|
data: 'json='+JSON.stringify(searchParams),
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var data = [];
|
if(rs.code == 1) {
|
data =rs.data;
|
}
|
self.formateHis(data);
|
},
|
complete: function() {
|
self.spinShow = false;
|
}
|
});
|
}
|
},
|
initHis: function(update) { // 初始化历史数据内容
|
// 历史数据
|
var hisBar= {
|
vol:[],
|
tmp:[],
|
cap:[],
|
};
|
this.hisData.hisBar = hisBar; // 初始化柱状图
|
this.hisData.batt_test_every_record = []; // 初始化记录的组端信息
|
this.slider = 100; // 初始化滑块
|
// this.initTestInfo(); // 初始化测试信息
|
// 更新柱状图
|
if(typeof(update) != 'undefined') {
|
this.setOptions();
|
}
|
},
|
formateHis: function(data) {
|
this.initHis();
|
// console.log(data);
|
// 历史数据
|
var hisBar= {
|
vol:[],
|
tmp:[],
|
cap:[],
|
};
|
this.hisData.batt_test_every_record = [];
|
var num = -1;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var start = data[0].record_num;
|
if(_data.mon_num == start) {
|
num++;
|
hisBar.vol.push([]);
|
hisBar.tmp.push([]);
|
this.hisData.batt_test_every_record.push(_data);
|
}
|
hisBar.vol[num].push(_data.mon_vol);
|
hisBar.tmp[num].push(_data.mon_tmp);
|
}
|
this.hisData.hisBar = hisBar;
|
|
// 更新柱状图
|
this.setOptions();
|
},
|
setOptions: function() {
|
var barInfo = this.getBarInfo();
|
var sdata = barInfo.sdata;
|
var unit = barInfo.unit;
|
var fixed = barInfo.fixed;
|
var monList = this.monList;
|
var max = getMaxFromArr(sdata);
|
var min = getMinFromArr(sdata);
|
var avg = Number(getAvgFromArr(sdata).toFixed(fixed));
|
var subtext = '最大值：'+max+unit+';最小值：'+min+unit+";平均值："+avg+unit;
|
//console.log(sdata);
|
var barOption = {
|
title: {
|
subtext: subtext,
|
x: 'center',
|
},
|
xAxis: {
|
type: 'category',
|
data: monList,
|
},
|
yAxis: {
|
type: 'value',
|
name: '单位('+unit+')',
|
min: 0,
|
max: 10
|
},
|
series: [{
|
name: '电压',
|
type: 'bar',
|
data: sdata
|
}],
|
};
|
|
this.updateGraph(barOption);
|
},
|
getBarInfo: function() {
|
var result = {};
|
var hisBar = this.hisData.hisBar;
|
var barType = this.chartTools.barType;
|
var batt_test_every_record = this.hisData.batt_test_every_record;
|
var slider = this.slider;
|
var slide_index = Math.floor((batt_test_every_record.length-1)*slider/100);
|
// 数据类型，单位，保留位数
|
var sdatas, unit, fixed;
|
// 根据类型获取值
|
switch(barType) {
|
case 'monvol':
|
unit = 'V';
|
fixed = 3;
|
sdatas = hisBar.vol;
|
break;
|
case 'montmp':
|
unit = '℃';
|
fixed = 1;
|
sdatas = hisBar.tmp;
|
break;
|
default:
|
unit = '';
|
fixed = 0;
|
sdatas = [];
|
break;
|
}
|
result.unit = unit;
|
result.fixed = unit;
|
// 根据滑块的位置计算出要显示的数据
|
if(sdatas.length != 0) {
|
result.sdata = sdatas[slide_index];
|
}else {
|
result.sdata = [];
|
}
|
|
return result;
|
},
|
updateGraph: function(barOption) {
|
// 更新柱状图
|
this.$refs.monBar.setOption(barOption);
|
},
|
regFbsId: function(id) {
|
var rs = true;
|
var pattern = /^40190/;
|
rs = pattern.test(id);
|
return rs;
|
},
|
barTypeChange: function(value) {
|
this.setOptions();
|
},
|
handlerTabClick: function() {
|
|
},
|
setEleState: function(record) {
|
var eleState = record.test_type==3?'放电(终止原因：'+record.test_stoptype_reason+')':record.test_type==2?'充电':"else";
|
this.testInfo.eleState = eleState;
|
}
|
},
|
mounted() {
|
this.$refs.monBar.setOption({});
|
},
|
}
|
</script>
|
<style scoped>
|
.view-layout {
|
height: 100%;
|
}
|
.view-layout-left {
|
float: left;
|
width: 340px;
|
height: 100%;
|
overflow-y: auto;
|
}
|
.view-layout-middle {
|
float: left;
|
width: 300px;
|
margin-left: 8px;
|
margin-right: 8px;
|
height: 100%;
|
overflow-y: auto;
|
}
|
.view-layout-right {
|
height: 100%;
|
overflow-y: auto;
|
}
|
.tab-pane-inner {
|
position: relative;
|
}
|
.chart-tool {
|
position: absolute;
|
top: 0;
|
right: 0;
|
z-index: 1;
|
}
|
.slider-container {
|
position: absolute;
|
left: 15px;
|
right: 40px;
|
bottom: 8px;
|
z-index: 1;
|
}
|
</style>
|
