修改测试用例

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%" />

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

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

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')
-        const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
+    Sortable.create(tbody, {
-        if (!tbody) {
+        animation: 100,
-            console.error('未找到 tbody 元素')
+        onEnd: ({ oldIndex, newIndex }) => {
-            return
+            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>

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
+            <el-form-item label="监测点" size="small" class="mt-10px">
-                label="监测点"
-                size="small"
-                class="mt-10px"
-               
-            >
                 <div>
                     <el-cascader
                         :key="cascaderKey"

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
+    uploadRef.value?.$el.querySelector('input[type="file"]')?.click()
-    mainPanelRef.value?.stopListenerKeyDown()
+    // 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
+    // export_visible.value = true
-    mainPanelRef.value?.stopListenerKeyDown()
+    // 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 onImportYes = async (row: any) => {
-    const res = await importJsonRef.value?.onImport()
+    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)

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 }

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

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/views/preview/index_ZL.vue

@@ -1,19 +1,19 @@
-<template>
+<template>
-    <mt-preview-zl ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-zl>
+    <mt-preview-zl ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-zl>
-</template>
+</template>
-<script setup lang="ts">
+<script setup lang="ts">
-import { MtPreviewZl } from '@/export'
+import { MtPreviewZl } from '@/export'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
-const MtPreviewRef = ref<InstanceType<typeof MtPreviewZl>>()
+const MtPreviewRef = ref<InstanceType<typeof MtPreviewZl>>()
-const onEventCallBack = (type: string, item_id: string) => {
+const onEventCallBack = (type: string, item_id: string) => {
-    console.log(type, item_id)
+    console.log(type, item_id)
-
+
-    if (type == 'test-dialog') {
+    if (type == 'test-dialog') {
-        ElMessage.success(`获取到了id:${item_id}`)
+        ElMessage.success(`获取到了id:${item_id}`)
-    }
+    }
-}
+}
-onMounted(() => {
+onMounted(() => {
-    MtPreviewRef.value?.setImportJson(JSON.parse(sessionStorage.getItem('exportJson') as any))
+    MtPreviewRef.value?.setImportJson(JSON.parse(sessionStorage.getItem('exportJson') as any))
-})
+})
-</script>
+</script>