<template>
|
<div
|
class="history-realtime-data"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.4)"
|
>
|
<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 "../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: "",
|
recrodTime: "",
|
recrodTime1: "",
|
monNum: 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.recrodTime1 = startTime;
|
this.searchParams.recrodTime = endTime;
|
},
|
loopSearch() {
|
let battGroupId = this.searchParams.battGroupId;
|
let monNum = this.searchParams.note; // 单体的个数
|
let monFlag = this.monSelect.replace("#", ""); // 单体的编号
|
let recrodTime = this.searchParams.recrodTime;
|
let recrodTime1 = this.searchParams.recrodTime1;
|
// this.progress.value = 0;
|
// this.progress.show = true;
|
// 开始查询
|
this.search({
|
battGroupId,
|
note: monNum,
|
monNum: monFlag,
|
recrodTime,
|
recrodTime1,
|
});
|
},
|
search: function (params) {
|
// // 结束标识
|
// 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);
|
this.loading = true;
|
// 查询历史实时数据
|
searchHistoryRealtimeData(params)
|
.then((res) => {
|
res = res.data;
|
var data = [];
|
if (res.code) {
|
data = res.data;
|
}
|
this.formatData(data);
|
this.loading = false;
|
|
// // 初始化加载加载
|
// if (index == 0 || options.monTmpGraph.series.length == 0) {
|
// // 格式化数据
|
// } else {
|
// // 格式化添加的数据
|
// this.formatAppendData(data);
|
// }
|
// this.search(times, ++index);
|
})
|
.catch((error) => {
|
console.log(error);
|
this.loading = false;
|
// this.search(times, ++index);
|
});
|
},
|
formatData(data) {
|
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.recrodTime != flag) {
|
flag = _data.recrodTime;
|
groupVol[0].data.push([_data.recrodTime, _data.groupVol]);
|
groupCurr[0].data.push([_data.recrodTime, _data.groupCurr]);
|
onlineVol[0].data.push([_data.recrodTime, _data.onlineVol]);
|
}
|
// 设置单体信息
|
if (typeof monVol[_data.monNum - 1] != "object") {
|
// 单体电压
|
monVol[_data.monNum - 1] = {
|
name: "#" + _data.monNum,
|
type: "line",
|
smooth: true,
|
symbolSize: 0,
|
sampling: "average",
|
data: [],
|
};
|
// 单体温度
|
monTmp[_data.monNum - 1] = {
|
name: "#" + _data.monNum,
|
type: "line",
|
showSymbol: false,
|
data: [],
|
};
|
// 单体内阻
|
monRes[_data.monNum - 1] = {
|
name: "#" + _data.monNum,
|
type: "line",
|
smooth: true,
|
symbolSize: 0,
|
sampling: "average",
|
data: [],
|
};
|
}
|
// 单体电压
|
monVol[_data.monNum - 1].data.push([_data.recrodTime, _data.monVol]);
|
// 单体温度
|
monTmp[_data.monNum - 1].data.push([_data.recrodTime, _data.monTmp]);
|
// 单体内阻
|
monRes[_data.monNum - 1].data.push([_data.recrodTime, _data.monRes]);
|
}
|
// 设置组端电压
|
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.recrodTime != flag) {
|
flag = _data.recrodTime;
|
groupVol[0].push([_data.recrodTime, _data.groupVol]);
|
groupCurr[0].push([_data.recrodTime, _data.groupCurr]);
|
onlineVol[0].push([_data.recrodTime, _data.onlineVol]);
|
}
|
// 设置单体信息
|
if (typeof monVol[_data.monNum - 1] != "object") {
|
// 单体电压
|
monVol[_data.monNum - 1] = [];
|
// 单体温度
|
monTmp[_data.monNum - 1] = [];
|
// 单体内阻
|
monRes[_data.monNum - 1] = [];
|
}
|
// 单体电压
|
monVol[_data.monNum - 1].push([_data.recrodTime, _data.monVol]);
|
// 单体温度
|
monTmp[_data.monNum - 1].push([_data.recrodTime, _data.monTmp]);
|
// 单体内阻
|
monRes[_data.monNum - 1].push([_data.recrodTime, _data.monRes]);
|
}
|
|
// 添加数据
|
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);
|
|
// series数组不能为稀疏数据
|
options.monVolGraph.series = options.monVolGraph.series.filter(
|
(v) => !!v
|
);
|
options.monTmpGraph.series = options.monTmpGraph.series.filter(
|
(v) => !!v
|
);
|
options.monResGraph.series = options.monResGraph.series.filter(
|
(v) => !!v
|
);
|
|
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>
|
