箭头绘制

src/api/editer.ts

@@ -7,11 +7,16 @@ export function saveGroup(postParams: any): any {
     return httputils.postJson(`/labsl${baseApi}save`, postParams)
 }
 
-//读取系统图
+//读取系统图-草稿箱
 export function readGroup(postParams: any): any {
     return httputils.postJson(`/labsl${baseApi}read`, postParams)
 }
 
+//读取系统图-已发布
+export function readPubGroup(postParams: any): any {
+    return httputils.postJson(`/labsl/graph/pub/read`, postParams)
+}
+
 //查询楼层
 export function buildiFloor(postParams: any): any {
     return httputils.postJson(`/equip-componnet/labsl/building/floor`, postParams)

src/components/editClass/big-edit/SBaseEditScene.ts

@@ -32,6 +32,7 @@ import { SGraphItem, SGraphSelectContainer, SOrderSetType } from "@persagy-web/g
 import { uuid } from "./until";
 import { SBaseArrow, SBaseEquipment, SBaseExpainEdit, SBasePipeUninTool, SBasePipe } from "./"
 import { PTopoParser } from "./../persagy-edit/"
+import { SBaseArrowPolyEdit } from './items/SBaseArrowPolyEdit';
 
 /**
  * big-edit 场景
@@ -127,6 +128,44 @@ export class SBaseEditScene extends SGraphEditScene {
         }
     } // Function addPolyLineArrow()
 
+    /**
+     * 新增基础箭头（多边形）
+     *
+     * @param event 鼠标事件
+     */
+    addPolygonArrow(event: SMouseEvent): void {
+        const data = {
+            /** 名称 */
+            name: '多边形箭头',
+            /** 图标（Image），线类型(Line) */
+            type: "ArrowPolygon",
+            /** 缩放比例（Image），线类型(Line) */
+            scale: { x: 1, y: 1, z: 1 },
+            /** 缩放比例（Image），线类型(Line) */
+            rolate: { x: 0, y: 0, z: 0 },
+            /** 位置 */
+            pos: { x: 0, y: 0 },
+            /** 由应用自己定义 */
+            properties: {
+                type: "BaseArrowPolygon"           // 自定义类型用于区分mark与node
+            },
+            style: {
+                line: [{ x: event.x, y: event.y }],
+                default: {
+                }
+            }
+        };
+        const item = new SBaseArrowPolyEdit(null, data);
+        item.status = SItemStatus.Create;
+        item.selectable = true;
+        this.addItem(item);
+        this.grabItem = item;
+        item.connect("finishCreated", this, this.finishCreated);
+        item.connect("onContextMenu", this, this.getItem);
+        if (this.view) {
+            this.view.update();
+        }
+    } // Function addPolygonArrow()
 
     /**
      * 添加基本设备 item

src/components/editClass/big-edit/items/SBaseArrowPolyEdit.ts

@@ -0,0 +1,142 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SMathUtil } from "@persagy-web/graph/lib/utils/SMathUtil";
+import { SColor, SLine, SPainter, SPoint } from '@persagy-web/draw/lib';
+import { SBaseLineEdit } from '../../edit';
+import { SItemStatus } from '@persagy-web/big/lib';
+
+/**
+ * 箭头编辑(多边形)
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class SBaseArrowPolyEdit extends SBaseLineEdit {
+	/** 多边形数组 */
+	pointList: SPoint[] = [];
+	/** 绘制时需要旋转的角度 */
+	private _ang: number = 0;
+	/** 箭头中间粗细 */
+	arrowWidth: number = 8;
+
+	/** 是否为单向箭头 是-只绘制末端箭头 */
+	_isSingle: boolean = true;
+	get isSingle(): boolean {
+		return this._isSingle;
+	} // Get isSingle
+	set isSingle(v: boolean) {
+		this._isSingle = v;
+		this.update();
+	} // Set isSingle
+
+	/** 多边形填充色 */
+	private _polyFillColor: SColor = SColor.White;
+	get polyFillColor(): SColor {
+		return this._polyFillColor;
+	} // Get polyFillColor
+	set polyFillColor(v: SColor) {
+		this._polyFillColor = v;
+		this.update();
+	} // Set polyFillColor
+
+	/**
+	 * 根据两个顶点生成多边形数组
+	 */
+	pointChange(): void {
+		if (this.line.length > 1) {
+			const line = new SLine(this.line[0], this.line[1]);
+			const dis = SMathUtil.pointDistance(
+				this.line[0].x,
+				this.line[0].y,
+				this.line[1].x,
+				this.line[1].y
+			);
+			if (line.dx != 0) {
+				const tempFo = Math.atan(line.dy / line.dx);
+				this._ang = line.dx > 0 ? tempFo : tempFo + Math.PI;
+			} else {
+				this._ang = line.dy > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
+			}
+
+			if (this.isSingle) {
+				this.pointList = [
+					new SPoint(0, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth),
+					new SPoint(dis, 0),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
+					new SPoint(0, -this.arrowWidth / 2)
+				];
+			} else {
+				this.pointList = [
+					new SPoint(0, 0),
+					new SPoint(this.arrowWidth, this.arrowWidth),
+					new SPoint(this.arrowWidth, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth),
+					new SPoint(dis, 0),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
+					new SPoint(this.arrowWidth, -this.arrowWidth / 2),
+					new SPoint(this.arrowWidth, -this.arrowWidth)
+				];
+			}
+		}
+	} // Function pointChange()
+
+	/**
+	 * 绘制
+	 *
+	 * @param painter   绘制对象
+	 */
+	onDraw(painter: SPainter): void {
+		if (this.line.length) {
+			painter.save();
+			painter.pen.lineWidth = painter.toPx(this.lineWidth);
+			painter.translate(this.line[0].x, this.line[0].y);
+			painter.rotate((this._ang * 180) / Math.PI);
+			painter.pen.color = this.strokeColor;
+			painter.brush.color = this.polyFillColor;
+			painter.drawPolygon(this.pointList);
+			painter.restore();
+
+			if (
+				this.status == SItemStatus.Edit ||
+				this.status == SItemStatus.Create
+			) {
+				this.line.forEach((p, i) => {
+					painter.brush.color = this.fillColor;
+					if (i == this.curIndex) {
+						painter.brush.color = this.activeFillColor;
+					}
+
+					painter.drawCircle(p.x, p.y, painter.toPx(5));
+				});
+			}
+		}
+	} // Function onDraw()
+}

src/components/editClass/edit/items/SBaseLineEdit.ts

@@ -206,6 +206,7 @@ export class SBaseLineEdit extends SGraphEdit {
             this.status = SItemStatus.Normal;
             this.releaseItem();
             this.$emit("finishCreated");
+            this.pointChange();
         }
 
         this.update();
@@ -322,11 +323,13 @@ export class SBaseLineEdit extends SGraphEdit {
         if (this.status == SItemStatus.Create) {
             if (this.line[0] instanceof SPoint) {
                 this.line[1] = new SPoint(event.x, event.y);
+                this.pointChange();
             }
         } else if (this.status == SItemStatus.Edit) {
             if (-1 != this.curIndex) {
                 this.line[this.curIndex].x = event.x;
                 this.line[this.curIndex].y = event.y;
+                this.pointChange();
             }
         } else {
             return super.onMouseMove(event);
@@ -336,6 +339,13 @@ export class SBaseLineEdit extends SGraphEdit {
         return true;
     } // Function onMouseMove()
 
+     /**
+     * 点发生变化
+     */
+    protected pointChange(): void {
+        // do nothing
+    } // Function pointChange()
+
     /**
      * 获取点击点与 Point[] 中的点距离最近点
      *

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -86,7 +86,7 @@ export class PTopoScene extends SBaseEditScene {
             this.clearCmdStatus();
         }
         else if (this.editCmd == "EditBaseArrows") {
-            // this.addArrowsItem(event)
+            this.addPolygonArrow(event)
             this.clearCmdStatus();
         }
         else if (this.editCmd == "wantou" || this.editCmd == "santong" || this.editCmd == "sitong") {
@@ -217,7 +217,7 @@ export class PTopoScene extends SBaseEditScene {
      */
     save(isAll: boolean = true) {
         if (!this.view) return;
-        const Marktype: string[] = ['BasePolygon', 'BaseLine', 'BaseText', 'BaseExplain', 'BaseImage', 'BaseCircle', 'BaseArrow', 'BaseTriangle', 'BaseRect'];
+        const Marktype: string[] = ['BasePolygon', 'BaseLine', 'BaseText', 'BaseExplain', 'BaseImage', 'BaseCircle', 'BaseArrow', 'BaseTriangle', 'BaseRect', 'BaseArrowPolygon'];
         const NodeType: string[] = [];
         const RelationType: string[] = [];
         const markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）

src/components/editview/baseTopoEditer.vue

@@ -210,7 +210,7 @@ export default {
   },
   created() {
     console.log(this.$route.query)
-    // this.SETPROJECT(this.$route.query);
+    this.SETPROJECT(this.$route.query);
   },
 };
 </script>