vent-template/src/views/vent/home/configurable/green/components/dz-card.vue

<template>
  <div :class="props.deviceType == 'fireWarnInfo' ? 'dzCard1' : 'dzCard'">
    <div class="gas-box">
      <div class="gas-item">
        <div class="detail-box">
          <div class="detail-container">
            <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
              <div class="item-box">
                <div class="item-box-label">{{ titleLeft.address }}</div>
                <div class="item-box-val">{{ item.value1 || '-' }}</div>
              </div>
              <div class="item-box">
                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
              </div>
              <div class="item-box">
                <div class="item-box-label">{{ titleLeft.smoke }}</div>
                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gas-item">
        <div class="detail-box">
          <div class="detail-container">
            <div class="detail-item">
              <div class="item-box1">
                <div class="item-box-label">{{ titleRight.temp }}</div>
                <div class="item-box-val1">{{ infoData.tempVal }}</div>
              </div>
              <div class="item-box1">
                <div class="item-box-label">{{ titleRight.smokeing }}</div>
                <div class="item-box-val1">{{ infoData.smokeVal }}</div>
              </div>
              <div class="item-box1">
                <div class="item-box-label">{{ titleRight.fire }}</div>
                <div class="item-box-val1">{{ infoData.fireVal }}</div>
              </div>
              <div class="item-box1">
                <div class="item-box-label">{{ titleRight.comax }}</div>
                <div class="item-box-val1">{{ infoData.coVal }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';

let props = defineProps({
  titleLeft: {
    type: Object,
    default: () => {
      return {};
    },
  },
  titleRight: {
    type: Object,
    default: () => {
      return {};
    },
  },
  paramData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  deviceType: {
    type: String,
    default: '',
  },
});

let infoData = reactive({});

watch(
  () => props.paramData,
  (newV, oldV) => {
    infoData = Object.assign({}, newV);
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .dzCard {
    --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
    --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
  }
}

.dzCard {
  --image-model_gas_item: url('@/assets/images/home-green/900.png');
  --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
  --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
  width: 100%;
  height: 72%;
  position: absolute;
  left: 0;
  top: 86px;
  .gas-box {
    display: flex;
    justify-content: center;
    height: 100%;

    .gas-item {
      position: relative;
      width: 50%;
      height: 100%;
      margin: 0px 5px;

      &:nth-child(1) {
        background: var(--image-model_gas_item) no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(2) {
        background: var(--image-model_gas_item1) no-repeat;
        background-size: 100% 100%;
      }

      .detail-box {
        position: relative;
        height: 100%;
        padding-top: 68px;

        .detail-container {
          height: 100%;
          overflow-y: auto;

          .detail-item {
            width: 100%;
            height: 100%;

            .item-box {
              width: 100%;
              padding: 0px 10px;
              height: 60px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .item-box1 {
              width: 100%;
              padding: 0px 10px;
              height: 42px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .item-box-label {
              flex-shrink: 0;
              width: 60px;
              font-size: 12px;
              text-align: left;
              margin-right: 10px;
            }

            .item-box-val {
              text-align: right;
              color: #b9ffe5;
              font-family: 'douyuFont';
              font-size: 12px;
            }

            .item-box-val1 {
              text-align: right;
              color: #b9f1ff;
              font-family: 'douyuFont';
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
.dzCard1 {
  --image-model_gas_item: url('@/assets/images/home-green/900.png');
  --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
  --image-model_fire_item: url('@/assets/images/home-warn/4-2.png');
  width: 100%;
  height: 72%;
  position: absolute;
  left: 0;

  .gas-box {
    display: flex;
    justify-content: center;
    height: 100%;

    .gas-item {
      position: relative;
      width: 50%;
      height: 100%;
      margin: 0px 5px;
      &:nth-child(1) {
        background: var(--image-model_fire_item) no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(2) {
        background: var(--image-model_fire_item) no-repeat;
        background-size: 100% 100%;
      }
      .detail-box {
        position: relative;
        height: 100%;
        padding-top: 15px;

        .detail-container {
          height: 100%;
          overflow-y: hidden;
          &:hover {
            overflow-y: auto;
          }

          .detail-item {
            width: 100%;
            height: 100%;

            .item-box {
              width: 100%;
              padding: 0px 10px;
              height: 60px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .item-box1 {
              width: 100%;
              padding: 0px 10px;
              height: 42px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .item-box-label {
              flex-shrink: 0;
              width: 60px;
              font-size: 12px;
              text-align: left;
              margin-right: 10px;
            }

            .item-box-val {
              text-align: right;
              color: #c0fbff;
              font-family: 'douyuFont';
              font-size: 12px;
            }

            .item-box-val1 {
              text-align: right;
              color: #53f696;
              font-family: 'douyuFont';
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>