<script setup>
|
import { ref, computed } from "vue";
|
import IconDot from "@/components/icons/IconDot.vue";
|
import formatSeconds from "@/assets/js/tools/formatSeconds";
|
import toFixed from "@/assets/js/tools/toFixed.js";
|
import const_digits from "@/assets/js/const/const_digits";
|
import IconAvg from "@/components/icons/IconAvg.vue";
|
const { VOL, GROUPVOL, CURR_YT, CURR_JH } = const_digits;
|
const props = defineProps({
|
datas: {
|
type: Object,
|
required: true,
|
},
|
rtdata: {
|
type: Array,
|
required: true,
|
},
|
idx: {
|
type: Number,
|
required: true,
|
},
|
});
|
const temp = computed(() => {
|
let tlist = props.rtdata.slice(0, 4).map((v) => v.monTmp);
|
return `(T1: ${tlist[0]} ℃) (T2: ${tlist[1]} ℃) (T3: ${tlist[2]} ℃) (T4: ${tlist[3]} ℃)`;
|
});
|
</script>
|
|
<template>
|
<div class="info">
|
<div :class="['title', { offline: 0 == datas.moduleStatusInt }]">
|
<div class="index">#{{ (datas.batteryStorageIndex || idx) + 1 }}</div>
|
<div class="state">
|
<el-icon class="ico"><icon-dot /></el-icon>
|
{{ datas.moduleStatus }}
|
</div>
|
</div>
|
<div class="box">
|
<div class="label">开始时间</div>
|
<div class="content">{{ datas.startTestTime }}</div>
|
</div>
|
<div class="box">
|
<div class="label">工作模式</div>
|
<div class="content">{{ ["充电", "放电", "均衡"][datas.workMode] }}</div>
|
</div>
|
<div class="box">
|
<div class="label">测试时长</div>
|
<div class="content">{{ formatSeconds(datas.testDuration) }}</div>
|
</div>
|
<div class="box">
|
<div class="label">停止原因</div>
|
<div class="content">
|
{{ !datas.isTesting ? datas.stopTypeReason : "--" }}
|
</div>
|
</div>
|
<div class="box">
|
<div class="label">工作电流</div>
|
<div class="content">{{ datas.testCurrent }}A</div>
|
</div>
|
<div class="box">
|
<div class="label">电池类型</div>
|
<div class="content">
|
{{ ["铁锂", "三元锂", "钛酸锂", "锰酸锂"][datas.batteryType] }}
|
</div>
|
</div>
|
<div class="box">
|
<div class="label">电池串数</div>
|
<div class="content">{{ datas.batteryNumber }}</div>
|
</div>
|
<!-- <div class="box">
|
<div class="label">模组目标电压</div>
|
<div class="content">
|
{{ toFixed(datas.storageVoltageThreshold, GROUPVOL) }}
|
</div>
|
</div> -->
|
<div class="box">
|
<div class="label">单体目标电压</div>
|
<div class="content">
|
{{ toFixed(datas.batteryVoltageThreshold, VOL) }}
|
</div>
|
</div>
|
<div class="box large">
|
<div class="label">温度</div>
|
<div class="content">{{ temp }}</div>
|
</div>
|
|
<div class="item item1">
|
<div class="label">Umax</div>
|
<div class="value">{{ toFixed(datas.maxBatteryVoltage, VOL) }}V</div>
|
</div>
|
<div class="item">
|
<div class="label">Umin</div>
|
<div class="value">{{ toFixed(datas.minBatteryVoltage, VOL) }} V</div>
|
</div>
|
<div class="item">
|
<div class="label">
|
<el-icon><icon-avg class="avg-icon" /></el-icon>U
|
</div>
|
<div class="value">{{ toFixed(datas.avgBatteryVoltage, VOL) }} V</div>
|
</div>
|
<div class="item">
|
<div class="label">电芯压差</div>
|
<div class="value">{{ toFixed(datas.diffBatteryVoltage, VOL) }} V</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.item {
|
display: flex;
|
border-radius: 6px;
|
background: #1e6866;
|
height: 36px;
|
align-items: center;
|
padding: 0 0.4em 0 1em;
|
.label {
|
margin-right: 1em;
|
width: 4.6em;
|
text-align: right;
|
}
|
.value {
|
background: #02a7f0;
|
flex: 1;
|
padding: 2px 10px;
|
border-radius: 6px;
|
}
|
}
|
.info {
|
display: grid;
|
grid-template-rows: repeat(8, 1fr);
|
grid-template-columns: 1fr 1fr;
|
gap: 12px;
|
.title {
|
grid-column: 1 e("/") 3;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
border: 1px solid #0ff;
|
border-radius: 6px;
|
background: #02a7f0;
|
&.offline {
|
background: #999;
|
.state {
|
color: #fff;
|
}
|
}
|
.state {
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
color: #0f0;
|
.ico {
|
margin-right: 0.8em;
|
font-size: 12px;
|
}
|
}
|
}
|
.box {
|
border: 1px solid #0ff;
|
border-radius: 6px;
|
padding: 0 8px;
|
display: flex;
|
align-items: center;
|
&.large {
|
grid-column: 1 e("/") 3;
|
}
|
.label {
|
margin-right: 0.6em;
|
width: 7em;
|
text-align: right;
|
&::after {
|
content: ":";
|
}
|
}
|
.content {
|
color: #0ff;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
