<template>
|
<div
|
class="module-wrapper"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.2)"
|
>
|
<div class="module-content-item">
|
<layout-box>
|
<div class="layout-content">
|
<div class="mon-vol-bar">
|
<flex-box title="锂电池包电压" size="mini">
|
<divide-gradient-bar
|
ref="packVol"
|
name="锂电池包电压"
|
unit="V"
|
:rotate="true"
|
></divide-gradient-bar>
|
</flex-box>
|
</div>
|
<div class="mon-temp-bar">
|
<flex-box title="锂电池包电流" size="mini">
|
<divide-gradient-bar
|
ref="packCurr"
|
name="锂电池包电流"
|
unit="A"
|
:rotate="true"
|
></divide-gradient-bar>
|
</flex-box>
|
</div>
|
</div>
|
</layout-box>
|
</div>
|
<div class="module-content-item">
|
<layout-box>
|
<div class="layout-content">
|
<div class="mon-vol-bar">
|
<flex-box :title="monVolText" size="mini">
|
<divide-gradient-bar
|
ref="monVol"
|
name="单体电压"
|
unit="V"
|
:rotate="true"
|
></divide-gradient-bar>
|
</flex-box>
|
</div>
|
<div class="mon-temp-bar">
|
<flex-box :title="monTempText" size="mini">
|
<divide-cube-bar
|
ref="monTemp"
|
name="单体温度"
|
unit="℃"
|
:max="100"
|
></divide-cube-bar>
|
</flex-box>
|
</div>
|
</div>
|
</layout-box>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LayoutBox from "./layout-box";
|
import FlexBox from "@/components/FlexBox";
|
import DivideBar from "@/components/myCharts/DivideBar";
|
import { getValByKey } from "@/assets/js/tools";
|
import MonLithiumPack from "./monLithiumPack";
|
import DivideCubeBar from "@/components/myCharts/DivideCubeBar";
|
import DivideGradientBar from "@/components/myCharts/DivideGradientBar";
|
import DivideDotBar from "@/components/myCharts/DivideDotBar";
|
|
import const_digit from "@/assets/js/const/const_digit";
|
const {
|
cap: CAP,
|
vol: VOL,
|
curr: CURR,
|
res: RES,
|
conduct: CONDUCT,
|
temp: TEMP,
|
hum: HUM,
|
} = const_digit;
|
|
export default {
|
name: "lithiumPackTab",
|
components: {
|
MonLithiumPack,
|
DivideBar,
|
LayoutBox,
|
FlexBox,
|
DivideCubeBar,
|
DivideDotBar,
|
DivideGradientBar,
|
},
|
props: {
|
changeFlag: {
|
type: Number,
|
default: 0,
|
},
|
update: {
|
type: Boolean,
|
default: false,
|
},
|
liData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
packVols: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
packCurrs: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
list: [],
|
};
|
},
|
watch: {
|
changeFlag() {
|
this.changeListInfo();
|
this.setMonData();
|
},
|
update() {
|
this.resize();
|
this.changeListInfo();
|
this.setMonPackData();
|
this.setMonData();
|
},
|
},
|
methods: {
|
resize() {
|
this.$nextTick(() => {
|
// 锂电池包电压
|
if (this.$refs.packVol) {
|
this.$refs.packVol.resize();
|
}
|
|
// 锂电池包电流
|
if (this.$refs.packCurr) {
|
this.$refs.packCurr.resize();
|
}
|
|
// 单体电压图表
|
if (this.$refs.monVol) {
|
this.$refs.monVol.resize();
|
}
|
|
// 单体温度图表
|
if (this.$refs.monTemp) {
|
this.$refs.monTemp.resize();
|
}
|
});
|
},
|
/**
|
* 切换锂电池包
|
* @param item
|
*/
|
changPack(index) {
|
this.clearActivePack();
|
this.$nextTick(() => {
|
//item.active = true;
|
this.list[index].active = true;
|
});
|
this.loading = true;
|
setTimeout(() => {
|
this.loading = false;
|
this.setMonData();
|
}, 1000);
|
},
|
clearActivePack() {
|
for (let i = 0; i < this.list.length; i++) {
|
this.list[i].active = false;
|
}
|
},
|
setMonPackData() {
|
let packCount = this.liData.length;
|
this.list = [];
|
// 设置锂电池包
|
for (let i = 0; i < packCount; i++) {
|
this.list.push({
|
num: i + 1,
|
active: false,
|
vol: 0,
|
curr: 0,
|
});
|
}
|
if (this.list.length) {
|
this.list[0].active = true;
|
}
|
|
// 包电压
|
let packVol = {
|
xLabel: [],
|
sData: [],
|
};
|
|
// 包电流
|
let packCurr = {
|
xLabel: [],
|
sData: [],
|
};
|
for (let i = 0; i < packCount; i++) {
|
let label = "包" + (i + 1);
|
packVol.xLabel.push(label);
|
packVol.sData.push(0);
|
|
packCurr.xLabel.push(label);
|
packCurr.sData.push(0);
|
}
|
|
if (this.$refs.packVol) {
|
this.$refs.packVol.setData(packVol);
|
}
|
|
if (this.$refs.packCurr) {
|
this.$refs.packCurr.setData(packCurr);
|
}
|
},
|
changeListInfo() {
|
if (!this.update) {
|
return;
|
}
|
let packVols = this.packVols;
|
let packCurrs = this.packCurrs;
|
for (let i = 0; i < this.list.length; i++) {
|
let packVol = packVols[i];
|
let packCurr = packCurrs[i];
|
this.list[i].vol = packVol ? packVol.toHold(VOL) : 0;
|
this.list[i].curr = packCurr ? packCurr.toHold(CURR) : 0;
|
}
|
|
// 包电压
|
let packVol = {
|
xLabel: [],
|
sData: [],
|
};
|
|
// 包电流
|
let packCurr = {
|
xLabel: [],
|
sData: [],
|
};
|
for (let i = 0, j = this.liData.length; i < j; i++) {
|
let vol = packVols[i];
|
let curr = packCurrs[i];
|
let label = "包" + (i + 1);
|
packVol.xLabel.push(label);
|
packVol.sData.push(vol ? vol.toHold(VOL) : 0);
|
|
packCurr.xLabel.push(label);
|
packCurr.sData.push(curr ? curr.toHold(CURR) : 0);
|
}
|
|
if (this.$refs.packVol) {
|
this.$refs.packVol.setData(packVol);
|
}
|
|
if (this.$refs.packCurr) {
|
this.$refs.packCurr.setData(packCurr);
|
}
|
},
|
setMonData() {
|
if (!this.update && !this.loading) {
|
return;
|
}
|
let activeNum = this.getActiveNum();
|
|
let { monVol, monTemp } = this.formatData(this.liData[activeNum]);
|
|
if (this.$refs.monVol) {
|
this.$refs.monVol.setData(monVol);
|
}
|
|
if (this.$refs.monTemp) {
|
this.$refs.monTemp.setData(monTemp);
|
}
|
},
|
formatData(data) {
|
let { tmpCnt, monomerCnt } = data;
|
let monVol = {
|
xLabel: [],
|
sData: [],
|
};
|
let monTemp = {
|
xLabel: [],
|
sData: [],
|
};
|
for (let i = 0; i < monomerCnt; i++) {
|
let idx = i + 1;
|
monVol.xLabel.push("单体" + idx);
|
let prop = "monVol" + idx;
|
monVol.sData.push(data[prop].toHold(VOL));
|
}
|
for (let i = 0; i < tmpCnt; i++) {
|
let idx = i + 1;
|
monTemp.xLabel.push("电芯" + idx);
|
let tempList = data.monTmps.split(",");
|
monTemp.sData.push((tempList[i] * 1).toHold(TEMP));
|
}
|
return {
|
monVol,
|
monTemp,
|
};
|
},
|
/**
|
* 获取激活的电池包
|
* @returns {number}
|
*/
|
getActiveNum() {
|
let list = this.list;
|
let num = 1;
|
for (let i = 0; i < list.length; i++) {
|
if (list[i].active) {
|
num = list[i].num;
|
break;
|
}
|
}
|
return num - 1;
|
},
|
},
|
computed: {
|
activePack() {
|
let list = this.list;
|
let index = 1;
|
for (let i = 0; i < list.length; i++) {
|
let item = list[i];
|
if (item.active) {
|
index = item.num;
|
}
|
}
|
return index + "";
|
},
|
monVolText() {
|
return "包" + this.activePack + "-单体电压";
|
},
|
monTempText() {
|
return "包" + this.activePack + "-单体温度";
|
},
|
},
|
mounted() {
|
this.setMonPackData();
|
this.setMonData();
|
|
// 锂电池包点击事件
|
let packVolChart = this.$refs.packVol.getChart();
|
packVolChart.getZr().on("click", (params) => {
|
const points = [params.offsetX, params.offsetY];
|
if (packVolChart.containPixel("grid", points)) {
|
let dataIndex = packVolChart.convertFromPixel({ seriesIndex: 0 }, [
|
params.offsetX,
|
params.offsetY,
|
])[0];
|
this.changPack(dataIndex);
|
}
|
});
|
// 锂电池包点击事件
|
let packCurrChart = this.$refs.packCurr.getChart();
|
packCurrChart.getZr().on("click", (params) => {
|
const points = [params.offsetX, params.offsetY];
|
if (packCurrChart.containPixel("grid", points)) {
|
let dataIndex = packCurrChart.convertFromPixel({ seriesIndex: 0 }, [
|
params.offsetX,
|
params.offsetY,
|
])[0];
|
this.changPack(dataIndex);
|
}
|
});
|
},
|
};
|
</script>
|
|
<style scoped>
|
.module-wrapper {
|
display: flex;
|
width: 100%;
|
height: 100%;
|
flex-direction: row;
|
box-sizing: border-box;
|
}
|
.module-content-item {
|
flex: 1;
|
height: 100%;
|
overflow-x: hidden;
|
margin-right: 8px;
|
}
|
.layout-content {
|
box-sizing: border-box;
|
padding: 12px 16px 16px 16px;
|
height: 100%;
|
}
|
.mon-vol-bar,
|
.mon-temp-bar {
|
box-sizing: border-box;
|
height: 50%;
|
}
|
.mon-vol-bar {
|
padding-bottom: 8px;
|
}
|
.mon-temp-bar {
|
padding-top: 8px;
|
}
|
.ele-mon-pack {
|
box-sizing: border-box;
|
padding: 12px 16px 16px 16px;
|
height: 100%;
|
}
|
</style>
|
