فهرست منبع

系统图绘制增强

zhaoyk 3 سال پیش
والد
کامیت
63a5c26df3
3فایلهای تغییر یافته به همراه87 افزوده شده و 29 حذف شده
  1. 72 29
      adm_comp/src/lib/DiagramEditor.ts
  2. 2 0
      adm_comp/src/lib/DiagramModel.ts
  3. 13 0
      adm_comp/src/views/Diagram.vue

+ 72 - 29
adm_comp/src/lib/DiagramEditor.ts

@@ -17,6 +17,8 @@ export class DiagramEditor extends Editor {
 	tmpMainPipe:Array<Array<Point>>;
 	currentTmpMainPipe:Array<Point>;
 	
+	showContainer = true;
+	
 	showData(data?: any): void {
 		this.diagram = (<Diagram>data);
 		this.templateData = this.diagram.template;
@@ -79,8 +81,10 @@ export class DiagramEditor extends Editor {
 				this.ctx.strokeStyle = "#000000";
 				this.ctx.setLineDash([]);
 				this.ctx.lineWidth = 2;
-				if(this.getSelComp() == item)
+				if(this.getSelComp() == item){
 					this.ctx.strokeStyle = "#5783FA";
+					this.ctx.lineWidth = 3;
+				}
 					
 				this.ctx.beginPath();
 				for(const arr of item.locationPath){
@@ -105,7 +109,18 @@ export class DiagramEditor extends Editor {
 					this.ctx.strokeStyle = "#000000";
 					this.ctx.setLineDash([]);
 					this.ctx.lineWidth = 1;
-					
+					if(this.getSelComp() == line) {
+						this.ctx.strokeStyle = "#5783FA";
+						this.ctx.lineWidth = 2;
+					}else if(line.flag == 'duplicate') {
+						if(this.showContainer) {
+							this.ctx.setLineDash([3, 2]);
+							this.ctx.strokeStyle = "#ffaa7f";	
+						}else{
+							return;
+						}
+					}
+						
 					this.ctx.beginPath();
 					var iter = 0;
 					for(var p of line.locationPath){
@@ -135,7 +150,7 @@ export class DiagramEditor extends Editor {
 		var color = !liberty ? "#9b9ea3": "#42B983";
 		var dash = [3, 2];
 	
-		if(equip) {
+		if(equip && this.showContainer) {
 			this.ctx.lineWidth = 1;
 			this.ctx.setLineDash(dash);
 			this.ctx.strokeStyle = color;
@@ -205,6 +220,8 @@ export class DiagramEditor extends Editor {
 		if(this.state != 9) { //selection
 			var sel:any = this.util.findMainPipe(event.layerX, event.layerY);
 			if(sel == null)
+				sel = this.util.findLine(event.layerX, event.layerY);
+			if(sel == null)
 				sel = this.util.findComp(event.layerX, event.layerY);
 			
 			if(sel != this.getSelComp)
@@ -242,9 +259,18 @@ export class DiagramEditor extends Editor {
 		const sel = this.getSelComp();
 		if(sel != null) {
 			if(sel.compType == "equipmentNode") {
-				info = '设备id: ' + sel.dataObject.id;
+				info = '设备id: ' + sel.objId;
 				info += '  |  设备类型: ' + sel.dataObject.classCode;
 				info += '  |  设备名称: ' + sel.dataObject.name;
+			} else if(sel.compType == "mainPipe") {
+				info = '<干管 ' + sel.name + '> 设备id: ' + sel.dataObjectId;
+				if(sel.dataObject) {
+					info += '  |  设备类型: ' + sel.dataObject.classCode;
+					info += '  |  设备名称: ' + sel.dataObject.name;	
+				}
+			} else if(sel.compType == "line") {
+				info = '<连线> 关系id: ' + sel.dataObjectId;
+				info += '  |  关系类型: ' + sel.relType;
 			} else {
 				info = 'id: ' + sel.id;
 				if(sel.name)
@@ -354,8 +380,11 @@ class EditUtil {
 	
 	private template:Template;
 
+	private diagram:Diagram;
+
 	constructor(editor:DiagramEditor) {
 		this.editor = editor;
+		this.diagram = editor.diagram;
 		this.template = editor.templateData;
 	}
 	
@@ -446,35 +475,49 @@ class EditUtil {
 		if(this.template.mainPipes) {
 			for(const mp of this.template.mainPipes){
 				for(const line of mp.locationPath) {
-					var pre: Point = null;
-					for(var point of line) {
-						point = this.toCanvas(point);
-						if(pre != null) {
-							var x1:number;
-							var y1:number;
-							var x2:number;
-							var y2:number;
-							const scope = 3;
-							if(pre.y == point.y) { //水平
-								y1 = pre.y - scope;
-								y2 = pre.y + scope;
-								x1 = Math.min(pre.x, point.x);
-								x2 = Math.max(pre.x, point.x);
-							} else { //垂直
-								x1 = pre.x - scope;
-								x2 = pre.x + scope;
-								y1 = Math.min(pre.y, point.y);
-								y2 = Math.max(pre.y, point.y);
-							}
-							if(x >= x1 && y >= y1 && x <= x2 && y <= y2)
-								return mp;
-						}
-						pre = point;	
-					}	
+					if(this.onPath(x, y, line))
+						return mp;
 				}
 			}
 		}
 		return null;
 	}
+	
+	findLine(x:number, y:number){
+		for(const line of this.diagram.lines) {
+			if(this.onPath(x, y, line.locationPath))
+				return line;
+		}
+		return null;
+	}
+	
+	private onPath(x:number, y:number, path: Array<Point>): boolean {
+		var pre: Point = null;
+		for(var point of path) {
+			point = this.toCanvas(point);
+			if(pre != null) {
+				var x1:number;
+				var y1:number;
+				var x2:number;
+				var y2:number;
+				const scope = 3;
+				if(pre.y == point.y) { //水平
+					y1 = pre.y - scope;
+					y2 = pre.y + scope;
+					x1 = Math.min(pre.x, point.x);
+					x2 = Math.max(pre.x, point.x);
+				} else { //垂直
+					x1 = pre.x - scope;
+					x2 = pre.x + scope;
+					y1 = Math.min(pre.y, point.y);
+					y2 = Math.max(pre.y, point.y);
+				}
+				if(x >= x1 && y >= y1 && x <= x2 && y <= y2)
+					return true;
+			}
+			pre = point;	
+		}
+		return false;
+	}
 		
 }

+ 2 - 0
adm_comp/src/lib/DiagramModel.ts

@@ -292,4 +292,6 @@ export class Line {
 	
 	locationPath: Array<Point>;
 	
+	flag: string;
+	
 }

+ 13 - 0
adm_comp/src/views/Diagram.vue

@@ -44,6 +44,11 @@
 					<el-button size="mini" @click="() => {}" :disabled="state != 1">下移/右移</el-button>
 				</el-button-group>
 				
+				&nbsp;
+				<el-button-group>
+					<el-button size="mini" @click="() => changeConState()" :disabled="state == -1">{{conButtonText}}</el-button>
+				</el-button-group>
+				
 				<!--选中信息-->
 				<div class="info">
 					<span>{{selectionInfo}}</span>
@@ -143,6 +148,8 @@
 				
 		selectionInfo = '~';
 		dynInfo = '';		
+		
+		conButtonText = '隐藏容器';
 				
 		mounted() {
 			this.onWindowresize();
@@ -376,6 +383,12 @@
 				});	
 		}
 
+		changeConState(){
+			this.editor.showContainer = !this.editor.showContainer;
+			this.editor.redraw();
+			this.conButtonText = this.editor.showContainer ? '隐藏容器' : '显示容器';
+		} 
+
 		//切换编辑状态
 		changeState(state) {
 			this.state = state;