feat: 完成接口联调

src/stores/websocketStore.ts

@@ -0,0 +1,44 @@
+// stores/websocketStore.ts
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useWebSocketStore = defineStore('websocket', () => {
+    const messages = ref<string[]>([]);
+    const showModal = ref(false);
+    const currentMessage = ref('');
+    let socket: WebSocket | null = null;
+
+    const connect = () => {
+        try {
+            socket = new WebSocket('ws://192.168.10.14:8000/ws/logs/');
+
+            socket.addEventListener('open', () => {
+                console.log('WebSocket 连接已打开');
+            });
+
+            socket.addEventListener('message', (event) => {
+                messages.value.push(JSON.parse(event.data));
+                currentMessage.value = event.data;
+                showModal.value = true;
+            });
+
+            socket.addEventListener('close', () => {
+                console.log('WebSocket 连接已关闭，尝试重连...');
+                // setTimeout(connect, 5000);
+            });
+
+            socket.addEventListener('error', (error) => {
+                console.error('WebSocket 连接出错:', error);
+                socket?.close();
+                // setTimeout(connect, 5000);
+            });
+        } catch (err) {
+            console.error('创建 WebSocket 实例时出错:', err);
+            // setTimeout(connect, 5000);
+        }
+    };
+
+    connect();
+
+    return { messages, showModal, currentMessage };
+});

src/views/dashboard/AppearanceMonitor.vue

@@ -102,6 +102,8 @@ import { isSuccessApi } from "@/utils/forApi";
 import PointModal from './components/PointModal.vue'
 import AlarmModal from './components/AlarmModal.vue'
 import DeleteModal from './components/DeleteModal.vue'
+import { useWebSocketStore } from '@/stores/websocketStore';
+import { onBeforeRouteLeave } from 'vue-router';
 
 import "swiper/css";
 import 'swiper/scss';
@@ -113,6 +115,25 @@ const swiperRef = ref(null);
 const isPointOpen = ref<Boolean>(false); //点云弹窗
 const isAlarmOpen = ref<Boolean>(false); //详情弹窗
 const isDeleteOpen = ref<Boolean>(false); //删除弹窗
+const websocketStore = useWebSocketStore();
+// 监听 messages 的变化
+watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
+    // console.log('新消息数组:', newMessages[newMessages?.length - 1].content);
+    // console.log('旧消息数组:', oldMessages);
+    // if (newMessages?.length > oldMessages?.length) {
+    //     // 说明有新消息到来
+    //     const newMessage = newMessages[newMessages?.length - 1];
+    //     // console.log('接收到新的 WebSocket 消息:', newMessage);
+        
+    //     // 这里可以添加更多的处理逻辑，例如弹出提示框等
+    // }
+    if(newMessages?.length > 0 && !isAlarmOpen.value) {
+      console.log(newMessages[newMessages?.length - 1],'newMessages[newMessages?.length - 1]');
+        currentRow.value = newMessages[newMessages?.length - 1];
+        currFileList.value = newMessages[newMessages?.length - 1]?.images;
+        isAlarmOpen.value = true;
+    }
+}, { deep: true, immediate: true });
 const columns = [
   {
     label: "站点",
@@ -289,18 +310,7 @@ const getFileList = async () => {
         const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
         console.log(res.data, 'getDetailList_data')
         if (isSuccessApi(res)) {
-            // currFileList.value = res.data.data;
+            currFileList.value = res.data.data;
-            currFileList.value = [
-              {
-                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-              },{
-                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-              },{
-                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-              },{
-                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
-              }
-            ]
             currFile.value = res.data.data[0];
             activeIndex.value = 0;
         }
@@ -357,6 +367,7 @@ const handleQuery = () => {
 // 重置方法
 const handleReset = () => {
   searchForm.train_number = '';
+  searchForm.station = '';
   searchForm.train_carriage_number = '';
   searchForm.fault_type = '';
   getList()
@@ -383,6 +394,12 @@ const handleRowClick = (row, event, rowIndex) => {
   getFileList()
 };
 
+onBeforeRouteLeave(() => {
+    isAlarmOpen.value = false;
+    currentRow.value = {};
+    currFileList.value = [];
+});
+
 onMounted(() => {
   getList();
 });

src/views/dashboard/DataOverview.vue

@@ -154,6 +154,7 @@
         </div>
       </div>
     </div>
+    <AlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" @close="isAlarmOpen = false" />
   </div>
 </template>
 
@@ -166,6 +167,9 @@ import PieChartSmall from "./components/PieChartSmall.vue";
 import DeviceStatus from "./components/DeviceStatus.vue";
 import { getDataOverviewApi, getDeviceInfowApi, getRecordFaultApi, getRealTimeApi } from '@/api/dashboard';
 import { isSuccessApi } from "@/utils/forApi";
+import AlarmModal from './components/AlarmModal.vue'
+import { useWebSocketStore } from '@/stores/websocketStore';
+import { onBeforeRouteLeave } from 'vue-router';
 
 defineOptions({
   name: "DataOverviewWrap"
@@ -197,6 +201,20 @@ const carFaultTotal = ref([]);
 const poleFaultTotal = ref([]);
 const imageFault = ref([]);
 const activeBtn = ref("month");
+const isAlarmOpen = ref<Boolean>(false); //详情弹窗
+const currentRow = ref<Record<string, any>>({}); // 当前选中行
+const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
+
+const websocketStore = useWebSocketStore();
+// 监听 messages 的变化
+watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
+    if(newMessages?.length > 0 && !isAlarmOpen.value) {
+        currentRow.value = newMessages[newMessages?.length - 1];
+        currFileList.value = newMessages[newMessages?.length - 1]?.images;
+        isAlarmOpen.value = true;
+    }
+}, { deep: true, immediate: true });
+
 const getList = async (dateType: string = "month") => {
   activeBtn.value = dateType
   const res = await getDataOverviewApi({ dateType })
@@ -272,6 +290,11 @@ const getRealTime = async () => {
     console.error('获取设备信息出错:', error);
   }
 }
+onBeforeRouteLeave(() => {
+    isAlarmOpen.value = false;
+    currentRow.value = {};
+    currFileList.value = [];
+});
 onMounted(() => {
   getList()
   getDeviceInfo()

src/views/dashboard/DeviceStatus.vue

@@ -46,6 +46,7 @@
             <RealVideoModal v-model:value="isRealOpen" :info="currentRow" @close="isRealOpen = false" />
             <HistoryVideoModal ref="historyModalRef" v-model:value="isHistoryOpen" :info="currentRow"
                 :historyVideos="historyVideos" @close="isHistoryOpen = false" />
+            <AlarmModal v-model:value="isAlarmOpen" :info="currentDetailRow" :image="currFileList" @close="isAlarmOpen = false" />
         </div>
     </div>
 </template>
@@ -61,6 +62,9 @@ import outLineIcon from '@/assets/common/outline_icon.png';
 import errorIcon from '@/assets/common/error_icon.png';
 import { getDeviceStatusApi } from '@/api/dashboard';
 import { isSuccessApi } from "@/utils/forApi";
+import AlarmModal from './components/AlarmModal.vue'
+import { useWebSocketStore } from '@/stores/websocketStore';
+import { onBeforeRouteLeave } from 'vue-router';
 
 defineOptions({
     name: "DeviceStatusIndex"
@@ -104,6 +108,19 @@ const isRealOpen = ref<Boolean>(false); // 实时视频弹窗
 const isHistoryOpen = ref<Boolean>(false); // 历史视频弹窗
 const historyVideos = ref<Record<string, any>[]>([]); //历史视频数据
 const historyModalRef = ref(null);
+const isAlarmOpen = ref<Boolean>(false); //详情弹窗
+const currentDetailRow = ref<Record<string, any>>({}); // 当前选中行
+const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
+
+const websocketStore = useWebSocketStore();
+// 监听 messages 的变化
+watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
+    if(newMessages?.length > 0 && !isAlarmOpen.value) {
+        currentDetailRow.value = newMessages[newMessages?.length - 1];
+        currFileList.value = newMessages[newMessages?.length - 1]?.images;
+        isAlarmOpen.value = true;
+    }
+}, { deep: true, immediate: true });
 
 const columns = [
     {
@@ -238,7 +255,11 @@ function openHistory(row) {
     currentRow.value = row;
     fetchHistoryList();
 }
-
+onBeforeRouteLeave(() => {
+    isAlarmOpen.value = false;
+    currentDetailRow.value = {};
+    currFileList.value = [];
+});
 onMounted(() => {
     getList();
 });

src/views/dashboard/PoleMonitor.vue

@@ -95,6 +95,7 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { onBeforeRouteLeave } from 'vue-router';
 import Player from '@/components/videoPlayer/Player.vue'
 import ContentHeader from '@/components/ContentHeader.vue';
 import { BaseTable } from "@/components/CustomTable";
@@ -105,6 +106,7 @@ import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/da
 import { isSuccessApi } from "@/utils/forApi";
 import AlarmModal from './components/AlarmModal.vue'
 import DeleteModal from './components/DeleteModal.vue'
+import { useWebSocketStore } from '@/stores/websocketStore';
 import "swiper/css";
 import 'swiper/scss';
 import 'swiper/scss/navigation';
@@ -248,7 +250,15 @@ const dataLoading = ref(true);
 const isAlarmOpen = ref<Boolean>(false); //详情弹窗
 const isDeleteOpen = ref<Boolean>(false); //删除弹窗
 
-
+const websocketStore = useWebSocketStore();
+// 监听 messages 的变化
+watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
+    if(newMessages?.length > 0 && !isAlarmOpen.value) {
+        currentRow.value = newMessages[newMessages?.length - 1];
+        currFileList.value = newMessages[newMessages?.length - 1]?.images;
+        isAlarmOpen.value = true;
+    }
+}, { deep: true, immediate: true });
 // const isCurrPlaying = computed(() => {
 //     return (index) => {
 //         return isPlaying.value && (activeIndex === index)
@@ -341,6 +351,7 @@ const handleQuery = () => {
 // 重置方法
 const handleReset = () => {
     searchForm.train_number = '';
+    searchForm.station = '';
     searchForm.train_carriage_number = '';
     searchForm.fault_type = '';
     getList()
@@ -365,7 +376,11 @@ const handleRowClick = (row, event, rowIndex) => {
     currentRow.value = row;
     getFileList()
 };
-
+onBeforeRouteLeave(() => {
+    isAlarmOpen.value = false;
+    currentRow.value = {};
+    currFileList.value = [];
+});
 onMounted(() => {
     getList();
 });