mky-vent-base/src/views/vent/gas/gasHome/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="scene-box" style="position: relative">
    <CustomHeader> 瓦斯抽采综合管控系统 </CustomHeader>
    <template v-if="activeKey == 'gasHome'">
      <VentModal />
      <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
      <GasMonitor v-if="dataSource" :dataSource="dataSource" />
    </template>
    <BottomMenu :navList="navList" @change="changeActive" type="router" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
  import CustomHeader from '/@/components/vent/customHeader.vue';
  import CustomBadges from './components/customHeader.vue';
  import GasMonitor from './components/gasMonitor.vue';
  import VentModal from '/@/components/vent/micro/ventModal.vue';
  import { gasSystem } from './gasHome.api';
  import { unmountMicroApps } from '/@/qiankun';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  import { navList } from './gasHome.data';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const activeKey = ref('gasHome');
  const dataSource = ref<any | null>(null);
  function changeActive(activeValue) {
    if (activeValue == 'gasPump') {
      const newPage = router.resolve({ path: '/gas/gas-pump-monitor/home' });
      window.open(newPage.href, '_blank');
    }
    if (activeValue == 'gasStandard') {
      const newPage = router.resolve({ path: '/gasAssessment/home' });
      window.open(newPage.href, '_blank');
    }
    if (activeValue == 'gasPiping') {
      const newPage = router.resolve({
        path: '/micro-vent-3dModal/gas-pipe-net/home',
        query: {
          type: 'sysMonitor',
          deviceType: 'pipingpage',
        },
      });
      window.open(newPage.href, '_blank');
    }
    if (activeValue == 'gasAlarm') {
      const newPage = router.resolve({ path: '/gas/warn/home?p=0' });
      window.open(newPage.href, '_blank');
    }
    if (activeValue == 'drillDesign') {
      const newPage = router.resolve({
        path: '/micro-vent-3dModal/modelchannel/model3D/home',
        query: {
          type: 'model3D',
          deviceType: 'model3D',
          kind: 'drillset',
        },
      });
      window.open(newPage.href, '_blank');
    }
  }

  const headerBadges = ref([
    {
      title: 'T1',
      desc: '累积瓦斯抽采量',
    },
    {
      title: 'T2',
      desc: '平均瓦斯抽采率',
    },
    {
      title: 'T3',
      desc: '抽采达标工作面数量',
    },
    {
      title: 'T4',
      desc: '抽采钻孔类型',
    },
    {
      title: 'T5',
      desc: '回采中工作面数量',
    },
    {
      title: 'T6',
      desc: '抽采钻孔总进尺',
    },
  ]);

  onBeforeMount(async () => {
    dataSource.value = await gasSystem();
  });
  onMounted(() => {});
  onBeforeUnmount(() => {
    unmountMicroApps(['/micro-vent-3dModal']);
  });
</script>

<style lang="less" scoped>
  .gas-container {
    width: 100%;
    position: absolute;
    z-index: 999;
  }
  .modal-box {
    width: 100%;
    height: calc(100%);
    position: absolute;
    top: 0;
    left: 0;
  }
  :deep(.vent-home-header) {
    background-color: var(--vent-base-color) !important;
  }
</style>