<script setup>
|
import IconArrowRight from "@/components/icons/IconArrowRight.vue";
|
import { ref, computed } from "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";
|
const { VOL, GROUPVOL, CURR_YT, CURR_JH } = const_digits;
|
|
const props = defineProps({
|
devIdcode: {
|
type: [String, Number],
|
},
|
onLine: {
|
type: Boolean,
|
default: false,
|
},
|
devType: {
|
type: Number,
|
},
|
info: {
|
type: Object,
|
required: true,
|
},
|
});
|
|
const testStates = computed(() => {
|
if (1 == props.devType) {
|
if (props.info.state.testPause) {
|
return "暂停中";
|
} else if (props.info.state.isTesting) {
|
return ["--", "放电测试", "充电测试"][props.info.state?.testType];
|
} else {
|
return "--";
|
}
|
} else {
|
// let states = ["充电", "放电", "均衡"];
|
// let [res1, res2] = [0, 1].map((v) =>
|
// props.info.state ? states[props.info.state[v].workMode] || "--" : "--"
|
// );
|
let [res1, res2] = [0, 1].map((v) => props.info.state[v].moduleStatus);
|
return `组1:${res1}, 组2: ${res2}`;
|
}
|
});
|
</script>
|
|
<template>
|
<div :class="['dev-card', { pointer: onLine }]">
|
<!-- 编号 -->
|
<div class="header">
|
<div class="dev-id">{{ devIdcode }}</div>
|
</div>
|
<!-- 测试中的需要显示实时数据 -->
|
<div :class="['content', { offLine: !onLine }]">
|
<!-- 左侧图片 -->
|
<div
|
:class="[
|
'img',
|
{
|
ytgOn: 1 == props.devType && onLine,
|
ytgOff: 1 == props.devType && !onLine,
|
jhyOn: 2 == props.devType && onLine,
|
jhyOff: 2 == props.devType && !onLine,
|
},
|
]"
|
>
|
<!-- 右侧数据 -->
|
<div class="info">
|
<template v-if="1 == props.devType">
|
<div class="item">
|
{{ toFixed(info.state.storageVoltage, GROUPVOL) }}V
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
{{ toFixed(info.state.testCurrent, CURR_YT) }}A
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
{{ info.state.testCapacity }}AH
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
{{ formatSeconds(info.state.testDuration) }}
|
<div class="link"></div>
|
</div>
|
</template>
|
<template v-else>
|
<div class="item index">
|
#1
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
{{ info.state[0].moduleStatus }}
|
<div class="link"></div>
|
</div>
|
<div class="item index">
|
#2
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
{{ info.state[1].moduleStatus }}
|
<div class="link"></div>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
<div
|
v-if="!onLine"
|
:class="['state', { onLine: onLine, offLine: !onLine }]"
|
>
|
{{ onLine ? "在线" : "离线" }}
|
</div>
|
<div class="wrap" v-else>
|
<div class="workstate">
|
{{ testStates }}
|
</div>
|
<icon-arrow-right class="icon"></icon-arrow-right>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.dev-card {
|
background: #08819a;
|
border-radius: 6px;
|
width: 230px;
|
height: 230px;
|
display: flex;
|
flex-direction: column;
|
// align-items: center;
|
.header {
|
height: 35px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.content {
|
flex: 1;
|
background: #008080;
|
position: relative;
|
z-index: 0;
|
padding: 12px;
|
// display: flex;
|
// justify-content: center;
|
|
// align-items: center;
|
// &::before {
|
// content: "";
|
// position: absolute;
|
// left: 20px;
|
// top: 20px;
|
// bottom: 20px;
|
// right: 20px;
|
// border: 1px #0ff solid;
|
// }
|
overflow: hidden;
|
&.offLine {
|
.img {
|
margin-right: 0;
|
.info {
|
opacity: 0;
|
}
|
}
|
}
|
.img {
|
height: 100%;
|
margin-right: 104px;
|
// flex: 1;
|
// width: 100%;
|
// height: 100%;
|
border: 1px solid #0ff;
|
transition: margin 0.3s linear;
|
// margin-right: 20px;
|
position: relative;
|
&.ytgOn {
|
background: url("@/assets/images/ytj-online.png") center center / auto
|
88% no-repeat;
|
}
|
&.ytgOff {
|
background: url("@/assets/images/ytj-offline.png") center center / auto
|
88% no-repeat;
|
}
|
&.jhyOn {
|
background: url("@/assets/images/jhy-online.png") center center / auto
|
88% no-repeat;
|
}
|
&.jhyOff {
|
background: url("@/assets/images/jhy-offline.png") center center / auto
|
88% no-repeat;
|
}
|
}
|
.info {
|
position: absolute;
|
left: 100%;
|
height: 100%;
|
transform: translateX(20px);
|
display: flex;
|
flex-direction: column;
|
// align-self: stretch;
|
justify-content: space-evenly;
|
opacity: 1;
|
width: 5.6em;
|
transition: opacity 0.3s 0.2s linear;
|
// width: 84px;
|
.item {
|
border: 1px solid #0ff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
background: #333333;
|
color: #f2ff1a;
|
font-size: 14px;
|
font-weight: bold;
|
&.index {
|
background: #999;
|
}
|
.link {
|
position: absolute;
|
background: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60" stroke-width="6" stroke="%230ff" fill="none"%3e%3cpath d="M0,10h40,q10,0,10,10v20q0,10,-10,10h-40"%3e%3c/path%3e%3cpath d="M50,30h100"%3e%3c/path%3e%3cpath d="M200,10h-40,q-10,0,-10,10v20q0,10,10,10h40"%3e%3c/path%3e%3c/svg%3e')
|
center center / 100% 100% no-repeat;
|
width: 20px;
|
height: 6px;
|
right: 100%;
|
transform: translateX(-1px);
|
}
|
}
|
}
|
// background: #000;
|
}
|
&.offline {
|
background: #ccc;
|
}
|
.footer {
|
padding: 8px 16px;
|
.wrap {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.icon {
|
font-size: 24px;
|
}
|
}
|
}
|
.center {
|
text-align: center;
|
}
|
.state {
|
font-size: 16px;
|
font-weight: bold;
|
&.onLine {
|
color: #0f0;
|
}
|
&.offLine {
|
color: #ccc;
|
}
|
}
|
}
|
</style>
|
