diff --git a/src/views/planMonitor/editToolAUS/monitor.js b/src/views/planMonitor/editToolAUS/monitor.js index 8b9c3750a..631b20682 100644 --- a/src/views/planMonitor/editToolAUS/monitor.js +++ b/src/views/planMonitor/editToolAUS/monitor.js @@ -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}); } } } diff --git a/src/views/planMonitor/editToolAUS/schedule.vue b/src/views/planMonitor/editToolAUS/schedule.vue index 785b079c4..e19e6dc44 100644 --- a/src/views/planMonitor/editToolAUS/schedule.vue +++ b/src/views/planMonitor/editToolAUS/schedule.vue @@ -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];