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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="scene-box">
    <customHeader :fieldNames="calcFieldNames" :options="options" @change="getSelectRow" :optionValue="optionValue">瓦斯抽采泵监测系统</customHeader>
    <div class="center-container">
      <template v-if="activeKey == 'deviceMonitor'">
        <GasPumpMonitor :deviceId="optionValue" />
      </template>
      <template v-if="activeKey == 'monitorChart'">
        <GasMonitorChart :deviceId="optionValue" />
      </template>
      <div v-else class="history-group">
        <div class="device-button-group" v-if="deviceList.length > 0 && activeKey !== 'faultRecord'">
          <div
            class="device-button"
            :class="{ 'device-active': deviceActive == device.deviceType }"
            v-for="(device, index) in deviceList"
            :key="index"
            @click="deviceChange(index)"
            >{{ device.deviceName }}</div
          >
        </div>
        <div class="history-container">
          <HistoryTable
            v-if="activeKey == 'history' && isRefresh"
            ref="historyTable"
            class="vent-margin-t-20"
            :deviceId="optionValue"
            :device-type="deviceType"
          />
        </div>
      </div>
    </div>
    <BottomMenu :navList="navList" @change="changeActive" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  import HistoryTable from '../../monitorManager/comment/HistoryTable.vue';
  import { navList } from './gasPumpMonitor.data';
  import GasPumpMonitor from './components/monitor.vue';
  import GasMonitorChart from './components/monitorChart.vue';

  const activeKey = ref('deviceMonitor');

  const { options, optionValue, deviceType, isRefresh, deviceActive, deviceList, getSelectRow, getSysDataSource, deviceChange } =
    useSystemSelect('sys_surface_caimei');

  function changeActive(activeValue) {
    activeKey.value = activeValue;
  }

  // 在监测图表模块展示时，返回空以隐藏 CustomHeader 中的选择框
  const calcFieldNames = computed(() => {
    if (activeKey.value === 'monitorChart') {
      return undefined;
    }
    return { label: 'systemname', value: 'id', options: 'children' };
  });

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

<style lang="less" scoped>
  @import '../../comment/less/systemMonitor.less';
  @ventSpace: zxm;
</style>