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

<template>
  <div class="dust-green">
    <!-- 如果是有 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>
    </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;

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} {
  .dust-green {
    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
  }
}

.dust-green {
  --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%;
  position: relative;

  .main-container {
    width: 100%;
    height: 100%;
  }
}

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