gas-injection/src/views/vent/home/configurable/blue/warnMonitor.vue

<template>
  <div class="company-home">
    <div class="top-bg">
      <NewNav Title="预警监测管控系统" />
    </div>
    <template v-if="!route.query.deviceType">
      <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"
      />
    </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/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/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');
}

.company-home {
  width: 100%;
  height: 100%;
  color: @white;
  position: relative;
  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
  .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%;
    .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>