Merge branch 'test' of git.cloud.tencent.com:joylink/jl-nclient into test

src/i18n/langs/en/map.js

@@ -54,6 +54,7 @@ export default {
 	trainWindow: 'train window',
 	line: 'line',
 	text: 'text',
+	button: 'button',
 
 	mapName: 'Name of the map:',
 	skinName: 'Skin style:',
@@ -189,6 +190,8 @@ export default {
 	linkLp: 'Link Start point coordinates:',
 	linkRp: 'Link End point coordinates:',
 
+	linePoint: 'point:',
+
 	rulesChange: 'The rules change',
 	splitMerge: 'Split/merge',
 	linkSet: 'The Link set',

src/i18n/langs/zh/map.js

@@ -48,6 +48,7 @@ export default {
 	zcZoneControl: 'zc区域控制',
 	temporaryLimit: '全线临时限速',
 	lcControl: 'Lc控制',
+	buttonControl: '按钮',
 	image: '图片',
 	station: '车站',
 	controlMode: '控制模式',
@@ -58,6 +59,7 @@ export default {
 	trainWindow: '车次窗',
 	line: '线条',
 	text: '文字',
+	button: '按钮',
 
 	mapName: '地图名称:',
 	skinName: '皮肤:',
@@ -76,6 +78,7 @@ export default {
 	lineCoding: '线条编码:',
 	lineType: '线条类型:',
 	lineWidth: '线条宽度:',
+	linePoint: '坐标:',
 	segmentCoordinates: '区段显示坐标:',
 
 	publishMapCreation: '从发布地图创建',
@@ -133,6 +136,8 @@ export default {
 	failedCreateSignal: '创建自动信号失败',
 	automaticSignalUpdateSucceeded: '更新自动信号成功！',
 	automaticSignalUpdateFailed: '更新自动信号失败',
+	interconnected: '联锁控名称',
+	buttonType: '所属类型',
 
 	stationName: '车站名称:',
 
@@ -254,7 +259,7 @@ export default {
 	isCurve: '是否曲线:',
 	physicalSegmentName: '物理区段名称:',
 
-	directionType: '形式方向:',
+	directionType: '行驶方向:',
 	leftOrRight: '左右位置:',
 	positionType: '上下位置:',
 
@@ -312,7 +317,7 @@ export default {
 	zzkContent: '站中控内容:',
 	stationControlZok: '中控',
 
-	stationstandName: '选择车站名称:',
+	stationstandName: '所属车站:',
 	stationstandDirection: '站台方向:',
 	stationstandHasDoor: '是否显示屏蔽门:',
 	stationstandNameColon: '站台名称:',
@@ -341,6 +346,7 @@ export default {
 	delayUnlockPosition: '延迟解锁坐标:',
 	trainWindowPoints: '车次窗坐标:',
 	textPoints: '坐标:',
+	buttonText: '内容',
 
 	textCode: '文字编码:',
 	textContent: '文本内容:',

src/i18n/langs/zh/router.js

@@ -54,5 +54,7 @@ export default {
 	userTrainingManage: '用户实训管理',
 	userExamManage: '用户考试管理',
 	userSimulationManage: '用户仿真管理',
-	existingSimulation: '存在仿真管理'
+	existingSimulation: '存在仿真管理',
+
+	ibpDraw: 'Ibp盘绘制'
 };

src/i18n/langs/zh/rules.js

@@ -252,6 +252,9 @@ export default {
 
 	enterScale: '请输入缩放比例',
 	enterXOffset: '请输入X偏移',
-	enterYOffset: '请输入Y偏移'
+	enterYOffset: '请输入Y偏移',
+
+	pleaseSelectButtonType: '请选择按钮类型',
+	pleaseSelectButtonContent: '请输入内容'
 
 };

src/ibp/constant/deviceRender.js

@@ -2,8 +2,8 @@ import deviceType from './deviceType';
 
 const deviceRender = {};
 
-/** Text渲染配置*/
-deviceRender[deviceType.Text] = {
+/** IbpText渲染配置*/
+deviceRender[deviceType.IbpText] = {
 	zlevel: 1
 };
 

src/ibp/constant/deviceType.js

@@ -1,5 +1,5 @@
 const deviceType = {
-	Text: 'Text',
+	IbpText: 'IbpText',
 	SquareButton: 'SquareButton',
 	WarnButton: 'WarnButton',
 	Arrow: 'Arrow',

src/ibp/ibpPan.js

@@ -6,7 +6,7 @@ import MouseController from './mouseController';
 import Painter from './painter';
 import deviceState from '../jmap/constant/deviceState';
 import deviceType from './constant/deviceType';
-import {calculateDCenter, createBoundingRect, deviceFactory} from './utils/parser';
+import {calculateDCenter, createBoundingRect, modelFactory} from './utils/parser';
 
 const renderer = 'canvas';
 const devicePixelRatio = 1;
@@ -34,6 +34,8 @@ class IbpPan {
 		const height = opts.config.height;
 		this.$ibpZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
 		this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放
+		this.$mouseController = new MouseController(this);
+		this.$mouseController.enable();
 
 		this.$painter = new Painter(this);
 		this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()});
@@ -41,9 +43,6 @@ class IbpPan {
 
 		this.optionsHandler = this.setOptions.bind(this);
 
-		this.$mouseController = new MouseController(this);
-		this.$mouseController.enable();
-
 		this.$mouseController.on(this.events.__Pan, this.optionsHandler);
 		this.$mouseController.on(this.events.__Zoom, this.optionsHandler);
 
@@ -123,12 +122,12 @@ class IbpPan {
 	}
 
 	render(list) {
+		console.log('-*-*-*-*-', list);
 		(list || []).forEach(elem => {
 			const code = elem.code;
 			const type = elem._type;
-			const oDevice = this.ibpDevice[code] || deviceFactory(type, elem);
-			const nDevice = Object.assign(oDevice || {}, elem);
-			this.dataSync(nDevice);
+			const oDevice = this.ibpDevice[code] || {instance: null, event: null, model: modelFactory(type, elem)};
+			const nDevice = Object.assign(oDevice.model || {}, elem);
 			this.$painter.delete(oDevice);
 			if (!elem._dispose) {
 				this.ibpDevice[code] = nDevice;
@@ -140,7 +139,7 @@ class IbpPan {
 	}
 
 	// 中间处理
-	hookHandle(oDevice, elem) {
+	hookHandle(model, elem) {
 		const code = elem.code;
 		const type = elem._type;
 		// 如果是延时计时，需要保存计数值到全局
@@ -153,8 +152,8 @@ class IbpPan {
 			localStore(code, val);
 		}
 		for (var prop in elem) {
-			if (elem[prop] != oDevice[prop]) {
-				Object.assign(oDevice, elem);
+			if (elem[prop] != model[prop]) {
+				Object.assign(model, elem);
 				return true;
 			}
 		}
@@ -169,7 +168,7 @@ class IbpPan {
 			if (elem.dispose) {
 				this.$painter.delete(oDevice);
 			} else {
-				if (this.hookHandle(oDevice, elem)) {
+				if (this.hookHandle(oDevice.model, elem)) {
 					this.$painter.update(oDevice);
 				}
 			}
@@ -178,6 +177,12 @@ class IbpPan {
 		if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); }
 	}
 
+	drawIbpInit() {
+		(Object.keys(this.ibpDevice) || []).forEach(elem => {
+			this.$painter.drawIbp(this.ibpDevice[elem]);
+		});
+	}
+
 	pullBack(payload) {
 		if (payload.type === 'zoom') {
 			const zrWidth = this.$ibpZr.getWidth();
@@ -196,33 +201,6 @@ class IbpPan {
 		return payload || {};
 	}
 
-	dataSync(model) {
-		var prop = null;
-		var type = model._type;
-		var code = model.code;
-
-		switch (type) {
-		case deviceType.Link: prop = 'linkList'; break;
-		}
-
-		const list = this.data[prop] || [];
-		const idex = list.findIndex(elem => { return elem.code == code; });
-		if (list) {
-			if (model._dispose) {
-				idex >= 0 && list.splice(idex, 1);
-			} else {
-				const elem = list[idex];
-				if (elem) {
-					Object.keys(elem).forEach(key => {
-						elem[key] = model[key];
-					});
-				} else {
-					list.push(Object.assign({}, model));
-				}
-			}
-		}
-	}
-
 	getZr() {
 		return this.$ibpZr;
 	}
@@ -250,7 +228,6 @@ class IbpPan {
 	refresh() {
 		this.$painter.refresh();
 	}
-
 	clear() {
 		this.skinCode = '';
 		this.style = {};

src/ibp/painter.js

@@ -59,11 +59,12 @@ class Painter {
      * @param {*} device
      */
 	add(device) {
+		device = Object.assign(device, { event: this.$ibp.$mouseController });
 		const instance = shapefactory(device, this.$ibp);
 		if (instance) {
 			device.instance = instance;
 			this.$transformHandle.transformView(instance);
-			this.ibpInstanceLevel[device._type].add(instance);
+			this.ibpInstanceLevel[device.model._type].add(instance);
 		}
 	}
 
@@ -74,7 +75,7 @@ class Painter {
 	delete(device) {
 		const instance = device.instance;
 		if (instance) {
-			this.ibpInstanceLevel[device._type].remove(instance);
+			this.ibpInstanceLevel[device.model._type].remove(instance);
 		}
 	}
 
@@ -84,7 +85,7 @@ class Painter {
      */
 	update(device) {
 		if (device) {
-			if (device._dispose) {
+			if (device.model._dispose) {
 				this.delete(device);
 			} else {
 				const instance = device.instance;
@@ -95,6 +96,18 @@ class Painter {
 		}
 	}
 
+	/**
+     *  绘制ipb时，更改draggable 和注册事件
+     */
+	drawIbp(device) {
+		if (device) {
+			const instance = device.instance;
+			if (instance) {
+				instance.setDraggable();
+			}
+		}
+	}
+
 	/**
      * 更新transform变化
      * @param {*} opt

src/ibp/shape/alarm.js

@@ -0,0 +1,52 @@
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+import alarmpic from '@/assets/ibp_images/alarm.png';
+
+export default class alarm extends Group {
+
+	constructor(device) {
+		super();
+		this.model = device.model;
+		this.zlevel = device.model.zlevel;
+		this.create();
+	}
+
+	create() {
+		const model = this.model;
+		this.imageBg = new Image({
+			zlevel: this.zlevel,
+			draggable: model.draggable || false,
+			style: {
+				image: alarmpic,
+				x: model.point.x,
+				y: model.point.y,
+				width: 70,
+				height: 74
+			}
+		});
+		this.add(this.imageBg);
+	}
+
+	setDraggable() {
+		this.arrow.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();
+	}
+
+	mousemove(e) {
+	}
+
+	mouseup(e) {
+		this.event.enable();
+		this.model.point.x = this.model.point.x + e.offsetX;
+		this.model.point.y = this.model.point.y + e.offsetY;
+	}
+}

src/ibp/shape/arrow.js

@@ -1,22 +1,24 @@
 import Polygon from 'zrender/src/graphic/shape/Polygon';
 import Group from 'zrender/src/container/Group';
-import {arrow} from '../../jmap/shape/utils/ShapePoints';
+import {arrow} from '@/jmap/shape/utils/ShapePoints';
+// import { updateIbpData } from '@/ibp/utils/parser';
 
 class Arrow extends Group {
-	constructor(model) {
+	constructor(device) {
 		super();
-		this.model = model;
+		this.event = device.event;
+		this.model = device.model;
 		this.create();
 	}
 
 	create() {
 		const model = this.model;
-		const point = arrow(this.model.point.x, this.model.point.y, this.model.length, 10);
 		this.arrow = new Polygon({
 			zlevel: model.zlevel,
 			z: model.z,
+			draggable: model.draggable || false,
 			shape: {
-				points: point
+				points: arrow(this.model.point.x, this.model.point.y, this.model.length, 10)
 			},
 			style: {
 				stroke: model.stroke,
@@ -25,13 +27,55 @@ class Arrow extends Group {
 			}
 		});
 		this.add(this.arrow);
+		this.getOrientate();
+	}
+
+	getOrientate() {
+		switch (this.model.orientation) {
+		case 'left': {
+			this.transformRotation(0);
+			break;
+		}
+		case 'right': {
+			this.transformRotation(180);
+			break;
+		}
+		}
+	}
+
+	// 整体旋转箭头
+	transformRotation(rotate) {
+		this.arrow.origin = [this.model.point.x, this.model.point.y];
+		this.arrow.rotation = Math.PI / 180 * Number(rotate);
+		this.arrow.dirty();
 	}
 
 	// 箭头颜色
 	setColor(color) {
 		this.arrow.setStyle('fill', color);
 	}
-
+	setDraggable() {
+		this.arrow.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() {
+		this.event.disable();
+		console.log('鼠标按下');
+	}
+	mousemove() {
+		console.log('鼠标移动');
+	}
+	mouseup(e) {
+		this.event.enable();
+		this.model.point.x = this.model.point.x + e.offsetX;
+		this.model.point.y = this.model.point.y + e.offsetY;
+		console.log('鼠标抬起', this.model);
+	}
 }
 
 export default Arrow;

src/ibp/shape/background.js

@@ -4,10 +4,10 @@ import Rect from 'zrender/src/graphic/shape/Rect';
 import ibpBg from '@/assets/ibp_images/ibp_bg.png';
 
 export default class background extends Group {
-	constructor(model) {
+	constructor(device) {
 		super();
-		this.model = model;
-		this.zlevel = model.zlevel;
+		this.model = device.model;
+		this.zlevel = device.model.zlevel;
 		this.z = 1;
 		this.create();
 	}
@@ -47,4 +47,6 @@ export default class background extends Group {
 		this.tailorRect.setShape('x', x-opt.offsetX);
 		this.tailorRect.setShape('y', y-opt.offsetY);
 	}
+	setDraggable() {
+	}
 }

src/ibp/shape/button.js

@@ -1,163 +1,120 @@
 import Group from 'zrender/src/container/Group';
 import Image from 'zrender/src/graphic/Image';
-// import Eventful from 'zrender/src/mixin/Eventful';
-
-import * as eventTool from 'zrender/src/core/event';
-
-import buttonPic from '@/assets/ibp_images/red_button.png';
-import buttonPicOn from '@/assets/ibp_images/red_button_on.png';
+import redButtonPic from '@/assets/ibp_images/red_button.png';
+import redButtonPicOn from '@/assets/ibp_images/red_button_on.png';
+import greenButtonPicOn from '@/assets/ibp_images/green_button_on.png';
+import greenButtonPic from '@/assets/ibp_images/green_button.png';
+import blueButtonPic from '@/assets/ibp_images/blue_button.png';
+import blueButtonPicOn from '@/assets/ibp_images/blue_button_on.png';
+import yellowButtonPic from '@/assets/ibp_images/yellow_button.png';
+import yellowButtonPicOn from '@/assets/ibp_images/yellow_button_on.png';
+import grayButtonPic from '@/assets/ibp_images/gray_button.png';
+import grayButtonPicOn from '@/assets/ibp_images/gray_button_on.png';
 
 export default class button extends Group {
-	constructor(model) {
+	static colors = new Map([
+		['red_on', [redButtonPicOn]],
+		['red_off', [redButtonPic]],
+		['green_on', [greenButtonPicOn]],
+		['green_off', [greenButtonPic]],
+		['blue_on', [blueButtonPicOn]],
+		['blue_off', [blueButtonPic]],
+		['yellow_on', [yellowButtonPicOn]],
+		['yellow_off', [yellowButtonPic]],
+		['gray_on', [grayButtonPicOn]],
+		['gray_off', [grayButtonPic]]
+	]);
+	constructor(device) {
 		super();
-		this.model = model;
-		this.zlevel = model.zlevel;
-		this.z = model.z;
+		this.model = device.model;
+		this.zlevel = device.model.zlevel;
 		this.create();
-		this.createMouseEvent();
 	}
 	create() {
 		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			z: this.z,
+			draggable: model.draggable || false,
 			style: {
-				image: model.status === '01' ? buttonPic : buttonPicOn,
-				x: this.model.point.x,
-				y: this.model.point.y,
-				width: this.model.width,
-				height: this.model.height
+				image: this.getImagePic(),
+				x: model.point.x,
+				y: model.point.y,
+				width: 70,
+				height: 80
 			}
 		});
 		this.add(this.imageBg);
 	}
 
+	getImagePic() {
+		const color = button.colors.get(`${this.model.color}_${this.model.status}`);
+		return color[0];
+	}
+
+	setDraggable() {
+		this.arrow.attr('draggable', true);
+		this.createMouseEvent();
+	}
+	createMouseEvent() {
+		this.on('mousedown', this.mousedown, this);
+		this.on('mousemove', this.mousemove, this);
+		this.on('mouseup', this.mouseup, this);
+	}
+
 	// 设置按钮状态
 	setState(model) {
 		switch (model.status) {
-		case '01': this.close(); break; 				// 关闭
-		case '02': this.open(); break; 					// 开放
+		case 'on': {
+			// 关闭
+			this.close();
+			this.model.status='on';
+			break;
+		}
+		case 'off': {
+			// 开放
+			this.open();
+			this.model.status='off';
+			break;
+		}				
 		}
 	}
 
-	// 绑定按钮事件
-	createMouseEvent() {
-		this.model.isDraging=true;
-		if (this.model.isDraging) {
-			// 按钮拖拽事件监听
-			this.imageBg.on('mousedown', (e) => {
-				if (eventTool.notLeftMouse(e)) {
-					return;
-				}
-				eventTool.stop(e.event);
-				var x = e.offsetX;
-				var y = e.offsetY;
-				this._x = x;
-				this._y = y;
-				this._dragginger = true;
-			});
-			this.imageBg.on('mousemove', (e) => {
-				// !this._moveOnMouseMove ||
-				if (eventTool.notLeftMouse(e) || !this._dragginger) {
-					return;
-				}
-				// eventTool.stop(e.event);
-				const oldX = this._x;
-				const oldY = this._y;
-				const dx = e.offsetX - oldX;
-				const dy = e.offsetY - oldY;
-				this._x = e.offsetX;
-				this._y = e.offsetY;
-				debugger;
-				// this.imageBg.preventDefaultMouseMove && 
-				eventTool.stop(e.event);
-				// debugger;
-				this.imageBg.setStyle({x: oldX+dx, y: oldY+dy });
-			});
-
-			this.imageBg.on('mouseup', (e) => {
-				if (!eventTool.notLeftMouse(e)) {
-					this._dragginger = false;
-				}
-			});
-
-		} else {
-			// 按钮的点击监听
-			this.imageBg.on('click', (e) => {
-				switch (this.model.status) {
-				case '01': {
-					this.open();
-					this.model.status='02';
-					break;
-				}
-				case '02': {
-					this.close();
-					this.model.status='01';
-					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;
+			}
+			}
 		}
 	}
 
-// if (this.model.isDraging) {
-// 	// this.mouseEvent = new EMouse(this);
-// 	// this.add(this.mouseEvent);
-// 	this.imageBg.on('mousedown', (e) => { 
-// 		// debugger;
-// 		if (eventTool.notLeftMouse(e)) {
-// 			return;
-// 		}
-// 		var x = e.offsetX;
-// 		var y = e.offsetY;
-// 		this._x = x;
-// 		this._y = y;
-// 		this._dragging = true;
-// 	});
-// 	this.imageBg.on('mousemove', (e) => {
-// 		if (eventTool.notLeftMouse(e) || !this._moveOnMouseMove ||!this._dragging) {
-// 			return;
-// 		}
-// 		const oldX = this._x;
-// 		const oldY = this._y;
-// 		const dx = e.offsetX - oldX;
-// 		const dy = e.offsetY - oldY;
-// 		this._x = e.offsetX;
-// 		this._y = e.offsetY;
-// 		debugger;
-// 		this.imageBg.preventDefaultMouseMove && eventTool.stop(e.event);
-// 		debugger;
-// 		this.imageBg.setStyle({x: dx, y: dy});
-// 		// this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
-
-// 	});
-// 	this.on('mouseup', (e) => { });
-// }
-// else {
-// 	this.on('mousedown', (e) => { this.mouseEvent.mouseout(e); });
-// 	// this.on('mousemove', (e) => { this.mouseEvent.mouseover(e); });
-// 	this.on('mouseup', (e) => { this.mouseEvent.mouseover(e); });
-// }
-
+	mousedown(e) {
+		this.event.disable();
+	}
+	mousemove(e) {
+	}
+	mouseup(e) {
+		this.event.enable();
+		this.model.point.x = this.model.point.x + e.offsetX;
+		this.model.point.y = this.model.point.y + e.offsetY;
+	}
 	// 关闭
 	close() {
-		this.imageBg.setStyle({image: buttonPic});
+		const color = button.colors.get(`${this.model.color}_off`);
+		this.imageBg.setStyle({image: color[0]});
 	}
 	// 开放
 	open() {
-		this.imageBg.setStyle({image: buttonPicOn});
-	}
-
-	getShapeTipPoint() {
-		if (this.imageBg) {
-			var distance = 2;
-			var rect = this.imageBg.getBoundingRect();
-			return {
-				x: rect.x + rect.width / 2,
-				y: rect.y - distance
-			};
-		}
-		return null;
+		const color = button.colors.get(`${this.model.color}_on`);
+		this.imageBg.setStyle({image: color[0]});
 	}
 
 }

src/ibp/shape/circularLamp.js

@@ -1,13 +1,13 @@
 import Group from 'zrender/src/container/Group';
 import Circle from 'zrender/src/graphic/shape/Circle';
-import MouseController from '../mouseController';
 
 export default class CircularLamp extends Group {
-	constructor(model) {
+	constructor(device) {
 		super();
-		this.model = model;
-		this.zlevel = model.zlevel;
-		this.z = model.z;
+		this.model = device.model;
+		this.event = device.event;
+		this.zlevel = device.model.zlevel;
+		this.z = device.model.z;
 		this.create();
 	}
 
@@ -15,6 +15,7 @@ export default class CircularLamp extends Group {
 		this.lamp = new Circle({
 			zlevel: this.zlevel,
 			z: this.z,
+			draggable: this.model.draggable||false,
 			shape: {
 				cx: this.model.point.x,
 				cy: this.model.point.y,
@@ -30,4 +31,24 @@ export default class CircularLamp extends Group {
 	setCircularLampColor(color) {
 		this.lamp.setStyle('fill', color);
 	}
+	setDraggable() {
+		this.lamp.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() {
+		this.event.disable();
+		console.log('鼠标按下');
+	}
+	mousemove() {
+		console.log('鼠标移动');
+	}
+	mouseup() {
+		this.event.enable();
+		console.log('鼠标抬起');
+	}
 }

src/ibp/shape/element/textName.js

@@ -1,25 +0,0 @@
-// import Group from 'zrender/src/container/Group';
-import Text from 'zrender/src/graphic/Text';
-
-/** 名称元素*/
-export default function ETextName(model) {
-	const TextName = new Text({
-		zlevel: model.zlevel,
-		z: model.z,
-		silent: model.silent || false,
-		style: {
-			x: model.x,
-			y: model.y,
-			fontWeight: model.fontWeight,
-			fontSize: model.fontSize,
-			fontFamily: model.fontFamily,
-			text: model.text,
-			textStrokeWidth: model.textStrokeWidth,
-			textFill: model.textFill,
-			textAlign: model.textAlign,
-			textPosition: model.textPosition || 'inside',
-			textVerticalAlign: model.textVerticalAlign || null
-		}
-	});
-	return TextName;
-}

src/ibp/shape/factory.js

@@ -1,15 +1,17 @@
 import Arrow from './arrow';
 import deviceType from '../constant/deviceType';
 import Background from './background';
-import CircularLamp from './circularLamp'
+import CircularLamp from './circularLamp';
+import IbpText from './ibpText';
 
 const ibpShape = {};
 ibpShape[deviceType.Arrow] = Arrow;
 ibpShape[deviceType.Background] = Background;
 ibpShape[deviceType.CircularLamp] = CircularLamp;
+ibpShape[deviceType.IbpText] = IbpText;
 
 function shapefactory(device, ibp) {
-	const type = device._type;
+	const type = device.model._type;
 	const shape = ibpShape[type];
 	if (shape instanceof Function) {
 		// eslint-disable-next-line

src/ibp/shape/ibpText.js

@@ -0,0 +1,60 @@
+import Group from 'zrender/src/container/Group';
+import Text from 'zrender/src/graphic/Text';
+import { updateIbpData } from '@/ibp/utils/parser';
+
+export default class button extends Group {
+	constructor(device) {
+		super();
+		this.model = device.model;
+		this.event = device.event;
+		this.zlevel = device.model.zlevel;
+		this.z = device.model.z;
+		this.create();
+	}
+	create() {
+		const model = this.model;
+		this.textName = new Text({
+			zlevel: model.zlevel,
+			z: model.z,
+			silent: model.silent || false,
+			draggable: model.draggable || false,
+			style: {
+				x: model.x,
+				y: model.y,
+				fontWeight: model.fontWeight,
+				fontSize: model.fontSize,
+				fontFamily: model.fontFamily,
+				text: model.context,
+				textStrokeWidth: model.textStrokeWidth,
+				textFill: model.textFill,
+				textAlign: model.textAlign,
+				textPosition: model.textPosition || 'inside',
+				textVerticalAlign: model.textVerticalAlign || null
+			}
+		});
+		this.add(this.textName);
+	}
+	setDraggable() {
+		this.textName.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() {
+		this.event.disable();
+		console.log('鼠标按下');
+	}
+	mousemove() {
+		console.log('鼠标移动');
+	}
+	mouseup(e) {
+		this.event.enable();
+		this.model.x = this.model.x + e.offsetX;
+		this.model.y = this.model.y + e.offsetY;
+		console.log('鼠标抬起', this.model);
+		updateIbpData(this.model, 'update');
+	}
+}

src/ibp/shape/rotateTip.js

@@ -0,0 +1,68 @@
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+import rotateBlack from '@/assets/ibp_images/rotate_black.png';
+import rotateRed from '@/assets/ibp_images/rotate_red.png';
+
+export default class rotateTip extends Group {
+
+	constructor(device) {
+		super();
+		this.model = device.model;
+		this.zlevel = device.model.zlevel;
+		this.create();
+	}
+
+	create() {
+		const model = this.model;
+		this.imageBg = new Image({
+			zlevel: this.zlevel,
+			draggable: model.draggable || false,
+			style: {
+				image: this.getRotateColor(),
+				x: model.point.x,
+				y: model.point.y,
+				width: 70,
+				height: 74
+			}
+		});
+		this.add(this.imageBg);
+	}
+    
+	getRotateColor() {
+		if (this.model.color) {
+			switch (this.model.color) {
+			case 'black': {
+				return rotateBlack;
+			}
+			case 'red': {
+				return rotateRed;
+			}
+			}
+		} else {
+			return rotateBlack;
+		}
+	}
+
+	setDraggable() {
+		this.arrow.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();
+	}
+
+	mousemove(e) {
+	}
+
+	mouseup(e) {
+		this.event.enable();
+		this.model.point.x = this.model.point.x + e.offsetX;
+		this.model.point.y = this.model.point.y + e.offsetY;
+	}
+}

src/ibp/utils/parser.js

@@ -28,13 +28,13 @@ export function calculateDCenter(viewRect, zrbound) {
 	return { dx: dx, dy: dy };
 }
 
-export function deviceFactory(type, elem) {
-	return Object.assign({ _type: type }, deviceRender[type], elem);
+export function modelFactory(type, elem) {
+	return Object.assign(elem, { _type: type }, deviceRender[type]);
 }
 
-export function createDevice(type, model, propConvert) {
-	const device = deviceFactory(type, model);
-	return propConvert ? propConvert.initPrivateProps(device) : device;
+export function createModel(type, model, propConvert) {
+	const tempModel = modelFactory(type, model);
+	return { instance: null, event: null, model: propConvert ? propConvert.initPrivateProps(tempModel) : tempModel };
 }
 
 export function parser(data, config) {
@@ -44,33 +44,33 @@ export function parser(data, config) {
 	if (data) {
 
 		Object.assign(data.background, config);
-		ibpDevice[data.background.code] = createDevice(deviceType.Background, data.background, propConvert);
+		ibpDevice[data.background.code] = createModel(deviceType.Background, data.background, propConvert);
 		zrUtil.each(data.textList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.Text, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.IbpText, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.squareButtonList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.SquareButton, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.SquareButton, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.circularLampList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.CircularLamp, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.CircularLamp, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.warnButtonList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.WarnButton, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.WarnButton, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.arrowList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.Arrow, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.rotatingButtonList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.RotatingButton, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.RotatingButton, elem, propConvert);
 		}, this);
 
 		zrUtil.each(data.tipList || [], elem => {
-			ibpDevice[elem.code] = createDevice(deviceType.Tip, elem, propConvert);
+			ibpDevice[elem.code] = createModel(deviceType.Tip, elem, propConvert);
 		}, this);
 	}
 

src/jmap/config/skinCode/bejing_01.js

@@ -272,7 +272,7 @@ class SkinCode extends defaultStyle {
 				emergencyControlShow: true,							// 紧急站控显示
 				centerControlShow: true,							// 中控显示
 				substationControlShow: true,						// 站控按钮显示
-				turnedAroundControlShow: false						// 按图折返显示
+				interconnectedControlShow: false					// 联锁控显示
 			},
 			arrow: {
 				show: false											// 控制模式箭头显隐

src/jmap/config/skinCode/chengdu_03.js

@@ -276,7 +276,7 @@ class SkinCode extends defaultStyle {
 				emergencyControlShow: true,				// 紧急站控显示
 				centerControlShow: true,					// 中控显示
 				substationControlShow: true,				// 站控按钮显示
-				turnedAroundControlShow: true				// 按图折返显示
+				interconnectedControlShow: true				// 联锁控显示
 			},
 			arrow: {
 				show: false									// 控制模式箭头显隐
@@ -374,6 +374,18 @@ class SkinCode extends defaultStyle {
 			}
 		};
 
+		this[deviceType.ButtonControl] = {
+			text: {
+				fontSize: 11,								// 字体大小
+				fontWeight: 'normal',						// 字体粗细
+				distance: 5 								// 灯跟文字距离
+			},
+			lamp: {
+				radiusR: 6,									// 控制灯大小
+				controlColor: '#FFFF00'						// 控制灯颜色
+			}
+		};
+
 		this[deviceType.Line] = {
 			lineColor: '#FFFFFF'							// 线条颜色
 		};

src/jmap/config/skinCode/chengdu_04.js

@@ -273,7 +273,7 @@ class SkinCode extends defaultStyle {
 				emergencyControlShow: true,					// 紧急站控显示
 				centerControlShow: true,						// 中控显示
 				substationControlShow: true,					// 站控按钮显示
-				turnedAroundControlShow: false					// 按图折返显示
+				interconnectedControlShow: false				// 联锁控显示
 			},
 			arrow: {
 				show: false									// 控制模式箭头显隐

src/jmap/config/skinCode/fuzhou_01.js

@@ -255,7 +255,7 @@ class SkinCode extends defaultStyle {
 				emergencyControlShow: false,					// 紧急站控显示
 				centerControlShow: true,						// 中控显示
 				substationControlShow: true,					// 站控按钮显示
-				turnedAroundControlShow: false					// 按图折返显示
+				interconnectedControlShow: false				// 联锁控显示
 			},
 			arrow: {
 				show: true		 								// 控制模式箭头显隐

src/jmap/constant/deviceType.js

@@ -11,6 +11,7 @@ const deviceType = {
 	StationStand: 'StationStand',
 	StationControl: 'StationControl',
 	StationCounter: 'StationCounter',
+	ButtonControl: 'ButtonControl',
 	StationDelayUnlock: 'StationDelayUnlock',
 	Train: 'Train',
 	TrainWindow: 'TrainWindow',

src/jmap/map.js

@@ -292,6 +292,7 @@ class Jlmap {
 		case deviceType.ZcControl: prop = 'zcControlList'; break;
 		case deviceType.StationDelayUnlock: prop = 'stationDelayUnlockList'; break;
 		case deviceType.LcControl: prop = 'lcControlList'; break;
+		case deviceType.ButtonControl: prop = 'buttonList'; break;
 		case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break;
 		case deviceType.ImageControl: prop = 'imageControl'; break;
 		case deviceType.Train: prop = 'trainList'; break;

src/jmap/shape/ButtonControl/index.js

@@ -0,0 +1,67 @@
+/*
+*	lC区域控制模式
+*/
+import Group from 'zrender/src/container/Group';
+import EControl from '../element/EControl';
+
+export default class ButtonControl extends Group {
+	constructor(model, style) {
+		super();
+		this.z = 20;
+		this._code = model.code;
+		this._type = model._type;
+		this.zlevel = 10;
+		this.model = model;
+		this.style = style;
+		this.create();
+		this.setState(model);
+	}
+
+	create() {
+		const model = this.model;
+		this.control = new EControl({
+			zlevel: this.zlevel,
+			z: this.z,
+			arc: {
+				shape: {
+					cx: model.position.x,
+					cy: model.position.y,
+					r: this.style.ButtonControl.lamp.radiusR
+				},
+				lineWidth: 0,
+				fill: this.style.ButtonControl.lamp.controlColor
+			},
+			text: {
+				position: [0, 0],
+				x: model.position.x,
+				y: model.position.y + this.style.ButtonControl.lamp.radiusR + this.style.ButtonControl.text.distance,
+				fontWeight: this.style.ButtonControl.text.fontWeight,
+				fontSize: this.style.ButtonControl.text.fontSize,
+				fontFamily: this.style.fontFamily,
+				text: model.text || '按图折返',
+				textFill: '#fff',
+				textAlign: 'middle',
+				textVerticalAlign: 'top'
+			},
+			style: this.style
+		});
+
+		this.add(this.control);
+	}
+
+	// 设置状态
+	setState(model) {
+	}
+
+	getShapeTipPoint() {
+		if (this.control) {
+			var distance = 2;
+			var rect = this.control.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+}

src/jmap/shape/StationControl/index.js

@@ -73,10 +73,10 @@ export default class StationControl extends Group {
 			});
 			this.add(this.substationControl);
 		}
-		// 按图折返
-		if (this.style.StationControl.lamp.turnedAroundControlShow) {
-			this.turnedAroundControl = new ESingleControl({
-				_subType: 'turnedAround',
+		// 联锁控
+		if (this.style.StationControl.lamp.interconnectedControlShow) {
+			this.interconnectedControl = new ESingleControl({
+				_subType: 'interconnected',
 				style: this.style,
 				zlevel: this.zlevel,
 				z: this.z,
@@ -84,10 +84,10 @@ export default class StationControl extends Group {
 					x: model.position.x + this.style.StationControl.lamp.distance * 3 / 2 + this.style.StationControl.lamp.offset.x,
 					y: model.position.y + this.style.StationControl.lamp.offset.y
 				},
-				context: '按图折返',
+				context: model.lskContent || '联锁控',
 				pop: false
 			});
-			this.add(this.turnedAroundControl);
+			this.add(this.interconnectedControl);
 		}
 		// 箭头
 		if (this.style.StationControl.arrow.show) {

src/jmap/shape/factory.js

@@ -9,6 +9,7 @@ import LcControl from './LcControl/index.js';
 import LimitControl from './LimitControl/index.js';
 import Switch from './Switch/index.js';
 import ZcControl from './ZcControl/index.js';
+import ButtonControl from './ButtonControl/index.js';
 import StationCounter from './StationCounter/index.js';
 import StationDelayUnlock from './StationDelayUnlock/index.js';
 import StationStand from './StationStand/index.js';
@@ -29,6 +30,7 @@ mapShape[deviceType.LcControl] = LcControl;
 mapShape[deviceType.LimitControl] = LimitControl;
 mapShape[deviceType.Switch] = Switch;
 mapShape[deviceType.ZcControl] = ZcControl;
+mapShape[deviceType.ButtonControl] = ButtonControl;
 mapShape[deviceType.StationCounter] = StationCounter;
 mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock;
 mapShape[deviceType.StationStand] = StationStand;

src/jmap/utils/parser.js

@@ -86,6 +86,10 @@ export function parser(data, skinCode) {
 			mapDevice[elem.code] = createDevice(deviceType.ZcControl, elem, propConvert);
 		}, this);
 
+		zrUtil.each(data.buttonList || [], elem => {
+			mapDevice[elem.code] = createDevice(deviceType.ButtonControl, elem, propConvert);
+		}, this);
+
 		zrUtil.each(data.lcList || [], elem => {
 			mapDevice[elem.code] = createDevice(deviceType.LcControl, elem, propConvert);
 		}, this);

src/router/index.js

@@ -84,6 +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 IbpEdit from '@/views/ibp/ibpDraft/ibpEdit/index';
 
 import Commodity from '@/views/orderauthor/commodity/index';
 import CommodityDraft from '@/views/orderauthor/commodity/draft';
@@ -216,6 +218,11 @@ export const UrlConfig = {
 		prefix: '/script',
 		detail: '/script/detail',
 		display: '/script/display'
+	},
+	ibp: {
+		prefix: 'ibp',
+		draft: '/ibp/draft',
+		edit: 'ibp/edit'
 	}
 };
 
@@ -375,6 +382,13 @@ export const asyncRouter = [
 					}
 				]
 			},
+			// {
+			// 	path: 'ibp/edit',
+			// 	component: IbpEdit,
+			// 	meta: {
+			// 		i18n: 'router.ibpDraw'
+			// 	}
+			// },
 			{
 				path: 'runPlan',
 				redirect: '/map/runPlan/view/draft',

src/store/index.js

@@ -13,6 +13,7 @@ import exam from './modules/exam';
 import runPlan from './modules/runplan';
 import socket from './modules/socket';
 import scriptRecord from './modules/scriptRecord';
+import ibp from './modules/ibp';
 
 import getters from './getters';
 
@@ -32,7 +33,8 @@ const store = new Vuex.Store({
 		exam,
 		runPlan,
 		socket,
-		scriptRecord
+		scriptRecord,
+		ibp
 	},
 	getters
 });

src/store/modules/ibp.js

@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import { parser } from '@/ibp/utils/parser';
+
+/**
+ * ibp状态数据
+ */
+const ibp = {
+	namespaced: true,
+
+	state: {
+		ibp: null, 				// 数据
+		ibpDevice: {},			// 解析后的地图数据
+		ibpList: {}, 			// 数据列表
+		ibpIdList: {}			// 数据列表(以id为标识)
+	},
+
+	getters: {
+		ibpList: (state) => {
+			return state.ibpList;
+		},
+		ibp: (state) => {
+			return state.ibp;
+		},
+		version: (state) => {
+			if (state.ibp) {
+				return state.ibp.version;
+			} else {
+				return null;
+			}
+		}
+	},
+
+	mutations: {
+		ibpRender: (state, devices) => {
+			Vue.prototype.$ibp && Vue.prototype.$ibp.render(devices);
+		},
+		setIbpData: (state, ibp) => {
+			state.ibp = ibp;
+		}
+	},
+
+	actions: {
+		setIbpData: ({ commit }, map) => {
+			commit('setIbpData', map);
+		},
+		updateIbpDevices: ({ commit }, models) => {
+			return new Promise((resolve) => {
+				if (!(models instanceof Array)) {
+					models = [models];
+				}
+				commit('ibpRender', models);
+				resolve(models);
+			});
+		}
+
+	}
+};
+
+export default ibp;

src/store/modules/map.js

@@ -248,6 +248,13 @@ const map = {
 				return [];
 			}
 		},
+		buttonList: (state) => {
+			if (state.map) {
+				return state.map.buttonList;
+			} else {
+				return [];
+			}
+		},
 		signalList: (state) => {
 			if (state.map) {
 				return state.map.signalList;

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 = 'http://192.168.9.255:9000'; // 袁琪
+		// BASE_API = 'https://test.joylink.club/jlcloud';
+		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/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="报警器宽度">
+                <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>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ButtonDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    alarmWidth: '',
+                    alarmHeight: ''
+                },
+                rules: {
+                    alarmWidth: [
+                        { required: true, message: '请输入报警器宽度', trigger: 'blur' },
+                    ],
+                    alarmHeight: [
+                        { required: true, message: '请输入报警器高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const alarmModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    _type: 'SquareButton',
+                    width: this.form .alarmWidth,
+                    height: this.form.alarmHeight
+                };
+                this.$emit('createButton', alarmModel)
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="扶梯框宽度">
+                <el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="扶梯框高度">
+                <el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'AppendageBoxDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    appendageBoxWidth: '',
+                    appendageBoxHeight: ''
+                },
+                rules: {
+                    appendageBoxWidth: [
+                        { required: true, message: '请输入扶梯框宽度', trigger: 'blur' },
+                    ],
+                    appendageBoxHeight: [
+                        { required: true, message: '请输入扶梯框高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const appendageBoxModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    _type: 'AppendageBox',
+                    width: this.form .appendageBoxWidth,
+                    height: this.form.appendageBoxHeight
+                };
+                this.$emit('createAppendageBox', appendageBoxModel)
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="箭头方向">
+                <el-select v-model="form.arrowDirection" placeholder="请选择箭头方向">
+                    <el-option label="向上" value="redButton"></el-option>
+                    <el-option label="向下" value="yellowButton"></el-option>
+                    <el-option label="向左" value="greenButton"></el-option>
+                    <el-option label="向右" value="greenButton"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="箭头长度">
+                <el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="箭头宽度">
+                <el-input-number v-model="form.arrowHeight" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ButtonDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    arrowDirection: '',
+                    arrowWidth: '',
+                    arrowHeight: ''
+                },
+                rules: {
+                    arrowDirection: [
+                        { required: true, message: '请选择箭头方向', trigger: 'change'}
+                    ],
+                    arrowWidth: [
+                        { required: true, message: '请输入箭头长度', trigger: 'blur' },
+                    ],
+                    arrowHeight: [
+                        { required: true, message: '请输入箭头线宽', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const arrowModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    _type: 'Arrow',
+                    colorType: this.form.buttonColor,
+                    width: this.form .arrowWidth,
+                    height: this.form.arrowHeight
+                };
+                this.$emit('createButton', arrowModel)
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="背景板宽度">
+                <el-input-number v-model="form.bgWidth" controls-position="right" :min="1" ></el-input-number>
+            </el-form-item>
+            <el-form-item label="背景板高度">
+                <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>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: 'BgDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    bgWidth: '',
+                    bgHeight: ''
+                },
+                rules: {
+                    bgWidth: [
+                        { required: true, message: '请输入背景板宽度', trigger: 'blur' },
+                    ],
+                    bgHeight: [
+                        { required: true, message: '请输入背景板高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const bgModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 0,
+                    y: 0,
+                    _type: 'Background',
+                    width: this.form .bgWidth,
+                    height: this.form.bgHeight
+                };
+                this.$emit('createBg', bgModel)
+            }
+        }
+    };
+</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/ibpButton.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="按钮颜色">
+                <el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
+                    <el-option label="红色按钮" value="redButton"></el-option>
+                    <el-option label="黄色按钮" value="yellowButton"></el-option>
+                    <el-option label="绿色按钮" value="greenButton"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="按钮宽度">
+                <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>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ButtonDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    buttonColor: '',
+                    buttonWidth: '',
+                    buttonHeight: ''
+                },
+                rules: {
+                    buttonColor: [
+                        { required: true, message: '请选择按钮颜色', trigger: 'change'}
+                    ],
+                    buttonWidth: [
+                        { required: true, message: '请输入按钮宽度', trigger: 'blur' },
+                    ],
+                    buttonHeight: [
+                        { required: true, message: '请输入按钮高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const buttonModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    _type: 'SquareButton',
+                    colorType: this.form.buttonColor,
+                    width: this.form .bgWidth,
+                    height: this.form.bgHeight
+                };
+                this.$emit('createButton', buttonModel)
+            }
+        }
+    };
+</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/ibpCLamp.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="圆形指示灯半径">
+                <el-input-number v-model="form.r" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="圆形指示灯关闭颜色">
+                <el-input-number v-model="form.offColor" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="圆形指示灯打开颜色">
+                <el-input-number v-model="form.onColor" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ButtonDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    r: '',
+                    offColor: '',
+                    onColor: ''
+                },
+                rules: {
+                    r: [
+                        { required: true, message: '请输入圆形指示灯半径', trigger: 'change'}
+                    ],
+                    offColor: [
+                        { required: true, message: '请输入圆形指示灯关闭颜色', trigger: 'blur' },
+                    ],
+                    onColor: [
+                        { required: true, message: '请输入圆形指示灯打开颜色', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const lampModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    _type: 'CircularLamp',
+                    r: this.form.r,
+                    offColor: this.form.offColor,
+                    onColor: this.form.onColor
+                };
+                this.$emit('createLamp', lampModel)
+            }
+        }
+    };
+</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

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="旋转按钮宽度">
+                <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>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'RotatingButtonDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    rotatingButtonWidth: '',
+                    rotatingButtonHeight: ''
+                },
+                rules: {
+                    rotatingButtonWidth: [
+                        { required: true, message: '请输入旋转按钮宽度', trigger: 'blur' },
+                    ],
+                    rotatingButtonHeight: [
+                        { required: true, message: '请输入旋转按钮高度', trigger: 'blur' },
+                    ]
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const rotatingButtonModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    _type: 'RotatingButton',
+                    width: this.form .rotatingButtonWidth,
+                    height: this.form.rotatingButtonHeight
+                };
+                this.$emit('createAppendageBox', rotatingButtonModel)
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+    <div>
+       <el-form ref="form" :model="form" label-width="80px">
+           <el-form-item label="文字编号">
+               <el-input v-model="form.code"></el-input>
+           </el-form-item>
+           <el-form-item label="文字内容">
+               <el-input type="textarea" v-model="form.context"></el-input>
+           </el-form-item>
+           <el-form-item label="文字颜色">
+               <el-input v-model="form.textFill"></el-input>
+           </el-form-item>
+           <el-form-item label="文字大小">
+               <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-switch v-model="form.fontWeight"></el-switch>
+           </el-form-item>
+           <el-form-item>
+               <el-button type="primary" @click="onSubmit">立即创建</el-button>
+               <el-button>取消</el-button>
+           </el-form-item>
+       </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'TextDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    code: '',
+                    context: '',
+                    textFill: '',
+                    fontSize: '',
+                    fontWeight: false
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入文字编号', trigger: 'blur' },
+                    ],
+                    context: [
+                        { required: true, message: '请输入文字内容', trigger: 'blur' },
+                    ],
+                    textFill: [
+                        { required: true, message: '请输入文字颜色', trigger: 'blur' },
+                    ],
+                    fontSize: [
+                        { required: true, message: '请输入文字大小', trigger: 'blur' },
+                    ],
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const textModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    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)
+            }
+        }
+    };
+</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/ibpTip.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="文字编号">
+                <el-input v-model="form.code"></el-input>
+            </el-form-item>
+            <el-form-item label="文字内容">
+                <el-input v-model="form.context"></el-input>
+            </el-form-item>
+            <el-form-item label="文字颜色">
+                <el-input v-model="form.textFill"></el-input>
+            </el-form-item>
+            <el-form-item label="文字大小">
+                <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-switch v-model="form.fontWeight"></el-switch>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: 'TextDraft',
+        components: {
+        },
+        data() {
+            return {
+                form: {
+                    code: '',
+                    context: '',
+                    textFill: '',
+                    fontSize: '',
+                    fontWeight: false
+                },
+                rules: {
+                    code: [
+                        { required: true, message: '请输入文字编号', trigger: 'blur' },
+                    ],
+                    context: [
+                        { required: true, message: '请输入文字内容', trigger: 'blur' },
+                    ],
+                    textFill: [
+                        { required: true, message: '请输入文字颜色', trigger: 'blur' },
+                    ],
+                    fontSize: [
+                        { required: true, message: '请输入文字大小', trigger: 'blur' },
+                    ],
+                }
+            };
+        },
+        computed: {
+
+        },
+        watch: {
+
+        },
+        mounted() {
+        },
+        methods: {
+            onSubmit() {
+                const textModel = {
+                    zlevel: 1,
+                    z: 1,
+                    x: 10,
+                    y: 10,
+                    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)
+            }
+        }
+    };
+</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/index.vue

@@ -0,0 +1,104 @@
+<template>
+    <transition name="el-zoom-in-center">
+        <div class="map-control">
+            <el-card type="border-card">
+                <div slot="header" class="clearfix">
+          <span>
+            车站名称
+            <b>请选择车站</b>
+          </span>
+                    <el-button
+                        type="text"
+                        style="float: right; padding: 3px 0; margin-right: 5px;"
+                        @click="handleSave"
+                    >保存</el-button>
+                </div>
+                <el-tabs v-model="enabledTab" class="mapEdit" type="card">
+                    <el-tab-pane label="背景板" name="BgImage">
+                        <ibp-bg
+                            @createBg="createDataModel"
+                        ></ibp-bg>
+                    </el-tab-pane>
+                    <el-tab-pane label="文字" name="Text">
+                        <ibp-text
+                            @createText="createDataModel"
+                        >
+                        </ibp-text>
+                    </el-tab-pane>
+                    <el-tab-pane label="功能提示" name="Tip">
+                        <ibp-tip
+                            @createTip="createDataModel"
+                        ></ibp-tip>
+                    </el-tab-pane>
+                    <el-tab-pane label="按键" name="Button">
+                        <ibp-button
+                            @createButton="createDataModel"
+                        >
+                        </ibp-button>
+                    </el-tab-pane>
+                    <el-tab-pane label="圆形指示灯" name="CircularLamp">
+
+                    </el-tab-pane>
+                    <el-tab-pane label="箭头" name="Arrow">
+
+                    </el-tab-pane>
+                    <el-tab-pane label="扶梯框" name="AppendageBox">
+
+                    </el-tab-pane>
+                    <el-tab-pane label="报警器" name="Alarm">
+
+                    </el-tab-pane>
+                    <el-tab-pane label="旋转按钮" name="SpinButton">
+
+                    </el-tab-pane>
+                </el-tabs>
+            </el-card>
+        </div>
+    </transition>
+</template>
+<script>
+    import { checkLoginLine } from '@/api/login';
+    import { updateIbpData } from '@/ibp/utils/parser';
+    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+    import { EventBus } from '@/scripts/event-bus';
+    import IbpText from './ibpText';
+    import IbpTip from './ibpTip';
+    import IbpButton from './ibpButton';
+    import IbpBg from './ibpBg';
+
+    export default {
+        name: 'IbpOperate',
+        components: {
+            IbpText,
+            IbpBg,
+            IbpButton,
+            IbpTip
+        },
+        mixins: [
+
+        ],
+        data() {
+            return {
+                enabledTab: 'BgImage',
+            };
+        },
+        watch: {
+
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+
+        },
+        methods: {
+            createDataModel(textModel) {
+                this.$store.dispatch('ibp/updateIbpDevices', textModel);
+                updateIbpData(textModel,'update')
+            },
+            handleSave() {
+                console.log(this.$store.state.ibp.ibp);
+            }
+        }
+    };
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+    <transition name="el-zoom-in-center">
+        <div class="mapPaint">
+            <div class="map-view">
+                <ibp-plate ref="ibpPlate"/>
+            </div>
+            <div class="map-draft">
+                <ibp-operate  ref="ibpOperate"></ibp-operate>
+            </div>
+        </div>
+    </transition>
+</template>
+<script>
+    import { checkLoginLine } from '@/api/login';
+    import IbpPlate from '@/views/ibp/index';
+    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+    import { EventBus } from '@/scripts/event-bus';
+    import IbpOperate from './ibpOperate/index';
+
+    export default {
+        name: 'MapView',
+        components: {
+            IbpPlate,
+            IbpOperate
+        },
+        mixins: [
+            WindowResizeHandler
+        ],
+        data() {
+            return {
+                mapSaveing: false,
+                viewDraft: 'draft',
+                autoSaveTask: null,
+                selected: null,
+                mapInfo: { name: "" },
+                timeDemon: null
+            };
+        },
+        watch: {
+
+        },
+        mounted() {
+            this.$refs.ibpPlate.show();
+            this.$refs.ibpPlate.drawIbpInit();
+        },
+        beforeDestroy() {
+
+        },
+        methods: {
+            resizeHandler() {
+                this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
+                this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
+                const width = this._clientWidth - 521;
+                const height = this._clientHeight;
+                this.$store.dispatch('config/resize', { width: width, height: height });
+            },
+            endViewLoading(isSuccess) {
+
+            },
+            selectViewDraft(data) {
+                this.viewDraft = data;
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .map-draft{
+    /deep/{
+    .v-modal{
+        opacity: 0;
+    }
+    }
+    }
+
+    .map-view {
+        float: left;
+        width: 60%;
+    }
+
+    .map-draft {
+        float: right;
+        width: 520px;
+
+    // /deep/ .el-scrollbar__view {
+       // width: 510px !important;
+       // height: calc(100% - 40px);
+       // }
+    }
+
+    .physical-view {
+        line-height: 25px;
+        height: 60px;
+        padding-left: 12px;
+
+    .el-checkbox {
+        width: 70px;
+        margin: 0;
+        margin-right: 12px;
+    }
+    }
+</style>

src/views/ibp/ibpDraft/index.vue

@@ -0,0 +1,72 @@
+<template>
+    <div id="mapMain" class="ibpDraft">
+        <div class="map-list" :style="{width: widthLeft+'px'}">
+            <span>车站列表</span>
+        </div>
+        <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
+        <transition>
+            <router-view />
+        </transition>
+    </div>
+</template>
+<script>
+    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+    import localStore from 'storejs';
+    import IbpPlate from '@/views/ibp/index';
+    import DrapLeft from '@/views/components/drapLeft/index';
+
+    export default {
+        name: 'IbpDraft',
+        components: {
+            IbpPlate,
+            DrapLeft
+        },
+        mixins: [
+            WindowResizeHandler
+        ],
+        data() {
+            return {
+                widthLeft: 320
+            };
+        },
+        watch: {
+            widthLeft(val) {
+                this.setMapResize(val);
+            }
+        },
+        mounted() {
+            // this.$refs.ibpPlate.show();
+            this.resizeHandler();
+        },
+        methods: {
+            drapWidth(width) {
+                this.widthLeft = Number(width);
+            },
+            resizeHandler() {
+                this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
+                this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
+                this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
+                const width = this._clientWidth - 521 - this.widthLeft;
+                const height = this._clientHeight - 90;
+                this.$store.dispatch('config/resize', { width: width, height: height });
+            },
+            setMapResize(LeftWidth) {
+                const widths = this._clientWidth - 521 - LeftWidth;
+                const heights = this._clientHeight - 90;
+                this.$store.dispatch('config/resize', { width: widths, height: heights });
+            }
+        }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .ibpDraft {
+        overflow: hidden;
+
+    .map-list {
+        float: left;
+        height: 100%;
+    }
+    }
+</style>

src/views/ibp/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div :id="ibpId" :style="{ width: '100%', height: '100%' }" class="ibp-canvas"></div>
-        <el-button class="ibp-button" type="primary" @click="back">返回</el-button>
+        <el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">返回</el-button>
     </div>
 </template>
 
@@ -20,6 +20,8 @@ export default {
     },
     data() {
         return {
+            width: this.$store.state.config.width,
+            height: this.$store.state.config.height,
             dataZoom: {
                 offsetX: '0',
                 offsetY: '0',
@@ -31,7 +33,8 @@ export default {
                     x: 0,
                     y: 0
                 }
-            }
+            },
+            showBackButton: true
         };
     },
     computed: {
@@ -58,12 +61,19 @@ export default {
         }
     },
     methods: {
+        resizeHandler() {
+            this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
+            this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
+            const width = this._clientWidth - 521;
+            const height = this._clientHeight - 60;
+            this.$store.dispatch('config/resize', { width: width, height: height });
+        },
         show: function () {
             document.getElementById(this.ibpId).oncontextmenu = function (e) {
                 return false;
             };
+
             const data = parser(ibpData,{width: this.canvasWidth, height: this.canvasHeight});
-            console.log('=================', data);
             this.$ibp = new IbpPan({
                 dom: document.getElementById(this.ibpId),
                 config: {
@@ -82,8 +92,9 @@ export default {
                     stateLoaded: this.handleStateLoaded
                 }
             });
+            Vue.prototype.$ibp = this.$ibp;
             this.setMap(data);
-            console.log('+++++++++',this.$ibp);
+            this.$store.dispatch('ibp/setIbpData', ibpData);
             window.document.oncontextmenu = function () {
                 return false;
             };
@@ -102,23 +113,7 @@ export default {
         back() {
             this.$emit('hideIbp');
         },
-        // 视图缩放事假
-        onDataZoom(dataZoom) {
-            this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
-            this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
-            this.dataZoom.scaleRate = dataZoom.scaleRate + '';
 
-            const skinCode = this.$store.getters['map/skinCode'];
-            if (skinCode) {
-                const param = {
-                    scaleRate: this.dataZoom.scaleRate,
-                    offsetY: this.dataZoom.offsetY,
-                    skinCode: skinCode
-                };
-
-                localStore.set(`scaleRate_${skinCode}`, JSON.stringify(param)); // 保存缩放倍数
-            }
-        },
         // 点击选择事件
         onSelected(em) {
             this.$emit('onSelect', em);
@@ -127,13 +122,10 @@ export default {
         onContextMenu(em) {
             this.$emit('onMenu', em);
         },
-        // 缩小
-        setShrink() {
-            this.$ibp.setOptions({type: 'zoom', scale: -1});
-        },
-        // 放大
-        setMagnify() {
-            this.$ibp.setOptions({type: 'zoom', scale: 1});
+        // 绘图时调用，元素可拖拽
+        drawIbpInit() {
+            this.$ibp.drawIbpInit();
+            this.showBackButton = false;
         }
     }
 };
@@ -149,6 +141,5 @@ export default {
         /*background-image: url('../../assets/ibp_images/ibp_bg.png');*/
         /*background-repeat:repeat;*/
         /*background-size: 4096px 2048px;*/
-        background-color: #0e151f;
     }
 </style>

src/views/map/mapdraft/mapedit/dataRelation/index.vue

@@ -38,6 +38,15 @@
               @setCenter="setCenter"
             />
           </el-tab-pane>
+          <el-tab-pane label="路径单元" name="path">
+            <path-operate
+              ref="pathOperate"
+              :card-height="cardHeight+25"
+              :map-info="mapInfo"
+              :selected="selected"
+              @setCenter="setCenter"
+            />
+          </el-tab-pane>
           <el-tab-pane label="交路" name="routing">
             <routing-operate
               ref="routingOperate"
@@ -65,15 +74,6 @@
               @setCenter="setCenter"
             />
           </el-tab-pane>
-          <el-tab-pane label="路径单元" name="path">
-            <path-operate
-              ref="pathOperate"
-              :card-height="cardHeight+25"
-              :map-info="mapInfo"
-              :selected="selected"
-              @setCenter="setCenter"
-            />
-          </el-tab-pane>
         </el-tabs>
       </el-card>
     </div>

src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue

@@ -58,7 +58,7 @@
               style="width: 95%; margin: 0 auto"
             >
               <el-table-column type="index" />
-              <el-table-column prop="routeCode" label="进路ID" />
+              <el-table-column prop="routeCode" label="进路code" />
               <el-table-column prop="routeName" label="进路名称" />
               <el-table-column fixed="right" :label="$t('map.operation')" width="50">
                 <template slot-scope="scope">
@@ -235,10 +235,8 @@ export default {
 			data.forEach((element, index) => {
 				this.addModel.mapRouteUnitRelList.push({
 					routeCode: element.code,
-					routeName: element.name,
-					mapId: this.mapInfo.id,
-					id: element.id,
-					routeUnitCode: this.addModel.code
+					routeName: element.name
+					// routeUnitCode: this.addModel.code
 				});
 			});
 		},
@@ -274,15 +272,13 @@ export default {
 					this.loading = false;
 				});
 			} else {
-				[
-					addRouteUnit(this.buildModel()).then(response => {
-						this.$message.success(this.$t('tip.createSuccess'));
-						this.clear();
-					}).catch(() => {
-						this.$messageBox(this.$t('tip.operationAbnormal'));
-						this.loading = false;
-					})
-				];
+				addRouteUnit(this.buildModel()).then(response => {
+					this.$message.success(this.$t('tip.createSuccess'));
+					this.clear();
+				}).catch(() => {
+					this.$messageBox(this.$t('tip.operationAbnormal'));
+					this.loading = false;
+				});
 			}
 		},
 		clear() {

src/views/map/mapdraft/mapedit/dataRelation/routeoperate/route.vue

@@ -515,8 +515,10 @@ export default {
 			const model = Object.assign({}, this.addModel);
 			model['mapId'] = this.mapInfo.id;
 			model['routeSectionList'] = this.addModel.routeSectionList.map(elem => { return { sectionCode: elem }; });
-			model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { mapId: this.mapInfo.id, routeCode: model.code, sectionCode: elem }; });
-			model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { mapId: this.mapInfo.id, routeCode: model.code, sectionCode: elem }; });
+			//  mapId: this.mapInfo.id, routeCode: model.code,
+			model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { sectionCode: elem }; });
+			// mapId: this.mapInfo.id, routeCode: model.code,
+			model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { sectionCode: elem }; });
 			model['routeStandList'] = this.addModel.routeStandList.map(elem => { return { stationStandCode: elem }; });
 			if (code) { model['code'] = code; }
 

src/views/map/mapdraft/mapedit/mapoperate/ImageControl.vue

@@ -120,8 +120,8 @@ export default {
 					draw: {
 						name: this.$t('map.drawData'),
 						item: [
-							{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
-							{ prop: 'name', label: this.$t('map.imageName'), type: 'input' },
+							{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
+							// { prop: 'name', label: this.$t('map.imageName'), type: 'input' },
 							{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
 							{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
 							{ prop: 'zIndex', label: this.$t('map.imageZindex'), type: 'number', min: 0 },

src/views/map/mapdraft/mapedit/mapoperate/buttonDraft.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName" class="card">
+      <el-tab-pane class="view-control" :label="$t('map.property')" name="first">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
+        </el-scrollbar>
+        <div class="button_box">
+          <el-button-group class="map-draft-group">
+            <el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
+            <el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
+          </el-button-group>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
+          <el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
+            <!-- <el-form-item :label="$t('map.buttonText')+':'" prop="text">
+              <el-input v-model="addModel.text" />
+            </el-form-item> -->
+            <el-form-item :label="$t('map.buttonType')+ ':'" prop="type">
+              <el-select v-model="addModel.type" filterable>
+                <el-option
+                  v-for="item in buttonTypeList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('map.belongsStation')" prop="stationCode">
+              <el-select v-model="addModel.stationCode" filterable>
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name + ' (' + item.code+ ')'"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="coordinate">
+              <span class="title" style="width: 120px">{{ $t('map.textPoints') }}</span>
+              <el-form-item
+                label="x:"
+                prop="position.x"
+                style="display: table; float: left; margin-right: 20px;"
+                label-width="25px"
+              >
+                <el-input-number v-model="addModel.position.x" label="x:" />
+              </el-form-item>
+              <el-form-item
+                label="y:"
+                prop="position.y"
+                style="display: table; float: left;"
+                label-width="25px"
+              >
+                <el-input-number v-model="addModel.position.y" label="y:" />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-scrollbar>
+        <div class="button_box">
+          <el-button-group class="map-draft-group">
+            <el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
+          </el-button-group>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getUID } from '@/jmap/utils/Uid';
+import ConfigList from './config/list';
+
+export default {
+	name: 'LcControlDraft',
+	components: {
+		ConfigList
+	},
+	props: {
+		selected: {
+			type: Object,
+			default: function () {
+				return null;
+			}
+		},
+		cardHeight: {
+			type: [String, Number],
+			required: true
+		}
+	},
+	data() {
+		return {
+			activeName: 'first',
+			buttonTypeList: [
+				{ code: '01', name: '按图折返' }
+			],
+			mapData: null,
+			editModel: {
+				code: '',
+				text: '',
+				type: '',
+				stationCode: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			addModel: {
+				type: '',
+				stationCode: '',
+				text: '',
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			rules: {
+				code: [
+					{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
+				],
+				tsxt: [
+					{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
+				],
+				'position.x': [
+					{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
+				]
+			}
+		};
+	},
+	computed: {
+		...mapGetters('map', [
+			'stationList',
+			'buttonList'
+		]),
+		createRules: function () {
+			return {
+				text: [
+					{ required: true, message: this.$t('rules.pleaseSelectButtonContent'), trigger: 'blur' }
+				],
+				type: [
+					{ required: true, message: this.$t('rules.pleaseSelectButtonType'), trigger: 'blur' }
+				],
+				stationCode: [
+					{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
+				],
+				'position.x': [
+					{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
+				],
+				'position.y': [
+					{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
+				]
+			};
+		},
+		form() {
+			const form = {
+				labelWidth: '140px',
+				items: {
+					code: {
+						name: '',
+						item: []
+					},
+					draw: {
+						name: this.$t('map.drawData'),
+						item: [
+							{ prop: 'code', label: `${this.$t('map.buttonControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.buttonList, change: true, deviceChange: this.deviceChange },
+							// { prop: 'text', label: `${this.$t('map.buttonText')}:`, type: 'input' },
+							{ prop: 'type', label: `${this.$t('map.buttonType')}:`, type: 'select', optionLabel: 'name', optionValue: 'code', options: this.buttonTypeList },
+							{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
+								{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px'},
+								{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
+							] }
+						]
+					},
+					map: {
+						name: this.$t('map.mapData'),
+						item: [
+							{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
+						]
+					}
+				}
+			};
+			return form;
+		}
+	},
+	watch: {
+		selected: function (val, oldVal) {
+			this.deviceSelect(val);
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		deviceChange(code) {
+			this.$emit('setCenter', code);
+			this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
+		},
+		deviceSelect(selected) {
+			this.$refs.form.resetFields();
+			this.$refs.make.resetFields();
+			if (selected && selected._type.toUpperCase() == 'ButtonControl'.toUpperCase()) {
+				this.editModel.code = selected.code;
+				this.editModel.text = selected.text;
+				this.editModel.type = selected.type;
+				this.editModel.stationCode = selected.stationCode;
+				this.editModel.position = {
+					x: selected.position.x,
+					y: selected.position.y
+				};
+				this.activeName = 'first';
+			}
+		},
+		create() {
+			this.$refs.make.validate((valid) => {
+				if (valid) {
+					const uid = getUID('ButtonControl');
+					const model = {
+						_type: 'ButtonControl',
+						code: uid,
+						type: this.addModel.type,
+						stationCode: this.addModel.stationCode,
+						text: this.addModel.text,
+						position: {
+							x: this.addModel.position.x,
+							y: this.addModel.position.y
+						}
+					};
+					this.$emit('addOrUpdateMapModel', model);
+				}
+			});
+		},
+		// 修改对象
+		edit() {
+			this.$refs['form'].validate((valid) => {
+				if (valid) {
+					this.$emit('addOrUpdateMapModel', this.buildEditModel());
+				}
+			});
+		},
+		buildEditModel() {
+			const model = {
+				_type: 'ButtonControl',
+				code: this.editModel.code,
+				text: this.editModel.text,
+				type: this.editModel.type,
+				stationCode: this.editModel.stationCode,
+				position: {
+					x: this.editModel.position.x,
+					y: this.editModel.position.y
+				}
+			};
+			return model;
+		},
+		// 删除对象
+		deleteObj() {
+			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+			if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
+				const _that = this;
+				this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
+					confirmButtonText: this.$t('tip.confirm'),
+					cancelButtonText: this.$t('tip.cancel'),
+					type: 'warning'
+				}).then(() => {
+					_that.$emit('delMapModel', selected);
+					_that.deviceSelect();
+				}).catch(() => {
+					_that.$message.info(this.$t('tip.cancelledDelete'));
+				});
+			}
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+	.button_box{
+		width: 100%;
+		background: #f0f0f0;
+		overflow: hidden;
+	}
+    .coordinate {
+        overflow: hidden;
+
+        .title {
+            text-align: right;
+            font-size: 14px;
+            color: #606266;
+            line-height: 40px;
+            padding: 0 12px 0 0;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 28px;
+            width: 160px;
+            font-weight: bold;
+            display: block;
+            float: left;
+        }
+    }
+
+    .map-draft-group {
+        color: #3E44BE;
+    }
+</style>

src/views/map/mapdraft/mapedit/mapoperate/index.vue

@@ -204,6 +204,16 @@
               @setCenter="setCenter"
             />
           </el-tab-pane>
+          <el-tab-pane :label="$t('map.button')" name="ButtonControl">
+            <button-draft
+              ref="ImageControl"
+              :card-height="cardHeights"
+              :selected="selected"
+              @addOrUpdateMapModel="addOrUpdateMapModel"
+              @delMapModel="delMapModel"
+              @setCenter="setCenter"
+            />
+          </el-tab-pane>
         </el-tabs>
       </el-card>
     </div>
@@ -228,6 +238,7 @@ import ZcControlDraft from './zcControl';
 import LimitControlDraft from './limitControl';
 import LcControlDraft from './lcControl';
 import ImageControlDraft from './ImageControl';
+import ButtonDraft from './buttonDraft';
 
 import { ViewMode } from '@/scripts/ConstDic';
 
@@ -250,7 +261,8 @@ export default {
 		ZcControlDraft,
 		LimitControlDraft,
 		LcControlDraft,
-		ImageControlDraft
+		ImageControlDraft,
+		ButtonDraft
 	},
 	props: {
 		selected: {

src/views/map/mapdraft/mapedit/mapoperate/line.vue

@@ -27,7 +27,7 @@
               <el-input-number v-model="addModel.width" :min="1" />px
             </el-form-item>
             <div class="coordinate">
-              <span class="title">{{ $t('map.segmentCoordinates') }}</span>
+              <span class="title">{{ $t('map.linePoint') }}</span>
               <div class="point-section">
                 <template v-for="(point, index) in addModel.points">
                   <div :key="index" style="overflow: hidden;">

src/views/map/mapdraft/mapedit/mapoperate/link.vue

@@ -171,14 +171,13 @@ export default {
 							{ prop: 'code', label: this.$t('map.linkCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList, change: true, deviceChange: this.deviceChange },
 							{ prop: 'name', label: this.$t('map.linkName'), type: 'input' },
 							{ prop: 'lp', label: this.$t('map.linkLp'), type: 'coordinate', width: '119px', children: [
-								{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
-								{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
+								{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+								{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
 							] },
 							{ prop: 'rp', label: this.$t('map.linkRp'), type: 'coordinate', width: '119px', children: [
-								{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
-								{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
+								{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+								{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
 							] },
-							{ prop: 'color', label: this.$t('map.linkColor'), type: 'color' },
 							{ prop: 'leftFdCode', label: this.$t('map.linkLeftFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
 							{ prop: 'leftSdCode', label: this.$t('map.linkLeftSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
 							{ prop: 'rightFdCode', label: this.$t('map.linkRightFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
@@ -202,6 +201,21 @@ export default {
 				],
 				name: [
 					{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
+				],
+				'lp.x': [
+					{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
+				],
+				'lp.y': [
+					{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
+				],
+				'rp.x': [
+					{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
+				],
+				'rp.y': [
+					{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
+				],
+				lengthFact: [
+					{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
 				]
 			};
 			// 清空表单验证提示信息

src/views/map/mapdraft/mapedit/mapoperate/signal.vue

@@ -24,16 +24,6 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item :label="$t('map.directionType')" prop="directionType">
-            <el-select v-model="addModel.directionType" filterable>
-              <el-option
-                v-for="item in SignalDirectionTypeList"
-                :key="item.code"
-                :label="item.name"
-                :value="item.code"
-              />
-            </el-select>
-          </el-form-item>
           <el-form-item :label="$t('map.leftOrRight')" prop="leftOrRight">
             <el-select v-model="addModel.leftOrRight" filterable>
               <el-option
@@ -44,6 +34,16 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item :label="$t('map.directionType')" prop="directionType">
+            <el-select v-model="addModel.directionType" filterable>
+              <el-option
+                v-for="item in SignalDirectionTypeList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
           <el-form-item :label="$t('map.positionType')" prop="positionType">
             <el-select v-model="addModel.positionType" filterable>
               <el-option
@@ -202,7 +202,7 @@ export default {
 		PhysicalSectionList() {
 			let list = [];
 			if (this.sectionList && this.sectionList.length) {
-				list = this.sectionList.filter(elem => { return elem.type === '01'; });
+				list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
 			}
 			return list;
 		},

src/views/map/mapdraft/mapedit/mapoperate/station.vue

@@ -171,7 +171,7 @@ export default {
 		PhysicalSectionList() {
 			let list = [];
 			if (this.sectionList && this.sectionList.length) {
-				list = this.sectionList.filter(elem => { return elem.type === '01'; });
+				list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
 			}
 			return list;
 		},

src/views/map/mapdraft/mapedit/mapoperate/stationcontrol.vue

@@ -15,7 +15,7 @@
       <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
         <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
           <el-form ref="make" :model="addModel" label-width="120px" size="mini" :rules="makeRules">
-            <el-form-item :label="$t('map.stationName')" prop="stationCode">
+            <el-form-item :label="$t('map.stationstandName')" prop="stationCode">
               <el-select v-model="addModel.stationCode" filterable>
                 <el-option
                   v-for="item in stationList"
@@ -74,7 +74,8 @@ export default {
 				zakContent: '',
 				jjzkContent: '',
 				zbjkContent: '',
-				zzkContent: ''
+				zzkContent: '',
+				lskContent: ''
 			},
 			addModel: {
 				stationCode: ''
@@ -104,11 +105,12 @@ export default {
 						name: this.$t('map.drawData'),
 						item: [
 							{ prop: 'code', label: this.$t('map.stationControlCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.stationControlList, change: true, deviceChange: this.deviceChange },
-							{ prop: 'name', label: this.$t('map.stationControlName'), type: 'input' },
+							// { prop: 'name', label: this.$t('map.stationControlName'), type: 'input' },
 							{ prop: 'zokContent', label: this.$t('map.zokContent'), type: 'input' },
 							{ prop: 'zakContent', label: this.$t('map.zakContent'), type: 'input' },
 							{ prop: 'jjzkContent', label: this.$t('map.jjzkContent'), type: 'input' },
 							{ prop: 'zzkContent', label: this.$t('map.zzkContent'), type: 'input' },
+							{ prop: 'lskContent', label: `${this.$t('map.interconnected')}:`, type: 'input' },
 							{ prop: 'position', label: this.$t('map.stationControlPosition'), type: 'coordinate', width: '150px', children: [
 								{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
 								{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
@@ -184,6 +186,7 @@ export default {
 				this.editModel.zakContent = selected.zakContent;
 				this.editModel.jjzkContent = selected.jjzkContent;
 				this.editModel.zzkContent = selected.zzkContent;
+				this.editModel.lskContent = selected.lskContent;
 				this.editModel.stationCode = selected.stationCode;
 				this.editModel.zbjkContent = selected.zbjkContent;
 				if (selected.hasOwnProperty('position')) {
@@ -208,7 +211,8 @@ export default {
 							zbjkContent: '总报警',
 							zakContent: '站控',
 							jjzkContent: '紧急站控',
-							zzkContent: '站中控按钮'
+							zzkContent: '站中控按钮',
+							lskContent: '连锁控'
 						};
 						this.stationList.forEach(elem => {
 							if (elem.code === this.addModel.stationCode) {
@@ -241,6 +245,7 @@ export default {
 				zbjkContent: this.editModel.zbjkContent,
 				zakContent: this.editModel.zakContent,
 				jjzkContent: this.editModel.jjzkContent,
+				lskContent: this.editModel.lskContent,
 				zzkContent: this.editModel.zzkContent,
 				stationCode: this.editModel.stationCode,
 				position: {

src/views/map/mapdraft/mapedit/mapoperate/switch.vue

@@ -86,12 +86,16 @@ export default {
 			const list = [];
 			if (this.sectionList && this.sectionList.length) {
 				this.sectionList.forEach(elem => {
-					if (elem.type === '01') {
-						list.push({
-							label: elem.name,
-							key: elem.code,
-							pinyin: elem.name
-						});
+					if (elem.type === '01' && elem.isSwitchSection) {
+						const link = this.findLinkData(elem.linkCode);
+						if ((link.leftFdCode && link.leftSdCode) || (link.rightFdCode && link.rightSdCode)) {
+							list.push({
+								label: elem.name,
+								key: elem.code,
+								pinyin: elem.name
+							});
+						}
+
 					}
 				});
 			}
@@ -125,10 +129,10 @@ export default {
 						name: this.$t('map.mapData'),
 						item: [
 							{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
-							{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' },
-							{ prop: 'sectionACode', label: this.$t('map.sectionACode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
-							{ prop: 'sectionBCode', label: this.$t('map.sectionBCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
-							{ prop: 'sectionCCode', label: this.$t('map.sectionCCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList }
+							{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' }
+							// { prop: 'sectionACode', label: this.$t('map.sectionACode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
+							// { prop: 'sectionBCode', label: this.$t('map.sectionBCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
+							// { prop: 'sectionCCode', label: this.$t('map.sectionCCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList }
 						]
 					}
 				}
@@ -229,6 +233,8 @@ export default {
 							if (node) {
 								const lFdSection = this.findSectionDataByLinkCodeAndPoint(link.leftFdCode, section.points[0]);
 								const lSdSection = this.findSectionDataByLinkCodeAndPoint(link.leftSdCode, section.points[0]);
+
+								// const cnodeSection = mapDevice[mapDevice[elem.code].sectionACode];
 								if (lFdSection && lSdSection) {
 									const model = {
 										_type: 'Switch',
@@ -249,6 +255,14 @@ export default {
 										rp: {
 											x: lSdSection.points[lSdSection.points.length - 2].x,
 											y: lSdSection.points[lSdSection.points.length - 2].y
+										},
+										intersection: {
+											x: section.points[0].x,
+											y: section.points[0].y
+										},
+										skew: {
+											x: lSdSection.points[lSdSection.points.length - 2].x,
+											y: lSdSection.points[lSdSection.points.length - 2].y
 										}
 									};
 
@@ -287,6 +301,14 @@ export default {
 										rp: {
 											x: rSdSection.points[1].x,
 											y: rSdSection.points[1].y
+										},
+										intersection: {
+											x: section.points[section.points.length - 1].x,
+											y: section.points[section.points.length - 1].y
+										},
+										skew: {
+											x: rSdSection.points[1].x,
+											y: rSdSection.points[1].y
 										}
 									};
 
@@ -351,7 +373,7 @@ export default {
 			const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
 			if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
 				const _that = this;
-				this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
+				this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
 					confirmButtonText: this.$t('tip.confirm'),
 					cancelButtonText: this.$t('tip.cancel'),
 					type: 'warning'

src/views/map/mapdraft/mapmanage/edit.vue

@@ -24,11 +24,6 @@
           <el-form-item :label="$t('map.mapName')" prop="name">
             <el-input v-model="editModel.name" />
           </el-form-item>
-          <!-- <el-form-item :label="$t('map.selectCity')" prop="cityCode">
-            <el-select v-model="editModel.cityCode" :placeholder="$t('map.pleaseSelect')" size="mini">
-              <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item> -->
         </el-form>
       </template>
       <template v-else>
@@ -116,9 +111,6 @@ export default {
 				],
 				skinCode: [
 					{ required: true, message: this.$t('rules.pleaseSelectAssociatedSkin'), trigger: 'change' }
-				],
-				cityCode: [
-					{ required: true, message: this.$t('rules.pleaseSelectAssociatedCity'), trigger: 'change' }
 				]
 			};
 		},
@@ -152,13 +144,19 @@ export default {
 		this.initLoadData();
 	},
 	methods: {
-		show() {
+		show(type) {
 			const dataZoom = this.$store.state.map.dataZoom;
-			if (dataZoom && dataZoom.offsetX) {
-				this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
-				this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
-				this.updtModel.scaling = dataZoom.scaleRate;
+			if (type == 'editCode') {
+				this.editModel.skinCode = this.editModel.skinCode ? this.editModel.skinCode : '';
+				this.editModel.name = this.editModel.name ? this.editModel.name : '';
+			} else if (type == 'editPoint') {
+				if (dataZoom && dataZoom.offsetX) {
+					this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
+					this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
+					this.updtModel.scaling = dataZoom.scaleRate;
+				}
 			}
+
 			this.dialogShow = true;
 		},
 		close() {
@@ -176,7 +174,7 @@ export default {
 		save() {
 			this.loading = true;
 			if (this.basicInfo) {
-				this.editModel.id = this.$route.params.mapId;
+				// this.editModel.id = this.$route.params.mapId;
 				this.$refs['edit'].validate((valid) => {
 					if (valid) {
 						updateMap(this.editModel).then(response => {

src/views/map/mapdraft/mapmanage/maplist.vue

@@ -117,6 +117,7 @@ export default {
 					y: e.clientY
 				};
 				this.editModel = obj;
+				this.editModel.skinCode = node.parent.data.id;
 				this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
 			}
 		},
@@ -299,7 +300,6 @@ export default {
 				import('@/utils/Export2Excel').then(excel => {
 					self.queryExportData(resultData).then(data => {
 						excel.export_json_excel(data, resultData.name);
-
 					}).catch(error => {
 						self.$message.error('导出执行异常：' + error.message);
 					});

src/views/map/mapdraft/mapmanage/operateMenu.vue

@@ -114,13 +114,13 @@ export default {
 		updateObj() {
 			this.doClose();
 			if (this.$refs && this.$refs.edit) {
-				this.$refs.edit.show();
+				this.$refs.edit.show('editCode');
 			}
 		},
 		updateObjAxis() {
 			this.doClose();
 			if (this.$refs && this.$refs.axisEdit) {
-				this.$refs.axisEdit.show();
+				this.$refs.axisEdit.show('editPoint');
 			}
 		},
 		saveAs() {
@@ -144,12 +144,14 @@ export default {
 				type: 'warning'
 			}).then(() => {
 				deleteMap(this.editModel.id).then(response => {
-					this.$store.dispatch('map/mapClear').then(() => {
-						_that.refresh();
-						_that.$emit('editMap', null);
-						_that.$message.success(this.$t('map.successfullyDelete'));
-						_that.$router.push({ path: `${UrlConfig.map.draft}/0/draft` });
-					});
+					if (this.editModel.id == this.$route.params.mapId) {
+						this.$store.dispatch('map/mapClear').then(() => {
+							_that.$emit('editMap', null);
+							_that.$router.push({ path: `${UrlConfig.map.draft}/0/draft` });
+						});
+					}
+					_that.refresh();
+					_that.$message.success(this.$t('map.successfullyDelete'));
 				}).catch(error => {
 					_that.$message.error(this.$t('map.failDelete') + error.message);
 				});

src/views/map/mapdraft/mapmanage/publish.vue

@@ -6,6 +6,7 @@
         label-position="right"
         :model="editModel"
         label-width="120px"
+        :rules="editRules"
         size="mini"
         @submit.native.prevent
       >
@@ -45,6 +46,14 @@ export default {
 				id: '',
 				name: '',
 				cityCode: '000000'
+			},
+			editRules: {
+				cityCode: [
+					{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'change' }
+				],
+				name: [
+					{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
+				]
 			}
 		};
 	},

src/views/map/mapdraft/mapmanage/saveAs.vue

@@ -6,6 +6,7 @@
         label-position="right"
         :model="editModel"
         label-width="100px"
+        :rules="editRules"
         size="mini"
         @submit.native.prevent
       >
@@ -39,6 +40,11 @@ export default {
 			editModel: {
 				id: '',
 				name: ''
+			},
+			editRules: {
+				name: [
+					{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
+				]
 			}
 		};
 	},