Forráskód Böngészése

'直线添加关联关系'

zhangyu 4 éve
szülő
commit
4c680d1664

+ 26 - 12
src/components/baseEditer.vue

@@ -158,8 +158,9 @@ export default {
         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);
             // 记录提取
@@ -167,46 +168,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

+ 114 - 2
src/components/mapClass/EditScence.ts

@@ -169,6 +169,11 @@ export class EditScence extends SGraphScene {
         item.connect("finishCreated", this, this.finishCreated);
         this.grabItem = item;
         this.focusItem = item;
+        // 起始item点
+        item.startItem = clickItem;
+        if (clickItem) {
+            clickItem.connect('onMove', item, item.changePos);
+        }
         this.scenceUpdate(this);
         // this.undoStack.push(new SGraphAddCommand(this, item));
         // item.connect("onMove", this, this.onItemMove.bind(this));
@@ -393,7 +398,7 @@ export class EditScence extends SGraphScene {
                 Text: '请在右侧属性栏输入文字!',
                 Color: '',
                 Font: 12,
-                BackgroundColor: ''
+                BackgroundColor: '#f7f9fa'
             }
         }
         const item = new STextMarkerItem(null, data);
@@ -425,6 +430,7 @@ export class EditScence extends SGraphScene {
             Scale: { X: 1, Y: 1, Z: 1 },          // 缩放
             Rolate: { X: 0, Y: 0, Z: 0 },
             Size: { Width: 0, Height: 0 },         // 大小
+            Type: this._legend.Type,
             Properties: {
                 IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
                 Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
@@ -792,6 +798,9 @@ export class EditScence extends SGraphScene {
             if (this.grabItem instanceof TipelineItem) {
                 this.setTipeEndanchor(event)
                 return true;
+            } else if (this.grabItem instanceof SLineMarkerItem && this.grabItem.status == SItemStatus.Create) {
+                this.setLineItem(event)
+                return true;
             }
             return this.grabItem.onMouseDown(event);
         }
@@ -836,6 +845,17 @@ export class EditScence extends SGraphScene {
         return super.onMouseMove(event)
     }
 
+    onMouseUp(event: SMouseEvent): boolean {
+        if (this.grabItem) {
+            if (this.grabItem instanceof SLineMarkerItem && this.grabItem.status == SItemStatus.Edit) {
+                this.setLineItem(event)
+                return true;
+            }
+            return this.grabItem.onMouseUp(event);
+        }
+        return super.onMouseUp(event)
+    }
+
     /**
      * 键盘事件
      *
@@ -862,7 +882,7 @@ export class EditScence extends SGraphScene {
     }
 
     /**
-     * 设置结束锚点
+     * 设置管线结束锚点
      *
     */
     setTipeEndanchor(event: SMouseEvent): void {
@@ -889,6 +909,98 @@ export class EditScence extends SGraphScene {
             this.grabItem.onMouseDown(event)
         }
     }
+    
+    /**
+     * 设置直线结束Item
+     *
+    */
+   setLineItem(event: SMouseEvent): void {
+        if (this.grabItem instanceof SLineMarkerItem) {
+            const item = this.clickIsItem(event);
+            // 鼠标点是否在某个item内
+            if (item) {
+                let scenePoint = item.boundingRect().center();
+                const p = item.mapToScene(scenePoint.x, scenePoint.y);
+                event.x = p.x;
+                event.y = p.y;
+                if (this.grabItem.status == SItemStatus.Create) {
+                    // 点击在item内、创建状态且端点列表不为空时将直线结束端点和item绑定
+                    if (this.grabItem.line.length) {
+                        this.grabItem.endItem = item;
+                        this.grabItem.line[1] = new SPoint(event.x, event.y);
+                        item.connect('onMove', this.grabItem, this.grabItem.changePos);
+                    }
+                    this.grabItem.onMouseDown(event);
+                    return
+                } else if (this.grabItem.status == SItemStatus.Edit) {
+                    // 点击在item内、编辑状态且点击的为结束端点时
+                    if (this.grabItem.curIndex == 1) {
+                        // 直线关联的起始item是直线结束端点所在的item时,不吸附在点击item中心并将直线关联的结束item置为null
+                        if (this.grabItem.startItem?.id == item.id) {
+                            this.grabItem.endItem = null;
+                        } else {// 反正吸附,关联
+                            this.grabItem.endItem = item;
+                            this.grabItem.line[1] = new SPoint(event.x, event.y);
+                            item.connect('onMove', this.grabItem, this.grabItem.changePos);
+                        }
+                    } else if (this.grabItem.curIndex == 0) {
+                        if (this.grabItem.endItem?.id == item.id) {
+                            this.grabItem.startItem = null;
+                        } else {
+                            this.grabItem.startItem = item;
+                            this.grabItem.line[0] = new SPoint(event.x, event.y);
+                            item.connect('onMove', this.grabItem, this.grabItem.changePos);
+                        }
+                    }
+                }
+            } else {
+                // 如果不在item内且点击的是直线的某个端点,将端点的关联item置为null
+                if (this.grabItem.line.length && this.grabItem.curIndex != -1) {
+                    if (this.grabItem.curIndex == 1) {
+                        this.grabItem.endItem = null;
+                    } else if (this.grabItem.curIndex == 0) {
+                        this.grabItem.startItem = null;
+                    }
+                }
+            }
+
+            // if (this.grabItem.status == SItemStatus.Create) {
+            //     // 鼠标点是否在某个item内
+            //     if (item) {
+            //         let scenePoint = item.boundingRect().center();
+            //         const p = item.mapToScene(scenePoint.x, scenePoint.y);
+            //         event.x = p.x;
+            //         event.y = p.y;
+            //         if (this.grabItem.line.length && this.grabItem.curIndex == -1) {
+            //             this.grabItem.endItem = item;
+            //             this.grabItem.line[1] = new SPoint(event.x, event.y);
+            //             item.connect('onMove', this.grabItem, this.grabItem.changePos);
+            //         }
+            //         this.grabItem.onMouseDown(event);
+            //         return
+            //     } else {
+            //         if (this.grabItem.line.length && this.grabItem.curIndex != -1) {
+            //             if (this.grabItem.curIndex == 1) {
+            //                 this.grabItem.endItem = null;
+            //             } else if (this.grabItem.curIndex == 0) {
+            //                 this.grabItem.startItem = null;
+            //             }
+            //         }
+            //     }
+            // } else if (this.grabItem.status == SItemStatus.Edit) {
+            //             if (this.grabItem.curIndex == 1) {
+            //                 this.grabItem.endItem = item;
+            //                 this.grabItem.line[1] = new SPoint(event.x, event.y);
+            //                 item.connect('onMove', this.grabItem, this.grabItem.changePos);
+            //             } else if (this.grabItem.curIndex == 0) {
+            //                 this.grabItem.startItem = item;
+            //                 this.grabItem.line[0] = new SPoint(event.x, event.y);
+            //                 item.connect('onMove', this.grabItem, this.grabItem.changePos);
+            //             }
+            // }
+            this.grabItem.onMouseUp(event);
+        }
+    }
 
     /**
      *  划线时点击位置是否是锚点

+ 18 - 2
src/lib/items/SLineMarkerItem.ts

@@ -18,6 +18,20 @@ export class SLineMarkerItem extends SLineItem {
     /** 标识对象数据 */
     data: Marker;
 
+    /** 是否完成绘制  */
+    get status(): SItemStatus {
+        return this._status;
+    }
+    set status(v: SItemStatus) {
+        this._status = v;
+        if (v == SItemStatus.Edit) {
+            this.zOrder = ItemOrder.markOrder;
+        } else {
+            this.zOrder = ItemOrder.lineOrder;
+        }
+        this.update();
+    }
+
     /** 是否蒙版遮罩  */
     _maskFlag: boolean = false;
     get maskFlag(): boolean {
@@ -67,13 +81,15 @@ export class SLineMarkerItem extends SLineItem {
         if (this.startItem) {
             // 判断删除equip后,不移动
             if (this.startItem.parent) {
-                this.line[0] = this.startItem.mapToScene(0, 0);
+                let scenePoint: SPoint = this.startItem.boundingRect().center();
+                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y);
             }
         }
         if (this.endItem) {
             // 删除equip后
             if (this.endItem.parent) {
-                this.line[1] = this.endItem.mapToScene(0, 0);
+                let scenePoint: SPoint = this.endItem.boundingRect().center();
+                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y);
             }
         }
     }

+ 15 - 8
src/lib/parsers/STopologyParser.ts

@@ -15,6 +15,8 @@ import { STextMarkerItem } from '../items/STextMarkerItem';
 import { TipelineItem } from '../items/TipelineItem';
 import { ItemOrder } from "@saga-web/big";
 import { SItemStatus } from "@saga-web/big";
+import { SSCPZZoneLegendItem } from '../items/SSCPZZoneLegendItem';
+import { SFHFQZoneLegendItem } from '../items/SFHFQZoneLegendItem';
 /**
  * 拓扑图信息解析器
  *
@@ -72,10 +74,19 @@ export class STopologyParser extends SParser {
             let item = new SNoneLegendItem(null, t);
             this.noneLegendList.push(item);
         } else if (t.GraphElementType == "Zone") {
-            let item = new SZoneLegendItem(null, t);
-            item.selectable = true;
-            item.zOrder == ItemOrder.polygonOrder;
-            this.zoneLegendList.push(item);
+            if (t.SubType == "SCPZ") {
+                let item = new SSCPZZoneLegendItem(null, t);
+                item.selectable = true;
+                this.zoneLegendList.push(item);
+            } else if (t.SubType == "FHFQ") {
+                let item = new SFHFQZoneLegendItem(null, t);
+                item.selectable = true;
+                this.zoneLegendList.push(item);
+            } else {
+                let item = new SZoneLegendItem(null, t);
+                item.selectable = true;
+                this.zoneLegendList.push(item);
+            }
         } else if (t.GraphElementType == 'Image') {
             let item = new SImageLegendItem(null, t);
             item.selectable = true;
@@ -93,16 +104,13 @@ export class STopologyParser extends SParser {
             let item = new SImageMarkerItem(null, t);
             this.imageMarkerList.push(item);
             item.selectable = true;
-            item.zOrder = ItemOrder.imageOrder;
         } else if (t.Type == "Line") {
             let item = new SLineMarkerItem(null, t);
             item.selectable = true;
-            item.zOrder = ItemOrder.lineOrder;
             this.lineMarkerList.push(item);
         } else if (t.Type == "Text") {
             let item = new STextMarkerItem(null, t);
             item.selectable = true;
-            item.zOrder = ItemOrder.lineOrder;
             this.textMarkerList.push(item);
         }
     } // Function addMarker()
@@ -115,7 +123,6 @@ export class STopologyParser extends SParser {
     private addRelation(t: Relation): void {
         let item = new TipelineItem(null, t);
         item.selectable = true;
-        item.zOrder == ItemOrder.polylineOrder;
         this.relationList.push(item);
     } // Function addRelation()
 } // class STopologyParser

+ 1 - 1
src/lib/types/Legend.ts

@@ -38,7 +38,7 @@ export interface Legend {
     /** 返回工程信息化对象 ID 列表 */
     AttachObjectIds?: string[];
     /** 图标,区域类型  */
-    GraphElementType: SGraphElementType;
+    GraphElementType: string;
     /** 对应的图例ID  */
     GraphElementId: string;
     /** 图例数量  */