ibp盘

src/ibp/constant/deviceRender.js

@@ -0,0 +1,44 @@
+import deviceType from './deviceType';
+
+const deviceRender = {};
+
+/** Text渲染配置*/
+deviceRender[deviceType.Text] = {
+	zlevel: 1
+};
+
+/** SquareButton渲染配置*/
+deviceRender[deviceType.SquareButton] = {
+	zlevel: 1
+};
+
+/** LampControl渲染配置*/
+deviceRender[deviceType.LampControl] = {
+	zlevel: 1
+};
+
+/** WarnButton渲染配置*/
+deviceRender[deviceType.WarnButton] = {
+	zlevel: 1
+};
+
+/** Arrow渲染配置*/
+deviceRender[deviceType.Arrow] = {
+	zlevel: 1
+};
+
+/** RotatingButton渲染配置*/
+deviceRender[deviceType.RotatingButton] = {
+	zlevel: 1
+};
+
+/** Tip渲染配置*/
+deviceRender[deviceType.Tip] = {
+	zlevel: 1
+};
+
+/** BackGround渲染配置*/
+deviceRender[deviceType.Background] = {
+	zlevel: 0
+};
+export default deviceRender;

src/ibp/constant/deviceType.js

@@ -0,0 +1,12 @@
+const deviceType = {
+	Text: 'Text',
+	SquareButton: 'SquareButton',
+	LampControl: 'LampControl',
+	WarnButton: 'WarnButton',
+	Arrow: 'Arrow',
+	RotatingButton: 'RotatingButton',
+	Tip: 'Tip',
+	Background: 'Background'
+};
+
+export default deviceType;

src/ibp/constant/ibpData.js

@@ -0,0 +1,39 @@
+
+const ibpData = {
+	background: {
+		type: 'Background',
+		code: 'bg_0000'
+	},
+	arrowList: [
+		{
+			type: 'Arrow',
+			code: '1111_arrow',
+			point: {
+				x: 510,
+				y: 400
+			},
+			length: 488,
+			stroke: '#0000CD',
+			fill: '#0000CD',
+			lineWidth: 1,
+			direction: '上行',
+			stationstandDirection: '三桥方向'
+		},
+		{
+			type: 'Arrow',
+			code: '1222_arrow',
+			point: {
+				x: 510,
+				y: 200
+			},
+			length: 488,
+			stroke: '#0000CD',
+			fill: '#0000CD',
+			lineWidth: 1,
+			direction: '下行',
+			stationstandDirection: '车辆段方向'
+		}
+	]
+};
+
+export default ibpData;

src/ibp/ibpPan.js

@@ -0,0 +1,308 @@
+import zrender from 'zrender';
+import * as zrUtil from 'zrender/src/core/util';
+import localStore from 'storejs';
+import Options from './options';
+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';
+
+const renderer = 'canvas';
+const devicePixelRatio = 1;
+
+class IbpPan {
+	constructor(opts) {
+		this.methods = opts.methods;
+
+		// 鼠标事件
+		this.events = { __Pan: 'pan', __Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu', DataZoom: 'dataZoom'};
+
+		// 皮肤参数
+		// this.skinCode = '';
+
+		// 设备数据
+		this.ibpDevice = {};
+
+		// 默认状态
+		this.defaultStateDict = this.loadDefaultState();
+
+		this.initIbpPage(opts);
+	}
+	initIbpPage(opts) {
+		const width = opts.config.width;
+		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.$painter = new Painter(this);
+		this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()});
+		this.$painter.updateTransform(this.$options);
+
+		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);
+
+	}
+	loadDefaultState() {
+		const defaultStateDict = {};
+
+		zrUtil.each(Object.keys(deviceState), (type) => {
+			defaultStateDict[type] = {};
+			zrUtil.each(Object.keys(deviceState[type] || {}), (state) => {
+				defaultStateDict[type][state] = deviceState[type][state].Default;
+			}, this);
+		}, this);
+
+		return defaultStateDict;
+	}
+	setMap(config, ibpDevice) {
+		// 保存皮肤类型
+		if (config.config) {
+			this.$options.scaleRate = config.scaling;
+			this.$options.offsetX = config.origin.x;
+			this.$options.offsetY = config.origin.y;
+			this.$painter.updateTransform({ scaleRate: config.scaling, offsetX: config.origin.x, offsetY: config.origin.y });
+		}
+
+		// 保存原始数据
+		this.data = config;
+
+		// 解析地图数据
+		this.ibpDevice = ibpDevice;
+
+		// 加载对应皮肤
+		// this.style = this.loadStyle(this.skinCode);
+
+		// 数据加载完成 回调
+		if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.ibpDevice); }
+
+		// 初次渲染视图
+		this.$painter.repaint(this.ibpDevice);
+
+		// 视图加载完成 回调
+		if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.ibpDevice); }
+
+	}
+
+	setDefaultState() {
+		const list = [];
+		this.update(list);
+		if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(list); }
+	}
+
+	setOptions(opts) {
+		const options = this.pullBack(opts);
+		this.$options.update(options);
+		this.$painter.updateTransform(this.$options);
+
+		if (this.$options.disabled == true) {
+			this.$mouseController.disable();
+		} else {
+			this.$mouseController.enable(opts);
+		}
+
+		if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(this.$options); }
+	}
+
+	setCenter(deviceCode) {
+		const device = this.ibpDevice[deviceCode];
+		if (device && device.instance) {
+			var rect = createBoundingRect(device.instance);
+			var dcenter = calculateDCenter(rect, { width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight() });
+			this.setOptions(dcenter);
+		}
+	}
+
+	setLevelVisible(list) {
+		this.$painter.setLevelVisible(list);
+	}
+
+	render(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);
+			this.$painter.delete(oDevice);
+			if (!elem._dispose) {
+				this.ibpDevice[code] = nDevice;
+				this.$painter.add(nDevice);
+			}
+		});
+
+		if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(list); }
+	}
+
+	// 中间处理
+	hookHandle(oDevice, elem) {
+		const code = elem.code;
+		const type = elem._type;
+		// 如果是延时计时，需要保存计数值到全局
+		if (type === deviceType.StationCounter) {
+			let val = '' + elem.val;
+			if (val === '0' || !elem.val) {
+				val = elem.val = localStore.get(code) || '0';
+			}
+
+			localStore(code, val);
+		}
+
+		for (var prop in elem) {
+			if (elem[prop] != oDevice[prop]) {
+				Object.assign(oDevice, elem);
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	update(list) {
+		(list || []).forEach(elem => {
+			const code = elem.code;
+			const type = elem._type;
+			const oDevice = this.ibpDevice[code];
+			if (elem.dispose) {
+				this.$painter.delete(oDevice);
+			} else {
+				if (this.hookHandle(oDevice, elem)) {
+					this.$painter.update(oDevice);
+				}
+			}
+		});
+
+		if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); }
+	}
+
+	pullBack(payload) {
+		if (payload.type === 'zoom') {
+			const zrWidth = this.$ibpZr.getWidth();
+			const zrHeight = this.$ibpZr.getHeight();
+			const originX = payload.originX || zrWidth / 2;
+			const originY = payload.originY || zrHeight / 2;
+			const x = (this.$options.offsetX + originX) / this.$options.scaleRate;
+			const y = (this.$options.offsetY + originY) / this.$options.scaleRate;
+			const newScaleRate = this.$options.getScaleRate(payload.scale);
+			const dx = originX - (x * newScaleRate - this.$options.offsetX);
+			const dy = originY - (y * newScaleRate - this.$options.offsetY);
+			payload.dx = dx;
+			payload.dy = dy;
+		}
+
+		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;
+	}
+
+	getEvents() {
+		return this.events;
+	}
+
+	getDeviceByCode(code) {
+		return this.ibpDevice[code];
+	}
+
+	getShapeTipPoint(opts) {
+		const device = this.ibpDevice[opts.code];
+		if (device) {
+			return this.$painter.getShapeTipPoint(device.instance, opts);
+		}
+	}
+
+	resize(opt) {
+		this.$ibpZr.resize(opt);
+		this.$painter.updateZrSize(opt);
+	}
+
+	refresh() {
+		this.$painter.refresh();
+	}
+
+	clear() {
+		this.skinCode = '';
+		this.style = {};
+		this.ibpDevice = {};
+		this.$painter.clear();
+	}
+
+	dispose() {
+		this.off(this.events.Pan, this.optionsHandler);
+		this.off(this.events.Zoom, this.optionsHandler);
+
+		this.clear();
+
+		this.$mouseController.dispose();
+		this.$ibpZr && zrender.dispose(this.$ibpZr);
+		this.$painter.dispose();
+	}
+
+	on(eventname, cb, context) {
+		const idx = Object.values(this.events).indexOf(eventname);
+		if (idx >= 0) {
+			switch (eventname) {
+			case this.events.Selected:
+				this.$mouseController.on(this.events.Selected, cb, context);
+				break;
+			case this.events.Contextmenu:
+				this.$mouseController.on(this.events.Contextmenu, cb, context);
+				break;
+			case this.events.DataZoom:
+				this.$mouseController.on(this.events.DataZoom, cb, context);
+				break;
+			}
+		}
+	}
+
+	off(eventname, cb) {
+		const idx = Object.values(this.events).indexOf(eventname);
+		if (idx >= 0) {
+			switch (eventname) {
+			case this.events.Selected:
+				this.$mouseController.off(this.events.Selected, cb);
+				break;
+			case this.events.Contextmenu:
+				this.$mouseController.off(this.events.Contextmenu, cb);
+				break;
+			case this.events.DataZoom:
+				this.$mouseController.off(this.events.DataZoom, cb);
+				break;
+			}
+		}
+	}
+}
+export default IbpPan;

src/ibp/mouseController.js

@@ -0,0 +1,201 @@
+import deviceType from './constant/deviceType';
+import Eventful from 'zrender/src/mixin/Eventful';
+import * as eventTool from 'zrender/src/core/event';
+import store from '@/store';
+
+class EventModel {
+	constructor(e) {
+		this.clientX = e.event.clientX;
+		this.clientY = e.event.clientY;
+
+		let view = e.target;
+		while (view) {
+			if (Object.values(deviceType).includes(view._type)) {
+				this.deviceCode = view._code;
+				this.deviceType = view._type;
+				break;
+			}
+
+			if (view._subType) {
+				this.subType = view._subType;
+			}
+			if (view._val) {
+				this.val = view._val;
+			}
+
+			view = view.parent;
+		}
+	}
+}
+
+class MouseController extends Eventful {
+	constructor(jmap) {
+		super();
+		this.$jmap = jmap;
+		this.$zr = jmap.getZr();
+		this.events = jmap.getEvents();
+		this.initHandler(this.$zr);
+	}
+
+	initHandler(zr) {
+		if (zr) {
+			zr.on('click', this.click, this);
+			zr.on('contextmenu', this.contextmenu, this);
+			zr.on('mousemove', this.moveEvent, this);
+
+			this.enable = function (opts) {
+				opts = opts || {};
+				this._moveOnMouseMove = opts.moveOnMouseMove || true;
+				this._zoomOnMouseWheel = opts.zoomOnMouseWheel || false;
+				this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
+
+				this.disable();
+
+				zr.on('mousedown', this.mousedown, this);
+				zr.on('mousemove', this.mousemove, this);
+				zr.on('mouseup', this.mouseup, this);
+				zr.on('mousewheel', this.mousewheel, this);
+			};
+
+			this.disable = function () {
+				zr.off('mousedown', this.mousedown);
+				zr.off('mousemove', this.mousemove);
+				zr.off('mouseup', this.mouseup);
+				zr.off('mousewheel', this.mousewheel);
+			};
+
+			this.dispose = function () {
+				zr.off('click', this.click);
+				zr.off('contextmenu', this.contextmenu);
+				zr.off('mousemove', this.moveEvent);
+				this.disable();
+			};
+
+			this.isDragging = function () { return this._dragging; };
+		}
+	}
+
+	mousedown(e) {
+		if (eventTool.notLeftMouse(e)) {
+			return;
+		}
+
+		var x = e.offsetX;
+		var y = e.offsetY;
+
+		this._x = x;
+		this._y = y;
+		this._dragging = true;
+	}
+
+	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;
+
+		this._preventDefaultMouseMove && eventTool.stop(e.event);
+
+		this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
+	}
+
+	mouseup(e) {
+		if (!eventTool.notLeftMouse(e)) {
+			this._dragging = false;
+		}
+	}
+
+	mousewheel(e) {
+		const shouldZoom = this._zoomOnMouseWheel;
+		const wheelDelta = e.wheelDelta;
+		const originX = e.offsetX;
+		const originY = e.offsetY;
+
+		if (wheelDelta === 0 || !shouldZoom) {
+			return;
+		}
+
+		if (shouldZoom) {
+			eventTool.stop(e.event);
+			let scale = 1;
+			if (wheelDelta > 0) {
+				scale = 1;
+			} else if (wheelDelta < 0) {
+				scale = -1;
+			}
+
+			this.trigger(this.events.__Zoom, {type: 'zoom', scale, originX, originY });
+		}
+	}
+
+	click(e) {
+		var em = this.checkEvent(e);
+		this.trigger(this.events.Selected, em);
+	}
+
+	contextmenu(e) {
+		var em = this.checkEvent(e);
+		this.trigger(this.events.Contextmenu, em);
+	}
+
+	moveEvent(e) {
+		const newEm = new EventModel(e);
+		const trainDetails = store.state.map.trainDetails;
+		if (trainDetails) {
+			if (newEm.deviceType != deviceType.Train || trainDetails.code != newEm.deviceCode) {
+				var instance = (this.$jmap.getDeviceByCode(trainDetails.code) || {} ).instance;
+				instance && instance.removeTrainDetail && instance.removeTrainDetail();
+			}
+		}
+	}
+
+	checkEvent(e) {
+		var oldEm = new EventModel(this.$zr.curEvent || { event: {} });
+		var newEm = new EventModel(e);
+		if ([1, 3].includes(e.which)) {
+			// 查找之前和当前鼠标选中的实例
+			var oldDevice = this.$jmap.getDeviceByCode(oldEm.deviceCode) || {};
+			var newDevice = this.$jmap.getDeviceByCode(newEm.deviceCode) || {};
+			var oldInstance = (this.$jmap.getDeviceByCode(oldEm.deviceCode) || {}).instance || {};
+			var newInstance = (this.$jmap.getDeviceByCode(newEm.deviceCode) || {}).instance || {};
+
+			// 如果之前和当前选中的实例不一致
+			if (oldInstance != newInstance) {
+			// 如果实例有取消选择函数并且被点击，则执行取消选中函数
+				if (oldInstance.mouseEvent && oldInstance.mouseEvent.mouseout) {
+					// 视图数据设置点击标志，同步执行
+					oldDevice['down'] = false;
+					oldInstance.mouseEvent['mouseout'](e);
+				}
+
+				// 如果实例有选中函数并且被点击，则执行选中函数
+				if (e.which == 3 && newInstance.mouseEvent && newInstance.mouseEvent.mouseover) {
+					newDevice['down'] = true;
+					newInstance.mouseEvent['mouseover'](e);
+				}
+			}
+
+			// 保存当前实例到全局
+			this.$zr.curEvent = e;
+		}
+
+		return newEm;
+	}
+
+	updateDatazoom(zoom) {
+		this.trigger(this.events.Datazoom, zoom);
+	}
+}
+
+export default MouseController;

src/ibp/options.js

@@ -0,0 +1,100 @@
+class Options {
+	constructor(opts, trigger) {
+		this.scaleIndex = 0;
+		this.scaleList = [
+			0.5, 0.6, 0.7, 0.8, 0.9,
+			1, 1.2, 1.4, 1.6, 1.8,
+			2, 2.2, 2.4, 2.6, 2.8,
+			3, 3.2, 3.4, 3.6, 3.8,
+			4, 4.2, 4.4, 4.6, 4.8,
+			5, 5.2, 5.4, 5.6, 5.8,
+			6, 6.2, 6.4, 6.6, 6.8,
+			7, 7.2, 7.4, 7.6, 7.8,
+			8, 8.2, 8.4, 8.6, 8.8
+		];
+
+		if (Number.isFinite(opts.scaleRate)) {
+			const idx = this.scaleList.indexOf(opts.scaleRate);
+			if (idx >= 0) {
+				this.scaleIndex = idx;
+			}
+		}
+
+		this.scaleRate = opts.scaleRate || this.scaleList[this.scaleIndex]; // 缩放比例
+
+		this.offsetX = opts.offsetX || 0; // x偏移
+
+		this.offsetY = opts.offsetY || 0; // y偏移
+
+		this.throttle = opts.throttle || 100; // 刷新频率
+
+		this.disabled = false;
+
+		this.moveOnMouseMove = true;
+
+		this.zoomOnMouseWheel = false;
+
+		this.preventDefaultMouseMove = true;
+
+		this.trigger = trigger;
+	}
+
+	update(payload) {
+		if (Number.isFinite(payload.dx)) {
+			this.offsetX -= payload.dx;
+		}
+		if (Number.isFinite(payload.dy)) {
+			this.offsetY -= payload.dy;
+		}
+
+		if (Number.isFinite(payload.offsetX)) {
+			this.offsetX = payload.offsetX;
+		}
+		if (Number.isFinite(payload.offsetY)) {
+			this.offsetY = payload.offsetY;
+		}
+
+		if (Number.isFinite(payload.scale)) {
+			if (Number.isFinite(payload.scale)) {
+				if ((this.scaleIndex + payload.scale) >= 0 && (this.scaleIndex + payload.scale) < this.scaleList.length) {
+					this.scaleIndex = this.scaleIndex + payload.scale;
+				}
+			}
+			this.scaleRate = this.scaleList[this.scaleIndex];
+		}
+
+		if (Number.isFinite(payload.scaleRate)) {
+			const idx = this.scaleList.indexOf(payload.scaleRate);
+			if (idx < 0) {
+				return;
+			}
+			this.scaleIndex = idx;
+			this.scaleRate = payload.scaleRate;
+		}
+
+		if (payload.disabled === true || payload.disabled === false) {
+			this.disabled = payload.disabled;
+		}
+
+		if (payload.moveOnMouseMove === true || payload.moveOnMouseMove === false) {
+			this.moveOnMouseMove = payload.moveOnMouseMove;
+		}
+
+		if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
+			this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
+		}
+
+		if (this.trigger instanceof Function) { this.trigger(this); }
+	}
+
+	getScaleRate(scale) {
+		if (Number.isFinite(scale)) {
+			if ((this.scaleIndex + scale) >= 0 && (this.scaleIndex + scale) < this.scaleList.length) {
+				return this.scaleList[this.scaleIndex + scale];
+			}
+		}
+		return this.scaleList[this.scaleIndex];
+	}
+}
+
+export default Options;

src/ibp/painter.js

@@ -0,0 +1,194 @@
+import * as zrUtil from 'zrender/src/core/util';
+import * as vector from 'zrender/src/core/vector';
+import Group from 'zrender/src/container/Group';
+import deviceType from './constant/deviceType';
+import shapefactory from './shape/factory';
+import TransformHandle from './transformHandle';
+
+class Painter {
+	constructor(ibp) {
+		// 父级实例
+		this.$ibp = ibp;
+		this.$ibpZr = ibp.getZr();
+
+		// 图层数据
+		this.ibpInstanceLevel = {};
+
+		// 初始图层
+		this.initLevels();
+
+		// 视图控制器
+		this.$transformHandle = new TransformHandle(this);
+	}
+
+	/**
+     * 初始绘图实例
+     * @param {*} dom
+     * @param {*} config
+     */
+	initLevels() {
+
+		// 添加父级图层
+		this.parentLevel = new Group({ name: '__parent__' });
+		this.$ibpZr.add(this.parentLevel);
+
+		// 添加子级图层
+		zrUtil.each(Object.values(deviceType), (type) => {
+			const level = new Group({ name: `__${type}__` });
+			this.ibpInstanceLevel[type] = level;
+			this.parentLevel.add(level);
+		});
+	}
+
+	/**
+     * 重绘视图
+     * @param {*} ibpDevice
+     */
+	repaint(ibpDevice) {
+		// 清空视图
+		this.clear();
+
+		// 创建视图
+		Object.values(ibpDevice).forEach(device => {
+			this.add(device);
+		});
+	}
+
+	/**
+     * 添加视图
+     * @param {*} device
+     */
+	add(device) {
+		const instance = shapefactory(device, this.$ibp);
+		if (instance) {
+			device.instance = instance;
+			this.$transformHandle.transformView(instance);
+			this.ibpInstanceLevel[device._type].add(instance);
+		}
+	}
+
+	/**
+     * 删除视图
+     * @param {*} device
+     */
+	delete(device) {
+		const instance = device.instance;
+		if (instance) {
+			this.ibpInstanceLevel[device._type].remove(instance);
+		}
+	}
+
+	/**
+     * 更新视图
+     * @param {*} device
+     */
+	update(device) {
+		if (device) {
+			if (device._dispose) {
+				this.delete(device);
+			} else {
+				const instance = device.instance;
+				if (instance) {
+					instance.setState(device);
+				}
+			}
+		}
+	}
+
+	/**
+     * 更新transform变化
+     * @param {*} opt
+     */
+	updateTransform(opt,) {
+		this.$transformHandle.updateTransform(opt);
+	}
+
+	/**
+	 * 更新zrender尺寸
+	 * @param {*} opt
+	 */
+	updateZrSize(opt) {
+		this.$transformHandle.updateZrSize(opt);
+	}
+
+	/**
+	 * 过去坐标提示位置
+	 * @param {*} opts
+	 */
+	getShapeTipPoint(instance, opts) {
+		if (instance) {
+			var point = instance.getShapeTipPoint(opts);
+			if (point) {
+				// 矩阵变换
+				var transform = this.$transformHandle.transform;
+				var transPoint = vector.applyTransform([], [point.x, point.y], transform);
+				return {
+					x: transPoint[0],
+					y: transPoint[1]
+				};
+			}
+
+		}
+	}
+
+	/**
+     * 设置图层可见
+     * @param {*} code
+     */
+	setLevelVisible(list) {
+		zrUtil.each(Object.values(deviceType), type => {
+			const level = this.ibpInstanceLevel[type];
+			if (list.includes(type)) {
+				level.show();
+			} else {
+				level.hide();
+			}
+		}, this);
+	}
+
+	/**
+     * 刷新图层
+     */
+	refresh() {
+		this.$ibpZr.refresh();
+	}
+
+	/**
+	 * 清除图层
+	 */
+	clearLevel(type) {
+		const level = this.ibpInstanceLevel[type];
+		if (level) {
+			level.removeAll();
+		}
+	}
+
+	/**
+     * 清除canvas
+     */
+	clear() {
+		zrUtil.each(Object.values(this.ibpInstanceLevel), (level) => {
+			level && level.removeAll();
+		}, this);
+
+		this.refresh();
+	}
+
+	/**
+     * 销毁图层
+     */
+	dispose() {
+		this.ibpInstanceLevel = {};
+		this.parentLevel = null;
+	}
+
+	/**
+     * 父级图层
+     */
+	getParentLevel() {
+		return this.parentLevel;
+	}
+
+}
+
+export default Painter;

src/ibp/shape/arrow.js

@@ -0,0 +1,38 @@
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+import Group from 'zrender/src/container/Group';
+import {arrow} from '../../jmap/shape/utils/ShapePoints';
+
+class Arrow extends Group {
+	constructor(model) {
+		super();
+		this.model = model;
+		console.log('----------', 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,
+			shape: {
+				points: point
+			},
+			style: {
+				stroke: model.stroke,
+				lineWidth: model.lineWidth,
+				fill: model.fill
+			}
+		});
+		this.add(this.arrow);
+	}
+
+	// 箭头颜色
+	setColor(color) {
+		this.arrow.setStyle('fill', color);
+	}
+
+}
+
+export default Arrow;

src/ibp/shape/background.js

@@ -0,0 +1,50 @@
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+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) {
+		super();
+		this.model = model;
+		this.zlevel = model.zlevel;
+		this.z = 1;
+		this.create();
+	}
+	create() {
+		this.imageBg = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				x: 0,
+				y: 0,
+				image: ibpBg,
+				width: 2048,
+				height: 1024
+			}
+		});
+		this.tailorRect = new Rect({
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: {
+				x: 0,
+				y: 0,
+				width: this.model.width,
+				height: this.model.height
+			}
+		});
+		this.tailorBgImage();
+	}
+	tailorBgImage() {
+		// this.imageBg.setClipPath(this.tailorRect);
+		this.add(this.imageBg);
+	}
+	setInitialPosition(opt) {
+		const x = this.imageBg.style.x;
+		const y = this.imageBg.style.y;
+		this.imageBg.setStyle('x', x-opt.offsetX);
+		this.imageBg.setStyle('y', y-opt.offsetY);
+		this.tailorRect.setShape('x', x-opt.offsetX);
+		this.tailorRect.setShape('y', y-opt.offsetY);
+	}
+}

src/ibp/shape/button.js

@@ -0,0 +1,26 @@
+import Group from 'zrender/src/container/Group';
+import Image from 'zrender/src/graphic/Image';
+
+export default class button extends Group {
+	constructor(model) {
+		super();
+		this.model = model;
+		this.zlevel = model.zlevel;
+		this.z = model.z;
+		this.create();
+	}
+	create() {
+		this.imageBg = new Image({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				image: this.model.image,
+				x: this.model.point.x,
+				y: this.model.point.y,
+				width: this.model.width,
+				height: this.model.height
+			}
+		});
+		this.add(this.imageBg);
+	}
+}

src/ibp/shape/element/control.js

@@ -0,0 +1,105 @@
+import Group from 'zrender/src/container/Group';
+import Arc from 'zrender/src/graphic/shape/Arc';
+import Text from 'zrender/src/graphic/Text';
+import { createBoundingRect } from '../../utils/parser';
+import Rect from 'zrender/src/graphic/shape/Rect';
+
+export default class Control extends Group {
+	constructor(model) {
+		super();
+		this.model = model;
+		this.zlevel = model.zlevel;
+		this.z = model.z;
+		this.style = model.style;
+		this.textStyle = model.text;
+		this.arcStyle = model.arc;
+		this.create();
+	}
+
+	create() {
+		this.control = new Arc({
+			_subType: 'Control',
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: this.arcStyle.shape,
+			style: {
+				lineWidth: this.arcStyle.lineWidth,
+				fill: this.arcStyle.fill
+			},
+			onmouseover: this.arcStyle.mouseover,
+			onmouseout: this.arcStyle.mouseout
+		});
+
+		this.text = new Text({
+			_subType: 'Text',
+			zlevel: this.zlevel,
+			z: this.z,
+			position: this.textStyle.position,
+			style: {
+				x: this.textStyle.x,
+				y: this.textStyle.y,
+				fontWeight: this.textStyle.fontWeight,
+				fontSize: this.textStyle.fontSize,
+				fontFamily: this.textStyle.fontFamily,
+				text: this.textStyle.text,
+				textFill: this.textStyle.textFill,
+				textAlign: this.textStyle.textAlign,
+				textVerticalAlign: this.textStyle.textVerticalAlign
+			},
+			onmouseover: this.textStyle.mouseover,
+			onmouseout: this.textStyle.mouseout
+		});
+		const arcRect = this.getArcBoundingRect();
+		const textRect = this.getTextBoundingRect();
+		this.arcBorder = new Rect({
+			zlevel: this.zlevel,
+			z: this.z,
+			silent: true,
+			shape: arcRect,
+			style: {
+				lineDash: this.style.arcBorderStyle.lineDash,
+				stroke: this.style.arcBorderStyle.stroke,
+				fill: this.style.arcBorderStyle.fill
+			}
+		});
+		this.textBorder = new Rect({
+			zlevel: this.zlevel,
+			z: this.z-1,
+			silent: true,
+			shape: textRect,
+			style: {
+				lineDash: this.style.textBorderStyle.lineDash,
+				stroke: this.style.textBorderStyle.stroke,
+				fill: this.style.textBorderStyle.fill
+			}
+		});
+		this.add(this.control);
+		this.add(this.text);
+		this.add(this.textBorder);
+		this.add(this.arcBorder);
+		this.textBorder.hide();
+		this.arcBorder.hide();
+	}
+	setTextBorder(flag) {
+		flag?this.textBorder.show():this.textBorder.hide();
+	}
+	setArcBorder(flag) {
+		flag?this.arcBorder.show():this.arcBorder.hide();
+	}
+	getTextBoundingRect() {
+		return createBoundingRect(this.text);
+	}
+	getArcBoundingRect() {
+		return createBoundingRect(this.control);
+	}
+	setControlColor(color) {
+		if (color) {
+			this.control.setStyle('fill', color);
+		}
+	}
+	setTextColor(color) {
+		if (color) {
+			this.text.setStyle('textFill', color);
+		}
+	}
+}

src/ibp/shape/element/textName.js

@@ -0,0 +1,71 @@
+// import Group from 'zrender/src/container/Group';
+import Text from 'zrender/src/graphic/Text';
+
+/** 名称元素*/
+export default function ETextName(model) {
+	const TextName = new Text({
+		_subType: '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;
+}
+// export default class ETextName extends Group {
+// 	constructor(model) {
+// 		super();
+// 		this.model = model;
+// 		this.zlevel = model.zlevel;
+// 		this.z = model.z;
+// 		this.create();
+// 	}
+
+// 	create() {
+// 		this.TextName = new Text({
+// 			_subType: this.model._subType,
+// 			zlevel: this.zlevel,
+// 			z: this.z,
+// 			silent: this.model.silent || false,
+// 			style: {
+// 				x: this.model.x,
+// 				y: this.model.y,
+// 				text: this.model.text,
+// 				textFont: this.model.textFont,
+// 				textFill: this.model.textFill,
+// 				textAlign: this.model.textAlign,
+// 				textPosition: this.model.textPosition || 'inside',
+// 				textVerticalAlign: this.model.textVerticalAlign || null
+// 			}
+// 		});
+// 		this.add(this.TextName);
+// 	}
+
+// 	setStyle(model) {
+// 		this.TextName.setStyle(model);
+// 	}
+
+// 	setColor(color) {
+// 		this.TextName.setStyle('textFill', color);
+// 	}
+
+// 	hide() {
+// 		this.TextName.hide();
+// 	}
+
+// 	show() {
+// 		this.TextName.show();
+// 	}
+// }

src/ibp/shape/factory.js

@@ -0,0 +1,19 @@
+import Arrow from './arrow';
+import deviceType from '../constant/deviceType';
+import Background from './background';
+
+const ibpShape = {};
+ibpShape[deviceType.Arrow] = Arrow;
+ibpShape[deviceType.Background] = Background;
+
+function shapefactory(device, ibp) {
+    console.log('device',device)
+	const type = device._type;
+	const shape = ibpShape[type];
+	if (shape instanceof Function) {
+		// eslint-disable-next-line
+        return new shape(device, ibp.style);
+	}
+}
+
+export default shapefactory;

src/ibp/transformHandle.js

@@ -0,0 +1,71 @@
+
+import {createTransform, createBoundingRect} from './utils/parser';
+
+class TransformHandle {
+	constructor(painter) {
+		this.$painter = painter;
+
+		this.parentLevel = painter.getParentLevel();
+
+		this.rect = { x: 0, y: 0, width: 0, height: 0 };
+
+		this.transform = createTransform({ scaleRate: 1, offsetX: 0, offsetY: 0 });
+	}
+
+	checkVisible(view) {
+		return createBoundingRect(view).intersect(this.rect);
+	}
+
+	revisibleView(view) {
+		if (this.checkVisible(view)) {
+			view.show();
+		} else {
+			view.hide();
+		}
+
+		view.dirty();
+	}
+
+	// 视图进行缩放/平移
+	transformView(view) {
+		if (view) {
+			view.transform = this.transform;
+			view.decomposeTransform();
+			this.revisibleView(view);
+		}
+		// return view;
+	}
+
+	// 处理所有视图缩放/平移
+	transformAll() {
+		this.traverse(this.transformView, this);
+	}
+
+	// 重新计算显示图形
+	revisibleAll() {
+		this.traverse(this.revisibleView, this);
+	}
+
+	// 更新偏移量
+	updateTransform(opts) {
+		this.transform = createTransform(opts);
+		this.transformAll();
+	}
+
+	// 更新画布尺寸
+	updateZrSize(opts) {
+		this.rect = { x: 0, y: 0, width: opts.width, height: opts.height };
+		this.revisibleAll();
+	}
+
+	// 遍历group执行回调
+	traverse(cb, context) {
+		this.parentLevel.eachChild(level => {
+			level.eachChild((view) => {
+				cb.call(context, view);
+			}, context);
+		}, context);
+	}
+}
+
+export default TransformHandle;

src/ibp/utils/parser.js

@@ -0,0 +1,81 @@
+import * as zrUtil from 'zrender/src/core/util';
+import * as matrix from 'zrender/src/core/matrix';
+import deviceType from '../constant/deviceType';
+import deviceRender from '../constant/deviceRender';
+import Vue from 'vue';
+import background from '../shape/background';
+
+export function createTransform(opts) {
+	let transform = matrix.create();
+	transform = matrix.scale(matrix.create(), transform, [opts.scaleRate, opts.scaleRate]);
+	transform = matrix.translate(matrix.create(), transform, [-opts.offsetX, -opts.offsetY]);
+	return transform;
+}
+
+export function createBoundingRect(view) {
+	const rect = view.getBoundingRect();
+	const scale = view.scale[0];
+	const offsetX = view.position[0];
+	const offsetY = view.position[1];
+	rect.x = rect.x * scale + offsetX;
+	rect.y = rect.y * scale + offsetY;
+	rect.width = rect.width * scale;
+	rect.height = rect.height * scale;
+	return rect;
+}
+
+export function calculateDCenter(viewRect, zrbound) {
+	var dx = (zrbound.width - viewRect.width) / 2 - viewRect.x;
+	var dy = 0;
+	return { dx: dx, dy: dy };
+}
+
+export function deviceFactory(type, elem) {
+	return Object.assign({ _type: type }, deviceRender[type], elem);
+}
+
+export function createDevice(type, model, propConvert) {
+	const device = deviceFactory(type, model);
+	return propConvert ? propConvert.initPrivateProps(device) : device;
+}
+
+export function parser(data, config) {
+	var ibpDevice = {};
+	const propConvert = null;
+	// var propConvert = skinCode ? Vue.prototype.$theme.loadPropConvert(skinCode): null;
+	if (data) {
+
+		Object.assign(data.background, config);
+		ibpDevice[data.background.code] = createDevice(deviceType.Background, data.background, propConvert);
+        console.log(data, '000',ibpDevice);
+		zrUtil.each(data.textList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.Text, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.squareButtonList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.SquareButton, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.lampControlList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.LampControl, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.warnButtonList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.WarnButton, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.arrowList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.rotatingButtonList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.RotatingButton, elem, propConvert);
+		}, this);
+
+		zrUtil.each(data.tipList || [], elem => {
+			ibpDevice[elem.code] = createDevice(deviceType.Tip, elem, propConvert);
+		}, this);
+	}
+
+	return ibpDevice;
+}

src/views/display/index.vue

@@ -18,6 +18,7 @@
         @tryTime="tryTime"
         @hidepanel="hidepanel"
         @quitQuest="quitQuest"
+        @showIbp="showIbp"
       />
 
       <menu-screen v-if="isScreen" ref="menuScreen" :offset="offset" :group="group" @tryTime="tryTime" />
@@ -45,6 +46,7 @@
 
     <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" />
     <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
+    <ibp-plate v-show="ibpShow" ref="ibpPlate" @hideIbp="hideIbp"/>
 
     <fault-choose ref="faultChoose" :group="group" />
     <run-plan-Load ref="runPlanLoad" :group="group" />
@@ -85,6 +87,7 @@ import Vue from 'vue';
 // 三维
 import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
 import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
+import IbpPlate from '@/views/ibp/index'
 
 export default {
 	name: 'DisplayDraft',
@@ -104,7 +107,8 @@ export default {
 		MenuSchema,
 		MenuSystemTime,
 		Jl3dSimulation,
-		Jl3dDrive
+		Jl3dDrive,
+        IbpPlate
 	},
 	mixins: [WindowResizeHandler],
 	props: {
@@ -137,7 +141,8 @@ export default {
 				'01': '01', // 现地 => 现地
 				'02': '02', // 行调 => 行调
 				'04': '02' // 司机加实 => 行调
-			}
+			},
+            ibpShow: false
 		};
 	},
 	computed: {
@@ -553,6 +558,11 @@ export default {
 				this.$refs.Jl3dSimulation.show(this.skinCode);
 			}
 		},
+        showIbp() {
+            this.panelShow = false;
+            this.ibpShow = true;
+            this.$refs.ibpPlate.show();
+        },
 		showpanel() {
 			this.panelShow = true;
 			this.simulationShow = false;
@@ -561,6 +571,10 @@ export default {
 			this.panelShow = true;
 			this.drivingShow = false;
 		},
+        hideIbp() {
+            this.panelShow = true;
+            this.ibpShow = false;
+        },
 		runPlanViewShow() {
 			this.$refs.runPlanView.doShow();
 		},

src/views/display/menuDemon.vue

@@ -7,6 +7,7 @@
     </div>
     <div class="display-draft">
       <el-button-group>
+        <!--<el-button @click="jumpIbp">IBP盘</el-button>-->
         <el-button type="jumpjlmap3d" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
         <template v-if="questId">
           <el-button type="danger" @click="handleQuitQuest">退出剧本</el-button>
@@ -185,6 +186,9 @@ export default {
 		jumpjlmap3d() {
 			this.$emit('hidepanel');
 		},
+        jumpIbp() {
+            this.$emit('showIbp')
+        },
 		setTryTime() {
 			if (this.try) {
 				this.$emit('tryTime', { time: this.tryTime, goodsId: this.goodsId });

src/views/ibp/index.vue

@@ -0,0 +1,154 @@
+<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>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import localStore from 'storejs';
+import IbpPan from '@/ibp/ibpPan';
+import { parser } from '@/ibp/utils/parser';
+import ibpData from '@/ibp/constant/ibpData'
+import { mapGetters } from 'vuex';
+
+export default {
+    name: 'Ibp',
+    components: {
+
+    },
+    data() {
+        return {
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            config: {
+                scaleRate: '1',
+                origin: {
+                    x: 0,
+                    y: 0
+                }
+            }
+        };
+    },
+    computed: {
+        ...mapGetters([
+            'canvasWidth',
+            'canvasHeight'
+        ]),
+        ibpId() {
+            const ibpId = ['ibp', (Math.random().toFixed(5)) * 100000].join('_');
+            // this.$store.dispatch('config/setCurrentIbpId', { id: ibpId });
+            return ibpId;
+        }
+    },
+    watch: {
+        '$store.state.config.canvasSizeCount': function (val) {
+            this.resetSize();
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+        if (this.$ibp) {
+            this.$ibp.dispose();
+        }
+    },
+    methods: {
+        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: {
+                    renderer: 'canvas',
+                    width: this.canvasWidth,
+                    height: this.canvasHeight
+                },
+                options: {
+                    scaleRate: 1,
+                    offsetX: 0,
+                    offsetY: 0
+                },
+                methods: {
+                    dataLoaded: this.handleDataLoaded,
+                    viewLoaded: this.handleViewLoaded,
+                    stateLoaded: this.handleStateLoaded
+                }
+            });
+            this.setMap(data);
+            console.log('+++++++++',this.$ibp);
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+        setMap(data) {
+            this.$ibp.setMap(data, data);
+        },
+        resetSize() {
+            this.$nextTick(() => {
+                this.width = this.$store.state.config.width;
+                this.height = this.$store.state.config.height;
+
+                this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
+            });
+        },
+        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);
+        },
+        // 右键点击事件
+        onContextMenu(em) {
+            this.$emit('onMenu', em);
+        },
+        // 缩小
+        setShrink() {
+            this.$ibp.setOptions({type: 'zoom', scale: -1});
+        },
+        // 放大
+        setMagnify() {
+            this.$ibp.setOptions({type: 'zoom', scale: 1});
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .ibp-button{
+        position: absolute;
+        float: right;
+        right: 20px;
+        bottom: 15px;
+    }
+    .ibp-canvas{
+        /*background-image: url('../../assets/ibp_images/ibp_bg.png');*/
+        /*background-repeat:repeat;*/
+        /*background-size: 4096px 2048px;*/
+        background-color: #0e151f;
+    }
+</style>