Przeglądaj źródła

[Feat 0000]新增密闭监测-实时数据监测页面

wangkeyi 4 miesięcy temu
rodzic
commit
2840053b4c

+ 31 - 0
mock/sys/menu.ts

@@ -3600,6 +3600,37 @@ export default [
             name: 'basicInfo',
             id: '1439398677984878593',
           },
+          {
+            redirect: null,
+            path: '/sealedMonitoring',
+            component: 'layouts/default/index',
+            route: '1',
+            children: [
+              {
+                path: '/sealedMonitoring/realtimeData',
+                component: 'dashboard/sealedMonitoring/realtimeData',
+                route: '1',
+                meta: {
+                  keepAlive: true,
+                  internalOrExternal: false,
+                  icon: 'ant-design:windows-outlined',
+                  componentName: 'index',
+                  title: '实时数据监测',
+                },
+                name: 'sealedMonitoring-realtimeDataIndex',
+                id: '9502685863ab87f0ad1134142788a377',
+              },
+            ],
+            meta: {
+              keepAlive: false,
+              internalOrExternal: false,
+              icon: 'ant-design:home-outlined',
+              componentName: 'index',
+              title: '密闭监测',
+            },
+            name: 'sealedMonitoring',
+            id: '1439398677984878593',
+          },
           {
             redirect: null,
             path: '/isystem',

+ 8 - 0
src/assets/images/common/icon-details.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.209" height="14.26" viewBox="0 0 13.209 14.26">
+  <g id="详情" transform="translate(-99.2 -64.9)">
+    <path id="路径_55589" data-name="路径 55589" d="M112.157,68.438l-.707-.772L109.8,65.857l-.59-.646a.959.959,0,0,0-.707-.311h-7.862A1.438,1.438,0,0,0,99.2,66.336V77.724a1.438,1.438,0,0,0,1.436,1.436h10.337a1.438,1.438,0,0,0,1.436-1.436v-8.64A.969.969,0,0,0,112.157,68.438Zm-.707.646h-2.473a.478.478,0,0,1-.479-.479V65.857Zm0,8.639a.478.478,0,0,1-.479.479H100.636a.478.478,0,0,1-.479-.479V66.336a.478.478,0,0,1,.479-.479h6.9v2.749a1.438,1.438,0,0,0,1.436,1.436h2.473Z" fill="#606266"/>
+    <path id="路径_55590" data-name="路径 55590" d="M263.725,694.557h-7.246a.479.479,0,0,1,0-.957h7.244a.479.479,0,0,1,0,.957Z" transform="translate(-154.298 -618.668)" fill="#606266"/>
+    <path id="路径_55591" data-name="路径 55591" d="M263.725,511.857h-7.246a.479.479,0,0,1,0-.957h7.244a.479.479,0,0,1,0,.957Z" transform="translate(-154.298 -438.883)" fill="#606266"/>
+    <path id="路径_55592" data-name="路径 55592" d="M259.785,329.057h-3.306a.479.479,0,1,1,0-.957h3.3a.479.479,0,0,1,0,.957Z" transform="translate(-154.298 -259)" fill="#606266"/>
+  </g>
+</svg>

+ 0 - 148
src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -774,151 +774,3 @@ export const testConfigSealedGoaf: Config[] = [
   },
 ];
 
-export const modalDetailsData:{} = {
-  basicInfo:[
-    {
-      label: '煤矿名称',
-      value: '神木市三江能源有限公司',
-    },
-    {
-      label: '密闭名称',
-      value: 'xxxx采空区密闭',
-    },
-    {
-      label: '所属煤层',
-      value: 'xxxx煤层',
-    },
-    {
-      label: '自燃情况',
-      value: 'Ⅰ类容易自燃',
-    },
-    {
-      label: '是否漏风',
-      value: '闭内气体涌出',
-    },
-    {
-      label: '自然发火隐患',
-      value: '低风险',
-    },
-    {
-      label: '密闭启封判定',
-      value: '不可启封',
-    },
-    {
-      label: '爆炸危险性',
-      value: '低风险',
-    },
-  ],
-  board: [
-    {
-      label: 'CO(ppm)',
-      value: '21',
-    },
-    {
-      label: 'CO2(PPM)',
-      value: '21',
-    },
-    {
-      label: 'O2(%)',
-      value: '24',
-    },
-    {
-      label: 'CH4(%)',
-      value: '17',
-    },
-    {
-      label: 'C2H4(ppm)',
-      value: '23',
-    },
-    {
-      label: 'C2H2(ppm)',
-      value: '14',
-    },
-    {
-      label: '温度(℃)',
-      value: '14',
-    },
-    {
-      label: '压差(Pa)',
-      value: '14',
-    },
-  ],
-  demoBlastData:{
-    // 爆炸三角形顶点坐标数据(JSON字符串格式)
-    btTriBlast: JSON.stringify({
-    A_x: 0, A_y: 21,
-    B_x: 50, B_y: 0,
-    E_x: 10, E_y: 15,
-    F_x: 30, F_y: 5,
-    G_x: 5, G_y: 18
-  }),
-  o2val: "12.5",
-  coval: "2000",
-  gasval: "5.2",
-  ch2val: "1500",
-  chval: "800"
-  },
-  gasConcentrationConfig :{
-    type: 'line_smooth', // 使用光滑曲线类型
-    legend: { show: true },
-    xAxis: [{ 
-      type: 'category', 
-      dataKey: 'time', 
-      name: '时间', 
-      axisLabel: {color: '#000000'}, 
-      nameTextStyle: { color: '#000' },
-    }],
-    yAxis: [{ 
-      type: 'value',
-      show: true, 
-      name: '浓度(%)',
-      splitLine: { show: false },
-      axisLine: {
-        show: true,
-        lineStyle: { color: '#333' }
-      },
-      axisLabel: {color: '#000000'}, 
-      nameTextStyle: { color: '#000' },    }],
-    series: [
-      {
-        label: '气体浓度',
-        readFrom: 'gasData',
-        xprop: 'time',
-        yprop: 'value',
-        // color: '#000'
-      },
-    ],
-  },
-  gasConcentrationData:{
-    gasData:[
-    // 示例数据,实际应从接口获取
-    { time: '00:00', value: 25.5 },
-    { time: '04:00', value: 26.3 },
-    { time: '08:00', value: 30.9 },
-    { time: '12:00', value: 27.8 },
-    { time: '16:00', value: 29.1 },
-    { time: '20:00', value: 25.5 },
-  ]},
-  pressureConfig:{
-    type: 'line', // 使用普通折线图类型
-    legend: { show: true,color:'#000000' },
-    xAxis: [{ type: 'category', dataKey: 'time', name: '时间', axisLabel: { color: '#000000' } }],
-    yAxis: [{ show: true, name: '压力(kPa)', axisLabel: { color: '#000000' } }],
-    series: [
-      { label: '内部压力', readFrom: 'chartdata', xprop: 'time', yprop: 'inner' },
-      { label: '外部压力', readFrom: 'chartdata', xprop: 'time', yprop: 'outer' },
-      { label: '压力差', readFrom: 'chartdata', xprop: 'time', yprop: 'diff' },
-    ],
-  },
-  pressureData:{
-    chartdata: [
-      // 示例数据,实际应从接口获取
-      { time: '00:00', inner: 12, outer: 18, diff:6},
-      { time: '04:00', inner: 15, outer: 17, diff:2},
-      { time: '08:00', inner: 13, outer: 19, diff:6},
-      { time: '12:00', inner: 11, outer: 10, diff:1},
-      { time: '16:00', inner: 14, outer: 18, diff:4},
-      { time: '20:00', inner: 16, outer: 16, diff:0},
-    ]
-  }
-}

+ 2 - 8
src/views/dashboard/SealedGoaf/index.vue

@@ -29,9 +29,7 @@
       :data="data"
       :visible="true"
     />
-    <button @click="openModal">打开监测详情</button>
-    <!-- 监测详情弹框,放在这里是为了展示该组件而已,后续删除 -->
-    <MonitoringDetailsModal ref="monitoringModalRef" />
+
   </div>
 </template>
 <script lang="ts" setup>
@@ -41,7 +39,7 @@
   import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
   import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
   import { useGlobSetting } from '/@/hooks/setting';
-  import MonitoringDetailsModal from './components/MonitoringDetailsModal.vue';
+
 
   const { title = '省局采空区密闭监测与分析系统' } = useGlobSetting();
   const { data, updateData, mainTitle } = useInitPage(title);
@@ -67,10 +65,6 @@
 
   // 数据处理函数
   onUnmounted(() => {});
-  const monitoringModalRef = ref(null);
-  const openModal = () => {
-    monitoringModalRef.value.showModal();
-  };
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';

+ 2 - 2
src/views/dashboard/SealedGoaf/components/MonitoringDetailsModal.vue → src/views/dashboard/sealedMonitoring/realtimeData/components/MonitoringDetailsModal.vue

@@ -1,6 +1,6 @@
 <template>
   <Modal
-    v-model:visible="visible"
+    v-model:open="visible"
     title="密闭监测详情"
     width="1200px"
     @ok="handleOk"
@@ -77,7 +77,7 @@ import { Modal } from 'ant-design-vue';
 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 } from '../configurable.data.sealedGoaf'
+import { modalDetailsData } from '../realtimeData.data'
 
 // 控制弹框显隐
 const visible = ref(false);

+ 58 - 0
src/views/dashboard/sealedMonitoring/realtimeData/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }" >
+      <template #action="{ record }">
+        <div class="action-buttons">
+          <button @click="openModal(record)" class="action-btn">
+            <img src="@/assets/images/common/icon-details.svg" class="action-icon" />
+          </button>
+        </div>
+      </template>
+    </BasicTable>
+    
+    <!-- 监测详情弹框 -->
+    <MonitoringDetailsModal ref="monitoringModalRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { columns, searchFormSchema, minesData } from './realtimeData.data';
+  import MonitoringDetailsModal from './components/MonitoringDetailsModal.vue';
+
+  // 注册表格并获取相关方法
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  const monitoringModalRef = ref(null);
+  const openModal = (record) => {
+    monitoringModalRef.value?.showModal();
+  };
+
+</script>
+<style lang="less" scoped>
+  .action-btn {
+    cursor: pointer;
+  }
+</style>

+ 325 - 0
src/views/dashboard/sealedMonitoring/realtimeData/realtimeData.data.ts

@@ -0,0 +1,325 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    dataIndex: 'orderNo',
+  },
+  {
+    title: '区域',
+    dataIndex: 'enforcement',
+  },
+  {
+    title: '煤矿名称',
+    dataIndex: 'mineName',
+  },
+  {
+    title: '密闭名称',
+    dataIndex: 'sealedName',
+  },
+  {
+    title: '所属煤层',
+    dataIndex: 'coalSeam',
+  },
+  {
+    title: '自燃倾向性',
+    dataIndex: 'riskLevel',
+  },
+  {
+    title: 'CO(ppm)',
+    dataIndex: 'COVal',
+  },
+  {
+    title: 'CH4(%)',
+    dataIndex: 'CH4Val',
+  },
+  {
+    title: 'C2H2(ppm)',
+    dataIndex: 'C2H2Val',
+  },
+  {
+    title: 'O2(%)',
+    dataIndex: 'O2Val',
+  },
+  {
+    title: '温度(℃)',
+    dataIndex: 'temperature',
+  },
+  {
+    title: '压差(Pa)',
+    dataIndex: 'pressureDiff',
+  },
+  {
+    title: '是否漏风',
+    dataIndex: 'leakage',
+  },
+  {
+    title: '自然发火隐患',
+    dataIndex: 'fireHazard',
+  },
+  {
+    title: '密闭启封判定',
+    dataIndex: 'unsealing',
+  },
+  {
+    title: '爆炸危险性',
+    dataIndex: 'explosionHazard',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'mineName',
+    label: '煤矿名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'mineNameAbbr',
+    label: '煤矿简称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'productStatus',
+    label: '生产状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '拟建矿井', value: '0' },
+        { label: '正常生产矿井', value: '1' },
+        { label: '长期停产矿井', value: '1' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'riskLevel',
+    label: '自燃情况',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'Ⅰ类容易自燃', value: '0' },
+        { label: 'Ⅱ类自燃', value: '1' },
+        { label: 'Ⅲ类不易自燃', value: '2' },
+      ],
+    },
+    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', // 更新时间
+  },
+  {
+    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', // 更新时间
+  },
+  {
+    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', // 更新时间
+  },
+]
+
+export const modalDetailsData:{} = {
+  basicInfo:[
+    {
+      label: '煤矿名称',
+      value: '神木市三江能源有限公司',
+    },
+    {
+      label: '密闭名称',
+      value: 'xxxx采空区密闭',
+    },
+    {
+      label: '所属煤层',
+      value: 'xxxx煤层',
+    },
+    {
+      label: '自燃情况',
+      value: 'Ⅰ类容易自燃',
+    },
+    {
+      label: '是否漏风',
+      value: '闭内气体涌出',
+    },
+    {
+      label: '自然发火隐患',
+      value: '低风险',
+    },
+    {
+      label: '密闭启封判定',
+      value: '不可启封',
+    },
+    {
+      label: '爆炸危险性',
+      value: '低风险',
+    },
+  ],
+  board: [
+    {
+      label: 'CO(ppm)',
+      value: '21',
+    },
+    {
+      label: 'CO2(PPM)',
+      value: '21',
+    },
+    {
+      label: 'O2(%)',
+      value: '24',
+    },
+    {
+      label: 'CH4(%)',
+      value: '17',
+    },
+    {
+      label: 'C2H4(ppm)',
+      value: '23',
+    },
+    {
+      label: 'C2H2(ppm)',
+      value: '14',
+    },
+    {
+      label: '温度(℃)',
+      value: '14',
+    },
+    {
+      label: '压差(Pa)',
+      value: '14',
+    },
+  ],
+  demoBlastData:{
+    // 爆炸三角形顶点坐标数据(JSON字符串格式)
+    btTriBlast: JSON.stringify({
+    A_x: 0, A_y: 21,
+    B_x: 50, B_y: 0,
+    E_x: 10, E_y: 15,
+    F_x: 30, F_y: 5,
+    G_x: 5, G_y: 18
+  }),
+  o2val: "12.5",
+  coval: "2000",
+  gasval: "5.2",
+  ch2val: "1500",
+  chval: "800"
+  },
+  gasConcentrationConfig :{
+    type: 'line_smooth', // 使用光滑曲线类型
+    legend: { show: true },
+    xAxis: [{ 
+      type: 'category', 
+      dataKey: 'time', 
+      name: '时间', 
+      axisLabel: {color: '#000000'}, 
+      nameTextStyle: { color: '#000' },
+    }],
+    yAxis: [{ 
+      type: 'value',
+      show: true, 
+      name: '浓度(%)',
+      splitLine: { show: false },
+      axisLine: {
+        show: true,
+        lineStyle: { color: '#333' }
+      },
+      axisLabel: {color: '#000000'}, 
+      nameTextStyle: { color: '#000' },    }],
+    series: [
+      {
+        label: '气体浓度',
+        readFrom: 'gasData',
+        xprop: 'time',
+        yprop: 'value',
+        // color: '#000'
+      },
+    ],
+  },
+  gasConcentrationData:{
+    gasData:[
+    // 示例数据,实际应从接口获取
+    { time: '00:00', value: 25.5 },
+    { time: '04:00', value: 26.3 },
+    { time: '08:00', value: 30.9 },
+    { time: '12:00', value: 27.8 },
+    { time: '16:00', value: 29.1 },
+    { time: '20:00', value: 25.5 },
+  ]},
+  pressureConfig:{
+    type: 'line', // 使用普通折线图类型
+    legend: { show: true,color:'#000000' },
+    xAxis: [{ type: 'category', dataKey: 'time', name: '时间', axisLabel: { color: '#000000' } }],
+    yAxis: [{ show: true, name: '压力(kPa)', axisLabel: { color: '#000000' } }],
+    series: [
+      { label: '内部压力', readFrom: 'chartdata', xprop: 'time', yprop: 'inner' },
+      { label: '外部压力', readFrom: 'chartdata', xprop: 'time', yprop: 'outer' },
+      { label: '压力差', readFrom: 'chartdata', xprop: 'time', yprop: 'diff' },
+    ],
+  },
+  pressureData:{
+    chartdata: [
+      // 示例数据,实际应从接口获取
+      { time: '00:00', inner: 12, outer: 18, diff:6},
+      { time: '04:00', inner: 15, outer: 17, diff:2},
+      { time: '08:00', inner: 13, outer: 19, diff:6},
+      { time: '12:00', inner: 11, outer: 10, diff:1},
+      { time: '16:00', inner: 14, outer: 18, diff:4},
+      { time: '20:00', inner: 16, outer: 16, diff:0},
+    ]
+  }
+}