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

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%" />
@@ -155,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,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,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: '取消',
@@ -193,6 +214,7 @@ function del(index: number) {
         .then(() => {
             // splice方法，传两个参数：第几行开始，删除多少条（如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素）
             dataTrees.value.splice(index, 1)
+              useData.placeKid(row.kId)
             ElMessage({
                 type: 'success',
                 message: '删除成功'
@@ -220,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)
@@ -243,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/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/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"
-                v-if="item_title == '绑定监测点' || item_title == '绑定指标'"
-            >
                 <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/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
 

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

@@ -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)
         })

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 }

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',

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

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

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
             },

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>