SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="box-title title">
      <span style="margin-left: 12px">空调相组</span>
    </div>
    <div class="box-bottom">
      <template v-for="(item, index) in dataSource" :key="index">
        <div class="box-bottom-item">
          <div class="box-bottom-item-top">
            <img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
            <div class="box-bottom-item-top-title">
              {{ item.title }}
            </div>
            <div
              style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
              <div class="box-bottom-item-line">
                开关
                <div class="box-bottom-item-line-value">
                  <a-tag
                    style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
                    :style="{
                      border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
                      color: ['#39d7bb', '#f3614d', '#ffa403'][0],
                    }"
                    >开启</a-tag
                  >
                </div>
              </div>
              <div class="box-bottom-item-line">
                电机转速
                <div class="box-bottom-item-line-value">
                  <span style="color: #f59a23">1210转/分钟</span>
                </div>
              </div>
              <div class="box-bottom-item-line">
                换热器热度
                <div class="box-bottom-item-line-value">
                  <span style="color: #00ffd2">8℃</span>
                </div>
              </div>
              <div class="box-bottom-item-line">
                风量
                <div class="box-bottom-item-line-value">
                  <span style="color: #00ffd2">12345m3/h</span>
                </div>
              </div>
              <div class="box-bottom-item-line">
                风速
                <div class="box-bottom-item-line-value">
                  <span style="color: #00ffd2">22m/s</span>
                </div>
              </div>
              <div class="box-bottom-item-line">
                PM2.5
                <div class="box-bottom-item-line-value">
                  <span style="color: #00ffd2">30</span>
                </div>
              </div>
              <div class="box-bottom-item-line">
                二氧化碳
                <div class="box-bottom-item-line-value">
                  <span style="color: #00ffd2">123CO2e</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
  defineProps({
    dataSource: {
      type: Object,
      default: () => {
        return { title: '' };
      },
    },
  });
</script>
<style lang="less">
  .title {
    position: relative;
    padding-left: 9px;
    &::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 40%;
      transform: translateY(-50%);
      height: 12px;
      width: 3px;
      border-radius: 1px;
      background-color: #4388fb;
    }
  }
  .box-title {
    color: white;
    padding: 0px 10px;
    font-size: 14px;
    width: 100%;
    height: 30px;
  }
  .box-bottom {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
    margin-top: 10px;
    overflow-x: hidden;
    .box-bottom-item {
      width: 100%;
      height: 478px;
      background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
      background-size: 100% 99%;
      background-repeat: no-repeat;
      color: white;
      padding: 8px;
      .box-bottom-item-top {
        width: 100%;
        font-size: 18px;
        padding: 6px 12px;
        position: relative;
      }
      .box-bottom-item-top-title {
        display: flex;
        position: absolute;
        left: 62px;
        top: 7px;
      }
      .box-bottom-item-line {
        width: 100%;
        flex: 1;
        background-color: #0d1b32;
        font-size: 14px;
        padding: 6px 24px;
        display: flex;
        align-items: center;
        position: relative;
        .box-bottom-item-line-value {
          display: flex;
          position: absolute;
          right: 24px;
          font-weight: bold;
        }
      }
    }
  }
</style>