<script setup>
|
import IconArrowRight from "@/components/icons/IconArrowRight.vue";
|
import { ref, computed } from "vue";
|
|
const props = defineProps({
|
devIdcode: {
|
type: [String, Number],
|
},
|
onLine: {
|
type: Boolean,
|
default: false,
|
},
|
devType: {
|
type: Number,
|
},
|
});
|
</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">
|
49.5V
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
0A
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
33AH
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
00:06:04
|
<div class="link"></div>
|
</div>
|
</template>
|
<template v-else>
|
<div class="item index">
|
#1
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
均衡中
|
<div class="link"></div>
|
</div>
|
<div class="item index">
|
#2
|
<div class="link"></div>
|
</div>
|
<div class="item">
|
均衡暂停
|
<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">充电测试</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>
|
