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 @@
/>
-->
-
+
+
+ 默认上传按钮（隐藏）
+
+
{
)
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 @@
-
-
-
-
+
+
+
+