[Feat 0000] 全系页面样式统一、逻辑统一及小型代码重写

src/enums/jeecgEnum.ts

@@ -21,3 +21,13 @@ export enum JDragConfigEnum {
   //拖拽缓存前缀
   DRAG_CACHE_PREFIX = 'drag-cache:',
 }
+
+export enum StatusColorEnum {
+  blue = '#1890ff',
+  green = '#208840',
+  gold = '#faad14',
+  red = '#f5222d',
+  gray = '#8c8c8c',
+  black = '#000000',
+  purple = '#c3b7f3',
+}

src/locales/lang/zh-CN/routes/basic.ts

@@ -2,6 +2,6 @@ export default {
   login: '登录',
   errorLogList: '错误日志列表',
   defaultHomePage: '默认首页',
-  baseHome: '采空区密闭分析',
-  secondaryHome: '采空区密闭监测',
+  baseHome: '采空区密闭一张图',
+  secondaryHome: '采空区密闭监测与分析',
 };

src/views/analysis/common/analysis.ts

@@ -0,0 +1,33 @@
+import { ref } from 'vue';
+import { first } from 'lodash';
+import { getGoafSelectOption } from '../../monitor/sealedMonitor/monitor.api';
+import { useMineDepartmentStore } from '/@/store/modules/mine';
+
+export function useInitForm() {
+  const mineStore = useMineDepartmentStore();
+  // 给历史数据默认填充的矿码
+  const hiscode = first(mineStore.getMineCode.split(','));
+
+  if (hiscode) {
+    // mineStore.setDepartById(code as string);
+    initGoafOptions(hiscode);
+  }
+
+  // 采空区选择器
+  const goafId = ref('');
+  const goafOptions = ref<any[]>([]);
+
+  function initGoafOptions(mineCode) {
+    return getGoafSelectOption({ mineCode }).then(({ options, defaultValue }) => {
+      goafOptions.value = options;
+      goafId.value = defaultValue;
+    });
+  }
+
+  return {
+    goafOptions,
+    goafId,
+    hiscode,
+    initGoafOptions,
+  };
+}

src/views/analysis/common/board.less

@@ -0,0 +1,41 @@
+.board-info {
+  // display: grid;
+  // grid-template-columns: repeat(5, auto); /* 3列：改5则为5列 */
+  // gap: auto;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  background-color: @white;
+  padding: 10px;
+  gap: 100px;
+  // margin: 0 10px;
+  margin-bottom: 5px;
+  --image-board-bg-A-1: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-1.png');
+  --image-board-bg-A-2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-2.png');
+  --image-board-bg-A-3: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-3.png');
+  --image-board-bg-A-4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-4.png');
+  --image-board-bg-A-5: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-5.png');
+  --image-board-bg-B: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-B.png');
+  --image-board-bg-D: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-D.png');
+  --image-board-bg-E: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-E.png');
+}
+.board-item {
+  box-sizing: border-box;
+}
+
+.board-item:nth-child(1) {
+  background-image: var(--image-board-bg-A-2);
+}
+.board-item:nth-child(2) {
+  background-image: var(--image-board-bg-A-1);
+}
+.board-item:nth-child(3) {
+  background-image: var(--image-board-bg-A-4);
+}
+.board-item:nth-child(4) {
+  background-image: var(--image-board-bg-A-5);
+}
+.board-item:nth-child(5) {
+  background-image: var(--image-board-bg-A-3);
+}

src/views/analysis/warningAnalysis/airLeakStatus/index.vue

@@ -4,7 +4,7 @@
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
     <TabPane tab="实时监测" key="realtime">
       <div class="board-info">
-        <div :key="index" v-for="(item, index) in boardData" class="board-item">
+        <div v-for="(item, index) in boardData" :key="index" class="board-item">
           <MiniBoard type="A" :label="item.label" :value="item.value" layout="label-top" />
         </div>
       </div>
@@ -16,7 +16,7 @@
             <span class="action-text">详情</span>
           </button> -->
           <!-- 已解决按钮 -->
-          <button @click="openModal(record, 'resolved')" class="resolved-btn" title="已解决">
+          <button @click="openModal(record, 'resolved')" class="resolved-btn" title="解决">
             <SvgIcon name="details" />
           </button>
         </template>
@@ -26,325 +26,193 @@
     <TabPane tab="历史数据" key="history">
       <!-- 历史数据表格 -->
       <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-        <template #action="{ record }">
+        <!-- <template #action="{ record }">
           <div class="action-buttons">
             <button @click="openModal(record, 'history')" class="action-btn">
               <SvgIcon name="details" />
             </button>
           </div>
+        </template> -->
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
       </BasicTable>
     </TabPane>
   </Tabs>
   <!-- 弹窗组件 -->
-  <a-modal style="top: 30%; left: 170px" v-model:visible="visibleModal" :width="450" title="实时监测数据">
-    <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>
+  <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况">
+    <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </BasicModal>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } 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 {
-  getMineData,
-  getProvinceAlarm,
-  getProvinceAlarmNum,
-  getGoafData,
-  getProvinceAlarmHistory,
-  getEnfMineTreeData,
-  resolveAlarm,
-} from './airLeak.api';
-import formConfig from '/@/components/Form/src/jeecg/components/formCard/formConfig.vue';
-import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
-// 引入模拟数据
-import { columns, historyColumns, searchFormSchema } from './airLeakStatus.data';
-import dayjs from 'dayjs';
+  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 } from './airLeakStatus.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './airLeak.api';
+  import { useInitForm } from '../../common/analysis';
+  import { BasicModal, useModal } from '/@/components/Modal/index';
+  import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
+  import { useIntervalFn } from '@vueuse/core';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-const visibleresolveModal = ref(false);
-const resolveValue = ref('');
-const resolveId = ref('');
-const mineCodeList = ref('');
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const boardData = ref([
-  { label: '存在风险情况数量', value: 0 },
-  { label: '闭内气体涌出', value: 0 },
-  { label: '闭外气体涌出', value: 0 },
-]);
-const minesData = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const alarmFiled = ref('');
-const historyData = ref([]);
-const lawDeptOptions = ref([]);
-// 注册实时数据表格
-const [registerTable, { reload }] = useTable({
-  dataSource: ref([]),
-  title: '密闭漏风状态判定',
-  api: getProvinceAlarm,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 80,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const resolveValue = ref('');
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historyData,
-  columns: historyColumns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择开始时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        defaultValue: dayjs(),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择结束时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        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);
-          },
+  const { goafOptions, goafId, hiscode, initGoafOptions } = useInitForm();
+
+  const boardData = ref([
+    { label: '存在风险情况数量', value: '-' },
+    { label: '闭内气体涌出', value: '-' },
+    { label: '闭外气体涌出', value: '-' },
+  ]);
+
+  // 注册实时数据表格
+  const [registerTable, { reload }] = useTable({
+    title: '密闭漏风状态判定',
+    api: getProvinceAlarm,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        componentProps: {
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
+
+  // 注册历史数据表格
+  const [registerHistoryTable, historyTable] = useTable({
+    columns,
+    // columns: historyColumns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      model: { mineCode: hiscode },
+      labelWidth: 120,
+      schemas: [
+        // {
+        //   label: '开始时间',
+        //   field: 'startTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择开始时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择开始时间' }],
+        // },
+        // {
+        //   label: '结束时间',
+        //   field: 'endTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs(),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择结束时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择结束时间' }],
+        // },
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            initFromStore: false,
+            syncToStore: false,
+            changeOnSelect: false,
+            onChange: (e) => {
+              historyTable.setLoading(true);
+              initGoafOptions(e).finally(() => {
+                historyTable.setLoading(false);
+              });
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        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: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  // actionColumn: {
-  //   width: 60,
-  //   title: '操作',
-  //   dataIndex: 'action',
-  //   slots: { customRender: 'action' },
-  //   fixed: undefined,
-  // },
-});
-
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
-// 定时器
-let timer: IntervalHandle;
-const fetchTableData = async () => {
-  await reload();
-};
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else if (type === 'resolved') {
-    visibleresolveModal.value = true;
-    resolveValue.value = '';
-    // record.isResolved = resolveValue.value || '';
-    resolveId.value = record.id;
-  } else if (type === 'detail') {
-    visibleModal.value = true;
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'leakageAlarm',
-  };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel1;
-  boardData.value[2].value = result.alarmLevel2;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2;
-}
-// async function getAlarmHistory() {
-//   const result = await getProvinceAlarmHistory();
-//   historyData.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'],
-    };
+        ...historicalFormSchema,
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    // actionColumn: {
+    //   width: 120,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
   });
-  mineCodeList.value = deviceOptions.value.map((item) => item.value).join(',');
-  // fetchAlarmData(mineCodeList.value);
-};
-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'],
+
+  // 弹窗引用
+  const [registerModal, { openModal }] = useModal();
+
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'leakageAlarm',
     };
-  });
-};
-async function getEnfMineData() {
-  const res = await getEnfMineTreeData();
-  lawDeptOptions.value = res.map((item) => ({
-    label: item.departName,
-    value: item.id,
-    rawdata: item,
-  }));
-  // deviceOptions.value = res;
-}
-// 解决预警
-async function handleOkEdit() {
-  const params = {
-    id: resolveId.value,
-    content: resolveValue.value,
-  };
-  await resolveAlarm(params);
-  visibleresolveModal.value = false;
-}
-const handleCancelEdit = () => {
-  visibleresolveModal.value = false;
-};
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getEnfMineData();
-  getAlarmTotalData();
-  timer = setInterval(() => {
-    fetchTableData();
-  }, 5000);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel1;
+    boardData.value[2].value = result.alarmLevel2;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2;
   }
-});
+
+  useIntervalFn(() => reload({ silence: true }), 10000);
+
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.board-info {
-  display: flex;
-  padding: 10px;
-  background-color: @white;
-  // margin: 0 10px;
-  margin-bottom: 5px;
-  gap: 10px;
-  box-sizing: border-box;
-}
-.board-item {
-  flex: 1;
-  box-sizing: border-box;
-}
-:deep(.jeecg-basic-table-form-container .ant-form) {
-  border: none !important;
-}
-:where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
-  margin-top: 10px !important;
-}
+  .board-info {
+    display: flex;
+    padding: 10px;
+    background-color: @white;
+    // margin: 0 10px;
+    margin-bottom: 5px;
+    gap: 10px;
+    box-sizing: border-box;
+  }
+  .board-item {
+    flex: 1;
+    box-sizing: border-box;
+  }
+  :deep(.jeecg-basic-table-form-container .ant-form) {
+    border: none !important;
+  }
+  :where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
+    margin-top: 10px !important;
+  }
 </style>

src/views/analysis/warningAnalysis/autoFireAnalysis/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
@@ -5,8 +6,8 @@
       <TabPane tab="实时监测" key="realtime">
         <div class="board-info">
           <MiniBoard
-            :key="index"
             v-for="(item, index) in boardData"
+            :key="index"
             type="A"
             :label="item.label"
             :value="item.value"
@@ -19,7 +20,7 @@
           <template #action="{ record }">
             <div class="action-buttons">
               <!-- 操作按钮 -->
-              <button @click="openModal(record, 'resolved')" class="resolved-btn" title="已解决">
+              <button @click="openModal(record, 'resolved')" class="resolved-btn" title="解决">
                 <SvgIcon name="details" />
               </button>
             </div>
@@ -30,311 +31,195 @@
       <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 #action="{ record }">
+          <div class="action-buttons">
+            <button @click="openModal(record, 'history')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
+          </div>
+        </template> -->
+          <template #form-goaf-select>
+            <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
           </template>
         </BasicTable>
       </TabPane>
     </Tabs>
     <!-- 弹窗组件 -->
-    <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>
+    <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况">
+      <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+    </BasicModal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { Tabs, TabPane } from 'ant-design-vue';
-import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
-// 引入模拟数据
-import { boardData, columns, searchFormSchema, historicalMinesData } from './autoFireAnalysis.data';
-import { SvgIcon } from '/@/components/Icon';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './autoFire.api';
-import dayjs from 'dayjs';
+  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 } from './autoFireAnalysis.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './autoFire.api';
+  import { useInitForm } from '../../common/analysis';
+  import { BasicModal, useModal } from '/@/components/Modal/index';
+  import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
+  import { useIntervalFn } from '@vueuse/core';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const visibleresolveModal = ref(false); //解决弹窗状态
-const resolveValue = ref('');
-const boardData = ref([
-  {
-    label: '存在风险情况数量',
-    value: '',
-  },
-  {
-    label: '低风险',
-    value: '',
-  },
-  {
-    label: '一般风险',
-    value: '',
-  },
-  {
-    label: '较高风险',
-    value: '',
-  },
-  {
-    label: '高风险',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable, { reload }] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 80,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const resolveValue = ref('');
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择开始时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        defaultValue: dayjs(),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择结束时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        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);
-          },
+  const { goafOptions, goafId, hiscode, initGoafOptions } = useInitForm();
+
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '-',
+    },
+    {
+      label: '低风险',
+      value: '-',
+    },
+    {
+      label: '一般风险',
+      value: '-',
+    },
+    {
+      label: '较高风险',
+      value: '-',
+    },
+    {
+      label: '高风险',
+      value: '-',
+    },
+  ]);
+
+  // 注册实时数据表格
+  const [registerTable, { reload }] = useTable({
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        componentProps: {
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  // 注册历史数据表格
+  const [registerHistoryTable, historyTable] = useTable({
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      model: { mineCode: hiscode },
+      labelWidth: 120,
+      schemas: [
+        // {
+        //   label: '开始时间',
+        //   field: 'startTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择开始时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择开始时间' }],
+        // },
+        // {
+        //   label: '结束时间',
+        //   field: 'endTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs(),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择结束时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择结束时间' }],
+        // },
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            initFromStore: false,
+            syncToStore: false,
+            changeOnSelect: false,
+            onChange: (e) => {
+              historyTable.setLoading(true);
+              initGoafOptions(e).finally(() => {
+                historyTable.setLoading(false);
+              });
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        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: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  // actionColumn: {
-  //   width: 60,
-  //   title: '操作',
-  //   dataIndex: 'action',
-  //   slots: { customRender: 'action' },
-  //   fixed: undefined,
-  // },
-});
-
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
-// 定时器
-let timer: IntervalHandle;
-const fetchTableData = async () => {
-  await reload();
-};
-// 打开弹窗方法（区分实时/历史）
-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: 'fireAlarm',
-    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'],
-    };
+        ...historicalFormSchema,
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    // actionColumn: {
+    //   width: 120,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
   });
-};
-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'],
+
+  // 弹窗引用
+  const [registerModal, { openModal }] = useModal();
+
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'fireAlarm',
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'fireAlarm',
-  };
-  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();
-  timer = setInterval(() => {
-    fetchTableData();
-  }, 5000);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
+    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;
   }
-});
+
+  useIntervalFn(() => reload({ silence: true }), 10000);
+
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.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: @white;
-  padding: 10px;
-  gap: 100px;
-  // margin: 0 10px;
-  margin-bottom: 5px;
-}
-.board-item {
-  box-sizing: border-box;
-}
+  @import url(../../common/board.less);
 </style>

src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="connectAnalysis">
     <div class="filter-area">
@@ -6,8 +7,13 @@
           <div class="filter-section param-section">
             <span class="filter-label">煤矿名称：</span>
             <div class="param-selector">
-              <MineCascader v-model:value="innerValue" style="width: 300px" :sync-to-store="false"
-                :init-from-store="false" @change="changeCascader"></MineCascader>
+              <MineCascader
+                v-model:value="innerValue"
+                style="width: 300px"
+                :sync-to-store="false"
+                :init-from-store="false"
+                @change="changeCascader"
+              ></MineCascader>
             </div>
           </div>
         </Col>
@@ -16,16 +22,21 @@
           <div class="filter-section param-section">
             <span class="filter-label">采空区选择：</span>
             <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择采空区">
-              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }}
-              </SelectOption>
+              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }} </SelectOption>
             </Select>
           </div>
         </Col>
         <Col :span="6">
           <div class="filter-section param-section">
             <span class="filter-label">时间选择：</span>
-            <RangePicker v-model:value="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" @change="changeTime" />
+            <RangePicker
+              v-model:value="dateRange"
+              format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              style="width: 300px"
+              :show-time="{ format: 'HH:mm:ss' }"
+              @change="changeTime"
+            />
           </div>
         </Col>
         <Col :span="6">
@@ -51,164 +62,159 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watchEffect, reactive, } from 'vue';
-import dayjs from 'dayjs';
-import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } from 'ant-design-vue';
-import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
-import CheckboxNav from './components/checkbox-nav.vue'
-import echartLengend from './components/echart-lengend.vue'
-import echartContent from './components/echart-content.vue'
-import { getGoafHistory, getGoafList } from './connectAnalysis.api';
-import { useRouter } from 'vue-router';
-import { useMineDepartmentStore } from '/@/store/modules/mine';
-
-// 组件注册
-const RangePicker: any = DatePicker.RangePicker;
-const { currentRoute } = useRouter();
-// 筛选相关响应式数据
-const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
-const goafId = ref(''); //采空区id
-const goafOption = ref<any[]>([]); //采空区列表
-const mineStore = useMineDepartmentStore();
-const innerValue = ref('');
-const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'])//当前选中要进行显示的选项
-const echartData = reactive({
-  xData: [] as any,
-  yData: [] as any
-})
-
-
-
-//煤矿选项切换
-function changeCascader(val) {
-  innerValue.value = val;
-  getGoafListData();
-}
-//时间选择选项切换
-function changeTime(val) {
-  dateRange.value[0] = val[0];
-  dateRange.value[1] = val[1];
-}
-//图表选项标签切换
-function checkBoxChange(val) {
-  checkList.value = val.checkedList
-  generateChart()
-}
-
-
-
-// 生成折线图核心逻辑
-async function generateChart() {
-  echartData.yData.length = 0
-  let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
-  let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
-  let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
-  let data = res.records || []
-
-  if (data.length) {
-    echartData.xData = data.map(e => e.createTime)
-    if (checkList.value.length) {
-      checkList.value.forEach(el => {
-        echartData.yData.push({
-          label: el,
-          value: data
-        })
-      })
-    }
+  import { ref, onMounted, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { Select, SelectOption, Row, Col, DatePicker, Button } from 'ant-design-vue';
+  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
+  import CheckboxNav from './components/checkbox-nav.vue';
+  import echartLengend from './components/echart-lengend.vue';
+  import echartContent from './components/echart-content.vue';
+  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
+  import { useRouter } from 'vue-router';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
+
+  // 组件注册
+  const RangePicker: any = DatePicker.RangePicker;
+  const { currentRoute } = useRouter();
+  // 筛选相关响应式数据
+  const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
+  const goafId = ref(''); //采空区id
+  const goafOption = ref<any[]>([]); //采空区列表
+  const mineStore = useMineDepartmentStore();
+  const innerValue = ref('');
+  const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); //当前选中要进行显示的选项
+  const echartData = reactive({
+    xData: [] as any,
+    yData: [] as any,
+  });
+
+  //煤矿选项切换
+  function changeCascader(val) {
+    innerValue.value = val;
+    getGoafListData();
   }
-}
-
-//获取采空区列表
-async function getGoafListData() {
-  let res = await getGoafList({ mineCode: innerValue.value });
-  if (res.length) {
-    goafOption.value = res.map((el) => {
-      return {
-        label: el.devicePos,
-        value: el.id,
-      };
-    });
-    goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
+  //时间选择选项切换
+  function changeTime(val) {
+    dateRange.value[0] = val[0];
+    dateRange.value[1] = val[1];
   }
-}
-
-onMounted(async () => {
-  const mineCode = currentRoute.value['query']['mineCode'] //传递过来的矿ID
-  if (mineCode) {
-    innerValue.value = mineCode as any
-  } else {
-    innerValue.value = mineStore.getMineCode.split(',')[0]
-    await getGoafListData()
-    await generateChart()
+  //图表选项标签切换
+  function checkBoxChange(val) {
+    checkList.value = val.checkedList;
+    generateChart();
   }
-})
-</script>
 
-<style lang="less" scoped>
-.connectAnalysis {
-  width: calc(100% - 10px);
-  height: calc(100% - 20px);
-  margin: 10px 0px 10px 10px;
-  padding: 10px;
-  box-sizing: border-box;
-  border: 1px solid #c8d0dd;
-  border-radius: 5px;
-
-  .filter-area {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-bottom: 15px;
-    padding: 20px;
-    border: 1px solid #f0f0f0;
-    border-radius: 10px;
-    background: @card-bg-color;
-    align-items: center;
+  // 生成折线图核心逻辑
+  async function generateChart() {
+    echartData.yData.length = 0;
+    let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+    let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+    let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
+    let data = res.records || [];
+
+    if (data.length) {
+      echartData.xData = data.map((e) => e.createTime);
+      if (checkList.value.length) {
+        checkList.value.forEach((el) => {
+          echartData.yData.push({
+            label: el,
+            value: data,
+          });
+        });
+      }
+    }
   }
 
-  .filter-section {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  //获取采空区列表
+  async function getGoafListData() {
+    let res = await getGoafList({ mineCode: innerValue.value });
+    if (res.length) {
+      goafOption.value = res.map((el) => {
+        return {
+          label: el.devicePos,
+          value: el.id,
+        };
+      });
+      goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
+    }
   }
 
-  .filter-label {
-    color: #666;
-    min-width: 80px;
-    flex-shrink: 0;
-    font-weight: 500;
-  }
+  onMounted(async () => {
+    const mineCode = currentRoute.value['query']['mineCode']; //传递过来的矿ID
+    if (mineCode) {
+      innerValue.value = mineCode as any;
+    } else {
+      innerValue.value = mineStore.getMineCode.split(',')[0];
+      await getGoafListData();
+      await generateChart();
+    }
+  });
+</script>
 
-  .param-section {
-    flex: 1;
-    // min-width: 300px;
-  }
+<style lang="less" scoped>
+  .connectAnalysis {
+    width: calc(100% - 10px);
+    height: calc(100% - 20px);
+    margin: 10px 0px 10px 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 1px solid #c8d0dd;
+    border-radius: 5px;
+
+    .filter-area {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-bottom: 15px;
+      padding: 20px;
+      border: 1px solid #f0f0f0;
+      border-radius: 10px;
+      background: @card-bg-color;
+      align-items: center;
+    }
 
-  .param-selector {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-  }
+    .filter-section {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
 
-  .echart-box {
-    width: 100%;
-    height: calc(100% - 95px);
-  }
+    .filter-label {
+      color: #666;
+      min-width: 80px;
+      flex-shrink: 0;
+      font-weight: 500;
+    }
 
-  .check-title {
-    height: 40px;
-    line-height: 40px;
-    background-color: #d0e1fa;
-    border-radius: 3px;
-    padding: 0px 20px;
-    box-sizing: border-box;
-  }
+    .param-section {
+      flex: 1;
+      // min-width: 300px;
+    }
 
-  .echart-content {
-    width: 100%;
-    height: calc(100% - 80px);
-  }
+    .param-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+    }
 
-}
+    .echart-box {
+      width: 100%;
+      height: calc(100% - 95px);
+    }
+
+    .check-title {
+      height: 40px;
+      line-height: 40px;
+      background-color: #d0e1fa;
+      border-radius: 3px;
+      padding: 0px 20px;
+      box-sizing: border-box;
+    }
+
+    .echart-content {
+      width: 100%;
+      height: calc(100% - 80px);
+    }
+  }
 </style>

src/views/analysis/warningAnalysis/fireAreaJudgeAnalysis/index.vue

@@ -5,8 +5,8 @@
     <TabPane tab="实时监测" key="realtime">
       <div class="board-info">
         <MiniBoard
-          :key="index"
           v-for="(item, index) in boardData"
+          :key="index"
           type="A"
           :label="item.label"
           :value="item.value"
@@ -19,7 +19,7 @@
         <template #action="{ record }">
           <div class="action-buttons">
             <!-- 已解决按钮 -->
-            <button @click="openModal(record, 'resolved')" class="resolved-btn" title="已解决">
+            <button @click="openModal(record, 'resolved')" class="resolved-btn" title="解决">
               <SvgIcon name="details" />
             </button>
           </div>
@@ -30,299 +30,184 @@
     <TabPane tab="历史数据" key="history">
       <!-- 历史数据表格 -->
       <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-        <template #action="{ record }">
+        <!-- <template #action="{ record }">
           <div class="action-buttons">
             <button @click="openModal(record, 'history')" class="action-btn">
               <SvgIcon name="details" />
             </button>
           </div>
+        </template> -->
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
       </BasicTable>
     </TabPane>
   </Tabs>
   <!-- 弹窗组件 -->
-  <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>
+  <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况">
+    <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </BasicModal>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted } 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, historicalMinesData } from './fireAreaJudgeAnalysis.data';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './fireAreaJudge.api';
-import dayjs from 'dayjs';
+  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 } from './fireAreaJudgeAnalysis.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './fireAreaJudge.api';
+  import { useInitForm } from '../../common/analysis';
+  import { BasicModal, useModal } from '/@/components/Modal/index';
+  import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
+  import { useIntervalFn } from '@vueuse/core';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const visibleresolveModal = ref(false);
-const resolveValue = ref('');
-const boardData = ref([
-  {
-    label: '采空区数量',
-    value: '',
-  },
-  {
-    label: '可以启封',
-    value: '',
-  },
-  {
-    label: '不可启封',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable, { reload }] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 80,
-    title: '详情',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const resolveValue = ref('');
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择开始时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        defaultValue: dayjs(),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择结束时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        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);
-          },
+  const { goafOptions, goafId, hiscode, initGoafOptions } = useInitForm();
+
+  const boardData = ref([
+    {
+      label: '采空区数量',
+      value: '-',
+    },
+    {
+      label: '可以启封',
+      value: '-',
+    },
+    {
+      label: '不可启封',
+      value: '-',
+    },
+  ]);
+
+  // 注册实时数据表格
+  const [registerTable, { reload }] = useTable({
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        componentProps: {
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '详情',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  // 注册历史数据表格
+  const [registerHistoryTable, historyTable] = useTable({
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      model: { mineCode: hiscode },
+      labelWidth: 120,
+      schemas: [
+        // {
+        //   label: '开始时间',
+        //   field: 'startTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择开始时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择开始时间' }],
+        // },
+        // {
+        //   label: '结束时间',
+        //   field: 'endTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs(),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择结束时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择结束时间' }],
+        // },
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            initFromStore: false,
+            syncToStore: false,
+            changeOnSelect: false,
+            onChange: (e) => {
+              historyTable.setLoading(true);
+              initGoafOptions(e).finally(() => {
+                historyTable.setLoading(false);
+              });
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        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: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  // actionColumn: {
-  //   width: 60,
-  //   title: '操作',
-  //   dataIndex: 'action',
-  //   slots: { customRender: 'action' },
-  //   fixed: undefined,
-  // },
-});
-
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
-// 定时器
-let timer: IntervalHandle;
-const fetchTableData = async () => {
-  await reload();
-};
-// 打开弹窗方法（区分实时/历史）
-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: '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'],
-    };
+        ...historicalFormSchema,
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    // actionColumn: {
+    //   width: 120,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
   });
-};
-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'],
+
+  // 弹窗引用
+  const [registerModal, { openModal }] = useModal();
+
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'unsealAlarm',
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'unsealAlarm',
-  };
-  const result = await getProvinceAlarmNum(params);
-  boardData.value[1].value = result.alarmLevel5;
-  boardData.value[2].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
-  boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4 + result.alarmLevel5;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getAlarmTotalData();
-  timer = setInterval(() => {
-    fetchTableData();
-  }, 5000);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
+    const result = await getProvinceAlarmNum(params);
+    boardData.value[1].value = result.alarmLevel5;
+    boardData.value[2].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
+    boardData.value[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4 + result.alarmLevel5;
   }
-});
+
+  useIntervalFn(() => reload({ silence: true }), 10000);
+
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.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: @white;
-  padding: 10px;
-  gap: 100px;
-  // margin: 0 10px;
-  margin-bottom: 5px;
-}
-.board-item {
-  box-sizing: border-box;
-}
+  @import url(../../common/board.less);
 </style>

src/views/analysis/warningAnalysis/overlimitAlarm/index.vue

@@ -5,8 +5,8 @@
     <TabPane tab="实时监测" key="realtime">
       <div class="board-info">
         <MiniBoard
-          :key="index"
           v-for="(item, index) in boardData"
+          :key="index"
           type="A"
           :label="item.label"
           :value="item.value"
@@ -19,7 +19,7 @@
         <template #action="{ record }">
           <div class="action-buttons">
             <!-- 操作按钮 -->
-            <button @click="openModal(record, 'resolved')" class="resolved-btn" title="已解决">
+            <button @click="openModal(record, 'resolved')" class="resolved-btn" title="解决">
               <SvgIcon name="details" />
             </button>
           </div>
@@ -30,309 +30,194 @@
     <TabPane tab="历史数据" key="history">
       <!-- 历史数据表格 -->
       <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-        <template #action="{ record }">
+        <!-- <template #action="{ record }">
           <div class="action-buttons">
             <button @click="openModal(record, 'history')" class="action-btn">
               <SvgIcon name="details" />
             </button>
           </div>
+        </template> -->
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
       </BasicTable>
     </TabPane>
   </Tabs>
   <!-- 弹窗组件 -->
-  <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>
+  <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况">
+    <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </BasicModal>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } 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, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './overlimit.api';
-import dayjs from 'dayjs';
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const visibleresolveModal = ref(false);
-const resolveValue = ref('');
-const boardData = ref([
-  {
-    label: '存在风险情况数量',
-    value: '',
-  },
-  {
-    label: '低风险',
-    value: '',
-  },
-  {
-    label: '一般风险',
-    value: '',
-  },
-  {
-    label: '较高风险',
-    value: '',
-  },
-  {
-    label: '高风险',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable, { reload }] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 80,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  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 } from './overlimitAlarm.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './overlimit.api';
+  import { useInitForm } from '../../common/analysis';
+  import { BasicModal, useModal } from '/@/components/Modal/index';
+  import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
+  import { useIntervalFn } from '@vueuse/core';
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择开始时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        defaultValue: dayjs(),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择结束时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        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);
-          },
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const resolveValue = ref('');
+
+  const { goafOptions, goafId, hiscode, initGoafOptions } = useInitForm();
+
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '-',
+    },
+    {
+      label: '低风险',
+      value: '-',
+    },
+    {
+      label: '一般风险',
+      value: '-',
+    },
+    {
+      label: '较高风险',
+      value: '-',
+    },
+    {
+      label: '高风险',
+      value: '-',
+    },
+  ]);
+
+  // 注册实时数据表格
+  const [registerTable, { reload }] = useTable({
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        componentProps: {
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  // 注册历史数据表格
+  const [registerHistoryTable, historyTable] = useTable({
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      model: { mineCode: hiscode },
+      labelWidth: 120,
+      schemas: [
+        // {
+        //   label: '开始时间',
+        //   field: 'startTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择开始时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择开始时间' }],
+        // },
+        // {
+        //   label: '结束时间',
+        //   field: 'endTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs(),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择结束时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择结束时间' }],
+        // },
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            initFromStore: false,
+            syncToStore: false,
+            changeOnSelect: false,
+            onChange: (e) => {
+              historyTable.setLoading(true);
+              initGoafOptions(e).finally(() => {
+                historyTable.setLoading(false);
+              });
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        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: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  // actionColumn: {
-  //   width: 60,
-  //   title: '操作',
-  //   dataIndex: 'action',
-  //   slots: { customRender: 'action' },
-  //   fixed: undefined,
-  // },
-});
-
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
-// 定时器
-let timer: IntervalHandle;
-const fetchTableData = async () => {
-  await reload();
-};
-// 打开弹窗方法（区分实时/历史）
-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: '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'],
-    };
+        ...historicalFormSchema,
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    // actionColumn: {
+    //   width: 120,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
   });
-};
-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'],
+
+  // 弹窗引用
+  const [registerModal, { openModal }] = useModal();
+
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'overLimitAlarm',
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'overLimitAlarm',
-  };
-  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();
-  timer = setInterval(() => {
-    fetchTableData();
-  }, 5000);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
+    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;
   }
-});
+
+  useIntervalFn(() => reload({ silence: true }), 10000);
+
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.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: @white;
-  padding: 10px;
-  gap: 100px;
-  // margin: 0 10px;
-  margin-bottom: 5px;
-}
-.board-item {
-  box-sizing: border-box;
-}
+  @import url(../../common/board.less);
 </style>
-

src/views/analysis/warningAnalysis/pressureDiffAnalysis/index.vue

@@ -5,8 +5,8 @@
     <TabPane tab="实时监测" key="realtime">
       <div class="board-info">
         <MiniBoard
-          :key="index"
           v-for="(item, index) in boardData"
+          :key="index"
           type="A"
           :label="item.label"
           :value="item.value"
@@ -23,7 +23,7 @@
               <span class="action-text">详情</span>
             </button> -->
             <!-- 已解决按钮 -->
-            <button @click="openModal(record, 'resolved')" class="resolved-btn" title="已解决">
+            <button @click="openModal(record, 'resolved')" class="resolved-btn" title="解决">
               <SvgIcon name="details" />
             </button>
           </div>
@@ -34,18 +34,21 @@
     <TabPane tab="历史数据" key="history">
       <!-- 历史数据表格 -->
       <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-        <template #action="{ record }">
+        <!-- <template #action="{ record }">
           <div class="action-buttons">
             <button @click="openModal(record, 'history')" class="action-btn">
               <SvgIcon name="details" />
             </button>
           </div>
+        </template> -->
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </template>
       </BasicTable>
     </TabPane>
   </Tabs>
   <!-- 弹窗组件 -->
-  <a-modal
+  <!-- <a-modal
     style="top: 30%; left: 170px"
     v-model:visible="visibleModal"
     :width="450"
@@ -54,301 +57,182 @@
     @cancel="handleCancelEdit"
   >
     <a-table></a-table>
-  </a-modal>
+  </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>
+  <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况">
+    <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
+  </BasicModal>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } 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';
-import dayjs from 'dayjs';
-// 激活的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, { reload }] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 80,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  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 } from './pressureDiffAnalysis.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './pressureDiff.api';
+  import { useInitForm } from '../../common/analysis';
+  import { BasicModal, useModal } from '/@/components/Modal/index';
+  import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
+  import { useIntervalFn } from '@vueuse/core';
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择开始时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        defaultValue: dayjs(),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择结束时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        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);
-          },
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  const resolveValue = ref('');
+
+  const { goafOptions, goafId, hiscode, initGoafOptions } = useInitForm();
+
+  const boardData = ref([
+    {
+      label: '存在风险情况数量',
+      value: '-',
+    },
+    {
+      label: '低风险',
+      value: '-',
+    },
+    {
+      label: '一般风险',
+      value: '-',
+    },
+    {
+      label: '较高风险',
+      value: '-',
+    },
+    {
+      label: '高风险',
+      value: '-',
+    },
+  ]);
+
+  // 注册实时数据表格
+  const [registerTable, { reload }] = useTable({
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        componentProps: {
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  // 注册历史数据表格
+  const [registerHistoryTable, historyTable] = useTable({
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      model: { mineCode: hiscode },
+      labelWidth: 120,
+      schemas: [
+        // {
+        //   label: '开始时间',
+        //   field: 'startTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择开始时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择开始时间' }],
+        // },
+        // {
+        //   label: '结束时间',
+        //   field: 'endTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs(),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择结束时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择结束时间' }],
+        // },
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            initFromStore: false,
+            syncToStore: false,
+            changeOnSelect: false,
+            onChange: (e) => {
+              historyTable.setLoading(true);
+              initGoafOptions(e).finally(() => {
+                historyTable.setLoading(false);
+              });
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        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: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  // actionColumn: {
-  //   width: 120,
-  //   title: '操作',
-  //   dataIndex: 'action',
-  //   slots: { customRender: 'action' },
-  //   fixed: undefined,
-  // },
-});
-
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
-// 定时器
-let timer: IntervalHandle;
-const fetchTableData = async () => {
-  await reload();
-};
-// 打开弹窗方法（区分实时/历史）
-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'],
-    };
+        ...historicalFormSchema,
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    // actionColumn: {
+    //   width: 120,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
   });
-};
-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'],
+
+  // 弹窗引用
+  const [registerModal, { openModal }] = useModal();
+
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'sourcePressureAlarm',
     };
-  });
-};
-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();
-  timer = setInterval(() => {
-    fetchTableData();
-  }, 5000);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
+    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;
   }
-});
+
+  useIntervalFn(() => reload({ silence: true }), 10000);
+
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.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: @white;
-  padding: 10px;
-  gap: 100px;
-  // margin: 0 10px;
-  margin-bottom: 5px;
-}
-.board-item {
-  box-sizing: border-box;
-}
+  @import url(../../common/board.less);
 </style>
-

src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/index.vue

@@ -5,8 +5,8 @@
     <TabPane tab="实时监测" key="realtime">
       <div class="board-info">
         <MiniBoard
-          :key="index"
           v-for="(item, index) in boardData"
+          :key="index"
           type="A"
           :label="item.label"
           :value="item.value"
@@ -18,7 +18,7 @@
       <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
         <!-- 核心：判断record是否有有效数据，无则显示- -->
         <template #action="{ record }">
-          <button @click="openModal(record, 'resolved')" class="resolved-btn" title="已解决">
+          <button @click="openModal(record)" class="resolved-btn" title="解决">
             <SvgIcon name="details" />
           </button>
         </template>
@@ -32,310 +32,198 @@
     <TabPane tab="历史数据" key="history">
       <!-- 历史数据表格 -->
       <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
-        <template #action="{ record }">
+        <!-- <template #action="{ record }">
           <div class="action-buttons">
             <button @click="openModal(record, 'history')" class="action-btn">
               <SvgIcon name="details" />
             </button>
           </div>
+        </template> -->
+        <template #form-goaf-select>
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
         </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>
+  <RealtimeDetailsModal @register="registerRealtimeModal" @close="resume" />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } 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, historicalMinesData } from './sealRiskJudgeAnalysis.data';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getProvinceAlarmNum } from './sealRiskJudge.api';
-import dayjs from 'dayjs';
-// 激活的Tab页签
-const activeTab = ref('realtime');
-const visibleModal = ref(false);
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const visibleresolveModal = ref(false);
-const resolveValue = ref('');
-const boardData = ref([
-  {
-    label: '采空区数量',
-    value: '',
-  },
-  {
-    label: '增减风安全区',
-    value: '',
-  },
-  {
-    label: '减风危险区',
-    value: '',
-  },
-  {
-    label: '增风危险区',
-    value: '',
-  },
-  {
-    label: '爆炸危险区',
-    value: '',
-  },
-]);
-const minesData = ref([]);
-// 注册实时数据表格
-const [registerTable, { reload }] = useTable({
-  dataSource: minesData,
-  columns,
-  api: getProvinceAlarm,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '煤矿名称',
-        field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'MineCascader', // 自定义组件名
-        colProps: { span: 6 },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 80,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+  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 } from './sealRiskJudgeAnalysis.data';
+  import { getProvinceAlarm, getProvinceAlarmHistory, getProvinceAlarmNum } from './sealRiskJudge.api';
+  import RealtimeDetailsModal from '/@/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue';
+  import { useIntervalFn } from '@vueuse/core';
+  import { useModal } from '/@/components/Modal';
+  import { useInitForm } from '../../common/analysis';
+  import { historicalFormSchema } from '/@/views/monitor/sealedMonitor/monitor.data';
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historicalMinesData,
-  columns,
-  api: getProvinceAlarmHistory,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '开始时间',
-        field: 'startTime',
-        component: 'DatePicker',
-        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择开始时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择开始时间' }],
-      },
-      {
-        label: '结束时间',
-        field: 'endTime',
-        component: 'DatePicker',
-        defaultValue: dayjs(),
-        componentProps: {
-          showTime: true,
-          placeholder: '请选择结束时间',
-          valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        },
-        colProps: { span: 6 },
-        rules: [{ required: true, message: '请选择结束时间' }],
-      },
-      {
-        label: '煤矿名称',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
-        component: 'MineCascader', // 自定义组件名
-        componentProps: {
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
-          },
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+
+  const { goafOptions, goafId, hiscode, initGoafOptions } = useInitForm();
+
+  const boardData = [
+    {
+      label: '存在风险情况数量',
+      value: '-',
+    },
+    {
+      label: '低风险',
+      value: '-',
+    },
+    {
+      label: '一般风险',
+      value: '-',
+    },
+    {
+      label: '较高风险',
+      value: '-',
+    },
+    {
+      label: '高风险',
+      value: '-',
+    },
+  ];
+
+  // 注册实时数据表格
+  const [registerTable, { reload }] = useTable({
+    columns,
+    api: getProvinceAlarm,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCodeList', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
         },
-        colProps: { span: 6 },
-        rules: [],
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  // 注册历史数据表格
+  const [registerHistoryTable, historyTable] = useTable({
+    columns,
+    api: getProvinceAlarmHistory,
+    formConfig: {
+      model: { mineCode: hiscode },
+      labelWidth: 120,
+      schemas: [
+        // {
+        //   label: '开始时间',
+        //   field: 'startTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择开始时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择开始时间' }],
+        // },
+        // {
+        //   label: '结束时间',
+        //   field: 'endTime',
+        //   component: 'DatePicker',
+        //   defaultValue: dayjs(),
+        //   componentProps: {
+        //     showTime: true,
+        //     placeholder: '请选择结束时间',
+        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        //   },
+        //   colProps: { span: 6 },
+        //   rules: [{ required: true, message: '请选择结束时间' }],
+        // },
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          componentProps: {
+            initFromStore: false,
+            syncToStore: false,
+            changeOnSelect: false,
+            onChange: (e) => {
+              historyTable.setLoading(true);
+              initGoafOptions(e).finally(() => {
+                historyTable.setLoading(false);
+              });
+            },
           },
+          colProps: { span: 6 },
+          rules: [],
         },
-        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: true,
-  striped: true,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  // actionColumn: {
-  //   width: 60,
-  //   title: '操作',
-  //   dataIndex: 'action',
-  //   slots: { customRender: 'action' },
-  //   fixed: undefined,
-  // },
-});
-
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
-// 定时器
-let timer: IntervalHandle;
-const fetchTableData = async () => {
-  await reload();
-};
-// 打开弹窗方法（区分实时/历史）
-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: 'leakageAlarm',
-    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'],
-    };
+        ...historicalFormSchema,
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    // actionColumn: {
+    //   width: 60,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
   });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+
+  // 弹窗引用
+  const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
+
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record) => {
+    openRealtimeModal(true, record);
+    pause();
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['deviceCode'],
+
+  async function getAlarmTotalData() {
+    const params = {
+      alarmType: 'explosionAlarm',
     };
-  });
-};
-async function getAlarmTotalData() {
-  const params = {
-    alarmType: 'explosionAlarm',
-  };
-  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();
-  timer = setInterval(() => {
-    fetchTableData();
-  }, 5000);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
+    const result = await getProvinceAlarmNum(params);
+    boardData[1].value = result.alarmLevel1;
+    boardData[2].value = result.alarmLevel2;
+    boardData[3].value = result.alarmLevel3;
+    boardData[4].value = result.alarmLevel4;
+    boardData[0].value = result.alarmLevel1 + result.alarmLevel2 + result.alarmLevel3 + result.alarmLevel4;
   }
-});
+
+  const { pause, resume } = useIntervalFn(() => reload({ silence: true }), 10000);
+
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getAlarmTotalData();
+  });
 </script>
 
 <style lang="less" scoped>
-.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: @white;
-  padding: 10px;
-  gap: 100px;
-  // margin: 0 10px;
-  margin-bottom: 5px;
-}
-.board-item {
-  box-sizing: border-box;
-}
+  @import url(../../common/board.less);
 </style>

src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/sealRiskJudgeAnalysis.data.ts

@@ -5,23 +5,23 @@ import { alarmCellRender } from '/@/views/monitor/sealedMonitor/monitor.data';
 export const boardData = [
   {
     label: '存在风险情况数量',
-    value: '10',
+    value: '-',
   },
   {
     label: '低风险',
-    value: '27',
+    value: '-',
   },
   {
     label: '一般风险',
-    value: '27',
+    value: '-',
   },
   {
     label: '较高风险',
-    value: '27',
+    value: '-',
   },
   {
     label: '高风险',
-    value: '27',
+    value: '-',
   },
 ];
 // 实时数据相关

src/views/dashboard/basicInfo/minesInfo/minesInfo.data.ts

@@ -2,23 +2,27 @@ import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Ref } from 'vue';
+import { StatusColorEnum } from '/@/enums/jeecgEnum';
 
 // 1. 颜色映射（修正原拼写错误，统一规则）
-export const colorHexMap: Record<string, string> = {
-  blue: '#1890ff',
-  green: '#208840',
-  gold: '#faad14',
-  red: '#f5222d',
-  gray: '#8c8c8c',
-  black: '#000000',
-};
+// export const StatusColorEnum: Record<string, string> = {
+//   blue: '#1890ff',
+//   green: '#208840',
+//   gold: '#faad14',
+//   red: '#f5222d',
+//   gray: '#8c8c8c',
+//   black: '#000000',
+// };
 
 // 2. 定义生产状态映射类型（和dataQuality保持一致）
-export type ProductionStatusMap = Record<string | number, { 
-  label: string; 
-  value: number | string; 
-  color: string; 
-}>;
+export type ProductionStatusMap = Record<
+  string | number,
+  {
+    label: string;
+    value: number | string;
+    color: string;
+  }
+>;
 
 // 3. 生成动态表格列（接收动态状态映射）
 export function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>): BasicColumn[] {
@@ -52,13 +56,17 @@ export function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>): BasicCol
         // 空值/异常值处理
         const status = String(record.productionStatus || '');
         // 从动态映射取值，兜底未知状态
-        const { label, color } = dynamicStatusMap.value[status] || { 
-          label: '-', 
+        const { label, color } = dynamicStatusMap.value[status] || {
+          label: '-',
         };
         // 渲染带颜色的文字
-        return h('span', { 
-          style: { color: colorHexMap[color] } 
-        }, label);
+        return h(
+          'span',
+          {
+            style: { color: StatusColorEnum[color] },
+          },
+          label
+        );
       },
     },
     {
@@ -74,10 +82,10 @@ export function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>): BasicCol
         // 空值/异常值处理
         const status = String(record.accessStatus || '');
         if (!status || status === 'undefined' || status === 'null') {
-          return h('span', { style: { color: colorHexMap.black } }, '/');
+          return h('span', { style: { color: StatusColorEnum.black } }, '/');
         }
         const text = status === '1' ? '接入' : '未接入';
-        const textColor = status === '1' ? colorHexMap.green : colorHexMap.gold;
+        const textColor = status === '1' ? StatusColorEnum.green : StatusColorEnum.gold;
         return h('span', { style: { color: textColor } }, text);
       },
     },
@@ -88,10 +96,10 @@ export function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>): BasicCol
       customRender: ({ record }) => {
         const status = String(record.status || '');
         if (!status || status === 'undefined' || status === 'null') {
-          return h('span', { style: { color: colorHexMap.black } }, '/');
+          return h('span', { style: { color: StatusColorEnum.black } }, '/');
         }
         const text = status === '1' ? '在线' : '离线';
-        const textColor = status === '1' ? colorHexMap.green : colorHexMap.red;
+        const textColor = status === '1' ? StatusColorEnum.green : StatusColorEnum.red;
         return h('span', { style: { color: textColor } }, text);
       },
     },
@@ -178,4 +186,4 @@ export function getSearchFormSchema(dynamicStatusOptions: Ref<{ label: string; v
       show: false,
     },
   ];
-}
+}

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -81,8 +81,8 @@
   import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
   import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';
   import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
-  import { modalDetailsData, alarmCellRender } from '../monitor.data';
-  import { concat, get, last, takeRight } from 'lodash-es';
+  import { modalDetailsData } from '../monitor.data';
+  import { concat, get, isFunction, last, takeRight } from 'lodash-es';
   import { h } from 'vue';
   import { getGoafData } from '../monitor.api';
   import { useIntervalFn } from '@vueuse/core';
@@ -131,8 +131,8 @@
         resume();
       });
 
-      function contextRender({ value, tag }: any) {
-        if (tag) return alarmCellRender(get(dataRef.value, value));
+      function contextRender({ value, customRender }: any) {
+        if (isFunction(customRender)) return customRender({ record: dataRef.value });
         return h('span', get(dataRef.value, value));
       }
 

src/views/monitor/sealedMonitor/index.vue

@@ -6,7 +6,7 @@
       <!-- 实时数据表格 -->
       <BasicTable style="padding: 0" @register="registerRealtimeTable">
         <template #action="{ record }">
-          <button @click="openModal(record)" class="action-btn">
+          <button @click="openModal(record)" class="action-btn" title="详情">
             <SvgIcon name="details" />
           </button>
         </template>

src/views/monitor/sealedMonitor/monitor.data.ts

@@ -4,6 +4,14 @@ import { FormSchema } from '/@/components/Table';
 import { TreeItem } from '/@/components/Tree/index';
 import { ModuleDataChart } from '/@/components/Configurable/types';
 import { h } from 'vue';
+import { StatusColorEnum } from '/@/enums/jeecgEnum';
+
+const riskMap = {
+  '1': '低风险',
+  '2': '一般风险',
+  '3': '较高风险',
+  '4': '高风险',
+};
 
 // 实时数据相关
 export const columns: BasicColumn[] = [
@@ -53,7 +61,7 @@ export const columns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: 'C2H4(%)',
+    title: 'C2H4(ppm)',
     dataIndex: 'c2h4Val',
     width: 100,
   },
@@ -77,12 +85,6 @@ export const columns: BasicColumn[] = [
     dataIndex: 'fireAlarm',
     width: 100,
     customRender({ record }) {
-      const riskMap = {
-        '1': '低风险',
-        '2': '一般风险',
-        '3': '较高风险',
-        '4': '高风险',
-      };
       return alarmCellRender(record.fireAlarm, (r) => riskMap[r.alarmName] || r.alarmName);
     },
   },
@@ -100,12 +102,6 @@ export const columns: BasicColumn[] = [
     dataIndex: 'sourcePressureAlarm',
     width: 100,
     customRender({ record }) {
-      const riskMap = {
-        '1': '低风险',
-        '2': '一般风险',
-        '3': '较高风险',
-        '4': '高风险',
-      };
       return alarmCellRender(record.sourcePressureAlarm, (r) => riskMap[r.alarmName] || r.alarmName);
     },
   },
@@ -174,12 +170,10 @@ export const modalDetailsData: {
     {
       label: '煤矿名称',
       value: 'mineName',
-      tag: false,
     },
     {
       label: '设备位置',
       value: 'devicePos',
-      tag: false,
     },
     // {
     //   label: '所属煤层',
@@ -192,22 +186,30 @@ export const modalDetailsData: {
     {
       label: '自然发火隐患',
       value: 'fireAlarm',
-      tag: true,
+      customRender({ record }) {
+        return alarmCellRender(record.fireAlarm, (r) => riskMap[r.alarmName] || r.alarmName);
+      },
     },
     {
       label: '是否漏风',
       value: 'leakageAlarm',
-      tag: true,
+      customRender({ record }) {
+        return alarmCellRender(record.leakageAlarm);
+      },
     },
     {
       label: '压差隐患等级',
       value: 'sourcePressureAlarm',
-      tag: true,
+      customRender({ record }) {
+        return alarmCellRender(record.sourcePressureAlarm, (r) => riskMap[r.alarmName] || r.alarmName);
+      },
     },
     {
       label: '密闭启封判定',
       value: 'unsealAlarm',
-      tag: true,
+      customRender({ record }) {
+        return alarmCellRender(record.unsealAlarm);
+      },
     },
   ],
   board: [
@@ -368,7 +370,7 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: 'C2H4(%)',
+    title: 'C2H4(ppm)',
     dataIndex: 'c2h4Val',
     width: 100,
   },
@@ -469,7 +471,7 @@ export const historicalFormSchema: FormSchema[] = [
       //返回值格式化（绑定值的格式）
       valueFormat: 'YYYY-MM-DD hh:mm:ss',
     },
-    defaultValue: dayjs().add(-7, 'day').format('YYYY-MM-DD hh:mm:ss'),
+    defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD hh:mm:ss'),
     colProps: { span: 6 },
   },
   {
@@ -515,16 +517,16 @@ export const treeData: TreeItem[] = [
   },
 ];
 
-function getTagType(level: string) {
+function getTagColor(level: string) {
   switch (level) {
     case '4':
-      return '#f5222d';
+      return StatusColorEnum.red;
     case '3':
-      return '#fa5914';
+      return StatusColorEnum.purple;
     case '2':
-      return '#faad14';
+      return StatusColorEnum.gold;
     case '1':
-      return '#208840';
+      return StatusColorEnum.blue;
     default:
       return 'inhert';
   }
@@ -536,9 +538,9 @@ export function alarmCellRender(
   lvFn: (record: any) => string = (r) => r.alarmLevel
 ) {
   // if (!record) return h(Tag, { bordered: false, color: 'default' }, () => '-');
-  // return h(Tag, { bordered: false, color: getTagType(record.alarmLevel) }, () => record.alarmName);
+  // return h(Tag, { bordered: false, color: getTagColor(record.alarmLevel) }, () => record.alarmName);
   if (!record) return h('span', '-');
   const val = valFn(record);
   const lv = lvFn(record);
-  return h('span', { style: { color: getTagType(lv) } }, val);
+  return h('span', { style: { color: getTagColor(lv) } }, val);
 }

src/views/system/algorithm/index.vue

@@ -14,14 +14,14 @@
       <template #expandedRowRender>
         <BasicTable @register="registerInnerTable">
           <template #action="{ record }">
-            <button @click="handleEdit({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn">
+            <button @click="handleEdit({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn" title="编辑">
               <SvgIcon name="edit" />
             </button>
             <!-- <button @click="handleAdd({ goafId: record.id, mineCode: last(expandedRowKeys) }, 'goaf')" class="action-btn ml-1">
               <PlusOutlined />
             </button> -->
             <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
-              <button @click="handleDelete(record, 'goaf')" class="action-btn ml-1">
+              <button @click="handleDelete(record, 'goaf')" class="action-btn ml-1" title="删除">
                 <SvgIcon name="delete" />
               </button>
             </a-popconfirm>
@@ -30,14 +30,14 @@
       </template>
 
       <template #action="{ record }">
-        <button @click="handleEdit({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn">
+        <button @click="handleEdit({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn" title="编辑">
           <SvgIcon name="edit" />
         </button>
         <!-- <button @click="handleAdd({ coalSeamId: record.id, mineCode: record.mineCode }, 'coal')" class="action-btn ml-1">
           <PlusOutlined />
         </button> -->
         <a-popconfirm title="确认删除？" @confirm="handleDelete(record, 'coal')">
-          <button class="action-btn ml-1">
+          <button class="action-btn ml-1" title="删除">
             <SvgIcon name="delete" />
           </button>
         </a-popconfirm>