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 />
      <div class="gas-container">
        <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
        <GasMonitor v-if="dataSource" :dataSource="dataSource" />
      </div>
    </template>
    <template v-if="activeKey == 'gasStandard'">
      <GasAssessment />
    </template>
    <BottomMenu :navList="navList" @change="changeActive" />
  </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 GasAssessment from '../gasAssessment/index.vue';
  import { gasSystem } from './gasHome.api';
  import { unmountMicroApps } from '/@/qiankun';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  import { navList } from './gasHome.data';
  const activeKey = ref('gasHome');
  const dataSource = ref<any | null>(null);
  function changeActive(activeValue) {
    activeKey.value = activeValue;
  }

  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>