5G-Loading-Bay-Web/src/views/dashboard/components/DeviceStatus.vue

<script setup lang="ts">
import { ref } from "vue";
defineOptions({
  name: "DeviceStatus"
});

const props = defineProps({
  deviceStatus: {
    type: Object,
    default: () => {}
  }
});
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>{{ deviceStatus[v.valueKey] }}</span>
        </div>
        <div class="w-full">
          <el-progress
            :show-text="false"
            :stroke-width="8"
            :percentage="deviceStatus[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>