<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"></divide-gradient-bar>
|
</flex-box>
|
</div>
|
<div class="mon-temp-bar">
|
<flex-box title="锂电池包电流" size="mini">
|
<divide-dot-bar ref="packCurr" name="锂电池包电流" unit="A" :max="1"></divide-dot-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"></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 "@/pages/dataTest/components/layout-box";
|
import FlexBox from "@/components/FlexBox";
|
import DivideBar from "@/components/myCharts/DivideBar";
|
import DivideCubeBar from "@/components/myCharts/DivideCubeBar";
|
import MonLithiumPack from "@/pages/dataTest/components/monLithiumPack";
|
import DivideGradientBar from "@/components/myCharts/DivideGradientBar";
|
import DivideDotBar from "@/components/myCharts/DivideDotBar";
|
export default {
|
name: "lithiumPackTab",
|
components: {
|
MonLithiumPack,
|
DivideBar,
|
DivideCubeBar,
|
DivideGradientBar,
|
DivideDotBar,
|
LayoutBox,
|
FlexBox
|
},
|
props: {
|
// 数据有变化
|
changeFlag: {
|
type: Number,
|
default: 0,
|
},
|
// 数据是否更新 仅查看时才更新
|
update: {
|
type: Boolean,
|
default: false,
|
},
|
monVols: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
monTemps: {
|
type: Array,
|
default() {
|
return []
|
},
|
},
|
packVols: {
|
type: Array,
|
default() {
|
return []
|
},
|
},
|
packCurrs: {
|
type: Array,
|
default() {
|
return []
|
},
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
list: [],
|
monNum: 16,
|
packNum: 20
|
}
|
},
|
watch: {
|
changeFlag() {
|
this.setMonData();
|
this.changeListInfo();
|
},
|
update() {
|
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() {
|
// 设置锂电池包
|
for(let i=0; i<this.packNum; i++) {
|
this.list.push({
|
num: (i+1),
|
active: false,
|
vol: 0,
|
curr: 0
|
});
|
}
|
this.list[0].active = true;
|
|
// 包电压
|
let packVol = {
|
xLabel: [],
|
sData: []
|
};
|
|
// 包电流
|
let packCurr = {
|
xLabel: [],
|
sData: []
|
};
|
for(let i=0; i<this.packNum; 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:0;
|
this.list[i].curr = packCurr?packCurr:0;
|
}
|
|
// 包电压
|
let packVol = {
|
xLabel: [],
|
sData: []
|
};
|
|
// 包电流
|
let packCurr = {
|
xLabel: [],
|
sData: []
|
};
|
for(let i=0; i<this.packNum; i++) {
|
let vol = packVols[i];
|
let curr = packCurrs[i];
|
let label = "包"+(i+1);
|
packVol.xLabel.push(label);
|
packVol.sData.push(vol?vol:0);
|
|
packCurr.xLabel.push(label);
|
packCurr.sData.push(curr?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 monNum = this.monNum;
|
let monVols = [];
|
for(let i=1; i<321; i++) {
|
monVols.push(i);
|
}
|
|
// 单体电压
|
let monVolValues = this.getValues(this.monVols, activeNum, monNum);
|
let monVol = {
|
xLabel: [],
|
sData: []
|
};
|
for(let i=0; i<monVolValues.length; i++) {
|
monVol.xLabel.push("#"+(i+1));
|
monVol.sData.push(monVolValues[i]);
|
}
|
if(this.$refs.monVol) {
|
this.$refs.monVol.setData(monVol);
|
}
|
|
let monTemps = [];
|
for(let i=1; i<321; i++) {
|
monTemps.push(i);
|
}
|
// 单体温度
|
let monTempValues = this.getValues(this.monTemps, activeNum, monNum);
|
let monTemp = {
|
xLabel: [],
|
sData: []
|
};
|
for(let i=0; i<monTempValues.length; i++) {
|
monTemp.xLabel.push("#"+(i+1));
|
monTemp.sData.push(monTempValues[i]);
|
}
|
if(this.$refs.monTemp) {
|
this.$refs.monTemp.setData(monTemp);
|
}
|
},
|
/**
|
* 获取激活的电池包
|
* @returns {number}
|
*/
|
getActiveNum() {
|
let list = this.list;
|
let num = 0;
|
for(let i=0; i<list.length; i++) {
|
if(list[i].active) {
|
num = list[i].num;
|
break;
|
}
|
}
|
return num-1;
|
},
|
getValues(list, activeNum, monNum) {
|
let values = [];
|
for(let i=activeNum*monNum; i<activeNum*monNum+monNum; i++) {
|
values.push(list[i]?list[i]:0);
|
}
|
return values;
|
}
|
},
|
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>
|
