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

<template>
  <div class="fusion-home">
    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
    <template v-if="!route.query.deviceType">
      <div class="main-container">
        <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
          :visible="true" />
      </div>
    </template>

    <div class="center-area">
      <CenterAreaGreen :paramData="paramData"></CenterAreaGreen>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { useInitConfigs, useInitPage } from '../hooks/useInit';
import ModuleOriginal from './components/ModuleOriginal-green.vue';
import CenterAreaGreen from './components/center-area-green.vue';
import { useRoute } from 'vue-router';
import { useGlobSetting } from '/@/hooks/setting';
import { testConfigFusionGreen } from '../configurable.data';
import { getTotal, getDisasterProportion } from '../configurable.api';
const { title = '智能通风管控系统' } = useGlobSetting();
const { configs, fetchConfigs } = useInitConfigs();
const { data, updateData } = useInitPage(title);
const route = useRoute();
const paramData = reactive<any>({})
// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(flag = false) {
  timer = setTimeout(
    async () => {
      getTotal({}).then(updateData);
      getCenterList()
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    flag ? 0 : 20000
  );
}
async function getCenterList() {
  let res = await getTotal({})
  paramData.fire = res.info.sysInfo.fireS.maxLevel;
  paramData.tf = res.info.sysInfo.ventS.maxLevel;
  paramData.ws = res.info.sysInfo.gasS.maxLevel;
  paramData.sb = res.info.deviceWarnInfo.maxLevel;
  paramData.fc = res.info.sysInfo.dustS.maxLevel;
  paramData.riskLevel = res.info.riskLevel;
  let Levels = Object.assign({}, await getDisasterProportion({}));
  paramData.levels =
    Levels.level > 0 && Levels.level <= 1
      ? 101
      : Levels.level > 1 && Levels.level <= 2
        ? 102
        : Levels.level > 2 && Levels.level <= 3
          ? 103
          : Levels.level > 3 && Levels.level <= 4
            ? 104
            : 0;
  paramData.riskData = [
    { name: '通风', value: Levels.vent },
    { name: '火灾', value: Levels.fire },
    { name: '瓦斯', value: Levels.gas },
    { name: '粉尘', value: Levels.dust },
  ]
}
onMounted(() => {
  fetchConfigs('fusion-warn-green').then(() => {
    configs.value = testConfigFusionGreen;
    // updateEnhancedConfigs(configs.value);
    getMonitor(true);
  });
});

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

@{theme-deepblue} {
  .fusion-home {
    --image-model_left-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-left.png');
    --image-model_bottom-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-bottom.png');
  }
}

.fusion-home {
  --image-model_left-area: url('@/assets/images/home-green/green-bd-left.png');
  --image-model_bottom-area: url('@/assets/images/home-green/green-bd-bottom.png');
  width: 100%;
  height: 100%;
  position: relative;

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

  .center-area {
    position: absolute;
    left: 450px;
    top: 0;
    width: calc(100% - 900px);
    height: calc(100% - 200px);
  }
}

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