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

<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-10 18:00:44
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-08-20 09:19:06
 * @FilePath: \5G-Loading-Bay-Web\src\views\dashboard\components\DeviceStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<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: "在线设备",
    bgColor: "linear-gradient( 270deg, #2E8702 0%, #52C41A 100%)",
    valueKey: "onlineCount", // 在线数量
  },
  {
    label: "离线设备",
    bgColor: "linear-gradient( 270deg, #C2C0C0 0%, #9A9A9A 100%)",
    valueKey: "outlineCount", // 故障数量
  },
  {
    label: "故障设备",
    bgColor: "linear-gradient( 270deg, #9D0101 0%, #E30C0C 100%)",
    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 flex-col flex-1">
        <div class="flex justify-between" style="margin-bottom: 4px">
          <span>{{ v.label }}</span>
          <span>{{ deviceStatus?.[v.valueKey] || 0 }}</span>
        </div>
        <div class="w-full">
          <!-- // TODO 在进度条刻度处增加图标 -->
          <el-progress
            :show-text="false"
            :stroke-width="4"
           :percentage="Math.floor(
                (deviceStatus?.[v.valueKey] / deviceStatus?.total) * 100
              ) || 0"
            :color="v.bgColor"
          />
        </div>
         <!-- :percentage="
              Math.floor(
                (deviceStatus?.[v.valueKey] / deviceStatus?.total) * 100
              )
            " -->
      </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>