mky-vent-base/src/views/vent/home/configurable/warnMonitor.vue

<template>
  <div class="fusion-home">
    <div class="top-bg">
      <NewNav Title="预警监测管控系统" />
    </div>
    <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">
      <CenterAreaWarn></CenterAreaWarn>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import { useInitConfigs, useInitPage } from './hooks/useInit';
import ModuleOriginal from './components/ModuleWarnMonitor.vue';
import CenterAreaWarn from './components/center-area-warn.vue';
import { useRoute } from 'vue-router';
import { useGlobSetting } from '/@/hooks/setting';
import { testConfigWarnMonitor } from './configurable.data';
import NewNav from './components/originalNew/NewNavFire.vue';
import { getTotal } from './configurable.api';
const { title = '智能通风管控系统' } = useGlobSetting();
const { configs, fetchConfigs } = useInitConfigs();
const { data, updateData } = useInitPage(title);
const route = useRoute();

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(flag = false) {
  timer = setTimeout(
    async () => {
      getTotal({}).then(updateData);
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    flag ? 0 : 20000
  );
}
onMounted(() => {
  fetchConfigs('fusion-warn-green').then(() => {
    configs.value = testConfigWarnMonitor;
    // updateEnhancedConfigs(configs.value);
    // Promise.resolve(BDFireMock).then(updateData);
    getMonitor(true);
  });
});

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

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

.fusion-home {
  width: 100%;
  height: 100%;
  position: relative;

  .top-bg {
    width: 100%;
    height: 56px;
    background: url('../../../../assets/images/home-warn/1-1.png') no-repeat center;
    position: absolute;
    z-index: 1;
    .main-title {
      height: 56px;
      color: #fff;
      font-family: 'douyuFont';
      font-size: 20px;
      letter-spacing: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .top-nav {
      position: absolute;
      top: 0;
      width: 880px;
      height: 100%;
      display: flex;
      justify-content: flex-start;
    }
  }
  .main-container {
    width: 100%;
    height: 100%;
    background: url('../../../../assets/images/home-warn/bg.png') no-repeat;
    background-size: 100% 100%;
    .left-area {
      position: absolute;
      left: 0;
      top: 0;
      width: 420px;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .bottom-area {
      position: absolute;
      left: 435px;
      bottom: 0;
      width: calc(100% - 435px);
      height: 290px;
      padding: 15px;
      box-sizing: border-box;
    }

    .right-area {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 420px;
      height: calc(100% - 305px);
      padding: 15px 15px 0px 15px;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }

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

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