Merge branch 'dev' of https://git.qcloud.com/joylink/jl-nclient into dev

src/ibp/constant/deviceRender.js

@@ -29,7 +29,7 @@ deviceRender[deviceType.RotatingButton] = {
 
 /** TipBox渲染配置*/
 deviceRender[deviceType.TipBox] = {
-	zlevel: 2
+	zlevel: 1
 };
 
 /** BackGround渲染配置*/
@@ -57,4 +57,14 @@ deviceRender[deviceType.Elevator] = {
 	zlevel: 2
 };
 
+/** Key 渲染配置 */
+deviceRender[deviceType.Key] = {
+	zlevel: 3
+};
+
+/** TeleTerminal 渲染配置 */
+deviceRender[deviceType.TeleTerminal] = {
+	zlevel: 2
+};
+
 export default deviceRender;

src/ibp/constant/deviceType.js

@@ -9,7 +9,9 @@ const deviceType = {
 	IbpLine: 'IbpLine',
 	AppendageBox: 'AppendageBox',
 	Alarm: 'Alarm',
-	Elevator: 'Elevator'
+	Elevator: 'Elevator',
+	Key: 'Key',
+	TeleTerminal: 'TeleTerminal'
 };
 
 export default deviceType;

src/ibp/shape/alarm.js

@@ -10,8 +10,9 @@ export default class alarm extends Group {
 		this.model = device.model;
 		this.event = device.event;
 		this.zlevel = device.model.zlevel;
-        this.offsetX = 0;
-        this.offsetY = 0;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 
@@ -25,7 +26,7 @@ export default class alarm extends Group {
 				x: model.point.x,
 				y: model.point.y,
 				width: model.width,
-				height: model.height
+				height: model.width/71*74
 			}
 		});
 		this.add(this.imageBg);
@@ -53,8 +54,9 @@ export default class alarm extends Group {
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
 		}
-        this.offsetX = e.offsetX;
-        this.offsetY = e.offsetY;
+		this.offsetX = e.offsetX;
+		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 
 	mousemove(e) {
@@ -62,7 +64,11 @@ export default class alarm extends Group {
 
 	mouseup(e) {
 		this.event.enable();
-        this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-        this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+			this.draggable = false;
+		}
+
 	}
 }

src/ibp/shape/appendageBox.js

@@ -12,6 +12,7 @@ export default class AppendageBox extends Group {
 		this.z = device.model.z;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 
@@ -47,12 +48,16 @@ export default class AppendageBox extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-		this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-		this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
+
 	}
 }

src/ibp/shape/arrow.js

@@ -11,6 +11,7 @@ class Arrow extends Group {
 		this.model = device.model;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 
@@ -25,7 +26,6 @@ class Arrow extends Group {
 			},
 			style: {
 				stroke: model.stroke,
-				lineWidth: model.lineWidth,
 				fill: model.fill
 			}
 		});
@@ -81,13 +81,16 @@ class Arrow extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-		this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-		this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 	}
 }
 

src/ibp/shape/background.js

@@ -12,7 +12,7 @@ export default class background extends Group {
 		this.create();
 	}
 	create() {
-		this.imageBg = new Image({
+		this.imageBg1 = new Image({
 			zlevel: this.zlevel,
 			z: this.z,
 			style: {
@@ -23,6 +23,17 @@ export default class background extends Group {
 				height: 1024
 			}
 		});
+		this.imageBg2 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				x: 2048,
+				y: 0,
+				image: ibpBg,
+				width: 2048,
+				height: 1024
+			}
+		});
 		this.tailorRect = new Rect({
 			zlevel: this.zlevel,
 			z: this.z,
@@ -37,7 +48,8 @@ export default class background extends Group {
 	}
 	tailorBgImage() {
 		// this.imageBg.setClipPath(this.tailorRect);
-		this.add(this.imageBg);
+		this.add(this.imageBg1);
+		this.add(this.imageBg2);
 	}
 	setDraggable() {
 	}

src/ibp/shape/button.js

@@ -33,6 +33,7 @@ export default class button extends Group {
 		this.event = device.event;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 	create() {
@@ -78,36 +79,36 @@ export default class button extends Group {
 	setState(model) {
 		switch (model.status) {
 		case 'on': {
-			// 关闭
-			this.close();
+			// 开放
+			this.open();
 			this.model.status='on';
 			break;
 		}
 		case 'off': {
-			// 开放
-			this.open();
+			// 关闭
+			this.close();
 			this.model.status='off';
 			break;
 		}
 		}
 	}
 
-	// onclick() {
-	// 	if (!this.model.draggable) {
-	// 		switch (this.model.status) {
-	// 		case 'off': {
-	// 			this.open();
-	// 			this.model.status='on';
-	// 			break;
-	// 		}
-	// 		case 'on': {
-	// 			this.close();
-	// 			this.model.status='off';
-	// 			break;
-	// 		}
-	// 		}
-	// 	}
-	// }
+	onclick() {
+		if (!this.model.draggable) {
+			switch (this.model.status) {
+			case 'off': {
+				this.open();
+				this.model.status='on';
+				break;
+			}
+			case 'on': {
+				this.close();
+				this.model.status='off';
+				break;
+			}
+			}
+		}
+	}
 
 	mousedown(e) {
 		this.event.disable();
@@ -116,16 +117,18 @@ export default class button extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-		// debugger;
-		this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-		this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
-	}
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 
+	}
 	// 关闭
 	close() {
 		const color = button.colors.get(`${this.model.color}_off`);

src/ibp/shape/circularLamp.js

@@ -9,8 +9,9 @@ export default class CircularLamp extends Group {
 		this.event = device.event;
 		this.zlevel = device.model.zlevel;
 		this.z = device.model.z;
-        this.offsetX = 0;
-        this.offsetY = 0;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 
@@ -18,7 +19,7 @@ export default class CircularLamp extends Group {
 		this.lamp = new Circle({
 			zlevel: this.zlevel,
 			z: this.z,
-			draggable: this.model.draggable||false,
+			draggable: false,
 			shape: {
 				cx: this.model.point.x,
 				cy: this.model.point.y,
@@ -50,12 +51,15 @@ export default class CircularLamp extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-        this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-        this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 	}
 }

src/ibp/shape/elevator.js

@@ -33,8 +33,8 @@ export default class elevator extends Group {
 			},
 			width: model.width,
 			height: model.height,
-			fillColor: model.fillColor ||'#adadad',
-			stroke: model.fillColor ||'#adadad',
+			fillColor: model.fillColor ||'#313131',
+			stroke: model.fillColor ||'#313131',
 			lineWidth: 0
 		}
 		});

src/ibp/shape/elevatorArrow.js

@@ -16,7 +16,7 @@ export default class elevatorArrow extends Group {
 		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			z: 3,
+			z: model.z,
 			draggable: false,
 			style: {
 				image: this.getStatus(),

src/ibp/shape/elevatorBack.js

@@ -21,12 +21,14 @@ export default class elevatorBack extends Group {
 			draggable: false,
 			// model.draggable ||
 			shape: {
-				cx: model.point.x + model.width/6*5,
-				cy: model.point.y + model.height/8,
-				r: model.width/6
+				cx: (model.point.x + model.width/6*5).toFixed(2),
+				cy: (model.point.y + model.height/8).toFixed(2),
+				r: (model.width/6).toFixed(2)
 			},
 			style: {
-				fill: this.model.fillColor || '#adadad'
+				brushType: 'fill',
+				fill: this.model.fillColor || '#313131',
+				lineWidth: 0
 			}
 		});
 
@@ -35,17 +37,18 @@ export default class elevatorBack extends Group {
 			z: model.z,
 			draggable: false,
 			shape: {
-				points: [[model.point.x+model.width/6, model.point.y + model.height], [model.point.x+model.width/6*2, model.point.y + model.height],
-					[model.point.x+model.width/6*5, model.point.y + model.height/8*2],
-					[model.point.x+model.width/6*5, model.point.y],
-					[model.point.x+model.width/6*4, model.point.y],
-					[model.point.x+model.width/6, model.point.y + model.height/8*6]
+				points: [[(model.point.x+model.width/6).toFixed(2), (model.point.y + model.height).toFixed(2)], [(model.point.x+model.width/6*2).toFixed(2), model.point.y + model.height],
+					[(model.point.x+model.width/6*5).toFixed(2), (model.point.y + model.height/8*2).toFixed(2)],
+					[(model.point.x+model.width/6*5).toFixed(2), model.point.y],
+					[(model.point.x+model.width/6*4).toFixed(2), model.point.y],
+					[(model.point.x+model.width/6).toFixed(2), (model.point.y + model.height/8*6).toFixed(2)]
 				]
 			},
 			style: {
-				stroke: model.stroke || '#adadad',
-				lineWidth: model.lineWidth,
-				fill: model.fillColor || '#adadad'
+				brushType: 'fill',
+				stroke: model.stroke || '#313131',
+				lineWidth: 0,
+				fill: model.fillColor || '#313131'
 			}
 		});
 
@@ -55,12 +58,14 @@ export default class elevatorBack extends Group {
 			// path: 'M 0 0 Q -70 -50 0 -100 0 -100 L 150 -400 L 200 -400 Q 270 -350 200 -300 200 -300 L 50 0',
 			draggable: false,
 			shape: {
-				cx: model.point.x + model.width/6,
-				cy: model.point.y + model.height/8*7,
-				r: model.width/6
+				cx: (model.point.x + model.width/6).toFixed(2),
+				cy: (model.point.y + model.height/8*7).toFixed(2),
+				r: (model.width/6).toFixed(2)
 			},
 			style: {
-				fill: this.model.fillColor || '#adadad'
+				fill: this.model.fillColor || '#313131',
+				lineWidth: 0,
+				brushType: 'fill'
 			}
 		});
 

src/ibp/shape/factory.js

@@ -10,6 +10,8 @@ import TipBox from './ibpTipBox';
 import AppendageBox from './appendageBox';
 import RotatingButton from './rotatingButton';
 import Elevator from './elevator';
+import Key from './key';
+import TeleTerminal from './teleTerminal';
 
 const ibpShape = {};
 ibpShape[deviceType.Arrow] = Arrow;
@@ -23,6 +25,8 @@ ibpShape[deviceType.TipBox] = TipBox;
 ibpShape[deviceType.AppendageBox] = AppendageBox;
 ibpShape[deviceType.RotatingButton] = RotatingButton;
 ibpShape[deviceType.Elevator] = Elevator;
+ibpShape[deviceType.Key] = Key;
+ibpShape[deviceType.TeleTerminal] = TeleTerminal;
 
 function shapefactory(device, ibp) {
 	const type = device.model._type;

src/ibp/shape/ibpLine.js

@@ -9,8 +9,9 @@ export default class ibpLine extends Group {
 		this.event = device.event;
 		this.zlevel = device.model.zlevel;
 		this.z = device.model.z;
-        this.offsetX = 0;
-        this.offsetY = 0;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 	create() {
@@ -48,14 +49,17 @@ export default class ibpLine extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-		this.model.point1.x = this.model.point1.x - this.offsetX + e.offsetX;
-		this.model.point1.y = this.model.point1.y - this.offsetY + e.offsetY;
-		this.model.point2.x = this.model.point2.x - this.offsetX + e.offsetX;
-		this.model.point2.y = this.model.point2.y - this.offsetY + e.offsetY;
+		if (this.dragging) {
+			this.model.point1.x = this.model.point1.x - this.offsetX + e.offsetX;
+			this.model.point1.y = this.model.point1.y - this.offsetY + e.offsetY;
+			this.model.point2.x = this.model.point2.x - this.offsetX + e.offsetX;
+			this.model.point2.y = this.model.point2.y - this.offsetY + e.offsetY;
+		}
 	}
 }

src/ibp/shape/ibpText.js

@@ -11,6 +11,7 @@ export default class ibpText extends Group {
 		this.z = device.model.z;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 	create() {
@@ -31,7 +32,8 @@ export default class ibpText extends Group {
 				textFill: model.textFill,
 				textAlign: model.textAlign,
 				textPosition: model.textPosition || 'inside',
-				textVerticalAlign: model.textVerticalAlign || null
+				textVerticalAlign: model.textVerticalAlign || null,
+				textLineHeight: model.fontSize
 			}
 		});
 		this.add(this.textName);
@@ -52,13 +54,15 @@ export default class ibpText extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-		console.log('test', e);
-        this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-        this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 	}
 }

src/ibp/shape/ibpTipBox.js

@@ -11,6 +11,7 @@ export default class ibpTipBox extends Group {
 		this.z = device.model.z;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 	create() {
@@ -47,12 +48,15 @@ export default class ibpTipBox extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-        this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-        this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 	}
 }

src/ibp/shape/key.js

@@ -0,0 +1,103 @@
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+import keyPic from '@/assets/ibp_images/key.png';
+import keyPicOn from '@/assets/ibp_images/key_on.png';
+import store from '@/store';
+
+export default class key extends Group {
+
+	constructor(device) {
+		super();
+		this.model = device.model;
+		this.zlevel = device.model.zlevel;
+		this.event = device.event;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.create();
+	}
+
+	create() {
+		const model = this.model;
+		this.imageBg = new Image({
+			zlevel: this.zlevel,
+			z: model.z,
+			draggable: model.draggable || false,
+			style: {
+				image: this.getRotateColor(),
+				x: model.point.x,
+				y: model.point.y,
+				width: 314,
+				height: 932
+			}
+		});
+		this.add(this.imageBg);
+		this.transformScale();
+	}
+
+	/** 缩放按钮 */
+	transformScale() {
+		this.imageBg.origin = [this.model.point.x, this.model.point.y];
+		this.imageBg.scale =[this.model.width/314, this.model.width/314];
+		this.imageBg.dirty();
+	}
+
+	getRotateColor() {
+		if (this.model.status) {
+			switch (this.model.status) {
+			case 'on': {
+				return keyPicOn;
+			}
+			case 'off': {
+				return keyPic;
+			}
+			}
+		} else {
+			return keyPic;
+		}
+	}
+
+	setStatus(model) {
+		switch (model.status) {
+		case 'on': {
+			// 开放
+			this.imageBg.setStyle({image: keyPicOn});
+			this.model.status='on';
+			break;
+		}
+		case 'off': {
+			// 关闭
+			this.imageBg.setStyle({image: keyPic});
+			this.model.status='off';
+			break;
+		}
+		}
+	}
+
+	setDraggable() {
+		this.imageBg.attr('draggable', true);
+		this.createMouseEvent();
+	}
+	createMouseEvent() {
+		this.on('mousedown', this.mousedown, this);
+		this.on('mousemove', this.mousemove, this);
+		this.on('mouseup', this.mouseup, this);
+	}
+
+	mousedown(e) {
+		this.event.disable();
+		if (e.which == 3) {
+			store.dispatch('ibp/setUpdateDeviceData', this.model);
+		}
+		this.offsetX = e.offsetX;
+		this.offsetY = e.offsetY;
+	}
+
+	mousemove(e) {
+	}
+
+	mouseup(e) {
+		this.event.enable();
+		this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+		this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+	}
+}

src/ibp/shape/rotateTip.js

@@ -13,6 +13,7 @@ export default class rotateTip extends Group {
 		this.event = device.event;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 
@@ -72,6 +73,7 @@ export default class rotateTip extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 
 	mousemove(e) {
@@ -79,7 +81,9 @@ export default class rotateTip extends Group {
 
 	mouseup(e) {
 		this.event.enable();
-        this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-        this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 	}
 }

src/ibp/shape/rotatingButton.js

@@ -12,6 +12,7 @@ export default class RotatingButton extends Group {
 		this.z = device.model.z;
 		this.offsetX = 0;
 		this.offsetY = 0;
+		this.dragging = false;
 		this.create();
 	}
 
@@ -25,7 +26,7 @@ export default class RotatingButton extends Group {
 				x: this.model.point.x,
 				y: this.model.point.y,
 				width: this.model.width,
-				height: this.model.height
+				height: this.model.width/434*381
 			}
 		});
 		this.add(this.rotatingButton);
@@ -47,12 +48,15 @@ export default class RotatingButton extends Group {
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
+		this.dragging = true;
 	}
 	mousemove() {
 	}
 	mouseup(e) {
 		this.event.enable();
-        this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
-        this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		if (this.dragging) {
+			this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
+			this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
+		}
 	}
 }

src/ibp/shape/teleTerminal.js

@@ -6,6 +6,7 @@ export default class alarm extends Group {
 
 	constructor(device) {
 		super();
+		this.event = device.event;
 		this.model = device.model;
 		this.zlevel = device.model.zlevel;
 		this.create();
@@ -20,8 +21,8 @@ export default class alarm extends Group {
 				image: teleTerminalPic,
 				x: model.point.x,
 				y: model.point.y,
-				width: 64,
-				height: 56
+				width: 150,
+				height: 150
 			}
 		});
 		this.add(this.imageBg);
@@ -31,12 +32,12 @@ export default class alarm extends Group {
 	/** 缩放按钮 */
 	transformScale() {
 		this.imageBg.origin = [this.model.point.x, this.model.point.y];
-		this.imageBg.scale =[this.model.width/64, this.model.width/64];
+		this.imageBg.scale =[this.model.width/150, this.model.width/150];
 		this.imageBg.dirty();
 	}
 
 	setDraggable() {
-		this.arrow.attr('draggable', true);
+		this.imageBg.attr('draggable', true);
 		this.createMouseEvent();
 	}
 	createMouseEvent() {

src/ibp/utils/parser.js

@@ -58,8 +58,8 @@ export function parser(data, config) {
 			ibpDevice[elem.code] = createModel(deviceType.CircularLamp, elem, propConvert);
 		}, this);
 
-		zrUtil.each(data.warnButtonList || [], elem => {
-			ibpDevice[elem.code] = createModel(deviceType.WarnButton, elem, propConvert);
+		zrUtil.each(data.alarmList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.Alarm, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.arrowList || [], elem => {
@@ -70,14 +70,30 @@ export function parser(data, config) {
 			ibpDevice[elem.code] = createModel(deviceType.RotatingButton, elem, propConvert);
 		}, this);
 
-		zrUtil.each(data.tipList || [], elem => {
-			ibpDevice[elem.code] = createModel(deviceType.Tip, elem, propConvert);
+		zrUtil.each(data.tipBoxList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.TipBox, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.ibpLineList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.IbpLine, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.appendageBoxList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.AppendageBox, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.elevatorList || [], elem => {
 			ibpDevice[elem.code] = createModel(deviceType.Elevator, elem, propConvert);
 		}, this);
 
+		zrUtil.each(data.keyList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.Key, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.teleTerminalList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.TeleTerminal, elem, propConvert);
+		}, this);
+
 	}
 
 	return ibpDevice;
@@ -259,6 +275,40 @@ export function updateIbpData(device) {
 		}
 		break;
 	}
+	case deviceType.Key : {
+		if (ibpData.keyList && ibpData.keyList.length > 0) {
+			let newDevice = true;
+			for (let i=0; i<ibpData.keyList.length; i++) {
+				if (device.code === ibpData.keyList[i].code) {
+					device.dispose ? ibpData.keyList.splice(i, 1):ibpData.keyList[i] = device;
+					newDevice = false;
+				}
+			}
+			if (newDevice) {
+				ibpData.keyList.push(device);
+			}
+		} else {
+			ibpData.keyList = [device];
+		}
+		break;
+	}
+	case deviceType.TeleTerminal : {
+		if (ibpData.teleTerminalList && ibpData.teleTerminalList.length > 0) {
+			let newDevice = true;
+			for (let i=0; i<ibpData.teleTerminalList.length; i++) {
+				if (device.code === ibpData.teleTerminalList[i].code) {
+					device.dispose ? ibpData.teleTerminalList.splice(i, 1):ibpData.teleTerminalList[i] = device;
+					newDevice = false;
+				}
+			}
+			if (newDevice) {
+				ibpData.teleTerminalList.push(device);
+			}
+		} else {
+			ibpData.teleTerminalList = [device];
+		}
+		break;
+	}
 
 	}
 	store.dispatch('ibp/setIbpData', ibpData);

src/router/index.js

@@ -388,13 +388,13 @@ export const asyncRouter = [
 					}
 				]
 			},
-			{
-				path: 'ibp/edit',
-				component: IbpEdit,
-				meta: {
-					i18n: 'router.ibpDraw'
-				}
-			},
+			// {
+			// 	path: 'ibp/edit',
+			// 	component: IbpEdit,
+			// 	meta: {
+			// 		i18n: 'router.ibpDraw'
+			// 	}
+			// },
 			{
 				path: 'runPlan',
 				redirect: '/map/runPlan/view/draft',

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue

@@ -1,18 +1,24 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="100px">
-            <el-form-item label="报警器编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="报警器编号" prop="code">
+                <el-input :disabled="true" v-model="form.code">
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="报警器宽度">
+            <el-form-item label="报警器宽度" prop="alarmWidth">
                 <el-input-number v-model="form.alarmWidth" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="报警器长度">
-                <el-input-number v-model="form.alarmHeight" controls-position="right" :min="1"></el-input-number>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -28,14 +34,11 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                  x: 10,
-                  y: 10
-                },
                 form: {
                     code: '',
                     alarmWidth: '',
-                    alarmHeight: ''
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
@@ -43,9 +46,6 @@
                     ],
                     alarmWidth: [
                         { required: true, message: '请输入报警器宽度', trigger: 'blur' },
-                    ],
-                    alarmHeight: [
-                        { required: true, message: '请输入报警器高度', trigger: 'blur' },
                     ]
                 }
             };
@@ -62,36 +62,46 @@
                     this.isUpdate = true;
                     this.form.code = model.code;
                     this.form.alarmWidth = model.width;
-                    this.form.alarmHeight = model.height;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const alarmModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    code: this.form.code,
-                    _type: 'Alarm',
-                    width: this.form .alarmWidth,
-                    height: this.form.alarmHeight
-                };
-                this.$emit('createAlarm', alarmModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                   if (valid){
+                       const alarmModel = {
+                           zlevel: 2,
+                           z: 1,
+                           point:{
+                               x: this.form.x,
+                               y: this.form.y
+                           },
+                           code: this.form.code,
+                           _type: 'Alarm',
+                           width: this.form .alarmWidth,
+                       };
+                       this.$emit('createAlarm', alarmModel);
+                       this.initPage();
+                   } else {
+                       return false;
+                   }
+                });
             },
             deleteDevice() {
                 const alarmModel = {
                     zlevel: 2,
                     z: 1,
-                    point: this.point,
+                    point:{
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     code: this.form.code,
                     _type: 'Alarm',
                     width: this.form .alarmWidth,
-                    height: this.form.alarmHeight
                 };
                 this.$emit('deleteDataModel',alarmModel );
                 this.initPage();
@@ -103,12 +113,13 @@
                 this.form = {
                     code: '',
                     alarmWidth: '',
-                    alarmHeight: ''
-                };
-                this.point = {
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "alarm_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue

@@ -1,18 +1,27 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="100px">
-            <el-form-item label="扶梯框编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="扶梯框编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="扶梯框宽度">
+            <el-form-item label="扶梯框宽度" prop="appendageBoxWidth">
                 <el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="扶梯框高度">
+            <el-form-item label="扶梯框高度" prop="appendageBoxHeight">
                 <el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -28,14 +37,13 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
+                form: {
+                    code: '',
+                    appendageBoxWidth: '',
+                    appendageBoxHeight: '',
                     x: 10,
                     y: 10
                 },
-                form: {
-                    appendageBoxWidth: '',
-                    appendageBoxHeight: ''
-                },
                 rules: {
                     code: [
                         { required: true, message: '请输入扶梯框编号', trigger: 'blur' },
@@ -62,31 +70,44 @@
                     this.form.code = model.code;
                     this.form.appendageBoxWidth = model.width;
                     this.form.appendageBoxHeight = model.height;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const appendageBoxModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    _type: 'AppendageBox',
-                    code: this.form.code,
-                    width: this.form .appendageBoxWidth,
-                    height: this.form.appendageBoxHeight
-                };
-                this.$emit('createAppendageBox', appendageBoxModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid){
+                        const appendageBoxModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            _type: 'AppendageBox',
+                            code: this.form.code,
+                            width: this.form .appendageBoxWidth,
+                            height: this.form.appendageBoxHeight
+                        };
+                        this.$emit('createAppendageBox', appendageBoxModel);
+                        this.initPage();
+                    } else {
+                        return false;
+                    }
+                });
             },
             deleteDevice() {
                 const appendageBoxModel = {
                     zlevel: 2,
                     z: 1,
-                    point: this.point,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     _type: 'AppendageBox',
                     code: this.form.code,
                     width: this.form .appendageBoxWidth,
@@ -102,12 +123,14 @@
                 this.form = {
                     code: '',
                     appendageBoxWidth: '',
-                    appendageBoxHeight: ''
-                };
-                this.point = {
+                    appendageBoxHeight: '',
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "aBox"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue

@@ -1,10 +1,12 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="80px">
-            <el-form-item label="箭头编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="箭头编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="箭头方向">
+            <el-form-item label="箭头方向" prop="orientation">
                 <el-select v-model="form.orientation" placeholder="请选择箭头方向">
                     <el-option label="向上" value="top"></el-option>
                     <el-option label="向下" value="bottom"></el-option>
@@ -12,18 +14,19 @@
                     <el-option label="向右" value="right"></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="箭头长度">
+            <el-form-item label="箭头长度" prop="arrowLength">
                 <el-input-number v-model="form.arrowLength" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="箭头宽度">
+            <el-form-item label="箭头宽度" prop="arrowLength">
                 <el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="箭头颜色">
+            <el-form-item label="箭头颜色" prop="fillColor">
                 <el-input v-model="form.fillColor"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -31,7 +34,7 @@
 
 <script>
     export default {
-        name: 'ButtonDraft',
+        name: 'ArrowDraft',
         components: {
         },
         data() {
@@ -91,21 +94,27 @@
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const arrowModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    _type: 'Arrow',
-                    code: this.form.code,
-                    orientation: this.form.orientation,
-                    fill: this.form.fillColor,
-                    width: this.form .arrowWidth,
-                    length: this.form.arrowLength,
-                    lineWidth: 1
-                };
-                this.$emit('createArrow', arrowModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid){
+                        const arrowModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point: this.point,
+                            _type: 'Arrow',
+                            code: this.form.code,
+                            orientation: this.form.orientation,
+                            fill: this.form.fillColor,
+                            width: this.form .arrowWidth,
+                            length: this.form.arrowLength,
+                        };
+                        this.$emit('createArrow', arrowModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+
             },
             deleteDevice() {
                 const arrowModel = {
@@ -118,7 +127,6 @@
                     fill: this.form.fillColor,
                     width: this.form .arrowWidth,
                     length: this.form.arrowLength,
-                    lineWidth: 1
                 };
                 this.$emit('deleteDataModel',arrowModel);
                 this.initPage();
@@ -138,6 +146,10 @@
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "arrow_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
+        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
             <el-form-item label="背景板宽度">
                 <el-input-number v-model="form.bgWidth" controls-position="right" :min="1" ></el-input-number>
             </el-form-item>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue

@@ -1,26 +1,33 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="80px">
-            <el-form-item label="按钮编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="按钮编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="按钮颜色">
+            <el-form-item label="按钮颜色" prop="buttonColor">
                 <el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
                     <el-option label="红色按钮" value="red"></el-option>
                     <el-option label="黄色按钮" value="yellow"></el-option>
                     <el-option label="绿色按钮" value="green"></el-option>
+                    <el-option label="蓝色按钮" value="blue"></el-option>
                     <el-option label="灰色按钮" value="gray"></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="按钮宽度">
+            <el-form-item label="按钮宽度" prop="buttonWidth">
                 <el-input-number v-model="form.buttonWidth" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="按钮高度">
-                <el-input-number v-model="form.buttonHeight" controls-position="right" :min="1"></el-input-number>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -36,15 +43,12 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                    x: 10,
-                    y: 10
-                },
                 form: {
                     code: '',
                     buttonColor: '',
                     buttonWidth: '',
-                    buttonHeight: ''
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
@@ -55,9 +59,6 @@
                     ],
                     buttonWidth: [
                         { required: true, message: '请输入按钮宽度', trigger: 'blur' },
-                    ],
-                    buttonHeight: [
-                        { required: true, message: '请输入按钮高度', trigger: 'blur' },
                     ]
                 }
             };
@@ -75,40 +76,50 @@
                     this.form.code = model.code;
                     this.form.buttonColor = model.color;
                     this.form.buttonWidth = model.width;
-                    this.form.buttonHeight = model.height;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const buttonModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    _type: 'SquareButton',
-                    code: this.form.code,
-                    color: this.form.buttonColor,
-                    status: 'off',
-                    width: this.form.buttonWidth,
-                    height: this.form.buttonHeight
-                };
-                this.$emit('createButton', buttonModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid) {
+                        const buttonModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            _type: 'SquareButton',
+                            code: this.form.code,
+                            color: this.form.buttonColor,
+                            status: 'off',
+                            width: this.form.buttonWidth,
+                        };
+                        this.$emit('createButton', buttonModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
             },
             deleteDevice() {
                 const buttonModel = {
                     zlevel: 2,
                     z: 1,
-                    point: this.point,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     _type: 'SquareButton',
                     code: this.form.code,
                     color: this.form.buttonColor,
                     status: 'off',
                     width: this.form.buttonWidth,
-                    height: this.form.buttonHeight
                 };
                 this.$emit('deleteDataModel',buttonModel );
                 this.initPage();
@@ -121,21 +132,17 @@
                     code: '',
                     buttonColor: '',
                     buttonWidth: '',
-                    buttonHeight: ''
-                };
-                this.point = {
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "sButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-    @import "src/styles/mixin.scss";
-    .button_box{
-        width: 100%;
-        background: #f0f0f0;
-        overflow: hidden;
-    }
+
 </style>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpElevator.vue

@@ -1,28 +1,37 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="120px">
-            <el-form-item label="电梯编号">
-                <el-input :disabled="isUpdate" v-model="form.code" style="width:300px"></el-input>
+            <el-form-item label="电梯编号" prop="code">
+                <el-input :disabled="isUpdate" v-model="form.code">
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="电梯宽度">
+            <el-form-item label="电梯宽度" prop="elevatorWidth">
                 <el-input-number v-model="form.elevatorWidth" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="电梯高度">
+            <el-form-item label="电梯高度" prop="elevatorHeight">
                 <el-input-number v-model="form.elevatorHeight" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="电梯颜色">
+            <el-form-item label="电梯颜色" prop="elevatorColor">
                 <el-color-picker v-model="form.elevatorColor"></el-color-picker>
             </el-form-item>
-            <el-form-item label="启动方向">
+            <el-form-item label="启动方向" prop="direction">
                 <el-select v-model="form.direction" placeholder="请选择启动方向">
                     <el-option label="不启动" value="none"></el-option>
                     <el-option label="向上启动" value="top"></el-option>
                     <el-option label="向下启动" value="bottom"></el-option>
                 </el-select>
             </el-form-item>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -37,16 +46,14 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                    x: 70,
-                    y: 70
-                },
                 form: {
                     code: '',
                     elevatorWidth: '',
                     elevatorHeight: '',
                     elevatorColor:'',
-                    direction:'',
+                    direction:'none',
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
@@ -72,7 +79,6 @@
         },
         watch: {
             '$store.state.ibp.rightClickCount': function (val) {
-                // 待修改
                 const model = this.$store.getters['ibp/updateDeviceData'];
                 if (model._type === 'Elevator' ){
                     this.buttonText = '修改';
@@ -83,36 +89,47 @@
                     this.form.elevatorHeight = model.height;
                     this.form.elevatorColor = model.fillColor;
                     this.form.direction = model.direction;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid){
+                        const elevatorModel = {
+                            zlevel: 2,
+                            z: 2,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            _type: 'Elevator',
+                            code: this.form.code,
+                            width: this.form.elevatorWidth,
+                            height: this.form.elevatorHeight,
+                            fillColor: this.form.elevatorColor,
+                            direction: this.form.direction,
+                        };
+                        this.$emit('createElevator', elevatorModel);
+                        this.initPage();
+                    } else {
+                        return false;
+                    }
+                });
+
+            },
+            deleteDevice() {
                 const elevatorModel = {
                     zlevel: 2,
                     z: 2,
-                    point: this.point,
-                    draggable: true,
-                    _type: 'Elevator',
-                    code: this.form.code,
-                    width: this.form.elevatorWidth,
-                    height: this.form.elevatorHeight,
-                    fillColor: this.form.elevatorColor,
-                    direction: this.form.direction,
-                };
-                this.$emit('createElevator', elevatorModel);
-                this.initPage();
-            },
-            deleteDevice() {
-                // 待修改
-                const elevatorModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    draggable: true,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     _type: 'Elevator',
                     code: this.form.code,
                     width: this.form.elevatorWidth,
@@ -133,11 +150,13 @@
                     elevatorHeight: '',
                     elevatorColor:'',
                     direction:'none',
+                    x: 10,
+                    y: 10
                 };
-                this.point = {
-                    x: 80,
-                    y: 80
-                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "elevator_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpKey.vue

@@ -0,0 +1,157 @@
+<template>
+    <div>
+        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+            <el-form-item label="钥匙编号" prop="code">
+                <el-input :disabled="isUpdate" v-model="form.code">
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="钥匙宽度" prop="keyWidth">
+                <el-input-number v-model="form.keyWidth" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="钥匙高度" prop="keyHeight">
+                <el-input-number v-model="form.keyHeight" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="钥匙朝向" prop="status">
+                <el-select v-model="form.status" placeholder="请选择钥匙朝向">
+                    <el-option label="水平" value="on"></el-option>
+                    <el-option label="竖直" value="off"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'KeyDraft',
+        components: {
+        },
+        data() {
+            return {
+                isUpdate: false,
+                buttonText: '立即创建',
+                showDeleteButton: false,
+                form: {
+                    code: '',
+                    keyWidth: '',
+                    keyHeight: '',
+                    status:'',
+                    x: 10,
+                    y: 10
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入钥匙孔编号', trigger: 'blur' },
+                    ],
+                    keyWidth: [
+                        { required: true, message: '请输入钥匙孔宽度', trigger: 'blur' },
+                    ],
+                    keyHeight: [
+                        { required: true, message: '请输入钥匙孔高度', trigger: 'blur' },
+                    ],
+                    status: [
+                        { required: true, message: '请选择钥匙朝向', trigger: 'change' },
+                    ],
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+            '$store.state.ibp.rightClickCount': function (val) {
+                const model = this.$store.getters['ibp/updateDeviceData'];
+                if (model._type === 'Key' ){
+                    this.buttonText = '修改';
+                    this.showDeleteButton = true;
+                    this.isUpdate = true;
+                    this.form.code = model.code;
+                    this.form.keyWidth = model.width;
+                    this.form.keyHeight = model.height;
+                    this.form.status = model.status;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
+                }
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if(valid) {
+                        const keyModel = {
+                            zlevel: 3,
+                            z: 1,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            draggable: true,
+                            _type: 'Key',
+                            code: this.form.code,
+                            width: this.form.keyWidth,
+                            height: this.form.keyHeight,
+                            status:this.form.status
+                        };
+                        this.$emit('createKey', keyModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+
+            },
+            deleteDevice() {
+                const keyModel = {
+                    zlevel: 3,
+                    z: 1,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
+                    draggable: true,
+                    _type: 'Key',
+                    code: this.form.code,
+                    width: this.form .keyWidth,
+                    height: this.form.keyHeight,
+                    status:this.form.status
+                };
+                this.$emit('deleteDataModel',keyModel);
+                this.initPage();
+            },
+            initPage() {
+                this.isUpdate = false;
+                this.buttonText = '立即创建';
+                this.showDeleteButton = false;
+                this.form = {
+                    code: '',
+                    keyWidth: '',
+                    keyHeight: '',
+                    status:'',
+                    x: 10,
+                    y: 10
+                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "key_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLamp.vue

@@ -1,15 +1,24 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="120px">
-            <el-form-item label="圆形指示灯编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="圆形指示灯编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="圆形指示灯半径">
+            <el-form-item label="圆形指示灯半径" prop="r">
                 <el-input-number v-model="form.r" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+                </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -17,7 +26,7 @@
 
 <script>
     export default {
-        name: 'ButtonDraft',
+        name: 'LampDraft',
         components: {
         },
         data() {
@@ -25,20 +34,18 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                   x: 10,
-                   y: 10
-                },
                 form: {
                     code: '',
-                    r: ''
+                    r: '',
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
                         { required: true, message: '请输入按钮编号', trigger: 'blur' },
                     ],
                     r: [
-                        { required: true, message: '请输入圆形指示灯半径', trigger: 'change'}
+                        { required: true, message: '请输入圆形指示灯半径', trigger: 'blur'}
                     ],
                 }
             };
@@ -55,31 +62,45 @@
                      this.isUpdate = true;
                      this.form.code = model.code;
                      this.form.r = model.r;
-                     this.point = model.point;
+                     this.form.x = model.point.x;
+                     this.form.y = model.point.y;
                  }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const lampModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    _type: 'CircularLamp',
-                    code: this.form.code,
-                    r: this.form.r,
-                    fillColor: '#332C22'
-                };
-                this.$emit('createLamp', lampModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if(valid){
+                        const lampModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            _type: 'CircularLamp',
+                            code: this.form.code,
+                            r: this.form.r,
+                            fillColor: '#332C22'
+                        };
+                        this.$emit('createLamp', lampModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+
             },
             deleteDevice() {
                  const lampModel = {
                       zlevel: 2,
                       z: 1,
-                      point: this.point,
+                      point: {
+                          x: this.form.x,
+                          y: this.form.y
+                      },
                       _type: 'CircularLamp',
                       code: this.form.code,
                       r: this.form.r,
@@ -94,21 +115,17 @@
                 this.showDeleteButton = false;
                 this.form = {
                      code: '',
-                     r: ''
+                     r: '',
+                     x: 10,
+                     y: 10
                 };
-                this.point = {
-                                    x: 10,
-                                    y: 10
-                                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "lamp_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-    @import "src/styles/mixin.scss";
-    .button_box{
-        width: 100%;
-        background: #f0f0f0;
-        overflow: hidden;
-    }
 </style>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLine.vue

@@ -1,27 +1,33 @@
 <template>
     <div>
-       <el-form ref="form" :rules="rules" :model="form" label-width="80px">
-           <el-form-item label="线段编号">
-               <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+       <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+           <el-form-item label="线段编号" prop="code">
+               <el-input :disabled="true" v-model="form.code" >
+                   <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+               </el-input>
            </el-form-item>
-           <el-form-item label="线段方向">
-               <el-select v-model="form.direction" placeholder="请选择线段方向">
-                   <el-option label="横向" value="transverse"></el-option>
-                   <el-option label="竖向" value="vertical"></el-option>
-               </el-select>
-           </el-form-item>
-           <el-form-item label="线段长度">
-               <el-input-number controls-position="right" :min="1" v-model="form.length"></el-input-number>
-           </el-form-item>
-           <el-form-item label="线段宽度">
+           <el-form-item label="线段宽度" prop="lineWidth">
                <el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50"></el-input-number>
            </el-form-item>
-           <el-form-item label="线段颜色">
+           <el-form-item label="线段颜色" prop="fillColor">
                <el-input v-model="form.fillColor"></el-input>
            </el-form-item>
+           <el-form-item label="起始X轴坐标">
+               <el-input-number v-model="form.x1" controls-position="right" :min="1"></el-input-number>
+           </el-form-item>
+           <el-form-item label="起始Y轴坐标">
+               <el-input-number v-model="form.y1" controls-position="right" :min="1"></el-input-number>
+           </el-form-item>
+           <el-form-item label="终止X轴坐标">
+               <el-input-number v-model="form.x2" controls-position="right" :min="1"></el-input-number>
+           </el-form-item>
+           <el-form-item label="终止Y轴坐标">
+               <el-input-number v-model="form.y2" controls-position="right" :min="1"></el-input-number>
+           </el-form-item>
            <el-form-item>
-               <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-               <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+               <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+               <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+               <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
            </el-form-item>
        </el-form>
     </div>
@@ -37,27 +43,19 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point1: {
-                    x: 10,
-                    y: 10
-                },
                 form: {
                     code: '',
-                    direction: '',
-                    length: '',
                     lineWidth: '',
-                    fillColor: ''
+                    fillColor: '',
+                    x1: 10,
+                    y1: 10,
+                    x2: 20,
+                    y2: 10
                 },
                 rules: {
                     code: [
                         { required: true, message: '请输入线段编号', trigger: 'blur' },
                     ],
-                    direction: [
-                        { required: true, message: '请选择线段方向', trigger: 'change'}
-                    ],
-                    length: [
-                        { required: true, message: '请输入线段长度', trigger: 'blur' },
-                    ],
                     lineWidth: [
                         { required: true, message: '请输入线段宽度', trigger: 'blur' },
                     ],
@@ -78,45 +76,57 @@
                     this.showDeleteButton = true;
                     this.isUpdate = true;
                     this.form.code = model.code;
-                    this.form.direction = model.direction;
-                    this.form.length = (model.direction == 'transverse'? model.point1.x -model.point2.x : model.point1.y - model.point2.y);
                     this.form.lineWidth = model.lineWidth;
-                    this.form.fillColor = model.fill;
-                    this.point1 = model.point;
+                    this.form.fillColor = model.fillColor;
+                    this.form.x1 = model.point1.x;
+                    this.form.y1 = model.point1.y;
+                    this.form.x2 = model.point2.x;
+                    this.form.y2 = model.point2.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const lineModel = {
-                    zlevel: 1,
-                    z: 1,
-                    point1: this.point1,
-                    point2: {
-                        x: this.form.direction == 'transverse'? this.point1.x + parseInt(this.form.length):10,
-                        y: this.form.direction == 'vertical'? this.point1.y + parseInt(this.form.length):10
-                    },
-                    direction: this.form.direction,
-                    code: this.form.code,
-                    _type: 'IbpLine',
-                    lineWidth: this.form.lineWidth,
-                    fillColor: this.form.fillColor
-                };
-                this.$emit('createLine', lineModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) =>{
+                    if (valid){
+                        const lineModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point1: {
+                                x: this.form.x1,
+                                y: this.form.y1
+                            },
+                            point2: {
+                                x: this.form.x2,
+                                y: this.form.y2
+                            },
+                            code: this.form.code,
+                            _type: 'IbpLine',
+                            lineWidth: this.form.lineWidth,
+                            fillColor: this.form.fillColor
+                        };
+                        this.$emit('createLine', lineModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+
             },
             deleteDevice() {
                 const lineModel = {
-                    zlevel: 1,
+                    zlevel: 2,
                     z: 1,
-                    point1: this.point1,
-                    point2: {
-                        x: this.form.direction == 'transverse'? this.point1.x + parseInt(this.form.length):10,
-                        y: this.form.direction == 'vertical'? this.point1.y + parseInt(this.form.length):10
+                    point1: {
+                        x: this.form.x1,
+                        y: this.form.y1
+                    },
+                    point2: {
+                        x: this.form.x2,
+                        y: this.form.y2
                     },
-                    direction: this.form.direction,
                     code: this.form.code,
                     _type: 'IbpLine',
                     lineWidth: this.form.lineWidth,
@@ -131,24 +141,21 @@
                 this.showDeleteButton = false;
                 this.form = {
                     code: '',
-                    direction: '',
-                    length: '',
                     lineWidth: '',
-                    fillColor: ''
-                };
-                this.point = {
-                    x: 10,
-                    y: 10
+                    fillColor: '',
+                    x1: 10,
+                    y1: 10,
+                    x2: 20,
+                    y2: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "line_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-    @import "src/styles/mixin.scss";
-    .button_box{
-        width: 100%;
-        background: #f0f0f0;
-        overflow: hidden;
-    }
+
 </style>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue

@@ -1,18 +1,24 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="120px">
-            <el-form-item label="钥匙孔编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="钥匙孔编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="钥匙孔宽度">
+            <el-form-item label="钥匙孔宽度" prop="rotatingButtonWidth">
                 <el-input-number v-model="form.rotatingButtonWidth" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
-            <el-form-item label="钥匙孔高度">
-                <el-input-number v-model="form.rotatingButtonHeight" controls-position="right" :min="1"></el-input-number>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -28,14 +34,11 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                    x: 10,
-                    y: 10
-                },
                 form: {
                     code: '',
                     rotatingButtonWidth: '',
-                    rotatingButtonHeight: ''
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
@@ -43,9 +46,6 @@
                     ],
                     rotatingButtonWidth: [
                         { required: true, message: '请输入钥匙孔宽度', trigger: 'blur' },
-                    ],
-                    rotatingButtonHeight: [
-                        { required: true, message: '请输入钥匙孔高度', trigger: 'blur' },
                     ]
                 }
             };
@@ -62,38 +62,49 @@
                     this.isUpdate = true;
                     this.form.code = model.code;
                     this.form.rotatingButtonWidth = model.width;
-                    this.form.rotatingButtonHeight = model.height;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const rotatingButtonModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    draggable: true,
-                    _type: 'RotatingButton',
-                    code: this.form.code,
-                    width: this.form .rotatingButtonWidth,
-                    height: this.form.rotatingButtonHeight
-                };
-                this.$emit('createRotatingButton', rotatingButtonModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid) {
+                        const rotatingButtonModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            draggable: true,
+                            _type: 'RotatingButton',
+                            code: this.form.code,
+                            width: this.form .rotatingButtonWidth,
+                        };
+                        this.$emit('createRotatingButton', rotatingButtonModel);
+                        this.initPage();
+                    } else {
+                        return false;
+                    }
+                });
+
             },
             deleteDevice() {
                 const rotatingButtonModel = {
                     zlevel: 2,
                     z: 1,
-                    point: this.point,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     draggable: true,
                     _type: 'RotatingButton',
                     code: this.form.code,
                     width: this.form .rotatingButtonWidth,
-                    height: this.form.rotatingButtonHeight
                 };
                 this.$emit('deleteDataModel',rotatingButtonModel );
                 this.initPage();
@@ -105,12 +116,13 @@
                 this.form = {
                     code: '',
                     rotatingButtonWidth: '',
-                    rotatingButtonHeight: ''
-                };
-                this.point = {
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "rButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTelephoneTerminal.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+            <el-form-item label="端子编号">
+                 <el-input :disabled="true" v-model="form.code" style="width:300px">
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="端子宽度">
+                <el-input-number v-model="form.terminalWidth" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="端子高度">
+                <el-input-number v-model="form.terminalHeight" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'KeyDraft',
+        components: {
+        },
+        data() {
+            return {
+                isUpdate: false,
+                buttonText: '立即创建',
+                showDeleteButton: false,
+                point: {
+                    x: 10,
+                    y: 10
+                },
+                form: {
+                    code: '',
+                    terminalWidth: '',
+                    terminalHeight: '',
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入端子编号', trigger: 'blur' },
+                    ],
+                    terminalWidth: [
+                        { required: true, message: '请输入端子宽度', trigger: 'blur' },
+                    ],
+                    terminalHeight: [
+                        { required: true, message: '请输入端子高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+            '$store.state.ibp.rightClickCount': function (val) {
+                const model = this.$store.getters['ibp/updateDeviceData'];
+                if (model._type === 'TeleTerminal' ){
+                    this.buttonText = '修改';
+                    this.showDeleteButton = true;
+                    this.isUpdate = true;
+                    this.form.code = model.code;
+                    this.form.terminalWidth = model.width;
+                    this.form.terminalHeight = model.height;
+                    this.point = model.point;
+                }
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const TerminalModel = {
+                    zlevel: 2,
+                    z: 4,
+                    point: this.point,
+                    draggable: true,
+                    _type: 'TeleTerminal',
+                    code: this.form.code,
+                    width: this.form.terminalWidth,
+                    height: this.form.terminalHeight,
+                };
+                this.$emit('createTeleTerminal', TerminalModel);
+                this.initPage();
+            },
+            deleteDevice() {
+                const TerminalModel = {
+                    zlevel: 2,
+                    z: 1,
+                    point: this.point,
+                    draggable: true,
+                    _type: 'TeleTerminal',
+                    code: this.form.code,
+                    width: this.form .terminalWidth,
+                    height: this.form.terminalHeight,
+                };
+                this.$emit('deleteDataModel',TerminalModel);
+                this.initPage();
+            },
+            initPage() {
+                this.isUpdate = false;
+                this.buttonText = '立即创建';
+                this.showDeleteButton = false;
+                this.form = {
+                    code: '',
+                    terminalWidth: '',
+                    terminalHeight: '',
+                };
+                this.point = {
+                    x: 70,
+                    y: 70
+                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "terminal"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue

@@ -1,24 +1,33 @@
 <template>
     <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
-           <el-form-item label="文字编号">
-               <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+           <el-form-item label="文字编号" prop="code">
+               <el-input :disabled="true" v-model="form.code" >
+                   <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+               </el-input>
            </el-form-item>
-           <el-form-item label="文字内容">
+           <el-form-item label="文字内容" prop="context">
                <el-input type="textarea" v-model="form.context"></el-input>
            </el-form-item>
-           <el-form-item label="文字颜色">
+           <el-form-item label="文字颜色" prop="textFill">
                <el-input v-model="form.textFill"></el-input>
            </el-form-item>
-           <el-form-item label="文字大小">
+           <el-form-item label="文字大小" prop="fontSize">
                <el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="50"></el-input-number>
            </el-form-item>
-           <el-form-item label="文字粗细">
+           <el-form-item label="文字粗细" prop="fontWeight">
                <el-input-number v-model="form.fontWeight" controls-position="right" :min="1" ></el-input-number>
            </el-form-item>
+           <el-form-item label="X轴坐标">
+               <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+           </el-form-item>
+           <el-form-item label="Y轴坐标">
+               <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+           </el-form-item>
            <el-form-item>
-               <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-               <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+               <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+               <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+               <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
            </el-form-item>
        </el-form>
     </div>
@@ -34,16 +43,14 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                    x: 10,
-                    y: 10
-                },
                 form: {
                     code: '',
                     context: '',
                     textFill: '',
                     fontSize: '',
-                    fontWeight: ''
+                    fontWeight: '',
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
@@ -79,18 +86,45 @@
                     this.form.textFill = model.textFill;
                     this.form.fontSize = model.fontSize;
                     this.form.fontWeight = model.fontWeight;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid) {
+                        const textModel = {
+                            zlevel: 2,
+                            z: 1,
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            code: this.form.code,
+                            _type: 'IbpText',
+                            context: this.form.context,
+                            textFill: this.form.textFill,
+                            fontSize: this.form.fontSize ,
+                            fontWeight: this.form.fontWeight,
+                            fontFamily: 'consolas'
+                        };
+                        this.$emit('createText', textModel);
+                        this.initPage();
+                    } else {
+                        return false;
+                    }
+                });
                 const textModel = {
                     zlevel: 2,
                     z: 1,
-                    point: this.point,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     code: this.form.code,
                     _type: 'IbpText',
                     context: this.form.context,
@@ -106,7 +140,10 @@
                 const textModel = {
                     zlevel: 2,
                     z: 1,
-                    point: this.point,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     code: this.form.code,
                     _type: 'IbpText',
                     context: this.form.context,
@@ -127,12 +164,14 @@
                     context: '',
                     textFill: '',
                     fontSize: '',
-                    fontWeight: ''
-                };
-                this.point = {
+                    fontWeight: '',
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "text_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTipBox.vue

@@ -1,21 +1,30 @@
 <template>
     <div>
         <el-form ref="form" :rules="rules" :model="form" label-width="100px">
-            <el-form-item label="提示框编号">
-                <el-input :disabled="isUpdate" v-model="form.code"></el-input>
+            <el-form-item label="提示框编号" prop="code">
+                <el-input :disabled="true" v-model="form.code" >
+                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
+                </el-input>
             </el-form-item>
-            <el-form-item label="提示框宽度">
+            <el-form-item label="提示框宽度" prop="tipBoxWidth">
                 <el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" ></el-input-number>
             </el-form-item>
-            <el-form-item label="提示框高度">
+            <el-form-item label="提示框高度" prop="tipBoxHeight">
                 <el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" ></el-input-number>
             </el-form-item>
-            <el-form-item label="提示框颜色">
+            <el-form-item label="提示框颜色" prop="fillColor">
                 <el-input v-model="form.fillColor"></el-input>
             </el-form-item>
+            <el-form-item label="X轴坐标">
+                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="Y轴坐标">
+                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
-                <el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
+                <el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -32,15 +41,13 @@
                 isUpdate: false,
                 buttonText: '立即创建',
                 showDeleteButton: false,
-                point: {
-                    x: 10,
-                    y: 10
-                },
                 form: {
                     code: '',
                     tipBoxWidth: '',
                     tipBoxHeight: '',
-                    fillColor: ''
+                    fillColor: '',
+                    x: 10,
+                    y: 10
                 },
                 rules: {
                     code: [
@@ -72,32 +79,46 @@
                     this.form.tipBoxWidth = model.width;
                     this.form.tipBoxHeight = model.height;
                     this.form.fillColor = model.fillColor;
-                    this.point = model.point;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
                 }
             }
         },
         mounted() {
         },
         methods: {
-            onSubmit() {
-                const tipBoxModel = {
-                    zlevel: 2,
-                    z: 1,
-                    point: this.point,
-                    code: this.form.code,
-                    _type: 'TipBox',
-                    width: this.form.tipBoxWidth,
-                    height: this.form.tipBoxHeight,
-                    fillColor: this.form.fillColor
-                };
-                this.$emit('createTipBox', tipBoxModel);
-                this.initPage();
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                   if (valid) {
+                       const tipBoxModel = {
+                           zlevel: 1,
+                           z: 1,
+                           point: {
+                               x: this.form.x,
+                               y: this.form.y
+                           },
+                           code: this.form.code,
+                           _type: 'TipBox',
+                           width: this.form.tipBoxWidth,
+                           height: this.form.tipBoxHeight,
+                           fillColor: this.form.fillColor
+                       };
+                       this.$emit('createTipBox', tipBoxModel);
+                       this.initPage();
+                   } else {
+                       return false;
+                   }
+                });
+
             },
             deleteDevice() {
                 const tipBoxModel = {
-                    zlevel: 2,
+                    zlevel: 1,
                     z: 1,
-                    point: this.point,
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
                     code: this.form.code,
                     _type: 'TipBox',
                     width: this.form.tipBoxWidth,
@@ -115,12 +136,14 @@
                     code: '',
                     tipBoxWidth: '',
                     tipBoxHeight: '',
-                    fillColor: ''
-                };
-                this.point = {
+                    fillColor: '',
                     x: 10,
                     y: 10
                 };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "tipBox_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
             }
         }
     };

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue

@@ -72,18 +72,24 @@
                         >
                         </ibp-rotating-button>
                     </el-tab-pane>
-                    <!-- <el-tab-pane label="电话端子" name="teleTerminal">
+                    <el-tab-pane label="电话端子" name="teleTerminal">
                         <ibp-telephone-terminal ref="teleTerminal"
                             @createTeleTerminal="createDataModel" @deleteDataModel="deleteDataModel"
                         >
                         </ibp-telephone-terminal>
-                    </el-tab-pane> -->
+                    </el-tab-pane>
                     <el-tab-pane label="电梯" name="elevator">
                         <ibp-elevator ref="elevator"
                             @createElevator="createDataModel" @deleteDataModel="deleteDataModel"
                         >
                         </ibp-elevator>
                     </el-tab-pane>
+                    <el-tab-pane label="钥匙" name="key">
+                        <ibp-key ref="key"
+                            @createKey="createDataModel" @deleteDataModel="deleteDataModel"
+                        >
+                        </ibp-key>
+                    </el-tab-pane>
                 </el-tabs>
             </el-card>
         </div>
@@ -104,6 +110,8 @@
     import IbpLine from './ibpLine';
     import IbpTelephoneTerminal from './ibpTelephoneTerminal';
     import IbpElevator from './ibpElevator';
+    import IbpKey from './ibpKey';
+    
     
 
     export default {
@@ -119,8 +127,9 @@
             IbpLamp,
             IbpRotatingButton,
             IbpLine,
-            // IbpTelephoneTerminal,
-            IbpElevator
+            IbpTelephoneTerminal,
+            IbpElevator,
+            IbpKey
         },
         mixins: [
 
@@ -166,6 +175,7 @@
                 this.$refs.alarm.initPage();
                 this.$refs.rotatingbutton.initPage();
                 this.$refs.elevator.initPage();
+                this.$refs.key.initPage();
             }
         }
     };