联调实时数据表格

src/components/mt-preview-ypt/index.vue

@@ -63,33 +63,7 @@ import type { IDoneJsonEventList } from '../mt-edit/store/types'
 import IframeDia from './iframeDia.vue'
 import MQTT from '@/utils/mqtt'
 const iframeDiaRef = ref<any>(null)
-const tableData = [
+
-    {
-        date: '2023-05-03 13:33:44:853',
-        name: '1#主变分支I',
-        address: '发生暂降，特征幅值:39.87%,持续时间:10.019s'
-    },
-    {
-        date: '2023-05-02 13:31:50:155',
-        name: '1#主变分支I',
-        address: '发生暂降，特征幅值:39.95%,持续时间:5.02s'
-    }
-    // {
-    //     date: '2016-05-04',
-    //     name: '110kV杨镇变',
-    //     address: 'No. 189, Grove St, Los Angeles'
-    // },
-    // {
-    //     date: '2016-05-01',
-    //     name: '110kV加工区变',
-    //     address: 'No. 189, Grove St, Los Angeles'
-    // },
-    // {
-    //     date: '2016-05-01',
-    //     name: '110kV加工区变',
-    //     address: 'No. 189, Grove St, Los Angeles'
-    // }
-]
 const dataList = ref([])
 
 // 节流函数实现 (替代lodash，减少依赖)
@@ -353,57 +327,37 @@ onMounted(async () => {
     if (mtPreviewProps.exportJson) {
         await setImportJson(mtPreviewProps.exportJson)
     }
-    await sendTableData()
+
-    // // 连接mqtt
+    // 连接mqtt
     await setMqtt()
-    // window.parent.postMessage({ action: useData, data: tableData }, '*') // 发送数据给父页面
+    // await sendTableData()
 })
 
-// 无锡大屏通过iframe传过来的数据
+// mqtt推过来的  lineId
-// let keyList = [
-//     '5f99b9ba4e563439ec8490a0c598da8d',
-//     '401a696fe9918bb4cce7d9393d0d5df7',
-//     '74203b186428c1684aa450ad05257b06'
-// ]
-// 无锡大屏通过iframe传过来的数据  lineId
 let keyList = ref<any>([])
 
-// 闪烁点 lineId
+// 实时数据表格
-let list = ref<any>([])
+const tableData = ref()
-
-// 最大点闪烁点lineId
-let listMax = ref<any>([])
-
-// 初始颜色
-let sendColor = ref<any>('')
-// 最大监测点颜色
-let sendMaxColor = ref<any>('')
-
-// 背景色
-let backgroundPointId = ref<any>([])
-let backgroundPointColor = ref<any>('')
 
 const sendTableData = () => {
     try {
-        // 确保只传输可序列化的数据
+        // 类型检查，确保 tableData.value 是数组
-        const cleanData = tableData.map(item => ({
+        if (!Array.isArray(tableData.value)) {
-            name: item.name,
+            console.warn('tableData is not an array, current value:', tableData.value)
-            date: item.date,
+            return
-            address: item.address
-        }))
-
-        // 只发送 useData 中需要的可序列化数据
-        const serializableUseData = {
-            display: useData.display,
-            loading: useData.loading
-            // 添加其他需要的简单属性
         }
 
+        // 确保只传输可序列化的数据
+        const cleanData = tableData.value.map(item => ({
+            name: item.name,
+            date: item.timeId,
+            address: item.eventDesc
+        }))
+
         window.parent.postMessage(
             {
                 action: 'securityDetailData',
                 data: cleanData
-                // data1: serializableUseData
             },
             '*'
         )
@@ -412,15 +366,10 @@ const sendTableData = () => {
     }
 }
 
-// 传输设备相关的连接线ID列表
-let list_sys = ref<any>([])
-
 let transmissionDeviceIds: string[] = []
 
 let eventListAll = ref<any>([])
 
-let flagValue = ref('')
-
 const receiveMessage = () => {
     // 在 iframe 内的页面中
     window.addEventListener('message', function (event) {
@@ -429,54 +378,52 @@ const receiveMessage = () => {
 
         const { type, payload } = event.data
 
-        if (type === 'ANALYSIS_KEYS') {
+        if (type === 'RESET_EVENT') {
+            // 处理复位事件
+            handleResetEvent()
+        } else if (type === 'ANALYSIS_KEYS') {
+            // 处理 ANALYSIS_KEYS 消息
             // 在处理新数据前，先清理现有的动态文字
             if (savedExportJson.value) {
                 savedExportJson.value.json =
                     savedExportJson.value.json?.filter(item => !item.id?.startsWith('auto-text-')) || []
                 done_json.value = done_json.value.filter(item => !item.id?.startsWith('auto-text-'))
             }
-            // console.log('payload1111', payload)
+
-            // 处理接收到的 keyList 数据
+            init()
-            keyList.value = payload.eventList
+        }
-            list.value = payload.eventList
+        // 对于其他类型的消息，我们仍然调用 init()
-            sendColor.value = payload.color
+        else if (type) {
-            // 点击行的全部数据
+            init()
-            if (payload.eventListAll) {
-                eventListAll.value = payload.eventListAll
-            } else {
-                eventListAll.value = []
-            }
-            if (payload.maxColor) {
-                sendMaxColor.value = payload.maxColor
-            } else {
-                sendMaxColor.value = ''
-            }
-            if (payload.maxResponsibilityMonitorId) {
-                listMax.value = payload.maxResponsibilityMonitorId
-            } else {
-                listMax.value = []
-            }
-            if (payload.backgroundPointId) {
-                backgroundPointId.value = payload.backgroundPointId
-            } else {
-                backgroundPointId.value = []
-            }
-            if (payload.backgroundPointColor) {
-                backgroundPointColor.value = payload.backgroundPointColor
-            } else {
-                backgroundPointColor.value = ''
-            }
-            if (payload.flagValue) {
-                flagValue.value = payload.flagValue
-            } else {
-                flagValue.value = ''
-            }
         }
-        init()
     })
 }
 
+// 复位事件处理函数
+const handleResetEvent = () => {
+    //  清空或重置 表格数据
+    // if (tableData.value && Array.isArray(tableData.value)) {
+    //     tableData.value = []
+    // } else {
+    //     // 确保 tableData 是一个空数组
+    //     tableData.value = []
+    // }
+
+    // 接线图数据
+    keyList.value = []
+
+    setTimeout(() => {
+        // 表格数据
+        sendTableData()
+        // 接线图数据
+        if (savedExportJson.value) {
+            setImportJson(savedExportJson.value)
+        }
+    }, 100)
+
+    console.log('执行复位操作完成')
+}
+
 //根据 lineId 查找传输设备 ID 的函数
 const findTransmissionDeviceIdsByKeyList = (array: any) => {
     if (!savedExportJson.value?.json) return []
@@ -551,59 +498,12 @@ const setImportJson = (exportJson: IExportJson) => {
         setTimeout(() => {
             done_json.value.forEach(item => {
                 //报警设备闪烁
-                if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
+                if (findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)) {
-                    // item.props.fill.val = '#fcfc57'
+                    item.props.fill.val = 'red'
-                    item.props.fill.val = sendColor.value
                     item.common_animations.val = 'flash'
-                    if (findTransmissionDeviceIdsByKeyList(listMax.value).includes(item.id)) {
-                        item.props.fill.val = sendMaxColor.value
-                        item.common_animations.val = 'flash'
-                    }
-
-                    // 查找与该设备连接的线
-                    const connectedLines = searchDevicesConnect([item.id!])
-                    // console.log('该设备连接的线:', connectedLines)
-
-                    // 通过连接的线找到开关，再找到开关连接的所有线
-                    const allRelatedLines: string[] = [...connectedLines]
-
-                    for (const lineId of connectedLines) {
-                        // 通过线找到连接的开关
-                        const switchId = findSwitchByLineEndpoint(lineId)
-                        if (switchId) {
-                            // console.log('找到连接的开关:', switchId)
-
-                            // 找到开关连接的所有线
-                            const switchLines = findLinesBySwitchId(switchId)
-                            // console.log('开关连接的线:', switchLines)
-
-                            // 合并所有相关的线
-                            switchLines.forEach(line => {
-                                if (!allRelatedLines.includes(line)) {
-                                    allRelatedLines.push(line)
-                                }
-                            })
-                        }
-                    }
-
-                    //console.log('所有相关的线:', allRelatedLines)
                 } else {
                     item.common_animations.val = ''
                 }
-
-                if (findTransmissionDeviceIdsByKeyList(backgroundPointId.value).includes(item.id)) {
-                    item.props.fill.val = backgroundPointColor.value
-                    item.common_animations.val = 'flash'
-                }
-
-                // 报警设备连线电流
-                // if (list_sys.value.includes(item.id)) {
-                //     item.props.ani_type.val = 'electricity'
-                //     item.props.ani_color.val = '#d0e20a'
-                // }
-                // if(item.id=='sys-line-vertical-v9oPMlvQL1'){
-                //      item.props.ani_color.val = '#8c0ae2'
-                // }
             })
         }, 1000)
     }
@@ -638,62 +538,6 @@ const setImportJson = (exportJson: IExportJson) => {
     return true
 }
 
-// 根据线的起点或终点查找连接的开关
-const findSwitchByLineEndpoint = (lineId: string): string | null => {
-    if (!savedExportJson.value?.json) return null
-
-    const line = savedExportJson.value.json.find(item => item.id === lineId)
-    if (!line || !line.props?.bind_anchors) return null
-
-    const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
-    if (!bindAnchors) return null
-
-    // 查找起点连接的开关
-    const startId = bindAnchors.start?.id
-    if (startId) {
-        const startElement = savedExportJson.value.json.find(item => item.id === startId)
-        if (startElement && startElement.title?.includes('开关')) {
-            return startElement.id!
-        }
-    }
-
-    // 如果起点不是开关，查找终点连接的开关
-    const endId = bindAnchors.end?.id
-    if (endId) {
-        const endElement = savedExportJson.value.json.find(item => item.id === endId)
-        if (endElement && endElement.title?.includes('开关')) {
-            return endElement.id!
-        }
-    }
-
-    return null
-}
-
-// 根据开关ID查找所有连接的线
-const findLinesBySwitchId = (switchId: string): string[] => {
-    if (!savedExportJson.value?.json) return []
-
-    const lineElements = savedExportJson.value.json.filter(item => item.type === 'sys-line' && item.props?.bind_anchors)
-
-    const connectedLines: string[] = []
-
-    for (const line of lineElements) {
-        const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
-        if (!bindAnchors) continue
-
-        const startId = bindAnchors.start?.id
-        const endId = bindAnchors.end?.id
-
-        if (startId === switchId || endId === switchId) {
-            connectedLines.push(line.id!)
-        }
-    }
-
-    // console.log('连接的线:', connectedLines)
-
-    return connectedLines
-}
-
 // 添加一个新的 ref 来存储当前点击的设备ID
 const currentClickedElementId = ref<string | null>(null)
 
@@ -827,26 +671,6 @@ const init = async () => {
         // 调用函数获取传输设备 ID
         transmissionDeviceIds = findTransmissionDeviceIdsByKeyList(keyList.value)
 
-        //传入参数: transmissionDeviceIds - 一个包含传输设备ID的数组
-        // 功能: 查找与这些传输设备相关的连接线（包括直接连接和间接连接的线）
-        list_sys.value = searchDevicesConnect(transmissionDeviceIds)
-
-        // 将结果赋值给 savedExportJson.value
-        // if (savedExportJson.value) {
-        //     // 创建一个新的对象，避免直接修改原始对象
-        //     savedExportJson.value = {
-        //         ...savedExportJson.value,
-        //         json: updatedDoneJson
-        //     }
-        // } else {
-        //     // 如果 savedExportJson.value 不存在，创建一个新的对象
-        //     savedExportJson.value = {
-        //         canvasCfg: canvas_cfg.value,
-        //         gridCfg: grid_cfg.value,
-        //         json: updatedDoneJson
-        //     }
-        // }
-
         // 重新设置导入的JSON以触发界面更新
         setImportJson(savedExportJson.value)
     }, 100)
@@ -869,10 +693,33 @@ const setMqtt = async () => {
         // 设置消息接收回调
         mqttClient.value.onMessage((subscribe: string, message: any) => {
             const msg: any = uint8ArrayToObject(message)
-            console.log('🚀 ~ setMqtt ~ msg:', msg)
+            // console.log('🚀 ~ setMqtt ~ msg:', msg)
             if (subscribe.split('/')[2] === 'csConfigRtData') {
                 // 指标数据
                 dataList.value = JSON.parse(msg.message)
+                //console.log('🚀 ~ setMqtt ~ dataList:', dataList.value)
+                //  keyList.value = JSON.parse(list.path).canvasCfg.lineList
+            }
+            if (subscribe.split('/')[2] === 'TemperData') {
+                // 表格数据
+                tableData.value = []
+                tableData.value = JSON.parse(msg.message)
+                //console.log('🚀 ~ setMqtt ~ tableData:', tableData.value)
+                // 闪烁点
+                // if (Array.isArray(tableData.value) && tableData.value.length > 0) {
+                //     // 提取所有的 id 并去重（使用 Set 方式，性能更好）
+                //     const uniqueIds = [
+                //         ...new Set(
+                //             tableData.value
+                //                 .filter(item => item.id) // 确保 id 存在
+                //                 .map(item => item.id) // 提取 id
+                //         )
+                //     ]
+
+                //     keyList.value = uniqueIds
+                //     console.log('提取的唯一ID列表:', keyList.value)
+                // }
+                sendTableData()
             }
         })
     } catch (error) {
@@ -884,7 +731,7 @@ const publish = async (list: any) => {
     if (mqttClient.value) {
         // 发送消息
         await mqttClient.value.publish(
-            '/zl/askCSConfigWarnData/' + useData.dataTree[0].id,
+            '/zl/askCSConfigWarnData/' + storedSelectedId,
             `[${JSON.parse(list.path).canvasCfg.lineList}]`
         )
         if (timer.value) {
@@ -894,7 +741,7 @@ const publish = async (list: any) => {
         timer.value = setInterval(
             () => {
                 mqttClient.value.publish(
-                    '/zl/askCSConfigWarnData/' + useData.dataTree[0].id,
+                    '/zl/askCSConfigWarnData/' + storedSelectedId,
                     `[${JSON.parse(list.path).canvasCfg.lineList}]`
                 )
             },
@@ -907,7 +754,7 @@ const indicator = async (ids: string[]) => {
     if (mqttClient.value) {
         // await mqttClient.value.subscribe('zl/askCSConfigRtData/' + useData.dataTree[0].id)
         // 发送消息
-        await mqttClient.value.publish('/zl/askCSConfigRtData/' + useData.dataTree[0].id, `[${ids}]`)
+        await mqttClient.value.publish('/zl/askCSConfigRtData/' + storedSelectedId, `[${ids}]`)
     }
 }