右侧三模块增加10s轮询处理

src/components/MineMonitor/RightAiWarning.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { getCarLogList } from '@/api/index-dp';
 import { useMessage } from 'naive-ui';
 
@@ -57,6 +57,10 @@ const ringLayers: RingLayer[] = [
 // 3. 获取 Canvas 元素 Ref
 const chartCanvasRef = ref<HTMLCanvasElement | null>(null);
 
+// 轮询相关变量
+const pollingTimer = ref<number | null>(null);
+const POLLING_INTERVAL = 10000; // 10秒
+
 // 4. 封装绘制核心函数
 const drawChart = () => {
   const canvas = chartCanvasRef.value;
@@ -134,8 +138,8 @@ const drawChart = () => {
   drawSectors();
 };
 
-// 5. 挂载后初始化图表（DOM 渲染完成后执行）
-onMounted(() => {
+// 获取数据的函数
+const fetchData = () => {
   getCarLogList().then((response) => {
     if (response.data.code == 200) {
       // 使用 ref 的 value 属性更新数据，确保是响应式的
@@ -159,13 +163,41 @@ onMounted(() => {
     console.error('获取数据失败:', error);
     message.error('获取数据失败');
   });
+};
+
+// 开始轮询
+const startPolling = () => {
+  // 先清除已存在的定时器
+  if (pollingTimer.value) {
+    clearInterval(pollingTimer.value);
+  }
+  
+  // 立即获取一次数据
+  fetchData();
+  
+  // 设置定时器，每10秒获取一次数据
+  pollingTimer.value = window.setInterval(() => {
+    fetchData();
+  }, POLLING_INTERVAL);
+};
+
+// 停止轮询
+const stopPolling = () => {
+  if (pollingTimer.value) {
+    clearInterval(pollingTimer.value);
+    pollingTimer.value = null;
+  }
+};
+
+// 5. 挂载后初始化图表（DOM 渲染完成后执行）
+onMounted(() => {
+  startPolling();
 });
 
-// // 可选：监听数据变化重新绘制（如需动态更新数据可启用）
-// import { watch } from 'vue';
-// watch(chartData, () => {
-//   drawChart();
-// }, { deep: true });
+// 组件卸载前清除定时器
+onBeforeUnmount(() => {
+  stopPolling();
+});
 </script>
 
 <style scoped lang="scss">

src/components/MineMonitor/RightEnvMonitor.vue

@@ -48,26 +48,58 @@ import {
 
 const message = useMessage();
 
+// 轮询相关变量
+const pollingTimer = ref<number | null>(null);
+const POLLING_INTERVAL = 10000; // 10秒
 
 const tableData = ref({});
 
 const fetchData = async () => {
-  const response = await getEnvironmentData();
-  if (response.data.code == 200) {
-    tableData.value = response.data.data
-  } else {
-    message.error(response.data.msg)
+  try {
+    const response = await getEnvironmentData();
+    if (response.data.code == 200) {
+      tableData.value = response.data.data
+    } else {
+      message.error(response.data.msg)
+    }
+  } catch (error) {
+    console.error('获取环境监测数据失败:', error);
+    message.error('获取环境监测数据失败');
   }
 }
 
-// 组件挂载时获取数据
-onMounted(() => {
+// 开始轮询
+const startPolling = () => {
+  // 先清除已存在的定时器
+  if (pollingTimer.value) {
+    clearInterval(pollingTimer.value);
+  }
+  
+  // 立即获取一次数据
   fetchData();
+  
+  // 设置定时器，每10秒获取一次数据
+  pollingTimer.value = window.setInterval(() => {
+    fetchData();
+  }, POLLING_INTERVAL);
+};
+
+// 停止轮询
+const stopPolling = () => {
+  if (pollingTimer.value) {
+    clearInterval(pollingTimer.value);
+    pollingTimer.value = null;
+  }
+};
+
+// 组件挂载时启动轮询
+onMounted(() => {
+  startPolling();
 });
 
 // 组件卸载前清除定时器
 onBeforeUnmount(() => {
-  
+  stopPolling();
 });
 </script>
 

src/components/MineMonitor/RightTodayAlarm.vue

@@ -160,6 +160,10 @@ const monitorScrollWrapper = ref(null)
 // 滚动定时器
 let scrollTimer = null
 
+// 轮询定时器
+const pollingTimer = ref<number | null>(null);
+const POLLING_INTERVAL = 10000; // 10秒
+
 // SOS报警数据
 const sosData = ref([])
 
@@ -173,44 +177,96 @@ const boundaryData = ref([])
 const monitorData = ref([])
 
 const fetchSosData = async () => {
-  const response = await getSosList();
-  console.log(response, 'SOS报警列表')
-  
-  if (response.data.code == 200) {
-    sosData.value = response.data.data || []
-  } else {
-    message.error(response.data.msg)
+  try {
+    const response = await getSosList();
+    console.log(response, 'SOS报警列表')
+    
+    if (response.data.code == 200) {
+      sosData.value = response.data.data || []
+    } else {
+      message.error(response.data.msg)
+    }
+  } catch (error) {
+    console.error('获取SOS报警数据失败:', error);
+    message.error('获取SOS报警数据失败');
   }
 }
 
 const fetchvehicleData = async () => {
-  const response = await getCarAlarmList();
-  if (response.data.code == 200) {
-    vehicleData.value = response.data.data
-  } else {
-    message.error(response.data.msg)
+  try {
+    const response = await getCarAlarmList();
+    if (response.data.code == 200) {
+      vehicleData.value = response.data.data
+    } else {
+      message.error(response.data.msg)
+    }
+  } catch (error) {
+    console.error('获取车辆报警数据失败:', error);
+    message.error('获取车辆报警数据失败');
   }
 }
 
 const fetchFenceData = async () => {
-  const response = await getFenceLogList();
-  if (response.data.code == 200) {
-    boundaryData.value = response.data.data
-  } else {
-    message.error(response.data.msg)
+  try {
+    const response = await getFenceLogList();
+    if (response.data.code == 200) {
+      boundaryData.value = response.data.data
+    } else {
+      message.error(response.data.msg)
+    }
+  } catch (error) {
+    console.error('获取越界开采数据失败:', error);
+    message.error('获取越界开采数据失败');
   }
 }
 
 const fetchMonitorData = async () => {
-  const response = await getOnlineAlarmList();
-  if (response.data.code == 200) {
-    console.log(response.data.data, '在线监测列表')
-    monitorData.value = response.data.data
-  } else {
-    message.error(response.data.msg)
+  try {
+    const response = await getOnlineAlarmList();
+    if (response.data.code == 200) {
+      console.log(response.data.data, '在线监测列表')
+      monitorData.value = response.data.data
+    } else {
+      message.error(response.data.msg)
+    }
+  } catch (error) {
+    console.error('获取在线监测数据失败:', error);
+    message.error('获取在线监测数据失败');
   }
 }
 
+// 获取所有数据的函数
+const fetchAllData = () => {
+  fetchSosData();
+  fetchvehicleData();
+  fetchFenceData();
+  fetchMonitorData();
+};
+
+// 开始轮询
+const startPolling = () => {
+  // 先清除已存在的定时器
+  if (pollingTimer.value) {
+    clearInterval(pollingTimer.value);
+  }
+  
+  // 立即获取一次数据
+  fetchAllData();
+  
+  // 设置定时器，每10秒获取一次数据
+  pollingTimer.value = window.setInterval(() => {
+    fetchAllData();
+  }, POLLING_INTERVAL);
+};
+
+// 停止轮询
+const stopPolling = () => {
+  if (pollingTimer.value) {
+    clearInterval(pollingTimer.value);
+    pollingTimer.value = null;
+  }
+};
+
 // 定义tabs 使用computed使其具有响应性
 const tabs = computed(() => [
   { name: 'SOS报警', count: sosData.value.length },
@@ -313,19 +369,20 @@ watch([sosData, vehicleData, boundaryData, monitorData], () => {
   })
 })
 
-// 组件挂载时初始化滚动
+// 组件挂载时启动轮询
 onMounted(() => {
-  fetchSosData()
-  fetchvehicleData()
-  fetchFenceData()
-  fetchMonitorData()
+  startPolling();
 })
 
-// 组件卸载前清除定时器
+// 组件卸载前清除所有定时器
 onBeforeUnmount(() => {
+  // 清除滚动定时器
   if (scrollTimer) {
     clearInterval(scrollTimer)
   }
+  
+  // 清除轮询定时器
+  stopPolling();
 })
 </script>