[Feat 0000]预警模块下各页面问题修复

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

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+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';
@@ -73,6 +73,7 @@ import formConfig from '/@/components/Form/src/jeecg/components/formCard/formCon
 import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
 // 引入模拟数据
 import { columns, historyColumns, searchFormSchema } from './airLeakStatus.data';
+import dayjs from 'dayjs';
 
 // 激活的Tab页签
 const activeTab = ref('realtime');
@@ -96,8 +97,8 @@ const alarmFiled = ref('');
 const historyData = ref([]);
 const lawDeptOptions = ref([]);
 // 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
+const [registerTable, { reload }] = useTable({
+  dataSource: ref([]),
   title: '密闭漏风状态判定',
   api: getProvinceAlarm,
   columns,
@@ -139,22 +140,24 @@ const [registerHistoryTable] = useTable({
         label: '开始时间',
         field: 'startTime',
         component: 'DatePicker',
+        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择开始时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
+        colProps: { span: 6 },
         rules: [{ required: true, message: '请选择开始时间' }],
       },
       {
         label: '结束时间',
         field: 'endTime',
         component: 'DatePicker',
+        defaultValue: dayjs(),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择结束时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
         colProps: { span: 6 },
         rules: [{ required: true, message: '请选择结束时间' }],
@@ -225,7 +228,11 @@ const [registerHistoryTable] = useTable({
 // 弹窗引用
 const realtimeModalRef = ref(null);
 const historyModalRef = ref(null);
-
+// 定时器
+let timer: IntervalHandle;
+const fetchTableData = async () => {
+  await reload();
+};
 // 打开弹窗方法（区分实时/历史）
 const openModal = (record, type) => {
   if (type === 'realtime') {
@@ -243,17 +250,6 @@ const openModal = (record, type) => {
     historyModalRef.value?.showModal(record);
   }
 };
-// async function fetchAlarmData(id) {
-//   const params = {
-//     // 填写所需参数
-//     alarmType: 'leakageAlarm',
-//     mineCodeList: id,
-//     pageNo: 1,
-//     pageSize: 50,
-//   };
-//   const result = await getProvinceAlarm(params);
-//   minesData.value = result.records;
-// }
 async function getAlarmTotalData() {
   const params = {
     alarmType: 'leakageAlarm',
@@ -320,6 +316,14 @@ onMounted(() => {
   getMineDataList();
   getEnfMineData();
   getAlarmTotalData();
+  timer = setInterval(() => {
+    fetchTableData();
+  }, 5000);
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 

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

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+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';
@@ -64,6 +64,8 @@ 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';
+
 // 激活的Tab页签
 const activeTab = ref('realtime');
 const visibleModal = ref(false);
@@ -98,7 +100,7 @@ const boardData = ref([
 ]);
 const minesData = ref([]);
 // 注册实时数据表格
-const [registerTable] = useTable({
+const [registerTable, { reload }] = useTable({
   dataSource: minesData,
   columns,
   api: getProvinceAlarm,
@@ -142,22 +144,24 @@ const [registerHistoryTable] = useTable({
         label: '开始时间',
         field: 'startTime',
         component: 'DatePicker',
+        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择开始时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
+        colProps: { span: 6 },
         rules: [{ required: true, message: '请选择开始时间' }],
       },
       {
         label: '结束时间',
         field: 'endTime',
         component: 'DatePicker',
+        defaultValue: dayjs(),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择结束时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
         colProps: { span: 6 },
         rules: [{ required: true, message: '请选择结束时间' }],
@@ -228,7 +232,11 @@ const [registerHistoryTable] = useTable({
 // 弹窗引用
 const realtimeModalRef = ref(null);
 const historyModalRef = ref(null);
-
+// 定时器
+let timer: IntervalHandle;
+const fetchTableData = async () => {
+  await reload();
+};
 // 打开弹窗方法（区分实时/历史）
 const openModal = (record, type) => {
   if (type === 'realtime') {
@@ -301,6 +309,14 @@ onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
   getAlarmTotalData();
+  timer = setInterval(() => {
+    fetchTableData();
+  }, 5000);
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 

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

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+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';
@@ -63,6 +63,8 @@ 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';
+
 // 激活的Tab页签
 const activeTab = ref('realtime');
 const visibleModal = ref(false);
@@ -89,7 +91,7 @@ const boardData = ref([
 ]);
 const minesData = ref([]);
 // 注册实时数据表格
-const [registerTable] = useTable({
+const [registerTable, { reload }] = useTable({
   dataSource: minesData,
   columns,
   api: getProvinceAlarm,
@@ -133,22 +135,24 @@ const [registerHistoryTable] = useTable({
         label: '开始时间',
         field: 'startTime',
         component: 'DatePicker',
+        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择开始时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
+        colProps: { span: 6 },
         rules: [{ required: true, message: '请选择开始时间' }],
       },
       {
         label: '结束时间',
         field: 'endTime',
         component: 'DatePicker',
+        defaultValue: dayjs(),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择结束时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
         colProps: { span: 6 },
         rules: [{ required: true, message: '请选择结束时间' }],
@@ -219,7 +223,11 @@ const [registerHistoryTable] = useTable({
 // 弹窗引用
 const realtimeModalRef = ref(null);
 const historyModalRef = ref(null);
-
+// 定时器
+let timer: IntervalHandle;
+const fetchTableData = async () => {
+  await reload();
+};
 // 打开弹窗方法（区分实时/历史）
 const openModal = (record, type) => {
   if (type === 'realtime') {
@@ -289,6 +297,14 @@ onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
   getAlarmTotalData();
+  timer = setInterval(() => {
+    fetchTableData();
+  }, 5000);
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 

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

@@ -54,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+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';
@@ -62,7 +62,7 @@ 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);
@@ -97,7 +97,7 @@ const boardData = ref([
 ]);
 const minesData = ref([]);
 // 注册实时数据表格
-const [registerTable] = useTable({
+const [registerTable, { reload }] = useTable({
   dataSource: minesData,
   columns,
   api: getProvinceAlarm,
@@ -141,22 +141,24 @@ const [registerHistoryTable] = useTable({
         label: '开始时间',
         field: 'startTime',
         component: 'DatePicker',
+        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择开始时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
+        colProps: { span: 6 },
         rules: [{ required: true, message: '请选择开始时间' }],
       },
       {
         label: '结束时间',
         field: 'endTime',
         component: 'DatePicker',
+        defaultValue: dayjs(),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择结束时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
         colProps: { span: 6 },
         rules: [{ required: true, message: '请选择结束时间' }],
@@ -227,7 +229,11 @@ const [registerHistoryTable] = useTable({
 // 弹窗引用
 const realtimeModalRef = ref(null);
 const historyModalRef = ref(null);
-
+// 定时器
+let timer: IntervalHandle;
+const fetchTableData = async () => {
+  await reload();
+};
 // 打开弹窗方法（区分实时/历史）
 const openModal = (record, type) => {
   if (type === 'realtime') {
@@ -299,6 +305,14 @@ onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
   getAlarmTotalData();
+  timer = setInterval(() => {
+    fetchTableData();
+  }, 5000);
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 

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

@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+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';
@@ -78,7 +78,7 @@ 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);
@@ -113,7 +113,7 @@ const boardData = ref([
 ]);
 const minesData = ref([]);
 // 注册实时数据表格
-const [registerTable] = useTable({
+const [registerTable, { reload }] = useTable({
   dataSource: minesData,
   columns,
   api: getProvinceAlarm,
@@ -157,22 +157,24 @@ const [registerHistoryTable] = useTable({
         label: '开始时间',
         field: 'startTime',
         component: 'DatePicker',
+        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择开始时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
+        colProps: { span: 6 },
         rules: [{ required: true, message: '请选择开始时间' }],
       },
       {
         label: '结束时间',
         field: 'endTime',
         component: 'DatePicker',
+        defaultValue: dayjs(),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择结束时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
         colProps: { span: 6 },
         rules: [{ required: true, message: '请选择结束时间' }],
@@ -243,7 +245,11 @@ const [registerHistoryTable] = useTable({
 // 弹窗引用
 const realtimeModalRef = ref(null);
 const historyModalRef = ref(null);
-
+// 定时器
+let timer: IntervalHandle;
+const fetchTableData = async () => {
+  await reload();
+};
 // 打开弹窗方法（区分实时/历史）
 const openModal = (record, type) => {
   if (type === 'realtime') {
@@ -316,6 +322,14 @@ onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
   getAlarmTotalData();
+  timer = setInterval(() => {
+    fetchTableData();
+  }, 5000);
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 

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

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+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';
@@ -64,7 +64,7 @@ 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);
@@ -99,7 +99,7 @@ const boardData = ref([
 ]);
 const minesData = ref([]);
 // 注册实时数据表格
-const [registerTable] = useTable({
+const [registerTable, { reload }] = useTable({
   dataSource: minesData,
   columns,
   api: getProvinceAlarm,
@@ -143,22 +143,24 @@ const [registerHistoryTable] = useTable({
         label: '开始时间',
         field: 'startTime',
         component: 'DatePicker',
+        defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择开始时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
-        colProps: { span: 6 }, // 占比可根据布局调整
+        colProps: { span: 6 },
         rules: [{ required: true, message: '请选择开始时间' }],
       },
       {
         label: '结束时间',
         field: 'endTime',
         component: 'DatePicker',
+        defaultValue: dayjs(),
         componentProps: {
           showTime: true,
-          // valueFormat: 'YYYY-MM-DD HH:mm:ss',
           placeholder: '请选择结束时间',
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
         },
         colProps: { span: 6 },
         rules: [{ required: true, message: '请选择结束时间' }],
@@ -229,7 +231,11 @@ const [registerHistoryTable] = useTable({
 // 弹窗引用
 const realtimeModalRef = ref(null);
 const historyModalRef = ref(null);
-
+// 定时器
+let timer: IntervalHandle;
+const fetchTableData = async () => {
+  await reload();
+};
 // 打开弹窗方法（区分实时/历史）
 const openModal = (record, type) => {
   if (type === 'realtime') {
@@ -302,6 +308,14 @@ onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
   getAlarmTotalData();
+  timer = setInterval(() => {
+    fetchTableData();
+  }, 5000);
+});
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>