diff --git a/src/api/index.ts b/src/api/index.ts index 30439f5..6069a8b 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -78,6 +78,13 @@ export function targetList(params: any) { params: params }) } +// 云平台 +export function eleEpdChooseTree_ypt() { + return http.request({ + url: '/cs-system-boot/csDictData/eleEpdChooseTree', + method: 'post', + }) +} // 无锡指标列表 export function eleEpdChooseTree_wx() { return http.request({ diff --git a/src/components/mt-edit/components/layout/header-panel/index.vue b/src/components/mt-edit/components/layout/header-panel/index.vue index 828df63..35039ba 100644 --- a/src/components/mt-edit/components/layout/header-panel/index.vue +++ b/src/components/mt-edit/components/layout/header-panel/index.vue @@ -55,12 +55,12 @@ - + - + diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue b/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue index 75c8d5b..a0ee800 100644 --- a/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue +++ b/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue @@ -105,7 +105,7 @@ import { ElForm, ElFormItem, ElTreeSelect } from 'element-plus' import { computed, ref, watch, onMounted, reactive, nextTick, watchEffect } from 'vue' import type { IDoneJson } from '@/components/mt-edit/store/types' import { globalStore } from '@/components/mt-edit/store/global' -import { lineTree, targetList, eleEpdChooseTree_wx } from '@/api/index' +import { lineTree, targetList, eleEpdChooseTree_wx, eleEpdChooseTree_ypt } from '@/api/index' import { useDataStore } from '@/stores/menuList' import { lineTree_wx } from '@/api/index_wx' import { templateRef } from '@vueuse/core' @@ -190,11 +190,11 @@ watch( if (item_title.value == '绑定指标' && deptIds.value) { indexList() } - if (useData.graphicDisplay == 'ypt') { - if (deptIds.value) { - indexList() - } - } + // if (useData.graphicDisplay == 'ypt') { + // if (deptIds.value) { + // indexList() + // } + // } }) } }) @@ -267,6 +267,10 @@ const fetchData = async () => { try { const response = await lineTree({}) treeData.value = buildLevel3Tree(response.data) // 转换数据格式并赋值给 transformedData + if (useData.graphicDisplay == 'ypt') { + const res = await eleEpdChooseTree_ypt() + treeIndexs.value = res.data // 转换数据格式并赋值给 transformedData + } } catch (error) { console.error('Error fetching data:', error) } @@ -340,11 +344,11 @@ const handleDeptChange = (deptId: []) => { } } - if (useData.graphicDisplay == 'ypt') { - if (deptId) { - indexList() - } - } + // if (useData.graphicDisplay == 'ypt') { + // if (deptId) { + // indexList() + // } + // } }) } // 给每一个元件绑定下拉框数据 diff --git a/src/components/mt-edit/components/render-core/index.vue b/src/components/mt-edit/components/render-core/index.vue index e7ed03e..206badf 100644 --- a/src/components/mt-edit/components/render-core/index.vue +++ b/src/components/mt-edit/components/render-core/index.vue @@ -68,7 +68,12 @@ @set-intention="val => renderCoreEmits('setIntention', val)" @line-mouse-up="onLineMouseUp" v-on="renderCoreProps.preivewMode ? eventToVOn(item, externalMethod) : {}" - @click="() => renderCoreProps.onElementClick && item.lineId && renderCoreProps.onElementClick(item.lineId)" + @click=" + () => + renderCoreProps.onElementClick && + item.lineId && + renderCoreProps.onElementClick(item.lineId, item.lineName) + " > @@ -130,7 +135,7 @@ type RenderCoreProps = { preivewMode?: boolean lineAppendEnable?: boolean showPopover?: boolean - onElementClick?: (elementId: string) => void + onElementClick?: (elementId: string, lineName?: string) => void } const renderCoreProps = withDefaults(defineProps(), { doneJson: () => [], diff --git a/src/components/mt-edit/utils/index.ts b/src/components/mt-edit/utils/index.ts index 2dc688a..155deac 100644 --- a/src/components/mt-edit/utils/index.ts +++ b/src/components/mt-edit/utils/index.ts @@ -817,7 +817,9 @@ export const eventToVOn = (item: IDoneJson, externalMethod: (kid?: string) => vo code_str += event.jump_to } } + if (!Object.prototype.hasOwnProperty.call(event_obj, event.type)) { + event_obj[event.type] = code_str } else { event_obj[event.type] += code_str diff --git a/src/components/mt-preview-ypt/index.vue b/src/components/mt-preview-ypt/index.vue index 03545a7..a61a9f7 100644 --- a/src/components/mt-preview-ypt/index.vue +++ b/src/components/mt-preview-ypt/index.vue @@ -42,7 +42,10 @@ @drag-canvas-mouse-move="dragCanvasMouseMove" @drag-canvas-mouse-up="dragCanvasMouseUp" > - + +
+ +
@@ -59,11 +62,10 @@ import DragCanvas from '@/components/mt-edit/components/drag-canvas/index.vue' import { useDataStore } from '@/stores/menuList' import { globalStore } from '../mt-edit/store/global' import type { IDoneJsonEventList } from '../mt-edit/store/types' - +import IframeDia from './iframeDia.vue' import MQTT from '@/utils/mqtt' -// 实时数据表格 -const tableData = ref([ +const tableData = [ { date: '2023-05-03 13:33:44:853', name: '1#主变分支I', @@ -89,13 +91,9 @@ const tableData = ref([ // name: '110kV加工区变', // address: 'No. 189, Grove St, Los Angeles' // } -]) +] +const askCSConfigRtDataList = ref([]) -const showDetail = ref(false) - -const showDetailClick = () => { - showDetail.value = !showDetail.value -} // 节流函数实现 (替代lodash，减少依赖) const throttle = (func: (...args: any[]) => void, wait: number) => { let lastTime = 0 @@ -189,11 +187,6 @@ const canvasStyle = computed(() => ({ marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px' })) -const onScroll = ({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }) => { - scroll_info.left = scrollLeft - scroll_info.top = scrollTop -} - // 鼠标按下事件 - 开始拖拽 const onMouseDown = (e: MouseEvent) => { if (mtPreviewProps.canDrag && e.button === 0) { @@ -355,11 +348,7 @@ 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([]) - onMounted(async () => { - keyList.value = ['00B78D0171092'] // 启动消息监听 iframe传过来的参数 receiveMessage() @@ -367,31 +356,56 @@ onMounted(async () => { await setImportJson(mtPreviewProps.exportJson) } await sendTableData() - if (useData.graphicDisplay == 'ypt') { - // // 治理项目连接mqtt - await setMqtt() - } + // // 连接mqtt + await setMqtt() + // window.parent.postMessage({ action: useData, data: tableData }, '*') // 发送数据给父页面 }) +// 无锡大屏通过iframe传过来的数据 +// let keyList = [ +// '5f99b9ba4e563439ec8490a0c598da8d', +// '401a696fe9918bb4cce7d9393d0d5df7', +// '74203b186428c1684aa450ad05257b06' +// ] +// 无锡大屏通过iframe传过来的数据 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 sendTableData = () => { try { - // 类型检查，确保 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 => ({ + const cleanData = tableData.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 }, '*' ) @@ -400,12 +414,6 @@ const sendTableData = () => { } } -let message = [ - { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' }, - { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '传输中1111......' } - // { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '发生时刻:2023-07-06 14:20:00' } -] - // 传输设备相关的连接线ID列表 let list_sys = ref([]) @@ -423,62 +431,61 @@ const receiveMessage = () => { const { type, payload } = event.data - if (type === 'RESET_EVENT') { - // 处理复位事件 - handleResetEvent() - } else if (type === 'ANALYSIS_KEYS') { - // 处理 ANALYSIS_KEYS 消息 + if (type === '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 || payload - - init() - } - // 对于其他类型的消息，我们仍然调用 init() - else if (type) { - init() + 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() }) } -// 复位事件处理函数 -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 [] 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 } @@ -546,12 +553,59 @@ const setImportJson = (exportJson: IExportJson) => { setTimeout(() => { done_json.value.forEach(item => { //报警设备闪烁 - if (findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)) { - item.props.fill.val = 'red' + if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) { + // item.props.fill.val = '#fcfc57' + 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) } @@ -642,24 +696,6 @@ const findLinesBySwitchId = (switchId: string): string[] => { return connectedLines } -// 高亮显示连线的函数 -const highlightLines = (lineIds: string[]) => { - lineIds.forEach(id => { - const line = done_json.value.find(item => item.id === id) - if (line) { - line.props.ani_type.val = 'electricity' - line.props.ani_color.val = '#d0e20a' - - // 置顶显示 - 将连线元素移到数组末尾（因为渲染顺序是按数组顺序） - const index = done_json.value.findIndex(item => item.id === id) - if (index !== -1) { - const [item] = done_json.value.splice(index, 1) - done_json.value.push(item) - } - } - }) -} - // 添加一个新的 ref 来存储当前点击的设备ID const currentClickedElementId = ref(null) @@ -669,22 +705,23 @@ let storedSelectedId = '' storedSelectedId = localStorage.getItem('selectedId') || '' // 当前点击的元素lineId 通过mt-edit/render-core/index.vue传过来的click事件 -const handleElementClick = (elementId: string) => { +const handleElementClick = (elementId: string, lineName: string) => { // 保存当前点击的设备ID - currentClickedElementId.value = elementId - const item = done_json.value.find(item => item.lineId === elementId) - if (item && item.events && item.events.some(event => event.type === 'click')) { - // 发送设备ID到父级iframe - window.parent.postMessage( - { - action: 'coreClick', - coreId: elementId.toString(), // 确保是字符串 - selectedId: storedSelectedId // 新增的字段 - // elementData: item // 可以发送整个元素数据 - }, - '*' - ) - } + indicator(['00B78D0171091', '00B78D0171092']) + // currentClickedElementId.value = elementId + // const item = done_json.value.find(item => item.lineId === elementId) + // if (item && item.events && item.events.some(event => event.type === 'click')) { + // // 发送设备ID到父级iframe + // window.parent.postMessage( + // { + // action: 'coreClick', + // coreId: elementId.toString(), // 确保是字符串 + // selectedId: storedSelectedId // 新增的字段 + // // elementData: item // 可以发送整个元素数据 + // }, + // '*' + // ) + // } } const searchDevicesConnect = (transmissionDeviceIds: string[]) => { // 确保 savedExportJson.value 存在 @@ -754,95 +791,6 @@ const searchDevicesConnect = (transmissionDeviceIds: string[]) => { return connectedLineIds } -// 添加针对传输设备旁边添加文字的方法 -const addTextNextToTransport = () => { - // 确保 savedExportJson.value 存在后再进行操作 - if (!savedExportJson.value) { - console.warn('savedExportJson.value is undefined') - return [] - } - let transportDevices = [] - // 查找传输设备图元并添加文字图元 - transportDevices = - savedExportJson.value.json?.filter(item => - findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id) - ) || [] - - // 为每个传输设备添加旁边的文字图元 - const textElementsToAdd: IExportDoneJson[] = [] - const idsToRemove: string[] = [] - - transportDevices.forEach((device, index) => { - // 构造预期的旧文本图元 ID 模式 (基于设备 ID) - const expectedIdPrefix = `auto-text-${device.id}-` - - // 查找所有与当前设备关联的现有文本图元 - const existingTextElements = - savedExportJson.value?.json?.filter(item => item.id?.startsWith(expectedIdPrefix)) || [] - - // 将这些旧图元的 ID 添加到待删除列表 - idsToRemove.push(...existingTextElements.map(item => item.id!)) - - // 获取对应的消息文本 - const deviceMessage = - eventListAll.value[0].find((m: any) => m.monitorId === device.lineId)?.responsibilityData || 0 - - // 创建新的文本图元 - const textElement: IExportDoneJson = { - id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性 - title: '动态文字', - type: 'vue', - tag: 'text-vue', - props: { - // text: deviceMessage.toFixed(1) + '%', - text: '占比:' + Math.floor(deviceMessage * 10) / 10 + '%', - fontFamily: '黑体', - fontSize: 14, - fill: 'red', - vertical: false - }, - common_animations: { - val: '', - delay: 'delay-0s', - speed: 'slow', - repeat: 'infinite' - }, - binfo: { - left: (device.binfo?.left || 0) + (device.binfo?.width / 2 || 0) + 10, - //top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20), - top: (device.binfo?.top || 0) + (device.binfo?.height || 0) - 10, - width: 200, - height: 50, - angle: 0 - }, - resize: true, - rotate: true, - lock: false, - active: false, - hide: false, - UIDName: '', - UIDNames: [], - events: [] - } - textElementsToAdd.push(textElement) - }) - - // 从 savedExportJson.value.json 中移除旧的文本图元 - if (savedExportJson.value.json) { - done_json.value = savedExportJson.value.json.filter(item => !idsToRemove.includes(item.id!)) - } - - // 合并原始图元和新增的文字图元 - const updatedJson = [...done_json.value, ...textElementsToAdd] - - // 更新 savedExportJson.value - if (savedExportJson.value) { - savedExportJson.value.json = updatedJson - } - - return updatedJson -} - // 预览时候绑定指标等的点击事件 const setDoneJson = async (kId: string) => { const filteredItems = useData.dataTree.filter(item => item.kId == kId) @@ -874,8 +822,32 @@ 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) @@ -885,51 +857,55 @@ const timer = ref() // 连接mqtt const mqttClient = ref() const setMqtt = async () => { - mqttClient.value = new MQTT('/ypt/rtData/#') + mqttClient.value = new MQTT('/zl/TemperData/#') // 设置消息接收回调 try { await mqttClient.value.init() // 订阅主题 - await mqttClient.value.subscribe('/ypt/rtData/#') + await mqttClient.value.subscribe('/zl/TemperData/#') //实时数据 + await mqttClient.value.subscribe('/zl/csConfigRtData/#') //指标 // 设置消息接收回调 mqttClient.value.onMessage((subscribe: string, message: any) => { const msg: any = uint8ArrayToObject(message) - console.log('🚀 ~ 接受消息:', msg) - setTimeout(() => { - done_json.value.forEach(item => { - msg.forEach((msgValue: any) => { - if (item.id == msgValue.id) { - item.props.text.val = item.props.text.val.replace(/#{3}/g, msgValue.value) //'B相负载电流-CP95:31' - } - }) - }) - }, 100) + console.log('🚀 ~ 接受消息:', subscribe, msg) + if (subscribe.split('/')[2] === 'askCSConfigRtData') { + // 指标数据 + askCSConfigRtDataList.value = JSON.parse(msg.message) + } }) } catch (error) { console.error('MQTT 初始化失败:', error) } } const publish = async (id: string) => { - if (useData.graphicDisplay != 'ypt') return //质量项目进入 + // if (mqttClient.value) { + // await mqttClient.value.subscribe('zl/askCSConfigWarnData/' + id) + // // 发送消息 + // await mqttClient.value.publish('/zl/askCSConfigWarnData/' + id, '{}') + // if (timer.value) { + // clearInterval(timer.value) + // timer.value = null + // } + // timer.value = setInterval( + // () => { + // mqttClient.value.publish('/zl/askCSConfigWarnData/' + id, '{}') + // }, + // 3 * 60 * 1000 + // ) + // } +} +// 绑定指标 +const indicator = async (ids: string[]) => { if (mqttClient.value) { - await mqttClient.value.subscribe('ypt/askRtData/' + id) + // await mqttClient.value.subscribe('zl/askCSConfigRtData/' + useData.dataTree[0].id) // 发送消息 - await mqttClient.value.publish('/ypt/askRtData/' + id, '{}') - if (timer.value) { - clearInterval(timer.value) - timer.value = null - } - timer.value = setInterval( - () => { - mqttClient.value.publish('/ypt/askRtData/' + id, '{}') - }, - 3 * 60 * 1000 - ) + await mqttClient.value.publish('/zl/askCSConfigRtData/' + useData.dataTree[0].id, `[${ids}]`) } } + onUnmounted(() => { if (timer.value) { clearInterval(timer.value) diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts index 9cd89b6..48dc889 100644 --- a/src/utils/mqtt.ts +++ b/src/utils/mqtt.ts @@ -52,11 +52,11 @@ class MQTT { } try { - // const mqttUrl = 'ws://192.168.1.103:8083/mqtt' - const mqttUrl = - localStorage.getItem('MQTTZUTAI') == 'null' - ? 'ws://192.168.1.103:8083/mqtt' - : localStorage.getItem('MQTTZUTAI') + const mqttUrl = 'ws://192.168.1.103:8083/mqtt' + // const mqttUrl = + // localStorage.getItem('MQTTZUTAI') == 'null' + // ? 'ws://192.168.1.103:8083/mqtt' + // : localStorage.getItem('MQTTZUTAI') console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl) this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions) this.setupEventListeners()