<script>
|
import HdwLight from "@/components/HdwLight.vue";
|
import { getLabelByValue } from "../../../assets/js/tools";
|
|
export default {
|
name: "IntelDevStateTools",
|
methods: { getLabelByValue },
|
components: { HdwLight },
|
props: {
|
list: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {};
|
},
|
};
|
</script>
|
|
<template>
|
<div class="page-tools">
|
<div class="page-tools-header">设备状态</div>
|
<table class="page-tools-table">
|
<tr>
|
<td></td>
|
<td>DCDC1</td>
|
<td>DCDC2</td>
|
</tr>
|
<tr v-for="(item, key) in list" :key="'key' + key">
|
<td class="item-label">{{ item.label }}</td>
|
<td>
|
<hdw-light
|
v-if="item.type === 'light'"
|
:type="item.value1"
|
></hdw-light>
|
<span v-else>
|
{{ getLabelByValue(item.value1, item.list) }}
|
</span>
|
</td>
|
<td>
|
<hdw-light
|
v-if="item.type === 'light'"
|
:type="item.value2"
|
></hdw-light>
|
<span v-else>
|
{{ getLabelByValue(item.value2, item.list) }}
|
</span>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page-tools {
|
border-radius: 4px;
|
overflow: hidden;
|
border: 1px solid #00fefe;
|
.page-tools-header {
|
color: #003d64;
|
background-color: #00fefe;
|
padding: 4px 16px;
|
font-weight: bold;
|
text-align: center;
|
}
|
}
|
.page-tools-table {
|
user-select: none;
|
width: 100%;
|
font-size: 14px;
|
color: #00fefe;
|
td {
|
text-align: center;
|
padding: 2px 4px;
|
&.item-label {
|
text-align: right;
|
}
|
}
|
}
|
</style>
|
