You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
6 months ago
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue";
|
||
|
|
// import deviceStatusOnline from "@/assets/svg/deviceStatus/online.svg?component";
|
||
|
|
// import deviceStatusError from "@/assets/svg/deviceStatus/error.svg?component";
|
||
|
|
// import deviceStatusOutline from "@/assets/svg/deviceStatus/outline.svg?component";
|
||
|
|
defineOptions({
|
||
|
|
name: "DeviceStatus"
|
||
|
|
});
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
deviceStatus: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const deviceStatusData = ref({ ...props.deviceStatus });
|
||
|
|
|
||
|
|
const deviceStatusOptions = ref<Record<string, any>[]>([
|
||
|
|
{
|
||
|
|
label: "在线",
|
||
|
|
color: "#52C41A",
|
||
|
|
bgColor: "#52C41A",
|
||
|
|
valueKey: "onlineCount" // 在线数量
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "离线",
|
||
|
|
color: "#ccc",
|
||
|
|
bgColor: "#999999",
|
||
|
|
valueKey: "outlineCount" // 故障数量
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "故障",
|
||
|
|
color: "#E80D0D",
|
||
|
|
bgColor: "#E80D0D",
|
||
|
|
valueKey: "errorCount" // 故障数量
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ul class="w-full text-sm deviceStatus_box">
|
||
|
|
<li
|
||
|
|
class="flex items-center justify-between w-full"
|
||
|
|
:style="{
|
||
|
|
marginBottom: '16px'
|
||
|
|
}"
|
||
|
|
v-for="(v, k) in deviceStatusOptions"
|
||
|
|
:key="k"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="flex items-center justify-center"
|
||
|
|
:style="{
|
||
|
|
backgroundColor: v.bgColor,
|
||
|
|
width: '40px',
|
||
|
|
height: '40px',
|
||
|
|
borderRadius: '4px',
|
||
|
|
marginRight: '12px'
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<div v-if="v.valueKey === 'onlineCount'" class="deviceStatusOnline"></div>
|
||
|
|
<div v-if="v.valueKey === 'errorCount'" class="deviceStatusError"></div>
|
||
|
|
<div v-if="v.valueKey === 'outlineCount'" class="deviceStatusOutline"></div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col flex-1">
|
||
|
|
<div class="flex justify-between" style="margin-bottom: 4px">
|
||
|
|
<span>{{ v.label }}</span>
|
||
|
|
<span>{{ deviceStatusData[v.valueKey] }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full">
|
||
|
|
<el-progress
|
||
|
|
:show-text="false"
|
||
|
|
:stroke-width="8"
|
||
|
|
:percentage="deviceStatusData[v.valueKey]"
|
||
|
|
:color="v.color"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.deviceStatus_box {
|
||
|
|
li {
|
||
|
|
div {
|
||
|
|
.deviceStatusOnline {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url('@/assets/svg/deviceStatus/online.svg') no-repeat center center;
|
||
|
|
}
|
||
|
|
.deviceStatusError {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url('@/assets/svg/deviceStatus/error.svg') no-repeat center center;
|
||
|
|
}
|
||
|
|
.deviceStatusOutline {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url('@/assets/svg/deviceStatus/outline.svg') no-repeat center center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|