YaolongHan vor 4 Jahren
Ursprung
Commit
f7f30baa4a

+ 2 - 2
package.json

@@ -9,10 +9,10 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.22",
-    "@saga-web/big": "1.0.57",
+    "@saga-web/big": "1.0.58",
     "@saga-web/draw": "2.1.100",
     "@saga-web/feng-map": "1.0.15",
-    "@saga-web/graph": "2.1.95",
+    "@saga-web/graph": "2.1.96",
     "ant-design-vue": "^1.6.0",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.2",

+ 33 - 19
src/components/baseEditer.vue

@@ -179,8 +179,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);
             // 记录提取
@@ -188,31 +189,44 @@ 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
             }
           });
           // 增加管线类(需在图标类图例添加后添加)
@@ -221,16 +235,16 @@ export default {
             this.scene.Relations.push(t);
             // 设置锚点
             if (t.anchor1ID) {
-              const startAnc = ancToAnchor[t.anchor1ID];
-              startAnc.isConnected = true;
-              startAnc.parent?.connect("changePos", t, t.changePos);
-              t.startAnchor = startAnc || null;
+              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];
-              endAnc.isConnected = true;
-              endAnc.parent?.connect("changePos", t, t.changePos);
-              t.endAnchor = endAnc || null;
+              const endAnc = itemMap[t.anchor2ID]
+              endAnc.isConnected = true
+              endAnc.parent?.connect('changePos', t, t.changePos)
+              t.endAnchor = endAnc || null
             }
           });
           this.view.fitSceneToView();

+ 10 - 1
src/components/edit/attr_select.vue

@@ -21,6 +21,7 @@
         <div class="row-tit">线型</div>
         <a-select
           style="width: 208px"
+          v-model="borderStyle"
           :default-value="borderLineOption[0].id"
           @change="changeBorder"
         >
@@ -293,7 +294,7 @@ import editDialog from "./edit-dialog";
 import Swatches from "vue-swatches";
 import bus from "@/bus";
 import "vue-swatches/dist/vue-swatches.css";
-import { ItemColor } from "@saga-web/big/lib";
+import { SLineStyle } from "@saga-web/graph/lib";
 import { uploadImg, queryGlsmsLocation,queryGlsmsAsset } from "@/api/editer.js";
 export default {
   name: "attr_select",
@@ -319,6 +320,7 @@ export default {
       fontColor: "#1CA085", //文字颜色
       borderColor: "", // 边框颜色 直线,折线,多边形等
       backColor: "", //背景色 用于text文字
+      borderStyle: "solid",
       borderLineOption: [
         {
           id: "solid",
@@ -494,6 +496,13 @@ export default {
         } else if (newval.itemType == "baseLine") {
           this.lineWidth = Item.lineWidth;
           this.borderColor = Item.strokeColor.value;
+          if (Item.lineStyle == SLineStyle.Soild) {
+            this.borderStyle = "solid";
+          } else if (Item.lineStyle == SLineStyle.Dashed) {
+            this.borderStyle = "dashed";
+          } else if (Item.lineStyle == SLineStyle.Dotted) {
+            this.borderStyle = "dotted";
+          }
         } else if (
           newval.itemType == "Zone" ||
           newval.itemType == "Line" ||

+ 121 - 6
src/components/mapClass/EditScence.ts

@@ -182,6 +182,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));
@@ -408,7 +413,7 @@ export class EditScence extends SGraphScene {
                 Text: '请在右侧属性栏输入文字!',
                 Color: '',
                 Font: 12,
-                BackgroundColor: ''
+                BackgroundColor: '#f7f9fa'
             }
         }
         const item = new STextMarkerItem(null, data);
@@ -441,6 +446,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,
@@ -621,13 +627,13 @@ export class EditScence extends SGraphScene {
      */
     upadataBorder(val: string): void {
         if (this.focusItem) {
-            let borderStyle = null
+            let borderStyle = null;
             if (val == 'dashed') {
-                borderStyle = SLineStyle.Dashed
+                borderStyle = SLineStyle.Dashed;
             } else if (val == 'dotted') {
-                borderStyle = SLineStyle.Dotted
+                borderStyle = SLineStyle.Dotted;
             } else if (val == 'solid') {
-                borderStyle = SLineStyle.Soild
+                borderStyle = SLineStyle.Soild;
             }
             this.focusItem.lineStyle = borderStyle;
         }
@@ -859,6 +865,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);
         }
@@ -906,6 +915,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)
+    }
+
     /**
      * 键盘事件
      *
@@ -952,7 +972,7 @@ export class EditScence extends SGraphScene {
     } // Function onDoubleClick()
 
     /**
-     * 设置结束锚点
+     * 设置管线结束锚点
      *
     */
     setTipeEndanchor(event: SMouseEvent): void {
@@ -979,6 +999,101 @@ 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;
+                    }
+                } else {
+                    this.grabItem.onMouseDown(event);
+                    return
+                }
+            }
+
+            // 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;
     /** 图例数量  */