General-AI-Platform-Web-Client/src/views/device/components/DeviceCard.vue

<script setup lang="ts">
import { computed, PropType } from "vue";
import control from "@/assets/svg/device/control.svg?component";
import monitor1 from "@/assets/svg/device/monitor1.svg?component";
import monitor2 from "@/assets/svg/device/monitor2.svg?component";
import { AnimationPic } from "@/components/AnimationCard";
// 控制设备
import controlEquipmentMalfunction from "@/assets/animate/device/controlEquipmentMalfunction.json";
import controlEquipmentOnline from "@/assets/animate/device/controlEquipmentOnline.json";
// 监控设备
import monitoringFaults from "@/assets/animate/device/monitoringFaults.json";
import monitoringOnline from "@/assets/animate/device/monitoringOnline.json";
defineOptions({
  name: "DeviceCard"
});

interface CardProductType {
  isEnabled: boolean;
  state: string;
  description: string;
  deviceSort: string;
}

const props = defineProps({
  device: {
    type: Object as PropType<CardProductType>
  }
});

const cardClass = computed(() => [
  "device-card",
  { "device-card_fault": props.device?.state === "故障" },
  { "device-card_offline": props.device?.state === "离线" }
]);

const stateClass = computed(() => [
  "device-state",
  { "device-state_fault": props.device?.state === "故障" },
  { "device-state_offline": props.device?.state === "离线" }
]);

const isEnabledClass = computed(() => [
  "device-tag",
  { "device-tag_off": !props.device?.isEnabled }
]);

const deviceClassify = device => {
  if (device?.deviceSort === "控制设备") {
    if (device?.state === "在线") {
      return controlEquipmentOnline;
    } else {
      return controlEquipmentMalfunction;
    }
  } else {
    if (device?.state === "在线") {
      return monitoringOnline;
    } else {
      return monitoringFaults;
    }
  }
};
</script>

<template>
  <div :class="cardClass">
    <div class="device-header">
      <div class="mr-2 device--logo">
        <control />
        <monitor1 v-if="false" />
        <monitor2 v-if="false" />
      </div>
      <div class="device-name">{{ device?.deviceSort }}</div>
      <div :class="stateClass">{{ device?.state }}</div>
    </div>
    <div class="device-content">
      <div class="device-info">
        <div>设备代码：<span>DEVICE00002</span></div>
        <div>设备分类：<span>DEVICE00002</span></div>
        <div>
          是否启用：
          <el-tag
            :class="isEnabledClass"
            :color="
              device?.isEnabled
                ? 'rgba(82, 196, 26, 0.1)'
                : 'rgba(232, 13, 13, 0.1)'
            "
            >{{ device?.isEnabled ? "已启用" : "未启用" }}</el-tag
          >
        </div>
        <div>创建时间：<span>DEVICE00002</span></div>
      </div>
      <div class="device-icon">
        <AnimationPic class="device-icon-box" :value="deviceClassify(device)" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.device-card {
  box-sizing: border-box;
  height: 220px;
  // background-color: skyblue;
  border: 1.5px solid #52c41a;
  border-radius: 8px;
  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);

  &_fault {
    border: 1.5px solid #e80d0d;
  }

  &_offline {
    background-color: #f5f5f5;
    border: 1.5px solid #dcdcdc;
  }

  .device-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 64px;
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;

    .device-name {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      color: #000;
      letter-spacing: 0;
    }

    .device-state {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 48px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;
      color: #fff;
      text-align: center;
      background-color: #52c41a;
      border-radius: 0 8px;

      &_fault {
        background-color: #e80d0d;
      }

      &_offline {
        background-color: #dcdcdc;
      }
    }
  }

  .device-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 156px;
    padding: 16px 12px 16px 16px;

    .device-info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 14px;
      color: #666;

      span {
        color: #333;
      }

      .device-tag {
        color: #52c41a;

        &_off {
          color: #e80d0d;
        }
      }
    }

    .device-icon {
      display: flex;
      align-items: flex-end;

      .device-icon-box {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>