Ver código fonte

使用mock数据,初始化显示拓扑图到页面上

yunxing 4 anos atrás
pai
commit
fdea9bc3ff
2 arquivos alterados com 54 adições e 36 exclusões
  1. 42 25
      src/components/baseEditer.vue
  2. 12 11
      src/components/test.json

+ 42 - 25
src/components/baseEditer.vue

@@ -81,12 +81,12 @@ export default {
          * 使用模拟数据,加载绘制后的数据到视图
          */
         initLoad() {
-            let data = require("./test.json");
+            let data = require("./mock.json");
             const parserData = new STopologyParser(null);
             parserData.parseData(data.Elements);
             let Markers = data.Elements.Markers;
             let Nodes = data.Elements.Nodes;
-
+            const itemMap = {};
             // 使用 SEquipmentParser 解析器增加设备
             let parserData1 = new SEquipmentParser(null);
             parserData1.parseData(Nodes);
@@ -98,22 +98,24 @@ export default {
                 this.scene.addItem(item);
                 // this.scene.equipmentItem.push(item);
                 this.scene.Nodes.push(item);
+                console.log(item);
+                itemMap[item.id] = item;
             });
             // 使用STopologyParser 解析器 增加直线
             parserData.lineMarkerList.map(t => {
                 this.scene.addItem(t);
                 this.scene.Markers.push(t);
-                // 设置关联Item
-                // if (t.data.Properties && t.data.Properties.StartItemId) {
-                //     const startItem = Nodes.filter(equipment => equipment.ID === t.data.Properties.StartItemId)[0];
-                //     startItem?.connect("onMove", t, t.changePos);
-                //     t.startItem = startItem || null;
-                // }
-                // if (t.data.Properties && t.data.Properties.EndItemId) {
-                //     const endItem = Nodes.filter(equipment => equipment.ID === t.data.Properties.EndItemId)[0];
-                //     endItem?.connect("onMove", t, t.changePos);
-                //     t.endItem = endItem || null;
-                // }
+                // 设置关联Item;
+                if (t.data.Properties && t.data.Properties.StartItemId) {
+                    const startItem = itemMap[t.data.Properties.StartItemId];
+                    startItem?.connect("onMove", t, t.changePos);
+                    t.startItem = startItem || null;
+                }
+                if (t.data.Properties && t.data.Properties.EndItemId) {
+                    const endItem = itemMap[t.data.Properties.EndItemId];
+                    endItem?.connect("onMove", t, t.changePos);
+                    t.endItem = endItem || null;
+                }
             });
             // bus.$emit("elementDataChange", this.scene);
             console.log("initLoad end");
@@ -194,14 +196,16 @@ export default {
             }
         },
         // 读取绘制数据
+        // 读取绘制数据
         readGraph() {
             this.readGroup().then(data => {
                 this.graphId = data.Data[0].ID;
                 bus.$emit("setGraphId", this.graphId);
                 if (data.Data) {
                     const parserData = new STopologyParser(null);
+                    const itemMap = {};
                     parserData.parseData(data.Data[0].Elements);
-                    // 多边形
+                    // 多边形(此item需在直线item添加之前添加)
                     parserData.zoneLegendList.forEach(t => {
                         this.scene.addItem(t);
                         // 记录提取
@@ -209,46 +213,59 @@ export default {
                             this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
                         }
                         this.scene.Nodes.push(t);
+                        itemMap[t.id] = t;
                     });
-                    // 增加文字
+                    // 增加文字(此item需在直线item添加之前添加)
                     parserData.textMarkerList.forEach(t => {
                         this.scene.addItem(t);
                         this.scene.Markers.push(t);
+                        itemMap[t.id] = t;
                     });
-                    // 增加图片
+                    // 增加图片(此item需在直线item添加之前添加)
                     parserData.imageMarkerList.forEach(t => {
                         this.scene.addItem(t);
                         this.scene.Markers.push(t);
-                    });
-                    // 增加直线
-                    parserData.lineMarkerList.forEach(t => {
-                        this.scene.addItem(t);
-                        this.scene.Markers.push(t);
+                        itemMap[t.id] = t;
                     });
                     // 增加图标类图例(此item需在管线item添加之前添加)
-                    const ancToAnchor = {};
                     parserData.imageLegendList.forEach(t => {
                         this.scene.addItem(t);
                         this.scene.Nodes.push(t);
                         if (t.anchorList && t.anchorList.length) {
                             t.anchorList.forEach(anc => {
-                                ancToAnchor[anc.id] = anc;
+                                itemMap[anc.id] = anc;
                             });
                         }
                     });
+                    // 增加直线
+                    parserData.lineMarkerList.forEach(t => {
+                        this.scene.addItem(t);
+                        this.scene.Markers.push(t);
+                        // 设置关联Item
+                        if (t.data.Properties && t.data.Properties.StartItemId) {
+                            const startItem = itemMap[t.data.Properties.StartItemId];
+                            startItem?.connect("onMove", t, t.changePos);
+                            t.startItem = startItem || null;
+                        }
+                        if (t.data.Properties && t.data.Properties.EndItemId) {
+                            const endItem = itemMap[t.data.Properties.EndItemId];
+                            endItem?.connect("onMove", t, t.changePos);
+                            t.endItem = endItem || null;
+                        }
+                    });
                     // 增加管线类(需在图标类图例添加后添加)
                     parserData.relationList.forEach(t => {
                         this.scene.addItem(t);
                         this.scene.Relations.push(t);
                         // 设置锚点
                         if (t.anchor1ID) {
-                            const startAnc = ancToAnchor[t.anchor1ID];
+                            const startAnc = itemMap[t.anchor1ID];
                             startAnc.isConnected = true;
                             startAnc.parent?.connect("changePos", t, t.changePos);
                             t.startAnchor = startAnc || null;
                         }
                         if (t.anchor2ID) {
-                            const endAnc = ancToAnchor[t.anchor2ID];
+                            const endAnc = itemMap[t.anchor2ID];
                             endAnc.isConnected = true;
                             endAnc.parent?.connect("changePos", t, t.changePos);
                             t.endAnchor = endAnc || null;

Diferenças do arquivo suprimidas por serem muito extensas
+ 12 - 11
src/components/test.json