<template>
|
<flex-layout direction="row" class="page-real-time">
|
<home-list slot="header" @toggleChange="toggleChange" @leaf-click="leafClick"></home-list>
|
<content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
|
<flex-layout>
|
<div class="content-header" slot="header" :model="inputs">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell text-right w80">电池状态:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.batt_state" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">端电压:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.group_online_vol" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">电池电流:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.group_curr" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">更新日期:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.rec_datetime" size="small" :disabled="true"></el-input>
|
</div>
|
</div>
|
<div class="table-row">
|
<div class="table-cell text-right w80">测试时长:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.batt_test_tlong" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">测试容量:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.batt_test_cap" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">剩余容量:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.batt_syrl_cap" size="small" :disabled="true"></el-input>
|
</div>
|
<div class="table-cell text-right w80">续航时长:</div>
|
<div class="table-cell">
|
<el-input :value="backInputs.sysc" size="small" :disabled="true"></el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<el-tabs v-model="acTabs" type="border-card" class="flex-layout" @tab-click="tabClick">
|
<!-- <el-tab-pane label="电路拓扑图" name="eleLine">
|
电路拓扑图
|
</el-tab-pane>-->
|
<el-tab-pane label="电压" name="vol">
|
<bar-chart ref="vol" id="vol" unit="V"></bar-chart>
|
</el-tab-pane>
|
<el-tab-pane label="内阻" name="res">
|
<bar-chart ref="res" id="res" unit="mΩ"></bar-chart>
|
</el-tab-pane>
|
<el-tab-pane label="温度" name="temp">
|
<bar-chart ref="temp" id="temp" unit="℃"></bar-chart>
|
</el-tab-pane>
|
<el-tab-pane label="电导" name="conduct">
|
<bar-chart ref="conduct" id="conduct"></bar-chart>
|
</el-tab-pane>
|
<el-tab-pane label="均衡电流" name="curr">
|
<bar-chart ref="curr" id="curr"></bar-chart>
|
</el-tab-pane>
|
<el-tab-pane label="数据表格" name="tblData">
|
<el-table border size="small" :data="table.datas" height="100%">
|
<el-table-column
|
v-for="header in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
align="center"
|
></el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</flex-layout>
|
</content-box>
|
</flex-layout>
|
</template>
|
|
<script>
|
import ContentBox from "../../components/ContentBox";
|
import HomeList from "./HomeList";
|
import BarChart from "../../components/chart/BarChart";
|
|
import { realTimeSearch, realTimeGroup } from "../../assets/js/realTime";
|
let vol, res, temp, conduct, curr;
|
export default {
|
components: {
|
ContentBox,
|
HomeList,
|
BarChart
|
},
|
data() {
|
return {
|
/* 电池状态 模块 组端展示 */
|
inputs: {
|
group_vol: 0 /* 端电压-组端电压 */,
|
online_vol: 0 /* 端电压-在线电压 */,
|
group_curr: 0 /* 电池电流 */,
|
batt_test_tlong: "0:00:00" /* 测试时长 */,
|
rec_datetime: 0 /* 更新日期 */,
|
batt_test_cap: 0 /* 测试容量 */,
|
batt_state: 0 /* 电池状态 */
|
},
|
battFullName: "电池组全称",
|
acTabs: "vol",
|
table: {
|
headers: [
|
{
|
prop: "num1",
|
label: "单体编号",
|
width: ""
|
},
|
{
|
prop: "vol1",
|
label: "电压(V)",
|
width: ""
|
},
|
{
|
prop: "res1",
|
label: "内阻(mΩ)",
|
width: ""
|
},
|
{
|
prop: "temp1",
|
label: "温度(℃)",
|
width: ""
|
},
|
{
|
prop: "conduct1",
|
label: "电导",
|
width: ""
|
},
|
{
|
prop: "curr1",
|
label: "均衡电流",
|
width: ""
|
}
|
],
|
datas: [
|
{
|
num1: 0,
|
vol1: 0,
|
res1: 0,
|
temp1: 0,
|
conduct1: 0,
|
curr1: 0
|
}
|
]
|
},
|
batt: {}
|
};
|
},
|
methods: {
|
tabClick(tab) {
|
this.$nextTick(() => {
|
this.$G.chartManage.resize(tab.name);
|
});
|
},
|
toggleChange() {
|
this.resize();
|
},
|
resize() {
|
this.$G.chartManage.resize(this.acTabs);
|
},
|
initChart() {
|
// 电压
|
vol = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V;累加和=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "电压",
|
type: "bar",
|
data: []
|
}
|
]
|
};
|
|
// 内阻
|
res = {
|
title: {
|
show: true,
|
text: "最大值=0mΩ;最小值=mΩ;平均值=0mΩ",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "内阻",
|
type: "bar",
|
data: []
|
}
|
]
|
};
|
|
// 温度
|
temp = {
|
title: {
|
show: true,
|
text: "最大值=0℃;最小值=0℃;平均值=0℃",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "温度",
|
type: "bar",
|
data: []
|
}
|
]
|
};
|
|
// 电导
|
conduct = {
|
title: {
|
show: true,
|
text: "最大值=0;最小值=0;平均值=0",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "电导",
|
type: "bar",
|
data: []
|
}
|
]
|
};
|
// 均衡电流
|
curr = {
|
title: {
|
show: true,
|
text: "最大值=0mA;最小值=0mA;平均值=0mA",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [
|
{
|
name: "均衡电流",
|
type: "bar",
|
data: []
|
}
|
]
|
};
|
// 设置配置项
|
this.setChart();
|
},
|
setChart() {
|
this.$refs.vol.setOption(vol);
|
this.$refs.res.setOption(res);
|
this.$refs.temp.setOption(temp);
|
this.$refs.conduct.setOption(conduct);
|
this.$refs.curr.setOption(curr);
|
},
|
leafClick(data) {
|
this.batt = data;
|
/* console.log('this.batt',this.batt); */
|
|
this.realTimeGroupss();
|
this.realTimeSearch();
|
},
|
/* 实时组端信息 */
|
realTimeGroupss() {
|
var batt = this.batt;
|
realTimeGroup(batt.BattGroupId).then(res => {
|
let rsa = JSON.parse(res.data.result);
|
/* console.log("rsa", rsa); */
|
this.inputs = rsa.data[0];
|
console.log("this.inputs", this.inputs);
|
});
|
},
|
|
/* echars图表 */
|
realTimeSearch() {
|
var batt = this.batt;
|
realTimeSearch({
|
BattGroupId: batt.BattGroupId
|
}).then(res => {
|
let rs = JSON.parse(res.data.result);
|
/* console.log("rs", rs); */
|
|
/* 数据表格 */
|
if (rs.code == 1) {
|
this.vovo = rs.data.map(item => {
|
return {
|
num1: "#" + item.mon_num,
|
vol1: item.mon_vol,
|
res1: item.mon_res,
|
temp1: item.mon_tmp
|
};
|
});
|
}
|
this.table.datas = this.vovo;
|
|
// 电压值
|
let volTempVol = [];
|
if (rs.code == 1) {
|
volTempVol = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_vol];
|
});
|
}
|
vol.series[0].data = volTempVol;
|
|
// 内阻
|
/* let volTempres = [];
|
if (rs.code == 1) {
|
volTempres = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_res];
|
});
|
}
|
res.series[0].data = volTempres; */
|
|
// 温度
|
let volTempte = [];
|
if (rs.code == 1) {
|
volTempte = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_tmp];
|
});
|
}
|
|
temp.series[0].data = volTempte;
|
|
// 更新电压图表
|
this.$refs.vol.setOption(vol);
|
this.$refs.res.setOption(res);
|
this.$refs.temp.setOption(temp);
|
});
|
},
|
// 计算续航时长方法 顶部组端
|
sethoubeiTime(value) {
|
value = Math.abs(value);
|
var str = "";
|
if (value > 0) {
|
var hour = parseInt(value);
|
var min = parseInt((parseFloat(value) - hour) * 60);
|
if (hour < 10) {
|
str = "0";
|
}
|
str += hour + "H";
|
if (min < 10) {
|
str += "0";
|
}
|
str += min + "M";
|
} else {
|
str = "00H00M";
|
}
|
return str;
|
}
|
},
|
computed: {
|
backInputs() {
|
const obj = {
|
0: "未知",
|
1: "浮充",
|
2: "充电",
|
3: "放电",
|
4: "均充"
|
},
|
list = {};
|
list.batt_state = obj[this.inputs.batt_state];
|
list.group_online_vol = `在线：${this.inputs.online_vol.toFixed(
|
2
|
)}V；组端：${this.inputs.group_vol.toFixed(2)}V`;
|
list.group_curr = this.inputs.group_curr.toFixed(2) + "A";
|
list.rec_datetime = this.inputs.rec_datetime;
|
list.batt_test_tlong = this.inputs.batt_test_tlong;
|
|
list.batt_test_cap = this.inputs.batt_test_cap.toFixed(1) + "Ah";
|
if (this.inputs.batt_state === 2) {
|
list.batt_syrl_cap = "---";
|
} else {
|
list.batt_syrl_cap = this.inputs.batt_test_cap.toFixed(1) + "Ah";
|
}
|
if (this.inputs.batt_state === 3) {
|
list.sysc = this.sethoubeiTime(
|
parseFloat(this.inputs.batt_rest_cap) /
|
parseFloat(this.inputs.group_curr)
|
);
|
} else {
|
list.sysc = "------";
|
}
|
return list;
|
}
|
},
|
mounted() {
|
// 初始化图表
|
this.initChart();
|
|
this.$nextTick(() => {
|
this.$G.chartManage.resize(this.acTabs);
|
});
|
// 向父组件通信
|
window.parent.postMessage({kk:1}, "*")
|
|
// 屏幕缩放时触发
|
window.addEventListener("resize", () => {
|
this.resize();
|
});
|
}
|
};
|
</script>
|
|
<style scoped>
|
.page-real-time {
|
color: #ffffff;
|
}
|
.table-cell.text-right {
|
font-size: 14px;
|
}
|
.table-row .table-cell {
|
padding-top: 12px;
|
}
|
.page-content {
|
padding-top: 8px;
|
padding-bottom: 2px;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
</style>
|
