<script setup>
|
import { ref, computed } from "vue";
|
import IconDot from "@/components/icons/IconDot.vue";
|
import formatSeconds from "@/assets/js/tools/formatSeconds";
|
const props = defineProps({
|
datas: {
|
type: Object,
|
required: true,
|
},
|
rtdata: {
|
type: Array,
|
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 + 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.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">{{ datas.storageVoltageThreshold }}</div>
|
</div>
|
<div class="box">
|
<div class="label">单体目标电压</div>
|
<div class="content">{{ datas.batteryVoltageThreshold }}</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">{{ datas.maxBatteryVoltage }}V</div>
|
</div>
|
<div class="item">
|
<div class="label">Umin</div>
|
<div class="value">{{ datas.minBatteryVoltage }} V</div>
|
</div>
|
<div class="item">
|
<div class="label">ΔU</div>
|
<div class="value">{{ datas.avgBatteryVoltage }} V</div>
|
</div>
|
<div class="item">
|
<div class="label">电芯压差</div>
|
<div class="value">{{ datas.diffBatteryVoltage }} 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>
|
