mky-vent-base/src/views/vent/home/configurable/common-green.vue

<template>
  <div class="company-home">
    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
    <template v-if="!route.query.deviceType">
      <div class="main-container">
        <div class="left-area">
          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
          <ModuleOriginal
            v-for="cfg in configsLeft"
            :key="cfg.deviceType"
            :show-style="cfg.showStyle"
            :module-data="cfg.moduleData"
            :module-name="cfg.moduleName"
            :device-type="cfg.deviceType"
            :data="data"
            :visible="true"
          />
        </div>
        <div class="bottom-area">
          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
          <ModuleOriginal
            v-for="cfg in configsBottom"
            :key="cfg.deviceType"
            :show-style="cfg.showStyle"
            :module-data="cfg.moduleData"
            :module-name="cfg.moduleName"
            :device-type="cfg.deviceType"
            :data="data"
            :visible="true"
          />
        </div>
        <div class="right-area">
          <greenRightTag />
        </div>
      </div>
    </template>

    <div style="width: 1300px; height: 530px; position: absolute; left: 436px; top: 0">
      <VentModal />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import ModuleOriginal from './components/ModuleOriginal-green.vue';
  import greenRightTag from './components/green-right-tag.vue';
  import { list } from './configurable.api';
  import { useRoute, useRouter } from 'vue-router';
  import { useGlobSetting } from '/@/hooks/setting';
  import { testConfigVent, testConfigVentRealtime } from './configurable.data';
  import VentModal from '/@/components/vent/micro/ventModal.vue';

  const { title = '智能通风管控系统' } = useGlobSetting();
  //   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
  const { isOriginal, fetchConfigs } = useInitConfigs();
  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
  const route = useRoute();

  let interval: number | undefined;
  let configs = ref<any[]>([]);

  let configsLeft = computed(() => {
    return configs.value.filter((v) => v.showStyle.position.includes('top'));
  });
  let configsBottom = computed(() => {
    return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
  });

  function refresh() {
    fetchConfigs('vent').then(() => {
      configs.value = testConfigVent;
      updateEnhancedConfigs(configs.value);

      // 测风装置	windrect
      // 自动风窗	window
      // 自动风门	gate
      // 传感器	modelsensor
      // 局部通风机	fanlocal
      // 主通风机	fanmain
      // 密闭	obfurage
      // 安全监控	safetymonitor
      // 光纤测温	fiber
      // 束管监测	bundletube
      // 制氮	nitrogen
      // 制浆	pulping
      // 喷淋	spray
      // 喷粉	dustdev
      // 喷雾设备	atomizing
      // 除尘风机	dedustefan
      // 粉尘传感器	dustsensor
      // 转载点	transferpoint
      // 瓦斯抽采泵	pump
      // 粉尘	dusting
      // 瓦斯监测	gasmonitor
      // 球阀	ballvalve
      // 压风机	forcFan
      // 瓦斯巡检	gaspatrol
      // 防火门	firedoor
      // 隔爆设施	explosionProof
      // 瓦斯管道阀门	gasvalve
      list({
        types: configs.value
          .filter((e) => e.deviceType)
          .map((e) => e.deviceType)
          .join(','),
      }).then(updateData);
    });
  }

  function initInterval() {
    setInterval(() => {
      list({
        types: configs.value
          .filter((e) => e.deviceType)
          .map((e) => e.deviceType)
          .join(','),
      }).then(updateData);
    }, 60000);
  }

  watch(
    () => route.query,
    () => {
      if (route.query.deviceType) {
        // 仅需要展示子应用，模拟 unmounted
        clearInterval(interval);
      } else {
        // 模拟 mounted
        refresh();
        initInterval();
      }
    }
  );

  onMounted(() => {
    refresh();
    initInterval();
  });

  onUnmounted(() => {
    clearInterval(interval);
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';

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

  @{theme-deepblue} {
    .company-home {
      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
    }
  }

  .company-home {
    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');

    width: 100%;
    height: 100%;
    color: @white;
    position: relative;
    background: #181b24;

    .main-container {
      width: 100%;
      height: 100%;
      margin: 0px 15px;
      .left-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 420px;
        height: 100%;
        padding: 15px;
        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        overflow-y: auto;
      }

      .bottom-area {
        position: absolute;
        left: 435px;
        bottom: 0;
        width: calc(100% - 435px);
        height: 290px;
        padding: 15px;
        background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
      }

      .right-area {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 120px;
        height: calc(100% - 305px);
      }
    }

    .module-dropdown {
      padding: 5px;
      background-image: @vent-configurable-dropdown;
      border-bottom: 2px solid @vent-configurable-home-light-border;
      color: @vent-font-color;
      position: absolute;
      top: 60px;
      right: 480px;
    }

    .module-dropdown-original {
      padding: 10px;
      background-image: @vent-configurable-dropdown;
      border-bottom: 2px solid @vent-configurable-home-light-border;
      color: @vent-font-color;
      position: absolute;
      top: 70px;
      right: 460px;
    }

    .module-trigger-button {
      color: @vent-font-color;
      background-image: @vent-configurable-dropdown;
      border: none;
      border-bottom: 2px solid @vent-configurable-home-light-border;
    }

    .realtime-mode {
      background-image: var(--image-monitor-realtime);
    }

    .module-monitor-bar {
      position: absolute;
      top: 100px;
      width: 1000px;
      height: 200px;
      left: calc(50% - 500px);
    }
  }

  :deep(.loading-box) {
    position: unset;
  }
</style>