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%">
@@ -93,7 +100,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>

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

@@ -36,7 +36,14 @@
             </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="请输入图纸名称" />

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

@@ -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 = []
@@ -342,7 +349,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 +360,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,23 @@
                 <footer-panel></footer-panel>
             </el-footer>
         </el-container>
-        <el-dialog v-model="import_visible" title="数据导入" @close="mainPanelRef?.beginListenerKeyDown()">
+        <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"
@@ -219,9 +229,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 +266,7 @@ defineExpose({
 .mt-edit-aside {
     transition: width 0.3s;
 }
+
 .mt-edit-aside-left {
     padding-left: 5px;
 }

src/components/mt-preview/index.vue

@@ -92,6 +92,8 @@ const tableData = [
     // }
 ]
 
+const targetKeywords = ['开关', '器', '阀门', '控制']
+
 const showDetail = ref(false)
 
 const showDetailClick = () => {
@@ -581,7 +583,7 @@ const setImportJson = (exportJson: IExportJson) => {
         addClickEventsToElements()
 
         // 首页初始化的时候
-        setTimeout(() => {
+        nextTick(() => {
             done_json.value.forEach(item => {
                 //报警设备闪烁
                 if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
@@ -644,7 +646,7 @@ const setImportJson = (exportJson: IExportJson) => {
                 //      item.props.ani_color.val = '#8c0ae2'
                 // }
             })
-        }, 1000)
+        })
     }
 
     if (!useData.loading) {
@@ -691,7 +693,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 +702,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 +779,7 @@ const handleElementClick = (elementId: string) => {
         )
     }
 }
+const bindList = ref<string[]>([])
 const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
     // 确保 savedExportJson.value 存在
     if (!savedExportJson.value?.json) {
@@ -786,9 +789,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[] = []

src/export.ts

@@ -7,5 +7,6 @@ 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 { leftAsideStore } from '@/components/mt-edit/store/left-aside'
-export { MtDzr, MtEdit, MtPreview, leftAsideStore }
+export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt }

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'
+                localStorage.getItem('MQTTZUTAI') == 'null'
                     ? 'ws://192.168.1.24:8085/mqtt'
-                    : localStorage.getItem('MqttUrl')
+                    : localStorage.getItem('MQTTZUTAI')
             console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
             this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)
             this.setupEventListeners()