75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<template>
|
||
<div class="bl-box-container">
|
||
<div class="box-item pos">{{ tLang('messages', 'RackNum') }}:
|
||
<div>{{ props.data?.label }}</div>
|
||
</div>
|
||
<div class="box-item">{{ tLang('messages', 'DevStatus') }}:
|
||
<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
|
||
</div>
|
||
<div class="box-item">
|
||
<div style="text-wrap: nowrap;">{{ tLang('messages', 'model') }}:</div>
|
||
<div> RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220</div>
|
||
</div>
|
||
<div class="box-img">
|
||
<el-image :src="lqImg" fit="contain"></el-image>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { ref, getCurrentInstance } from 'vue'
|
||
const { proxy } = getCurrentInstance()
|
||
const props = defineProps<{
|
||
data: any,
|
||
}>()
|
||
|
||
let statusObj = {
|
||
0: 'red',
|
||
1: 'yello',
|
||
2: 'green',
|
||
3: 'yello'
|
||
}
|
||
|
||
let lqImg = require('./../images/lq.png');
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bl-box-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.box-item {
|
||
width: 100%;
|
||
height: 80px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
|
||
div {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
top: 108px;
|
||
left: 11px;
|
||
}
|
||
|
||
.box-img {
|
||
width: 100%;
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|