<template>
|
<content-box
|
style="margin-left: 4px; margin-right: 4px"
|
:title="battFullName"
|
>
|
<div slot="box-tools" class="box-tools">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="历史数据"
|
placement="bottom"
|
>
|
<i class="iconfont el-icon-jinru" @click="syncPage"></i>
|
</el-tooltip>
|
</div>
|
<div slot="box-tools" class="box-tools" style="right: 40px">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="历史实时数据"
|
placement="bottom"
|
>
|
<i
|
class="el-iconfont el-icon-s-marketing"
|
@click="historyRealTimeDataDialog.show = true"
|
></i>
|
</el-tooltip>
|
</div>
|
<flex-layout :no-bg="true">
|
<div class="content-header" slot="header">
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell text-right w80">环境温度:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="headers.envirTmp"
|
></el-input>
|
</div>
|
<div class="table-cell text-right w80">电池电压:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="backInputs.group_online_vol"
|
></el-input>
|
</div>
|
<div class="table-cell text-right w80">剩余容量:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="headers.restCap"
|
></el-input>
|
</div>
|
<div class="table-cell text-right w80">遥测量数量:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="headers.remoteControlCount"
|
></el-input>
|
</div>
|
</div>
|
<div class="table-row">
|
<div class="table-cell text-right w80">功率温度:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="headers.powerTmp"
|
></el-input>
|
</div>
|
<div class="table-cell text-right w80">电池电流:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="backInputs.groupCurr"
|
></el-input>
|
</div>
|
<div class="table-cell text-right w80">总容量:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="headers.battTotalCap"
|
></el-input>
|
</div>
|
<div class="table-cell text-right w80">循环次数:</div>
|
<div class="table-cell">
|
<el-input
|
size="small"
|
:disabled="true"
|
:value="headers.battCycles"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<flex-layout :no-bg="true">
|
<el-row :gutter="16" class="full-height">
|
<el-col :span="12" class="full-height">
|
<div class="full-height padding0080 box-sizing">
|
<flex-box title="单体电池电压">
|
<bar-chart
|
ref="monVol"
|
id="monVol"
|
unit="V"
|
:show-tools="true"
|
></bar-chart>
|
</flex-box>
|
</div>
|
</el-col>
|
<el-col :span="12" class="full-height">
|
<div class="full-height padding8080 box-sizing">
|
<flex-box title="电芯温度">
|
<bar-chart
|
ref="monTemp"
|
id="monTemp"
|
unit="℃"
|
:show-tools="true"
|
max-color="red"
|
min-color="green"
|
></bar-chart>
|
</flex-box>
|
</div>
|
</el-col>
|
</el-row>
|
<div class="flex-layout-footer" slot="footer" v-if="false">
|
<div class="flex-layout-wrap">
|
<flex-box
|
class="wrap-item"
|
v-for="item in events"
|
:key="item.title"
|
:title="item.title"
|
>
|
<el-table
|
:data="item.data"
|
stripe
|
:show-header="false"
|
size="small"
|
>
|
<el-table-column
|
prop="name"
|
label="名称"
|
align="center"
|
min-width="120"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="value"
|
label="值"
|
align="center"
|
min-width="80"
|
>
|
<template slot-scope="scope">
|
<hdw-light :type="scope.row.value"></hdw-light>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="name1"
|
label="名称"
|
align="center"
|
min-width="120"
|
></el-table-column>
|
<el-table-column
|
prop="value1"
|
label="值"
|
align="center"
|
min-width="80"
|
>
|
<template slot-scope="scope">
|
<hdw-light
|
v-if="scope.row.name1"
|
:type="scope.row.value1"
|
></hdw-light>
|
</template>
|
</el-table-column>
|
</el-table>
|
</flex-box>
|
</div>
|
</div>
|
</flex-layout>
|
</div>
|
</flex-layout>
|
<!-- 实时历史数据 -->
|
<el-dialog
|
:title="historyDataTitle"
|
width="1200px"
|
:visible.sync="historyRealTimeDataDialog.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center no-bg"
|
:modal-append-to-body="false"
|
>
|
<history-lithium-real-time
|
:visible="historyRealTimeDataDialog.show"
|
></history-lithium-real-time>
|
</el-dialog>
|
</content-box>
|
</template>
|
|
<script>
|
import ContentBox from "@/components/ContentBox";
|
import { getBarNum, regEquipType, Timeout } from "@/assets/js/tools";
|
import FlexBox from "@/components/FlexBox";
|
import BarChart from "@/components/chart/BarChart";
|
import lithium from "./js/lithium";
|
import HdwLight from "@/components/HdwLight";
|
import { realTimeGroup, realTimeSearch, lithiumBattery } from "./js/realTime";
|
import HistoryLithiumRealTime from "./components/historyLithiumRealTime";
|
import { getBattGroupInfo } from "../dataMager/js/battGroupMager";
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("RealTime");
|
|
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;
|
|
let monVolOption, monTempOption;
|
export default {
|
name: "lithiumBattery",
|
mixins: [WSMixin],
|
components: {
|
HistoryLithiumRealTime,
|
BarChart,
|
FlexBox,
|
ContentBox,
|
HdwLight,
|
},
|
data() {
|
return {
|
batt: {},
|
tblData: lithium.tblData(),
|
events: [
|
{
|
title: "均衡事件",
|
data: [
|
{
|
name: "均衡模块开启",
|
value: -1,
|
name1: "静态均衡指示",
|
value1: -1,
|
},
|
{
|
name: "静态均衡超时",
|
value: -1,
|
name1: "超温禁止均衡",
|
value1: -1,
|
},
|
{
|
name: "超温禁止均衡",
|
value: -1,
|
name1: false,
|
value1: -1,
|
},
|
],
|
},
|
{
|
title: "电压事件",
|
data: [
|
{
|
name: "单体过压告警",
|
value: -1,
|
name1: "单体过压保护",
|
value1: -1,
|
},
|
{
|
name: "单体欠压告警",
|
value: -1,
|
name1: "单体欠压保护",
|
value1: -1,
|
},
|
{
|
name: "总压过压告警",
|
value: -1,
|
name1: "总压过压保护",
|
value1: -1,
|
},
|
{
|
name: "总压欠压告警",
|
value: -1,
|
name1: "总压欠压保护",
|
value1: -1,
|
},
|
],
|
},
|
],
|
infos: {
|
battCycles: 0,
|
battTotalCap: 771,
|
battTotalvolAlmState: 2048,
|
currEventCode: 256,
|
customAlmCount: 0,
|
dischargeCurrAlmState: 0,
|
envirTmp: 31.9,
|
evirTmpAlmState: 0,
|
fetStateCode: 0,
|
junhengEventCode: 0,
|
junhengStateCode: 0,
|
powerTmp: 31.1,
|
powerTmpAlmState: 0,
|
recordTime: "2021-05-13 00:00:00",
|
remoteControlCount: 59394,
|
restCap: 1.3,
|
sysStateCode: 0,
|
tmpEventCode: 0,
|
volEventCode: 0,
|
},
|
inputs: {
|
groupVol: 0,
|
onlineVol: 0,
|
groupCurr: 0,
|
},
|
historyRealTimeDataDialog: {
|
show: false,
|
},
|
};
|
},
|
watch: {
|
"$route.params.battGroupId"(battGroupId) {
|
this.$nextTick(() => {
|
this.getBattGroupInfo(battGroupId);
|
});
|
},
|
"$store.state.theme.collapse"() {
|
this.$nextTick(() => {
|
this.resize();
|
});
|
},
|
},
|
methods: {
|
initChart() {
|
monVolOption = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "单体电压",
|
type: "bar",
|
data: [],
|
},
|
],
|
};
|
monTempOption = {
|
title: {
|
show: true,
|
text: "最大值=0℃;最小值=0℃;平均值=0℃",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "电芯温度",
|
type: "bar",
|
data: [],
|
},
|
],
|
};
|
|
// 设置配置项
|
this.setChart();
|
},
|
getBattGroupInfo(battGroupId) {
|
let loading = this.$layer.loading();
|
getBattGroupInfo(battGroupId)
|
.then((res) => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
res = res.data;
|
if (res.code) {
|
this.leafClick(res.data[0]);
|
} else {
|
this.$layer.msg("未获取到电池组的信息");
|
}
|
})
|
.catch((error) => {
|
// 关闭等待框
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
leafClick(data) {
|
this.batt = data;
|
this.sendMessage();
|
},
|
onWSOpen() {
|
this.sendMessage();
|
},
|
sendMessage() {
|
let batt = this.batt;
|
// console.log(batt, '=====batt');
|
if (!batt.battGroupId || !this.isWSOpen) {
|
return false;
|
}
|
let params = {
|
battGroupId: batt.battGroupId,
|
devId: batt.fbsdeviceId,
|
powerDeviceId: 0,
|
pageType: "btssreen",
|
};
|
// console.log("====", params, JSON.stringify(params));
|
this.SOCKET.send(JSON.stringify(params));
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
let data = res.data.data;
|
// console.log(data, "=====data");
|
this.realTimeSearch(data.rtdata);
|
this.searchLithiumBattery(data.lithium);
|
this.realTimeGroupss(data.rtstate);
|
},
|
setChart() {
|
// 设置单体电压图表配置项
|
this.$refs.monVol.setOption(monVolOption);
|
// 设置电芯温度图表配置项
|
this.$refs.monTemp.setOption(monTempOption);
|
},
|
setChartData(vols, temps) {
|
// 单体电压
|
let volBarNum = getBarNum(vols);
|
monVolOption.title.text =
|
"最大值=" +
|
volBarNum.max.toHold(VOL) +
|
"V;最小值=" +
|
volBarNum.min.toHold(VOL) +
|
"V;平均值=" +
|
volBarNum.avg.toHold(VOL) +
|
"V";
|
monVolOption.series[0].data = vols;
|
|
// 电芯温度
|
let tempBarNum = getBarNum(temps);
|
monTempOption.title.text =
|
"最大值=" +
|
tempBarNum.max.toHold(TEMP) +
|
"℃;最小值=" +
|
tempBarNum.min.toHold(TEMP) +
|
"℃;平均值=" +
|
tempBarNum.avg.toHold(TEMP) +
|
"℃";
|
monTempOption.series[0].data = temps;
|
|
this.setChart();
|
},
|
resize() {
|
// 设置单体电压图表配置项
|
this.$refs.monVol.resize();
|
// 设置电芯温度图表配置项
|
this.$refs.monTemp.resize();
|
},
|
searchLithiumBattery(res) {
|
if (res) {
|
if (res.code && res.data) {
|
this.infos = res.data2.list[0];
|
}
|
}
|
},
|
realTimeSearch(res) {
|
if (res) {
|
// 电压值
|
let vols = [];
|
let temps = [];
|
if (res.code && res.data) {
|
let data = res.data2;
|
vols = data.map((item) => {
|
return ["#" + item.monNum, item.monVol];
|
});
|
|
temps.push(["电芯温度1", data[0].monTmp]);
|
temps.push(["电芯温度2", data[1].monTmp]);
|
temps.push(["电芯温度3", data[2].monTmp]);
|
temps.push(["电芯温度4", data[3].monTmp]);
|
}
|
|
// 设置图表的数据
|
this.setChartData(vols, temps);
|
}
|
},
|
/* 实时组端信息 */
|
realTimeGroupss(res) {
|
if (res) {
|
if (res.code && res.data) {
|
this.inputs = res.data2;
|
}
|
}
|
},
|
// 向父级发送同步页面的指令
|
syncPage() {
|
let batt = this.batt;
|
let search =
|
"?province=" +
|
batt.stationName1 +
|
"&city=" +
|
batt.stationName2 +
|
"&county=" +
|
batt.stationName5 +
|
"&home=" +
|
batt.stationName3 +
|
"&batt=" +
|
batt.battGroupId;
|
this.$router.push("/dataTest/history" + search);
|
},
|
},
|
computed: {
|
battFullName() {
|
let batt = this.batt;
|
if (batt.stationName && batt.battGroupName) {
|
return batt.stationName + "-" + batt.battGroupName;
|
}
|
return "电池组全称";
|
},
|
headers() {
|
let infos = this.infos;
|
return {
|
envirTmp: infos.envirTmp.toHold(TEMP) + "℃", // 环境温度
|
powerTmp: infos.powerTmp.toHold(TEMP) + "℃", // 功率温度
|
restCap: infos.restCap.toHold(CAP) + "AH", // 剩余容量
|
battTotalCap: infos.battTotalCap.toHold(CAP) + "AH", // 总容量
|
battCycles: infos.battCycles, // 循环次数
|
remoteControlCount: infos.remoteControlCount,
|
};
|
},
|
backInputs() {
|
let batt = this.batt;
|
let list = {
|
group_online_vol: "在线:0.00V；组端:0.00V",
|
groupCurr: "0.00A",
|
};
|
|
if (regEquipType(batt.FBSDeviceId, "BTS9605")) {
|
list.group_online_vol = `组端:${this.inputs.groupVol.toHold(VOL)}V`;
|
} else {
|
list.group_online_vol = `在线:${this.inputs.onlineVol.toHold(
|
VOL
|
)}V；组端:${this.inputs.groupVol.toHold(VOL)}V`;
|
}
|
|
list.groupCurr = this.inputs.groupCurr.toHold(CURR) + "A";
|
|
return list;
|
},
|
historyDataTitle() {
|
return this.batt.stationName + "-历史实时数据";
|
},
|
},
|
mounted() {
|
let battGroupId = this.$route.params.battGroupId;
|
if (battGroupId) {
|
this.getBattGroupInfo(battGroupId);
|
}
|
|
// 初始化图表
|
this.initChart();
|
|
this.$nextTick(() => {
|
this.resize();
|
});
|
|
// 屏幕缩放时触发
|
window.addEventListener("resize", this.resize);
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.resize);
|
// 关闭计时器
|
},
|
};
|
</script>
|
|
<style scoped>
|
.content-header {
|
box-sizing: border-box;
|
padding-right: 8px;
|
}
|
|
.table-cell.text-right {
|
font-size: 14px;
|
}
|
|
.table-cell.text-right .iconfont {
|
margin-right: 4px;
|
}
|
|
.table-row .table-cell {
|
padding-top: 12px;
|
}
|
|
.page-content {
|
position: relative;
|
padding: 8px 8px 2px 8px;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
|
.flex-center {
|
height: 100%;
|
}
|
|
.flex-layout-footer {
|
padding-top: 8px;
|
padding-bottom: 8px;
|
box-sizing: border-box;
|
}
|
|
.flex-layout-wrap {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.wrap-item {
|
margin-right: 16px;
|
}
|
|
.box-tools {
|
line-height: 32px;
|
}
|
|
.box-tools .iconfont,
|
.box-tools .el-iconfont {
|
font-size: 24px;
|
}
|
|
.box-tools .iconfont:hover,
|
.box-tools .el-iconfont:hover {
|
cursor: pointer;
|
color: #cfcfcf;
|
}
|
|
.box-tools .iconfont:active,
|
.box-tools .el-iconfont:active {
|
color: #ff0000;
|
}
|
</style>
|
