代码调整
This commit is contained in:
joylink_cuiweidong
parent
d8af8fb70a
commit
34a20d3475
@ -7,13 +7,13 @@ function traverse(group, map) {
|
||||
} else {
|
||||
map[el.name] = el;
|
||||
}
|
||||
})
|
||||
});
|
||||
return map;
|
||||
}
|
||||
|
||||
class Animate {
|
||||
constructor(state) {
|
||||
this._state = {...state}
|
||||
this._state = {...state};
|
||||
this._sum = 0;
|
||||
this._count = 0;
|
||||
this._first = true;
|
||||
@ -22,14 +22,14 @@ class Animate {
|
||||
|
||||
run(interval) {
|
||||
this._sum = this._sum + interval;
|
||||
const total = this._state.time + (this._first? this._state.delay: 0)
|
||||
const total = this._state.time + (this._first ? this._state.delay : 0);
|
||||
if (this._sum > total) {
|
||||
this.animate(this)
|
||||
this.animate(this);
|
||||
this._count = this._count + 1;
|
||||
this._sum = 0;
|
||||
this._first = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isLoop() {
|
||||
return this._state.loop || this._count < this._state.frameList.length;
|
||||
@ -47,42 +47,42 @@ class Animate {
|
||||
return this._state.code == code;
|
||||
}
|
||||
|
||||
getIndex(index=0) {
|
||||
return index? index: this._count%this._state.frameList.length;
|
||||
getIndex(index = 0) {
|
||||
return index || this._count % this._state.frameList.length;
|
||||
}
|
||||
|
||||
getFrame(index=0) {
|
||||
getFrame(index = 0) {
|
||||
return this._state.frameList[index];
|
||||
}
|
||||
|
||||
animate() {
|
||||
const shape = this._state.shape;
|
||||
const mapShape = this._state.mapShape;
|
||||
const mapShape = this._state.mapShape;
|
||||
const index = this.getIndex();
|
||||
const frame = this.getFrame(index);
|
||||
if(shape && mapShape && frame) {
|
||||
if (shape && mapShape && frame) {
|
||||
const mapView = traverse(shape, {});
|
||||
if (this.isNeedDefault()) {
|
||||
Object.keys(mapShape).forEach(name => {
|
||||
const state = mapShape[name]
|
||||
const view = mapView[name];
|
||||
if (view) {
|
||||
shape.setInvisible(shape.model.base.hide);
|
||||
view.attr({shape: state.default.shape, style: state.default.style});
|
||||
view.dirty();
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.isNeedDefault()) {
|
||||
Object.keys(mapShape).forEach(name => {
|
||||
const state = mapShape[name];
|
||||
const view = mapView[name];
|
||||
if (view) {
|
||||
shape.setInvisible(shape.model.base.hide);
|
||||
view.attr({shape: state.default.shape, style: state.default.style});
|
||||
view.dirty();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Object.keys(frame).forEach(name => {
|
||||
const view = mapView[name];
|
||||
const view = mapView[name];
|
||||
const model = frame[name];
|
||||
if (view && model) {
|
||||
shape.setInvisible(model.hide);
|
||||
shape.setInvisible(model.hide);
|
||||
view.attr({shape: model.shape, style: model.style});
|
||||
view.dirty();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,7 +104,7 @@ class AnimateHandle {
|
||||
this._animates.push(animate);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animate(state) {
|
||||
const animate = this._animates.find(el => el.isEqual(state.code));
|
||||
@ -115,4 +115,4 @@ class AnimateHandle {
|
||||
}
|
||||
}
|
||||
|
||||
export default AnimateHandle
|
||||
export default AnimateHandle;
|
||||
|
||||
@ -197,14 +197,14 @@ class JMap {
|
||||
this.$shapeFactory.addShape(oldShape);
|
||||
this.$painter.add(oldShape);
|
||||
break;
|
||||
case orders.changeStatus:
|
||||
// model
|
||||
this.$painter.update(this.$stateHandle.update(this.$shapeFactory, []));
|
||||
debugger;
|
||||
break;
|
||||
case orders.ResetStatus:
|
||||
debugger;
|
||||
break;
|
||||
// case orders.changeStatus:
|
||||
// // model
|
||||
// this.$painter.update(this.$stateHandle.update(this.$shapeFactory, []));
|
||||
// debugger;
|
||||
// break;
|
||||
// case orders.ResetStatus:
|
||||
// debugger;
|
||||
// break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,60 +1,63 @@
|
||||
import * as utils from './utils/utils';
|
||||
import * as utils from './utils/utils';
|
||||
|
||||
export default class StateHandle {
|
||||
constructor(map) {
|
||||
this.$map = map;
|
||||
}
|
||||
constructor(map) {
|
||||
this.$map = map;
|
||||
}
|
||||
|
||||
parse(shapeFactory, state) {
|
||||
const mapTemplate = shapeFactory.getMapTemplate();
|
||||
const template = mapTemplate[state.type];
|
||||
const templateState = template.mapState[state.status]||{};
|
||||
const frameList = templateState.frameList||[];
|
||||
parse(shapeFactory, state) {
|
||||
const mapTemplate = shapeFactory.getMapTemplate();
|
||||
const template = mapTemplate[state.type];
|
||||
const templateState = template.mapState[state.status] || {};
|
||||
// const frameList = templateState.frameList||[];
|
||||
const frameList = Object.values(templateState.covertStatusList) || [];
|
||||
|
||||
// 增加第一帧初始数据
|
||||
// if (templateState &&
|
||||
// templateState.needDefault) {
|
||||
// templateState.frameList.unshift(
|
||||
// Object.entries(template.mapShape).map(el => {
|
||||
// return { name: el[0], ...el[1][utils.defStatus]};
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// 增加第一帧初始数据
|
||||
// if (templateState &&
|
||||
// templateState.needDefault) {
|
||||
// templateState.frameList.unshift(
|
||||
// Object.entries(template.mapShape).map(el => {
|
||||
// return { name: el[0], ...el[1][utils.defStatus]};
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
|
||||
return {
|
||||
...state,
|
||||
...templateState,
|
||||
mapShape: template.mapShape,
|
||||
shape: shapeFactory.getShapeByCode(state.code),
|
||||
return {
|
||||
...state,
|
||||
...templateState,
|
||||
mapShape: template.mapShape,
|
||||
shape: shapeFactory.getShapeByCode(state.code),
|
||||
frameList: frameList.map(frame => {
|
||||
return Object.fromEntries(frame.map(el => {
|
||||
const mapState = template.mapShape[el.name]||{};
|
||||
const state = mapState[el.status]||{};
|
||||
return [el.name, {
|
||||
...el,
|
||||
...state
|
||||
}]
|
||||
}));
|
||||
})
|
||||
}
|
||||
}
|
||||
// return Object.fromEntries(frame.map(el => {
|
||||
return Object.fromEntries(frame.frameList.map((el, index) => {
|
||||
const mapState = template.mapShape[el.name] || {};
|
||||
const state = mapState[el.status] || {};
|
||||
return [el.name || index, {
|
||||
loop:frame.loop,
|
||||
...el,
|
||||
...state
|
||||
}];
|
||||
}));
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
update(shapeFactory, states=[]) {
|
||||
return states.reduce((list,state) => {
|
||||
return [
|
||||
...list,
|
||||
this.parse(shapeFactory, state), // 测试只有自身
|
||||
// this.updateState(this.parse(shapeFactory, state)), // 处理自身
|
||||
// this.updateState(this.parse(shapeFactory, state)) // 处理依赖
|
||||
];
|
||||
}, []);
|
||||
}
|
||||
update(shapeFactory, states = []) {
|
||||
return states.reduce((list, state) => {
|
||||
return [
|
||||
...list,
|
||||
this.parse(shapeFactory, state) // 测试只有自身
|
||||
// this.updateState(this.parse(shapeFactory, state)), // 处理自身
|
||||
// this.updateState(this.parse(shapeFactory, state)) // 处理依赖
|
||||
];
|
||||
}, []);
|
||||
}
|
||||
|
||||
updateState(state={}) {
|
||||
return {}
|
||||
}
|
||||
updateState(state = {}) {
|
||||
return {};
|
||||
}
|
||||
|
||||
updateDepState(state={}) {
|
||||
return {}
|
||||
}
|
||||
updateDepState(state = {}) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +45,7 @@ export default class TransformHandle {
|
||||
|
||||
// 遍历view执行回调
|
||||
traverse(cb, context) {
|
||||
debugger
|
||||
this.traverseLayer(layer => {
|
||||
layer.eachChild(shape => {
|
||||
cb.call(context, shape);
|
||||
|
||||
@ -27,7 +27,7 @@ class Signal extends Group {
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.model = model;
|
||||
this.mapDevice = mapDevice;
|
||||
this.mapDevice = mapDevice;
|
||||
this.style = style;
|
||||
this.count = parseInt(model.lampPositionType);
|
||||
this.lamps = new Array(this.count);
|
||||
@ -322,12 +322,12 @@ class Signal extends Group {
|
||||
const drict = this.model.right ? 1 : -1; // 朝向 左:右
|
||||
const posit = this.model.positionType == '01' ? -1 : 1; // 位置 上:下
|
||||
// 信号机名称
|
||||
const actual = this.mapDevice[model.linkSignalCode];
|
||||
const actual = this.mapDevice[model.linkSignalCode];
|
||||
const sigNameX = model.position.x + model.positionPoint.x + drict * 0.433 * style.Signal.transmission.sideLength + model.namePosition.x;
|
||||
const sigNameY = model.position.y + model.positionPoint.y + posit * (style.Signal.distance + style.Section.line.width + style.Signal.lamp.radiusR * 2 + model.namePosition.y + style.Signal.text.distance);
|
||||
const textAlign = style.Signal.text.isAlignCenter ? 'middle' : this.model.right ? 'left' : 'right';
|
||||
const textVerticalAlign = posit == 1 ? 'top' : 'bottom';
|
||||
const fillColor = actual.virtual? style.Signal.transmission.fillColorVirtual: style.Signal.transmission.fillColor;
|
||||
const fillColor = actual.virtual ? style.Signal.transmission.fillColorVirtual : style.Signal.transmission.fillColor;
|
||||
this.sigName = new ESigName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
@ -511,12 +511,12 @@ class Signal extends Group {
|
||||
}
|
||||
|
||||
if (this.style.Signal.lamp.guidName !== 'singleRY') {
|
||||
if (this.lamps.length == 1) {
|
||||
if (this.lamps.length == 1) {
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.lamp.redColor);
|
||||
} else {
|
||||
} else {
|
||||
this.lamps[0] && this.lamps[0].setColor(this.style.Signal.lamp.redColor);
|
||||
this.lamps[1] && this.lamps[1].setColor(this.style.Signal.lamp.yellowColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -859,8 +859,8 @@ class Signal extends Group {
|
||||
default:
|
||||
var drict = this.model.right ? 1 : -1; // 朝向 右:左
|
||||
var offsetY = this.model.positionType == '01' ? this.style.Signal.text.fontSize : 0; // 位置 上:下
|
||||
var shape = this.model.type == 'TRANSMISSION'? this.transmission: this.sigPost;
|
||||
rect = shape.getBoundingRect().clone();
|
||||
var shape = this.model.type == 'TRANSMISSION' ? this.transmission : this.sigPost;
|
||||
rect = shape.getBoundingRect().clone();
|
||||
rect.x = rect.x + drict * this.style.Signal.post.standardVerticalWidth;
|
||||
rect.y = rect.y - offsetY;
|
||||
break;
|
||||
|
||||
@ -55,7 +55,8 @@ export default {
|
||||
selected: null,
|
||||
statusTab:'',
|
||||
stateList:[],
|
||||
elementList:[]
|
||||
elementList:[],
|
||||
type:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -64,52 +65,71 @@ export default {
|
||||
onSelectTab() {
|
||||
|
||||
},
|
||||
setData(data ) {
|
||||
setData(data) {
|
||||
this.stateList = data.stateList;
|
||||
this.elementList = utils.deepClone(data.shapeList);
|
||||
this.type = data.type;
|
||||
},
|
||||
previewStatus(data) {
|
||||
// this.resetDefaultStatus();
|
||||
const that = this;
|
||||
const list = Object.values(data.covertStatusList);
|
||||
list.forEach(each=>{
|
||||
if (each.loop) {
|
||||
// ChangeStatus
|
||||
} else {
|
||||
const frameList = each.frameList;
|
||||
// this.$iscs.update([
|
||||
// { status: 's1', code: '100', type: 'Device' },
|
||||
// { status: 's2', code: '101', type: 'Device' }
|
||||
// ]);
|
||||
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];
|
||||
});
|
||||
}
|
||||
// { status: 's1', code: '100', type: 'Device' },
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]);
|
||||
// this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// covertStatusList: Object
|
||||
// description: "关闭"
|
||||
// id: 1
|
||||
// needDefault: true
|
||||
// status: "close"
|
||||
// weight: 1
|
||||
this.$iscs.update([
|
||||
{ status: data.status, code: '100', type: this.type }
|
||||
]);
|
||||
// const that = this;
|
||||
// const list = Object.values(data.covertStatusList);
|
||||
// list.forEach(each=>{
|
||||
// debugger;
|
||||
// if (each.loop) {
|
||||
// // ChangeStatus
|
||||
// } else {
|
||||
// const frameList = each.frameList;
|
||||
// // <模型类型>
|
||||
// // this.$iscs.update([
|
||||
// // { status: 's1', code: '100', type: 'Device' },
|
||||
// // { status: 's2', code: '101', type: 'Device' }
|
||||
// // ]);
|
||||
// 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);
|
||||
|
||||
// // this.$iscs.update([
|
||||
// // { status: 's1', code: '100', type: 'Device' },
|
||||
// // { status: 's2', code: '101', type: 'Device' }
|
||||
// // ]);
|
||||
|
||||
// // model.frameList = [];
|
||||
// // 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];
|
||||
// // });
|
||||
// // }
|
||||
// // { status: 's1', code: '100', type: 'Device' },
|
||||
// // this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]);
|
||||
// this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
},
|
||||
resetDefaultStatus() {
|
||||
this.elementList.forEach(element=>{
|
||||
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
if (this.$route.query.id) {
|
||||
setTimeout(_ => {
|
||||
Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
|
||||
this.$iscs.setMap([], {
|
||||
this.$iscs.setMap([resp], {
|
||||
elementList: resp.shapeList || [],
|
||||
composeList: resp.composeList || []
|
||||
}, option);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user