surface-monitoring-system/src/views/monitor/surfaceMonitor/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="surface-monitor">
    <!-- 顶部统计卡片（getCurrentStatistics） -->
    <div class="board-info">
      <MiniBoard
        v-for="(item, index) in boardDataRef"
        :key="index"
        type="A"
        :label="item.label"
        :value="item.value"
        layout="label-top"
        class="board-item"
      />
    </div>

    <!-- Tab 切换 -->
    <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
      <TabPane tab="实时监测" key="realtime">
        <BasicTable @register="registerRealtimeTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
          <template #resetBefore>
            <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXlsTime"> 导出 </a-button>
          </template>
          <template #empty>
            <span class="empty-placeholder">-</span>
          </template>
        </BasicTable>
      </TabPane>

      <TabPane tab="历史数据" key="history">
        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
          <template #resetBefore>
            <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
          </template>
        </BasicTable>
      </TabPane>
    </Tabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { Tabs, TabPane } from 'ant-design-vue';
  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { boardData, columns, historyColumns, historySchemas, schemas } from './surfaceMonitor.data';
  import { getMineData } from './surfaceMonitor.api';
  import { getCurrentStatistics } from '/@/api/workingface';
  import { useInitForm } from './hooks/form';

  // 路由参数初始化（迁移自密闭监测）
  const { departId, rawcode } = useInitForm();

  // 激活的Tab页签
  const activeTab = ref('realtime');

  // ====== 顶部统计卡片（getCurrentStatistics）======
  const boardDataRef = ref(boardData.map((item) => ({ ...item })));

  async function loadBoardData(params?: any) {
    try {
      const result = await getCurrentStatistics({ deptId: params?.deptId });
      boardDataRef.value[0].value = result.accessMineNum ?? '-';
      const onlineRate = result.areaNum ? Math.round((result.areaOnlineNum / result.areaNum) * 100) : '-';
      boardDataRef.value[1].value = onlineRate === '-' ? '-' : `${onlineRate}%`;
      boardDataRef.value[2].value = result.exceptionNum ?? '-';
      boardDataRef.value[3].value = result.suspectedNum ?? '-';
    } catch {
      // 使用默认值
    }
  }

  // ====== 实时监测表格（getMineData）======
  const wrappedGetMineData = (params) => {
    return Promise.all([loadBoardData(params), getMineData(params)]).then(([__, res]) => res);
  };

  const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
    tableProps: {
      immediate: false,
      columns,
      api: wrappedGetMineData,
      formConfig: {
        autoSearch: true,
        labelWidth: 120,
        model: { deptId: rawcode },
        schemas: [
          {
            field: 'deptId',
            label: '煤矿名称',
            component: 'MineCascader',
            colProps: { span: 6 },
            required: true,
            componentProps: {
              initFromStore: false,
              rootId: departId,
            },
          },
          ...schemas,
        ],
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      pagination: true,
      striped: true,
      useSearchForm: true,
      bordered: true,
      showIndexColumn: false,
      showActionColumn: false,
    },
    exportConfig: {
      url: '/workingface/mineData/exportRealtime',
      name: '隐蔽工作面判识实时数据',
      params: {},
    },
  });
  const [registerRealtimeTable] = ctxRealtime;

  // ====== 历史数据表格（暂无接口，空态占位）======
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      immediate: false,
      columns: historyColumns,
      // 历史数据接口暂未提供，返回空分页数据占位
      api: async () => ({ records: [], total: 0 }),
      formConfig: {
        autoSearch: true,
        labelWidth: 120,
        schemas: [
          {
            field: 'deptId',
            label: '煤矿名称',
            component: 'MineCascader',
            colProps: { span: 6 },
            required: true,
            componentProps: {
              initFromStore: false,
              rootId: departId,
            },
          },
          ...schemas,
          ...historySchemas,
        ],
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      pagination: true,
      striped: true,
      useSearchForm: true,
      bordered: true,
      showIndexColumn: true,
      showActionColumn: false,
    },
    exportConfig: {
      url: '/workingface/mineData/exportHistory',
      name: '隐蔽工作面判识历史数据',
      params: {},
    },
  });
  const [registerHistoryTable] = tableContext;
</script>

<style lang="less" scoped>
  @import url(../../analysis/common/board.less);

  .surface-monitor {
    height: 100%;
    overflow-y: auto;
  }

  .empty-placeholder {
    display: block;
    text-align: center;
    color: #999;
    padding: 16px 0;
  }
</style>