Web/svgeditor2.0
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

联调实时数据表格

Browse Source
This commit is contained in:
stt
2025-12-09 13:22:04 +08:00
parent da26b1d237
commit 2698ca4f5c
1 changed files with 83 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
src/components/mt-preview-ypt/index.vue
View File

@@ -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传过来的数据
// let keyList = [
// '5f99b9ba4e563439ec8490a0c598da8d',
// '401a696fe9918bb4cce7d9393d0d5df7',
// '74203b186428c1684aa450ad05257b06'
// ]
// 无锡大屏通过iframe传过来的数据 lineId
// mqtt推过来的 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>('')
// 实时数据表格
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<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 数据
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<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}]`)
}
}