diff --git a/src/components/mt-preview-ypt/index.vue b/src/components/mt-preview-ypt/index.vue index 7bb6efa..e80d104 100644 --- a/src/components/mt-preview-ypt/index.vue +++ b/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(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传过来的数据 -// let keyList = [ -// '5f99b9ba4e563439ec8490a0c598da8d', -// '401a696fe9918bb4cce7d9393d0d5df7', -// '74203b186428c1684aa450ad05257b06' -// ] -// 无锡大屏通过iframe传过来的数据 lineId +// mqtt推过来的 lineId let keyList = ref([]) -// 闪烁点 lineId -let list = ref([]) - -// 最大点闪烁点lineId -let listMax = ref([]) - -// 初始颜色 -let sendColor = ref('') -// 最大监测点颜色 -let sendMaxColor = ref('') - -// 背景色 -let backgroundPointId = ref([]) -let backgroundPointColor = ref('') +// 实时数据表格 +const tableData = ref() const sendTableData = () => { try { - // 确保只传输可序列化的数据 - const cleanData = tableData.map(item => ({ - name: item.name, - date: item.date, - address: item.address - })) - - // 只发送 useData 中需要的可序列化数据 - const serializableUseData = { - display: useData.display, - loading: useData.loading - // 添加其他需要的简单属性 + // 类型检查,确保 tableData.value 是数组 + if (!Array.isArray(tableData.value)) { + console.warn('tableData is not an array, current value:', tableData.value) + return } + // 确保只传输可序列化的数据 + 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([]) - let transmissionDeviceIds: string[] = [] let eventListAll = ref([]) -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 数据 - keyList.value = payload.eventList - list.value = payload.eventList - sendColor.value = payload.color - // 点击行的全部数据 - 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() + } + // 对于其他类型的消息,我们仍然调用 init() + else if (type) { + init() } - 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)) { - // item.props.fill.val = '#fcfc57' - item.props.fill.val = sendColor.value + if (findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)) { + item.props.fill.val = 'red' 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(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}]`) } }