joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

优化 施工区域拖动 跳动的问题

Browse Source
This commit is contained in:
lVAL 2020-10-26 17:04:19 +08:00
parent da1b5f27d1
commit 17ec2297a9
2 changed files with 184 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
src/views/planMonitor/editToolAUS/monitor.js
View File

@ -15,6 +15,10 @@ export default {
endKmRange: 0, endKmRange: 0,
endTime: 0 endTime: 0
}, },
offset: {
_x: 0,
_y: 0,
},
selected: null, selected: null,
target: null, target: null,
drag: null, drag: null,
@ -35,17 +39,13 @@ export default {
const pointInPixel = [event.offsetX, event.offsetY] const pointInPixel = [event.offsetX, event.offsetY]
const pointInGrid = this.myChart.convertFromPixel('grid', pointInPixel); const pointInGrid = this.myChart.convertFromPixel('grid', pointInPixel);
if (this.myChart.containPixel('grid', pointInPixel) && this.planUtil) { const xIndex = pointInGrid[0];
const xIndex = pointInGrid[0]; const yIndex = pointInGrid[1];
const yIndex = pointInGrid[1]; const option = this.myChart.getOption();
const option = this.myChart.getOption(); const minY = option.yAxis[0].min;
const minY = option.yAxis[0].min; const xVal = option.xAxis[0].data[xIndex];
const xVal = option.xAxis[0].data[xIndex]; const yObj = this.planUtil.getStationByCoordinateY(this.stations, yIndex-minY);
const yObj = this.planUtil.getStationByCoordinateY(this.stations, yIndex-minY); cb && cb({yObj, xVal, pointInPixel, pointInGrid, e});
if (yObj && cb) {
cb({yObj, xVal, pointInPixel, pointInGrid, e});
}
}
}, },
listenersBind() { listenersBind() {
if (this.myChart) { if (this.myChart) {
@ -55,10 +55,9 @@ export default {
zr.on('mousedown', this.onZrMouseDown, this); zr.on('mousedown', this.onZrMouseDown, this);
zr.on('mouseup', this.onZrMouseUp, this); zr.on('mouseup', this.onZrMouseUp, this);
zr.on('mouseout', this.onZrMouseOut, this); zr.on('mouseout', this.onZrMouseOut, this);
this.myChart.on('mousedown', this.onMouseDown); this.myChart.on('click', this.onMouseClick);
this.myChart.on('mouseover', this.onMouseOver); this.myChart.on('mouseover', this.onMouseOver);
this.myChart.on('mouseout', this.onMouseOut); this.myChart.on('mouseout', this.onMouseOut);
this.myChart.on('mouseup', this.onMouseUP);
this.myChart.on('datazoom', this.onUpdateZoom); this.myChart.on('datazoom', this.onUpdateZoom);
window.addEventListener('resize', this.onUpdateZoom); window.addEventListener('resize', this.onUpdateZoom);
} }
@ -71,10 +70,9 @@ export default {
zr.off('mousedown', this.onZrMouseDown, this); zr.off('mousedown', this.onZrMouseDown, this);
zr.off('mouseup', this.onZrMouseUp, this); zr.off('mouseup', this.onZrMouseUp, this);
zr.off('mouseout', this.onZrMouseOut, this); zr.off('mouseout', this.onZrMouseOut, this);
this.myChart.off('mousedown', this.onMouseDown); this.myChart.off('click', this.onMouseClick);
this.myChart.off('mouseover', this.onMouseOver); this.myChart.off('mouseover', this.onMouseOver);
this.myChart.off('mouseout', this.onMouseOut); this.myChart.off('mouseout', this.onMouseOut);
this.myChart.off('mouseup', this.onMouseUP);
this.myChart.off('datazoom', this.onUpdateZoom); this.myChart.off('datazoom', this.onUpdateZoom);
window.removeEventListener('resize', this.onUpdateZoom); window.removeEventListener('resize', this.onUpdateZoom);
} }
@ -174,7 +172,7 @@ export default {
} }
}); });
}, },
onMouseDown(e) { onMouseClick(e) {
this.pixelExecCb(e, args => { this.pixelExecCb(e, args => {
if (this.model.choice == 'Plan') { if (this.model.choice == 'Plan') {
this.doSetSelected(args); this.doSetSelected(args);
@ -184,8 +182,6 @@ export default {
} }
}); });
}, },
onMouseUP(e) {
},
onMouseOut(e) { onMouseOut(e) {
this.pixelExecCb(e, args => { this.pixelExecCb(e, args => {
if (this.model.choice == 'Plan') { if (this.model.choice == 'Plan') {
@ -310,25 +306,21 @@ export default {
}, },
doSetDrag({e, pointInGrid}) { doSetDrag({e, pointInGrid}) {
if (e.target && ['drag'].includes(e.target.subType)) { if (e.target && ['drag'].includes(e.target.subType)) {
this.dragging = false;
this.drag = e.target; this.drag = e.target;
this.drag.model._x = pointInGrid[0]; this.offset.x = pointInGrid[0];
this.drag.model._y = pointInGrid[1]; this.offset.y = pointInGrid[1];
} }
}, },
doSetTarget({e, pointInGrid}) { doSetTarget({e, pointInGrid}) {
if (e.target && ['area'].includes(e.target.subType)) { if (e.target && ['area'].includes(e.target.subType)) {
this.dragging = false;
if (this.target && if (this.target &&
this.target.model.areaNo != e.target.model.areaNo) { this.target.model.areaNo != e.target.model.areaNo) {
this.setTargetReset(); this.setTargetReset();
} }
this.target = e.target; this.target = e.target;
this.target.model._x = pointInGrid[0]; this.offset.x = pointInGrid[0];
this.target.model._y = pointInGrid[1]; this.offset.y = pointInGrid[1];
this.$emit('tag', e.target); this.$emit('tag', e.target);
@ -339,7 +331,6 @@ export default {
if (e.componentType == "series" && if (e.componentType == "series" &&
e.componentSubType == "line" && e.componentSubType == "line" &&
e.seriesName.includes('service')) { e.seriesName.includes('service')) {
this.dragging = false;
const value = e.value; const value = e.value;
const option = this.myChart.getOption(); const option = this.myChart.getOption();
@ -377,6 +368,9 @@ export default {
const obj =dataList[e.dataIndex][2]; const obj =dataList[e.dataIndex][2];
this.offset.x = pointInGrid[0];
this.offset.y = pointInGrid[1];
this.selected = { this.selected = {
stationIndex: this.stations.findIndex(el => { return el.code == obj.stationCode; }), stationIndex: this.stations.findIndex(el => { return el.code == obj.stationCode; }),
dataIndex: e.dataIndex, dataIndex: e.dataIndex,
@ -386,10 +380,6 @@ export default {
depTime: e.dataIndex < length - 1? next[0] - value[0]: 0, depTime: e.dataIndex < length - 1? next[0] - value[0]: 0,
runTime: e.dataIndex < length - 1? next[0] - value[0]: 0, runTime: e.dataIndex < length - 1? next[0] - value[0]: 0,
... value[2], ... value[2],
_x: pointInGrid[0],
_y: pointInGrid[1],
dx: 0,
dy: 0,
time: 0, time: 0,
kmRange: 0 kmRange: 0
} }
@ -402,12 +392,11 @@ export default {
doSetAreaTranslate({e}) { doSetAreaTranslate({e}) {
if (e.target && ['area'].includes(e.target.subType)) { if (e.target && ['area'].includes(e.target.subType)) {
const option = this.myChart.getOption(); const option = this.myChart.getOption();
const model = e.target.model; const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == e.target.model.areaNo; });
const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; });
graph.z = 90; elem.z = 90;
graph.draggable = true; elem.draggable = true;
graph.ondrag = echarts.util.curry(this.onShapeDragging); elem.ondrag = echarts.util.curry(this.onShapeDragging);
this.myChart.setOption(option, {notMerge: true}); this.myChart.setOption(option, {notMerge: true});
} }
@ -415,11 +404,10 @@ export default {
doSetAreaHorns({e}) { doSetAreaHorns({e}) {
if (e.target && ['area'].includes(e.target.subType)) { if (e.target && ['area'].includes(e.target.subType)) {
const option = this.myChart.getOption(); const option = this.myChart.getOption();
const model = e.target.model;
const elemList = option.graphic[0].elements.filter(el => { return !['drag'].includes(el.subType) }); const elemList = option.graphic[0].elements.filter(el => { return !['drag'].includes(el.subType) });
const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; }); const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == e.target.model.areaNo; });
option.graphic[0].elements = this.calcHornList(elemList, graph); option.graphic[0].elements = this.calcHornList(elemList, elem);
this.myChart.setOption(option, {notMerge: true}); this.myChart.setOption(option, {notMerge: true});
} }
}, },
@ -463,152 +451,159 @@ export default {
doSeriesDragging({e, pointInGrid}) { doSeriesDragging({e, pointInGrid}) {
if (this.selected) { if (this.selected) {
this.dragging = true; this.dragging = true;
this.selected.dx = pointInGrid[0] - this.selected._x; this.calcSeriesDragging({e, pointInGrid});
this.selected.dy = pointInGrid[1] - this.selected._y;
this.selected._x = pointInGrid[0];
this.selected._y = pointInGrid[1];
this.selected.time += this.selected.dx;
this.selected.kmRange += this.selected.dy;
const option = this.myChart.getOption();
const model = option.series[this.selected.seriesIndex]
model.data.forEach(el => {
if (el instanceof Array) {
el[0] += this.selected.dx;
} else {
el.value[0] += this.selected.dx;
}
});
model.markPoint.data.forEach(el => {
el.coord[0] += this.selected.dx;
})
if (e.target &&
e.target.point &&
e.target.position) {
e.target.point[0] += this.selected.dx;
}
this.myChart.setOption(option, {notMerge: true});
} }
}, },
doAreaDragging({e, pointInGrid}) { doAreaDragging({e, pointInGrid}) {
if (this.target && ['area'].includes(this.target.subType)) { if (this.target && ['area'].includes(this.target.subType)) {
this.dragging = true; this.dragging = true;
const target = this.target; this.calcAreaDragging({e, pointInGrid});
const model = target.model;
if (model._x == undefined || model._y == undefined) {
model._x = pointInGrid[0];
model._y = pointInGrid[1];
}
const dx = pointInGrid[0] - model._x;
const dy = pointInGrid[1] - model._y;
model._x = pointInGrid[0];
model._y = pointInGrid[1];
model.startTime += dx;
model.endTime += dx;
model.fartherKmRange += dy;
model.closerKmRange += dy;
if (this.planUtil.limitAreaKmRange(this.stations, model)) {
this.onZrMouseUp(e);
}
} }
}, },
doAreaHornDragging({e, pointInGrid}) { doAreaHornDragging({e, pointInGrid}) {
if (this.drag && ['drag'].includes(this.drag.subType)) { if (this.drag && ['drag'].includes(this.drag.subType)) {
this.dragging = true; this.dragging = true;
const option = this.myChart.getOption(); this.calcHornDragging({e, pointInGrid});
const drag = this.drag; }
const target = this.target; },
const model = target.model; doTranslateSeries({e, pointInGrid}) {
if (this.dragging) {
this.dragging = false;
this.calcSeriesDragging({e, pointInGrid});
this.$emit('translate');
}
},
doTranslateArea({e, pointInGrid}) {
if (this.dragging) {
this.dragging = false;
this.calcAreaDragging({e, pointInGrid});
this.$emit('translate');
}
},
doTranslateHorn({e, pointInGrid}) {
if (this.dragging) {
this.dragging = false;
this.calcHornDragging({e, pointInGrid});
this.$emit('translate');
}
},
calcSeriesDragging({e, pointInGrid}) {
const offset = this.offset;
const dx =pointInGrid[0] - offset.x;
const elements = option.graphic[0].elements.filter(el => { return ['drag'].includes(el.subType) }); offset.x = pointInGrid[0];
const index = elements.findIndex(el => { return drag.name == el.name; }); offset.y = pointInGrid[1];
this.selected.time += dx;
model._x = pointInGrid[0]; const option = this.myChart.getOption();
model._y = pointInGrid[1]; const series = option.series[this.selected.seriesIndex]
const time = pointInGrid[0]; series.data.forEach(el => {
const kmRange = this.planUtil.getKmRangeByCoordinateY(pointInGrid[1]); if (el instanceof Array) {
el[0] += dx;
switch(index) { } else {
case 0: el.value[0] += dx;
if (time < model.endTime) {
model.startTime = time;
}
if (model.closerKmRange < kmRange) {
model.fartherKmRange = kmRange;
}
break;
case 1:
if (model.startTime < time) {
model.endTime = time;
}
if (model.closerKmRange < kmRange) {
model.fartherKmRange = kmRange;
}
break;
case 2:
if (model.startTime < time) {
model.endTime = time;
}
if (kmRange < model.fartherKmRange) {
model.closerKmRange = kmRange;
}
break;
case 3:
if (time < model.endTime) {
model.startTime = time;
}
if (kmRange < model.fartherKmRange) {
model.closerKmRange = kmRange;
}
break;
} }
});
if (this.planUtil.limitAreaKmRange(this.stations, model)) { series.markPoint.data.forEach(el => {
this.onZrMouseUp(e); el.coord[0] += dx;
} })
const args = this.planUtil.calcAreaArgsByModel(this.myChart, model); if (e.target &&
const elemList = option.graphic[0].elements.filter(el => { return !['drag'].includes(el.subType) }); e.target.point &&
const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; }); e.target.position) {
e.target.point[0] += dx;
}
graph.position = args.position; this.myChart.setOption(option, {notMerge: true});
graph.point1 = args.point1; },
graph.point2 = args.point2; calcAreaDragging({e, pointInGrid}) {
graph.shape.width = args.width; const model = this.target.model;
graph.shape.height = args.height; const offset = this.offset;
graph.style.textOffset = [ -args.width/2, -args.height/2 ];
option.graphic[0].elements = this.calcHornList(elemList, graph); const dx = pointInGrid[0] - offset.x;
this.myChart.setOption(option, {notMerge: true}); const dy = pointInGrid[1] - offset.y;
offset.x = pointInGrid[0];
offset.y = pointInGrid[1];
model.startTime += dx;
model.endTime += dx;
model.fartherKmRange += dy;
model.closerKmRange += dy;
if (this.planUtil.limitAreaKmRange(this.stations, model)) {
this.onZrMouseUp(e);
} }
}, },
doTranslateSeries({e}) { calcHornDragging({e, pointInGrid}) {
if (this.dragging) { const option = this.myChart.getOption();
this.dragging = false; const drag = this.drag;
this.$emit('translate'); const offset = this.offset;
const model = this.target.model;
const elements = option.graphic[0].elements.filter(el => { return ['drag'].includes(el.subType) });
const index = elements.findIndex(el => { return drag.name == el.name; });
offset.x = pointInGrid[0];
offset.y = pointInGrid[1];
const time = pointInGrid[0];
const kmRange = this.planUtil.getKmRangeByCoordinateY(pointInGrid[1]);
switch(index) {
case 0:
if (time < model.endTime) {
model.startTime = time;
}
if (model.closerKmRange < kmRange) {
model.fartherKmRange = kmRange;
}
break;
case 1:
if (model.startTime < time) {
model.endTime = time;
}
if (model.closerKmRange < kmRange) {
model.fartherKmRange = kmRange;
}
break;
case 2:
if (model.startTime < time) {
model.endTime = time;
}
if (kmRange < model.fartherKmRange) {
model.closerKmRange = kmRange;
}
break;
case 3:
if (time < model.endTime) {
model.startTime = time;
}
if (kmRange < model.fartherKmRange) {
model.closerKmRange = kmRange;
}
break;
} }
},
doTranslateArea({e}) { if (this.planUtil.limitAreaKmRange(this.stations, model)) {
if (this.dragging) { this.onZrMouseUp(e);
this.dragging = false;
this.$emit('translate');
}
},
doTranslateHorn({e}) {
if (this.dragging) {
this.dragging = false;
this.$emit('translate');
} }
const args = this.planUtil.calcAreaArgsByModel(this.myChart, model);
const elemList = option.graphic[0].elements.filter(el => { return !['drag'].includes(el.subType) });
const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; });
elem.position = args.position;
elem.point1 = args.point1;
elem.point2 = args.point2;
elem.shape.width = args.width;
elem.shape.height = args.height;
elem.style.textOffset = [ -args.width/2, -args.height/2 ];
option.graphic[0].elements = this.calcHornList(elemList, elem);
this.myChart.setOption(option, {notMerge: true});
} }
} }
} }

49
src/views/planMonitor/editToolAUS/schedule.vue
View File

@ -268,24 +268,27 @@ export default {
this.pushModels(option.series, [this.planUtil.initializeYaxis(this.stations)]); this.pushModels(option.series, [this.planUtil.initializeYaxis(this.stations)]);
this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations)); this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations));
this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations)); this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations));
if (this.model.choice == 'Construction') {
const target = this.target; const elemList = option.graphic[0].elements.filter(el => { return el.subType == 'area'});
const elemList = option.graphic[0].elements.filter(el => { return el.subType == 'area'}); elemList.forEach(el => {
el.draggable = false;
el.ondrag = echarts.util.curry(this.onShapeDragging);
});
if (this.model.choice == 'Construction' && this.target) {
elemList.forEach(el => { elemList.forEach(el => {
el.draggable = false;
el.ondrag = echarts.util.curry(this.onShapeDragging);
if (this.model.action == 'Translate' && if (this.model.action == 'Translate' &&
target && this.target.model &&
target.model.areaNo == el.model.areaNo) { this.target.model.areaNo == el.model.areaNo) {
el.draggable = true; el.draggable = true;
} }
}) })
if (this.model.action == 'Edit' && target) { if (this.model.action == 'Edit' &&
const model = target.model; this.target.model) {
const elemList = option.graphic[0].elements.filter(el => { return !['drag'].includes(el.subType) }); const elemList = option.graphic[0].elements.filter(el => { return !['drag'].includes(el.subType) });
const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; }); const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == this.target.model.areaNo; });
option.graphic[0].elements = this.calcHornList(elemList, graph); option.graphic[0].elements = this.calcHornList(elemList, elem);
} }
} }
@ -397,10 +400,10 @@ export default {
setTargetLight() { setTargetLight() {
if (this.target) { if (this.target) {
const option = this.myChart.getOption(); const option = this.myChart.getOption();
const model = this.target.model; const model =this.target.model;
const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; }); const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; });
if (graph) { if (elem) {
graph.style.fill = 'rgb(255,0,0, 0.6)'; elem.style.fill = 'rgb(255,0,0, 0.6)';
} }
this.myChart.setOption({graphic: option.graphic}); this.myChart.setOption({graphic: option.graphic});
} }
@ -408,10 +411,10 @@ export default {
setTargetReset() { setTargetReset() {
if (this.target) { if (this.target) {
const option = this.myChart.getOption(); const option = this.myChart.getOption();
const model = this.target.model; const model = this.target.model;
const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; }); const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; });
if (graph) { if (elem) {
graph.style.fill = 'rgb(255,0,0, 0.3)'; elem.style.fill = 'rgb(255,0,0, 0.3)';
} }
this.myChart.setOption({graphic: option.graphic}); this.myChart.setOption({graphic: option.graphic});
} }
@ -441,10 +444,10 @@ export default {
option.graphic[0].elements = elements.filter(el => { return !labels.includes(el.subType)}); option.graphic[0].elements = elements.filter(el => { return !labels.includes(el.subType)});
this.myChart.setOption(option, {notMerge: true}); this.myChart.setOption(option, {notMerge: true});
}, },
calcHornList(elemList, graph) { calcHornList(elemList, elem) {
const p = graph.position; const p = elem.position;
const w = graph.shape.width; const w = elem.shape.width;
const h = graph.shape.height; const h = elem.shape.height;
const point1 = [p[0], p[1]]; const point1 = [p[0], p[1]];
const point2 = [p[0]+w, p[1]]; const point2 = [p[0]+w, p[1]];
const point3 = [p[0]+w, p[1]+h]; const point3 = [p[0]+w, p[1]+h];