连接mqtt

src/components/mt-edit/components/layout/left-aside-list/index.vue

@@ -22,7 +22,7 @@
                     </el-icon>
                 </el-tooltip>
                 <el-tooltip content="删除" placement="top">
-                    <el-icon @click.stop="del(scope.$index,scope.row)" style="margin-left: 5px; cursor: pointer">
+                    <el-icon @click.stop="del(scope.$index, scope.row)" style="margin-left: 5px; cursor: pointer">
                         <Delete />
                     </el-icon>
                 </el-tooltip>
@@ -205,7 +205,7 @@ const onAddClick = () => {
 }
 
 // 删除功能，传索引行数
-function del(index: number,row: any) {
+function del(index: number, row: any) {
     ElMessageBox.confirm('确定删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/components/mt-edit/components/layout/main-panel/index.vue

@@ -1420,11 +1420,10 @@ watch(
 
         time.value = setTimeout(() => {
             console.log('🚀 ~ globalStore:', globalStore)
-            if(useData.keyName==''){
+            if (useData.keyName == '') {
                 ElMessage.warning('请选择图纸！')
             }
 
-
             const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
             // const data_model: any = {
             //   canvasCfg: globalStore.canvasCfg,

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

@@ -61,9 +61,9 @@ import { globalStore } from '../mt-edit/store/global'
 import type { IDoneJsonEventList } from '../mt-edit/store/types'
 
 import MQTT from '@/utils/mqtt'
-import { log } from 'console'
 
-const tableData = [
+// 实时数据表格
+const tableData = ref([
     {
         date: '2023-05-03 13:33:44:853',
         name: '1#主变分支I',
@@ -89,7 +89,7 @@ const tableData = [
     //     name: '110kV加工区变',
     //     address: 'No. 189, Grove St, Los Angeles'
     // }
-]
+])
 
 const showDetail = ref(false)
 
@@ -355,7 +355,11 @@ const setItemAttrByIDAsync = (id: string, key: string, val: any) => {
 ;(window as any).$mtEventCallBack = (type: string, item_id: string, ...args: any[]) =>
     emits('onEventCallBack', type, item_id, ...args)
 
+// 闪烁点 lineId
+let keyList = ref<any>([])
+
 onMounted(async () => {
+    keyList.value = ['00B78D0171092']
     // 启动消息监听  iframe传过来的参数
     receiveMessage()
 
@@ -363,65 +367,31 @@ onMounted(async () => {
         await setImportJson(mtPreviewProps.exportJson)
     }
     await sendTableData()
-    if (useData.graphicDisplay == 'zl') {
+    if (useData.graphicDisplay == 'ypt') {
         // // 治理项目连接mqtt
         await setMqtt()
     }
-    // window.parent.postMessage({ action: useData, data: tableData }, '*') // 发送数据给父页面
 })
 
-// 无锡大屏通过iframe传过来的数据
-// let keyList = [
-//     '5f99b9ba4e563439ec8490a0c598da8d',
-//     '401a696fe9918bb4cce7d9393d0d5df7',
-//     '74203b186428c1684aa450ad05257b06'
-// ]
-// 无锡大屏通过iframe传过来的数据  lineId
-let keyList = ref<any>([])
-
-// 闪烁点 lineId
-let list = ref<any>([])
-
-// 最大点闪烁点lineId
-let listMax = ref<any>([])
-
-// 初始颜色
-let sendColor = ref<any>('')
-// 最大监测点颜色
-let sendMaxColor = ref<any>('')
-
-// 背景色
-let backgroundPointId = ref<any>([])
-let backgroundPointColor = ref<any>('')
-
-// let list = [
-//     'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
-//     'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
-//     // 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH',
-//     'c53cccb8c65201c192d8c57fbdb4d993-LH9I0qD86s'
-// ]
-
 const sendTableData = () => {
     try {
+        // 类型检查，确保 tableData.value 是数组
+        if (!Array.isArray(tableData.value)) {
+            console.warn('tableData is not an array, current value:', tableData.value)
+            return
+        }
+
         // 确保只传输可序列化的数据
-        const cleanData = tableData.map(item => ({
+        const cleanData = tableData.value.map(item => ({
             name: item.name,
             date: item.date,
             address: item.address
         }))
 
-        // 只发送 useData 中需要的可序列化数据
-        const serializableUseData = {
-            display: useData.display,
-            loading: useData.loading
-            // 添加其他需要的简单属性
-        }
-
         window.parent.postMessage(
             {
                 action: 'securityDetailData',
                 data: cleanData
-                // data1: serializableUseData
             },
             '*'
         )
@@ -453,60 +423,53 @@ 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 数据
-            keyList.value = payload.eventList
-            list.value = payload.eventList
-            sendColor.value = payload.color
-            // 点击行的全部数据
-            if (payload.eventListAll) {
-                eventListAll.value = payload.eventListAll
-                // 在数据接收后重新更新文本
-                setTimeout(() => {
-                    if (savedExportJson.value) {
-                        addTextNextToTransport()
 
+            // 处理接收到的 keyList 数据
+            keyList.value = payload.eventList || payload
+
+            init()
+        }
+        // 对于其他类型的消息，我们仍然调用 init()
+        else if (type) {
+            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)
-            } else {
+
-                eventListAll.value = []
+    console.log('执行复位操作完成')
-            }
-            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()
-    })
 }
 
 //根据 lineId 查找传输设备 ID 的函数
@@ -515,7 +478,7 @@ const findTransmissionDeviceIdsByKeyList = (array: any) => {
 
     const deviceIds = savedExportJson.value.json.filter(item => array.includes(item.lineId ?? '')).map(item => item.id)
 
-    // console.log('传输设备 ID 列表:', deviceIds)
+    //console.log('传输设备 ID 列表:', deviceIds)
 
     return deviceIds
 }
@@ -583,65 +546,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)
-
-                    // 高亮显示所有相关的线
-                    //只有当 flagValue 不等于 '2' 时才高亮显示所有相关的线
-                    if (flagValue.value !== '2') {
-                        highlightLines(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)
     }
@@ -964,32 +874,8 @@ const setDoneJson = async (kId: string) => {
 
 const init = async () => {
     setTimeout(() => {
-        // 执行动态添加文本的操作
-        // const updatedDoneJson = addTextNextToTransport()
-
         // 调用函数获取传输设备 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)
@@ -999,14 +885,14 @@ const timer = ref()
 // 连接mqtt
 const mqttClient = ref()
 const setMqtt = async () => {
-    mqttClient.value = new MQTT('/zl/rtData/#')
+    mqttClient.value = new MQTT('/ypt/rtData/#')
 
     // 设置消息接收回调
     try {
         await mqttClient.value.init()
 
         // 订阅主题
-        await mqttClient.value.subscribe('/zl/rtData/#')
+        await mqttClient.value.subscribe('/ypt/rtData/#')
 
         // 设置消息接收回调
         mqttClient.value.onMessage((subscribe: string, message: any) => {
@@ -1027,18 +913,18 @@ const setMqtt = async () => {
     }
 }
 const publish = async (id: string) => {
-    if (useData.graphicDisplay != 'zl') return //质量项目进入
+    if (useData.graphicDisplay != 'ypt') return //质量项目进入
     if (mqttClient.value) {
-        await mqttClient.value.subscribe('zl/askRtData/' + id)
+        await mqttClient.value.subscribe('ypt/askRtData/' + id)
         // 发送消息
-        await mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+        await mqttClient.value.publish('/ypt/askRtData/' + id, '{}')
         if (timer.value) {
             clearInterval(timer.value)
             timer.value = null
         }
         timer.value = setInterval(
             () => {
-                mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+                mqttClient.value.publish('/ypt/askRtData/' + id, '{}')
             },
             3 * 60 * 1000
         )