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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
      <a class="ant-dropdown-link" @click.prevent>
        全矿井通风检测
        <CaretDownOutlined />
      </a>
      <template #overlay>
        <MonitorCenter />
      </template>
    </a-dropdown> -->
    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->

    <!-- <div class="left-t">
      <div class="tcontent-area">
        <div class="tcontent-l">
          <div>全矿井</div>
          <div>监测区域</div>
        </div>
        <div class="tcontent-c">
          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px"> 低风险</div>
          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
        </div>
        <div class="tcontent-r">火灾风险</div>
      </div>
    </div>
    <div class="right-t">
      <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
        <systemJc />
      </DanelBd>
    </div> -->
    <template v-if="isOriginal">
      <ModuleOriginal
        v-for="cfg in configs"
        :key="cfg.deviceType"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        :visible="true"
      />
    </template>
    <template v-else-if="isCommon">
      <ModuleCommon
        v-for="cfg in configs"
        :key="cfg.deviceType"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        :visible="true"
      />
    </template>
    <template v-else-if="isBD">
      <ModuleBD
        v-for="cfg in configs"
        :key="cfg.deviceType"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        :visible="true"
      />
    </template>
    <template v-else>
      <!-- 下面是正常展示的各新版模块 -->
      <ModuleEnhanced
        v-for="cfg in enhancedConfigs"
        :key="cfg.deviceType"
        :visible="cfg.visible"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        @close="cfg.visible = false"
      />
      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
      <div class="pos-absolute top-70px left-460px">
        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  // import { CaretDownOutlined } from '@ant-design/icons-vue';
  // import MonitorCenter from './components/MonitorCenter.vue';
  import { useInitConfigs } from './hooks/useInit';
  import { Config } from '../../deviceManager/configurationTable/types';
  import ModuleEnhanced from './components/ModuleEnhanced.vue';
  import ModuleOriginal from './components/ModuleOriginal.vue';
  import ModuleCommon from './components/ModuleCommon.vue';
  import ModuleBD from './components/ModuleBD.vue';
  import { testConfigA } from './configurable.data';
  import { useRoute } from 'vue-router';

  interface EnhancedConfig extends Config {
    visible: boolean;
  }

  const mainTitle = ref('智能通风管控系统');

  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];

  const enhancedConfigs = ref<EnhancedConfig[]>([]);

  const hiddenList = computed(() => {
    return enhancedConfigs.value.filter((e) => e.visible === false);
  });
  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();

  onMounted(() => {
    const query = useRoute().query;
    if (query.fire) {
      mainTitle.value = '智能火灾管控系统';
    }
    if (query.gas) {
      mainTitle.value = '智能瓦斯管控系统';
    }
    // configs.value = testConfigB;
    fetchConfigs().then(() => {
      configs.value = testConfigA;
      // configs.value.push(...testConfigA);
      enhancedConfigs.value = configs.value.map((c) => {
        return {
          visible: true,
          ...c,
        };
      });
    });
  });
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .company-home {
    width: 100%;
    height: 100%;
    color: @white;
    position: relative;
    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;

    .top-bg {
      width: 100%;
      height: 56px;
      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
      position: absolute;
      z-index: 1;
      .main-title {
        height: 56px;
        font-family: 'douyuFont';
        font-size: 20px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    // .module-left {
    //   position: absolute;
    //   width: 450px;
    //   height: 280px;
    //   left: 0;
    // }
    // .module-right {
    //   position: absolute;
    //   width: 450px;
    //   height: 280px;
    //   right: 0;
    // }
    // .module-bottom {
    //   position: absolute;
    //   width: 1000px;
    //   height: 280px;
    // }
    .module-dropdown {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: #fff;
      position: absolute;
      top: 70px;
      right: 460px;
    }
    .module-dropdown-original {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: #fff;
      position: absolute;
      top: 70px;
      right: 460px;
    }
    .module-trigger-button {
      color: #fff;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border: none;
      border-bottom: 2px solid #3df6ff;
    }
  }

  .left-t {
    position: absolute;
    height: 115px;
    margin-bottom: 25px;
    width: 450px;
    background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
    background-size: 100% 100%;

    .tcontent-area {
      display: flex;
      position: absolute;
      top: 50%;
      left: 0;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 70px;
      padding: 0 15px;
      transform: translate(0, -40%);

      .tcontent-l {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9da5aa;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 2px;
      }

      .tcontent-c {
        display: flex;
        flex: 3;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .tcontent-r {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9da5aa;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 2px;
      }
    }
  }
  .right-t {
    position: absolute;
    width: 450px;
  }
</style>