2019-07-08 09:38:39 +08:00
|
|
|
import * as zrUtil from 'zrender/src/core/util';
|
2019-07-03 14:29:09 +08:00
|
|
|
import Painter from './painter';
|
|
|
|
import ProxyHandle from './proxyHandle';
|
2019-07-03 18:41:00 +08:00
|
|
|
import deviceState from './config/deviceState';
|
2019-07-04 09:20:51 +08:00
|
|
|
import deviceStyle from './config/deviceStyle';
|
2019-07-04 18:39:30 +08:00
|
|
|
import deviceType from './config/deviceType';
|
|
|
|
import { parser, deviceFactory } from './utils/parser';
|
2019-07-03 14:29:09 +08:00
|
|
|
|
|
|
|
class Jmap {
|
2019-07-04 10:59:40 +08:00
|
|
|
constructor(opts) {
|
|
|
|
// 挂载的dom节点
|
|
|
|
this.$dom = opts.dom;
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 原始数据
|
|
|
|
this.data = {};
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 默认初始状态
|
|
|
|
this.defaultStateDict = this.loaddefaultState();
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 皮肤参数
|
|
|
|
this.skinStyle = '';
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 皮肤风格
|
|
|
|
this.styleDict = {};
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 设备数据
|
|
|
|
this.mapDevice = {};
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 设备代理数据
|
|
|
|
this.proxyData = {};
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 绘图模块
|
|
|
|
this.$painter = new Painter(this, opts);
|
|
|
|
}
|
2019-07-03 14:29:09 +08:00
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
/**
|
2019-07-03 18:41:00 +08:00
|
|
|
* 加载数据
|
2019-07-04 10:59:40 +08:00
|
|
|
* @param {*} data
|
2019-07-03 18:41:00 +08:00
|
|
|
*/
|
2019-07-04 10:59:40 +08:00
|
|
|
loadData(skinStyle, data) {
|
|
|
|
// 保存原始数据
|
|
|
|
this.data = data;
|
|
|
|
|
2019-07-04 11:00:52 +08:00
|
|
|
// 加载皮肤
|
|
|
|
this.styleDict = this.loadStyle(skinStyle);
|
|
|
|
|
2019-07-08 09:38:39 +08:00
|
|
|
console.log('开始解析');
|
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 解析地图数据
|
|
|
|
this.mapDevice = parser(data, this.defaultStateDict);
|
2019-07-08 09:38:39 +08:00
|
|
|
console.log('解析数据完成');
|
2019-07-04 10:59:40 +08:00
|
|
|
|
|
|
|
// 生成代理对象
|
2019-07-04 18:39:30 +08:00
|
|
|
this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this));
|
2019-07-04 10:59:40 +08:00
|
|
|
|
2019-07-08 09:38:39 +08:00
|
|
|
console.log('数据加载完成: dataLoaded');
|
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
// 初次渲染视图
|
2019-07-04 18:39:30 +08:00
|
|
|
this.$painter.repaint(this.mapDevice, this.styleDict);
|
2019-07-08 09:38:39 +08:00
|
|
|
|
|
|
|
console.log('状态加载完成: stateLoaded');
|
2019-07-04 11:00:52 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
loadStyle(skinStyle) {
|
|
|
|
return deviceStyle;
|
2019-07-04 10:59:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
loaddefaultState() {
|
|
|
|
const defaultStateDict = {};
|
|
|
|
|
2019-07-08 09:38:39 +08:00
|
|
|
zrUtil.each(Object.keys(deviceState), (type) => {
|
2019-07-04 10:59:40 +08:00
|
|
|
defaultStateDict[type] = {};
|
2019-07-08 09:38:39 +08:00
|
|
|
zrUtil.each(Object.keys(deviceState[type] || {}), (state) => {
|
2019-07-04 10:59:40 +08:00
|
|
|
defaultStateDict[type][state] = deviceState[type][state].Default;
|
2019-07-08 09:38:39 +08:00
|
|
|
})
|
|
|
|
})
|
2019-07-04 10:59:40 +08:00
|
|
|
|
|
|
|
return defaultStateDict;
|
|
|
|
}
|
|
|
|
|
2019-07-04 18:39:30 +08:00
|
|
|
syncData(model) {
|
|
|
|
let code = model.code;
|
|
|
|
let type = model.type;
|
2019-07-05 00:40:53 +08:00
|
|
|
let dispose = model._dispose;
|
2019-07-04 18:39:30 +08:00
|
|
|
|
|
|
|
let prop = null;
|
|
|
|
switch (type) {
|
|
|
|
case deviceType.Link: prop = 'linkList'; break;
|
|
|
|
}
|
|
|
|
|
|
|
|
let list = this.data[prop];
|
|
|
|
if (list) {
|
|
|
|
let idex = list.findIndex(elem => { return elem.code == code });
|
|
|
|
if (idex >= 0) {
|
2019-07-05 00:40:53 +08:00
|
|
|
dispose && list.splice(idex, 1);
|
2019-07-04 18:39:30 +08:00
|
|
|
} else {
|
|
|
|
list.push(model);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render(list) {
|
|
|
|
(list || []).forEach(elem => {
|
|
|
|
let type = elem.type;
|
|
|
|
let code = elem.code;
|
|
|
|
let device = this.proxyData[code] || deviceFactory(type, this.styleDict[type], elem);
|
|
|
|
let model = Object.assign(device.model || {}, elem);
|
|
|
|
delete this.proxyData[code];
|
|
|
|
if (!elem._dispose) {
|
|
|
|
device = this.proxyData[code] = Object.assign(device, { model });
|
|
|
|
}
|
|
|
|
|
2019-07-08 09:38:39 +08:00
|
|
|
// this.syncData(model);
|
2019-07-04 18:39:30 +08:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
update(list) {
|
|
|
|
(list || []).forEach(elem => {
|
|
|
|
let code = elem.code;
|
|
|
|
if (elem._dispose) {
|
|
|
|
delete this.proxyData[code];
|
|
|
|
} else {
|
|
|
|
let device = this.proxyData[code] || {};
|
|
|
|
let state = Object.assign(device.state || {}, elem);
|
|
|
|
this.proxyData[code] = Object.assign(device, { state });
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
getPainter() {
|
|
|
|
return this.$painter;
|
|
|
|
}
|
|
|
|
|
2019-07-04 18:39:30 +08:00
|
|
|
getSkinStyle() {
|
|
|
|
return this.skinStyle;
|
|
|
|
}
|
|
|
|
|
|
|
|
getStyleDict() {
|
|
|
|
return this.styleDict;
|
|
|
|
}
|
|
|
|
|
|
|
|
getDefaultStateDict() {
|
|
|
|
return this.defaultStateDict;
|
|
|
|
}
|
|
|
|
|
|
|
|
getMapDevice() {
|
|
|
|
return this.mapDevice;
|
|
|
|
}
|
|
|
|
|
|
|
|
refresh() {
|
|
|
|
this.$painter.refresh();
|
|
|
|
}
|
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
clear() {
|
|
|
|
this.$painter.clear();
|
|
|
|
}
|
|
|
|
|
|
|
|
dispose() {
|
|
|
|
this.skinStyle = '';
|
|
|
|
this.styleDict = {};
|
|
|
|
this.mapDevice = {};
|
|
|
|
this.proxyData = {};
|
|
|
|
this.$painter.dispose();
|
|
|
|
}
|
2019-07-03 14:29:09 +08:00
|
|
|
}
|
|
|
|
|
2019-07-04 10:59:40 +08:00
|
|
|
export default Jmap;
|