Merge branch 'master' of http://39.97.59.228:8013/hrx/goaf-monitoring-system

.env

@@ -2,7 +2,8 @@
 VITE_PORT = 3100
 
 #  网站标题
-VITE_GLOB_APP_TITLE = 省局密闭采空区监测系统
+VITE_GLOB_APP_TITLE = 省局老空区永久密闭监测系统
+# VITE_GLOB_APP_TITLE = 省局密闭采空区监测系统
 
 # 简称，此变量只能是字符/下划线
 VITE_GLOB_APP_SHORT_NAME = 省局密闭监测

README.md

@@ -1,6 +1,6 @@
-## 密闭采空区监测系统
+## 老空区永久密闭监测系统
 
-密闭采空区监测系统前端代码仓库
+老空区永久密闭监测系统前端代码仓库
 
 ### 前言
 

mock/sys/menu.ts

@@ -3455,7 +3455,7 @@ export default [
                   internalOrExternal: false,
                   icon: 'ant-design:windows-outlined',
                   componentName: 'sealedGoafIndex',
-                  title: '采空区首页',
+                  title: '老空区永久密闭首页',
                 },
                 name: 'dashboard-sealedGoafIndex',
                 id: '9502685863ab87f0ad1134142788a385',

package.json

@@ -137,6 +137,7 @@
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "postcss-less": "^6.0.0",
+    "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.7.4",
     "pretty-quick": "^4.2.2",
     "rimraf": "^5.0.10",

public/js/global.js

@@ -14,7 +14,7 @@ const __STATIC_ROUTES__ = [
           internalOrExternal: false,
           icon: '',
           componentName: 'SealedGoaf',
-          title: '采空区首页',
+          title: '老空区永久密闭首页',
         },
         name: 'dashboard-sealedgoaf',
       },
@@ -249,7 +249,7 @@ const __STATIC_ROUTES__ = [
         },
         name: 'warningAnalysis-overlimit-alarm',
       },
-     
+
     ],
     meta: {
       keepAlive: false,
@@ -277,7 +277,7 @@ const __STATIC_ROUTES__ = [
       //   },
       //   name: 'association',
       // },
-       {
+      {
         path: '/warningAnalysis/connectAnalysis',
         component: '/analysis/warningAnalysis/connectAnalysis/index',
         meta: {
@@ -403,18 +403,18 @@ const __STATIC_ROUTES__ = [
         },
         name: 'system-dict',
       },
-      // {
-      //     path: '/system/depart',
-      //     component: 'system/depart/index',
-      //     meta: {
-      //         keepAlive: false,
-      //         internalOrExternal: false,
-      //         icon: '',
-      //         componentName: 'index',
-      //         title: '部门管理',
-      //     },
-      //     name: 'system-depart',
-      // },
+      {
+        path: '/system/depart',
+        component: 'system/depart/index',
+        meta: {
+          keepAlive: false,
+          internalOrExternal: false,
+          icon: '',
+          componentName: 'index',
+          title: '部门管理',
+        },
+        name: 'system-depart',
+      },
       // {
       //     path: '/system/tenant',
       //     component: 'system/tenant/index',

src/components/Configurable/detail/MiniBoard.vue

@@ -25,46 +25,6 @@
         </div>
       </slot>
     </template>
-    <template v-if="layout === 'new-top'">
-      <slot name="label">
-        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
-      </slot>
-      <slot name="value">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
-      </slot>
-    </template>
-    <template v-if="layout === 'new1-top'">
-      <slot name="label">
-        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
-      </slot>
-      <slot name="value">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
-      </slot>
-    </template>
-    <template v-if="layout === 'new2-top'">
-      <slot name="value">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
-      </slot>
-      <slot name="label">
-        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
-      </slot>
-    </template>
-    <template v-if="layout === 'new3-top'">
-      <div v-if="label === '进风(m³/min)'" class="mini-board_New3_jin">
-        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
-      </div>
-      <div v-if="label === '回风(m³/min)'" class="mini-board_New3_hui">
-        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
-      </div>
-      <!-- <slot name="value">
-        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
-      </slot> -->
-      <!-- <slot name="lable">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
-      </slot> -->
-    </template>
   </div>
 </template>
 <script lang="ts" setup>
@@ -74,7 +34,7 @@
       value?: string;
       // 告示牌布局，类型为：'val-top' | 'label-top'
       layout: string;
-      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' 
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D'
       type?: string;
     }>(),
     {
@@ -190,7 +150,6 @@
     font-size: 14px;
     font-family: 'Source Han Sans SC';
     font-weight: 700;
-
   }
   .mini-board__value_B {
     color: #000000;
@@ -250,13 +209,13 @@
   /* 2. 第二个容器：label和value为黄色 */
   .mini-board_C:nth-child(2) .mini-board__label_C,
   .mini-board_C:nth-child(2) .mini-board__value_C {
-    color: #B39F01;
+    color: #b39f01;
   }
 
   /* 3. 第三个容器：label和value为橙色 */
   .mini-board_C:nth-child(3) .mini-board__label_C,
   .mini-board_C:nth-child(3) .mini-board__value_C {
-    color: #E6A23D;
+    color: #e6a23d;
   }
 
   /* 4. 第四个容器：label和value为红色 */
@@ -302,5 +261,4 @@
     // width: 55px;
     font-size: 20px;
   }
-
 </style>

src/components/Table/src/props.ts

@@ -131,7 +131,7 @@ export const basicProps = {
   },
   scroll: {
     // 代码逻辑说明: 【issues/1188】BasicTable加上scrollToFirstRowOnChange类型定义
-    type: Object as PropType<{ x?: number | true; y?: number; scrollToFirstRowOnChange?: boolean }>,
+    type: Object as PropType<{ x?: number | true | string; y?: number | string; scrollToFirstRowOnChange?: boolean }>,
     default: null,
   },
   beforeEditSubmit: {

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/layouts/default/feature/SimpleMap.vue

@@ -3,99 +3,118 @@
 </template>
 
 <script setup>
-  import { ref, onMounted, onUnmounted } from 'vue';
-  // 引入 Leaflet
-  import L from 'leaflet';
-  import 'leaflet/dist/leaflet.css';
-  // Ant Design Vue 图标
-
-  // --- 1. 组件引用和状态定义 ---
-  const mapContainer = ref(null);
-  let map = null; // Leaflet 地图实例
-
-  // --- 2. 瓦片图层配置 ---
-  const tileLayers = {
-    custom: {
-      name: '基准瓦片',
-      layer: null,
-      url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
-      options: {
-        maxZoom: 18,
-        attribution: '',
-        // crossOrigin: true,
-      },
+import { ref, onMounted, onUnmounted } from 'vue';
+// 引入 Leaflet
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+// Ant Design Vue 图标
+
+// --- 1. 组件引用和状态定义 ---
+const mapContainer = ref(null);
+let map = null; // Leaflet 地图实例
+
+// --- 2. 瓦片图层配置 ---
+const tileLayers = {
+  custom: {
+    name: '基准瓦片',
+    layer: null,
+    // url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
+    url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+    options: {
+      maxZoom: 18,
+      // attribution: '',
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      // crossOrigin: true,
     },
-    satellite: {
-      name: '卫星图',
-      layer: null,
-      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-      options: {
-        maxZoom: 18,
-        attribution: '© Esri',
-      },
+  },
+  satellite: {
+    name: '卫星图',
+    layer: null,
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    options: {
+      maxZoom: 18,
+      attribution: '© Esri',
     },
-  };
+  },
+};
 
-  // --- 3. 地图初始化 ---
-  onMounted(() => {
-    initMap();
-  });
 
-  onUnmounted(() => {
-    if (map) {
-      map.remove();
-    }
-  });
 
-  // 初始化地图
-  function initMap() {
-    if (!mapContainer.value) return;
 
-    // 创建地图实例，设置太原市中心和初始缩放级别
-    map = L.map(mapContainer.value, {
-      center: [35.841, 108.94], // 西安市中心坐标 [纬度, 经度]
-      zoom: 7, // 初始缩放级别，适合城市级别查看
-      zoomControl: false, // 显示缩放控件
-      attributionControl: false, // 显示属性控件
-    });
+// 添加一个风险点示例（类似第一张图的红色气泡）
 
-    // 初始化所有瓦片图层
-    initTileLayers();
 
-    // 默认显示自定义底图
-    tileLayers.custom.layer.addTo(map);
-    // tileLayers.satellite.layer.addTo(map);
+// --- 3. 地图初始化 ---
+onMounted(() => {
+  initMap();
+});
 
-    initGeoJSON();
+onUnmounted(() => {
+  if (map) {
+    map.remove();
   }
+});
 
-  // 初始化瓦片图层
-  function initTileLayers() {
-    Object.keys(tileLayers).forEach((key) => {
-      const config = tileLayers[key];
-      config.layer = L.tileLayer(config.url, config.options);
-    });
-  }
+// 初始化地图
+function initMap() {
+  if (!mapContainer.value) return;
 
-  async function initGeoJSON() {
-    const response = await fetch('/js/shanxi.geo.json');
-    const ShanXiGeoJSON = await response.json();
-    L.geoJSON(ShanXiGeoJSON, {
-      style: function () {
-        return { color: '#ff9100' };
-      },
-    }).addTo(map);
-  }
+  // 创建地图实例，设置太原市中心和初始缩放级别
+  map = L.map(mapContainer.value, {
+    center: [35.841, 108.94], // 西安市中心坐标 [纬度, 经度]
+    zoom: 7, // 初始缩放级别，适合城市级别查看
+    zoomControl: false, // 显示缩放控件
+    attributionControl: false, // 显示属性控件
+  });
+
+  // 初始化所有瓦片图层
+  initTileLayers();
+
+  // 默认显示自定义底图
+  // tileLayers.custom.layer.addTo(map);
+  // tileLayers.satellite.layer.addTo(map);
+
+
+  L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
+    subdomains: ['1', '2', '3', '4'], // 高德底图服务器集群
+    attribution: '© 高德地图' // 版权声明（必填，遵守使用规范）
+  }).addTo(map);
+
+  // 保留之前的风险点示例
+  L.circleMarker([39.9, 116.4], { radius: 20, color: 'red', fillColor: '#f03', fillOpacity: 0.5 })
+    .addTo(map)
+    .bindPopup("风险值: 35");
+
+  initGeoJSON();
+}
+
+// 初始化瓦片图层
+function initTileLayers() {
+  Object.keys(tileLayers).forEach((key) => {
+    const config = tileLayers[key];
+    config.layer = L.tileLayer(config.url, config.options);
+  });
+}
+
+async function initGeoJSON() {
+  const response = await fetch('/js/shanxi.geo.json');
+  const ShanXiGeoJSON = await response.json();
+  L.geoJSON(ShanXiGeoJSON, {
+    style: function () {
+      return { color: '#ff9100' };
+    },
+  }).addTo(map);
+}
 </script>
 
 <style lang="less" scoped>
-  .map-container {
-    flex: 1;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: @simple-map-z-index;
-  }
+.map-container {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: @simple-map-z-index;
+}
 </style>

src/layouts/default/plain.vue

@@ -3,100 +3,98 @@
   <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader />
-    <SystemSelect />
+    <SystemSelect :style="{ position: 'fixed', top: '60px', left: '0', zIndex: '100' }" />
     <SimpleMap />
     <LayoutContent />
   </Layout>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, unref } from 'vue';
-import { Layout } from 'ant-design-vue';
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { defineComponent, computed, unref } from 'vue';
+  import { Layout } from 'ant-design-vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-import LayoutHeader from './header/index.vue';
-import LayoutContent from './content/index.vue';
-import SystemSelect from './feature/SystemSelect.vue';
-import SimpleMap from './feature/SimpleMap.vue';
+  import LayoutHeader from './header/index.vue';
+  import LayoutContent from './content/index.vue';
+  import SystemSelect from './feature/SystemSelect.vue';
+  import SimpleMap from './feature/SimpleMap.vue';
 
-// import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useDesign } from '/@/hooks/web/useDesign';
-import { useLockPage } from '/@/hooks/web/useLockPage';
+  // import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLockPage } from '/@/hooks/web/useLockPage';
 
-// import { useAppInject } from '/@/hooks/web/useAppInject';
+  // import { useAppInject } from '/@/hooks/web/useAppInject';
 
-export default defineComponent({
-  name: 'DefaultLayout',
-  components: {
-    LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
-    LayoutHeader,
-    LayoutContent,
-    Layout,
-    SystemSelect,
-    SimpleMap,
-  },
-  setup() {
-    const { prefixCls } = useDesign('default-layout');
-    // const { getIsMobile } = useAppInject();
-    // const { getShowFullHeaderRef } = useHeaderSetting();
-    const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
+  export default defineComponent({
+    name: 'DefaultLayout',
+    components: {
+      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
+      LayoutHeader,
+      LayoutContent,
+      Layout,
+      SystemSelect,
+      SimpleMap,
+    },
+    setup() {
+      const { prefixCls } = useDesign('default-layout');
+      // const { getIsMobile } = useAppInject();
+      // const { getShowFullHeaderRef } = useHeaderSetting();
+      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
 
-    // Create a lock screen monitor
-    const lockEvents = useLockPage();
+      // Create a lock screen monitor
+      const lockEvents = useLockPage();
 
-    const layoutClass = computed(() => {
-      let cls: string[] = ['ant-layout'];
-      if (unref(getIsMixSidebar) || unref(getShowMenu)) {
-        cls.push('ant-layout-has-sider');
-      }
-      return cls;
-    });
+      const layoutClass = computed(() => {
+        let cls: string[] = ['ant-layout'];
+        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
+          cls.push('ant-layout-has-sider');
+        }
+        return cls;
+      });
 
-    return {
-      getShowSidebar,
-      prefixCls,
-      getIsMixSidebar,
-      layoutClass,
-      lockEvents,
-    };
-  },
-});
+      return {
+        getShowSidebar,
+        prefixCls,
+        getIsMixSidebar,
+        layoutClass,
+        lockEvents,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-default-layout';
+  @prefix-cls: ~'@{namespace}-default-layout';
 
-.@{prefix-cls} {
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-  flex-direction: column;
-
-  >.ant-layout {
-    height: 0;
-    margin: 10px;
-    background-color: transparent;
-    position: relative;
-    z-index: @layout-basic-z-index;
-  }
-
-  &-main {
+  .@{prefix-cls} {
+    display: flex;
     width: 100%;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    // background-color: #aaaaaa32;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
-    // margin-left: 1px;
-  }
+    min-height: 100%;
+    flex-direction: column;
 
+    > .ant-layout {
+      height: 0;
+      margin: 10px;
+      background-color: transparent;
+      position: relative;
+      z-index: @layout-basic-z-index;
+    }
 
-}
+    &-main {
+      width: 100%;
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+      // background-color: #aaaaaa32;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
+      // margin-left: 1px;
+    }
+  }
 
-:deep(.jeecg-system-select) {
-  margin-left: 10px;
-  margin-top: 10px;
-}
+  :deep(.jeecg-system-select) {
+    margin-left: 10px;
+    margin-top: 10px;
+  }
 </style>

src/layouts/default/sider/LayoutSider.vue

@@ -1,155 +1,161 @@
 <template>
-  <div style="display: flex; flex-direction: column; height: 100%;">
+  <div style="display: flex; flex-direction: column; height: 100%">
     <SystemSelect v-if="!getCollapsed" />
-    <Sider v-show="showClassSideBarRef" breakpoint="lg" collapsible :class="getSiderClass" :width="getMenuWidth"
-      :collapsed="getCollapsed" :collapsedWidth="getCollapsedWidth" :theme="getMenuTheme"
-      @breakpoint="onBreakpointChange">
+    <Sider
+      v-show="showClassSideBarRef"
+      breakpoint="lg"
+      collapsible
+      :class="getSiderClass"
+      :width="getMenuWidth"
+      :collapsed="getCollapsed"
+      :collapsedWidth="getCollapsedWidth"
+      :theme="getMenuTheme"
+      @breakpoint="onBreakpointChange"
+    >
       <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" showSearch />
       <template #trigger>
         <LayoutTrigger />
       </template>
     </Sider>
   </div>
-
 </template>
 <script lang="ts">
-import { computed, defineComponent, unref, CSSProperties } from 'vue';
-
-import { Layout } from 'ant-design-vue';
-import LayoutMenu from '../menu/index.vue';
-// import LayoutMenu from '../menu/SearchMenu.vue';
-import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
-
-import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-
-import { useAppStore } from '@/store/modules/app';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useSiderEvent } from './useLayoutSider';
-import { useDesign } from '/@/hooks/web/useDesign';
-import SystemSelect from '../feature/SystemSelect.vue';
-
-// import DragBar from './DragBar.vue';
-
-export default defineComponent({
-  name: 'LayoutSideBar',
-  components: { Sider: Layout.Sider, LayoutMenu, LayoutTrigger, SystemSelect },
-  setup() {
-    // const dragBarRef = ref<ElRef>(null);
-    // const sideRef = ref<ElRef>(null);
-
-    const { getCollapsed, getMenuWidth, getSplit, getMenuTheme, getRealWidth, getMenuHidden, getMenuFixed, getIsMixMode, toggleCollapsed } =
-      useMenuSetting();
-
-    const { prefixCls } = useDesign('layout-sideBar');
-
-    const appStore = useAppStore();
-
-    // useDragLine(sideRef, dragBarRef);
-
-    const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
-
-    const getMode = computed(() => {
-      return unref(getSplit) ? MenuModeEnum.INLINE : null;
-    });
+  import { computed, defineComponent, unref, CSSProperties } from 'vue';
+
+  import { Layout } from 'ant-design-vue';
+  import LayoutMenu from '../menu/index.vue';
+  // import LayoutMenu from '../menu/SearchMenu.vue';
+  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useAppStore } from '@/store/modules/app';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useSiderEvent } from './useLayoutSider';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import SystemSelect from '../feature/SystemSelect.vue';
+
+  // import DragBar from './DragBar.vue';
+
+  export default defineComponent({
+    name: 'LayoutSideBar',
+    components: { Sider: Layout.Sider, LayoutMenu, LayoutTrigger, SystemSelect },
+    setup() {
+      // const dragBarRef = ref<ElRef>(null);
+      // const sideRef = ref<ElRef>(null);
+
+      const { getCollapsed, getMenuWidth, getSplit, getMenuTheme, getRealWidth, getMenuHidden, getMenuFixed, getIsMixMode, toggleCollapsed } =
+        useMenuSetting();
+
+      const { prefixCls } = useDesign('layout-sideBar');
+
+      const appStore = useAppStore();
+
+      // useDragLine(sideRef, dragBarRef);
+
+      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
+
+      const getMode = computed(() => {
+        return unref(getSplit) ? MenuModeEnum.INLINE : null;
+      });
+
+      const getSplitType = computed(() => {
+        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+      });
+
+      const showClassSideBarRef = computed(() => {
+        // 控制是否显示侧边栏
+        if (appStore.getLayoutHideSider) {
+          return false;
+        }
+        return unref(getSplit) ? !unref(getMenuHidden) : true;
+      });
+
+      const getSiderClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--fixed`]: unref(getMenuFixed),
+            [`${prefixCls}--mix`]: unref(getIsMixMode),
+          },
+        ];
+      });
+
+      const getHiddenDomStyle = computed((): CSSProperties => {
+        const width = `${unref(getRealWidth)}px`;
+        return {
+          width: width,
+          overflow: 'hidden',
+          flex: `0 0 ${width}`,
+          maxWidth: width,
+          minWidth: width,
+          transition: 'all 0.2s',
+        };
+      });
+
+      // 在此处使用计算量可能会导致sider异常
+      // andv 更新后，如果trigger插槽可用，则此处代码可废弃
+      // const getTrigger = h(LayoutTrigger);
 
-    const getSplitType = computed(() => {
-      return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
-    });
-
-    const showClassSideBarRef = computed(() => {
-      // 控制是否显示侧边栏
-      if (appStore.getLayoutHideSider) {
-        return false;
-      }
-      return unref(getSplit) ? !unref(getMenuHidden) : true;
-    });
-
-    const getSiderClass = computed(() => {
-      return [
-        prefixCls,
-        {
-          [`${prefixCls}--fixed`]: unref(getMenuFixed),
-          [`${prefixCls}--mix`]: unref(getIsMixMode),
-        },
-      ];
-    });
-
-    const getHiddenDomStyle = computed((): CSSProperties => {
-      const width = `${unref(getRealWidth)}px`;
       return {
-        width: width,
-        overflow: 'hidden',
-        flex: `0 0 ${width}`,
-        maxWidth: width,
-        minWidth: width,
-        transition: 'all 0.2s',
+        prefixCls,
+        getHiddenDomStyle,
+        getSiderClass,
+        // getTrigger,
+        getCollapsedWidth,
+        getMenuFixed,
+        showClassSideBarRef,
+        getMenuWidth,
+        getCollapsed,
+        getMenuTheme,
+        onBreakpointChange,
+        getMode,
+        getSplitType,
+        toggleCollapsed,
       };
-    });
-
-    // 在此处使用计算量可能会导致sider异常
-    // andv 更新后，如果trigger插槽可用，则此处代码可废弃
-    // const getTrigger = h(LayoutTrigger);
-
-    return {
-      prefixCls,
-      getHiddenDomStyle,
-      getSiderClass,
-      // getTrigger,
-      getCollapsedWidth,
-      getMenuFixed,
-      showClassSideBarRef,
-      getMenuWidth,
-      getCollapsed,
-      getMenuTheme,
-      onBreakpointChange,
-      getMode,
-      getSplitType,
-      toggleCollapsed,
-
-    };
-  },
-});
+    },
+  });
 </script>
 <style lang="less">
-@prefix-cls: ~'@{namespace}-layout-sideBar';
+  @prefix-cls: ~'@{namespace}-layout-sideBar';
 
-.@{prefix-cls} {
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-  z-index: @layout-sider-fixed-z-index;
-  flex: 1 !important;
+  .@{prefix-cls} {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    z-index: @layout-sider-fixed-z-index;
+    flex: 1 !important;
 
-  &.ant-layout-sider-dark {
-    background-color: @sider-dark-bg-color;
+    &.ant-layout-sider-dark {
+      background-color: @sider-dark-bg-color;
 
-    .ant-layout-sider-trigger {
-      color: darken(@white, 25%);
-      background-color: @trigger-dark-bg-color;
+      .ant-layout-sider-trigger {
+        color: darken(@white, 25%);
+        background-color: @trigger-dark-bg-color;
 
-      &:hover {
-        color: @white;
-        background-color: @trigger-dark-hover-bg-color;
+        &:hover {
+          color: @white;
+          background-color: @trigger-dark-hover-bg-color;
+        }
       }
     }
-  }
 
-  &:not(.ant-layout-sider-dark) {
-    // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+    &:not(.ant-layout-sider-dark) {
+      // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
 
-    .ant-layout-sider-trigger {
-      color: @text-color-base;
-      border-top: 1px solid @border-color-light;
+      .ant-layout-sider-trigger {
+        color: @text-color-base;
+        border-top: 1px solid @border-color-light;
+      }
     }
-  }
 
-  .ant-layout-sider-zero-width-trigger {
-    top: 40%;
-    z-index: 10;
-  }
+    .ant-layout-sider-zero-width-trigger {
+      top: 40%;
+      z-index: 10;
+    }
 
-  & .ant-layout-sider-trigger {
-    // height: 36px;
-    line-height: 36px;
+    & .ant-layout-sider-trigger {
+      // height: 36px;
+      line-height: 36px;
+    }
   }
-}
 </style>

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/autoFireAnalysis.data.ts

@@ -178,141 +178,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
-
-export const minesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];
-
-export const historicalMinesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];

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">
@@ -14,18 +15,23 @@
         <Col :span="7">
           <!-- 时间选择 -->
           <div class="filter-section param-section">
-            <span class="filter-label">采空区选择：</span>
-            <Select ref="select" v-model:value="goafId" style="width: 330px" placeholder="请选择采空区">
-              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }}
-              </SelectOption>
+            <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>
             </Select>
           </div>
         </Col>
         <Col :span="7">
           <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: 330px" :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="2">
@@ -75,86 +81,82 @@ import { useRouter } from 'vue-router';
 import { useMineDepartmentStore } from '/@/store/modules/mine';
 import { SvgIcon } from '/@/components/Icon';
 
-// 组件注册
-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()
-}
-
-
+  // 组件注册
+  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
-        })
-      })
+  // 生成折线图核心逻辑
+  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,
+          });
+        });
+      }
     }
   }
-}
 
-//获取采空区列表
-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'];
+  //获取采空区列表
+  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'];
+    }
   }
-}
 
-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()
-  }
-})
+  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>
 
 <style lang="less" scoped>

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

@@ -196,141 +196,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
-
-export const minesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];
-
-export const historicalMinesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];

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/overlimitAlarm/overlimitAlarm.data.ts

@@ -168,141 +168,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
-
-export const minesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];
-
-export const historicalMinesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];

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/pressureDiffAnalysis/pressureDiffAnalysis.data.ts

@@ -169,141 +169,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
-
-export const minesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];
-
-export const historicalMinesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];

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 = 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',
-        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.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;
   }
-});
+
+  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: '-',
   },
 ];
 // 实时数据相关
@@ -172,141 +172,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
-
-export const minesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-11-17 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];
-
-export const historicalMinesData = [
-  {
-    orderNo: 101, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 102, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-  {
-    orderNo: 103, // 序号
-    enforcement: '执法一处', // 区域
-    mineName: '神木市三江', // 煤矿名称
-    sealedName: '采空区密闭', // 密闭名称
-    coalSeam: 'XX煤层', // 所属煤层
-    riskLevel: 'Ⅰ类容易自燃', // 自燃倾向性（与搜索框选项label一致）
-    COVal: 24, // CO浓度(ppm)
-    CH4Val: 0, // CH4浓度(%)
-    C2H2Val: 0, // C2H2浓度(ppm)
-    O2Val: 20, // O2浓度(%)
-    temperature: 35, // 温度(℃)
-    pressureDiff: 50, // 压差(Pa)
-    leakage: '气体涌出', // 是否漏风
-    fireHazard: '低风险', // 自然发火隐患
-    unsealing: '不可启封', // 密闭启封判定
-    explosionHazard: '低风险', // 爆炸危险性
-    updateTime: '2025-12-22 15:00:40', // 更新时间
-    alertTime: '2025-11-17 15:00:40',
-    interPressure: '10',
-    outerPressure: '20',
-  },
-];

src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -62,7 +62,7 @@ export const testConfigSealedGoaf: Config[] = [
     showStyle: {
       size: 'width:440px;height:170px;',
       version: '原版',
-      position: 'top:20px;left:25px;',
+      position: 'top:70px;left:25px;',
     },
   },
   // 2. 当日生产状态
@@ -118,7 +118,7 @@ export const testConfigSealedGoaf: Config[] = [
     showStyle: {
       size: 'width:440px;height:140px;',
       version: '原版',
-      position: 'top:190px;left:25px;',
+      position: 'top:250px;left:25px;',
     },
   },
   // 3. 煤层自燃倾向性
@@ -171,23 +171,23 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:180px;',
+      size: 'width:440px;height:210px;',
       version: '原版',
-      position: 'top:320px;left:25px;',
+      position: 'top:400px;left:25px;',
     },
   },
-  // 4. 联网状态
+  // 4. 当日报警情况统计
   {
-    deviceType: 'isOnline',
-    moduleName: '联网状态',
+    deviceType: 'realtime_monitor',
+    moduleName: '当日报警情况统计',
     pageType: 'sealed_goaf',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
-          value: '${pos}',
+          show: false,
+          value: '',
         },
         slot: {
           show: false,
@@ -200,160 +200,73 @@ export const testConfigSealedGoaf: Config[] = [
         link: '',
       },
       layout: {
-        direction: 'column',
+        direction: 'row',
         items: [
           {
             name: 'board',
-            basis: '40%',
-            overflow: true,
-          },
-          {
-            name: 'table',
-            basis: '60%',
-            overflow: true,
+            basis: '100%',
           },
         ],
       },
       board: [
         {
-          type: 'B',
+          type: 'D',
           readFrom: '',
           layout: 'val-top',
           items: [
             {
-              label: '应接入',
-              value: '210',
+              label: '${overLimitData[0].alarmDesc}',
+              value: '${overLimitData[0].num}',
             },
             {
-              label: '在线',
-              value: '27',
+              label: '${overLimitData[1].alarmDesc}',
+              value: '${overLimitData[1].num}',
             },
             {
-              label: '中断',
-              value: '17',
+              label: '${overLimitData[2].alarmDesc}',
+              value: '${overLimitData[2].num}',
             },
             {
-              label: '未接入',
-              value: '1',
-            },
-          ],
-        },
-      ],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
-        {
-          type: 'B',
-          // parser: 'json',
-          readFrom: 'tableArray',
-          columns: [
-            {
-              name: ' ',
-              prop: 'index',
+              label: '${overLimitData[3].alarmDesc}',
+              value: '${overLimitData[3].num}',
             },
             {
-              name: '应接入',
-              prop: 'yjr',
+              label: '${overLimitData[4].alarmDesc}',
+              value: '${overLimitData[4].num}',
             },
             {
-              name: '在线',
-              prop: 'zx',
+              label: '${overLimitData[5].alarmDesc}',
+              value: '${overLimitData[5].num}',
             },
             {
-              name: '中断',
-              prop: 'zd',
+              label: '${overLimitData[6].alarmDesc}',
+              value: '${overLimitData[6].num}',
             },
             {
-              name: '未接入',
-              prop: 'wjr',
+              label: '${overLimitData[7].alarmDesc}',
+              value: '${overLimitData[7].num}',
             },
           ],
         },
       ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
       list: [],
       complex_list: [],
       preset: [],
-      mock: {
-        isOnline: [
-          {
-            pos: '生成矿井',
-            boardArray: [
-              {
-                label: '低风险',
-                value: '210',
-              },
-              {
-                label: '一般风险',
-                value: '27',
-              },
-              {
-                label: '较高风险',
-                value: '17',
-              },
-              {
-                label: '高风险',
-                value: '1',
-              },
-            ],
-            tableArray: [
-              {
-                index: '执法一处',
-                yjr: '50',
-                zx: '20',
-                zd: '0',
-                wjr: '0',
-              },
-              {
-                index: '执法二处',
-                yjr: '50',
-                zx: '20',
-                zd: '0',
-                wjr: '0',
-              },
-              {
-                index: '执法三处',
-                yjr: '50',
-                zx: '20',
-                zd: '0',
-                wjr: '0',
-              },
-              {
-                index: '执法四处',
-                yjr: '50',
-                zx: '20',
-                zd: '0',
-                wjr: '0',
-              },
-              {
-                index: '执法五处',
-                yjr: '50',
-                zx: '20',
-                zd: '0',
-                wjr: '0',
-              },
-              {
-                index: '执法六处',
-                yjr: '50',
-                zx: '20',
-                zd: '0',
-                wjr: '0',
-              },
-            ],
-          },
-        ],
-      },
     },
     showStyle: {
-      size: 'width:440px;height:315px;',
+      size: 'width:440px;height:250px;',
       version: '原版',
-      position: 'bottom:20px;left:25px;',
+      position: 'top:620px;left:25px;',
     },
   },
-  // 5. 密闭情况总览
+  // 5. 密闭情况总览 更名为 矿井情况总览
   {
     deviceType: 'sealed_info',
-    moduleName: '密闭情况总览',
+    moduleName: '矿井情况总览',
     pageType: 'sealed_goaf',
     moduleData: {
       header: {
@@ -514,27 +427,194 @@ export const testConfigSealedGoaf: Config[] = [
       },
     },
     showStyle: {
-      size: 'width:440px;height:330px;',
+      size: 'width:440px;height:420px;',
       version: '原版',
-      position: 'top:-20px;right:25px;',
+      position: 'top:30px;right:25px;',
     },
   },
   // 6. 采空区密闭预警分析
+  // {
+  //   deviceType: 'goafmonitoring',
+  //   moduleName: '采空区密闭预警分析',
+  //   pageType: 'sealed_goaf',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       readFrom: '',
+  //       selector: {
+  //         show: false,
+  //         value: '${pos}',
+  //       },
+  //       slot: {
+  //         show: true,
+  //         value: '(总计:200)',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: {
+  //       direction: 'column',
+  //       items: [
+  //         {
+  //           name: 'board',
+  //           basis: '42%',
+  //           overflow: true,
+  //         },
+  //         {
+  //           name: 'table',
+  //           basis: '58%',
+  //           overflow: true,
+  //         },
+  //       ],
+  //     },
+  //     board: [
+  //       {
+  //         type: 'C',
+  //         readFrom: '',
+  //         layout: 'val-top',
+  //         items: [
+  //           {
+  //             label: '低风险',
+  //             value: '210',
+  //           },
+  //           {
+  //             label: '一般风险',
+  //             value: '27',
+  //           },
+  //           {
+  //             label: '较高风险',
+  //             value: '17',
+  //           },
+  //           {
+  //             label: '高风险',
+  //             value: '1',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [
+  //       {
+  //         type: 'A',
+  //         // parser: 'json',
+  //         readFrom: 'goafAlarmData',
+  //         columns: [
+  //           {
+  //             name: ' ',
+  //             prop: 'managementName',
+  //           },
+  //           {
+  //             name: '低风险',
+  //             prop: 'alarm1',
+  //           },
+  //           {
+  //             name: '一般风险',
+  //             prop: 'alarm2',
+  //           },
+  //           {
+  //             name: '较高风险',
+  //             prop: 'alarm3',
+  //           },
+  //           {
+  //             name: '高风险',
+  //             prop: 'alarm4',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [],
+  //     // mock: {
+  //     //   goafMonitoring: [
+  //     //     {
+  //     //       pos: '自燃',
+  //     //       boardArray: [
+  //     //         {
+  //     //           label: '低风险',
+  //     //           value: '210',
+  //     //         },
+  //     //         {
+  //     //           label: '一般风险',
+  //     //           value: '27',
+  //     //         },
+  //     //         {
+  //     //           label: '较高风险',
+  //     //           value: '17',
+  //     //         },
+  //     //         {
+  //     //           label: '高风险',
+  //     //           value: '1',
+  //     //         },
+  //     //       ],
+  //     //       tableArray: [
+  //     //         {
+  //     //           managementName: '执法一处',
+  //     //           dfx: '50',
+  //     //           ybfx: '20',
+  //     //           jgfx: '0',
+  //     //           gfx: '0',
+  //     //         },
+  //     //         {
+  //     //           managementName: '执法二处',
+  //     //           dfx: '50',
+  //     //           ybfx: '20',
+  //     //           jgfx: '0',
+  //     //           gfx: '0',
+  //     //         },
+  //     //         {
+  //     //           managementName: '执法三处',
+  //     //           dfx: '50',
+  //     //           ybfx: '20',
+  //     //           jgfx: '0',
+  //     //           gfx: '0',
+  //     //         },
+  //     //         {
+  //     //           managementName: '执法四处',
+  //     //           dfx: '50',
+  //     //           ybfx: '20',
+  //     //           jgfx: '0',
+  //     //           gfx: '0',
+  //     //         },
+  //     //         {
+  //     //           managementName: '执法五处',
+  //     //           dfx: '50',
+  //     //           ybfx: '20',
+  //     //           jgfx: '0',
+  //     //           gfx: '0',
+  //     //         },
+  //     //       ],
+  //     //     },
+  //     //   ],
+  //     // },
+  //   },
+  //   showStyle: {
+  //     size: 'width:440px;height:300px;',
+  //     version: '原版',
+  //     position: 'top:320px;right:25px;',
+  //   },
+  // },
+  // 6. 联网状态
   {
-    deviceType: 'goafmonitoring',
-    moduleName: '采空区密闭预警分析',
+    deviceType: 'isOnline',
+    moduleName: '联网状态',
     pageType: 'sealed_goaf',
     moduleData: {
       header: {
         show: true,
         readFrom: '',
         selector: {
-          show: false,
+          show: true,
           value: '${pos}',
         },
         slot: {
-          show: true,
-          value: '(总计:200)',
+          show: false,
+          value: '',
         },
       },
       background: {
@@ -547,36 +627,36 @@ export const testConfigSealedGoaf: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '42%',
+            basis: '40%',
             overflow: true,
           },
           {
             name: 'table',
-            basis: '58%',
+            basis: '60%',
             overflow: true,
           },
         ],
       },
       board: [
         {
-          type: 'C',
+          type: 'B',
           readFrom: '',
           layout: 'val-top',
           items: [
             {
-              label: '低风险',
+              label: '应接入',
               value: '210',
             },
             {
-              label: '一般风险',
+              label: '在线',
               value: '27',
             },
             {
-              label: '较高风险',
+              label: '中断',
               value: '17',
             },
             {
-              label: '高风险',
+              label: '未接入',
               value: '1',
             },
           ],
@@ -587,29 +667,29 @@ export const testConfigSealedGoaf: Config[] = [
       gallery_list: [],
       table: [
         {
-          type: 'A',
+          type: 'B',
           // parser: 'json',
-          readFrom: 'goafAlarmData',
+          readFrom: 'tableArray',
           columns: [
             {
               name: ' ',
-              prop: 'managementName',
+              prop: 'index',
             },
             {
-              name: '低风险',
-              prop: 'alarm1',
+              name: '应接入',
+              prop: 'yjr',
             },
             {
-              name: '一般风险',
-              prop: 'alarm2',
+              name: '在线',
+              prop: 'zx',
             },
             {
-              name: '较高风险',
-              prop: 'alarm3',
+              name: '中断',
+              prop: 'zd',
             },
             {
-              name: '高风险',
-              prop: 'alarm4',
+              name: '未接入',
+              prop: 'wjr',
             },
           ],
         },
@@ -617,160 +697,80 @@ export const testConfigSealedGoaf: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: {
-      //   goafMonitoring: [
-      //     {
-      //       pos: '自燃',
-      //       boardArray: [
-      //         {
-      //           label: '低风险',
-      //           value: '210',
-      //         },
-      //         {
-      //           label: '一般风险',
-      //           value: '27',
-      //         },
-      //         {
-      //           label: '较高风险',
-      //           value: '17',
-      //         },
-      //         {
-      //           label: '高风险',
-      //           value: '1',
-      //         },
-      //       ],
-      //       tableArray: [
-      //         {
-      //           managementName: '执法一处',
-      //           dfx: '50',
-      //           ybfx: '20',
-      //           jgfx: '0',
-      //           gfx: '0',
-      //         },
-      //         {
-      //           managementName: '执法二处',
-      //           dfx: '50',
-      //           ybfx: '20',
-      //           jgfx: '0',
-      //           gfx: '0',
-      //         },
-      //         {
-      //           managementName: '执法三处',
-      //           dfx: '50',
-      //           ybfx: '20',
-      //           jgfx: '0',
-      //           gfx: '0',
-      //         },
-      //         {
-      //           managementName: '执法四处',
-      //           dfx: '50',
-      //           ybfx: '20',
-      //           jgfx: '0',
-      //           gfx: '0',
-      //         },
-      //         {
-      //           managementName: '执法五处',
-      //           dfx: '50',
-      //           ybfx: '20',
-      //           jgfx: '0',
-      //           gfx: '0',
-      //         },
-      //       ],
-      //     },
-      //   ],
-      // },
-    },
-    showStyle: {
-      size: 'width:440px;height:300px;',
-      version: '原版',
-      position: 'top:320px;right:25px;',
-    },
-  },
-  // 7. 当日报警情况统计
-  {
-    deviceType: 'realtime_monitor',
-    moduleName: '当日报警情况统计',
-    pageType: 'sealed_goaf',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
+      mock: {
+        isOnline: [
           {
-            name: 'board',
-            basis: '100%',
+            pos: '生成矿井',
+            boardArray: [
+              {
+                label: '低风险',
+                value: '210',
+              },
+              {
+                label: '一般风险',
+                value: '27',
+              },
+              {
+                label: '较高风险',
+                value: '17',
+              },
+              {
+                label: '高风险',
+                value: '1',
+              },
+            ],
+            tableArray: [
+              {
+                index: '执法一处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法二处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法三处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法四处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法五处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+              {
+                index: '执法六处',
+                yjr: '50',
+                zx: '20',
+                zd: '0',
+                wjr: '0',
+              },
+            ],
           },
         ],
       },
-      board: [
-        {
-          type: 'D',
-          readFrom: '',
-          layout: 'val-top',
-          items: [
-            {
-              label: '${overLimitData[0].alarmDesc}',
-              value: '${overLimitData[0].num}',
-            },
-            {
-              label: '${overLimitData[1].alarmDesc}',
-              value: '${overLimitData[1].num}',
-            },
-            {
-              label: '${overLimitData[2].alarmDesc}',
-              value: '${overLimitData[2].num}',
-            },
-            {
-              label: '${overLimitData[3].alarmDesc}',
-              value: '${overLimitData[3].num}',
-            },
-            {
-              label: '${overLimitData[4].alarmDesc}',
-              value: '${overLimitData[4].num}',
-            },
-            {
-              label: '${overLimitData[5].alarmDesc}',
-              value: '${overLimitData[5].num}',
-            },
-            {
-              label: '${overLimitData[6].alarmDesc}',
-              value: '${overLimitData[6].num}',
-            },
-            {
-              label: '${overLimitData[7].alarmDesc}',
-              value: '${overLimitData[7].num}',
-            },
-          ],
-        },
-      ],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:205px;',
+      size: 'width:440px;height:420px;',
       version: '原版',
-      position: 'bottom:10px;right:25px;',
+      position: 'top:460px;right:25px;',
     },
   },
 ];

src/views/dashboard/SealedGoaf/index.vue

@@ -2,83 +2,86 @@
 <template>
   <div class="company-home">
     <!-- 渲染所有模块 -->
-    <ModulePrimary v-for="cfg in cfgs" :key="cfg.deviceType + cfg.moduleName" :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-      :visible="true" />
+    <ModulePrimary
+      v-for="cfg in cfgs"
+      :key="cfg.deviceType + cfg.moduleName"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
-import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
-import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum, getGoafAlarmLevel } from './sealedGoaf.api'
-import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
-import { useGlobSetting } from '/@/hooks/setting';
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
+  import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
+  import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum, getGoafAlarmLevel } from './sealedGoaf.api';
+  import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
 
-const { title = '采空区密闭监测与分析系统' } = useGlobSetting();
-const { data, updateData } = useInitPage(title);
+  const { title = '老空区永久密闭监测与分析系统' } = useGlobSetting();
+  const { data, updateData } = useInitPage(title);
 
-const cfgs = computed(() => configs.value);
-const { configs, fetchConfigs } = useInitConfigs();
-const mineData = ref({}); // 所有数据汇总
+  const cfgs = computed(() => configs.value);
+  const { configs, fetchConfigs } = useInitConfigs();
+  const mineData = ref({}); // 所有数据汇总
 
-onMounted(async () => {
-  try {
-    // 1. 先获取基础配置（若有接口获取配置则保留，否则直接用本地testConfigSealedGoaf）
-    await fetchConfigs('sealed_goaf');
+  onMounted(async () => {
+    try {
+      // 1. 先获取基础配置（若有接口获取配置则保留，否则直接用本地testConfigSealedGoaf）
+      await fetchConfigs('sealed_goaf');
 
-    // 2. 异步获取所有接口数据（并行请求提升性能）
-    const [coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel] = await Promise.all([
-      getCoalSeamFireNum(), // 煤层自燃倾向数据
-      getMineProductionStatusNum(), // 当日生产状态数据
-      getOverLimitNum(), // 超限数据（可按需处理）
-      getGoafAlarmNum({}), // 执法处风险统计
-      getGoafAlarmLevel({ mineCode: '100008' }),
-    ]);
+      // 2. 异步获取所有接口数据（并行请求提升性能）
+      const [coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel] = await Promise.all([
+        getCoalSeamFireNum(), // 煤层自燃倾向数据
+        getMineProductionStatusNum(), // 当日生产状态数据
+        getOverLimitNum(), // 超限数据（可按需处理）
+        getGoafAlarmNum({}), // 执法处风险统计
+        getGoafAlarmLevel({ mineCode: '100008' }),
+      ]);
 
-    // 3. 把接口数据赋值给响应式变量（备用）
-    mineData.value = { coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel };
+      // 3. 把接口数据赋值给响应式变量（备用）
+      mineData.value = { coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel };
 
-    // 4. 赋值更新后的配置到configs（触发组件重新渲染）
-    configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新
+      // 4. 赋值更新后的配置到configs（触发组件重新渲染）
+      configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新
 
-    // 5. 更新页面数据
-    updateData(mineData.value);
+      // 5. 更新页面数据
+      updateData(mineData.value);
+    } catch (error) {
+      console.error('数据获取/配置更新失败：', error);
+    }
+  });
 
-  } catch (error) {
-    console.error('数据获取/配置更新失败：', error);
-  }
-});
-
-// 数据处理函数
-onUnmounted(() => { });
+  // 数据处理函数
+  onUnmounted(() => {});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-
+  @import '/@/design/theme.less';
 
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
 
-.company-home {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  background-image: linear-gradient(90deg, @map-bg 0%, @map-bg 14%, transparent 50%, @map-bg 86%, @map-bg 100%);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  z-index: @layout-basic-z-index;
-  // 允许点击穿透以支持下面的地图进行交互
-  pointer-events: none;
-}
+  .company-home {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    color: @white;
+    background-image: linear-gradient(90deg, @map-bg 0%, @map-bg 14%, transparent 50%, @map-bg 86%, @map-bg 100%);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    z-index: @layout-basic-z-index;
+    // 允许点击穿透以支持下面的地图进行交互
+    pointer-events: none;
+  }
 
-:deep(.ant-select-selection-item) {
-  display: flex;
-  align-items: center;
-}
+  :deep(.ant-select-selection-item) {
+    display: flex;
+    align-items: center;
+  }
 </style>

src/views/dashboard/basicInfo/closedStatistics/index.vue

@@ -2,7 +2,7 @@
   <div class="p-4">
     <BasicTable @register="registerTable" :scroll="{ x: 'fit-content' }">
       <template #action="{ record }">
-          <button @click="handleGoToPage(record, `/sealed/${record.code}`)" class="action-btn">
+          <button @click="handleGoToPage(record, `/sealed/${record.code}`)" class="action-btn" title="密闭监测数据">
             <SvgIcon name="view" />
           </button>
         </template>

src/views/dashboard/basicInfo/dataQuality/components/DataQualityModal.vue

@@ -140,6 +140,7 @@ const componentMap = {
   Input,
   DatePicker,
   Select,
+  InputTextArea: Input.TextArea,
   MineCascader
 };
 

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

@@ -159,16 +159,6 @@ export const formSchema :FormSchema[] = [
       { max: 100, message: '工作面名称长度不能超过100个字符', trigger: 'blur' },
     ],
   },
-  {
-    field: 'queCon',
-    label: '问题描述',
-    component: 'Input',
-    required: true,
-    rules: [
-      { required: true, message: '请输入问题描述', trigger: 'blur' },
-      { max: 500, message: '问题描述长度不能超过500个字符', trigger: 'blur' },
-    ],
-  },
   {
     field: 'startTime',
     label: '开始时间',
@@ -196,13 +186,28 @@ export const formSchema :FormSchema[] = [
     ],
   },
   {
-    field: 'param',
-    label: '参数',
-    component: 'Input',
+    field: 'queCon',
+    label: '问题描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      maxlength: 500,
+      showCount: true,
+    },
     required: true,
     rules: [
-      { required: true, message: '请输入参数', trigger: 'blur' },
-      { max: 200, message: '参数长度不能超过200个字符', trigger: 'blur' },
+      { required: true, message: '请输入问题描述', trigger: 'blur' },
+      { max: 500, message: '问题描述长度不能超过500个字符', trigger: 'blur' },
     ],
   },
+  // {
+  //   field: 'param',
+  //   label: '参数',
+  //   component: 'Input',
+  //   required: true,
+  //   rules: [
+  //     { required: true, message: '请输入参数', trigger: 'blur' },
+  //     { max: 200, message: '参数长度不能超过200个字符', trigger: 'blur' },
+  //   ],
+  // },
 ];

src/views/dashboard/basicInfo/dataQuality/index.vue

@@ -12,18 +12,17 @@
           <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
         </template> -->
         <template #queJson="{ record }">
-          <div style="display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between;">
-            <span style=" white-space: pre-line; word-wrap: break-word; line-height: 1.6; display: block; text-align: left; padding: 2px 4px;">
+          <div style="display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between">
+            <span style="white-space: pre-line; word-wrap: break-word; line-height: 1.6; display: block; text-align: left; padding: 2px 4px">
               {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
             </span>
-            <!-- 按钮：无需额外样式，自然靠最右侧 -->
-            <button @click="record && handleOpenModal(record, 'view')" class="action-btn">
+            <button @click="record && handleOpenModal(record, 'view')" class="action-btn" title="查看问题详情">
               <SvgIcon name="view" />
             </button>
           </div>
         </template>
         <template #action="{ record }">
-          <button @click="handleOpenModal(record, 'edit')" class="action-btn">
+          <button @click="handleOpenModal(record, 'edit')" class="action-btn" title="编辑该问题">
             <SvgIcon name="edit" />
           </button>
           <!-- 删除按钮 -->
@@ -36,7 +35,7 @@
             @cancel="handleCancel"
             placement="top"
           >
-            <button class="action-btn">
+            <button class="action-btn" title="删除该问题">
               <SvgIcon name="delete" />
             </button>
           </Popconfirm>
@@ -49,11 +48,11 @@
             @cancel="handleCancel"
             placement="top"
           >
-            <button class="action-btn">
+            <button class="action-btn" title="标记该问题为已解决">
               <SvgIcon name="resolved" />
             </button>
           </Popconfirm>
-          <button @click="handleGoToPage(record)" class="action-btn">
+          <button @click="handleGoToPage(record)" class="action-btn" title="监测详情">
             <SvgIcon name="details" />
           </button>
         </template>
@@ -70,13 +69,13 @@
               {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
             </span>
             <!-- 按钮：无需额外样式，自然靠最右侧 -->
-            <button @click="record && handleOpenModal(record, 'view')" class="action-btn">
+            <button @click="record && handleOpenModal(record, 'view')" class="action-btn" title="查看问题详情">
               <SvgIcon name="view" />
             </button>
           </div>
         </template>
         <template #action="{ record }">
-          <button @click="handleOpenModal(record, 'view')" class="action-btn">
+          <button @click="handleOpenModal(record, 'view')" class="action-btn" title="问题详情">
             <SvgIcon name="details" />
           </button>
         </template>
@@ -234,11 +233,13 @@
       if (!Array.isArray(queList)) return '问题格式异常';
       // 空数组处理
       if (queList.length === 0) return '无质量问题';
-      return queList.map((item) => {
-        const goafName = item.goafName;
-        const queCon = item.queCon || '无描述';
-        return `<${goafName}工作面采空区密闭监测>存在的问题：${queCon}`;
-      }).join('\n'); // 多个问题分行显示
+      return queList
+        .map((item) => {
+          const goafName = item.goafName;
+          const queCon = item.queCon || '无描述';
+          return `<${goafName}工作面老空区永久密闭监测>存在的问题：${queCon}`;
+        })
+        .join('\n'); // 多个问题分行显示
     } catch (error) {
       console.error('解析质量问题JSON失败:', error);
       return '问题数据解析失败';

src/views/dashboard/basicInfo/minesInfo/index.vue

@@ -2,13 +2,13 @@
 <template>
   <BasicTable @register="registerTable">
     <template #action="{ record }">
-      <button @click="handleGoToPageQuery(record, `/sealed/${record.areaId}`)" class="action-btn">
+      <button @click="handleGoToPageQuery(record, `/sealed/${record.areaId}`)" class="action-btn" title="密闭监测数据">
         <SvgIcon name="data" />
       </button>
-      <button @click="handleGoToPage(record, '/basicinfo/access-statistics')" class="action-btn">
+      <button @click="handleGoToPage(record, '/basicinfo/access-statistics')" class="action-btn" title="接入统计数据">
         <SvgIcon name="info" />
       </button>
-      <button @click="handleGoToPageQuery(record, '/warningAnalysis/connectAnalysis')" class="action-btn">
+      <button @click="handleGoToPageQuery(record, '/warningAnalysis/connectAnalysis')" class="action-btn" title="智能分析数据">
         <SvgIcon name="chart" />
       </button>
     </template>

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,17 +81,21 @@
   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';
   import dayjs from 'dayjs';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     components: { BasicModal, MiniBoard, BlastDelta, CustomChart },
+    props: {
+      identifyField: propTypes.string.def('goafId'),
+    },
     emits: ['close', 'register'],
-    setup(__, { emit }) {
+    setup(props, { emit }) {
       const dataRef = ref<any>({});
       const dataArray = ref<any[]>([]);
 
@@ -101,38 +105,19 @@
         dataArray.value = takeRight(concat(dataArray.value, item), 15);
       };
 
-      // const chartData = computed(() => {
-      //   return {
-      //     readTime: dataArray.value.map((item) => item.readTime),
-      //     sourcePressure: dataArray.value.map((item) => item.sourcePressure),
-      //     o2Val: dataArray.value.map((item) => item.o2Val),
-      //     coVal: dataArray.value.map((item) => item.coVal),
-      //   };
-      // });
-      function getTagType(level: string) {
-        switch (level) {
-          case '1':
-            return 'red';
-          case '2':
-            return 'volcano';
-          case '3':
-            return 'orange';
-          case '4':
-            return 'success';
-          default:
-            return 'default';
-        }
-      }
-
       const [register] = useModalInner((d) => {
         if (!d) return;
+        // 没数据或者新传入的数据id不同，说明是首次/点击别的数据列进入的该组件
+        if (!dataRef.value || d[props.identifyField] !== dataRef.value[props.identifyField]) {
+          dataArray.value = [];
+        }
         dataRef.value = d;
         push(d);
         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));
       }
 
@@ -141,7 +126,6 @@
         getGoafData({ mineCodeList: mineCode, goafId }).then((r) => {
           dataRef.value = last(r);
           push(dataRef.value);
-          // push(dataRef.value)
         });
       }
 
@@ -165,7 +149,6 @@
         modalDetailsData,
         dataArray,
         get,
-        getTagType,
         register,
         contextRender,
         okHandler,

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>
@@ -96,7 +96,7 @@
     tableProps: {
       api: (params) => {
         if (!goafId.value) {
-          message.info('请先选择煤矿及采空区');
+          message.info('请先选择煤矿及老空区');
           return Promise.reject();
         }
         params.goafId = goafId.value;

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>

src/views/system/configurable/index.vue

@@ -84,6 +84,7 @@
           xxl: 5,
         },
         schemas: searchFormSchema,
+        schemaGroupNames: ['常规查询'],
       },
       useSearchForm: true,
       striped: true,