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/21962.png" alt="" />
            <span class="tag-text">{{
              device.regionName + ' > ' + device.deviceGroupName
            }}</span></div
          >
          <button class="right-button">{{
            record?.runStatus?.label ? record.runStatus.label : '--'
          }}</button>
        </div>
        <div class="light-tag-box">
          <div class="tag-box-item">
            <img src="/asset/image//bulbLogo/22496.png" alt="" />
            <span class="title">控制模式</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">温度</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">控制场景</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">风速</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);
</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;
      vertical-align: middle;
      height: 30px;

      .tag-text {
        font-size: 16px;
        font-weight: 700;
        color: white;
        padding-left: 10px;
      }

      .right-button {
        width: 5em;
        height: 26px;
        background: rgba(57, 215, 187, 0.1);
        border: 1px solid rgba(57, 215, 187, 1);
        font-size: 12px;
        color: rgba(57, 215, 187, 1);
      }
    }
  }

  // 悬浮窗底部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 {
        position: absolute;
        left: 60px;
        top: 13px;
        color: rgba(64, 255, 252, 1);
      }

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