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

<template>
  <div class="company-home">
    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
    <template v-if="!route.query.deviceType">
      <div class="main-container">
        <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"
          :data="data"
          :visible="true"
        />
        <div class="left-area"></div>
        <div class="right-area"></div>
        <div class="bottom-area"></div>
      </div>
    </template>
    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
      <VentModal />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted } from 'vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import ModuleOriginal from './components/ModuleOriginal-green.vue';
  import VentModal from '/@/components/vent/micro/ventModal.vue';
  // import { list } from './configurable.api';
  import { useRoute } from 'vue-router';
  import { useGlobSetting } from '/@/hooks/setting';
  import { BDDustMock } from './mock';
  import { testConfigDustGreen } from './configurable.data';

  const { title = '智能通风管控系统' } = useGlobSetting();
  const { configs, fetchConfigs } = useInitConfigs();
  const { 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') && v.showStyle.position.includes('left'));
  // });
  // let configsBottom = computed(() => {
  //   return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
  // });
  // let configsRight = computed(() => {
  //   return configs.value.filter((v) => v.showStyle.position.includes('right'));
  // });
  // function refresh() {
  //   fetchConfigs('dust-green').then(() => {
  //     console.log('debug r.', configs.value, configsBottom.value, isOriginal)
  //     // configs.value = testConfigDustGreen
  //     // 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(() => {
    fetchConfigs('dust-green').then(() => {
      configs.value = testConfigDustGreen;
      updateEnhancedConfigs(configs.value);
      Promise.resolve(BDDustMock).then(updateData);
      // getHomeData({}).then(updateData);
    });
    // setInterval(() => {
    //   getHomeData({}).then(updateData);
    // }, 60000);
  });

  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: 420px;
        height: calc(100% - 305px);
        padding: 15px 15px 0px 15px;
        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        overflow-y: auto;
      }
    }

    // .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: 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>