状态显示 代码调整
This commit is contained in:
joylink_cuiweidong
parent
c1356549ec
commit
85de91411e
@ -6,7 +6,7 @@ import Eventful from 'zrender/src/mixin/Eventful';
|
||||
import Painter from './painter';
|
||||
import Option from './option';
|
||||
import Controller from './controller';
|
||||
import StateHandle from './stateHandle';
|
||||
import StateHandle from './stateHandle';
|
||||
import ShapeFactory from './factory';
|
||||
import orders from './utils/orders';
|
||||
import shapeType from './constant/shapeType';
|
||||
@ -14,393 +14,399 @@ import shapeType from './constant/shapeType';
|
||||
const renderer = 'canvas';
|
||||
const devicePixelRatio = 1;
|
||||
class JMap {
|
||||
constructor(opts) {
|
||||
// 内部鼠标事件
|
||||
this.events = {
|
||||
__Pan: '__pan__',
|
||||
__Zoom: '__zoom__',
|
||||
__DragStart: '__dragStart__',
|
||||
__Dragging: '__dragging__',
|
||||
__DragEnd: '__dragEnd__',
|
||||
__SelectStart: '__selectStart__',
|
||||
__Selecting: '__selecting__',
|
||||
__SelectEnd: '__selectEnd__',
|
||||
__Selected: '__selected__',
|
||||
__Keyup: '__keyup__',
|
||||
__Keydown: '__keydown__'
|
||||
};
|
||||
constructor(opts) {
|
||||
// 内部鼠标事件
|
||||
this.events = {
|
||||
__Pan: '__pan__',
|
||||
__Zoom: '__zoom__',
|
||||
__DragStart: '__dragStart__',
|
||||
__Dragging: '__dragging__',
|
||||
__DragEnd: '__dragEnd__',
|
||||
__SelectStart: '__selectStart__',
|
||||
__Selecting: '__selecting__',
|
||||
__SelectEnd: '__selectEnd__',
|
||||
__Selected: '__selected__',
|
||||
__Keyup: '__keyup__',
|
||||
__Keydown: '__keydown__'
|
||||
};
|
||||
|
||||
// 初始化Map实例
|
||||
this.initMapInstance(opts);
|
||||
}
|
||||
// 初始化Map实例
|
||||
this.initMapInstance(opts);
|
||||
}
|
||||
|
||||
// 初始化属性有鼠标事件 缩放等
|
||||
initMapInstance(opts) {
|
||||
const width = opts.dom.clientWidth;
|
||||
const height = opts.dom.clientHeight;
|
||||
const optionHandler = this.setOption.bind(this);
|
||||
// 初始化属性有鼠标事件 缩放等
|
||||
initMapInstance(opts) {
|
||||
const width = opts.dom.clientWidth;
|
||||
const height = opts.dom.clientHeight;
|
||||
const optionHandler = this.setOption.bind(this);
|
||||
|
||||
this.draw = opts.draw;
|
||||
// 实例化zr
|
||||
this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config||{})});
|
||||
this.$zr.dom.setAttribute('tabIndex', -1);
|
||||
this.$zr.dom.style.cursor = 'auto';
|
||||
this.draw = opts.draw;
|
||||
// 实例化zr
|
||||
this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config || {})});
|
||||
this.$zr.dom.setAttribute('tabIndex', -1);
|
||||
this.$zr.dom.style.cursor = 'auto';
|
||||
|
||||
// 实例化缩放偏移缩放参数
|
||||
this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放
|
||||
// 实例化缩放偏移缩放参数
|
||||
this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option || {})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放
|
||||
|
||||
// 实例化绘图模块
|
||||
this.$painter = new Painter(this);
|
||||
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
|
||||
this.$painter.updateTransform(this.$option);
|
||||
// 实例化绘图模块
|
||||
this.$painter = new Painter(this);
|
||||
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
|
||||
this.$painter.updateTransform(this.$option);
|
||||
|
||||
// 实例化事件分发模块
|
||||
this.$controller = new Controller(this);
|
||||
this.$controller.enable();
|
||||
this.$controller.on(this.events.__Pan, optionHandler);
|
||||
this.$controller.on(this.events.__Zoom, optionHandler);
|
||||
// 实例化事件分发模块
|
||||
this.$controller = new Controller(this);
|
||||
this.$controller.enable();
|
||||
this.$controller.on(this.events.__Pan, optionHandler);
|
||||
this.$controller.on(this.events.__Zoom, optionHandler);
|
||||
|
||||
// 名声周期发射器
|
||||
this.$eventEmitter = new Eventful({});
|
||||
// 名声周期发射器
|
||||
this.$eventEmitter = new Eventful({});
|
||||
|
||||
// 数据容器工厂
|
||||
this.$shapeFactory = new ShapeFactory(this);
|
||||
// 数据容器工厂
|
||||
this.$shapeFactory = new ShapeFactory(this);
|
||||
|
||||
// 状态处理器
|
||||
this.$stateHandle = new StateHandle(this);
|
||||
// 状态处理器
|
||||
this.$stateHandle = new StateHandle(this);
|
||||
|
||||
this.disable = function() {
|
||||
this.off(this.events.Pan, optionHandler);
|
||||
this.off(this.events.Zoom, optionHandler);
|
||||
};
|
||||
this.disable = function() {
|
||||
this.off(this.events.Pan, optionHandler);
|
||||
this.off(this.events.Zoom, optionHandler);
|
||||
};
|
||||
|
||||
// 加载插件
|
||||
this.plugins = opts.plugins||[];
|
||||
this.plugins.forEach(el => { this.use(el); });
|
||||
}
|
||||
// 加载插件
|
||||
this.plugins = opts.plugins || [];
|
||||
this.plugins.forEach(el => { this.use(el); });
|
||||
}
|
||||
|
||||
setMap(templates=[], source={}, eventOpts={}) {
|
||||
// 清楚数据
|
||||
this.$shapeFactory.clear();
|
||||
this.$painter.clear();
|
||||
setMap(templates = [], source = {}, eventOpts = {}) {
|
||||
// 清楚数据
|
||||
this.$shapeFactory.clear();
|
||||
this.$painter.clear();
|
||||
|
||||
// 绑定事件
|
||||
this.$controller.enable(eventOpts);
|
||||
// 绑定事件
|
||||
this.$controller.enable(eventOpts);
|
||||
|
||||
// 更新视图位置
|
||||
this.$painter.updateTransform(this.$option);
|
||||
// 更新视图位置
|
||||
this.$painter.updateTransform(this.$option);
|
||||
|
||||
// 解析模板
|
||||
this.$shapeFactory.parseTemplates(templates)
|
||||
// 解析模板
|
||||
this.$shapeFactory.parseTemplates(templates);
|
||||
|
||||
// 数据加载完成 回调
|
||||
this.$eventEmitter.trigger(events.DataLoaded);
|
||||
// 数据加载完成 回调
|
||||
this.$eventEmitter.trigger(events.DataLoaded);
|
||||
|
||||
// 初次渲染视图
|
||||
this.repaint(source);
|
||||
// 初次渲染视图
|
||||
this.repaint(source);
|
||||
|
||||
// 设置默认状态
|
||||
this.setDefaultState();
|
||||
// 设置默认状态
|
||||
this.setDefaultState();
|
||||
|
||||
// 视图加载完成 回调
|
||||
this.$eventEmitter.trigger(events.ViewLoaded);
|
||||
// 视图加载完成 回调
|
||||
this.$eventEmitter.trigger(events.ViewLoaded);
|
||||
|
||||
// 返回视图缩放偏移
|
||||
this.$option.notice(this.$option);
|
||||
// 返回视图缩放偏移
|
||||
this.$option.notice(this.$option);
|
||||
|
||||
return this;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
setDefaultState() {
|
||||
this.$eventEmitter.trigger(events.StateLoaded);
|
||||
return this;
|
||||
}
|
||||
setDefaultState() {
|
||||
this.$eventEmitter.trigger(events.StateLoaded);
|
||||
return this;
|
||||
}
|
||||
|
||||
setOption(opts={}) {
|
||||
this.$option.update(opts.type == this.events.__Zoom? pullBack(this.$zr, this.$option, opts):opts);
|
||||
this.$painter.updateTransform(this.$option);
|
||||
setOption(opts = {}) {
|
||||
this.$option.update(opts.type == this.events.__Zoom ? pullBack(this.$zr, this.$option, opts) : opts);
|
||||
this.$painter.updateTransform(this.$option);
|
||||
|
||||
this.$controller.disable();
|
||||
this.$controller.enable();
|
||||
this.$controller.disable();
|
||||
this.$controller.enable();
|
||||
|
||||
this.$eventEmitter.trigger(events.OptionUpdate);
|
||||
return this;
|
||||
}
|
||||
this.$eventEmitter.trigger(events.OptionUpdate);
|
||||
return this;
|
||||
}
|
||||
|
||||
setCenter(code) {
|
||||
const shape = this.$shapeFactory.getShapeByCode(code);
|
||||
if (shape && shape) {
|
||||
var rect = utils.createBoundingRect(shape);
|
||||
var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() });
|
||||
this.setOption(center);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
setCenter(code) {
|
||||
const shape = this.$shapeFactory.getShapeByCode(code);
|
||||
if (shape && shape) {
|
||||
var rect = utils.createBoundingRect(shape);
|
||||
var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() });
|
||||
this.setOption(center);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
setBackgroundColor(color) {
|
||||
this.$zr.setBackgroundColor(color);
|
||||
return this;
|
||||
}
|
||||
setBackgroundColor(color) {
|
||||
this.$zr.setBackgroundColor(color);
|
||||
return this;
|
||||
}
|
||||
|
||||
setCursorStyle(cursorStyle='auto') {
|
||||
this.$zr.setCursorStyle(cursorStyle);
|
||||
return this;
|
||||
}
|
||||
setCursorStyle(cursorStyle = 'auto') {
|
||||
this.$zr.setCursorStyle(cursorStyle);
|
||||
return this;
|
||||
}
|
||||
|
||||
repaint(source={}) {
|
||||
this.$shapeFactory.parse(source, shape => {
|
||||
if (shape) {
|
||||
this.$painter.add(shape)
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
repaint(source = {}) {
|
||||
this.$shapeFactory.parse(source, shape => {
|
||||
if (shape) {
|
||||
this.$painter.add(shape);
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
render(list=[]) {
|
||||
list.forEach(({model, action}) => {
|
||||
let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
|
||||
let curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
|
||||
let deps = null;
|
||||
let oldShape = null
|
||||
let newShape = null;
|
||||
render(list = []) {
|
||||
list.forEach(({model, action}) => {
|
||||
let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action) : model;
|
||||
let curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
|
||||
let deps = null;
|
||||
let oldShape = null;
|
||||
let newShape = null;
|
||||
|
||||
if (updateModel) {
|
||||
this.$controller.clear();
|
||||
switch(action.order) {
|
||||
case orders.Binding:
|
||||
case orders.Add:
|
||||
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
|
||||
this.$shapeFactory.addShape(newShape)
|
||||
this.$painter.add(newShape);
|
||||
break;
|
||||
case orders.Delete:
|
||||
deps = curShape.getDepShapes();
|
||||
deps.forEach(el => {
|
||||
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el;
|
||||
if (updateModel) {
|
||||
curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
|
||||
oldShape = this.$shapeFactory.removeShape(curShape);
|
||||
this.$painter.remove(oldShape);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case orders.Update:
|
||||
oldShape = this.$shapeFactory.removeShape(curShape);
|
||||
this.$painter.remove(oldShape);
|
||||
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
|
||||
this.$shapeFactory.addShape(newShape)
|
||||
this.$painter.add(newShape);
|
||||
break;
|
||||
case orders.Unbinding:
|
||||
oldShape = this.$shapeFactory.removeShape(curShape);
|
||||
this.$painter.remove(oldShape);
|
||||
this.$shapeFactory.addShape(oldShape);
|
||||
this.$painter.add(oldShape);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (updateModel) {
|
||||
this.$controller.clear();
|
||||
switch (action.order) {
|
||||
case orders.Binding:
|
||||
case orders.Add:
|
||||
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
|
||||
this.$shapeFactory.addShape(newShape);
|
||||
this.$painter.add(newShape);
|
||||
break;
|
||||
case orders.Delete:
|
||||
deps = curShape.getDepShapes();
|
||||
deps.forEach(el => {
|
||||
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}) : el;
|
||||
if (updateModel) {
|
||||
curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
|
||||
oldShape = this.$shapeFactory.removeShape(curShape);
|
||||
this.$painter.remove(oldShape);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case orders.Update:
|
||||
oldShape = this.$shapeFactory.removeShape(curShape);
|
||||
this.$painter.remove(oldShape);
|
||||
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
|
||||
this.$shapeFactory.addShape(newShape);
|
||||
this.$painter.add(newShape);
|
||||
break;
|
||||
case orders.Unbinding:
|
||||
oldShape = this.$shapeFactory.removeShape(curShape);
|
||||
this.$painter.remove(oldShape);
|
||||
this.$shapeFactory.addShape(oldShape);
|
||||
this.$painter.add(oldShape);
|
||||
break;
|
||||
case orders.changeStatus:
|
||||
debugger;
|
||||
break;
|
||||
case orders.ResetStatus:
|
||||
debugger;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$eventEmitter.trigger(events.ViewUpdate, list);
|
||||
return this;
|
||||
}
|
||||
this.$eventEmitter.trigger(events.ViewUpdate, list);
|
||||
return this;
|
||||
}
|
||||
|
||||
update(list=[]) {
|
||||
this.$painter.update(this.$stateHandle.update(this.$shapeFactory, list));
|
||||
this.$eventEmitter.trigger(events.StateUpdate, list);
|
||||
return this;
|
||||
}
|
||||
update(list = []) {
|
||||
this.$painter.update(this.$stateHandle.update(this.$shapeFactory, list));
|
||||
this.$eventEmitter.trigger(events.StateUpdate, list);
|
||||
return this;
|
||||
}
|
||||
|
||||
getEvents() {
|
||||
return this.events;
|
||||
}
|
||||
getEvents() {
|
||||
return this.events;
|
||||
}
|
||||
|
||||
getZr() {
|
||||
return this.$zr;
|
||||
}
|
||||
getZr() {
|
||||
return this.$zr;
|
||||
}
|
||||
|
||||
getOption() {
|
||||
return this.$option;
|
||||
}
|
||||
getOption() {
|
||||
return this.$option;
|
||||
}
|
||||
|
||||
getPainter() {
|
||||
return this.$painter;
|
||||
}
|
||||
getPainter() {
|
||||
return this.$painter;
|
||||
}
|
||||
|
||||
getController() {
|
||||
return this.$controller;
|
||||
}
|
||||
getController() {
|
||||
return this.$controller;
|
||||
}
|
||||
|
||||
getStorage() {
|
||||
return this.$controller.getStorage();
|
||||
}
|
||||
getStorage() {
|
||||
return this.$controller.getStorage();
|
||||
}
|
||||
|
||||
getShapeFactory() {
|
||||
return this.$shapeFactory;
|
||||
}
|
||||
getShapeFactory() {
|
||||
return this.$shapeFactory;
|
||||
}
|
||||
|
||||
getShapeByCode(code) {
|
||||
return this.$shapeFactory.getShapeByCode(code);
|
||||
}
|
||||
getShapeByCode(code) {
|
||||
return this.$shapeFactory.getShapeByCode(code);
|
||||
}
|
||||
|
||||
getSource() {
|
||||
return this.$shapeFactory.getSource();
|
||||
}
|
||||
getSource() {
|
||||
return this.$shapeFactory.getSource();
|
||||
}
|
||||
|
||||
getMapShape() {
|
||||
return this.$shapeFactory.getMapShape();
|
||||
}
|
||||
getMapShape() {
|
||||
return this.$shapeFactory.getMapShape();
|
||||
}
|
||||
|
||||
getMapTemplate() {
|
||||
return this.$shapeFactory.getMapTemplate();
|
||||
}
|
||||
getMapTemplate() {
|
||||
return this.$shapeFactory.getMapTemplate();
|
||||
}
|
||||
|
||||
resize(opt) {
|
||||
this.$zr.resize(opt);
|
||||
this.$painter.updateZrSize(opt);
|
||||
}
|
||||
resize(opt) {
|
||||
this.$zr.resize(opt);
|
||||
this.$painter.updateZrSize(opt);
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.$painter.refresh();
|
||||
}
|
||||
refresh() {
|
||||
this.$painter.refresh();
|
||||
}
|
||||
|
||||
isDrawing() {
|
||||
return this.draw;
|
||||
}
|
||||
isDrawing() {
|
||||
return this.draw;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.$shapeFactory.clear();
|
||||
this.$controller.clear();
|
||||
this.$painter.clear();
|
||||
this.$zr.refresh()
|
||||
}
|
||||
clear() {
|
||||
this.$shapeFactory.clear();
|
||||
this.$controller.clear();
|
||||
this.$painter.clear();
|
||||
this.$zr.refresh();
|
||||
}
|
||||
|
||||
use(el) {
|
||||
this.plugins.includes(el)||this.plugins.push(el)
|
||||
el.install(this);
|
||||
}
|
||||
use(el) {
|
||||
this.plugins.includes(el) || this.plugins.push(el);
|
||||
el.install(this);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.disable();
|
||||
this.clear();
|
||||
this.$shapeFactory.destroy();
|
||||
this.$controller.destroy();
|
||||
this.$painter.destroy();
|
||||
this.$zr && this.$zr.dispose();
|
||||
this.plugins.forEach(el => {
|
||||
el.uninstall(this);
|
||||
})
|
||||
this.plugins = [];
|
||||
}
|
||||
destroy() {
|
||||
this.disable();
|
||||
this.clear();
|
||||
this.$shapeFactory.destroy();
|
||||
this.$controller.destroy();
|
||||
this.$painter.destroy();
|
||||
this.$zr && this.$zr.dispose();
|
||||
this.plugins.forEach(el => {
|
||||
el.uninstall(this);
|
||||
});
|
||||
this.plugins = [];
|
||||
}
|
||||
|
||||
on(name, cb, context) {
|
||||
const idx = Object.values(events).indexOf(name);
|
||||
if (idx >= 0) {
|
||||
switch (name) {
|
||||
case events.DataLoaded:
|
||||
this.$eventEmitter.on(events.DataLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewLoaded:
|
||||
this.$eventEmitter.on(events.ViewLoaded, cb, context);
|
||||
break;
|
||||
case events.StateLoaded:
|
||||
this.$eventEmitter.on(events.StateLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewUpdate:
|
||||
this.$eventEmitter.on(events.ViewUpdate, cb, context);
|
||||
break;
|
||||
case events.StateUpdate:
|
||||
this.$eventEmitter.on(events.StateUpdate, cb, context);
|
||||
break;
|
||||
case events.OptionUpdate:
|
||||
this.$eventEmitter.on(events.OptionUpdate, cb, context);
|
||||
break;
|
||||
on(name, cb, context) {
|
||||
const idx = Object.values(events).indexOf(name);
|
||||
if (idx >= 0) {
|
||||
switch (name) {
|
||||
case events.DataLoaded:
|
||||
this.$eventEmitter.on(events.DataLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewLoaded:
|
||||
this.$eventEmitter.on(events.ViewLoaded, cb, context);
|
||||
break;
|
||||
case events.StateLoaded:
|
||||
this.$eventEmitter.on(events.StateLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewUpdate:
|
||||
this.$eventEmitter.on(events.ViewUpdate, cb, context);
|
||||
break;
|
||||
case events.StateUpdate:
|
||||
this.$eventEmitter.on(events.StateUpdate, cb, context);
|
||||
break;
|
||||
case events.OptionUpdate:
|
||||
this.$eventEmitter.on(events.OptionUpdate, cb, context);
|
||||
break;
|
||||
|
||||
case events.Click:
|
||||
this.$controller.on(events.Click, cb, context);
|
||||
break;
|
||||
case events.ContextMenu:
|
||||
this.$controller.on(events.ContextMenu, cb, context);
|
||||
break;
|
||||
case events.Reflect:
|
||||
this.$controller.on(events.Reflect, _.throttle(cb, 200), context);
|
||||
break;
|
||||
case events.DataZoom:
|
||||
this.$controller.on(events.DataZoom, cb, context);
|
||||
break;
|
||||
case events.Keydown:
|
||||
this.$controller.on(events.Keydown, cb, context);
|
||||
break;
|
||||
case events.Keypress:
|
||||
this.$controller.on(events.Keypress, cb, context);
|
||||
break;
|
||||
case events.Keyup:
|
||||
this.$controller.on(events.Keyup, cb, context);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
case events.Click:
|
||||
this.$controller.on(events.Click, cb, context);
|
||||
break;
|
||||
case events.ContextMenu:
|
||||
this.$controller.on(events.ContextMenu, cb, context);
|
||||
break;
|
||||
case events.Reflect:
|
||||
this.$controller.on(events.Reflect, _.throttle(cb, 200), context);
|
||||
break;
|
||||
case events.DataZoom:
|
||||
this.$controller.on(events.DataZoom, cb, context);
|
||||
break;
|
||||
case events.Keydown:
|
||||
this.$controller.on(events.Keydown, cb, context);
|
||||
break;
|
||||
case events.Keypress:
|
||||
this.$controller.on(events.Keypress, cb, context);
|
||||
break;
|
||||
case events.Keyup:
|
||||
this.$controller.on(events.Keyup, cb, context);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
off(name, cb) {
|
||||
const idx = Object.values(events).indexOf(name);
|
||||
if (idx >= 0) {
|
||||
switch (name) {
|
||||
case events.DataLoaded:
|
||||
this.$eventEmitter.off(events.DataLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewLoaded:
|
||||
this.$eventEmitter.off(events.ViewLoaded, cb, context);
|
||||
break;
|
||||
case events.StateLoaded:
|
||||
this.$eventEmitter.off(events.StateLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewUpdate:
|
||||
this.$eventEmitter.off(events.ViewUpdate, cb, context);
|
||||
break;
|
||||
case events.StateUpdate:
|
||||
this.$eventEmitter.off(events.StateUpdate, cb, context);
|
||||
break;
|
||||
case events.OptionUpdate:
|
||||
this.$eventEmitter.off(events.OptionUpdate, cb, context);
|
||||
break;
|
||||
off(name, cb) {
|
||||
const idx = Object.values(events).indexOf(name);
|
||||
if (idx >= 0) {
|
||||
switch (name) {
|
||||
case events.DataLoaded:
|
||||
this.$eventEmitter.off(events.DataLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewLoaded:
|
||||
this.$eventEmitter.off(events.ViewLoaded, cb, context);
|
||||
break;
|
||||
case events.StateLoaded:
|
||||
this.$eventEmitter.off(events.StateLoaded, cb, context);
|
||||
break;
|
||||
case events.ViewUpdate:
|
||||
this.$eventEmitter.off(events.ViewUpdate, cb, context);
|
||||
break;
|
||||
case events.StateUpdate:
|
||||
this.$eventEmitter.off(events.StateUpdate, cb, context);
|
||||
break;
|
||||
case events.OptionUpdate:
|
||||
this.$eventEmitter.off(events.OptionUpdate, cb, context);
|
||||
break;
|
||||
|
||||
case events.Click:
|
||||
this.$controller.off(events.Click, cb);
|
||||
break;
|
||||
case events.ContextMenu:
|
||||
this.$controller.off(events.ContextMenu, cb);
|
||||
break;
|
||||
case events.Reflect:
|
||||
this.$controller.off(events.Reflect, _.throttle(cb, 200));
|
||||
break;
|
||||
case events.DataZoom:
|
||||
this.$controller.off(events.DataZoom, cb);
|
||||
break;
|
||||
case events.Keydown:
|
||||
this.$controller.off(events.Keydown, cb);
|
||||
break;
|
||||
case events.Keypress:
|
||||
this.$controller.off(events.Keypress, cb);
|
||||
break;
|
||||
case events.Keyup:
|
||||
this.$controller.off(events.Keyup, cb);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
case events.Click:
|
||||
this.$controller.off(events.Click, cb);
|
||||
break;
|
||||
case events.ContextMenu:
|
||||
this.$controller.off(events.ContextMenu, cb);
|
||||
break;
|
||||
case events.Reflect:
|
||||
this.$controller.off(events.Reflect, _.throttle(cb, 200));
|
||||
break;
|
||||
case events.DataZoom:
|
||||
this.$controller.off(events.DataZoom, cb);
|
||||
break;
|
||||
case events.Keydown:
|
||||
this.$controller.off(events.Keydown, cb);
|
||||
break;
|
||||
case events.Keypress:
|
||||
this.$controller.off(events.Keypress, cb);
|
||||
break;
|
||||
case events.Keyup:
|
||||
this.$controller.off(events.Keyup, cb);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function pullBack(zr, option={}, payload={}) {
|
||||
const zrWidth = zr.getWidth();
|
||||
const zrHeight = zr.getHeight();
|
||||
const originX = payload.originX || zrWidth / 2;
|
||||
const originY = payload.originY || zrHeight / 2;
|
||||
const x = (option.offsetX + originX) / option.scaleRate;
|
||||
const y = (option.offsetY + originY) / option.scaleRate;
|
||||
const newScaleRate = option.getScaleRate(payload.scale);
|
||||
const dx = originX - (x * newScaleRate - option.offsetX);
|
||||
const dy = originY - (y * newScaleRate - option.offsetY);
|
||||
return {...payload, dx, dy};
|
||||
function pullBack(zr, option = {}, payload = {}) {
|
||||
const zrWidth = zr.getWidth();
|
||||
const zrHeight = zr.getHeight();
|
||||
const originX = payload.originX || zrWidth / 2;
|
||||
const originY = payload.originY || zrHeight / 2;
|
||||
const x = (option.offsetX + originX) / option.scaleRate;
|
||||
const y = (option.offsetY + originY) / option.scaleRate;
|
||||
const newScaleRate = option.getScaleRate(payload.scale);
|
||||
const dx = originX - (x * newScaleRate - option.offsetX);
|
||||
const dy = originY - (y * newScaleRate - option.offsetY);
|
||||
return {...payload, dx, dy};
|
||||
}
|
||||
|
||||
export default JMap;
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
export default {
|
||||
Add: '&Add',
|
||||
Delete: '&DEL',
|
||||
Update: '&UPT',
|
||||
Binding: '&Binding',
|
||||
Unbinding: '&Unbinding',
|
||||
}
|
||||
Add: '&Add',
|
||||
Delete: '&DEL',
|
||||
Update: '&UPT',
|
||||
Binding: '&Binding',
|
||||
Unbinding: '&Unbinding',
|
||||
ChangeStatus:'&ChangeStatus',
|
||||
ResetStatus:'&ResetStatus'
|
||||
};
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
|
||||
<el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
|
||||
<el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button>
|
||||
<!-- <el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -333,25 +333,25 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
previewStatus(index, row) {
|
||||
// const that = this;
|
||||
// if(needDefault)
|
||||
const list = Object.values(row.covertStatusList);
|
||||
list.forEach(each=>{
|
||||
if (each.loop) {
|
||||
|
||||
} else {
|
||||
const frameList = each.frameList;
|
||||
frameList.forEach(frame=>{
|
||||
// frame.name;
|
||||
// frame.status;
|
||||
// this.$iscs.
|
||||
});
|
||||
}
|
||||
});
|
||||
// this.show = false;
|
||||
}
|
||||
// previewStatus(index, row) {
|
||||
// // const that = this;
|
||||
// // if(needDefault)
|
||||
// const list = Object.values(row.covertStatusList);
|
||||
// list.forEach(each=>{
|
||||
// if (each.loop) {
|
||||
|
||||
// } else {
|
||||
// const frameList = each.frameList;
|
||||
// frameList.forEach(frame=>{
|
||||
// // frame.name;
|
||||
// // frame.status;
|
||||
// // this.$iscs.
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// // this.show = false;
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -2,22 +2,37 @@
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<iscs-canvas ref="iscsCanvas" @selected="onSelected" />
|
||||
<iscs-canvas ref="iscsCanvas" @selected="onSelected" @setData="setData" />
|
||||
</div>
|
||||
<div class="right-card">
|
||||
<!-- :class="{'hide': draftShow}" -->
|
||||
<el-card type="border-card" class="heightClass">
|
||||
<div slot="header" class="clearfix">
|
||||
<!-- 组件id为{{ $route.query.id }} -->
|
||||
状态编辑
|
||||
状态预览
|
||||
<!-- -->
|
||||
<el-button
|
||||
type="text"
|
||||
style="float: right; padding: 3px 0; margin-right: 5px;"
|
||||
@click="resetDefaultStatus"
|
||||
>重置状态</el-button>
|
||||
</div>
|
||||
<div class="stateList">
|
||||
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab">
|
||||
<el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true">
|
||||
<!-- <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" /> -->
|
||||
<!-- stateList -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <el-card style="margin-top:10px;height:100%"> -->
|
||||
<div v-for="(state,index) in stateList" :key="index" class="eachStatus">
|
||||
<div>状态属性：{{ state.status }}</div>
|
||||
<div>状态描述：{{ state.description }}</div>
|
||||
<div>状态权重：{{ state.weight }}</div>
|
||||
<div>状态是否可以初始化：{{ state.needDefault?'是':'否' }}</div>
|
||||
<el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(state)">预览</el-button>
|
||||
</div>
|
||||
<!-- </el-card> -->
|
||||
<!-- <el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> -->
|
||||
<!-- <el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true"> -->
|
||||
<!-- <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" /> -->
|
||||
<!-- stateList -->
|
||||
<!-- </el-tab-pane> -->
|
||||
<!-- </el-tabs> -->
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -25,8 +40,10 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import iscsCanvas from './iscsCanvas';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
export default {
|
||||
name:'IscsPreview',
|
||||
components: {
|
||||
@ -37,62 +54,113 @@ export default {
|
||||
draftShow: false,
|
||||
selected: null,
|
||||
statusTab:'',
|
||||
composeElemList:[]
|
||||
stateList:[],
|
||||
elementList:[]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('getComposeElemList', () => {
|
||||
this.getComposeElemList();
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
onSelectTab() {
|
||||
|
||||
},
|
||||
getComposeElemList() {
|
||||
const source = this.$iscs.getSource();
|
||||
if (source &&
|
||||
source.elementList &&
|
||||
source.elementList.length) {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
} else {
|
||||
this.composeElemList = [];
|
||||
}
|
||||
setData(data ) {
|
||||
this.stateList = data.stateList;
|
||||
this.elementList = utils.deepClone(data.shapeList);
|
||||
},
|
||||
previewStatus(data) {
|
||||
this.resetDefaultStatus();
|
||||
const that = this;
|
||||
const list = Object.values(data.covertStatusList);
|
||||
list.forEach(each=>{
|
||||
if (each.loop) {
|
||||
debugger;
|
||||
// ChangeStatus
|
||||
} else {
|
||||
const frameList = each.frameList;
|
||||
frameList.forEach(frame=>{
|
||||
const element = that.elementList.find(ele=>{ return ele.name == frame.name; });
|
||||
if (element) {
|
||||
const elementStyle = element.stateList.find(state=>{ return state.status == frame.status; });
|
||||
if (elementStyle) {
|
||||
const model = utils.deepClone(element);
|
||||
const style = elementStyle.style || {};
|
||||
// model.changeStyle =
|
||||
// if (style && JSON.stringify(style) != '{}') {
|
||||
// const keys = Object.keys(style);
|
||||
// keys.forEach(eachKey=>{
|
||||
// model.style[eachKey] = style[eachKey];
|
||||
// });
|
||||
// }
|
||||
const shape = elementStyle.shape || {};
|
||||
// if (shape && JSON.stringify(shape) != '{}') {
|
||||
// const keys = Object.keys(shape);
|
||||
// keys.forEach(eachShape=>{
|
||||
// model.shape[eachShape] = style[eachShape];
|
||||
// });
|
||||
// }
|
||||
// this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
resetDefaultStatus() {
|
||||
this.elementList.forEach(element=>{
|
||||
const model = utils.deepClone(element);
|
||||
// this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ResetStatus}}]);
|
||||
});
|
||||
},
|
||||
// getComposeElemList() {
|
||||
// const source = this.$iscs.getSource();
|
||||
// if (source &&
|
||||
// source.elementList &&
|
||||
// source.elementList.length) {
|
||||
// this.composeElemList = source.elementList;
|
||||
// this.statusTab = this.composeElemList[0].code;
|
||||
// } else {
|
||||
// this.composeElemList = [];
|
||||
// }
|
||||
// },
|
||||
onSelected(em) {
|
||||
// if (em.model) {
|
||||
// this.selected = JSON.parse(JSON.stringify(em.model));
|
||||
// const elem = this.elementList.find(el => el.type == this.selected.type);
|
||||
// if (elem) {
|
||||
// elem.model = this.selected;
|
||||
// this.enabledTab = this.selected.type;
|
||||
// this.cardTab = 'first';
|
||||
// }
|
||||
// } else {
|
||||
// this.selected = null;
|
||||
// this.clear(this.enabledTab);
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
left:0;top:0;
|
||||
}
|
||||
.right-card{
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
left:0;top:0;
|
||||
}
|
||||
.right-card{
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
.heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
|
||||
.eachStatus{
|
||||
padding: 15px 30px;
|
||||
border-bottom: 1px #ccc solid;
|
||||
line-height: 150%;
|
||||
}
|
||||
.statelist{
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.heightClass .el-card__body{
|
||||
flex:1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
// 初始化窗口
|
||||
// 初始化窗口
|
||||
init() {
|
||||
document.getElementById(this.iscsId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
@ -82,55 +82,55 @@ export default {
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
plugins: [
|
||||
// ShapeBuilder,
|
||||
// ShapeProperty,
|
||||
// ShapeContextMenu
|
||||
]
|
||||
plugins: [
|
||||
// ShapeBuilder,
|
||||
// ShapeProperty,
|
||||
// ShapeContextMenu
|
||||
]
|
||||
});
|
||||
|
||||
const option = {
|
||||
panEnable: true,
|
||||
zoomEnable: true,
|
||||
keyEnable: true,
|
||||
draggle: false,
|
||||
selecting: false,
|
||||
selectable: false,
|
||||
reflect: true
|
||||
}
|
||||
if (this.$route.query.id) {
|
||||
setTimeout(_ => {
|
||||
Idb.select('composeList', this.$route.query.id).then(resp => {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: resp.elementList||[],
|
||||
composeList: resp.composeList||[]
|
||||
}, option);
|
||||
EventBus.$emit('getComposeElemList');
|
||||
}).catch(error => {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, option);
|
||||
})
|
||||
}, 1000)
|
||||
} else {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, option);
|
||||
}
|
||||
const option = {
|
||||
panEnable: true,
|
||||
zoomEnable: true,
|
||||
keyEnable: true,
|
||||
draggle: false,
|
||||
selecting: false,
|
||||
selectable: false,
|
||||
reflect: true
|
||||
};
|
||||
if (this.$route.query.id) {
|
||||
setTimeout(_ => {
|
||||
Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: resp.shapeList || [],
|
||||
composeList: resp.composeList || []
|
||||
}, option);
|
||||
this.$emit('setData', resp);
|
||||
}).catch(error => {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, option);
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, option);
|
||||
}
|
||||
|
||||
Vue.prototype.$iscs = this.$iscs;
|
||||
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
|
||||
this.$iscs.on('contextmenu', this.onContextMenu, this);
|
||||
// this.$iscs.on('click', this.onClick, this);
|
||||
this.$iscs.on('reflect', this.onReflect, this);
|
||||
this.$iscs.on('reflect', this.onReflect, this);
|
||||
this.$iscs.on('keyboard', this.onKeyboard, this);
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
// 视图加载完成
|
||||
// 视图加载完成
|
||||
onViewLoaded(e) {
|
||||
},
|
||||
// 键盘快捷键事件
|
||||
@ -138,38 +138,38 @@ export default {
|
||||
console.log(hook);
|
||||
},
|
||||
// 点击选择事件
|
||||
onClick(em={}) {
|
||||
this.$emit('selected', em);
|
||||
onClick(em = {}) {
|
||||
this.$emit('selected', em);
|
||||
},
|
||||
onReflect(em = {}) {
|
||||
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
|
||||
},
|
||||
onReflect(em={}) {
|
||||
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
|
||||
},
|
||||
// 右键点击事件
|
||||
onContextMenu(em={}) {
|
||||
this.$emit('contextMenu', em.model);
|
||||
onContextMenu(em = {}) {
|
||||
this.$emit('contextMenu', em.model);
|
||||
},
|
||||
// 执行操作
|
||||
doAction(list) {
|
||||
this.$iscs && this.$iscs.render(list);
|
||||
},
|
||||
// 消息处理
|
||||
stateMessage(val) {
|
||||
// 执行操作
|
||||
doAction(list) {
|
||||
this.$iscs && this.$iscs.render(list);
|
||||
},
|
||||
// 消息处理
|
||||
stateMessage(val) {
|
||||
this.$iscs && this.$iscs.setDeviceStatus(val);
|
||||
},
|
||||
// 充值窗口大小
|
||||
// 充值窗口大小
|
||||
resize() {
|
||||
this.$nextTick(() => {
|
||||
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
// 销毁
|
||||
// 销毁
|
||||
destroy() {
|
||||
if (this.$iscs) {
|
||||
this.$iscs.destroy();
|
||||
this.$iscs = null;
|
||||
Vue.prototype.$iscs = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user