From 77636e502f0329cad291a8804ab41ad37fbe1cbe Mon Sep 17 00:00:00 2001
From: stt <email>
Date: Wed, 22 Oct 2025 09:09:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=91=E5=B9=B3=E5=8F=B0=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mt-preview-ypt/index.ts  |    3 +
 src/components/mt-preview-ypt/index.vue | 1156 +++++++++++++++++++++++
 src/router/index.ts                     |    6 +
 src/views/preview/index_YPT.vue         |   19 +
 4 files changed, 1184 insertions(+)
 create mode 100644 src/components/mt-preview-ypt/index.ts
 create mode 100644 src/components/mt-preview-ypt/index.vue
 create mode 100644 src/views/preview/index_YPT.vue

diff --git a/src/components/mt-preview-ypt/index.ts b/src/components/mt-preview-ypt/index.ts
new file mode 100644
index 0000000..a140290
--- /dev/null
+++ b/src/components/mt-preview-ypt/index.ts
@@ -0,0 +1,3 @@
+import MtPreviewYPT from './index.vue'
+
+export default MtPreviewYPT
diff --git a/src/components/mt-preview-ypt/index.vue b/src/components/mt-preview-ypt/index.vue
new file mode 100644
index 0000000..82389e4
--- /dev/null
+++ b/src/components/mt-preview-ypt/index.vue
@@ -0,0 +1,1156 @@
+<template>
+    <div
+        style="overflow: hidden; display: flex; flex-direction: column; height: 100vh"
+        v-loading="useData.loading"
+        element-loading-background="#343849c7"
+        :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
+    >
+        <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button>
+        <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
+        <!-- <div class="zoom-controls">
+            <el-button icon="ZoomIn" size="small" @click="zoomIn"></el-button>
+            <el-button icon="ZoomOut" size="small" @click="zoomOut"></el-button>
+            <el-button icon="RefreshLeft" size="small" @click="resetTransform"></el-button>
+        </div>
+         -->
+        <!-- <el-scrollbar ref="elScrollbarRef" class="w-1/1 h-1/1"  @scroll="onScroll" > -->
+        <div
+            ref="canvasAreaRef"
+            :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
+            style=""
+            @mousedown="onMouseDown"
+            @mousemove="onMouseMove"
+            @mouseup="onMouseUp"
+            @mouseleave="onMouseUp"
+            @wheel="onMouseWheel"
+            :style="canvasStyle"
+        >
+            <render-core
+                v-model:done-json="done_json"
+                :canvas-cfg="canvas_cfg"
+                :grid-cfg="grid_cfg"
+                :show-ghost-dom="false"
+                :canvas-dom="canvasAreaRef"
+                :global-lock="false"
+                :preivew-mode="true"
+                :show-popover="mtPreviewProps.showPopover"
+                @setDoneJson="setDoneJson"
+                @element-click="handleElementClick"
+            ></render-core>
+        </div>
+        <drag-canvas
+            ref="dragCanvasRef"
+            :scale-ratio="canvas_cfg.scale"
+            @drag-canvas-mouse-down="dragCanvasMouseDown"
+            @drag-canvas-mouse-move="dragCanvasMouseMove"
+            @drag-canvas-mouse-up="dragCanvasMouseUp"
+        ></drag-canvas>
+        <!-- </el-scrollbar> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch, computed, onUnmounted, nextTick } from 'vue'
+import RenderCore from '@/components/mt-edit/components/render-core/index.vue'
+import type { IExportJson, IExportDoneJson } from '../mt-edit/components/types'
+import { useExportJsonToDoneJson } from '../mt-edit/composables'
+import type { IDoneJson } from '../mt-edit/store/types'
+import { getItemAttr, previewCompareVal, setItemAttr } from '../mt-edit/utils'
+import { ElScrollbar, ElMessage, ElMessageBox, ElButton } from 'element-plus'
+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 MQTT from '@/utils/mqtt'
+
+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 showDetail = ref(false)
+
+const showDetailClick = () => {
+    showDetail.value = !showDetail.value
+}
+// 节流函数实现 (替代lodash，减少依赖)
+const throttle = (func: (...args: any[]) => void, wait: number) => {
+    let lastTime = 0
+    return (...args: any[]) => {
+        const now = Date.now()
+        if (now - lastTime >= wait) {
+            func.apply(this, args)
+            lastTime = now
+        }
+    }
+}
+
+type MtPreviewProps = {
+    exportJson?: IExportJson
+    canZoom?: boolean
+    canDrag?: boolean
+    showPopover?: boolean
+}
+const mtPreviewProps = withDefaults(defineProps<MtPreviewProps>(), {
+    canDrag: true,
+    canZoom: true,
+    showPopover: true
+})
+const emits = defineEmits(['onEventCallBack'])
+const useData = useDataStore()
+const canvasAreaRef = ref<HTMLDivElement | null>(null)
+const savedExportJson = ref<IExportJson>()
+
+// 画布配置 - 扩展支持平移
+const canvas_cfg = ref({
+    // width: 1920,
+    // height: 1080,
+    width: globalStore.canvasCfg.width,
+    height: globalStore.canvasCfg.height,
+    scale: 0.96,
+    color: '',
+    img: '',
+    guide: true,
+    adsorp: true,
+    adsorp_diff: 3,
+    transform_origin: {
+        x: 0,
+        y: 0
+    },
+    drag_offset: {
+        x: 0,
+        y: 0
+    },
+    // 平移属性
+    pan: {
+        x: 0,
+        y: 0
+    }
+})
+const grid_cfg = ref({
+    enabled: true,
+    align: true,
+    size: 10
+})
+const done_json = ref<IDoneJson[]>([])
+const elScrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
+const dragCanvasRef = ref<InstanceType<typeof DragCanvas>>()
+const scroll_info = reactive({
+    begin_left: 0,
+    begin_top: 0,
+    left: 0,
+    top: 0
+})
+
+// 拖拽状态变量
+const isDragging = ref(false)
+const startPos = ref({ x: 0, y: 0 })
+// 非响应式临时变量，减少响应式更新频率
+const tempPan = { x: 0, y: 0 }
+let animationFrameId: number | null = null
+
+// 计算画布样式
+const canvasStyle = computed(() => ({
+    transform: `translate(${canvas_cfg.value.pan.x}px, ${canvas_cfg.value.pan.y}px) scale(${canvas_cfg.value.scale})`,
+    transformOrigin: '0 0',
+    // width: `100vw`,
+    // height: `100vh`,
+    width: canvas_cfg.value.width + 'px',
+    height: canvas_cfg.value.height + 'px',
+    backgroundColor: useData.display ? '' : canvas_cfg.value.color,
+    backgroundImage: canvas_cfg.value.img ? `url(${canvas_cfg.value.img})` : 'none',
+    backgroundSize: '100% 100%',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+}))
+
+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) {
+        // 仅响应左键
+        e.preventDefault()
+        e.stopPropagation()
+        isDragging.value = true
+        startPos.value = {
+            x: e.clientX - canvas_cfg.value.pan.x,
+            y: e.clientY - canvas_cfg.value.pan.y
+        }
+        // 初始化临时位置
+        tempPan.x = canvas_cfg.value.pan.x
+        tempPan.y = canvas_cfg.value.pan.y
+
+        // 隐藏默认拖拽行为
+        if (canvasAreaRef.value) {
+            canvasAreaRef.value.style.userSelect = 'none'
+        }
+
+        // 启动动画帧同步
+        if (!animationFrameId) {
+            const syncPosition = () => {
+                if (isDragging.value) {
+                    canvas_cfg.value.pan.x = tempPan.x
+                    canvas_cfg.value.pan.y = tempPan.y
+                    animationFrameId = requestAnimationFrame(syncPosition)
+                } else {
+                    animationFrameId = null
+                }
+            }
+            animationFrameId = requestAnimationFrame(syncPosition)
+        }
+    }
+}
+
+// 节流处理鼠标移动事件 (16ms约等于60fps)
+const throttledMouseMove = throttle((e: MouseEvent) => {
+    if (isDragging.value && mtPreviewProps.canDrag) {
+        e.preventDefault()
+        e.stopPropagation()
+        // 只更新临时变量，通过动画帧同步到响应式对象
+        tempPan.x = e.clientX - startPos.value.x
+        tempPan.y = e.clientY - startPos.value.y
+    }
+}, 16)
+
+// 鼠标移动事件 - 处理拖拽
+const onMouseMove = throttledMouseMove
+
+// 鼠标释放事件 - 结束拖拽
+const onMouseUp = (e: MouseEvent) => {
+    if (isDragging.value) {
+        isDragging.value = false
+
+        // 恢复选择功能
+        if (canvasAreaRef.value) {
+            canvasAreaRef.value.style.userSelect = ''
+        }
+
+        // 取消动画帧
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId)
+            animationFrameId = null
+        }
+    }
+}
+
+// 缩放控制函数
+const zoomIn = () => {
+    if (mtPreviewProps.canZoom) {
+        canvas_cfg.value.scale = Math.min(canvas_cfg.value.scale + 0.1, 3) // 最大放大到3倍
+    }
+}
+
+const zoomOut = () => {
+    if (mtPreviewProps.canZoom) {
+        canvas_cfg.value.scale = Math.max(canvas_cfg.value.scale - 0.1, 0.3) // 最小缩小到0.3倍
+    }
+}
+
+// 重置变换
+const resetTransform = () => {
+    // 定义重置变换的函数
+    canvas_cfg.value.scale = useData.display
+        ? 0.96
+        : document.documentElement.clientHeight / globalStore.canvasCfg.height
+    canvas_cfg.value.pan = { x: 0, y: 0 }
+    tempPan.x = 0
+    tempPan.y = 0
+}
+
+// 鼠标滚轮事件 - 缩放
+const onMouseWheel = (e: WheelEvent) => {
+    if (mtPreviewProps.canZoom) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        // 计算缩放因子
+        const delta = e.deltaY < 0 ? 0.1 : -0.1
+        const newScale = Math.max(0.3, Math.min(3, canvas_cfg.value.scale + delta))
+
+        // 如果缩放中心是鼠标位置，计算新的平移值以保持视觉中心
+        if (canvasAreaRef.value) {
+            const rect = canvasAreaRef.value.getBoundingClientRect()
+            const mouseX = e.clientX - rect.left
+            const mouseY = e.clientY - rect.top
+
+            // 计算缩放前后的鼠标位置差异，调整平移量
+            const scaleRatio = newScale / canvas_cfg.value.scale
+            canvas_cfg.value.pan.x = mouseX - (mouseX - canvas_cfg.value.pan.x) * scaleRatio
+            canvas_cfg.value.pan.y = mouseY - (mouseY - canvas_cfg.value.pan.y) * scaleRatio
+
+            // 同步到临时变量
+            tempPan.x = canvas_cfg.value.pan.x
+            tempPan.y = canvas_cfg.value.pan.y
+
+            // 应用新缩放值
+            canvas_cfg.value.scale = newScale
+        }
+    }
+}
+
+const dragCanvasMouseDown = () => {
+    scroll_info.begin_left = scroll_info.left
+    scroll_info.begin_top = scroll_info.top
+}
+const dragCanvasMouseMove = (move_x: number, move_y: number) => {
+    let new_left = scroll_info.begin_left - move_x
+    let new_top = scroll_info.begin_top - move_y
+    elScrollbarRef.value?.setScrollLeft(new_left)
+    elScrollbarRef.value?.setScrollTop(new_top)
+}
+/**
+ * 画布拖动结束事件
+ */
+const dragCanvasMouseUp = () => {}
+const setItemAttrByID = (id: string, key: string, val: any) => {
+    return setItemAttr(id, key, val, done_json.value)
+}
+const setItemAttrs = (info: { id: string; key: string; val: any }[]) => {
+    info.forEach(f => {
+        setItemAttr(f.id, f.key, f.val, done_json.value)
+    })
+}
+const getItemAttrByID = (id: string, key: string, val: any) => {
+    return getItemAttr(id, key, done_json.value)
+}
+
+const setItemAttrByIDAsync = (id: string, key: string, val: any) => {
+    // 通过改变属性的事件去设置值时 需要转换成宏任务 不然多个事件判断会有问题
+    setTimeout(() => {
+        setItemAttrByID(id, key, val)
+    }, 0)
+}
+;(window as any).$mtElMessage = ElMessage
+;(window as any).$mtElMessageBox = ElMessageBox
+;(window as any).$setItemAttrByID = (id: string, key: string, val: any) => setItemAttrByIDAsync(id, key, val)
+;(window as any).$getItemAttrByID = getItemAttrByID
+;(window as any).$previewCompareVal = previewCompareVal
+;(window as any).$mtEventCallBack = (type: string, item_id: string, ...args: any[]) =>
+    emits('onEventCallBack', type, item_id, ...args)
+
+onMounted(async () => {
+    // 启动消息监听  iframe传过来的参数
+    receiveMessage()
+
+    if (mtPreviewProps.exportJson) {
+        await setImportJson(mtPreviewProps.exportJson)
+    }
+    await sendTableData()
+    if (useData.graphicDisplay == 'zl') {
+        // // 治理项目连接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 {
+        // 确保只传输可序列化的数据
+        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
+            },
+            '*'
+        )
+    } catch (error) {
+        console.error('数据传输失败:', error)
+    }
+}
+
+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<any>([])
+
+let transmissionDeviceIds: string[] = []
+
+let eventListAll = ref<any>([])
+
+let flagValue = ref('')
+
+const receiveMessage = () => {
+    // 在 iframe 内的页面中
+    window.addEventListener('message', function (event) {
+        // 验证消息来源（在生产环境中应该验证 origin）
+        // if (event.origin !== 'trusted-origin') return;
+
+        const { type, payload } = event.data
+
+        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
+            list.value = payload.eventList
+            sendColor.value = payload.color
+            // 点击行的全部数据
+            if (payload.eventListAll) {
+                eventListAll.value = payload.eventListAll
+                // 在数据接收后重新更新文本
+                setTimeout(() => {
+                    if (savedExportJson.value) {
+                        addTextNextToTransport()
+
+                        setImportJson(savedExportJson.value)
+                    }
+                }, 100)
+            } 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()
+    })
+}
+
+//根据 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)
+
+    return deviceIds
+}
+
+// 为每个图元动态添加点击事件
+const addClickEventsToElements = () => {
+    if (savedExportJson.value && savedExportJson.value.json) {
+        savedExportJson.value.json.forEach(item => {
+            // 检查是否已经有点击事件
+            const hasClickEvent = item.events && item.events.some(event => event.type === 'click')
+
+            if (!hasClickEvent) {
+                // 创建点击事件对象
+                const clickEvent: IDoneJsonEventList = {
+                    id: generateRandomId(), // 生成随机ID
+                    type: 'click', // 明确指定为字面量类型
+                    action: 'customCode', // 自定义操作
+                    jump_to: '',
+                    change_attr: [],
+                    custom_code: '', // 可以在这里添加自定义代码
+                    trigger_rule: {
+                        value: null
+                    }
+                }
+
+                // 如果图元还没有events数组，则创建一个
+                if (!item.events) {
+                    item.events = []
+                }
+
+                // 添加点击事件
+                item.events.push(clickEvent)
+            }
+        })
+    }
+}
+
+// 生成随机ID的辅助函数
+const generateRandomId = () => {
+    return Math.random().toString(36).substr(2, 10)
+}
+
+const setImportJson = (exportJson: IExportJson) => {
+    // 保存exportJson供后续使用
+    savedExportJson.value = exportJson
+    // 定义要执行的操作函数
+    const executeOperations = () => {
+        const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(savedExportJson.value)
+        // 保留现有的平移和缩放设置
+        const currentPan = canvas_cfg.value.pan
+        const currentScale = canvas_cfg.value.scale
+
+        canvas_cfg.value = {
+            ...canvasCfg,
+            pan: currentPan,
+            scale: currentScale
+        }
+        grid_cfg.value = gridCfg
+        done_json.value = importDoneJson
+
+        // 为图元添加点击事件
+        addClickEventsToElements()
+
+        // 首页初始化的时候
+        setTimeout(() => {
+            done_json.value.forEach(item => {
+                //报警设备闪烁
+                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)
+
+                    // 高亮显示所有相关的线
+                    //只有当 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)
+    }
+
+    if (!useData.loading) {
+        if (exportJson == null) {
+            setDoneJson(useData.dataTree[0].kId)
+            publish(useData.dataTree[0].id)
+        } else {
+            executeOperations()
+        }
+    } else {
+        // 如果不是true，添加监听
+        const stopWatch = watch(
+            () => useData.loading,
+            newVal => {
+                if (newVal === false) {
+                    // 当loading变为true时执行操作
+                    if (exportJson == null) {
+                        setDoneJson(useData.dataTree[0].kId)
+                        publish(useData.dataTree[0].id)
+                    } else {
+                        executeOperations()
+                    }
+                    // 执行后停止监听
+                    stopWatch()
+                }
+            }
+        )
+    }
+
+    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
+}
+
+// 高亮显示连线的函数
+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<string | null>(null)
+
+// 图纸的kId
+let storedSelectedId = ''
+
+storedSelectedId = localStorage.getItem('selectedId') || ''
+
+// 当前点击的元素lineId   通过mt-edit/render-core/index.vue传过来的click事件
+const handleElementClick = (elementId: 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 // 可以发送整个元素数据
+            },
+            '*'
+        )
+    }
+}
+const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
+    // 确保 savedExportJson.value 存在
+    if (!savedExportJson.value?.json) {
+        console.warn('savedExportJson.value 或 json 未定义')
+        return []
+    }
+
+    // 查找所有连线元素
+    const lineElements = savedExportJson.value.json.filter(item => item.type === 'sys-line' && item.props?.bind_anchors)
+
+    // 查找所有开关元素
+    const switchElements = savedExportJson.value.json.filter(item => item.title?.includes('开关'))
+
+    // 存储连接线的ID
+    const connectedLineIds: string[] = []
+
+    // 存储找到的开关ID
+    const switchIds: string[] = []
+
+    // 首先找出所有传输设备连接的开关
+    for (const deviceId of transmissionDeviceIds) {
+        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 === deviceId && switchElements.some(s => s.id === endId)) {
+                if (endId && !switchIds.includes(endId)) {
+                    switchIds.push(endId)
+                }
+                if (!connectedLineIds.includes(line.id!)) {
+                    connectedLineIds.push(line.id!)
+                }
+            } else if (endId === deviceId && switchElements.some(s => s.id === startId)) {
+                if (startId && !switchIds.includes(startId)) {
+                    switchIds.push(startId)
+                }
+                if (!connectedLineIds.includes(line.id!)) {
+                    connectedLineIds.push(line.id!)
+                }
+            }
+        }
+    }
+
+    // 然后找出开关之间的连线
+    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 && endId && switchIds.includes(startId) && switchIds.includes(endId)) {
+            if (!connectedLineIds.includes(line.id!)) {
+                connectedLineIds.push(line.id!)
+            }
+        }
+    }
+
+    // console.log('连接的连线ID列表:', connectedLineIds)
+
+    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)
+
+    if (filteredItems.length === 0) {
+        console.error(`No item found with kId: ${kId}`)
+        return
+    }
+
+    const item = filteredItems[0]
+
+    // 根据传过来的kId找到所在的id
+    const foundId = item.id
+
+    if (foundId) {
+        // 将当前选中的行数据存储到本地存储
+        localStorage.setItem('selectedId', foundId)
+    }
+
+    storedSelectedId = localStorage.getItem('selectedId') || ''
+
+    if (!item.path) {
+        console.error(`Item with kId: ${kId} does not have a path property`)
+        return
+    }
+
+    setImportJson(JSON.parse(item.path))
+}
+
+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)
+}
+const timer = ref()
+
+// 连接mqtt
+const mqttClient = ref()
+const setMqtt = async () => {
+    mqttClient.value = new MQTT('/zl/rtData/#')
+
+    // 设置消息接收回调
+    try {
+        await mqttClient.value.init()
+
+        // 订阅主题
+        await mqttClient.value.subscribe('/zl/rtData/#')
+
+        // 设置消息接收回调
+        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)
+        })
+    } catch (error) {
+        console.error('MQTT 初始化失败:', error)
+    }
+}
+const publish = async (id: string) => {
+    if (useData.graphicDisplay != 'zl') return //质量项目进入
+    if (mqttClient.value) {
+        await mqttClient.value.subscribe('zl/askRtData/' + id)
+        // 发送消息
+        await mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+        if (timer.value) {
+            clearInterval(timer.value)
+            timer.value = null
+        }
+        timer.value = setInterval(
+            () => {
+                mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+            },
+            3 * 60 * 1000
+        )
+    }
+}
+onUnmounted(() => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+})
+// 方法1: 使用 mqtt消息转换
+function uint8ArrayToObject(uint8Array: Uint8Array) {
+    try {
+        // 将 Uint8Array 解码为字符串
+        const decoder = new TextDecoder('utf-8')
+        const jsonString = decoder.decode(uint8Array)
+
+        // 将 JSON 字符串解析为对象
+        return JSON.parse(jsonString)
+    } catch (error) {
+        console.error('转换失败:', error)
+        return null
+    }
+}
+const onBack = () => {
+    window.close()
+}
+
+watch(
+    () => useData.display,
+    newVal => {
+        if (newVal) {
+            canvas_cfg.value.scale = 0.96
+            canvas_cfg.value.pan = {
+                x: 0,
+                y: 50
+            }
+        } else {
+            canvas_cfg.value.scale = document.documentElement.clientHeight / globalStore.canvasCfg.height
+        }
+    },
+    { immediate: true }
+)
+defineExpose({
+    setItemAttrByID,
+    setImportJson,
+    setItemAttrs,
+    zoomIn,
+    zoomOut,
+    resetTransform
+})
+</script>
+
+<style scoped>
+.canvasArea {
+    position: relative;
+    /* 移除过渡效果，避免拖拽延迟 */
+    will-change: transform;
+    /* 提示浏览器优化transform属性 */
+}
+
+.backBtn {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+    z-index: 2;
+}
+
+.zoom-controls {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1;
+    display: flex;
+    gap: 5px;
+}
+
+.cursor-grab {
+    cursor: grab;
+}
+
+.cursor-grabbing {
+    cursor: grabbing;
+}
+
+.el-table {
+    /* --el-table-border-color: #0a73ff;
+    --el-table-row-hover-bg-color: #3d4862;
+    --el-table-header-bg-color: #2a3b62;
+    --el-table-bg-color: #343849c7; */
+    --el-table-border-color: #0a73ff;
+    --el-table-row-hover-bg-color: #0a73ff20;
+    --el-table-header-bg-color: #0a73ff40;
+    --el-table-bg-color: #ffffff00;
+    text-align: center;
+    color: #ffffff;
+}
+
+:deep(.el-table tr) {
+    /* background-color: #242936; */
+    background-color: #00000090 !important;
+}
+
+:deep(.el-table .cell) {
+    color: #ffffff;
+    text-align: center;
+}
+
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+    /* background-color: #303b54; */
+    background-color: #5aa1ff29;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9a4a122..6a15174 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,6 +19,12 @@ export const constantRoutes = [
         path: '/preview',
         component: () => import('../views/preview/index.vue')
     },
+    {
+        // 云平台预览页面
+        name: 'preview_YPT',
+        path: '/preview_YPT',
+        component: () => import('../views/preview/index_YPT.vue')
+    },
     {
         name: 'edit-load',
         path: '/edit-load',
diff --git a/src/views/preview/index_YPT.vue b/src/views/preview/index_YPT.vue
new file mode 100644
index 0000000..74a6cf8
--- /dev/null
+++ b/src/views/preview/index_YPT.vue
@@ -0,0 +1,19 @@
+<template>
+    <mt-preview-ypt ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-ypt>
+</template>
+<script setup lang="ts">
+import { MtPreviewYpt } from '@/export'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+const MtPreviewRef = ref<InstanceType<typeof MtPreviewYpt>>()
+const onEventCallBack = (type: string, item_id: string) => {
+    console.log(type, item_id)
+
+    if (type == 'test-dialog') {
+        ElMessage.success(`获取到了id:${item_id}`)
+    }
+}
+onMounted(() => {
+    MtPreviewRef.value?.setImportJson(JSON.parse(sessionStorage.getItem('exportJson') as any))
+})
+</script>