Merge branch 'dev' into test
This commit is contained in:
commit
a0292849e2
BIN
src/assets/ibp_images/ibp_bg.png
Normal file
BIN
src/assets/ibp_images/ibp_bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.0 MiB |
BIN
src/assets/ibp_images/red_button.png
Normal file
BIN
src/assets/ibp_images/red_button.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 88 KiB |
BIN
src/assets/ibp_images/red_button_on.png
Normal file
BIN
src/assets/ibp_images/red_button_on.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
44
src/ibp/constant/deviceRender.js
Normal file
44
src/ibp/constant/deviceRender.js
Normal file
@ -0,0 +1,44 @@
|
||||
import deviceType from './deviceType';
|
||||
|
||||
const deviceRender = {};
|
||||
|
||||
/** Text渲染配置*/
|
||||
deviceRender[deviceType.Text] = {
|
||||
zlevel: 1
|
||||
};
|
||||
|
||||
/** SquareButton渲染配置*/
|
||||
deviceRender[deviceType.SquareButton] = {
|
||||
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
|
||||
};
|
||||
|
||||
/** CircularLamp渲染配置 */
|
||||
deviceRender[deviceType.CircularLamp] = {
|
||||
zlevel: 1
|
||||
};
|
||||
export default deviceRender;
|
12
src/ibp/constant/deviceType.js
Normal file
12
src/ibp/constant/deviceType.js
Normal file
@ -0,0 +1,12 @@
|
||||
const deviceType = {
|
||||
Text: 'Text',
|
||||
SquareButton: 'SquareButton',
|
||||
WarnButton: 'WarnButton',
|
||||
Arrow: 'Arrow',
|
||||
RotatingButton: 'RotatingButton',
|
||||
Tip: 'Tip',
|
||||
Background: 'Background',
|
||||
CircularLamp: 'CircularLamp'
|
||||
};
|
||||
|
||||
export default deviceType;
|
51
src/ibp/constant/ibpData.js
Normal file
51
src/ibp/constant/ibpData.js
Normal file
@ -0,0 +1,51 @@
|
||||
|
||||
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: '车辆段方向'
|
||||
}
|
||||
],
|
||||
circularLampList: [
|
||||
{
|
||||
type: 'CircularLamp',
|
||||
code: '1333_lamp',
|
||||
point: {
|
||||
x: 600,
|
||||
y: 600
|
||||
},
|
||||
r: 40,
|
||||
fillColor: '#332C22'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default ibpData;
|
306
src/ibp/ibpPan.js
Normal file
306
src/ibp/ibpPan.js
Normal file
@ -0,0 +1,306 @@
|
||||
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 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;
|
201
src/ibp/mouseController.js
Normal file
201
src/ibp/mouseController.js
Normal file
@ -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(ibp) {
|
||||
super();
|
||||
this.$ibp = ibp;
|
||||
this.$zr = ibp.getZr();
|
||||
this.events = ibp.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.$ibp.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.$ibp.getDeviceByCode(oldEm.deviceCode) || {};
|
||||
var newDevice = this.$ibp.getDeviceByCode(newEm.deviceCode) || {};
|
||||
var oldInstance = (this.$ibp.getDeviceByCode(oldEm.deviceCode) || {}).instance || {};
|
||||
var newInstance = (this.$ibp.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;
|
100
src/ibp/options.js
Normal file
100
src/ibp/options.js
Normal file
@ -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;
|
194
src/ibp/painter.js
Normal file
194
src/ibp/painter.js
Normal file
@ -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;
|
37
src/ibp/shape/arrow.js
Normal file
37
src/ibp/shape/arrow.js
Normal file
@ -0,0 +1,37 @@
|
||||
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;
|
||||
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;
|
50
src/ibp/shape/background.js
Normal file
50
src/ibp/shape/background.js
Normal file
@ -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);
|
||||
}
|
||||
}
|
163
src/ibp/shape/button.js
Normal file
163
src/ibp/shape/button.js
Normal file
@ -0,0 +1,163 @@
|
||||
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';
|
||||
|
||||
export default class button extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create();
|
||||
this.createMouseEvent();
|
||||
}
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.imageBg = new Image({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
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
|
||||
}
|
||||
});
|
||||
this.add(this.imageBg);
|
||||
}
|
||||
|
||||
// 设置按钮状态
|
||||
setState(model) {
|
||||
switch (model.status) {
|
||||
case '01': this.close(); break; // 关闭
|
||||
case '02': this.open(); 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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); });
|
||||
// }
|
||||
|
||||
// 关闭
|
||||
close() {
|
||||
this.imageBg.setStyle({image: buttonPic});
|
||||
}
|
||||
// 开放
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
33
src/ibp/shape/circularLamp.js
Normal file
33
src/ibp/shape/circularLamp.js
Normal file
@ -0,0 +1,33 @@
|
||||
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) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
this.lamp = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
cx: this.model.point.x,
|
||||
cy: this.model.point.y,
|
||||
r: this.model.r
|
||||
},
|
||||
style: {
|
||||
fill: this.model.fillColor
|
||||
}
|
||||
});
|
||||
this.add(this.lamp);
|
||||
}
|
||||
|
||||
setCircularLampColor(color) {
|
||||
this.lamp.setStyle('fill', color);
|
||||
}
|
||||
}
|
25
src/ibp/shape/element/textName.js
Normal file
25
src/ibp/shape/element/textName.js
Normal file
@ -0,0 +1,25 @@
|
||||
// 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;
|
||||
}
|
20
src/ibp/shape/factory.js
Normal file
20
src/ibp/shape/factory.js
Normal file
@ -0,0 +1,20 @@
|
||||
import Arrow from './arrow';
|
||||
import deviceType from '../constant/deviceType';
|
||||
import Background from './background';
|
||||
import CircularLamp from './circularLamp'
|
||||
|
||||
const ibpShape = {};
|
||||
ibpShape[deviceType.Arrow] = Arrow;
|
||||
ibpShape[deviceType.Background] = Background;
|
||||
ibpShape[deviceType.CircularLamp] = CircularLamp;
|
||||
|
||||
function shapefactory(device, ibp) {
|
||||
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;
|
71
src/ibp/transformHandle.js
Normal file
71
src/ibp/transformHandle.js
Normal file
@ -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;
|
78
src/ibp/utils/parser.js
Normal file
78
src/ibp/utils/parser.js
Normal file
@ -0,0 +1,78 @@
|
||||
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';
|
||||
|
||||
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);
|
||||
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.circularLampList || [], elem => {
|
||||
ibpDevice[elem.code] = createDevice(deviceType.CircularLamp, 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;
|
||||
}
|
@ -276,7 +276,7 @@ class SkinCode extends defaultStyle {
|
||||
emergencyControlShow: true, // 紧急站控显示
|
||||
centerControlShow: true, // 中控显示
|
||||
substationControlShow: true, // 站控按钮显示
|
||||
turnedAroundControlShow: false // 按图折返显示
|
||||
turnedAroundControlShow: true // 按图折返显示
|
||||
},
|
||||
arrow: {
|
||||
show: false // 控制模式箭头显隐
|
||||
|
@ -4,7 +4,7 @@ export function getBaseUrl() {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.9.255:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
|
||||
// BASE_API = 'http://192.168.3.4:9000' // 琰培
|
||||
} else {
|
||||
|
@ -177,7 +177,10 @@ export default {
|
||||
},
|
||||
|
||||
async confirm() {
|
||||
await this.$store.dispatch('training/over');
|
||||
await this.$store.dispatch('training/setMapDefaultState');
|
||||
await this.$store.dispatch('map/clearJlmapTrainView');
|
||||
await this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
this.$emit('selectQuest', this.row, this.form.role);
|
||||
this.doClose();
|
||||
this.roleDoClose();
|
||||
|
@ -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();
|
||||
},
|
||||
|
@ -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 });
|
||||
|
@ -4,11 +4,11 @@
|
||||
<b>课程名称: {{ courseModel.name }}</b>
|
||||
</div>
|
||||
<div style=" margin:50px" :style="{ height: height - 150 +'px' }">
|
||||
<p style="font-size: 14px; margin-bottom: 20px"> 课程说明:
|
||||
<!-- <p style="font-size: 14px; margin-bottom: 20px"> 课程说明:
|
||||
<span style="color: #808080 !important;">
|
||||
{{ courseModel.remarks }}
|
||||
</span>
|
||||
</p>
|
||||
</p> -->
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="试题列表" name="first">
|
||||
<div v-if="courseModel.detail.length != 0" :style="{ height: height - 230 +'px' }">
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
resizeHandler: function () {
|
||||
this.height = this._clientHeight - 40;
|
||||
this.height = this._clientHeight - 91;
|
||||
},
|
||||
loadInitPage(lessonId = this.$route.params.lessonId) {
|
||||
if (lessonId) {
|
||||
|
154
src/views/ibp/index.vue
Normal file
154
src/views/ibp/index.vue
Normal file
@ -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>
|
@ -114,7 +114,7 @@ export default {
|
||||
},
|
||||
|
||||
handleDelete(index, row) {
|
||||
this.$confirm(this.$t('global.wellDelType'), this.$t('global.tips'), {
|
||||
this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
cancelButtonText: this.$t('global.cancel'),
|
||||
type: 'warning'
|
||||
|
@ -455,6 +455,15 @@ export default {
|
||||
routeData(val, old) {
|
||||
if (val) {
|
||||
this.addModel = val;
|
||||
this.addModel.routeFlankProtectionList.forEach(item => {
|
||||
item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位';
|
||||
});
|
||||
this.addModel.routeOverlapSwitchList.forEach(item => {
|
||||
item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位';
|
||||
});
|
||||
this.addModel.routeSwitchList.forEach(item => {
|
||||
item.switchLocateType == '01' ? item.switchType = '定位' : item.switchType = '反位';
|
||||
});
|
||||
}
|
||||
},
|
||||
routeName(val, old) {
|
||||
|
@ -130,7 +130,9 @@ export default {
|
||||
if (parseInt(this.mapInfo.id)) {
|
||||
this.mapInfo.name = this.$route.query.name;
|
||||
getMapDetail(this.$route.params.mapId).then(response => {
|
||||
this.$store.dispatch('map/setMapData', response.data);
|
||||
this.$store.dispatch('map/setMapData', response.data).then(resp => {
|
||||
this.$store.dispatch('training/setMapDefaultState');
|
||||
});
|
||||
this.setDelayUnlockStatus(response.data, '00');
|
||||
this.initAutoSaveTask();
|
||||
}).catch(() => {
|
||||
|
@ -154,11 +154,10 @@ export default {
|
||||
methods: {
|
||||
show() {
|
||||
const dataZoom = this.$store.state.map.dataZoom;
|
||||
const mapData = this.$store.state.map.map.skinVO;
|
||||
if (dataZoom) {
|
||||
this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX) || mapData.origin.x;
|
||||
this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY) || mapData.origin.y;
|
||||
this.updtModel.scaling = dataZoom.scaleRate || mapData.scaling;
|
||||
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;
|
||||
},
|
||||
@ -178,7 +177,6 @@ export default {
|
||||
this.loading = true;
|
||||
if (this.basicInfo) {
|
||||
this.editModel.id = this.$route.params.mapId;
|
||||
// this.editModel.skinCode = skinCode;
|
||||
this.$refs['edit'].validate((valid) => {
|
||||
if (valid) {
|
||||
updateMap(this.editModel).then(response => {
|
||||
|
@ -212,9 +212,9 @@ export default {
|
||||
};
|
||||
},
|
||||
init() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$route.params.ruleId != 0) {
|
||||
getExamLessonDetail(this.$route.params.ruleId).then(res => {
|
||||
this.$nextTick(() => {
|
||||
this.formDetail = {
|
||||
name: res.data.name,
|
||||
region: `${res.data.lessonId}`,
|
||||
@ -226,6 +226,7 @@ export default {
|
||||
fullMark: res.data.fullPoint,
|
||||
passMark: res.data.passingPoint
|
||||
};
|
||||
|
||||
if (!this.form.name) {
|
||||
this.$store.dispatch('app/handleCourseDetail', this.formDetail);
|
||||
this.form = this.formDetail;
|
||||
@ -233,8 +234,10 @@ export default {
|
||||
this.$store.dispatch('app/handleCourseDetail', this.form);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
@ -271,6 +274,7 @@ export default {
|
||||
this.form.region = this.$route.params.lessonId;
|
||||
this.selectDisable = true;
|
||||
}
|
||||
this.$nextTick(() => { this.$refs.form.clearValidate(); });
|
||||
}).catch(() => {
|
||||
this.$messageBox('刷新失败');
|
||||
});
|
||||
|
@ -3,7 +3,6 @@
|
||||
<div v-if="lessonName" slot="header" style="text-align: center;">
|
||||
<b>{{ $t('publish.lessonName') }}: {{ lessonName }}</b>
|
||||
</div>
|
||||
<!-- <turnback-bar :title="turnbackBarTitle"></turnback-bar> -->
|
||||
<div class="exam-box" :style="{ height: height +'px' }">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" style="">
|
||||
<el-steps class="steps" :active="display">
|
||||
@ -21,7 +20,7 @@
|
||||
<div class="draft">
|
||||
<el-button-group>
|
||||
<el-button v-if="isPrevStep" type="primary" @click="prevStep">{{ this.$t('global.lastStep') }}</el-button>
|
||||
<el-button v-if="isNextStep" type="primary" @click="nextStep">{{ this.$t('global.lastStep') }}</el-button>
|
||||
<el-button v-if="isNextStep" type="primary" @click="nextStep">{{ this.$t('global.nextStep') }}</el-button>
|
||||
<el-button v-if="isUpdate" type="warning" @click="update">{{ $t('global.update') }}</el-button>
|
||||
<el-button v-if="isCreate" type="primary" @click="create">{{ $t('global.create') }}</el-button>
|
||||
<el-button type="primary" @click="turnback">{{ $t('global.back') }}</el-button>
|
||||
@ -57,9 +56,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// turnbackBarTitle() {
|
||||
// return '';
|
||||
// },
|
||||
isPrevStep() {
|
||||
return this.display == 2;
|
||||
},
|
||||
@ -79,7 +75,7 @@ export default {
|
||||
methods: {
|
||||
resizeHandler: function () {
|
||||
if (/\/exam\//.test(`${this.$route.path}`)) {
|
||||
this.height = this._clientHeight - 50;
|
||||
this.height = this._clientHeight - 92;
|
||||
} else {
|
||||
this.height = this._clientHeight - 65;
|
||||
}
|
||||
|
@ -188,7 +188,7 @@ export default {
|
||||
methods: {
|
||||
resizeHandler: function () {
|
||||
if (/\/exam\//.test(`${this.$route.path}`)) {
|
||||
this.height = this._clientHeight - 50;
|
||||
this.height = this._clientHeight - 92;
|
||||
}
|
||||
},
|
||||
loadInitData() {
|
||||
|
Loading…
Reference in New Issue
Block a user