mky-vent-base/src/views/vent/home/configurable/dustControl.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home" ref="dustControlContainer">
    <!-- 顶部标题样式块 -->
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <!-- 渲染所有模块 -->
    <ModuleCommon
      v-for="cfg in cfgs"
      :key="cfg.deviceType + cfg.moduleName"
      :show-style="cfg.showStyle"
      :module-data="cfg.moduleData"
      :module-name="cfg.moduleName"
      :device-type="cfg.deviceType"
      :data="data"
      :visible="true"
    />
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import { testConfigDustControl } from './configurable.data.dustControl';
  import ModuleCommon from './components/ModuleCommon.vue';
  const cfgs = computed(() => configs.value);
  const { configs, fetchConfigs } = useInitConfigs();
  const { mainTitle, data } = useInitPage('除尘装置控制系统');
  let interval: ReturnType<typeof setInterval> | undefined;
  // 新增：获取容器DOM元素
  const dustControlContainer = ref<HTMLDivElement>();
  const handleRadioChange = (event: Event) => {
    // 类型断言，获取事件详情
    const detail = (event as CustomEvent).detail;
    if (detail) {
      console.log('监听到radio切换：', detail.value);
      // 这里处理业务逻辑
    }
  };
  onMounted(() => {
    fetchConfigs('mine_fire').then(() => {
      configs.value = testConfigDustControl;
      // getDisHome({
      //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
      // }).then(updateData);
    });
    interval = setInterval(() => {
      // getDisHome({
      //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
      // }).then(updateData);
    }, 2000);
    // 监听自定义原生事件
    // 在容器上监听事件（事件会从radio组件冒泡到这里）
    if (dustControlContainer.value) {
      dustControlContainer.value.addEventListener('radio-value-change', handleRadioChange);
    }
  });

  onUnmounted(() => {
    clearInterval(interval);
    if (dustControlContainer.value) {
      dustControlContainer.value.removeEventListener('radio-value-change', handleRadioChange);
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';

  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .company-home {
    --image-fire-title: url(/@/assets/images/vent/vent-header1.png);
    --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
    --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
    width: 100%;
    height: 100%;
    color: @white;
    position: relative;
    background: #09172c;

    .top-bg {
      width: 100%;
      height: 73px;
      background: var(--image-fire-title) no-repeat top;
      position: absolute;
      z-index: 1;
      .main-title {
        height: 80px;
        font-family: 'douyuFont';
        font-size: 26px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0 10px 0;
      }
    }
    // 顶部中间样式块
    .center-info-bar {
      position: relative;
      top: 75px;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-bg.png') no-repeat center;

      .center-info-content {
        position: relative;
        top: 15px;
        background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-circle.png') no-repeat center;
        width: 160px;
        height: 160px;
        text-align: center;
        .info-value {
          position: absolute;
          top: 34%;
          left: 50%;
          transform: translateX(-50%);
          font-family: 'douyuFont';
          font-size: 25px;
          color: #2cffdd;
        }
        .info-label {
          width: 100%;
          position: absolute;
          bottom: 25px;
          font-size: 17px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .left-info-content {
        position: relative;
        text-align: right;
        .left-block {
          position: absolute;
          width: 190px;
          height: 55px;
          background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg1.png') no-repeat right;
          padding-right: 52px;
          .info-value {
            height: 28px;
            line-height: 28px;
            font-family: 'douyuFont';
            font-size: 12px;
            color: var(--vent-gas-primary-text);
          }
          .info-label {
            height: 28px;
            line-height: 28px;
          }
        }
        .block1 {
          top: -70px;
          right: -5px;
        }
        .block2 {
          top: -15px;
          left: -280px;
          background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg2.png') no-repeat right;
          .info-value {
            color: #2cffdd;
          }
        }
        .block3 {
          top: 40px;
          right: -5px;
        }
      }
      .right-info-content {
        position: relative;
        .right-block {
          position: absolute;
          width: 190px;
          height: 55px;
          background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg1.png') no-repeat left;
          padding-left: 52px;
          .info-value {
            height: 28px;
            line-height: 28px;
            font-family: 'douyuFont';
            font-size: 12px;
            color: var(--vent-gas-primary-text);
          }
          .info-label {
            height: 28px;
            line-height: 28px;
          }
        }
        .block1 {
          top: -70px;
          left: -5px;
        }
        .block2 {
          top: -15px;
          right: -280px;
          background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg2.png') no-repeat left;
          .info-value {
            color: #2cffdd;
          }
        }
        .block3 {
          top: 40px;
          left: -5px;
        }
      }
    }

    ::v-deep .dane-bd {
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      &.dane-w {
        background-image: var(--image-common-border3);
      }
      .dane-title {
        justify-content: space-around;
        padding: 0 50px 0 0;

        .common-navL {
          font-size: 14px;
          font-weight: bold;
          font-family: 'douyuFont';
        }
      }
      .dane-content {
        border: none;
        background: none;
        padding: 10px 35px;
      }
    }
    ::v-deep .table__content .table__content_list {
      width: 95%;
    }
    ::v-deep .table__content .table__content_label {
      width: 95%;
    }
  }
</style>