mky-vent-base/src/views/vent/monitorManager/alarmMonitor/fire/ventilate.vue

<template>
  <div class="dustPage">
    <div class="top-area">
      <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
        <div class="top-title">{{ item.title }}</div>
        <div class="top-content">
          <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
            <span class="item-label">{{ items.label }}</span>
            <span class="item-value">{{ items.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="center-area">
      <div class="center-t">
        <div class="t-box" v-for="(item, index) in centerAreaListT" :key="index">
          <div class="box-label">{{ item.label }}</div>
        </div>
      </div>
      <div class="center-b">
        <div class="b-box" v-for="(item, index) in centerAreaListB" :key="index">
          <div class="box-label" v-for="(items, ind) in item.content" :key="ind">{{ items.label }}</div>
        </div>
      </div>
    </div>
    <div class="bot-area">
      <echartLine :echartDataGq="echartDataFc" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
  import { topAreaList, centerAreaListT, centerAreaListB, echartDataFc } from '../fire.data';
  import echartLine from './common/echartLine.vue';

  let props = defineProps({
    listData: Object,
  });

  //顶部区域激活选项
  let activeIndex = ref(0);

  //顶部区域选项切换
  function topAreaClick(index) {
    activeIndex.value = index;
  }

  watch(
    () => props.listData,
    (val) => {
      console.log(val, '详情数据');
      
    },
    { immediate: true }
  );
</script>

<style lang="less" scoped>
  .dustPage {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .top-area {
      height: 183px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .top-box {
        position: relative;
        width: 480px;
        height: 160px;
        background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;

        .top-title {
          position: absolute;
          left: 50%;
          top: 6px;
          transform: translate(-50%, 0);
        }

        .top-content {
          position: absolute;
          top: 33px;
          left: 0;
          width: 100%;
          height: calc(100% - 33px);
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          cursor: pointer;

          .content-item {
            position: relative;
            width: 50%;
            height: 50%;
            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;

            .item-label {
              position: absolute;
              left: 52px;
              top: 50%;
              transform: translate(0, -44%);
              font-size: 12px;
            }

            .item-value {
              position: absolute;
              right: 52px;
              top: 50%;
              transform: translate(0, -44%);
              font-size: 12px;
              font-family: 'douyuFont';
              color: #3df6ff;
            }
          }
        }
      }

      .top-box1 {
        position: relative;
        width: 480px;
        height: 183px;
        background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;

        .top-title {
          position: absolute;
          left: 50%;
          top: 6px;
          transform: translate(-50%, 0);
        }

        .top-content {
          position: absolute;
          top: 33px;
          left: 0;
          width: 100%;
          height: calc(100% - 33px);
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          padding-bottom: 20px;
          box-sizing: border-box;
          cursor: pointer;

          .content-item {
            position: relative;
            width: 50%;
            height: 50%;
            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;

            .item-label {
              position: absolute;
              left: 52px;
              top: 50%;
              transform: translate(0, -44%);
              font-size: 12px;
            }

            .item-value {
              position: absolute;
              right: 52px;
              top: 50%;
              transform: translate(0, -44%);
              font-size: 12px;
              font-family: 'douyuFont';
              color: #3df6ff;
            }
          }
        }
      }
    }

    .center-area {
      height: 258px;
      margin-bottom: 20px;
      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
      background-size: 100% 100%;

      .center-t {
        height: 50%;
        padding: 0px 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url('../../../../../assets/images/fire/dz.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;

        .t-box {
          width: 218px;
          height: 97px;
          background: url('../../../../../assets/images/fire/dz1.png') no-repeat;

          .box-label {
            text-align: center;
          }
        }
      }

      .center-b {
        height: 50%;
        padding: 0px 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;

        .b-box {
          width: 218px;
          height: 97px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .box-label {
            width: 169px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            margin-bottom: 5px;
            color: #3df6ff;
            font-family: 'douyuFont';
            background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
          }
        }
      }
    }

    .bot-area {
      height: calc(100% - 471px);
      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
      background-size: 100% 100%;
    }
  }
</style>