<template>
|
<div class="page-container" ref="page">
|
<el-row :gutter="16">
|
<el-col :span="4">
|
<box-all
|
title="充放电信息"
|
style="height: 45vh;">
|
<test-list
|
:params="testParams"
|
@select-change="handlerTestList"></test-list>
|
</box-all>
|
</el-col>
|
<el-col :span="10">
|
<div class="col-inner">
|
<box-all
|
title="端电压折线图"
|
style="height: 45vh;"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-text="数据加载中">
|
<div class="graph">
|
<div class="graph-container" ref="groupLine"></div>
|
</div>
|
</box-all>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div class="col-inner">
|
<box-all
|
title="单体信息柱状图"
|
style="height: 45vh;"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-text="数据加载中">
|
<div class="graph cut38">
|
<div class="graph-container" ref="monInfoBar"></div>
|
</div>
|
<div class="slider-container">
|
<el-slider
|
v-model="slider"
|
:format-tooltip="setDataBySlide"></el-slider>
|
</div>
|
</box-all>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<box-all
|
title="设备状态"
|
:style="getDiffStyle"
|
v-loading="rtstate.loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-text="数据加载中">
|
<div class="dev-states">
|
<div class="dev-state-item">
|
电池状态：{{getBattState}}
|
</div>
|
<div class="dev-state-item">
|
端电压：在线 {{rtstate.data.online_vol}}V,组端 {{rtstate.data.group_vol}}V
|
</div>
|
<div class="dev-state-item">
|
电池电流：{{rtstate.data.test_curr}}A
|
</div>
|
<div class="dev-state-item">
|
测试日期：{{rtstate.data.test_starttime}}
|
</div>
|
<div class="dev-state-item">
|
测试时长：{{getTestTimeLong}}
|
</div>
|
<div class="dev-state-item">
|
测试容量：{{rtstate.data.test_cap | fixed(1)}}AH
|
</div>
|
<!-- <div class="dev-state-item">
|
剩余容量：{{rtstate.data.batt_rest_cap}}AH
|
</div>
|
<div class="dev-state-item">
|
续航时长：{{rtstate.data.xuhang}}
|
</div> -->
|
</div>
|
</box-all>
|
</el-col>
|
<el-col :span="10">
|
<div class="col-inner">
|
<box-all
|
title="电池电流折线图"
|
:style="getDiffStyle"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-text="数据加载中">
|
<div class="graph">
|
<div class="graph-container" ref="currLine"></div>
|
</div>
|
</box-all>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<box-all
|
title="单体电压折线图"
|
:style="getDiffStyle"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-text="数据加载中">
|
<div class="graph">
|
<div class="graph-container" ref="monLine"></div>
|
</div>
|
</box-all>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import echarts from 'echarts'
|
import BoxAll from '../components/BoxAll'
|
import TestList from '@/components/TestList'
|
import {
|
formatSeconds,
|
EGraph,
|
} from '@/assets/js/common'
|
|
var groupLine = "";
|
var currLine = "";
|
var monLine = "";
|
var monInfoBar = "";
|
var allData = [];
|
export default {
|
components: {
|
BoxAll,
|
TestList
|
},
|
data() {
|
return {
|
main: {
|
width: 100,
|
height: 100
|
},
|
testParams: {
|
num: '',
|
BattGroupId: '',
|
},
|
rtstate: {
|
loading: false,
|
stop_resean: '无', // 停止原因
|
data: {
|
test_type: 0,
|
online_vol: 0, // 在线电压
|
group_vol: 0, // 组端电压
|
test_curr: 0, // 电池电流
|
test_starttime: '1982-01-01 00:00:00', // 测试日期
|
test_timelong: 0, // 测试时长
|
test_cap: 0, // 测试容量
|
batt_rest_cap: 0, // 剩余容量
|
xuhang: '------', // 续航时间
|
}
|
},
|
loading: false,
|
slider: 100,
|
record_num: 0,
|
testData: { // 所有的测试数据
|
allData: [],
|
everyCount: [],
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
testTime: []
|
},
|
}
|
},
|
watch: {
|
'$store.state.fullName'() {
|
// 初始化页面
|
this.initPage();
|
}
|
},
|
filters: {
|
fixed(val, num) {
|
return Number(val.toFixed(num));
|
}
|
},
|
methods: {
|
getBatt: function() {
|
var batt = this.$store.state.battGroup;
|
if(batt.BattGroupId == undefined) {
|
return -1;
|
}else {
|
return batt;
|
}
|
},
|
initPage() {
|
// 设置测试数据列表
|
this.setTestParams();
|
// 初始化电池状体值
|
this.initRtState();
|
// 初始化testData
|
// this.testData = [];
|
|
},
|
initRtState() {
|
var data = {
|
test_type: 0,
|
online_vol: 0, // 在线电压
|
group_vol: 0, // 组端电压
|
test_curr: 0, // 电池电流
|
test_starttime: '1982-01-01 00:00:00', // 测试日期
|
test_timelong: 0, // 测试时长
|
test_cap: 0, // 测试容量
|
batt_rest_cap: 0, // 剩余容量
|
xuhang: '------', // 续航时间
|
};
|
this.rtstate.data = data;
|
// 初始化图表
|
this.initGraph();
|
},
|
initGraph() {
|
groupLine.clear();
|
monLine.clear();
|
currLine.clear();
|
monInfoBar.clear();
|
allData=[];
|
},
|
setTestParams() {
|
var batt = this.getBatt();
|
if(batt != -1) {
|
this.testParams.num = batt.FBSDeviceId;
|
this.testParams.BattGroupId = batt.BattGroupId;
|
}
|
},
|
handlerTestList(data) {
|
// 设置终止原因
|
this.rtstate.stop_resean = data.stop;
|
// 初始化电池状体值
|
this.initRtState();
|
// 查询历史信息
|
this.searchHistory(data);
|
},
|
searchHistory(data) {
|
var batt = this.getBatt();
|
var searchParams = {
|
BattGroupId: batt.BattGroupId,
|
test_record_count: data.val
|
};
|
// 显示等待框
|
this.loading=true;
|
// 请求后台查询
|
this.$axios({
|
method: 'post',
|
url: 'BatttestdataAction!findhistory',
|
data: 'json='+JSON.stringify(searchParams)
|
}).then((res)=> {
|
var rs = JSON.parse(res.data.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
this.formatAlldata(data);
|
}else {
|
this.formatAlldata([]);
|
}
|
// 关闭等待框
|
this.loading=false;
|
}).catch(()=>{
|
// 关闭等待框
|
this.loading=false;
|
});
|
},
|
formatAlldata(data) {
|
allData = data;
|
var monNums = this.getMonNums(); // 获取单体编号
|
var groupVol = []; // 组端电压
|
var onlineVol = []; // 组端电流
|
var testCurr = []; // 测试电流
|
var testTime = []; // 测试时间
|
var everyCount = []; // 每次测试的状态数据
|
var batt_test_data = []; // 电池单体测试数据
|
var batt_test_voldata = []; // 电池单体电压折线图
|
var batt_test_tmpdata = []; // 电池单体温度折线图
|
var test_record_num = -1;
|
var start_record_num = -1;
|
var batt_index = -1;
|
|
// data长度不为0
|
if(data.length != 0) {
|
start_record_num = data[0].record_num;
|
}
|
for(var k=0;k<monNums.length;k++){
|
batt_test_voldata[k] = new Array();
|
batt_test_tmpdata[k] = new Array();
|
}
|
// 遍历数据并进行处理
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
if(_data.record_num != test_record_num){
|
test_record_num = _data.record_num; // 设置记录的num
|
groupVol.push(_data.group_vol.toFixed(2)); //组端电压
|
onlineVol.push(_data.online_vol.toFixed(2)); //在线电压
|
testCurr.push(_data.test_curr.toFixed(1)); //组端电流
|
testTime.push(formatSeconds(_data.test_timelong)); // 测试时间
|
everyCount.push(_data); // 每次记录的状态数据
|
// 设置电池单体数据容器
|
batt_test_data[++batt_index] = new Array();
|
if(test_record_num > start_record_num){
|
batt_test_data[batt_index]=batt_test_data[batt_index-1].slice(0);
|
this.setArrayvalue(batt_test_voldata,batt_index);
|
this.setArrayvalue(batt_test_tmpdata,batt_index);
|
}
|
}
|
// 设置单体数据
|
batt_test_data[batt_index][_data.mon_num-1] = _data.mon_vol;
|
batt_test_voldata[_data.mon_num-1][batt_index] = _data.mon_vol;
|
batt_test_tmpdata[_data.mon_num-1][batt_index] = _data.mon_tmp.toFixed(1);
|
}
|
//console.log(everyCount);
|
// 设置状态数据
|
this.testData.everyCount = everyCount;
|
// 设置值
|
this.slider = 100;
|
// 设置组端电压折线图
|
this.setGroupLine(groupVol, onlineVol, testTime);
|
// 设置测试电流折线图
|
this.setCurrLine(testCurr, testTime);
|
// 设置单体折线图
|
this.setMonLine(batt_test_voldata, testTime);
|
},
|
setArrayvalue(list, index) {
|
if(list!=undefined && index > 0){
|
for(var i=0;i<list.length;i++){
|
list[i][index] = list[i][index-1];
|
}
|
}
|
},
|
getMonNums() {
|
var batt = this.getBatt();
|
var monCount = batt.MonCount;
|
var rs = [];
|
for(var i=0; i<monCount; i++) {
|
rs.push('#'+(i+1));
|
}
|
return rs;
|
},
|
setGroupLine(groupVol, onlineVol, testTime) {
|
groupLine.changeData({
|
x: testTime,
|
y: [
|
{
|
name: '组端电压',
|
data: groupVol,
|
},
|
{
|
name: '在线电压',
|
data: onlineVol
|
}
|
]
|
});
|
},
|
setCurrLine(testCurr, testTime) {
|
currLine.changeData({
|
x: testTime,
|
y: [
|
{
|
name: '组端电压',
|
data: testCurr,
|
}
|
]
|
});
|
},
|
setMonLine(monData, testTime) {
|
monLine.changeData({
|
x: testTime,
|
y: function(data) {
|
var rs = [];
|
for(var i=0; i<data.length; i++) {
|
var tmp = {
|
name: '#'+(i+1),
|
data: data[i]
|
};
|
rs.push(tmp);
|
}
|
return rs;
|
}(monData)
|
});
|
},
|
setDataBySlide(val) {
|
if(val == null) {
|
return val;
|
}
|
var index = this.getIndex();
|
var rs = "00:00:00";
|
if(index != -1) {
|
var testCount = this.getTestCount(index);
|
// 设置滑块显示的数字
|
rs = formatSeconds(testCount.test_timelong);
|
// 设置rtstate的值
|
this.setRtState(testCount);
|
this.record_num = testCount.record_num;
|
this.setMonInfo();
|
}
|
return rs;
|
},
|
getIndex: function() { // 获取笔数下标
|
var val = this.slider;
|
var everyCount = this.testData.everyCount;
|
if(everyCount.length != 0) {
|
return Math.floor((everyCount.length-1)*val/100);
|
}else {
|
return -1;
|
}
|
},
|
getTestCount(index) { // 获取显示的笔数
|
return this.testData.everyCount[index];
|
},
|
setRtState(data) { // 设置rtstate的值
|
this.rtstate.data = data;
|
},
|
getStopCause(c_type, s_cause) {
|
var rs = "";
|
rs = c_type+"(终止原因:"+s_cause+")";
|
return rs;
|
},
|
setMonInfo() { // 设置单体信息
|
var monInfo = this.getMonInfo(this.record_num);
|
// 根据数据生成单体编号
|
var monNums = [];
|
for(var i=0; i<monInfo.length; i++) {
|
monNums.push('#'+(i+1));
|
}
|
monInfoBar.changeData({
|
x: monNums,
|
y: [
|
{
|
name: '单体电压',
|
data: monInfo
|
}
|
]
|
});
|
},
|
getMonInfo(record_num) {
|
var rs = [];
|
// 遍历allData
|
for(var i=0; i<allData.length; i++) {
|
var data = allData[i];
|
if(data.record_num==record_num) {
|
rs.push(data.mon_vol);
|
}else if(data.record_num>record_num){
|
break;
|
}
|
}
|
// 返回结果
|
return rs;
|
}
|
},
|
computed: {
|
getBattState() {
|
var rtstate = this.rtstate.data;
|
return rtstate.test_type==3?this.getStopCause('放电', this.rtstate.stop_resean):rtstate.test_type==2?"充电":"未知";
|
},
|
getDiffStyle() {
|
return {
|
height: 'calc(55vh - 5.4rem)',
|
'margin-top': '0.8rem'
|
};
|
},
|
getTestTimeLong() { // 获取测试时长
|
return formatSeconds(this.rtstate.data.test_timelong);
|
},
|
},
|
mounted() {
|
// 设置导航栏
|
this.$store.dispatch('changeNavActive', 1);
|
// 端电压折线图
|
groupLine = new EGraph(this.$refs.groupLine, {
|
type: 'line',
|
init: {
|
yAxis: {
|
name: 'V'
|
}
|
}
|
});
|
groupLine.chart.group = 'group1';
|
// 电池电流
|
currLine = new EGraph(this.$refs.currLine, {
|
type: 'line',
|
init: {
|
yAxis: {
|
name: 'A'
|
}
|
}
|
});
|
currLine.chart.group = 'group1';
|
// 单体电压折线图
|
monLine = new EGraph(this.$refs.monLine, {
|
type: 'line',
|
init: {
|
yAxis: {
|
name: 'V'
|
}
|
}
|
});
|
monLine.chart.group = 'group1';
|
// 关联图表
|
echarts.connect('group1');
|
// 单体信息图表
|
monInfoBar = new EGraph(this.$refs.monInfoBar, {
|
init: {
|
yAxis: {
|
name: 'V'
|
}
|
}
|
});
|
// 初始化页面
|
this.initPage();
|
|
// window大小发生变化时echarts重置大小
|
window.onresize = function() {
|
groupLine.resize();
|
currLine.resize();
|
monLine.resize();
|
monInfoBar.resize();
|
}
|
},
|
destroyed() {
|
// 销毁echrts对象
|
groupLine.dispose();
|
currLine.dispose();
|
monLine.dispose();
|
monInfoBar.dispose();
|
// 解除window.onresize
|
window.onresize = null;
|
}
|
}
|
</script>
|
|
<style scoped>
|
.dev-states {
|
padding: 0.6rem;
|
}
|
.dev-state-item {
|
line-height: 1.4rem;
|
}
|
.slider-container {
|
padding-left: 0.8rem;
|
padding-right: 0.8rem;
|
}
|
.graph,
|
.graph-container {
|
height: 100%;
|
}
|
.graph.cut38 {
|
height: calc(100% - 38px);
|
}
|
</style>
|
