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

src/ibp/constant/deviceRender.js

@@ -4,17 +4,17 @@ const deviceRender = {};
 
 /** IbpText渲染配置*/
 deviceRender[deviceType.IbpText] = {
-	zlevel: 2
+	zlevel: 3
 };
 
 /** SquareButton渲染配置*/
 deviceRender[deviceType.SquareButton] = {
-	zlevel: 2
+	zlevel: 3
 };
 
 /** WarnButton渲染配置*/
 deviceRender[deviceType.WarnButton] = {
-	zlevel: 2
+	zlevel: 3
 };
 
 /** Arrow渲染配置*/
@@ -24,12 +24,13 @@ deviceRender[deviceType.Arrow] = {
 
 /** RotatingButton渲染配置*/
 deviceRender[deviceType.RotatingButton] = {
-	zlevel: 2
+	zlevel: 3
 };
 
 /** TipBox渲染配置*/
 deviceRender[deviceType.TipBox] = {
-	zlevel: 1
+	zlevel: 2,
+	z: 2
 };
 
 /** BackGround渲染配置*/
@@ -39,7 +40,7 @@ deviceRender[deviceType.Background] = {
 
 /** CircularLamp渲染配置 */
 deviceRender[deviceType.CircularLamp] = {
-	zlevel: 2
+	zlevel: 3
 };
 
 /** AppendageBox渲染配置 */
@@ -49,22 +50,33 @@ deviceRender[deviceType.AppendageBox] = {
 
 /** IbpLine渲染配置 */
 deviceRender[deviceType.IbpLine] = {
-	zlevel: 2
+	zlevel: 1
 };
 
 /** Elevator 渲染配置 */
 deviceRender[deviceType.Elevator] = {
-	zlevel: 2
+	zlevel: 2,
+	z: 1
 };
 
 /** Key 渲染配置 */
 deviceRender[deviceType.Key] = {
-	zlevel: 3
+	zlevel: 4
 };
 
 /** TeleTerminal 渲染配置 */
 deviceRender[deviceType.TeleTerminal] = {
-	zlevel: 2
+	zlevel: 3
+};
+
+/** Clock 渲染配置*/
+deviceRender[deviceType.Clock] = {
+	zlevel: 3
+};
+
+/** RotateTip 渲染配置 */
+deviceRender[deviceType.RotateTip] = {
+	zlevel: 3
 };
 
 export default deviceRender;

src/ibp/constant/deviceType.js

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

src/ibp/ibpPan.js

@@ -25,6 +25,9 @@ class IbpPan {
 		// 设备数据
 		this.ibpDevice = {};
 
+		// 展示的画布大小
+		this.canvasSize = {};
+
 		// 默认状态
 		this.defaultStateDict = this.loadDefaultState();
 
@@ -40,7 +43,7 @@ class IbpPan {
 
 		this.$painter = new Painter(this);
 		this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()});
-		this.$painter.updateTransform(this.$options);
+		this.$painter.updateTransform(this.$options, this.canvasSize);
 
 		this.optionsHandler = this.setOptions.bind(this);
 
@@ -71,12 +74,17 @@ class IbpPan {
 		// 保存原始数据
 		this.data = config;
 
+		// 保存需展现的画布大小
+		this.canvasSize = {
+			x: 0,
+			y: 0,
+			width: config.background.width,
+			height: config.background.height
+		};
+
 		// 解析地图数据
 		this.ibpDevice = ibpDevice;
 
-		// 加载对应皮肤
-		// this.style = this.loadStyle(this.skinCode);
-
 		// 数据加载完成 回调
 		if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.ibpDevice); }
 
@@ -86,7 +94,7 @@ class IbpPan {
 		// 视图加载完成 回调
 		if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.ibpDevice); }
 
-		this.$painter.updateTransform(this.$options);
+		this.$painter.updateTransform(this.$options, this.canvasSize);
 	}
 
 	setDefaultState() {
@@ -98,7 +106,7 @@ class IbpPan {
 	setOptions(opts) {
 		const options = this.pullBack(opts);
 		this.$options.update(options);
-		this.$painter.updateTransform(this.$options);
+		this.$painter.updateTransform(this.$options, this.canvasSize);
 
 		if (this.$options.disabled == true) {
 			this.$mouseController.disable();
@@ -132,8 +140,7 @@ class IbpPan {
 			this.$painter.delete(oDevice);
 			if (!elem._dispose) {
 				this.ibpDevice[code] = nDevice;
-				console.log('--3', nDevice);
+				this.$painter.add(nDevice, true);
-				this.$painter.add(nDevice);
 			}
 		});
 
@@ -223,7 +230,6 @@ class IbpPan {
 	}
 
 	resize(opt) {
-	    console.log('----------',this.$ibpZr);
 		this.$ibpZr.resize(opt);
 		this.$painter.updateZrSize(opt);
 	}
@@ -237,7 +243,22 @@ class IbpPan {
 		this.ibpDevice = {};
 		this.$painter.clear();
 	}
-
+	initClockTime(initTime) {
+		Object.values(this.ibpDevice)
+			.forEach(elem => {
+				if (elem.model._type === deviceType.Clock) {
+					this.$painter.initClockTime(elem, initTime);
+				}
+			});
+	}
+	setClockStart(started) {
+		Object.values(this.ibpDevice)
+			.forEach(elem => {
+				if (elem.model._type === deviceType.Clock) {
+					this.$painter.setClockStart(elem, started);
+				}
+			});
+	}
 	dispose() {
 		this.off(this.events.Pan, this.optionsHandler);
 		this.off(this.events.Zoom, this.optionsHandler);

src/ibp/painter.js

@@ -58,13 +58,12 @@ class Painter {
      * 添加视图
      * @param {*} device
      */
-	add(device) {
+	add(device, draggable) {
 		device = Object.assign(device, { event: this.$ibp.$mouseController });
 		const instance = shapefactory(device, this.$ibp);
-		console.log('--4', instance);
 		if (instance) {
 			device.instance = instance;
-			instance.setDraggable();
+			draggable?instance.setDraggable():'';
 			this.$transformHandle.transformView(instance);
 			this.ibpInstanceLevel[device.model._type].add(instance);
 		}
@@ -114,8 +113,8 @@ class Painter {
      * 更新transform变化
      * @param {*} opt
      */
-	updateTransform(opt) {
+	updateTransform(opt, canvasSize) {
-		this.$transformHandle.updateTransform(opt);
+		this.$transformHandle.updateTransform(opt, canvasSize);
 	}
 
 	/**
@@ -145,7 +144,18 @@ class Painter {
 
 		}
 	}
-
+	/**
+     * 初始化电子时钟时间
+     */
+	initClockTime(device, initTime) {
+		device.instance.setClockTime(initTime);
+	}
+	/**
+    * 电子时钟开始跑秒或暂停
+    */
+	setClockStart(device, started) {
+		device.instance.setClockStart(started);
+	}
 	/**
      * 设置图层可见
      * @param {*} code

src/ibp/shape/alarm.js

@@ -20,7 +20,7 @@ export default class alarm extends Group {
 		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			draggable: model.draggable || false,
+			draggable: false,
 			style: {
 				image: alarmpic,
 				x: model.point.x,
@@ -53,6 +53,7 @@ export default class alarm extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -67,7 +68,7 @@ export default class alarm extends Group {
 		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;
+			this.dragging = false;
 		}
 
 	}

src/ibp/shape/appendageBox.js

@@ -45,6 +45,7 @@ export default class AppendageBox extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -57,6 +58,7 @@ export default class AppendageBox extends Group {
 		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.dragging = false;
 		}
 
 	}

src/ibp/shape/arrow.js

@@ -78,6 +78,7 @@ class Arrow extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+            return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -90,6 +91,7 @@ class Arrow extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/shape/background.js

@@ -9,31 +9,30 @@ export default class background extends Group {
 		this.model = device.model;
 		this.zlevel = device.model.zlevel;
 		this.z = 1;
+		this.imageBgArray = [];
+		// this.model.width = 4100;
+		// this.model.height = 900;
 		this.create();
 	}
 	create() {
-		this.imageBg1 = new Image({
+		const widthNum = Math.ceil(parseInt(this.model.width)/2048);
+		const heightNum = Math.ceil(parseInt(this.model.height)/1024);
+		for (let i = 0; i<widthNum; i++) {
+			for (let j = 0; j<heightNum; j++) {
+				const imageBg = new Image({
 					zlevel: this.zlevel,
 					z: this.z,
 					style: {
-				x: 0,
+						x: i*2048,
-				y: 0,
+						y: j*1024,
 						image: ibpBg,
 						width: 2048,
 						height: 1024
 					}
 				});
-		this.imageBg2 = new Image({
+				this.imageBgArray.push(imageBg);
-			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,
@@ -47,9 +46,11 @@ export default class background extends Group {
 		this.tailorBgImage();
 	}
 	tailorBgImage() {
-		// this.imageBg.setClipPath(this.tailorRect);
+		const _this = this;
-		this.add(this.imageBg1);
+		this.imageBgArray.forEach( function(elem) {
-		this.add(this.imageBg2);
+			elem.setClipPath(_this.tailorRect);
+			_this.add(elem);
+		});
 	}
 	setDraggable() {
 	}

src/ibp/shape/button.js

@@ -40,7 +40,7 @@ export default class button extends Group {
 		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			draggable: model.draggable || false,
+			draggable: false,
 			style: {
 				image: this.getImagePic(),
 				x: model.point.x,
@@ -114,6 +114,7 @@ export default class button extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -126,6 +127,7 @@ export default class button extends Group {
 		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.dragging = false;
 		}
 
 	}

src/ibp/shape/circularLamp.js

@@ -48,6 +48,7 @@ export default class CircularLamp extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+            return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -60,6 +61,7 @@ export default class CircularLamp extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/shape/clock.js

@@ -0,0 +1,251 @@
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+import clock0 from '@/assets/ibp_images/clock/clock_0.png';
+import clock1 from '@/assets/ibp_images/clock/clock_1.png';
+import clock2 from '@/assets/ibp_images/clock/clock_2.png';
+import clock3 from '@/assets/ibp_images/clock/clock_3.png';
+import clock4 from '@/assets/ibp_images/clock/clock_4.png';
+import clock5 from '@/assets/ibp_images/clock/clock_5.png';
+import clock6 from '@/assets/ibp_images/clock/clock_6.png';
+import clock7 from '@/assets/ibp_images/clock/clock_7.png';
+import clock8 from '@/assets/ibp_images/clock/clock_8.png';
+import clock9 from '@/assets/ibp_images/clock/clock_9.png';
+import clockBg from '@/assets/ibp_images/clock/clock_bg.png';
+import clockColon from '@/assets/ibp_images/clock/clock_colon.png';
+
+export default class clock extends Group {
+	constructor(device) {
+		super();
+		this.event = device.event;
+		this.model = device.model;
+		this.zlevel = device.model.zlevel;
+		this.z = device.model.z;
+		this.event = device.event;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.dragging = false;
+		this.initTime = 0;
+		this.create();
+	}
+	create() {
+		this.clockBg = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: clockBg,
+				x: this.model.point.x,
+				y: this.model.point.y,
+				width: this.model.width,
+				height: this.model.width/493*156
+			}
+		});
+		this.num1 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.getImagePic('0'),
+				x: this.model.point.x+this.model.width*0.1,
+				y: this.model.point.y+this.model.width*0.052,
+				width: this.model.width*0.1,
+				height: this.model.width*0.1/37*74
+			}
+		});
+		this.num2 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.getImagePic('0'),
+				x: this.model.point.x+this.model.width*0.22,
+				y: this.model.point.y+this.model.width*0.052,
+				width: this.model.width*0.1,
+				height: this.model.width*0.1/37*74
+			}
+		});
+		this.num3 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.getImagePic('0'),
+				x: this.model.point.x+this.model.width*0.39,
+				y: this.model.point.y+this.model.width*0.052,
+				width: this.model.width*0.1,
+				height: this.model.width*0.1/37*74
+			}
+		});
+		this.num4 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.getImagePic('0'),
+				x: this.model.point.x+this.model.width*0.52,
+				y: this.model.point.y+this.model.width*0.052,
+				width: this.model.width*0.1,
+				height: this.model.width*0.1/37*74
+			}
+		});
+		this.num5 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.getImagePic('0'),
+				x: this.model.point.x+this.model.width*0.69,
+				y: this.model.point.y+this.model.width*0.052,
+				width: this.model.width*0.1,
+				height: this.model.width*0.1/37*74
+			}
+		});
+		this.num6 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.getImagePic('0'),
+				x: this.model.point.x+this.model.width*0.82,
+				y: this.model.point.y+this.model.width*0.052,
+				width: this.model.width*0.1,
+				height: this.model.width*0.1/37*74
+			}
+		});
+		this.clockColon1 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: clockColon,
+				x: this.model.point.x+this.model.width*0.16,
+				y: this.model.point.y-this.model.width*0.028,
+				width: this.model.width*0.37,
+				height: this.model.width/1*0.37
+			}
+		});
+		this.clockColon2 = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: clockColon,
+				x: this.model.point.x+this.model.width*0.46,
+				y: this.model.point.y-this.model.width*0.028,
+				width: this.model.width*0.37,
+				height: this.model.width/1*0.37
+			}
+		});
+		this.add(this.clockBg);
+		this.add(this.num1);
+		this.add(this.num2);
+		this.add(this.num3);
+		this.add(this.num4);
+		this.add(this.num5);
+		this.add(this.num6);
+		this.add(this.clockColon1);
+		this.add(this.clockColon2);
+	}
+	getImagePic(context) {
+		let pic = clock0;
+		switch (context) {
+		case '0':
+			pic = clock0;
+			break;
+		case '1':
+			pic = clock1;
+			break;
+		case '2':
+			pic = clock2;
+			break;
+		case '3':
+			pic = clock3;
+			break;
+		case '4':
+			pic = clock4;
+			break;
+		case '5':
+			pic = clock5;
+			break;
+		case '6':
+			pic = clock6;
+			break;
+		case '7':
+			pic = clock7;
+			break;
+		case '8':
+			pic = clock8;
+			break;
+		case '9':
+			pic = clock9;
+			break;
+		}
+		return pic;
+	}
+	setClockStart() {
+		const _this = this;
+		this.timer = setInterval(() => {
+			_this.handleClock(_this);
+		}, 1000);
+	}
+	handleClock(_this) {
+		_this.initTime += 1000;
+		const newDate = new Date();
+		newDate.setTime(_this.initTime);
+		let seconds = newDate.getSeconds() +'';
+		let minutes = newDate.getMinutes() + '';
+		let hours = newDate.getHours() + '';
+		if (seconds.length<2) {
+			seconds = '0' + seconds;
+		}
+		if (minutes.length<2) {
+			minutes = '0' + minutes;
+		}
+		if (hours.length<2) {
+			hours = '0'+ hours;
+		}
+		_this.setNumPic(6, seconds.charAt(1));
+		_this.setNumPic(5, seconds.charAt(0));
+		_this.setNumPic(4, minutes.charAt(1));
+		_this.setNumPic(3, minutes.charAt(0));
+		_this.setNumPic(2, hours.charAt(1));
+		_this.setNumPic(1, hours.charAt(0));
+	}
+	setNumPic(num, context) {
+		switch (num) {
+		case 1:
+			this.num1.setStyle('image', this.getImagePic(context));
+			break;
+		case 2:
+			this.num2.setStyle('image', this.getImagePic(context));
+			break;
+		case 3:
+			this.num3.setStyle('image', this.getImagePic(context));
+			break;
+		case 4:
+			this.num4.setStyle('image', this.getImagePic(context));
+			break;
+		case 5:
+			this.num5.setStyle('image', this.getImagePic(context));
+			break;
+		case 6:
+			this.num6.setStyle('image', this.getImagePic(context));
+		}
+	}
+	setClockTime(initTime) {
+		this.initTime = initTime;
+		const newDate = new Date();
+		newDate.setTime(initTime);
+		let seconds = newDate.getSeconds() +'';
+		let minutes = newDate.getMinutes() + '';
+		let hours = newDate.getHours() + '';
+		if (seconds.length<2) {
+			seconds = '0' + seconds;
+		}
+		if (minutes.length<2) {
+			minutes = '0' + minutes;
+		}
+		if (hours.length<2) {
+			hours = '0'+ hours;
+		}
+		this.setNumPic(6, seconds.charAt(1));
+		this.setNumPic(5, seconds.charAt(0));
+		this.setNumPic(4, minutes.charAt(1));
+		this.setNumPic(3, minutes.charAt(0));
+		this.setNumPic(2, hours.charAt(1));
+		this.setNumPic(1, hours.charAt(0));
+	}
+	setDraggable() {
+	}
+}

src/ibp/shape/elevator.js

@@ -20,7 +20,7 @@ export default class elevator extends Group {
 			// width: model.width,
 			// height: model.height,
 			position: [model.point.x, model.point.y],
-			draggable: model.draggable || false
+			draggable: false
 		});
 
 		this.elevatorBack = new ElevatorBack({model: {
@@ -108,6 +108,7 @@ export default class elevator extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+            return;
 		}
 		this.draggroup =this.grouper;
 		this.deltPostion =[e.event.zrX-this.draggroup.position[0], e.event.zrY-this.draggroup.position[1]];

src/ibp/shape/factory.js

@@ -12,6 +12,8 @@ import RotatingButton from './rotatingButton';
 import Elevator from './elevator';
 import Key from './key';
 import TeleTerminal from './teleTerminal';
+import Clock from './clock';
+import RotateTip from './rotateTip';
 
 const ibpShape = {};
 ibpShape[deviceType.Arrow] = Arrow;
@@ -27,6 +29,8 @@ ibpShape[deviceType.RotatingButton] = RotatingButton;
 ibpShape[deviceType.Elevator] = Elevator;
 ibpShape[deviceType.Key] = Key;
 ibpShape[deviceType.TeleTerminal] = TeleTerminal;
+ibpShape[deviceType.Clock] = Clock;
+ibpShape[deviceType.RotateTip] = RotateTip;
 
 function shapefactory(device, ibp) {
 	const type = device.model._type;

src/ibp/shape/ibpLine.js

@@ -46,6 +46,7 @@ export default class ibpLine extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+            return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -60,6 +61,7 @@ export default class ibpLine extends Group {
 			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;
+			this.dragging = false;
 		}
 	}
 }

src/ibp/shape/ibpText.js

@@ -20,7 +20,7 @@ export default class ibpText extends Group {
 			zlevel: model.zlevel,
 			z: model.z,
 			silent: model.silent || false,
-			draggable: model.draggable || false,
+			draggable: false,
 			style: {
 				x: model.point.x,
 				y: model.point.y,
@@ -51,6 +51,7 @@ export default class ibpText extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -63,6 +64,7 @@ export default class ibpText extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/shape/ibpTipBox.js

@@ -45,6 +45,7 @@ export default class ibpTipBox extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -57,6 +58,7 @@ export default class ibpTipBox extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/shape/key.js

@@ -21,7 +21,7 @@ export default class key extends Group {
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
 			z: model.z,
-			draggable: model.draggable || false,
+			draggable: false,
 			style: {
 				image: this.getRotateColor(),
 				x: model.point.x,
@@ -87,6 +87,7 @@ export default class key extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+            return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;

src/ibp/shape/rotateTip.js

@@ -21,7 +21,7 @@ export default class rotateTip extends Group {
 		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			draggable: model.draggable || false,
+			draggable: false,
 			style: {
 				image: this.getRotateColor(),
 				x: model.point.x,
@@ -57,7 +57,7 @@ export default class rotateTip extends Group {
 	}
 
 	setDraggable() {
-		this.arrow.attr('draggable', true);
+		this.imageBg.attr('draggable', true);
 		this.createMouseEvent();
 	}
 	createMouseEvent() {
@@ -70,6 +70,7 @@ export default class rotateTip extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -84,6 +85,7 @@ export default class rotateTip extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/shape/rotatingButton.js

@@ -45,6 +45,7 @@ export default class RotatingButton extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -57,6 +58,7 @@ export default class RotatingButton extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/shape/teleTerminal.js

@@ -20,7 +20,7 @@ export default class alarm extends Group {
 		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			draggable: model.draggable || false,
+			draggable: false,
 			style: {
 				image: teleTerminalPic,
 				x: model.point.x,
@@ -54,6 +54,7 @@ export default class alarm extends Group {
 		this.event.disable();
 		if (e.which == 3) {
 			store.dispatch('ibp/setUpdateDeviceData', this.model);
+			return;
 		}
 		this.offsetX = e.offsetX;
 		this.offsetY = e.offsetY;
@@ -68,6 +69,7 @@ export default class alarm extends Group {
 		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.dragging = false;
 		}
 	}
 }

src/ibp/transformHandle.js

@@ -46,26 +46,26 @@ class TransformHandle {
 	}
 
 	// 更新偏移量
-	updateTransform(opts) {
+	updateTransform(opts, canvasSize) {
+		if (canvasSize) {
 			const elRect = this.parentLevel.getBoundingRect();
 			const zrRect = this.rect;
-
+			if (canvasSize.x - opts.offsetX > 0) {
-		if (elRect.x - opts.offsetX > 0) {
 				opts.offsetX = -elRect.x;
 			}
 
-		if (elRect.y - opts.offsetY > 0) {
+			if (canvasSize.y - opts.offsetY > 0) {
 				opts.offsetY = -elRect.y;
 			}
 
-		if (elRect.x + elRect.width < zrRect.width) {
+			if (elRect.x + canvasSize.width < zrRect.width) {
-			opts.offsetX -= zrRect.width - (elRect.x + elRect.width);
+				opts.offsetX -= zrRect.width - (elRect.x + canvasSize.width);
 			}
 
-		if (elRect.y + elRect.height < zrRect.height) {
+			if (elRect.y + canvasSize.height < zrRect.height) {
-			opts.offsetY -= zrRect.height - (elRect.y + elRect.height);
+				opts.offsetY -= zrRect.height - (elRect.y + canvasSize.height);
+			}
 		}
-
 		this.transform = createTransform(opts);
 		this.transformAll();
 	}

src/ibp/utils/parser.js

@@ -38,13 +38,12 @@ export function createModel(type, model, propConvert) {
 	return { instance: null, event: null, model: propConvert ? propConvert.initPrivateProps(tempModel) : tempModel };
 }
 
-export function parser(data, config) {
+export function parser(data) {
 	var ibpDevice = {};
 	const propConvert = null;
 	// var propConvert = skinCode ? Vue.prototype.$theme.loadPropConvert(skinCode): null;
 	if (data) {
-
+		Object.assign(data.background);
-		Object.assign(data.background, config);
 		ibpDevice[data.background.code] = createModel(deviceType.Background, data.background, propConvert);
 		zrUtil.each(data.textList || [], elem => {
 			ibpDevice[elem.code] = createModel(deviceType.IbpText, elem, propConvert);
@@ -94,6 +93,13 @@ export function parser(data, config) {
 			ibpDevice[elem.code] = createModel(deviceType.TeleTerminal, elem, propConvert);
 		}, this);
 
+		zrUtil.each(data.clockList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.Clock, elem, propConvert);
+		});
+
+		zrUtil.each(data.rotateTipList || [], elem => {
+			ibpDevice[elem.code] = createModel(deviceType.RotateTip, elem, propConvert);
+		});
 	}
 
 	return ibpDevice;
@@ -309,7 +315,38 @@ export function updateIbpData(device) {
 		}
 		break;
 	}
-
+	case deviceType.Clock : {
+		if (ibpData.clockList && ibpData.clockList.length > 0) {
+			let newDevice = true;
+			for (let i=0; i<ibpData.clockList.length; i++) {
+				if (device.code === ibpData.clockList[i].code) {
+					device.dispose ? ibpData.clockList.splice(i, 1):ibpData.clockList[i] = device;
+					newDevice = false;
+				}
+			}
+			if (newDevice) {
+				ibpData.clockList.push(device);
+			}
+		} else {
+			ibpData.clockList = [device];
+		}
+	}
+	case deviceType.RotateTip: {
+		if (ibpData.rotateTipList && ibpData.rotateTipList.length > 0) {
+			let newDevice = true;
+			for (let i=0; i<ibpData.rotateTipList.length; i++) {
+				if (device.code === ibpData.rotateTipList[i].code) {
+					device.dispose ? ibpData.rotateTipList.splice(i, 1): ibpData.rotateTipList[i] = device;
+					newDevice = false;
+				}
+			}
+			if (newDevice) {
+				ibpData.rotateTipList.push(device);
+			}
+		} else {
+			ibpData.rotateTipList = [device];
+		}
+	}
 	}
 	store.dispatch('ibp/setIbpData', ibpData);
 }

src/router/index.js

@@ -84,8 +84,8 @@ import RunPlanEveryDay from '@/views/publish/runPlanEveryDay/index';
 import ProductStatus from '@/views/publish/productStatus/index';
 import PublishLesson from '@/views/publish/publishLesson/index';
 // import SimulationScript from '@/views/publish/simulationScript/index';
-// import IbpDraft from '@/views/ibp/ibpDraft/index';
+import IbpDraft from '@/views/ibp/ibpDraft/index';
-// import IbpEdit from '@/views/ibp/ibpDraft/ibpEdit/index';
+import IbpEdit from '@/views/ibp/ibpDraft/ibpEdit/index';
 
 import Commodity from '@/views/orderauthor/commodity/index';
 import CommodityDraft from '@/views/orderauthor/commodity/draft';
@@ -388,13 +388,13 @@ export const asyncRouter = [
 					}
 				]
 			},
-			// {
+			{
-			// 	path: 'ibp/edit',
+				path: 'ibp/edit',
-			// 	component: IbpEdit,
+				component: IbpEdit,
-			// 	meta: {
+				meta: {
-			// 		i18n: 'router.ibpDraw'
+					i18n: 'router.ibpDraw'
-			// 	}
+				}
-			// },
+			},
 			{
 				path: 'runPlan',
 				redirect: '/map/runPlan/view/draft',

src/store/modules/ibp.js

@@ -36,7 +36,6 @@ const ibp = {
 
 	mutations: {
 		ibpRender: (state, devices) => {
-			console.log('--2', devices);
 			Vue.prototype.$ibp && Vue.prototype.$ibp.render(devices);
 		},
 		setIbpData: (state, ibp) => {

src/utils/baseUrl.js

@@ -3,8 +3,8 @@ export function getBaseUrl() {
 	let BASE_API;
 	if (process.env.NODE_ENV === 'development') {
 		// BASE_API = 'https://joylink.club/jlcloud';
-		// BASE_API = 'https://test.joylink.club/jlcloud';
+		BASE_API = 'https://test.joylink.club/jlcloud';
-		BASE_API = 'http://192.168.3.5:9000'; // 袁琪
+		// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
 		// BASE_API = 'http://192.168.3.6:9000'; // 旭强
 		// BASE_API = 'http://192.168.3.4:9000' // 琰培
 	} else {

src/views/display/index.vue

@@ -18,7 +18,6 @@
         @tryTime="tryTime"
         @hidepanel="hidepanel"
         @quitQuest="quitQuest"
-        @showIbp="showIbp"
         @showScheduling="showScheduling"
       />
 
@@ -47,7 +46,6 @@
 
     <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" />
     <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
-    <ibp-plate v-show="ibpShow" ref="ibpPlate" @hideIbp="hideIbp" />
 
     <fault-choose ref="faultChoose" :group="group" />
     <run-plan-Load ref="runPlanLoad" :group="group" />
@@ -87,7 +85,6 @@ import Vue from 'vue';
 // 三维
 import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
 import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
-import IbpPlate from '@/views/ibp/index';
 
 export default {
 	name: 'DisplayDraft',
@@ -108,7 +105,6 @@ export default {
 		MenuSystemTime,
 		Jl3dSimulation,
 		Jl3dDrive,
-		IbpPlate,
 		Scheduling
 	},
 	props: {
@@ -563,11 +559,6 @@ export default {
 				this.$refs.Jl3dSimulation.show(this.skinCode);
 			}
 		},
-		showIbp() {
-			this.panelShow = false;
-			this.ibpShow = true;
-			this.$refs.ibpPlate.show();
-		},
 		showScheduling() {
 			this.$refs.scheduling.doShow();
 		},
@@ -579,10 +570,6 @@ export default {
 			this.panelShow = true;
 			this.drivingShow = false;
 		},
-		hideIbp() {
-			this.panelShow = true;
-			this.ibpShow = false;
-		},
 		runPlanViewShow() {
 			this.$refs.runPlanView.doShow();
 		},

src/views/display/menuDemon.vue

@@ -7,7 +7,6 @@
     </div>
     <div class="display-draft">
       <el-button-group>
-        <el-button v-if="isShowIbp" type="success" @click="jumpIbp">IBP盘</el-button>
         <el-button v-if="isShowScheduling" type="primary" @click="jumpScheduling">排班计划</el-button>
         <el-button type="jumpjlmap3d" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
         <template v-if="isShowQuest">
@@ -196,9 +195,6 @@ export default {
 		jumpjlmap3d() {
 			this.$emit('hidepanel');
 		},
-		jumpIbp() {
-			this.$emit('showIbp');
-		},
 		jumpScheduling() {
 			this.$emit('showScheduling');
 		},

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

@@ -74,8 +74,6 @@
                 this.$refs[form].validate((valid) => {
                    if (valid){
                        const alarmModel = {
-                           zlevel: 2,
-                           z: 1,
                            point:{
                                x: this.form.x,
                                y: this.form.y
@@ -93,8 +91,6 @@
             },
             deleteDevice() {
                 const alarmModel = {
-                    zlevel: 2,
-                    z: 1,
                     point:{
                         x: this.form.x,
                         y: this.form.y

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

@@ -82,8 +82,6 @@
                 this.$refs[form].validate((valid) => {
                     if (valid){
                         const appendageBoxModel = {
-                            zlevel: 2,
-                            z: 1,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -102,8 +100,6 @@
             },
             deleteDevice() {
                 const appendageBoxModel = {
-                    zlevel: 2,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -98,8 +98,6 @@
                 this.$refs[form].validate((valid) => {
                     if (valid){
                         const arrowModel = {
-                            zlevel: 2,
-                            z: 1,
                             point: this.point,
                             _type: 'Arrow',
                             code: this.form.code,
@@ -118,8 +116,6 @@
             },
             deleteDevice() {
                 const arrowModel = {
-                    zlevel: 2,
-                    z: 1,
                     point: this.point,
                     _type: 'Arrow',
                     code: this.form.code,

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

@@ -8,7 +8,7 @@
                 <el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button type="primary" @click="onSubmit">修改</el-button>
                 <el-button>取消</el-button>
             </el-form-item>
         </el-form>
@@ -48,8 +48,6 @@
         methods: {
             onSubmit() {
                 const bgModel = {
-                    zlevel: 1,
-                    z: 1,
                     x: 0,
                     y: 0,
                     _type: 'Background',

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

@@ -88,8 +88,6 @@
                 this.$refs[form].validate((valid) => {
                     if (valid) {
                         const buttonModel = {
-                            zlevel: 2,
-                            z: 1,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -109,8 +107,6 @@
             },
             deleteDevice() {
                 const buttonModel = {
-                    zlevel: 2,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <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="电子表宽度" prop="clockWidth">
+                <el-input-number v-model="form.clockWidth" 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('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: 'ClockDraft',
+        components: {
+        },
+        data() {
+            return {
+                isUpdate: false,
+                buttonText: '立即创建',
+                showDeleteButton: false,
+                form: {
+                    code: '',
+                    clockWidth: '',
+                    x: 10,
+                    y: 10
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入电子表编号', trigger: 'blur' },
+                    ],
+                    clockWidth: [
+                        { required: true, message: '请输入电子表宽度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+            '$store.state.ibp.rightClickCount': function (val) {
+                const model = this.$store.getters['ibp/updateDeviceData'];
+                if (model._type === 'Clock' ){
+                    this.buttonText = '修改';
+                    this.showDeleteButton = true;
+                    this.isUpdate = true;
+                    this.form.code = model.code;
+                    this.form.clockWidth = model.width;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
+                }
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if (valid) {
+                        const clockModel = {
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            _type: 'Clock',
+                            code: this.form.code,
+                            width: this.form.clockWidth,
+                        };
+                        this.$emit('createClock', clockModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+            },
+            deleteDevice() {
+                const clockModel = {
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
+                    _type: 'Clock',
+                    code: this.form.code,
+                    width: this.form.clockWidth,
+                };
+                this.$emit('deleteDataModel',clockModel );
+                this.initPage();
+            },
+            initPage() {
+                this.isUpdate = false;
+                this.buttonText = '立即创建';
+                this.showDeleteButton = false;
+                this.form = {
+                    code: '',
+                    buttonColor: '',
+                    buttonWidth: '',
+                    x: 10,
+                    y: 10
+                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "clock_"+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/ibpElevator.vue

@@ -101,8 +101,6 @@
                 this.$refs[form].validate((valid) => {
                     if (valid){
                         const elevatorModel = {
-                            zlevel: 2,
-                            z: 2,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -124,8 +122,6 @@
             },
             deleteDevice() {
                 const elevatorModel = {
-                    zlevel: 2,
-                    z: 2,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -93,8 +93,6 @@
                 this.$refs[form].validate((valid) => {
                     if(valid) {
                         const keyModel = {
-                            zlevel: 3,
-                            z: 1,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -116,8 +114,6 @@
             },
             deleteDevice() {
                 const keyModel = {
-                    zlevel: 3,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -74,8 +74,6 @@
                 this.$refs[form].validate((valid) => {
                     if(valid){
                         const lampModel = {
-                            zlevel: 2,
-                            z: 1,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -95,8 +93,6 @@
             },
             deleteDevice() {
                  const lampModel = {
-                      zlevel: 2,
-                      z: 1,
                       point: {
                           x: this.form.x,
                           y: this.form.y

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

@@ -92,8 +92,6 @@
                 this.$refs[form].validate((valid) =>{
                     if (valid){
                         const lineModel = {
-                            zlevel: 2,
-                            z: 1,
                             point1: {
                                 x: this.form.x1,
                                 y: this.form.y1
@@ -117,8 +115,6 @@
             },
             deleteDevice() {
                 const lineModel = {
-                    zlevel: 2,
-                    z: 1,
                     point1: {
                         x: this.form.x1,
                         y: this.form.y1

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

@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
+            <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="旋转提示宽度" prop="rotateTipWidth">
+                <el-input-number v-model="form.rotateTipWidth" 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('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: '',
+                    rotateTipWidth: '',
+                    x: 10,
+                    y: 10
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入旋转提示编号', trigger: 'blur' },
+                    ],
+                    rotateTipWidth: [
+                        { required: true, message: '请输入旋转提示宽度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+            '$store.state.ibp.rightClickCount': function (val) {
+                const model = this.$store.getters['ibp/updateDeviceData'];
+                if (model._type === 'RotateTip' ){
+                    this.buttonText = '修改';
+                    this.showDeleteButton = true;
+                    this.isUpdate = true;
+                    this.form.code = model.code;
+                    this.form.rotateTipWidth = model.width;
+                    this.form.x = model.point.x;
+                    this.form.y = model.point.y;
+                }
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit(form) {
+                this.$refs[form].validate((valid) => {
+                    if(valid) {
+                        const rotateTipModel = {
+                            point: {
+                                x: this.form.x,
+                                y: this.form.y
+                            },
+                            draggable: true,
+                            _type: 'RotateTip',
+                            code: this.form.code,
+                            width: this.form.rotateTipWidth,
+                        };
+                        this.$emit('createRotateTip', rotateTipModel);
+                        this.initPage();
+                    }else {
+                        return false;
+                    }
+                });
+
+            },
+            deleteDevice() {
+                const rotateTipModel = {
+                    point: {
+                        x: this.form.x,
+                        y: this.form.y
+                    },
+                    draggable: true,
+                    _type: 'Key',
+                    code: this.form.code,
+                    width: this.form .rotateTipWidth,
+                };
+                this.$emit('deleteDataModel',rotateTipModel);
+                this.initPage();
+            },
+            initPage() {
+                this.isUpdate = false;
+                this.buttonText = '立即创建';
+                this.showDeleteButton = false;
+                this.form = {
+                    code: '',
+                    rotateTipWidth: '',
+                    x: 10,
+                    y: 10
+                };
+            },
+            generateCode() {
+                const mydate = new Date();
+                this.form.code =  "rTip_"+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/ibpRotatingButton.vue

@@ -74,8 +74,6 @@
                 this.$refs[form].validate((valid) => {
                     if (valid) {
                         const rotatingButtonModel = {
-                            zlevel: 2,
-                            z: 1,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -95,8 +93,6 @@
             },
             deleteDevice() {
                 const rotatingButtonModel = {
-                    zlevel: 2,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -75,8 +75,6 @@
                 this.$refs[form].validate((valid) => {
                    if (valid){
                        const TerminalModel = {
-                           zlevel: 2,
-                           z: 1,
                            point: {
                                x: this.form.x,
                                y: this.form.y
@@ -96,8 +94,6 @@
             },
             deleteDevice() {
                 const TerminalModel = {
-                    zlevel: 2,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -98,8 +98,6 @@
                 this.$refs[form].validate((valid) => {
                     if (valid) {
                         const textModel = {
-                            zlevel: 2,
-                            z: 1,
                             point: {
                                 x: this.form.x,
                                 y: this.form.y
@@ -119,8 +117,6 @@
                     }
                 });
                 const textModel = {
-                    zlevel: 2,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -91,8 +91,6 @@
                 this.$refs[form].validate((valid) => {
                    if (valid) {
                        const tipBoxModel = {
-                           zlevel: 1,
-                           z: 1,
                            point: {
                                x: this.form.x,
                                y: this.form.y
@@ -113,8 +111,6 @@
             },
             deleteDevice() {
                 const tipBoxModel = {
-                    zlevel: 1,
-                    z: 1,
                     point: {
                         x: this.form.x,
                         y: this.form.y

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

@@ -78,18 +78,30 @@
                         >
                         </ibp-telephone-terminal>
                     </el-tab-pane>
-                    <el-tab-pane label="电梯" name="elevator">
+                    <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">
+                    <el-tab-pane label="钥匙" name="Key">
                         <ibp-key ref="key"
                             @createKey="createDataModel" @deleteDataModel="deleteDataModel"
                         >
                         </ibp-key>
                     </el-tab-pane>
+                    <el-tab-pane label="电子表" name="Clock">
+                        <ibp-clock ref="clock"
+                            @createClock="createDataModel" @deleteDataModel="deleteDataModel"
+                        >
+                        </ibp-clock>
+                    </el-tab-pane>
+                    <el-tab-pane label="旋转提示" name="RotateTip">
+                        <ibp-rotate-tip ref="rotateTip"
+                            @createRotateTip="createDataModel" @deleteDataModel="deleteDataModel"
+                        >
+                        </ibp-rotate-tip>
+                    </el-tab-pane>
                 </el-tabs>
             </el-card>
         </div>
@@ -98,6 +110,7 @@
 <script>
     import { checkLoginLine } from '@/api/login';
     import { EventBus } from '@/scripts/event-bus';
+    import {modelFactory} from '@/ibp/utils/parser'
     import IbpText from './ibpText';
     import IbpTipBox from './ibpTipBox';
     import IbpButton from './ibpButton';
@@ -111,8 +124,8 @@
     import IbpTelephoneTerminal from './ibpTelephoneTerminal';
     import IbpElevator from './ibpElevator';
     import IbpKey from './ibpKey';
-
+    import IbpClock from './ibpClock';
-
+    import IbpRotateTip from './ibpRotateTip';
 
     export default {
         name: 'IbpOperate',
@@ -129,7 +142,9 @@
             IbpLine,
             IbpTelephoneTerminal,
             IbpElevator,
-            IbpKey
+            IbpKey,
+            IbpClock,
+            IbpRotateTip
         },
         mixins: [
 
@@ -154,8 +169,8 @@
         },
         methods: {
             createDataModel(model) {
-                console.log('-1',model);
+                const newModel = modelFactory(model.type, model);
-                this.$store.dispatch('ibp/updateIbpDevices', model);
+                this.$store.dispatch('ibp/updateIbpDevices', newModel);
             },
             deleteDataModel(model) {
                 this.$store.dispatch('ibp/deleteIbpDevices', model);
@@ -176,7 +191,9 @@
                 this.$refs.rotatingbutton.initPage();
                 this.$refs.elevator.initPage();
                 this.$refs.key.initPage();
-                this.$refs.teleTerminal.initPage()
+                this.$refs.teleTerminal.initPage();
+                this.$refs.clock.initPage();
+                this.$refs.rotateTip.initPage();
             }
         }
     };

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

@@ -2,7 +2,7 @@
   <transition name="el-zoom-in-center">
     <div class="mapPaint">
       <div class="map-view">
-        <ibp-plate ref="ibpPlate" />
+        <ibp-plate ref="ibpPlate" :size="size"/>
       </div>
       <div class="map-draft">
         <ibp-operate ref="ibpOperate" />
@@ -27,7 +27,11 @@ export default {
 			autoSaveTask: null,
 			selected: null,
 			mapInfo: { name: '' },
-			timeDemon: null
+			timeDemon: null,
+            size: {
+                width: this.$store.state.app.width-521,
+                height: this.$store.state.app.height-60
+            },
 		};
 	},
 	watch: {

src/views/ibp/index.vue

@@ -30,9 +30,20 @@ export default {
 					y: 0
 				}
 			},
-			showBackButton: true
+			showBackButton: true,
+			initZrender: false,
+			initTime: '',
+            started: false
 		};
 	},
+    props: {
+        size: {
+            type: Object,
+            default() {
+                return null;
+            }
+        }
+    },
 	computed: {
 		...mapGetters([
 			'canvasWidth',
@@ -43,15 +54,32 @@ export default {
 		}
 	},
 	watch: {
-		'$store.state.config.canvasSizeCount': function () {
+		'$store.state.config.canvasSizeCount': function (val) {
+			if (this.initZrender) {
 				this.resetSize();
+			}
 		},
 		'$store.state.app.windowSizeCount': function() {
-			const width = this.$store.state.app.width;
+			const width = this.size ? this.size.width : this.$store.state.app.width;
-			const height = this.$store.state.app.height;
+			const height = this.size ? this.size.height :this.$store.state.app.height;
-			this.$store.dispatch('config/resize', { width: width- 521, height: height - 60 });
+			this.$store.dispatch('config/resize', { width: width, height: height});
+		},
+		'$store.state.training.initTime': function (initTime) {
+			this.initTime = initTime;
+			if (this.$ibp) {
+				this.initClockTime(initTime);
 			}
 		},
+        '$store.state.training.started': function (started) {
+            this.started = started;
+            if (this.$ibp){
+                this.setClockStart(started);
+            }
+        }
+	},
+	mounted() {
+		this.setWindowSize();
+	},
 	beforeDestroy() {
 		if (this.$ibp) {
 			this.$ibp.dispose();
@@ -62,7 +90,6 @@ export default {
 			document.getElementById(this.ibpId).oncontextmenu = function (e) {
 				return false;
 			};
-
 			const data = parser(ibpData, {width: this.canvasWidth, height: this.canvasHeight});
 			this.$ibp = new IbpPan({
 				dom: document.getElementById(this.ibpId),
@@ -85,12 +112,14 @@ export default {
 			Vue.prototype.$ibp = this.$ibp;
 			this.setMap(data);
 			this.$store.dispatch('ibp/setIbpData', ibpData);
+			this.initClockTime(this.initTime);
 			window.document.oncontextmenu = function () {
 				return false;
 			};
+			this.initZrender = true;
 		},
 		setMap(data) {
-			this.$ibp.setMap(data, data);
+			this.$ibp.setMap(ibpData, data);
 		},
 		resetSize() {
 			this.$nextTick(() => {
@@ -100,6 +129,13 @@ export default {
 				this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
 			});
 		},
+		setWindowSize() {
+			this.$nextTick(() => {
+                const width = this.size ? this.size.width : this.$store.state.app.width;
+                const height = this.size ? this.size.height :this.$store.state.app.height;
+				this.$store.dispatch('config/resize', { width: width, height: height });
+			});
+		},
 		back() {
 			this.$emit('hideIbp');
 		},
@@ -116,6 +152,14 @@ export default {
 		drawIbpInit() {
 			this.$ibp.drawIbpInit();
 			this.showBackButton = false;
+		},
+		// 初始化电子表时间
+		initClockTime(initTime) {
+			this.$ibp.initClockTime(initTime);
+		},
+        //设置电子时钟开始或停止
+        setClockStart(started) {
+            this.$ibp.setClockStart(started);
         }
 	}
 };

src/views/jointTraining/index.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="main" :style="{width: canvasWidth+'px'}" @mousemove="mousemove">
     <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
+    <ibp-plate v-show="ibpShow" ref="ibpPlate" @hideIbp="hideIbp" />
+    <div v-show="panelShow" :panelShow="panelShow">
         <transition name="el-zoom-in-bottom">
             <map-system-draft ref="mapCanvas" @back="back" />
         </transition>
-    <menu-demon-joint ref="demonMenu" :group="group" :user-role="userRole" @getUserRole="getUserRole" @hidepanel="hidepanel" />
+        <menu-demon-joint ref="demonMenu" :group="group" :user-role="userRole" @getUserRole="getUserRole" @hidepanel="hidepanel" @showIbp="showIbp" />
         <menu-demon-schema
             ref="menuSchema"
             :group="group"
@@ -20,6 +22,7 @@
         <join-run-plan-view ref="runPlanView" :group="group" />
         <menu-system-time ref="menuSystemTime" :offset="offset" :group="group" :right="right" />
     </div>
+  </div>
 
 </template>
 
@@ -32,6 +35,7 @@ import JoinFaultChoose from '@/views/display/demon/faultChoose';
 import JoinRunPlanLoad from '@/views/display/demon/runPlanLoad';
 import JoinRunPlanView from '@/views/display/demon/runPlanView';
 import menuSystemTime from '@/views/display/menuSystemTime';
+import IbpPlate from '@/views/ibp/index';
 import { mapGetters } from 'vuex';
 // import { getProductDetail } from '@/api/jmap/training';
 import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
@@ -53,7 +57,8 @@ export default {
 		JoinRunPlanLoad,
 		JoinRunPlanView,
 		menuSystemTime,
-		Jl3dDrive
+		Jl3dDrive,
+        IbpPlate
 	},
 	data() {
 		return {
@@ -71,7 +76,9 @@ export default {
 			mapId: '',
 			skinCode: '',
 			simulationShow: false,
-			drivingShow: false
+			drivingShow: false,
+            ibpShow: false,
+            panelShow: true
 		};
 	},
 	computed: {
@@ -330,12 +337,24 @@ export default {
 		showdriving() {
 			this.panelShow = true;
 			this.drivingShow = false;
+			this.ibpShow =false;
+		},
+        showIbp() {
+            this.drivingShow = false;
+            this.panelShow = false;
+            this.ibpShow = true;
+            this.$refs.ibpPlate.show();
         },
 		hidepanel() {
 			this.panelShow = false;
 			this.drivingShow = true;
+			this.ibpShow = false;
 			this.$refs.Jl3dDrive.show(this.skinCode);
-
+		},
+        hideIbp() {
+            this.drivingShow = false;
+            this.panelShow = true;
+            this.ibpShow = false;
         },
 		messageInfo(message, type) {
 			this.$message({

src/views/jointTraining/menuDemon.vue

@@ -44,6 +44,7 @@
         </div> -->
     <div class="display-draft">
       <el-button-group>
+          <!--<el-button @click="jumpIbp">IBP盘</el-button>-->
         <el-button v-if="userRole == 'Driver'" type="jumpjlmap3d" @click="jumpjlmap3d">司机视角</el-button>
         <el-button
           v-if="userRole == 'Admin'"
@@ -332,6 +333,9 @@ export default {
 		},
 		jumpjlmap3d() {
 			this.$emit('hidepanel');
+		},
+        jumpIbp() {
+            this.$emit('showIbp');
         }
 	}
 };