优化 施工区域拖动 跳动的问题
This commit is contained in:
lVAL
parent
da1b5f27d1
commit
17ec2297a9
@ -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});
|
||||
}
|
||||
}
|
||||
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,53 +451,82 @@ 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;
|
||||
this.calcAreaDragging({e, pointInGrid});
|
||||
}
|
||||
},
|
||||
doAreaHornDragging({e, pointInGrid}) {
|
||||
if (this.drag && ['drag'].includes(this.drag.subType)) {
|
||||
this.dragging = true;
|
||||
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;
|
||||
|
||||
if (model._x == undefined || model._y == undefined) {
|
||||
model._x = pointInGrid[0];
|
||||
model._y = pointInGrid[1];
|
||||
offset.x = pointInGrid[0];
|
||||
offset.y = pointInGrid[1];
|
||||
this.selected.time += dx;
|
||||
|
||||
const option = this.myChart.getOption();
|
||||
const series = option.series[this.selected.seriesIndex]
|
||||
|
||||
series.data.forEach(el => {
|
||||
if (el instanceof Array) {
|
||||
el[0] += dx;
|
||||
} else {
|
||||
el.value[0] += dx;
|
||||
}
|
||||
});
|
||||
|
||||
series.markPoint.data.forEach(el => {
|
||||
el.coord[0] += dx;
|
||||
})
|
||||
|
||||
if (e.target &&
|
||||
e.target.point &&
|
||||
e.target.position) {
|
||||
e.target.point[0] += dx;
|
||||
}
|
||||
|
||||
const dx = pointInGrid[0] - model._x;
|
||||
const dy = pointInGrid[1] - model._y;
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
},
|
||||
calcAreaDragging({e, pointInGrid}) {
|
||||
const model = this.target.model;
|
||||
const offset = this.offset;
|
||||
|
||||
model._x = pointInGrid[0];
|
||||
model._y = pointInGrid[1];
|
||||
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;
|
||||
@ -519,21 +536,18 @@ export default {
|
||||
if (this.planUtil.limitAreaKmRange(this.stations, model)) {
|
||||
this.onZrMouseUp(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
doAreaHornDragging({e, pointInGrid}) {
|
||||
if (this.drag && ['drag'].includes(this.drag.subType)) {
|
||||
this.dragging = true;
|
||||
calcHornDragging({e, pointInGrid}) {
|
||||
const option = this.myChart.getOption();
|
||||
const drag = this.drag;
|
||||
const target = this.target;
|
||||
const model = target.model;
|
||||
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; });
|
||||
|
||||
model._x = pointInGrid[0];
|
||||
model._y = pointInGrid[1];
|
||||
offset.x = pointInGrid[0];
|
||||
offset.y = pointInGrid[1];
|
||||
|
||||
const time = pointInGrid[0];
|
||||
const kmRange = this.planUtil.getKmRangeByCoordinateY(pointInGrid[1]);
|
||||
@ -579,36 +593,17 @@ export default {
|
||||
|
||||
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; });
|
||||
const elem = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; });
|
||||
|
||||
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 ];
|
||||
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, graph);
|
||||
option.graphic[0].elements = this.calcHornList(elemList, elem);
|
||||
this.myChart.setOption(option, {notMerge: true});
|
||||
}
|
||||
},
|
||||
doTranslateSeries({e}) {
|
||||
if (this.dragging) {
|
||||
this.dragging = false;
|
||||
this.$emit('translate');
|
||||
}
|
||||
},
|
||||
doTranslateArea({e}) {
|
||||
if (this.dragging) {
|
||||
this.dragging = false;
|
||||
this.$emit('translate');
|
||||
}
|
||||
},
|
||||
doTranslateHorn({e}) {
|
||||
if (this.dragging) {
|
||||
this.dragging = false;
|
||||
this.$emit('translate');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'});
|
||||
elemList.forEach(el => {
|
||||
el.draggable = false;
|
||||
el.ondrag = echarts.util.curry(this.onShapeDragging);
|
||||
});
|
||||
|
||||
if (this.model.choice == 'Construction' && this.target) {
|
||||
elemList.forEach(el => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -398,9 +401,9 @@ export default {
|
||||
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 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});
|
||||
}
|
||||
@ -409,9 +412,9 @@ export default {
|
||||
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 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];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user