修改

src/views/bigScreen/cockpit/components/ViewInfo.vue

@@ -4,7 +4,7 @@
  * @Autor: pan
  * @Date: 2024-06-05 10:20:36
  * @LastEditors: pan
- * @LastEditTime: 2024-06-07 16:43:28
+ * @LastEditTime: 2024-06-11 15:19:04
 -->
 <template>
   <div>
@@ -40,7 +40,8 @@
           </div>
         </el-scrollbar>
         <div class="mxGraph flex-1">
-          <div id="mxGraph_root" class="w-100 h-100"></div>
+          <img class="w-100 h-100" :src="metaModelData" alt="" />
+          <!-- <div id="mxGraph_root" class="w-100 h-100"></div> -->
         </div>
       </template>
       <el-empty class="w-100" v-else description="暂无数据"></el-empty>
@@ -64,7 +65,8 @@ export default {
       archiBelongOptions: [],
       viewList: [],
       graph: null,
-      loading: false
+      loading: false,
+      metaModelData: ''
     }
   },
   components: {},
@@ -76,8 +78,9 @@ export default {
       return `data:image/svg+xml;base64,${base64}`
     },
     fnCheckGraph(item) {
-      this.graph.destroy()
-      this.initGraph(item.metaModelData)
+      // this.graph.destroy()
+      // this.initGraph(item.metaModelData)
+      this.metaModelData = this.getSvg(item.metaModelSvg)
     },
     handleSubClick() {
       this.graph?.destroy()
@@ -99,40 +102,43 @@ export default {
         archiBelongId: this.activeName,
       }
       this.loading = true
-      getViewInfo(params).then((res) => {
-        this.loading = false
-        if (res.code === 200) {
-          this.viewList = res.data
-          this.$nextTick(() => {
-            this.initGraph(this.viewList[0]?.metaModelData)
-          })
-        } else {
-          this.viewList = []
-        }
-      }).catch(err => {
-        this.loading = false
-      })
-    },
-    initGraph(xml) {
-      if (!xml) return
-      this.graph = new mxGraph(document.getElementById('mxGraph_root'))
-      this.graph.centerZoom = false // 是否居中缩放
-      this.graph.setEnabled(false) // 设置启用,就是允不允许你改变CELL的形状内容。
-      const model = this.graph.getModel()
-      model.beginUpdate()
-      try {
-        const parseXml = xml.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
-        var doc = mxUtils.parseXml(xml)
-        var codec = new mxCodec(doc)
-        console.log('doc', parseXml)
-        codec.decode(doc.documentElement, this.graph.getModel())
-      } finally {
-        model.endUpdate()
-      }
+      getViewInfo(params)
+        .then((res) => {
+          this.loading = false
+          if (res.code === 200) {
+            this.viewList = res.data
+            this.metaModelData = this.getSvg(this.viewList[0].metaModelSvg)
+            // this.$nextTick(() => {
+            //   this.initGraph(this.viewList[0]?.metaModelData)
+            // })
+          } else {
+            this.viewList = []
+          }
+        })
+        .catch((err) => {
+          this.loading = false
+        })
     },
+    // initGraph(xml) {
+    //   if (!xml) return
+    //   this.graph = new mxGraph(document.getElementById('mxGraph_root'))
+    //   this.graph.centerZoom = false // 是否居中缩放
+    //   this.graph.setEnabled(false) // 设置启用,就是允不允许你改变CELL的形状内容。
+    //   const model = this.graph.getModel()
+    //   model.beginUpdate()
+    //   try {
+    //     const parseXml = xml.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
+    //     var doc = mxUtils.parseXml(xml)
+    //     var codec = new mxCodec(doc)
+    //     console.log('doc', parseXml)
+    //     codec.decode(doc.documentElement, this.graph.getModel())
+    //   } finally {
+    //     model.endUpdate()
+    //   }
+    // },
   },
   destroyed() {
-    this.graph.destroy()
+    // this.graph.destroy()
   },
 }
 </script>
@@ -149,8 +155,8 @@ export default {
       background-color: #f5fffe;
       cursor: pointer;
       .svg {
-        width: 240px;
-        height: 140px;
+        width: 140px;
+        height: 100px;
       }
     }
   }

src/views/bigScreen/cockpit/manageCockpit/index.vue

@@ -4,7 +4,7 @@
  * @Autor: pan
  * @Date: 2024-06-05 09:51:26
  * @LastEditors: pan
- * @LastEditTime: 2024-06-07 15:17:16
+ * @LastEditTime: 2024-06-11 09:29:35
 -->
 <template>
   <div class="w-100 h-100 manageCockpit flex">
@@ -17,7 +17,7 @@
         @node-click="handleNodeClick"
       ></el-tree>
     </div>
-    <div class="flex-1" style="min-width: 0;">
+    <div class="flex-1" style="min-width: 0">
       <div class="header__wrap p-16">
         <div class="header-title m-b-16 align-l font-bold font-18">
           发展策划部
@@ -32,7 +32,12 @@
 
       <div class="content__wrap flex">
         <ProjectInfo ref="project" style="width: 30%" />
-        <ViewInfo style="width: 70%;" :prjId="prjInfo.prjId" ref="view" class="flex-1" />
+        <ViewInfo
+          style="width: 70%"
+          :prjId="prjInfo.prjId"
+          ref="view"
+          class="flex-1"
+        />
       </div>
     </div>
 
@@ -108,7 +113,7 @@ export default {
       this.prjInfo = data[0]
       this.init()
     },
-    handleNodeClick(){}
+    handleNodeClick() {},
   },
 }
 </script>