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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="scene-box">
    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯抽采综合管控系统 </customHeader>
    <!-- <CustomHeader class="w-1710px ml-100px mt-20px" :badges="headerBadges" /> -->
    <template v-if="activeKey === 'gasHome'">
      <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
      <GasMonitor :device="deviceValue" />
    </template>
    <BottomMenu :navList="navList" @change="changeActive" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import CustomHeader from '/@/components/vent/customHeader.vue';
  import CustomBadges from './components/customHeader.vue';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
  import { navList } from './gasHome.data';
  import GasMonitor from './components/gasMonitor.vue';

  const activeKey = ref('gasHome');
  const { options, optionValue, deviceValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）

  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: '抽采钻孔总进尺',
    },
  ]);

  onMounted(async () => {
    await getSysDataSource();
  });
</script>

<style lang="less" scoped>
  .main-container {
    .left-box {
    }
    .right-box {
    }
  }
</style>