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