SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/device.vue

<template>
  <a-popover color="rgba(0, 0, 0, 0.8)">
    <template #content>
      <div class="light-tag">
        <div class="light-tag-tit">
          <div>
            <img src="/asset/image//bulbLogo/device2.png" alt="" />
            <span class="tag-text">{{
              device.regionName + ' > ' + device.deviceGroupName
            }}</span></div
          >
          <button class="right-button" :class="getClass(record)">{{ getLabel(record) }}</button>
        </div>
        <div class="light-tag-box">
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title-text">控制模式</span>
            <span class="result">{{ record.autoStatus.label }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title-text">温&nbsp;度</span>
            <span class="result">{{ record.temp + record.tempUnit }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title-text">控制场景</span>
            <span class="result">{{ device.scene.label }}</span>
          </div>
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title-text">风&nbsp;速</span>
            <span class="result">{{ record.windSpeed + record.windSpeedUnit }}</span>
          </div>
        </div>
      </div>
    </template>
    <div class="icon-box" :style="props.device.styleText">
      <!-- 正常=0 -->
      <img
        v-if="record?.runStatus?.value == 0"
        class="icon-item"
        src="/asset/image/bulbLogo/on1.png"
        alt="" />
      <!-- 故障=1 -->
      <img
        v-if="record?.runStatus?.value == 1"
        class="icon-item"
        src="/asset/image/bulbLogo/off1.png"
        alt="" />
      <!-- 维修=2 -->
      <img
        v-if="record?.runStatus?.value == 2"
        class="icon-item"
        src="/asset/image/bulbLogo/repair1.png"
        alt="" />
      <!-- 告警=3 -->
      <img
        v-if="record?.runStatus?.value == 3"
        class="icon-item"
        src="/asset/image/bulbLogo/alarm1.png"
        alt="" />
    </div>
  </a-popover>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  const props = defineProps({
    device: Object,
  });
  // 设备对象
  const device = computed(() => props.device);
  // 设备信息
  const record = computed(() => props.device.record);

  const getClass = (data: any) => {
    let state = data.runStatus.value;
    let isOpen = data.switchStatus.value;
    // 故障
    if (state == 1) {
      return 'button-fault';
    } else if (state == 2) {
      return 'button-repair';
    } else if (state == 3) {
      return 'button-alarm';
    } else if (state == 0 && isOpen == 1) {
      return 'button-on';
    } else if (state == 0 && isOpen == 0) {
      return 'button-off';
    }
  };
  const getLabel = (record: any) => {
    console.log(record);
    let runState = record.runStatus.value;
    let switchState = record.switchStatus.value;
    if (runState == 3) {
      return '告警';
    } else if (runState == 2) {
      return '维修';
    } else if (runState == 1) {
      return '故障';
    } else if (runState == 0 && switchState == 1) {
      return '开启';
    } else if (runState == 0 && switchState == 0) {
      return '关闭';
    }
  };
</script>
<style lang="less" scoped>
  .icon-box {
    width: 35px;
    position: absolute;

    .icon-item {
      width: 35px;
      cursor: pointer;
      transition: all ease 0.1s;
    }

    .icon-item:active {
      transform: scale(1.2);
    }
  }

  // 悬浮窗外部
  .light-tag {
    display: flex;
    flex-direction: column;
    gap: 10px;

    // 悬浮窗标题
    .light-tag-tit {
      display: flex;
      justify-content: space-between;
      height: 30px;
      img {
        width: 22px;
      }
      .tag-text {
        font-size: 16px;
        font-weight: 700;
        color: white;
        padding-left: 10px;
        vertical-align: middle;
      }

      .right-button {
        width: 5em;
        height: 26px;
        background: rgba(57, 215, 187, 0.1);
        border-width: 1px;
        border-style: solid;
        font-size: 12px;
      }
      .button-on {
        color: #0dffa4;
        border-color: #0dffa4;
      }
      .button-off {
        color: #bfcde2;
        border-color: #bfcde2;
      }
      .button-repair {
        color: #ffbc46;
        border-color: #ffbc46;
      }
      .button-alarm {
        color: #f36163;
        border-color: #f36163;
      }
      .button-fault {
        color: #ff7636;
        border-color: #ff7636;
      }
    }
  }

  // 悬浮窗底部4格子
  .light-tag-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;

    .tag-box-item {
      position: relative;
      display: flex;
      // justify-content: space-between;

      img {
        width: 120px;
        vertical-align: middle;
      }

      .title-text {
        position: absolute;
        left: 55px;
        top: 15px;
        color: rgba(64, 255, 252, 1);
      }

      .result {
        line-height: 50px;
        font-size: 14px;
        font-weight: 700;
        color: white;
        text-align: left;
      }
    }
  }
</style>