From a7a88e6706c4cbc3fee4fffd8721d1d12470279f Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Mon, 3 Nov 2025 10:36:11 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=82=B9=E7=A6=BB?=
 =?UTF-8?q?=E7=BA=BF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../select-item-bind-setting/index.vue        |    2 +-
 .../mt-edit/composables/thumbnail.ts          |    4 +-
 src/components/mt-preview-ypt/index.vue       |    2 +-
 src/components/mt-preview-zl/index.ts         |    3 +
 src/components/mt-preview-zl/index.vue        | 1173 +++++++++++++++++
 src/components/mt-preview/index.vue           |   15 +-
 src/export.ts                                 |    3 +-
 src/router/index.ts                           |    6 +
 src/utils/mqtt.ts                             |    2 +-
 src/utils/request.ts                          |    8 +-
 src/views/preview/index_ZL.vue                |   19 +
 11 files changed, 1225 insertions(+), 12 deletions(-)
 create mode 100644 src/components/mt-preview-zl/index.ts
 create mode 100644 src/components/mt-preview-zl/index.vue
 create mode 100644 src/views/preview/index_ZL.vue

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 1e1568b..3bafe7c 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
@@ -5,7 +5,7 @@
                 label="监测点"
                 size="small"
                 class="mt-10px"
-                v-if="item_title == '绑定监测点' || item_title == '绑定指标'"
+               
             >
                 <div>
                     <el-cascader
diff --git a/src/components/mt-edit/composables/thumbnail.ts b/src/components/mt-edit/composables/thumbnail.ts
index c5a5746..05cd3c7 100644
--- a/src/components/mt-edit/composables/thumbnail.ts
+++ b/src/components/mt-edit/composables/thumbnail.ts
@@ -10,7 +10,7 @@ export const useGenThumbnail = async (canvas_id: string = 'mtCanvasArea') => {
     // //记录要移除的svg元素
     const shouldRemoveSvgNodes = []
     // 获取到所有的SVG 得到一个数组 目前只有自定义连线需要特殊处理 别的元素直接使用html2canvas就可以
-    
+
     const svgElements: NodeListOf<HTMLElement> = document.body.querySelectorAll(`#${canvas_id} .mt-line-render`)
     // 遍历这个数组
     for (const item of svgElements) {
@@ -41,7 +41,7 @@ export const useGenThumbnail = async (canvas_id: string = 'mtCanvasArea') => {
 
     const width = el.offsetWidth
     const height = el.offsetHeight
-    
+
     const canvas = await html2canvas(el, {
         useCORS: true,
         scale: 2,
diff --git a/src/components/mt-preview-ypt/index.vue b/src/components/mt-preview-ypt/index.vue
index af983ef..370188d 100644
--- a/src/components/mt-preview-ypt/index.vue
+++ b/src/components/mt-preview-ypt/index.vue
@@ -296,7 +296,7 @@ const onMouseWheel = (e: WheelEvent) => {
 
         // 如果缩放中心是鼠标位置，计算新的平移值以保持视觉中心
         if (canvasAreaRef.value) {
-            const rect = canvasAreaRef.value.getBoundingClientRect()
+            const rect = canvasAreaRef.value?.getBoundingClientRect()
             const mouseX = e.clientX - rect.left
             const mouseY = e.clientY - rect.top
 
diff --git a/src/components/mt-preview-zl/index.ts b/src/components/mt-preview-zl/index.ts
new file mode 100644
index 0000000..d66ddb0
--- /dev/null
+++ b/src/components/mt-preview-zl/index.ts
@@ -0,0 +1,3 @@
+import MtPreview from './index.vue'
+
+export default MtPreview
diff --git a/src/components/mt-preview-zl/index.vue b/src/components/mt-preview-zl/index.vue
new file mode 100644
index 0000000..e316092
--- /dev/null
+++ b/src/components/mt-preview-zl/index.vue
@@ -0,0 +1,1173 @@
+<template>
+    <div
+        style="overflow: hidden;  height: 100vh"
+        v-loading="useData.loading"
+        element-loading-background="#343849c7"
+        :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
+        @mousedown="onMouseDown"
+        @mousemove="onMouseMove"
+        @mouseup="onMouseUp"
+        @mouseleave="onMouseUp"
+        @wheel="onMouseWheel"
+    >
+        <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button>
+
+        <div
+            ref="canvasAreaRef"
+            :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
+            style=""
+            :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 targetKeywords = ['开关', '器', '阀门', '控制']
+
+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: 1,
+    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',
+    marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px'
+}))
+
+
+
+// 鼠标按下事件 - 开始拖拽
+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 ? 1 : 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()
+
+        // 首页初始化的时候
+        nextTick(() => {
+            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'
+                // }
+            })
+        })
+    }
+
+    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 && targetKeywords.some(keyword => startElement.title?.includes(keyword))) {
+            return startElement.id!
+        }
+    }
+
+    // 如果起点不是开关，查找终点连接的开关
+    const endId = bindAnchors.end?.id
+    if (endId) {
+        const endElement = savedExportJson.value.json.find(item => item.id === endId)
+        if (endElement && targetKeywords.some(keyword => endElement.title?.includes(keyword))) {
+            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 bindList = ref<string[]>([])
+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)
+    bindList.value = [
+        ...new Set(
+            lineElements
+                .map(item => {
+                    return [item.props?.bind_anchors.start?.id, item.props?.bind_anchors.end?.id]
+                })
+                .flat()
+        )
+    ]
+
+    // 查找所有开关元素
+    const switchElements = savedExportJson.value.json.filter(item =>
+        targetKeywords.some(keyword => item.title?.includes(keyword))
+    )
+    // const switchElements = savedExportJson.value.json.filter(item =>
+    //     bindList.value.some(keyword => item.id?.includes(keyword) && item.lineId=='')
+    // )
+
+    // 存储连接线的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(async (subscribe: string, message: any) => {
+            const msg: any = uint8ArrayToObject(message)
+            console.log('🚀 ~ 接受消息:', msg)
+            list.value = [...new Set(msg.filter((item: any) => item.devStatus === 1).map((item: any) => item.lineId))]
+            sendColor.value = '#ff0000'
+            // await setImportJson(savedExportJson.value)
+
+            await 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'
+                        }
+                    })
+                    list.value.forEach((listValue: any) => {
+                        if (listValue == item.lineId && item.type == 'svg') {
+                            item.props.fill.val = '#ff0000'
+                            // item.common_animations.val = 'flash'
+                        }
+                    })
+                })
+            }, 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 = 1
+            canvas_cfg.value.pan = {
+                x: 0,
+                y: 0
+            }
+        } 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/components/mt-preview/index.vue b/src/components/mt-preview/index.vue
index 1930000..98ec1bc 100644
--- a/src/components/mt-preview/index.vue
+++ b/src/components/mt-preview/index.vue
@@ -588,6 +588,7 @@ const setImportJson = (exportJson: IExportJson) => {
                 //报警设备闪烁
                 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)) {
@@ -1027,16 +1028,26 @@ const setMqtt = async () => {
         await mqttClient.value.subscribe('/zl/rtData/#')
 
         // 设置消息接收回调
-        mqttClient.value.onMessage((subscribe: string, message: any) => {
+        mqttClient.value.onMessage(async (subscribe: string, message: any) => {
             const msg: any = uint8ArrayToObject(message)
             console.log('🚀 ~ 接受消息:', msg)
-            setTimeout(() => {
+            list.value = [...new Set(msg.filter((item: any) => item.devStatus === 1).map((item: any) => item.lineId))]
+            sendColor.value = '#ff0000'
+            // await setImportJson(savedExportJson.value)
+
+            await 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'
                         }
                     })
+                    list.value.forEach((listValue: any) => {
+                        if (listValue == item.lineId && item.type == 'svg') {
+                            item.props.fill.val = '#ff0000'
+                            // item.common_animations.val = 'flash'
+                        }
+                    })
                 })
             }, 100)
         })
diff --git a/src/export.ts b/src/export.ts
index 3ed3e7b..8095254 100644
--- a/src/export.ts
+++ b/src/export.ts
@@ -8,5 +8,6 @@ import MtDzr from '@/components/mt-dzr'
 import MtEdit from '@/components/mt-edit'
 import MtPreview from '@/components/mt-preview'
 import MtPreviewYpt from '@/components/mt-preview-ypt'
+import MtPreviewZl from '@/components/mt-preview-zl'
 import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
-export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt }
+export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt,MtPreviewZl }
diff --git a/src/router/index.ts b/src/router/index.ts
index 6a15174..eba6dcb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,6 +25,12 @@ export const constantRoutes = [
         path: '/preview_YPT',
         component: () => import('../views/preview/index_YPT.vue')
     },
+    {
+        // 云平台预览页面
+        name: 'preview_ZL',
+        path: '/preview_ZL',
+        component: () => import('../views/preview/index_ZL.vue')
+    },
     {
         name: 'edit-load',
         path: '/edit-load',
diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts
index 1d5948c..9cd89b6 100644
--- a/src/utils/mqtt.ts
+++ b/src/utils/mqtt.ts
@@ -55,7 +55,7 @@ class MQTT {
             // const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
             const mqttUrl =
                 localStorage.getItem('MQTTZUTAI') == 'null'
-                    ? 'ws://192.168.1.24:8085/mqtt'
+                    ? '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)
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 4016a6b..3c871c2 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -19,11 +19,11 @@ class HttpRequest {
         instance.interceptors.request.use(
             config => {
                 // 添加全局的loading..
-                // config.headers['Authorization'] =
-                //     'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
-
                 config.headers['Authorization'] =
-                    'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
+                    'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
+
+                // config.headers['Authorization'] =
+                //     'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
                 // 请求头携带token
                 return config
             },
diff --git a/src/views/preview/index_ZL.vue b/src/views/preview/index_ZL.vue
new file mode 100644
index 0000000..a069608
--- /dev/null
+++ b/src/views/preview/index_ZL.vue
@@ -0,0 +1,19 @@
+<template>
+    <mt-preview-zl ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-zl>
+</template>
+<script setup lang="ts">
+import { MtPreviewZl } from '@/export'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+const MtPreviewRef = ref<InstanceType<typeof MtPreviewZl>>()
+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>

From 3d987b4761dd86131a5f184b8481d89480c19e8e Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Wed, 5 Nov 2025 15:31:56 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mt-preview-zl/index.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/mt-preview-zl/index.vue b/src/components/mt-preview-zl/index.vue
index e316092..e70b97e 100644
--- a/src/components/mt-preview-zl/index.vue
+++ b/src/components/mt-preview-zl/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        style="overflow: hidden;  height: 100vh"
+        style="overflow: hidden; height: 100vh"
         v-loading="useData.loading"
         element-loading-background="#343849c7"
         :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
@@ -184,8 +184,6 @@ const canvasStyle = computed(() => ({
     marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px'
 }))
 
-
-
 // 鼠标按下事件 - 开始拖拽
 const onMouseDown = (e: MouseEvent) => {
     if (mtPreviewProps.canDrag && e.button === 0) {
@@ -568,8 +566,8 @@ const setImportJson = (exportJson: IExportJson) => {
         grid_cfg.value = gridCfg
         done_json.value = importDoneJson
 
-        // 为图元添加点击事件
-        addClickEventsToElements()
+        // // 为图元添加点击事件
+        // addClickEventsToElements()
 
         // 首页初始化的时候
         nextTick(() => {
@@ -1028,7 +1026,10 @@ const setMqtt = async () => {
                 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'
+                            item.props.text.val = item.props.text.val.replace(
+                                /#{3}/g,
+                                msgValue.value == 3.1415926 ? '暂无数据' : msgValue.value
+                            ) //'B相负载电流-CP95:31'
                         }
                     })
                     list.value.forEach((listValue: any) => {

From 9bd9403280c1ee7bffb9f1ebb86cf51bb0f541e0 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Wed, 12 Nov 2025 09:52:48 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mt-edit/components/add-element/index.vue  |   9 +-
 .../mt-edit/components/export-json/index.vue  |   2 +-
 .../mt-edit/components/import-json/index.vue  |   3 -
 .../components/layout/header-panel/index.vue  |   4 +-
 .../layout/left-aside-list/index.vue          |  92 ++++++++++------
 .../select-item-bind-setting/index.vue        |   7 +-
 src/components/mt-edit/index.vue              | 101 ++++++++++++++++--
 src/export.ts                                 |   2 +-
 src/stores/menuList/index.ts                  |  10 +-
 src/stores/menuList/types.ts                  |   1 +
 src/views/preview/index_ZL.vue                |  38 +++----
 11 files changed, 196 insertions(+), 73 deletions(-)

diff --git a/src/components/mt-edit/components/add-element/index.vue b/src/components/mt-edit/components/add-element/index.vue
index 4234dc9..4804b81 100644
--- a/src/components/mt-edit/components/add-element/index.vue
+++ b/src/components/mt-edit/components/add-element/index.vue
@@ -79,7 +79,14 @@
               />
             </el-form-item> -->
                 <el-form-item label="图元名称:" prop="elementName">
-                    <el-input v-model="element.elementName" placeholder="请选择组件名称" style="width: 100%" />
+                    <el-input
+                        v-model.trim="element.elementName"
+                        maxlength="12"
+                        show-word-limit
+                        clearable
+                        placeholder="请选择组件名称"
+                        style="width: 100%"
+                    />
                 </el-form-item>
                 <!-- <el-form-item label="组件标识:" prop="elementMark">
                     <el-input v-model="element.elementMark" placeholder="请选择组件标识" style="width: 100%" />
diff --git a/src/components/mt-edit/components/export-json/index.vue b/src/components/mt-edit/components/export-json/index.vue
index 9fb5aa1..6a891d9 100644
--- a/src/components/mt-edit/components/export-json/index.vue
+++ b/src/components/mt-edit/components/export-json/index.vue
@@ -18,7 +18,7 @@
 import { VAceEditor } from 'vue3-ace-editor'
 import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '../../store/types'
 import { computed } from 'vue'
-import { genExportJson } from '../../composables'
+import { genExportJson } from '@/components/mt-edit/composables/index'
 type ExportProps = {
     doneJson: IDoneJson[]
     canvasCfg: IGlobalStoreCanvasCfg
diff --git a/src/components/mt-edit/components/import-json/index.vue b/src/components/mt-edit/components/import-json/index.vue
index 0d42b1a..40d5473 100644
--- a/src/components/mt-edit/components/import-json/index.vue
+++ b/src/components/mt-edit/components/import-json/index.vue
@@ -25,10 +25,7 @@ const onImport = () => {
     return new Promise((resolve, reject) => {
         try {
             const json: IExportJson = JSON.parse(import_json.value)
-            console.log('🚀 ~ onImport ~ json:', json)
-
             const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(json)
-
             globalStore.canvasCfg = canvasCfg
             globalStore.gridCfg = gridCfg
             globalStore.setGlobalStoreDoneJson(importDoneJson)
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 aa630ed..5acfc1c 100644
--- a/src/components/mt-edit/components/layout/header-panel/index.vue
+++ b/src/components/mt-edit/components/layout/header-panel/index.vue
@@ -158,11 +158,11 @@
                 </el-tag>
             </div>
             <div class="flex items-center mr-20px">
-                <el-button text circle size="small" @click="emits('onReturnClick')">
+                <!-- <el-button text circle size="small" @click="emits('onReturnClick')">
                     <el-icon title="返回" :size="20">
                         <svg-analysis name="return"></svg-analysis>
                     </el-icon>
-                </el-button>
+                </el-button> -->
                 <!-- <el-divider direction="vertical"></el-divider> -->
                 <!-- <el-button text circle size="small" @click="emits('onSaveClick')">
                     <el-icon title="保存" :size="20">
diff --git a/src/components/mt-edit/components/layout/left-aside-list/index.vue b/src/components/mt-edit/components/layout/left-aside-list/index.vue
index 541eb0f..6fc8e01 100644
--- a/src/components/mt-edit/components/layout/left-aside-list/index.vue
+++ b/src/components/mt-edit/components/layout/left-aside-list/index.vue
@@ -12,7 +12,7 @@
             ref="multipleTable"
             @row-click="onRowClick"
             empty-text="暂无数据"
-            row-key="id"
+            row-key="name"
         >
             <el-table-column prop="name" label="名称" />
             <el-table-column label="操作" align="center" width="60" #default="scope">
@@ -30,7 +30,7 @@
             <el-table-column label="操作" width="40">
                 <template #default>
                     <el-tooltip content="拖拽" placement="top">
-                        <div class="drag-handle">⋮⋮⋮</div>
+                        <div class="drag-handle" style="cursor: pointer">⋮⋮⋮</div>
                     </el-tooltip>
                 </template>
             </el-table-column>
@@ -46,7 +46,14 @@
         >
             <el-form :model="form" ref="formRef" :rules="rules">
                 <el-form-item label="图纸名称" :label-width="formLabelWidth" prop="name">
-                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入图纸名称" />
+                    <el-input
+                        v-model.trim="form.name"
+                        maxlength="12"
+                        show-word-limit
+                        clearable
+                        autocomplete="off"
+                        placeholder="请输入图纸名称"
+                    />
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -87,7 +94,6 @@ const useData = useDataStore()
 const dialogFormVisible = ref(false)
 const dialog_title = ref('新增图纸')
 const formLabelWidth = '100px'
-const globalIndex = ref(-1)
 const multipleTable: any = ref(null)
 const { pid } = useData // 解构出 myArray 状态
 
@@ -129,31 +135,45 @@ const sortableInstance = ref<any>(null)
 
 // 修改 initSortable 方法中的实例挂载与销毁逻辑
 const initSortable = () => {
-    nextTick(() => {
-        const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
-        if (!tbody) {
-            console.error('未找到 tbody 元素')
-            return
+    const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
+    Sortable.create(tbody, {
+        animation: 100,
+        onEnd: ({ oldIndex, newIndex }) => {
+            const currRow = dataTrees.value.splice(oldIndex, 1)[0]
+            dataTrees.value.splice(newIndex, 0, currRow)
         }
-
-        // 销毁旧实例
-        if (sortableInstance.value) {
-            sortableInstance.value.destroy()
-        }
-
-        // 创建新实例并保存到 sortableInstance
-        sortableInstance.value = new Sortable(tbody, {
-            animation: 150,
-            ghostClass: 'sortable-ghost',
-            onEnd: ({ newIndex, oldIndex }) => {
-                // 确保 newIndex 和 oldIndex 都存在且不相等
-                if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
-
-                const targetItem = dataTrees.value.splice(oldIndex, 1)[0]
-                dataTrees.value.splice(newIndex, 0, targetItem)
-            }
-        })
     })
+
+    // nextTick(() => {
+    //     const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
+    //     if (!tbody) {
+    //         console.error('未找到 tbody 元素')
+    //         return
+    //     }
+
+    //     // 销毁旧实例
+    //     if (sortableInstance.value) {
+    //         sortableInstance.value.destroy()
+    //     }
+
+    //     // 创建新实例并保存到 sortableInstance
+    //     sortableInstance.value = new Sortable(tbody, {
+    //         animation: 150,
+    //         ghostClass: 'sortable-ghost',
+    //         onEnd: ({ newIndex, oldIndex }) => {
+    //             // 确保 newIndex 和 oldIndex 都存在且不相等
+    //             if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
+
+    //             // const targetItem = dataTrees.value.splice(oldIndex, 1)[0]
+    //             // dataTrees.value.splice(newIndex, 0, targetItem)
+    //             // 深拷贝避免引用问题（如果是复杂对象，建议使用结构化克隆或深拷贝工具）
+    //             const [targetItem] = dataTrees.value.splice(oldIndex, 1)
+    //             // 安全插入（超出范围时自动插入到数组末尾）
+    //             const insertIndex = Math.min(newIndex, dataTrees.value.length)
+    //             dataTrees.value.splice(insertIndex, 0, targetItem)
+    //         }
+    //     })
+    // })
 }
 
 //form表单校验规则
@@ -178,6 +198,7 @@ watch(
 )
 
 const onAddClick = () => {
+    dialog_title.value = '新增图纸'
     Object.assign(form, { name: '' })
     //打开弹窗
     dialogFormVisible.value = true
@@ -220,17 +241,22 @@ const onRowClick = async (row: any) => {
 }
 
 const saveDialog = async (form: any) => {
+    console.log(dataTrees.value)
+
     // 校验表单
     if (!formRef) return
     const valid = await formRef.value.validate()
     if (!valid) return
+
+    if (dataTrees.value.some(item => item.name == form.name)) {
+        ElMessage.error('图纸名称不能重复！')
+        return
+    }
+
     // 提交请求
-    if (globalIndex.value >= 0) {
+    if (dialog_title.value == '编辑图纸') {
         //表示编辑
-        // dataTrees[globalIndex.value] = form;
         useData.modify(form.kId, form.name)
-        //还原回去
-        globalIndex.value = -1
     } else {
         //新增
         useData.append(form.name)
@@ -243,9 +269,9 @@ const saveDialog = async (form: any) => {
 function update(index: number, row: any) {
     // const newObj = Object.assign({}, row);
     // form = reactive(newObj);
+    dialog_title.value = '编辑图纸'
     Object.assign(form, row)
-    //把当前编辑的行号赋值给全局保存的行号
-    globalIndex.value = index
+
     dialogFormVisible.value = true
 }
 </script>
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 3bafe7c..fdf7ac9 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
@@ -1,12 +1,7 @@
 <template>
     <div v-if="useData.graphicDisplay == 'zl'">
         <el-form label-width="60px" label-position="left">
-            <el-form-item
-                label="监测点"
-                size="small"
-                class="mt-10px"
-               
-            >
+            <el-form-item label="监测点" size="small" class="mt-10px">
                 <div>
                     <el-cascader
                         :key="cascaderKey"
diff --git a/src/components/mt-edit/index.vue b/src/components/mt-edit/index.vue
index 2c385ef..dda45a5 100644
--- a/src/components/mt-edit/index.vue
+++ b/src/components/mt-edit/index.vue
@@ -72,6 +72,19 @@
                 <footer-panel></footer-panel>
             </el-footer>
         </el-container>
+        <!-- 上传json -->
+        <el-upload
+            :show-file-list="false"
+            accept=".json"
+            ref="uploadRef"
+            :auto-upload="false"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :on-change="handleOnchange"
+        >
+            <el-button type="text" v-show="false">默认上传按钮（隐藏）</el-button>
+        </el-upload>
+
         <el-dialog
             :close-on-click-modal="false"
             v-model="import_visible"
@@ -124,6 +137,8 @@ import { objectDeepClone } from './utils'
 import { genExportJson, useExportJsonToDoneJson } from './composables'
 import type { IExportJson } from './components/types'
 import { useDataStore } from '@/stores/menuList'
+import type { UploadInstance, UploadProps, UploadRawFile, UploadFile } from 'element-plus'
+import { genFileId } from 'element-plus'
 type MtEditProps = {
     useThumbnail?: boolean
 }
@@ -160,6 +175,7 @@ const header_align_enabled = computed(() => {
     )
     return selected_items.length > 1
 })
+const uploadRef = ref()
 const import_visible = ref(false)
 const export_visible = ref(false)
 const done_json_tree_visiable = ref(false)
@@ -169,12 +185,65 @@ const onDeleteClick = () => {
     cacheStore.addHistory(globalStore.done_json)
 }
 const onImportClick = () => {
-    import_visible.value = true
-    mainPanelRef.value?.stopListenerKeyDown()
+    uploadRef.value?.$el.querySelector('input[type="file"]')?.click()
+    // import_visible.value = true
+    // mainPanelRef.value?.stopListenerKeyDown()
 }
+const handleExceed: UploadProps['onExceed'] = files => {
+    uploadRef.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    uploadRef.value!.handleStart(file)
+}
+// 上传json文件
+const handleOnchange = (uploadFile: UploadFile) => {
+    let file: any = uploadFile.raw // 获取文件信息
+
+    const fileName = file.name
+    const isJsonSuffix = fileName.endsWith('.json')
+
+    // 方式2：通过文件 MIME 类型校验（辅助验证，部分浏览器可能不准确）
+    const isJsonType = file.type === 'application/json' || file.type === ''
+
+    if (!isJsonSuffix || !isJsonType) {
+        ElMessage.error('请上传后缀为 .json 的合法 JSON 文件！')
+        uploadRef.value.clearFiles()
+        return // 校验失败，终止后续操作
+    }
+
+    const fileReader = new FileReader()
+    fileReader.readAsText(file!) // 开始读取文件的内容为二进制
+
+    fileReader.onload = ev => {
+        // 读取完成,对数据进行自己的操作
+        const data = ev.target?.result //获取内容
+        console.log('🚀 ~ handleOnchange ~ data:', data)
+        onImportYes(data)
+        // console.log(JSON.parse(data as string))
+    }
+}
+
 const onExportClick = () => {
-    export_visible.value = true
-    mainPanelRef.value?.stopListenerKeyDown()
+    // export_visible.value = true
+    // mainPanelRef.value?.stopListenerKeyDown()
+    //   :done-json="objectDeepClone(globalStore.done_json)"
+    //             :canvas-cfg="globalStore.canvasCfg"
+    //             :grid-cfg="globalStore.gridCfg"
+
+    const { exportJson } = genExportJson(
+        globalStore.canvasCfg,
+        globalStore.gridCfg,
+        objectDeepClone(globalStore.done_json)
+    )
+    let data = JSON.stringify(exportJson, null, 2)
+    let blob = new Blob([data], { type: 'text/plain' })
+    let url = URL.createObjectURL(blob)
+    let a = document.createElement('a')
+    a.href = url
+    a.download = useData.keyName + '.json'
+    a.click()
+
+    ElMessage.success('JSON 导出成功')
 }
 const onTreeUpdateSelectedItemsId = (id: string) => {
     globalStore.setSingleSelect(id)
@@ -207,15 +276,35 @@ const onRedoClick = () => {
 const onUndoClick = () => {
     mainPanelRef.value?.onUndo()
 }
-const onImportYes = async () => {
-    const res = await importJsonRef.value?.onImport()
+const onImportYes = async (row: any) => {
+    const res = await onImport(row)
+    // const res = await importJsonRef.value?.onImport()
     if (res) {
         import_visible.value = false
+        uploadRef.value.clearFiles()
         cacheStore.addHistory(globalStore.done_json)
+        ElMessage.success('JSON 导入成功')
     } else {
+        uploadRef.value.clearFiles()
         ElMessage.error('导入失败,请检查数据格式')
     }
 }
+
+const onImport = (res: any) => {
+    return new Promise((resolve, reject) => {
+        try {
+            const json: IExportJson = JSON.parse(res)
+            const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(json)
+            globalStore.canvasCfg = canvasCfg
+            globalStore.gridCfg = gridCfg
+            globalStore.setGlobalStoreDoneJson(importDoneJson)
+            resolve(true)
+        } catch (error) {
+            resolve(false)
+        }
+    })
+}
+
 const onPreviewClick = () => {
     // 获取导出json
     const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
diff --git a/src/export.ts b/src/export.ts
index 8095254..f26345d 100644
--- a/src/export.ts
+++ b/src/export.ts
@@ -10,4 +10,4 @@ import MtPreview from '@/components/mt-preview'
 import MtPreviewYpt from '@/components/mt-preview-ypt'
 import MtPreviewZl from '@/components/mt-preview-zl'
 import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
-export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt,MtPreviewZl }
+export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt, MtPreviewZl }
diff --git a/src/stores/menuList/index.ts b/src/stores/menuList/index.ts
index e2645c4..6799f1b 100644
--- a/src/stores/menuList/index.ts
+++ b/src/stores/menuList/index.ts
@@ -11,6 +11,7 @@ export const useDataStore = defineStore('data-store', {
             identifying: '0',
             mqttID: '',
             preview: '',
+            keyName: '',//选中的name
             wxqr: '',
             loading: true,
             display: false, //无锡项目进去是true，其他项目是false  控制预览的时候返回按钮的展示
@@ -67,13 +68,20 @@ export const useDataStore = defineStore('data-store', {
         modify(kId: number, val: string) {
             this.dataTree.forEach((item: any) => {
                 if (item.kId == kId) {
-                    item.name = val
+                  
+                  
                 }
             })
         },
         // 放置kid
         placeKid(id: String) {
             this.identifying = id
+             this.dataTree.forEach((item: any) => {
+                if (item.kId == id) {
+                    this.keyName = item.name
+                  
+                }
+            })
         },
         setUpPath(data: String) {
             this.dataTree.forEach((item: any) => {
diff --git a/src/stores/menuList/types.ts b/src/stores/menuList/types.ts
index d96f928..8b7fcac 100644
--- a/src/stores/menuList/types.ts
+++ b/src/stores/menuList/types.ts
@@ -9,6 +9,7 @@ export interface DataStoreState {
     preview?: String
     wxqr?: String
     loading?: boolean
+    keyName?: String
     display?: Boolean //是否展示返回按钮
     graphicDisplay?: string //是否展示数据绑定图元
 }
diff --git a/src/views/preview/index_ZL.vue b/src/views/preview/index_ZL.vue
index a069608..97e71b0 100644
--- a/src/views/preview/index_ZL.vue
+++ b/src/views/preview/index_ZL.vue
@@ -1,19 +1,19 @@
-<template>
-    <mt-preview-zl ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-zl>
-</template>
-<script setup lang="ts">
-import { MtPreviewZl } from '@/export'
-import { onMounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-const MtPreviewRef = ref<InstanceType<typeof MtPreviewZl>>()
-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>
+<template>
+    <mt-preview-zl ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-zl>
+</template>
+<script setup lang="ts">
+import { MtPreviewZl } from '@/export'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+const MtPreviewRef = ref<InstanceType<typeof MtPreviewZl>>()
+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>

From 9d7d7c0cbd4759ab84b02b26f8c38ed8e28799f0 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Fri, 14 Nov 2025 14:08:01 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AF=BC=E5=85=A5json?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mt-edit/components/add-element/index.vue  | 4 ++++
 .../mt-edit/components/layout/header-panel/index.vue     | 6 ++++--
 .../mt-edit/components/layout/left-aside-list/index.vue  | 5 +++--
 .../mt-edit/components/layout/main-panel/index.vue       | 4 ++++
 src/stores/menuList/index.ts                             | 8 +++-----
 src/utils/loadSvg.ts                                     | 9 +++++----
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/mt-edit/components/add-element/index.vue b/src/components/mt-edit/components/add-element/index.vue
index 4804b81..6179c62 100644
--- a/src/components/mt-edit/components/add-element/index.vue
+++ b/src/components/mt-edit/components/add-element/index.vue
@@ -162,6 +162,10 @@ const options = [
     {
         value: '自定义',
         label: '自定义'
+    },
+    {
+        value: '特殊图元',
+        label: '特殊图元'
     }
 ]
 
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 5acfc1c..828df63 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 @@
                 </el-button>
                 <el-divider direction="vertical"></el-divider>
                 <el-button-group>
-                    <el-button text circle size="small" @click="onImportClick">
+                    <el-button text circle size="small" @click="onImportClick" :disabled="useData.keyName ==''">
                         <el-icon title="导入数据模型" :size="20">
                             <svg-analysis name="import-json"></svg-analysis>
                         </el-icon>
                     </el-button>
-                    <el-button text circle size="small" @click="onExportClick">
+                    <el-button text circle size="small" @click="onExportClick" :disabled="useData.keyName ==''">
                         <el-icon title="导出数据模型" :size="20">
                             <svg-analysis name="export-json"></svg-analysis>
                         </el-icon>
@@ -229,7 +229,9 @@ import { useDark, useToggle, useFullscreen } from '@vueuse/core'
 import { ElIcon, ElDivider, ElPopover, ElButton, ElButtonGroup, ElImage, ElText, ElTag } from 'element-plus'
 import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
 import type { IRealTimeData } from '@/components/mt-edit/store/types'
+import { useDataStore } from '@/stores/menuList'
 import { ref } from 'vue'
+const useData = useDataStore()
 type HeaderPanelProps = {
     leftAside: boolean
     rightAside: boolean
diff --git a/src/components/mt-edit/components/layout/left-aside-list/index.vue b/src/components/mt-edit/components/layout/left-aside-list/index.vue
index 6fc8e01..905a1c3 100644
--- a/src/components/mt-edit/components/layout/left-aside-list/index.vue
+++ b/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)" 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) {
+function del(index: number,row: any) {
     ElMessageBox.confirm('确定删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -214,6 +214,7 @@ function del(index: number) {
         .then(() => {
             // splice方法，传两个参数：第几行开始，删除多少条（如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素）
             dataTrees.value.splice(index, 1)
+              useData.placeKid(row.kId)
             ElMessage({
                 type: 'success',
                 message: '删除成功'
diff --git a/src/components/mt-edit/components/layout/main-panel/index.vue b/src/components/mt-edit/components/layout/main-panel/index.vue
index aaaa5df..57df0c3 100644
--- a/src/components/mt-edit/components/layout/main-panel/index.vue
+++ b/src/components/mt-edit/components/layout/main-panel/index.vue
@@ -1420,6 +1420,10 @@ watch(
 
         time.value = setTimeout(() => {
             console.log('🚀 ~ globalStore:', globalStore)
+            if(useData.keyName==''){
+                ElMessage.warning('请选择图纸！')
+            }
+
 
             const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
             // const data_model: any = {
diff --git a/src/stores/menuList/index.ts b/src/stores/menuList/index.ts
index 6799f1b..e9666b6 100644
--- a/src/stores/menuList/index.ts
+++ b/src/stores/menuList/index.ts
@@ -11,7 +11,7 @@ export const useDataStore = defineStore('data-store', {
             identifying: '0',
             mqttID: '',
             preview: '',
-            keyName: '',//选中的name
+            keyName: '', //选中的name
             wxqr: '',
             loading: true,
             display: false, //无锡项目进去是true，其他项目是false  控制预览的时候返回按钮的展示
@@ -68,18 +68,16 @@ export const useDataStore = defineStore('data-store', {
         modify(kId: number, val: string) {
             this.dataTree.forEach((item: any) => {
                 if (item.kId == kId) {
-                  
-                  
                 }
             })
         },
         // 放置kid
         placeKid(id: String) {
             this.identifying = id
-             this.dataTree.forEach((item: any) => {
+            this.keyName = ''
+            this.dataTree.forEach((item: any) => {
                 if (item.kId == id) {
                     this.keyName = item.name
-                  
                 }
             })
         },
diff --git a/src/utils/loadSvg.ts b/src/utils/loadSvg.ts
index 77f068b..acd5c55 100644
--- a/src/utils/loadSvg.ts
+++ b/src/utils/loadSvg.ts
@@ -25,14 +25,15 @@ interface SvgConfig {
     }
 }
 // 处理单个SVG元素的函数
-const processSvgItem = async (item: ElementItem): Promise<SvgConfig> => {
+const processSvgItem = async (item: ElementItem, type: string): Promise<SvgConfig> => {
     try {
         const svgContent = await download({ filePath: item.path })
 
         // 替换填充色用于缩略图
-        const filledSvg = svgContent.replace(/(\sfill=(["']))[^"']*(\2)/g, '$1#000000$3')
+        const filledSvg =
+            type == '特殊图元' ? svgContent : svgContent.replace(/(\sfill=(["']))[^"']*(\2)/g, '$1#000000$3')
         // 移除原始填充色
-        const cleanSvg = svgContent.replace(/\sfill=(["'])[^"']*\1/g, '')
+        const cleanSvg = type == '特殊图元' ? svgContent : svgContent.replace(/\sfill=(["'])[^"']*\1/g, '')
 
         return {
             id: item.id,
@@ -142,7 +143,7 @@ const loadSvg = async () => {
 
         // 处理每个类型的元素并注册
         for (const [type, items] of Object.entries(groupedElements)) {
-            const svgConfigs = await Promise.all(items.map(item => processSvgItem(item)))
+            const svgConfigs = await Promise.all(items.map(item => processSvgItem(item, type)))
             leftAsideStore.registerConfig(type, svgConfigs)
         }
     } catch (error) {