Merge branch 'master' of http://192.168.1.22:3000/Web/svgeditor2.0

src/components/mt-edit/components/add-element/index.vue

@@ -1,6 +1,13 @@
 <template>
     <div class="add-element">
-        <el-dialog v-model="open" title="新增图元" width="500px" destroy-on-close @close="closeDialog">
+        <el-dialog
+            :close-on-click-modal="false"
+            v-model="open"
+            title="新增图元"
+            width="500px"
+            destroy-on-close
+            @close="closeDialog"
+        >
             <el-form :model="element" ref="ruleFormRef" :rules="rules" label-width="120px">
                 <el-form-item label="图元分类:" prop="elementSonType">
                     <el-select v-model="element.elementSonType" placeholder="请选择图元分类" style="width: 100%">
@@ -72,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%" />
@@ -93,7 +107,7 @@
                     >
                         <el-button type="primary">上传</el-button>
                     </el-upload>
-                    <el-dialog v-model="dialogVisible">
+                    <el-dialog :close-on-click-modal="false" v-model="dialogVisible">
                         <img w-full :src="dialogImageUrl" alt="Preview Image" />
                     </el-dialog>
                 </el-form-item>
@@ -148,6 +162,10 @@ const options = [
     {
         value: '自定义',
         label: '自定义'
+    },
+    {
+        value: '特殊图元',
+        label: '特殊图元'
     }
 ]
 

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

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)

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>
@@ -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">
@@ -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

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">
@@ -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>
@@ -30,16 +30,30 @@
             <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>
         </el-table>
         <!-- 新增/修改 -->
-        <el-dialog draggable v-model="dialogFormVisible" :title="dialog_title" width="500px" destroy-on-close>
+        <el-dialog
+            :close-on-click-modal="false"
+            draggable
+            v-model="dialogFormVisible"
+            :title="dialog_title"
+            width="500px"
+            destroy-on-close
+        >
             <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>
@@ -80,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 状态
 
@@ -122,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
-        }
-
-        // 销毁旧实例
-        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)
+    Sortable.create(tbody, {
+        animation: 100,
+        onEnd: ({ oldIndex, newIndex }) => {
+            const currRow = dataTrees.value.splice(oldIndex, 1)[0]
+            dataTrees.value.splice(newIndex, 0, currRow)
         }
     })
-    })
+
+    // 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表单校验规则
@@ -171,13 +198,14 @@ watch(
 )
 
 const onAddClick = () => {
+    dialog_title.value = '新增图纸'
     Object.assign(form, { name: '' })
     //打开弹窗
     dialogFormVisible.value = true
 }
 
 // 删除功能，传索引行数
-function del(index: number) {
+function del(index: number,row: any) {
     ElMessageBox.confirm('确定删除?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -186,6 +214,7 @@ function del(index: number) {
         .then(() => {
             // splice方法，传两个参数：第几行开始，删除多少条（如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素）
             dataTrees.value.splice(index, 1)
+              useData.placeKid(row.kId)
             ElMessage({
                 type: 'success',
                 message: '删除成功'
@@ -213,17 +242,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)
@@ -236,9 +270,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>

src/components/mt-edit/components/layout/left-aside/index.vue

@@ -64,7 +64,13 @@
         <div class="h-[calc(10%-1px)] flex justify-center items-center ct-border" style="padding-top: 10px">
             <el-button class="w-80/100" @click="onManageClick">管理</el-button>
         </div>
-        <el-dialog v-model="manage_dialog_visiable" title="图库管理" width="50%" destroy-on-close>
+        <el-dialog
+            :close-on-click-modal="false"
+            v-model="manage_dialog_visiable"
+            title="图库管理"
+            width="50%"
+            destroy-on-close
+        >
             <div class="flex">
                 <div>
                     <div>

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 = {

src/components/mt-edit/components/layout/right-aside/json-edit.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-button type="primary" plain round @click="dialogVisible = true">点击编辑</el-button>
-        <el-dialog v-model="dialogVisible" title="配置编辑" width="60%">
+        <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="配置编辑" width="60%">
             <v-ace-editor
                 v-model:value="content"
                 lang="json"

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"
-                v-if="item_title == '绑定监测点' || item_title == '绑定指标'"
-            >
+            <el-form-item label="监测点" size="small" class="mt-10px">
                 <div>
                     <el-cascader
                         :key="cascaderKey"
@@ -47,13 +42,13 @@
         </el-form>
     </div>
     <!-- 无锡监测点 指标 -->
-    <div v-if="useData.graphicDisplay == 'wx'">
+    <div v-if="useData.graphicDisplay == 'wx' || useData.graphicDisplay == 'ypt'">
         <el-form label-width="60px" label-position="left">
             <el-form-item label="监测点" size="small" class="mt-10px">
                 <div>
                     <el-cascader
                         :key="cascaderKey"
-                        :options="treeData_wx"
+                        :options="useData.graphicDisplay == 'ypt' ? treeData : treeData_wx"
                         :props="{ value: 'id', label: 'name', children: 'children' }"
                         clearable
                         placeholder="请选择"
@@ -195,6 +190,11 @@ watch(
                     if (item_title.value == '绑定指标' && deptIds.value) {
                         indexList()
                     }
+                    if (useData.graphicDisplay == 'ypt') {
+                        if (deptIds.value) {
+                            indexList()
+                        }
+                    }
                 })
             }
         })
@@ -289,7 +289,13 @@ const fetchData_wx = async () => {
 // 指标数据
 const indexList = async () => {
     try {
-        const lineId = deptIds.value[deptIds.value.length - 1]
+        let lineId = ''
+        if (typeof deptIds.value === 'string') {
+            lineId = deptIds.value
+        } else {
+            lineId = deptIds.value[deptIds.value.length - 1]
+        }
+
         {
             const response = await targetList({ lineId: lineId })
             if (response.data) {
@@ -304,6 +310,7 @@ const indexList = async () => {
 const handleDeptChange = (deptId: []) => {
     // labelString.value = fileRef.value.getCheckedNodes().pathLabels.join(" / ");
     item_uid.value = []
+    indexString.value = ''
     nextTick(() => {
         //fileRef.value.getCheckedNodes()[0]?.label   最后一层的值
         let name = []
@@ -332,6 +339,12 @@ const handleDeptChange = (deptId: []) => {
                 indexList()
             }
         }
+
+        if (useData.graphicDisplay == 'ypt') {
+            if (deptId) {
+                indexList()
+            }
+        }
     })
 }
 // 给每一个元件绑定下拉框数据
@@ -342,7 +355,6 @@ const handleSelectUID = (uid: []) => {
         let nodes = []
         if (indexRef.value) {
             nodes = indexRef.value.getCheckedNodes()
-            console.log('🚀 ~ handleSelectUID ~ indexRef.value.getCheckedNodes():', indexRef.value.getCheckedNodes())
             name = nodes[0]?.pathLabels || []
         }
         if (selectItemSettingProps.itemJson) {
@@ -354,7 +366,6 @@ const handleSelectUID = (uid: []) => {
                 selectItemSettingProps.itemJson.UIDName = name.join('/')
             }
 
-
             if (is2DArray(uid)) {
                 selectItemSettingProps.itemJson.UIDNames = name.join(' / ')
             } else {

src/components/mt-edit/components/layout/right-aside/select-item-event-setting/index.vue

@@ -222,7 +222,12 @@
                 </div>
             </el-form>
         </el-drawer>
-        <el-dialog v-model="dialog_visiable" :title="dialog_title" :before-close="onDialogClose">
+        <el-dialog
+            :close-on-click-modal="false"
+            v-model="dialog_visiable"
+            :title="dialog_title"
+            :before-close="onDialogClose"
+        >
             <v-ace-editor
                 v-model:value="dialog_code"
                 lang="javascript"

src/components/mt-edit/composables/thumbnail.ts

@@ -10,6 +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) {
@@ -40,13 +41,14 @@ 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,
-        width,
-        height,
+        // width,
+        // height,
         allowTaint: true,
-        windowHeight: height,
+        // windowHeight: height,
         logging: false,
         ignoreElements: element => {
             if (element.classList.contains('mt-line-render')) {

src/components/mt-edit/index.vue

@@ -72,13 +72,36 @@
                 <footer-panel></footer-panel>
             </el-footer>
         </el-container>
-        <el-dialog v-model="import_visible" title="数据导入" @close="mainPanelRef?.beginListenerKeyDown()">
+        <!-- 上传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"
+            title="数据导入"
+            @close="mainPanelRef?.beginListenerKeyDown()"
+        >
             <import-json ref="importJsonRef"></import-json>
             <template #footer>
                 <el-button type="primary" @click="onImportYes">确定</el-button>
             </template>
         </el-dialog>
-        <el-dialog v-model="export_visible" title="数据导出" @close="mainPanelRef?.beginListenerKeyDown()">
+        <el-dialog
+            :close-on-click-modal="false"
+            v-model="export_visible"
+            title="数据导出"
+            @close="mainPanelRef?.beginListenerKeyDown()"
+        >
             <export-json
                 :done-json="objectDeepClone(globalStore.done_json)"
                 :canvas-cfg="globalStore.canvasCfg"
@@ -114,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
 }
@@ -150,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)
@@ -159,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)
@@ -197,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)
@@ -219,9 +318,14 @@ const onSaveClick = () => {
 }
 
 const useData = useDataStore()
-const onSaveAll = () => {
+const onSaveAll = async () => {
+    let data: any = await useData.dataTree.map((item, ind) => {
+        item.sort = ind
+        return item
+    })
+
     let form = new FormData()
-    let blob = new Blob([JSON.stringify(useData.dataTree)], {
+    let blob = new Blob([JSON.stringify(data)], {
         type: 'application/json'
     })
     form.append('multipartFile', blob)
@@ -251,6 +355,7 @@ defineExpose({
 .mt-edit-aside {
     transition: width 0.3s;
 }
+
 .mt-edit-aside-left {
     padding-left: 5px;
 }

src/components/mt-preview-ypt/index.ts

@@ -0,0 +1,3 @@
+import MtPreviewYPT from './index.vue'
+
+export default MtPreviewYPT

src/components/mt-preview-zl/index.ts

@@ -0,0 +1,3 @@
+import MtPreview from './index.vue'
+
+export default MtPreview

src/components/mt-preview/index.vue

@@ -4,6 +4,11 @@
         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>
         <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
@@ -18,11 +23,6 @@
             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
@@ -92,6 +92,8 @@ const tableData = [
     // }
 ]
 
+const targetKeywords = ['开关', '器', '阀门', '控制']
+
 const showDetail = ref(false)
 
 const showDetailClick = () => {
@@ -581,11 +583,12 @@ const setImportJson = (exportJson: IExportJson) => {
         addClickEventsToElements()
 
         // 首页初始化的时候
-        setTimeout(() => {
+        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)) {
@@ -644,7 +647,7 @@ const setImportJson = (exportJson: IExportJson) => {
                 //      item.props.ani_color.val = '#8c0ae2'
                 // }
             })
-        }, 1000)
+        })
     }
 
     if (!useData.loading) {
@@ -691,7 +694,7 @@ const findSwitchByLineEndpoint = (lineId: string): string | null => {
     const startId = bindAnchors.start?.id
     if (startId) {
         const startElement = savedExportJson.value.json.find(item => item.id === startId)
-        if (startElement && startElement.title?.includes('开关')) {
+        if (startElement && targetKeywords.some(keyword => startElement.title?.includes(keyword))) {
             return startElement.id!
         }
     }
@@ -700,7 +703,7 @@ const findSwitchByLineEndpoint = (lineId: string): string | null => {
     const endId = bindAnchors.end?.id
     if (endId) {
         const endElement = savedExportJson.value.json.find(item => item.id === endId)
-        if (endElement && endElement.title?.includes('开关')) {
+        if (endElement && targetKeywords.some(keyword => endElement.title?.includes(keyword))) {
             return endElement.id!
         }
     }
@@ -777,6 +780,7 @@ const handleElementClick = (elementId: string) => {
         )
     }
 }
+const bindList = ref<string[]>([])
 const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
     // 确保 savedExportJson.value 存在
     if (!savedExportJson.value?.json) {
@@ -786,9 +790,23 @@ const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
 
     // 查找所有连线元素
     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 => item.title?.includes('开关'))
+    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[] = []
@@ -1010,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)
         })

src/export.ts

@@ -7,5 +7,7 @@ import '@/components/mt-edit/assets/css/custom_ani.css'
 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 }
+export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt, MtPreviewZl }

src/router/index.ts

@@ -19,6 +19,18 @@ 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: 'preview_ZL',
+        path: '/preview_ZL',
+        component: () => import('../views/preview/index_ZL.vue')
+    },
     {
         name: 'edit-load',
         path: '/edit-load',

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,18 @@ 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.keyName = ''
+            this.dataTree.forEach((item: any) => {
+                if (item.kId == id) {
+                    this.keyName = item.name
+                }
+            })
         },
         setUpPath(data: String) {
             this.dataTree.forEach((item: any) => {

src/stores/menuList/types.ts

@@ -9,6 +9,7 @@ export interface DataStoreState {
     preview?: String
     wxqr?: String
     loading?: boolean
+    keyName?: String
     display?: Boolean //是否展示返回按钮
     graphicDisplay?: string //是否展示数据绑定图元
 }

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) {

src/utils/mqtt.ts

@@ -54,9 +54,9 @@ class MQTT {
         try {
             // const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
             const mqttUrl =
-                localStorage.getItem('MqttUrl') == 'null'
-                    ? 'ws://192.168.1.24:8085/mqtt'
-                    : localStorage.getItem('MqttUrl')
+                localStorage.getItem('MQTTZUTAI') == 'null'
+                    ? 'ws://192.168.1.103:8083/mqtt'
+                    : localStorage.getItem('MQTTZUTAI')
             console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
             this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)
             this.setupEventListeners()

src/utils/request.ts

@@ -19,16 +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中
-                // console.log(
-                //   "🚀 ~ requestHandler ~ config.headers['Authorization']:",
-                //   JSON.parse(window.localStorage.getItem('adminInfo') || '{}'),
-                //   config.headers
-                // );
-
                 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
             },

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>

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>