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

<template>
  <div class="monitoring-page">
    <!-- 新增Tabs组件区分实时/历史数据 -->
    <Tabs v-model:activeKey="activeTab" type="line" 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' }" :style="{ padding: 0 }">
          <template #action="{ record }">
            <div class="action-buttons">
              <!-- 操作按钮 -->
              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
                <span class="action-text">详情</span>
              </button>
              <!-- 已解决按钮 -->
              <button @click="openModal(record, 'resolved')" class="action-btn resolved-btn" title="已解决">
                <span class="action-text">已解决</span>
              </button>
            </div>
          </template>
        </BasicTable>
      </TabPane>

      <TabPane tab="历史数据" key="history">
        <!-- 历史数据表格 -->
        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
          <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>
    <!-- 弹窗组件 -->
    <a-modal
      style="height: 400px"
      v-model:visible="visibleresolveModal"
      :width="600"
      centered
      title="密闭漏风处理情况"
      @ok="handleOkEdit()"
      @cancel="handleCancelEdit"
    >
      <a-textarea style="width: 90%; margin-left: 20px; margin-right: 20px" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
    </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 { columns, searchFormSchema, historicalMinesData } from './pressureDiffAnalysis.data';
  import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './pressureDiff.api';

  // 激活的Tab页签
  const activeTab = ref('realtime');
  const visibleModal = ref(false);
  const visibleresolveModal = ref(false);
  const resolveValue = ref('');
  //煤矿列表数据
  const deviceOptions = ref([]);
  const goafOptions = ref([]);
  const mineCode = ref('');
  const goafId = ref('');
  const boardData = ref([
    {
      label: '存在风险情况数量',
      value: '',
    },
    {
      label: '低风险',
      value: '',
    },
    {
      label: '一般风险',
      value: '',
    },
    {
      label: '较高风险',
      value: '',
    },
    {
      label: '高风险',
      value: '',
    },
  ]);
  const minesData = ref([]);
  // 注册实时数据表格
  const [registerTable] = useTable({
    dataSource: minesData,
    columns,
    api: getProvinceAlarm,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          label: '煤矿名称',
          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
          component: 'MineCascader', // 自定义组件名
          colProps: { span: 6 },
          rules: [],
        },
      ],
      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,
    api: getProvinceAlarmHistory,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          label: '开始时间',
          field: 'startTime',
          component: 'DatePicker',
          componentProps: {
            showTime: true,
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
            placeholder: '请选择开始时间',
          },
          colProps: { span: 6 }, // 占比可根据布局调整
          rules: [{ required: true, message: '请选择开始时间' }],
        },
        {
          label: '结束时间',
          field: 'endTime',
          component: 'DatePicker',
          componentProps: {
            showTime: true,
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
            placeholder: '请选择结束时间',
          },
          colProps: { span: 6 },
          rules: [{ required: true, message: '请选择结束时间' }],
        },
        {
          label: '煤矿名称',
          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
          component: 'MineCascader', // 自定义组件名
          componentProps: {
            onChange: async (e, option) => {
              mineCode.value = e;
              await getGoafDataList(e);
            },
          },
          colProps: { span: 6 },
          rules: [],
        },
        {
          label: '采空区查询',
          field: 'goafId',
          component: 'Select',
          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
          componentProps: {
            showSearch: true,
            filterOption: (input: string, option: any) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            },
            options: goafOptions,
            onChange: async (e, option) => {
              goafId.value = e;
            },
          },
          colProps: {
            span: 6,
          },
        },
        {
          field: 'alarmFiled',
          label: '预警字段',
          component: 'Select',
          componentProps: {
            options: [
              { label: '甲烷', value: 'ch4Val' },
              { label: '氧气', value: 'o2Val' },
              { label: '一氧化碳', value: 'coVal' },
              { label: '二氧化碳', value: 'co2Val' },
              { label: '乙烯', value: 'c2h4Val' },
              { label: '乙炔', value: 'c2h2Val' },
              { label: '压差', value: 'sourcePressure' },
              { label: '温度', value: 'temperature' },
            ],
          },
          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 realtimeModalRef = ref(null);
  const historyModalRef = ref(null);

  // 打开弹窗方法（区分实时/历史）
  const openModal = (record, type) => {
    if (type === 'realtime') {
      // 可向实时弹窗传递当前记录数据
      realtimeModalRef.value?.showModal(record);
    } else if (type === 'resolved') {
      visibleresolveModal.value = true;
      record.isResolved = resolveValue.value || '';
    } else if (type === 'detail') {
      visibleModal.value = true;
    } else {
      // 可向历史弹窗传递当前记录数据
      historyModalRef.value?.showModal(record);
    }
  };
  const handleOkEdit = () => {
    visibleresolveModal.value = false;
  };
  const handleCancelEdit = () => {
    visibleresolveModal.value = false;
  };
  // async function fetchAlarmData(id) {
  //   const params = {
  //     // 填写所需参数
  //     alarmType: 'sourcePressureAlarm',
  //     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'],
      };
    });
  };
  const getGoafDataList = async (mineId) => {
    const params = {
      mineCode: mineId,
    };
    const response = await getGoafData(params);
    goafOptions.value = response.map((item, index) => {
      return {
        label: item['devicePos'],
        value: item['deviceCode'],
      };
    });
  };
  async function getAlarmTotalData() {
    const params = {
      alarmType: 'sourcePressureAlarm',
    };
    const result = await getProvinceAlarmNum(params);
    boardData.value[1].value = result.alarmLevel1;
    boardData.value[2].value = result.alarmLevel2;
    boardData.value[3].value = result.alarmLevel3;
    boardData.value[4].value = result.alarmLevel4;
    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
  }
  onMounted(() => {
    // 页面挂载时的逻辑
    getMineDataList();
    getAlarmTotalData();
  });
</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;
    margin-bottom: 5px;
    gap: 100px;
  }
  .board-item {
    box-sizing: border-box;
  }
  .action-buttons {
    display: flex;
    gap: 8px;
  }
  .action-btn {
    cursor: pointer;
    border: none;
    padding: 4px;
  }
  .action-icon {
    width: 16px;
    height: 16px;
  }
  .action-text {
    font-size: 12px;
    color: #6398fc;
  }
</style>