goaf-monitoring-system/src/views/analysis/warningAnalysis/overlimitAlarm/index.vue

<template>
  <div class="monitoring-page">
    <!-- 新增Tabs组件区分实时/历史数据 -->
    <Tabs v-model:activeKey="activeTab" type="card" style="margin-bottom: 16px">
      <TabPane tab="实时监测" key="realtime">
        <div class="board-info">
          <MiniBoard
            :key="index"
            v-for="(item, index) in boardData"
            type="A"
            :label="item.label"
            :value="item.value"
            layout="label-top"
            class="board-item"
          />
        </div>
        <!-- 实时数据表格 -->
        <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
          <template #action="{ record }">
            <div class="action-buttons">
              <!-- 操作按钮 -->
              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
                <span class="action-text">详情</span>
              </button>
            </div>
          </template>
        </BasicTable>
      </TabPane>

      <TabPane tab="历史数据" key="history">
        <!-- 历史数据表格 -->
        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }">
          <template #action="{ record }">
            <div class="action-buttons">
              <button @click="openModal(record, 'history')" class="action-btn">
                <SvgIcon name="details" />
              </button>
            </div>
          </template>
        </BasicTable>
      </TabPane>
    </Tabs>
    <!-- 弹窗组件 -->
    <a-modal
      style="top: 30%; left: 170px"
      v-model:visible="visibleModal"
      :width="450"
      title="实时监测数据"
      @ok="handleOkEdit"
      @cancel="handleCancelEdit"
    >
      <a-table></a-table>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import { Tabs, TabPane } from 'ant-design-vue';
import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
import { SvgIcon } from '/@/components/Icon';
// 引入模拟数据
import { boardData, columns, searchFormSchema, minesData, historicalMinesData } from './overlimitAlarm.data';
import { getMineData, getProvinceAlarm } from './overlimit.api';

// 激活的Tab页签
const activeTab = ref('realtime');
const visibleModal = ref(false);
//煤矿列表数据
const deviceOptions = ref([]);
const mineID = ref('');
const minesData = ref([]);
// 注册实时数据表格
const [registerTable] = useTable({
  dataSource: minesData,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: [
      {
        label: '查询煤矿',
        field: 'mineCode',
        component: 'Select',
        defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
        componentProps: {
          showSearch: true,
          filterOption: (input: string, option: any) => {
            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
          },
          options: deviceOptions,
          onChange: async (e, option) => {
            await fetchAlarmData(e);
          },
        },
        colProps: {
          span: 6,
        },
      },
      {
        field: 'mineName',
        label: '所属执法处',
        component: 'Select',
        componentProps: {
          options: [
            { label: '执法一处', value: '0' },
            { label: '执法二处', value: '1' },
            { label: '执法三处', value: '2' },
          ],
        },
        colProps: { span: 6 },
      },
      {
        field: 'mineName',
        label: '所属区域',
        component: 'Select',
        componentProps: {
          options: [
            { label: '执法一处', value: '0' },
            { label: '执法二处', value: '1' },
            { label: '执法三处', value: '2' },
          ],
        },
        colProps: { span: 6 },
      },
      {
        field: 'mineName',
        label: '煤矿名称',
        component: 'Input',
        colProps: { span: 6 },
      },
      {
        field: 'mineNameAbbr',
        label: '煤矿简称',
        component: 'Input',
        colProps: { span: 6 },
      },
      {
        field: 'productStatus',
        label: '生产状态',
        component: 'Select',
        componentProps: {
          options: [
            { label: '拟建矿井', value: '0' },
            { label: '正常生产矿井', value: '1' },
            { label: '长期停产矿井', value: '2' },
          ],
        },
        colProps: { span: 6 },
      },
      {
        field: 'riskLevel',
        label: '自燃情况',
        component: 'Select',
        componentProps: {
          options: [
            { label: 'Ⅰ类容易自燃', value: '0' },
            { label: 'Ⅱ类自燃', value: '1' },
            { label: 'Ⅲ类不易自燃', value: '2' },
          ],
        },
        colProps: { span: 6 },
      },
    ],
    showAdvancedButton: false,
    schemaGroupNames: ['常规查询'],
  },
  pagination: false,
  striped: false,
  useSearchForm: true,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  actionColumn: {
    width: 120,
    title: '详情',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: undefined,
  },
});

// 注册历史数据表格
const [registerHistoryTable] = useTable({
  dataSource: historicalMinesData,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    showAdvancedButton: false,
  },
  pagination: false,
  striped: false,
  useSearchForm: true,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  actionColumn: {
    width: 60,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: undefined,
  },
});

// 弹窗引用
const realtimeModalRef = ref(null);
const historyModalRef = ref(null);

// 打开弹窗方法（区分实时/历史）
const openModal = (record, type) => {
  if (type === 'realtime') {
    // 可向实时弹窗传递当前记录数据
    realtimeModalRef.value?.showModal(record);
  } else if (type === 'detail') {
    visibleModal.value = true;
  } else {
    // 可向历史弹窗传递当前记录数据
    historyModalRef.value?.showModal(record);
  }
};
const handleOkEdit = () => {
  visibleModal.value = false;
};
const handleCancelEdit = () => {
  visibleModal.value = false;
};
async function fetchAlarmData(id) {
  const params = {
    alarmType: 'unsealAlarm',
    mineId: id,
    pageNo: 1,
    pageSize: 50,
  };
  const result = await getProvinceAlarm(params);
  minesData.value = result.records;
}
const getMineDataList = async () => {
  const params = {
    pageNo: 1,
    pageSize: 50,
  };
  const response = await getMineData(params);
  deviceOptions.value = response.records.map((item, index) => {
    return {
      label: item['mineName'],
      value: item['mineCode'],
    };
  });
};
onMounted(() => {
  // 页面挂载时的逻辑
  getMineDataList();
});
</script>

<style lang="less" scoped>
.monitoring-page {
  padding: 16px;
}
.board-info {
  display: grid;
  grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
  gap: auto;
  justify-content: start;
  flex-wrap: wrap;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px;
  margin: 0 10px;
  gap: 100px;
}
.board-item {
  box-sizing: border-box;
}
.action-btn {
  cursor: pointer;
  border: none;
  padding: 4px;
}
.action-icon {
  width: 16px;
  height: 16px;
}
</style>