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

<template>
  <div class="common-green">
    <!-- 如果是有 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} {
  .common-green {
    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
  }
}

.common-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%;

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