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

<template>
  <div class="fusion-home">
    <div class="top-bg">
      <NewNav Title="预警监测管控系统" />
    </div>
    <template v-if="!route.query.deviceType">
      <div class="main-container">
        <ModuleDustNew
          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 :echartData="paramData"></CenterAreaWarn>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted, reactive, ref } from 'vue';
  import { useInitConfigs, useInitPage } from '../hooks/useInit';
  import ModuleDustNew from './components/ModuleDustNew.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/NewNavFire.vue';
  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 = 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>