<template>
|
<div class="history-realtime-data">
|
<flex-layout>
|
<div class="ele-filter-container" slot="header">
|
<div class="ele-filter-radio-group">
|
<el-radio-group
|
v-model="filter.timeType"
|
@change="radioChange"
|
size="mini"
|
style="margin-right: 8px;">
|
<el-radio :label="365" >近一年</el-radio>
|
<el-radio :label="90">近三个月</el-radio>
|
<el-radio :label="30">近一个月</el-radio>
|
<el-radio :label="7">近7天</el-radio>
|
<el-radio :label="1">近24小时</el-radio>
|
</el-radio-group>
|
<el-popover
|
placement="top-start"
|
trigger="click">
|
<div class="time-group">
|
<el-date-picker
|
v-model="timeRange"
|
type="datetimerange"
|
@change="timeRangeChange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="['00:00:00', '23:59:59']"
|
:clearable="false"
|
:editable="false"></el-date-picker>
|
</div>
|
<el-button size="mini" slot="reference">{{filter.txt}} <i class="el-icon-date"></i></el-button>
|
</el-popover>
|
<span style="color: #FFFFFF">当前显示单体：</span>
|
<el-select
|
v-model="monSelect"
|
filterable placeholder="请选择查看的单体"
|
@change="monSelectChange"
|
size="mini">
|
<el-option
|
v-for="item in monOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="page-content">
|
<el-tabs v-model="acTabs" type="border-card" class="flex-layout noborder" @tab-click="tabClick">
|
<el-tab-pane label="在线电压" name="onlineVolGraph">
|
<line-chart-plus ref="onlineVolGraph" id="onlineVolGraph" unit="V"></line-chart-plus>
|
</el-tab-pane>
|
<el-tab-pane label="组端电压" name="groupVolGraph">
|
<line-chart-plus ref="groupVolGraph" id="groupVolGraph" unit="V"></line-chart-plus>
|
</el-tab-pane>
|
<el-tab-pane label="组端电流" name="groupCurrGraph">
|
<line-chart-plus ref="groupCurrGraph" id="groupCurrGraph" unit="A"></line-chart-plus>
|
</el-tab-pane>
|
<el-tab-pane label="单体电压" name="monVolGraph">
|
<line-chart-plus ref="monVolGraph" id="monVolGraph" unit="V"></line-chart-plus>
|
</el-tab-pane>
|
<el-tab-pane label="单体温度" name="monTmpGraph">
|
<line-chart-plus ref="monTmpGraph" id="monTmpGraph" unit="℃"></line-chart-plus>
|
</el-tab-pane>
|
<el-tab-pane label="单体内阻" name="monResGraph">
|
<line-chart-plus ref="monResGraph" id="monResGraph" unit="mΩ"></line-chart-plus>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</flex-layout>
|
<div class="progress-container" v-if="progress.show">
|
<div class="progress-content">
|
<div class="progress">
|
<el-progress type="circle" :percentage="progress.value"></el-progress>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LineChartPlus from "@/components/chart/LineChartPlus";
|
import {searchHistoryRealtimeData} from "@/assets/js/realTime";
|
|
let options = {
|
groupVolGraph: {
|
title: {
|
text: '组端电压折线图',
|
x: 'center'
|
},
|
xAxis: [{
|
type: 'category',
|
}],
|
yAxis: {
|
type: 'value',
|
},
|
series: []
|
},
|
groupCurrGraph: {
|
title: {
|
text: '组端电流折线图',
|
x: 'center'
|
},
|
xAxis: [{
|
type: 'category',
|
}],
|
series: []
|
},
|
onlineVolGraph: {
|
title: {
|
text: '在线电压折线图',
|
x: 'center'
|
},
|
xAxis: [{
|
type: 'category',
|
}],
|
series: []
|
},
|
monVolGraph: {
|
title: {
|
text: '单体电压折线图',
|
x: 'center'
|
},
|
legend: {
|
show: true,
|
data: [],
|
},
|
xAxis: [{
|
type: 'category',
|
}],
|
series: []
|
},
|
monTmpGraph: {
|
title: {
|
text: '单体温度折线图',
|
x: 'center'
|
},
|
legend: {
|
show: true,
|
data: [],
|
},
|
xAxis: [{
|
type: 'category',
|
}],
|
series: []
|
},
|
monResGraph: {
|
title: {
|
text: '单体内阻折线图',
|
x: 'center'
|
},
|
legend: {
|
show: true,
|
data: [],
|
},
|
xAxis: [{
|
type: 'category',
|
}],
|
series: []
|
},
|
};
|
export default {
|
name: "HistoryRealtimeData",
|
components: {
|
LineChartPlus,
|
},
|
props: {
|
batt: {
|
type: Object,
|
default() {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
acTabs: 'onlineVolGraph',
|
filter: {
|
timeType: 1,
|
startTime: '',
|
endTime: '',
|
txt: '选择日期'
|
},
|
timeRange: [],
|
searchParams: {
|
BattGroupId: '',
|
recrod_time: '',
|
recrod_time1: '',
|
mon_num: 0,
|
note: 0
|
},
|
progress: {
|
show: false,
|
value: 0,
|
},
|
monCount: 0,
|
monSelect: '#1',
|
}
|
},
|
methods: {
|
tabClick(params) {
|
this.$nextTick(()=>{
|
this.$refs[params.name].resize();
|
});
|
},
|
resize() {
|
this.$refs[this.acTabs].resize();
|
},
|
timeRangeChange: function() {
|
// 消除单选
|
if(!this.filter.timeType != -1) {
|
this.filter.timeType = -1;
|
}
|
// 获取时间段
|
const startTime = this.timeRange[1].format("yyyy-MM-dd hh:mm:ss");
|
const endTime = this.timeRange[0].format("yyyy-MM-dd hh:mm:ss");
|
this.filter.txt = endTime+'至'+startTime;
|
// 设置时间段
|
this.setRangeTime(startTime, endTime);
|
// 根据查询条件获取数据
|
this.loopSearch();
|
},
|
radioChange: function() {
|
// 消除日期时间段
|
if(this.timeRange.length != 0) {
|
this.filter.txt = '选择日期';
|
this.timeRange = [];
|
}
|
let date = new Date();
|
// 获取选中日期
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * this.filter.timeType);
|
// 获取时间段
|
const startTime = new Date().format("yyyy-MM-dd hh:mm:ss");
|
const endTime = date.format("yyyy-MM-dd hh:mm:ss");
|
// 设置时间段
|
this.setRangeTime(startTime, endTime);
|
// 根据查询条件获取数据
|
this.loopSearch();
|
},
|
setRangeTime: function(startTime, endTime) {
|
this.searchParams.recrod_time1 = startTime;
|
this.searchParams.recrod_time = endTime;
|
},
|
loopSearch() {
|
let BattGroupId = this.searchParams.BattGroupId;
|
let monNum = this.searchParams.note; // 单体的个数
|
let monFlag = this.monSelect.replace("#", ""); // 单体的编号
|
|
let start = new Date(this.searchParams.recrod_time).getTime();
|
let end = new Date(this.searchParams.recrod_time1).getTime();
|
let times = [];
|
while(start<end) {
|
let recrod_time1 = start+3600*12*1000*30;
|
recrod_time1 = recrod_time1>end?end:recrod_time1;
|
let tmp = {
|
BattGroupId: BattGroupId,
|
note: monNum,
|
mon_num: monFlag,
|
recrod_time: new Date(start).format("yyyy-MM-dd hh:mm:ss"),
|
recrod_time1: new Date(recrod_time1).format("yyyy-MM-dd hh:mm:ss"),
|
};
|
times.push(tmp);
|
start = recrod_time1+1000;
|
}
|
this.progress.value = 0;
|
this.progress.show = true;
|
// 开始查询
|
this.search(times, 0);
|
},
|
search: function(times, index) {
|
// 结束标识
|
if(!times[index]) {
|
this.progress.value = 100;
|
this.resize();
|
setTimeout(()=>{
|
this.progress.show=false;
|
}, 1000);
|
return;
|
}
|
|
// 设置进度值
|
this.progress.value = Math.floor(index/times.length*100);
|
// 查询历史实时数据
|
searchHistoryRealtimeData(times[index]).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if(rs.code == 1) {
|
data = rs.data;
|
}
|
// 初始化加载加载
|
if(index == 0 || options.monTmpGraph.series.length == 0) {
|
// 格式化数据
|
this.formatData(data);
|
}else {
|
// 格式化添加的数据
|
this.formatAppendData(data);
|
}
|
this.search(times, ++index);
|
}).catch(error=>{
|
console.log(error);
|
this.search(times, ++index);
|
});
|
},
|
formatData(data) {
|
let dates = []; // 日期
|
let groupVol = [{
|
name: '组端电压',
|
type: 'line',
|
smooth: true,
|
symbolSize: 0,
|
sampling: 'average',
|
data: []
|
}];
|
let groupCurr = [{
|
name: '组端电流',
|
type: 'line',
|
smooth: true,
|
symbolSize: 0,
|
sampling: 'average',
|
data: []
|
}];
|
let onlineVol = [{
|
name: '在线电压',
|
type: 'line',
|
smooth: true,
|
symbolSize: 0,
|
sampling: 'average',
|
data: []
|
}];
|
let monVol = []; // 单体电压
|
let monTmp = []; // 单体温度
|
let monRes = []; // 单体内阻
|
let flag = '-1';
|
// 遍历data
|
for(let i=0; i<data.length; i++) {
|
let _data = data[i];
|
if(_data.recrod_time != flag) {
|
flag = _data.recrod_time;
|
groupVol[0].data.push([_data.recrod_time, _data.group_vol]);
|
groupCurr[0].data.push([_data.recrod_time,_data.group_curr]);
|
onlineVol[0].data.push([_data.recrod_time,_data.online_vol]);
|
}
|
// 设置单体信息
|
if(typeof monVol[_data.mon_num - 1] != 'object') {
|
// 单体电压
|
monVol[_data.mon_num - 1] = {
|
name: '#'+_data.mon_num,
|
type: 'line',
|
smooth: true,
|
symbolSize: 0,
|
sampling: 'average',
|
data: []
|
};
|
// 单体温度
|
monTmp[_data.mon_num - 1] = {
|
name: '#'+_data.mon_num,
|
type: 'line',
|
showSymbol: false,
|
data: []
|
};
|
// 单体内阻
|
monRes[_data.mon_num - 1] = {
|
name: '#'+_data.mon_num,
|
type: 'line',
|
smooth: true,
|
symbolSize: 0,
|
sampling: 'average',
|
data: []
|
};
|
}
|
// 单体电压
|
monVol[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_vol]);
|
// 单体温度
|
monTmp[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_tmp]);
|
// 单体内阻
|
monRes[_data.mon_num - 1].data.push([_data.recrod_time, _data.mon_res]);
|
}
|
// 设置组端电压
|
options.groupVolGraph.series = groupVol;
|
// 设置组端电流
|
options.groupCurrGraph.series = groupCurr;
|
// 设置在线电压
|
options.onlineVolGraph.series = onlineVol;
|
|
// 设置单体电压
|
options.monVolGraph.series = monVol;
|
// 设置单体温度
|
options.monTmpGraph.series = monTmp;
|
// 设置单体内阻
|
options.monResGraph.series = monRes;
|
// 设置图表的配置项
|
this.setOptions();
|
},
|
formatAppendData(data){
|
let groupVol = [[]]; // 组端电压
|
let groupCurr = [[]]; // 组端电流
|
let onlineVol = [[]];
|
let monVol = []; // 单体电压
|
let monTmp = []; // 单体温度
|
let monRes = []; // 单体内阻
|
let flag = '-1';
|
// 遍历data
|
for(let i=0; i<data.length; i++) {
|
let _data = data[i];
|
if(_data.recrod_time != flag) {
|
flag = _data.recrod_time;
|
groupVol[0].push([_data.recrod_time, _data.group_vol]);
|
groupCurr[0].push([_data.recrod_time,_data.group_curr]);
|
onlineVol[0].push([_data.recrod_time,_data.online_vol]);
|
}
|
// 设置单体信息
|
if(typeof monVol[_data.mon_num - 1] != 'object') {
|
// 单体电压
|
monVol[_data.mon_num - 1] = [];
|
// 单体温度
|
monTmp[_data.mon_num - 1] = [];
|
// 单体内阻
|
monRes[_data.mon_num - 1] = [];
|
}
|
// 单体电压
|
monVol[_data.mon_num - 1].push([_data.recrod_time, _data.mon_vol]);
|
// 单体温度
|
monTmp[_data.mon_num - 1].push([_data.recrod_time, _data.mon_tmp]);
|
// 单体内阻
|
monRes[_data.mon_num - 1].push([_data.recrod_time, _data.mon_res]);
|
}
|
|
// 添加数据
|
this.$refs.groupVolGraph.appendData(groupVol);
|
this.$refs.groupCurrGraph.appendData(groupCurr);
|
this.$refs.onlineVolGraph.appendData(onlineVol);
|
this.$refs.monVolGraph.appendData(monVol);
|
this.$refs.monTmpGraph.appendData(monTmp);
|
this.$refs.monResGraph.appendData(monRes);
|
},
|
setOptions() {
|
// 设置数据
|
this.$refs.groupVolGraph.setOption(options.groupVolGraph);
|
this.$refs.groupCurrGraph.setOption(options.groupCurrGraph);
|
this.$refs.onlineVolGraph.setOption(options.onlineVolGraph);
|
this.$refs.monVolGraph.setOption(options.monVolGraph);
|
this.$refs.monTmpGraph.setOption(options.monTmpGraph);
|
this.$refs.monResGraph.setOption(options.monResGraph);
|
this.setLegends();
|
},
|
setLegends() {
|
this.$refs.monVolGraph.setLegend(this.monSelect);
|
this.$refs.monTmpGraph.setLegend(this.monSelect);
|
this.$refs.monResGraph.setLegend(this.monSelect);
|
},
|
monSelectChange: function() {
|
//this.setLegends();
|
this.loopSearch();
|
}
|
},
|
computed: {
|
monOptions: function() {
|
var result = [];
|
for(var i=0; i<this.monCount; i++) {
|
var text = '#'+(i+1);
|
result.push({
|
label: text,
|
value: text,
|
});
|
}
|
return result;
|
},
|
},
|
mounted() {
|
// 初始化echarts的高度
|
this.$nextTick(()=>{
|
this.$refs[this.acTabs].resize();
|
});
|
// 设置电池组id
|
this.searchParams.BattGroupId = this.batt.BattGroupId;
|
this.searchParams.note = this.batt.MonCount;
|
// 设置单体的个数
|
this.monCount = this.batt.MonCount;
|
|
// 初始化内容
|
this.setOptions();
|
// 初始化查询
|
this.radioChange();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.history-realtime-data {
|
height: 600px;
|
}
|
.ele-filter-container {
|
padding-left: 8px;
|
background-color: #052272;
|
}
|
.page-content {
|
position: relative;
|
box-sizing: border-box;
|
height: 100%;
|
border-radius: 8px;
|
}
|
.progress-container {
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: 99;
|
background-color: rgba(155, 152, 152, 0.1);
|
}
|
.progress-content {
|
display: flex;
|
height: 100%;
|
flex-direction: row; /* 子元素横向排列 */
|
justify-content: center; /* 相对父元素水平居中 */
|
align-items: center; /* 子元素相对父元素垂直居中 */
|
}
|
.progress-content .progress {
|
display: inline-block;
|
}
|
</style>
|
