<template>
|
<div class="comparisonWarp">
|
<div class="borderCon co-option">
|
<el-select v-model="comparison_recode_type" placeholder="请选择" @change="filterRecode(comparison_recode_type)"
|
:filterable="true">
|
<el-option v-for="(item,index) in test_record.list" :key="index" :label="item.label+'('+item.children.length+')'"
|
:value="item.value"></el-option>
|
</el-select>
|
<div class="checkboxCon">
|
<el-checkbox-group v-model="checkList" :max="2" @change="checkData">
|
<el-checkbox :label="item.label" v-for="(item,index) in comparison_recode_arr" :key="index" class="checkBox"></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<div class="borderCon co-content">
|
<el-tabs v-model="acTabs" type="border-card" class="flex-layout noborder" @tab-click="tabClick">
|
<el-tab-pane label="端电压折线图" name="groupVol_pop">
|
<div class="chartCon">
|
<line-chart ref="groupVol_pop" id="groupVol_pop" unit="V"></line-chart>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="机房单体电压" name="monBar_pop">
|
<div class="chartCon">
|
<bar-chart ref="monBar_pop" id="monBar_pop" :show-label="false"></bar-chart>
|
<div style="padding: 0 10px 0 25px;width: 100%;box-sizing: border-box;">
|
<el-slider v-model="slider" size="small" :format-tooltip="formatTooltip" @input="sliderInput"></el-slider>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="电池电流折线图" name="groupCurr_pop">
|
<div class="chartCon">
|
<line-chart ref="groupCurr_pop" id="groupCurr_pop" unit="A"></line-chart>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="单体电压趋势图" name="monInfo_pop">
|
<div class="chartCon">
|
<line-chart ref="monInfo_pop" id="monInfo_pop"></line-chart>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BarChart from "../chart/BarChart.vue";
|
import LineChart from "../chart/LineChart.vue";
|
import {
|
searchBattTestData,
|
searchBattTestDataStop,
|
searchHistory
|
} from "../../assets/js/history";
|
import {
|
formatSeconds,
|
GetMonomerCap,
|
GetHourRate,
|
getBarNum,
|
} from "../../assets/js/tools";
|
// 端信息
|
let allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
dataList: []
|
};
|
// 单体折线信息
|
let monLineData = {
|
vol: []
|
};
|
// 单体柱状信息
|
let monBarData = {
|
vol1: [],
|
vol2: []
|
};
|
// 4个图表
|
let groupVolLineChart, currLineChart, monLineChart, monBarChart;
|
let oldCheckArr = [];
|
export default {
|
props: ['test_record'],
|
components: {
|
BarChart,
|
LineChart,
|
},
|
data() {
|
return {
|
acTabs: 'groupVol_pop', //tab切换active
|
comparison_recode_type: '', //筛选得类型名
|
comparison_recode_arr: [], //筛选得类型数据
|
checkList: [], //选中得checkbox
|
checkNum: 0,
|
slider: 100,
|
testTimeLong1: [],
|
testTimeLong2: [],
|
}
|
},
|
mounted() {
|
this.$nextTick(() => {
|
|
// 初始化图表
|
this.initChart();
|
});
|
},
|
methods: {
|
//历史数据对比类型筛选
|
filterRecode(data) {
|
//重置
|
this.checkList = [];
|
this.clearChart()
|
this.test_record.list.map((item) => {
|
if (item.value == data) {
|
this.comparison_recode_arr = item.children;
|
}
|
});
|
},
|
tabClick(tab) {
|
this.$nextTick(() => {
|
this.$G.chartManage.resize(tab.name);
|
});
|
},
|
checkData(data) {
|
let index = this.checkList.length - 1;
|
if (oldCheckArr.length > this.checkList.length) {
|
//减少操作
|
this.clearChart()
|
}
|
|
this.comparison_recode_arr.map((item, j) => {
|
if (item.value == this.checkList[index]) {
|
this.checkNum = index;
|
// 查询历史数据
|
this.searchHistory(item.BattGroupId, item.test_record_count);
|
}
|
});
|
oldCheckArr = this.checkList;
|
},
|
// 查询历史信息
|
searchHistory(BattGroupId, count) {
|
// 开启等待框
|
let loading = this.$layer.loading(1);
|
searchHistory({
|
BattGroupId: BattGroupId,
|
test_record_count: count,
|
data_new: 1000
|
}).then(res => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
// 数据
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
// 格式化数据
|
this.formateHisData(data);
|
})
|
.catch(error => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
formateHisData(data) {
|
let record_time = -1; // 记录时间
|
// 端信息
|
allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
dataList: []
|
};
|
// 单体折线信息
|
monLineData = {
|
vol: []
|
};
|
// 单体柱状信息
|
monBarData = {
|
vol1: [],
|
vol2: []
|
};
|
data.forEach(item => {
|
let mon_num = item.mon_num;
|
if (record_time != item.record_time) {
|
record_time = item.record_time;
|
allData.groupVol.push([record_time, item.group_vol]);
|
allData.onlineVol.push([record_time, item.online_vol]);
|
allData.testCurr.push([record_time, item.test_curr]);
|
allData.dataList.push(item);
|
|
// 开辟空间
|
if (this.checkNum == 0) {
|
monBarData.vol1.push([]);
|
this.testTimeLong1.push(item.test_timelong);
|
} else if (this.checkNum == 1) {
|
monBarData.vol2.push([]);
|
this.testTimeLong2.push(item.test_timelong);
|
}
|
}
|
// 单体电压柱状图设置
|
let monBarVol1, monBarVol2
|
if (this.checkNum == 0) {
|
monBarVol1 = monBarData.vol1[monBarData.vol1.length - 1];
|
monBarVol1.push(["#" + mon_num, item.mon_vol]);
|
} else if (this.checkNum == 1) {
|
monBarVol2 = monBarData.vol2[monBarData.vol2.length - 1];
|
monBarVol2.push(["#" + mon_num, item.mon_vol]);
|
}
|
|
|
|
// 设置单体折线图信息
|
if (typeof monLineData.vol[mon_num - 1] != "object") {
|
// 开辟空间
|
monLineData.vol[mon_num - 1] = [];
|
}
|
// 获取到需要使用的空间
|
let monLineVol = monLineData.vol[mon_num - 1];
|
monLineVol.push([record_time, item.mon_vol]);
|
});
|
this.setGroupVolLineChart();
|
this.setCurrLineChart();
|
this.setMonLineChart();
|
this.setBarChart();
|
},
|
// 设置端电压折线图
|
setGroupVolLineChart() {
|
// 根据allData.groupVol数据设置groupVolLineChart的值
|
let color = [
|
["#0081ff", "#df9d02"],
|
["#4ddcb4", "#4b4beb"]
|
]
|
let arr = [{
|
name: "组端电压",
|
"xAxisIndex": this.checkNum,
|
itemStyle: {
|
normal: {
|
color: color[this.checkNum][0]
|
}
|
},
|
data: allData.groupVol
|
}, {
|
name: "在线电压",
|
"xAxisIndex": this.checkNum,
|
itemStyle: {
|
normal: {
|
color: color[this.checkNum][1]
|
}
|
},
|
data: allData.onlineVol
|
}]
|
groupVolLineChart.series.push(...arr);
|
// 更新图表
|
this.$refs.groupVol_pop.setOption(groupVolLineChart);
|
},
|
// 设置电池电流折线图
|
setCurrLineChart() {
|
// 根据allData.testCurr数据设置currLineChart的值
|
let color = ["#0081ff", "#df9d02", "#4ddcb4", "#4b4beb"]
|
let arr = [{
|
name: "电池电流",
|
"xAxisIndex": this.checkNum,
|
itemStyle: {
|
normal: {
|
color: color[this.checkNum]
|
}
|
},
|
data: allData.testCurr
|
}]
|
currLineChart.series.push(...arr)
|
// 更新图表
|
this.$refs.groupCurr_pop.setOption(currLineChart);
|
},
|
// 设置单体折线图
|
setMonLineChart() {
|
// 根据monLineData的值设置monLineChart
|
let dataList = monLineData.vol;
|
let arr = dataList.map((item, index) => {
|
let monNum = "#" + (index + 1);
|
return {
|
name: monNum,
|
"xAxisIndex": this.checkNum,
|
data: item
|
};
|
});
|
monLineChart.series.push(...arr)
|
// 更新图表
|
this.$refs.monInfo_pop.setOption(monLineChart);
|
},
|
// 设置柱状图
|
setBarChart() {
|
// 根据monBarData的值设置monBarChart
|
let dataList;
|
if (this.checkNum == 0) {
|
dataList = monBarData.vol1;
|
} else if (this.checkNum == 1) {
|
dataList = monBarData.vol2;
|
}
|
let index = this.getDataIndex(dataList.length, this.slider);
|
if (index != -1) {
|
let data = dataList[index];
|
let batNum = getBarNum(data);
|
monBarChart.title.text = "最大值=" + batNum.max + "V;最小值=" + batNum.min + "V;平均值=" + batNum.avg.toFixed(3) + "V"
|
this.monBarTitle = monBarChart.title.text;
|
let arr = [{
|
name: "单体电压",
|
zlevel: 1,
|
data: data
|
}]
|
monBarChart.series.push(...arr)
|
}
|
// 设置柱状图
|
this.$refs.monBar_pop.setOption(monBarChart);
|
},
|
sliderInput() {
|
let dataList1 = monBarData.vol1;
|
let index1 = this.getDataIndex(dataList1.length, this.slider);
|
if (index1 != -1) {
|
let data = dataList1[index1];
|
monBarChart.series[0].data = data
|
}
|
if (this.checkNum == 1) {
|
let dataList2 = monBarData.vol2;
|
let index2 = this.getDataIndex(dataList2.length, this.slider);
|
if (index2 != -1) {
|
let data = dataList2[index2];
|
monBarChart.series[1].data = data
|
}
|
}
|
// 设置柱状图
|
this.$refs.monBar_pop.setOption(monBarChart);
|
},
|
initChart() {
|
// 端电压折线图
|
groupVolLineChart = {
|
title: {
|
show: true,
|
text: "端电压折线图",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
boundaryGap: 0,
|
}, {
|
type: 'category',
|
position: 'top',
|
boundaryGap: 0,
|
}],
|
series: []
|
};
|
|
// 电池电流折线图
|
currLineChart = {
|
title: {
|
show: true,
|
text: "电池电流折线图",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
boundaryGap: 0,
|
}, {
|
type: 'category',
|
position: 'top',
|
boundaryGap: 0,
|
}],
|
series: []
|
};
|
|
// 单体信息折线图
|
monLineChart = {
|
title: {
|
show: true,
|
text: "单体电压",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
boundaryGap: 0,
|
}, {
|
type: 'category',
|
position: 'top',
|
boundaryGap: 0,
|
}],
|
series: []
|
};
|
|
// 单体信息柱状图
|
monBarChart = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
boundaryGap: 0,
|
}, {
|
type: 'category',
|
position: 'top',
|
boundaryGap: 0,
|
}],
|
series: []
|
};
|
|
// 设置配置项
|
this.setChart();
|
},
|
// 设置图参数
|
setChart() {
|
this.$refs.groupVol_pop.setOption(groupVolLineChart);
|
this.$refs.monBar_pop.setOption(monBarChart);
|
this.$refs.groupCurr_pop.setOption(currLineChart);
|
this.$refs.monInfo_pop.setOption(monLineChart);
|
},
|
// 清空图表
|
clearChart() {
|
allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
dataList: []
|
};
|
monLineData = {
|
vol: []
|
};
|
monBarData = {
|
vol1: [],
|
vol2: []
|
};
|
groupVolLineChart.series = [];
|
currLineChart.series = [];
|
monLineChart.series = [];
|
monBarChart.series = [];
|
this.setChart()
|
},
|
// 根据百分比获取显示的数据的笔数
|
getDataIndex(num, percent) {
|
return Math.floor(num * percent / 100) - 1;
|
},
|
// 格式化滑块显示的内容
|
formatTooltip(value) {
|
let testTimeLong1 = this.testTimeLong1;
|
let index1 = this.getDataIndex(testTimeLong1.length, value);
|
let test_long1 = formatSeconds(0);
|
if (index1 != -1) {
|
test_long1 = formatSeconds(testTimeLong1[index1]);
|
}
|
if (this.checkNum == 0) {
|
return test_long1;
|
} else if (this.checkNum == 1) {
|
let testTimeLong2 = this.testTimeLong2;
|
let index2 = this.getDataIndex(testTimeLong2.length, value);
|
let test_long2 = formatSeconds(0);
|
if (index2 != -1) {
|
test_long2 = formatSeconds(testTimeLong2[index2]);
|
}
|
return test_long1+'/'+test_long2;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped="scoped">
|
.comparisonWarp {
|
width: 100%;
|
height: 100%;
|
background: url(../../assets/images/dw_bg.jpg) 0 0 no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px;
|
box-sizing: border-box;
|
}
|
|
.comparisonWarp .borderCon {
|
border: 1px solid #143a92;
|
border-radius: 8px;
|
}
|
|
.comparisonWarp .co-option {
|
padding: 5px;
|
height: 500px;
|
box-sizing: border-box;
|
width: 207px;
|
}
|
|
.checkboxCon {
|
padding: 10px 0;
|
height: calc(100% - 60px);
|
overflow: auto;
|
margin-top: 5px;
|
}
|
|
.comparisonWarp .co-content {
|
flex: 1;
|
height: 500px;
|
padding: 5px;
|
box-sizing: border-box;
|
margin-left: 15px;
|
}
|
|
.flex-layout {
|
width: 100%;
|
height: 100%;
|
border: none;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.chartCon {
|
width: 100%;
|
height: calc(100% - 40px);
|
}
|
|
.checkBox {
|
margin-bottom: 8px;
|
}
|
</style>
|
