From 77d83cfaf7bdfb7a18288286b7b692ae50358305 Mon Sep 17 00:00:00 2001 From: lVAL Date: Thu, 22 Oct 2020 16:34:15 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=EF=BC=8CAUSTool=E6=96=BD?= =?UTF-8?q?=E5=B7=A5=E5=8C=BA=E5=9F=9F=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/rpTools.js | 2 +- src/jmapNew/theme/aus_00/planConvert copy.js | 2 +- src/jmapNew/theme/aus_00/planConvert--.js | 2 +- src/jmapNew/theme/aus_00/planConvert.js | 83 ++++--- src/jmapNew/theme/aus_00/utils.js | 1 - ...planModifyArea.vue => -planModifyArea.vue} | 0 src/views/planMonitor/editToolAUS/index.vue | 221 ++++++------------ src/views/planMonitor/editToolAUS/monitor.js | 195 ++++++++++------ .../planMonitor/editToolAUS/schedule.vue | 35 +-- src/views/planMonitor/editToolAUS/utils.js | 34 ++- 10 files changed, 298 insertions(+), 277 deletions(-) rename src/views/planMonitor/editToolAUS/dialog/{planModifyArea.vue => -planModifyArea.vue} (100%) diff --git a/src/api/rpTools.js b/src/api/rpTools.js index 45c852aeb..4ab6a333b 100644 --- a/src/api/rpTools.js +++ b/src/api/rpTools.js @@ -152,7 +152,7 @@ export function justTripNoStop(tripNo, data) { /** * 修改折返时间 */ -export function justTripTurnBack(tripNo, data) { +export function justTripTurnback(tripNo, data) { return request({ url: `/api/rpTools/${tripNo}/turnBack`, method: 'put', diff --git a/src/jmapNew/theme/aus_00/planConvert copy.js b/src/jmapNew/theme/aus_00/planConvert copy.js index 6471969a0..b2cb726ef 100644 --- a/src/jmapNew/theme/aus_00/planConvert copy.js +++ b/src/jmapNew/theme/aus_00/planConvert copy.js @@ -251,7 +251,7 @@ export default { }, /** 通过y坐标获取站信息 */ - getStationByCoordinate(stations, y) { + getStationByCoordinateY(stations, y) { for(var i = stations.length-1; i >= 0; i--) { const station = stations[i]; const edge = this.EdgeHeight diff --git a/src/jmapNew/theme/aus_00/planConvert--.js b/src/jmapNew/theme/aus_00/planConvert--.js index 9696965ab..c9ddea40c 100644 --- a/src/jmapNew/theme/aus_00/planConvert--.js +++ b/src/jmapNew/theme/aus_00/planConvert--.js @@ -168,7 +168,7 @@ export default { }, /** 通过y坐标获取站信息*/ - getStationByCoordinate(stations, y) { + getStationByCoordinateY(stations, y) { for(var i = stations.length-1; i >= 0; i--) { const station = stations[i]; const edge = this.EdgeHeight; diff --git a/src/jmapNew/theme/aus_00/planConvert.js b/src/jmapNew/theme/aus_00/planConvert.js index 7e00cbdf0..e77b4e1ad 100644 --- a/src/jmapNew/theme/aus_00/planConvert.js +++ b/src/jmapNew/theme/aus_00/planConvert.js @@ -11,34 +11,41 @@ export default { /** 偏移时间*/ TranslationTime: 0, + /** 转换model为Rect数据*/ + calcAreaArgsByModel(chart, model) { + const startTime = model.startTime; + const endTime = model.endTime; + const fartherKmRange = model.fartherKmRange; + const closerKmRange = model.closerKmRange; + + const point1 = [ startTime, this.getCoordinateYByKmRange(fartherKmRange)]; + const point2 = [ endTime, this.getCoordinateYByKmRange(closerKmRange)] + const position1 = chart.convertToPixel('grid', point1); + const position2 = chart.convertToPixel('grid', point2); + const position = position1; + const width = Math.abs(position1[0] - position2[0]); + const height = Math.abs(position1[1] - position2[1]); + + return { + model, + position, + point1, + point2, + width, + height + } + }, + /** 将后台数据解析成图形*/ - parseDataToGraph(chart, planData, stations) { + parseDataToGraph(chart, planData) { const graphs = []; if (planData && planData.areaList && planData.areaList.length) { - planData.areaList.forEach(area => { - const startTime = toTimeStamp(area.startTime); - const endTime = toTimeStamp(area.endTime); - - const fartherKm = this.getCoordinateYByStationCode(stations, area.fartherStationCode); - const closerKm = this.getCoordinateYByStationCode(stations, area.closerStationCode); - const point1 = [ startTime, fartherKm]; - const point2 = [ endTime, closerKm] - const position = chart.convertToPixel('grid', point1); - const position2 = chart.convertToPixel('grid', point2) - const width = Math.abs(position[0] - position2[0]); - const height = Math.abs(position[1] - position2[1]); - - graphs.push(createRectArea({ - areaNo: area.areaNo, - model: area, - position, - point1, - point2, - width, - height - })); + planData.areaList.forEach(model => { + model.startTime = toTimeStamp(model.startTime); + model.endTime = toTimeStamp(model.endTime); + graphs.push(createRectArea(this.calcAreaArgsByModel(chart, model))); }) } @@ -179,33 +186,41 @@ export default { }, /** 根据方向计算y折返偏移量*/ - getOffsetYByDirection(value, direction) { - if (direction === '1') { - value -= this.EdgeHeight / 2; - } else if (direction === '2') { - value += this.EdgeHeight / 2; + getOffsetY(isSpecial, direction) { + if (isSpecial) { + if (direction === '1') { + return -this.EdgeHeight / 2; + } else if (direction === '2') { + return +this.EdgeHeight / 2; + } } - return value; + return 0; }, + /** 通过y坐标获取车站公里表*/ + getKmRangeByCoordinateY(y) { + return parseInt((y-this.EdgeHeight)/this.CoordMultiple); + }, + + /** 通过公里表获取坐标值*/ + getCoordinateYByKmRange(k) { + return this.EdgeHeight + k * this.CoordMultiple + }, /** 通过站信息获取y坐标*/ getCoordinateYByStationCode(stations, stationCode, isSpecial=false, direction='01') { var value = 0; var station = stations.find(it => { return it.code == stationCode; }); if (station) { - value = this.EdgeHeight + station.kmRange * this.CoordMultiple; - if (isSpecial) { - value = this.getOffsetYByDirection(value, direction); - } + value = this.getCoordinateYByKmRange(station.kmRange) + this.getOffsetY(isSpecial, direction); } return value; }, /** 通过y坐标获取站信息 */ - getStationByCoordinate(stations, y) { + getStationByCoordinateY(stations, y) { for(var i = stations.length-1; i >= 0; i--) { const station = stations[i]; const edge = this.EdgeHeight diff --git a/src/jmapNew/theme/aus_00/utils.js b/src/jmapNew/theme/aus_00/utils.js index 09d2bc119..5c2250b15 100644 --- a/src/jmapNew/theme/aus_00/utils.js +++ b/src/jmapNew/theme/aus_00/utils.js @@ -48,7 +48,6 @@ export function createRectArea(opt, style={}) { return { type: 'rect', subType: 'area', - areaNo: opt.model.areaNo, position: opt.position, point1: opt.point1, point2: opt.point2, diff --git a/src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue b/src/views/planMonitor/editToolAUS/dialog/-planModifyArea.vue similarity index 100% rename from src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue rename to src/views/planMonitor/editToolAUS/dialog/-planModifyArea.vue diff --git a/src/views/planMonitor/editToolAUS/index.vue b/src/views/planMonitor/editToolAUS/index.vue index c65af0ac7..86ebc2301 100644 --- a/src/views/planMonitor/editToolAUS/index.vue +++ b/src/views/planMonitor/editToolAUS/index.vue @@ -34,11 +34,9 @@ - + - - @@ -46,10 +44,10 @@ import Schedule from './schedule.vue'; import PlanJustRunning from './dialog/planJustRunning.vue'; import PlanJustStop from './dialog/planJustStop.vue'; -import PlanJustTurnBack from './dialog/planJustTurnBack.vue'; +import PlanJustTurnback from './dialog/planJustTurnback.vue'; import PlanSetParams from './dialog/planSetParams.vue'; -import PlanModifyArea from './dialog/planModifyArea.vue'; import PlanSetAreaNote from './dialog/planSetAreaNote'; + import Menus from './menus.vue'; import { MenuEnum } from './utils.js'; import { timeFormat } from '@/utils/date'; @@ -57,7 +55,7 @@ import { mapGetters } from 'vuex'; import { getStationList } from '@/api/runplan'; import { getRpTools, clearRpPlan, addRpTrip, delRpTrip, - justTripNoRunning, justTripNoStop, justTripTurnBack, + justTripNoRunning, justTripNoStop, justTripTurnback, translateRpService, delRpService, getRpConfig, modifyRpConfig, createRpArea, modifyRpArea, modifyAreaNote, delRpArea @@ -68,9 +66,8 @@ export default { Schedule, PlanJustRunning, PlanJustStop, - PlanJustTurnBack, + PlanJustTurnback, PlanSetParams, - PlanModifyArea, PlanSetAreaNote, Menus }, @@ -161,19 +158,6 @@ export default { this.$messageBox(error.message); }) }, - onClear() { - this.selected = null; - this.target = null; - this.$refs.schedule.setLineReset(); - this.$refs.schedule.clearTrip(); - if (this.model.action != 'Translate') { - this.$refs.schedule.clearDraggable(); - } - - if (this.model.action != 'Add') { - this.$refs.schedule.clearGraphic(); - } - }, onDialog(menu) { this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu }); }, @@ -203,7 +187,20 @@ export default { break; } }, - onRemove(){ + onClear() { + this.selected = null; + this.target = null; + this.$refs.schedule.setLineReset(); + this.$refs.schedule.clearTrip(); + if (this.model.action != 'Translate') { + this.$refs.schedule.clearDraggable(); + } + + if (this.model.action != 'Add') { + this.$refs.schedule.clearGraphic(); + } + }, + onRemove(){ this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', @@ -227,15 +224,9 @@ export default { }, doNewPlan() { clearRpPlan().then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox(this.$t('error.obtainOperationGraphFailed')); - this.$store.dispatch('rpTools/setStations', []); - }); + this.refresh(); }).catch(error => { + this.refresh(); this.$message.info(error.message); }) }, @@ -247,48 +238,16 @@ export default { this.$message.info(error.message); }) }, - doModifyArea(data) { - const startTime = data.startTime; - const endTime = data.endTime; - const startCodeIndex = this.stations.findIndex(el => { return el.code == data.startStationCode; }) - const endCodeIndex = this.stations.findIndex(el => { return el.code == data.endStationCode; }) - - const model = { - fartherStationCode: startCodeIndex < endCodeIndex? data.endStationCode: data.startStationCode, - closerStationCode: startCodeIndex < endCodeIndex? data.startStationCode: data.endStationCode, - startTime: data.startTime, - endTime: data.endTime - } - - modifyRpArea(data.areaNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - this.$message.success('Construction area modified successfully.'); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); - }).catch(error => { - this.$message.info(error.message); - }) - }, doSetAreaNote(data) { const model = { text: data.text } modifyAreaNote(data.areaNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - this.$message.success('Construction area note modified successfully.'); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { this.$message.info(error.message); + this.refresh(); }) }, doJustRunning(time) { @@ -299,15 +258,10 @@ export default { } justTripNoRunning(this.selected.tripNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { - this.$message.info(error.message); + this.$message.info(error.message); + this.refresh(); }) } }, @@ -319,35 +273,25 @@ export default { } justTripNoStop(this.selected.tripNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); - }).catch(error => { + this.refresh(); + }).catch(error => { this.$message.info(error.message); + this.refresh(); }) } }, - doJustTurnBack(time) { + doJustTurnback(time) { if (this.selected) { const model = { seconds: time, stationCode: this.selected.stationCode } - justTripTurnBack(this.selected.tripNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + justTripTurnback(this.selected.tripNo, model).then(resp => { + this.refresh(); }).catch(error => { this.$message.info(error.message); + this.refresh(); }) } }, @@ -360,23 +304,18 @@ export default { } addRpTrip(model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { this.$message.info(error.message); + this.refresh(); this.$refs.schedule.clearGraphic(['mark']); }) }, doCreateArea(data) { const startTime = data.startTime; const endTime = data.endTime; - const startCodeIndex = this.stations.findIndex(el => { return el.code == data.startStationCode; }) - const endCodeIndex = this.stations.findIndex(el => { return el.code == data.endStationCode; }) + const startKmRange = data.startKmRange; + const endKmRange = data.endKmRange; if (Math.abs(endTime - startTime) < 10*60) { this.$refs.schedule.clearGraphic(['mark']); @@ -385,40 +324,30 @@ export default { } const model = { - fartherStationCode: startCodeIndex < endCodeIndex? data.endStationCode: data.startStationCode, - closerStationCode: startCodeIndex < endCodeIndex? data.startStationCode: data.endStationCode, + fartherKmRange: startKmRange < endKmRange? data.endKmRange: data.startKmRange, + closerKmRange: startKmRange < endKmRange? data.startKmRange: data.endKmRange, startTime: endTime < startTime? timeFormat(data.endTime): timeFormat(data.startTime), endTime: endTime < startTime? timeFormat(data.startTime): timeFormat(data.endTime) } createRpArea(model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { this.$message.info(error.message); + this.refresh(); this.$refs.schedule.clearGraphic(['mark']); }) }, doTranslateService() { if (this.selected) { const model = { - seconds : this.selected.sx + seconds : this.selected.time } translateRpService(this.selected.serviceNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { + this.refresh(); this.$message.info(error.message); }); } @@ -427,22 +356,17 @@ export default { if (this.target) { const data = this.target.model; const model = { - fartherStationCode: data.fartherStationCode, - closerStationCode: data.closerStationCode, - startTime: data.startTime, - endTime: data.endTime, + fartherKmRange: parseInt(data.fartherKmRange), + closerKmRange: parseInt(data.closerKmRange), + startTime: timeFormat(data.startTime), + endTime: timeFormat(data.endTime), text: data.text } modifyRpArea(data.areaNo, model).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { + this.refresh(); this.$message.info(error.message); }); } @@ -450,15 +374,9 @@ export default { doRemoveService() { if (this.selected) { delRpService(this.selected.serviceNo).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - this.onClear(); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { + this.refresh(); this.$message.info(error.message); }) } @@ -466,35 +384,34 @@ export default { doRemoveTrip() { if (this.selected) { delRpTrip(this.selected.tripNo).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - this.onClear(); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + this.refresh(); }).catch(error => { + this.refresh(); this.$message.info(error.message); }) } }, doRemoveArea() { if (this.target) { - delRpArea(this.target.areaNo).then(resp => { - getRpTools().then(rest => { - const planData = rest.data; - this.$store.commit('rpTools/setPlanData', planData); - this.$refs.schedule.loadChartData(planData); - this.onClear(); - }).catch(() => { - this.$messageBox('Failed to load the plan.'); - }); + const data = this.target.model; + delRpArea(data.areaNo).then(resp => { + this.refresh(); }).catch(error => { + this.refresh(); this.$message.info(error.message); }) } - } + }, + refresh() { + getRpTools().then(rest => { + const planData = rest.data; + this.$store.commit('rpTools/setPlanData', planData); + this.$refs.schedule.loadChartData(planData); + this.onClear(); + }).catch(() => { + this.$messageBox('Failed to load the plan.'); + }); + } } }; diff --git a/src/views/planMonitor/editToolAUS/monitor.js b/src/views/planMonitor/editToolAUS/monitor.js index 53c63239a..bf62e9e2c 100644 --- a/src/views/planMonitor/editToolAUS/monitor.js +++ b/src/views/planMonitor/editToolAUS/monitor.js @@ -9,9 +9,11 @@ export default { callRegister: [], markList: [], buildModel: { - endStationCode: '', startStationCode: '', + startKmRange: 0, startTime: 0, + endStationCode: '', + endKmRange: 0, endTime: 0 }, selected: null, @@ -39,7 +41,7 @@ export default { const option = this.myChart.getOption(); const minY = option.yAxis[0].min; const xVal = option.xAxis[0].data[xIndex]; - const yObj = this.planUtil.getStationByCoordinate(this.stations, yIndex-minY); + const yObj = this.planUtil.getStationByCoordinateY(this.stations, yIndex-minY); if (yObj && cb) { cb({yObj, xVal, pointInPixel, pointInGrid, e}); } @@ -83,13 +85,13 @@ export default { const elements = option.graphic[0].elements const graphic = echarts.util.map(elements, (el) => { if (fixedList.includes(el.subType)) { - const position = this.myChart.convertToPixel('grid', el.point1); + const position1 = this.myChart.convertToPixel('grid', el.point1); const position2 = this.myChart.convertToPixel('grid', el.point2); - const width = Math.abs(position[0] - position2[0]); - const height = Math.abs(position[1] - position2[1]) + const width = Math.abs(position1[0] - position2[0]); + const height = Math.abs(position1[1] - position2[1]) return { - position, + position: position1, shape: { width, height } } } else { @@ -104,14 +106,17 @@ export default { }, onZrMouseOver(e) { this.pixelExecCb(e, this.doSetTarget); - if (this.model.action == 'Translate') { - this.pixelExecCb(e, this.doSetAreaTranslate); - } else if (this.model.action == 'Edit') { - this.pixelExecCb(e, this.doSetAreaDrags); + if (this.model.choice == 'Construction') { + if (this.model.action == 'Translate') { + this.pixelExecCb(e, this.doSetAreaTranslate); + } else if (this.model.action == 'Edit') { + this.pixelExecCb(e, this.doSetAreaHorns); + } } }, onZrMouseDown(e) { if (e.target && ['area'].includes(e.target.subType)) { + this.pixelExecCb(e, this.doSetTarget); this.dragging = true; if (this.model.choice == 'Construction') { if (this.model.action == 'Note') { @@ -128,18 +133,18 @@ export default { if (this.model.action == 'Add') { this.pixelExecCb(e, this.doCreateArea); } - - // if (this.model.action == 'Translate') { - // this.pixelExecCb(e, this.doSetAreaTranslate); - // } else if (this.model.action == 'Edit') { - // this.pixelExecCb(e, this.doSetAreaDrags); - // } } }, onZrMouseUp(e) { - if (['Plan', 'Construction'].includes(this.model.choice)) { - if(this.model.action == 'Translate' && this.dragging) { - this.pixelExecCb(e, this.doTranslate) + if (this.dragging) { + if(this.model.choice == 'Plan') { + if (this.model.action == 'Translate') { + this.pixelExecCb(e, this.doTranslate) + } + } else if(this.model.choice == 'Construction') { + if(['Translate', 'Edit'].includes(this.model.action)) { + this.pixelExecCb(e, this.doTranslate) + } } } @@ -212,6 +217,8 @@ export default { this.model.choice == 'Construction') { if (this.model.action == 'Translate') { this.pixelExecCb(e, this.doAreaDragging); + } else if (this.model.action == 'Edit') { + this.pixelExecCb(e, this.doAreaHornDragging); } } }, @@ -229,7 +236,7 @@ export default { e.seriesName.includes('service')) { const option = this.myChart.getOption(); const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'}); - filters.push(utils.buildDragDataObj(pointInPixel, pointInGrid, this)) + filters.push(utils.buildDragDataObj(pointInPixel, pointInGrid, this, 'drag')) option.graphic[0].elements = filters; this.myChart.setOption(option, {notMerge: true}); @@ -240,12 +247,12 @@ export default { }); } }, - doCreateMark({e, pointInGrid, pointInPixel, yObj, xVal}) { + doCreateMark({e, pointInGrid, pointInPixel, yObj}) { const option = this.myChart.getOption(); const graphic = option.graphic; const elements = graphic[0].elements; - elements.push(utils.buildMarkPointObj(pointInPixel, pointInGrid, this)) + elements.push(utils.buildMarkPointObj(pointInPixel, pointInGrid, this, 'mark')) this.myChart.setOption(option, {notMerge: true}); @@ -253,22 +260,22 @@ export default { const elemList = elements.filter(el => { return el.subType != 'mark'}); if (markList.length == 1) { + this.buildModel.startTime = pointInGrid[0]; this.buildModel.startStationCode = yObj.code; - this.buildModel.startTime = xVal; } else if (markList.length >= 2) { + this.buildModel.endTime = pointInGrid[0]; this.buildModel.endStationCode = yObj.code; - this.buildModel.endTime = xVal; option.graphic[0].elements = elemList; this.$emit('create', this.buildModel); } }, - doCreateArea({e, pointInGrid, pointInPixel, yObj, xVal}) { + doCreateArea({e, pointInGrid, pointInPixel}) { if (!e.target) { const option = this.myChart.getOption(); const graphic = option.graphic; const elements = graphic[0].elements; - elements.push(utils.buildMarkPointObj(pointInPixel, pointInGrid, this)) + elements.push(utils.buildMarkPointObj(pointInPixel, pointInGrid, this, 'mark')) this.myChart.setOption(option, {notMerge: true}); @@ -276,11 +283,11 @@ export default { const elemList = elements.filter(el => { return el.subType != 'mark'}); if (markList.length == 1) { - this.buildModel.startStationCode = yObj.code; - this.buildModel.startTime = xVal; + this.buildModel.startTime = pointInGrid[0]; + this.buildModel.startKmRange = this.planUtil.getKmRangeByCoordinateY(pointInGrid[1]); } else if (markList.length >= 2) { - this.buildModel.endStationCode = yObj.code; - this.buildModel.endTime = xVal; + this.buildModel.endTime = pointInGrid[0]; + this.buildModel.endKmRange = this.planUtil.getKmRangeByCoordinateY(pointInGrid[1]); option.graphic[0].elements = elemList; this.$emit('create', this.buildModel); } @@ -292,11 +299,7 @@ export default { const model = target.model Object.assign(model, { _x: pointInGrid[0], - _y: pointInGrid[1], - dx: 0, - dy: 0, - sx: 0, - sy: 0 + _y: pointInGrid[1] }) this.target = target; @@ -353,8 +356,8 @@ export default { _y: pointInGrid[1], dx: 0, dy: 0, - sx: 0, - sy: 0 + time: 0, + kmRange: 0 } this.$emit('select', this.selected); @@ -363,20 +366,39 @@ export default { } }, doSetAreaTranslate({e}) { - if (e.target && ['area'].includes(e.target.subType)) { + if (this.target && ['area'].includes(this.target.subType)) { const option = this.myChart.getOption(); - const shape = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.areaNo == this.target.areaNo; }); + const model = this.target.model; + const graph = option.graphic[0].elements.find(el => { return ['area'].includes(el.subType) && el.model.areaNo == model.areaNo; }); - shape.draggable = true; - shape.ondrag = echarts.util.curry(this.onShapeDragging); + graph.draggable = true; + graph.ondrag = echarts.util.curry(this.onShapeDragging); this.myChart.setOption(option, {notMerge: true}); - - console.log(shape); } }, - doSetAreaDrags({e}) { - console.log('set drag') + doSetAreaHorns({e}) { + if (this.target && ['area'].includes(this.target.subType)) { + const option = this.myChart.getOption(); + const model = 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; }); + const p = graph.position; + const w = graph.shape.width; + const h = graph.shape.height; + const point1 = [p[0], p[1]]; + const point2 = [p[0]+w, p[1]]; + const point3 = [p[0]+w, p[1]+h]; + const point4 = [p[0], p[1]+h]; + + elemList.push(utils.buildHornDataObj(point1, this.myChart.convertFromPixel('grid', point1), this, 'horn-1')); + elemList.push(utils.buildHornDataObj(point2, this.myChart.convertFromPixel('grid', point2), this, 'horn-2')); + elemList.push(utils.buildHornDataObj(point3, this.myChart.convertFromPixel('grid', point3), this, 'horn-3')), + elemList.push(utils.buildHornDataObj(point4, this.myChart.convertFromPixel('grid', point4), this, 'horn-4')) + + option.graphic[0].elements = elemList; + this.myChart.setOption(option, {notMerge: true}); + } }, doPopDialog({e, pointInGrid, pointInPixel}) { const point = { @@ -415,10 +437,10 @@ export default { if (this.selected && this.dragging) { this.selected.dx = pointInGrid[0] - this.selected._x; this.selected.dy = pointInGrid[1] - this.selected._y; - this.selected.sx += this.selected.dx; - this.selected.sy += this.selected.dy; this.selected._x = pointInGrid[0]; this.selected._y = pointInGrid[1]; + this.selected.time += this.selected.dx; + this.selected.kmRange += this.selected.dy; if (this.selected.dx || this.selected.dy) { const option = this.myChart.getOption(); @@ -448,33 +470,66 @@ export default { }, doAreaDragging({e, pointInGrid}) { if (this.target && ['area'].includes(this.target.subType) && this.dragging) { - const model = this.target.model; - if (model.sx != undefined && model.sy != undefined) { - model.dx = pointInGrid[0] - model._x; - model.dy = pointInGrid[1] - model._y; - model.sx += model.dx; - model.sy += model.dy; - model._x = pointInGrid[0]; - model._y = pointInGrid[1]; + const target = this.target; + const model = target.model; + + 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; + } + }, + doAreaHornDragging({e, pointInGrid}) { + if (e.target && ['drag'].includes(e.target.subType) && this.dragging) { + const option = this.myChart.getOption(); + const target = this.target; + const model = target.model; + + const elemList = option.graphic[0].elements.filter(el => { return ['drag'].includes(el.subType) }); + const index = elemList.findIndex(el => { return e.target.name == el.name; }); + + const dx = pointInGrid[0] - model._x; + const dy = pointInGrid[1] - model._y; + model._x = pointInGrid[0]; + model._y = pointInGrid[1]; + + switch(index) { + case 0: + model.startTime += dx; + model.fartherKmRange += dy; + break; + case 1: + model.endTime += dx; + model.fartherKmRange += dy; + break; + case 2: + model.endTime += dx; + model.closerKmRange += dy; + break; + case 3: + model.startTime += dx; + model.closerKmRange += dy; + break; } + + const args = this.planUtil.calcAreaArgsByModel(this.myChart, model); + const graph = 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; + this.myChart.setOption(option, {notMerge: true}); + + this.doSetAreaHorns({e}); } }, doTranslate({e}) { - if (this.target && ['area'].includes(this.target.subType)) { - const model = this.target.model; - const sx = model.sx||0; - const sy = model.sy||0; - const fartherStationValue = this.planUtil.getCoordinateYByStationCode(this.stations, model.fartherStationCode) + sy; - const closerStationValue = this.planUtil.getCoordinateYByStationCode(this.stations, model.closerStationCode) + sy; - const fartherStation = this.planUtil.getStationByCoordinate(this.stations, fartherStationValue)||{code: model.fartherStationCode}; - const closerStation = this.planUtil.getStationByCoordinate(this.stations, closerStationValue)||{code: model.closerStationCode}; - - model.startTime = timeFormat(toTimeStamp(model.startTime)+sx); - model.endTime = timeFormat(toTimeStamp(model.endTime)+sx); - model.fartherStationCode = fartherStation.code; - model.closerStationCode = closerStation.code; - } - this.$emit('translate'); } } diff --git a/src/views/planMonitor/editToolAUS/schedule.vue b/src/views/planMonitor/editToolAUS/schedule.vue index af7a05d5f..1b02ab037 100644 --- a/src/views/planMonitor/editToolAUS/schedule.vue +++ b/src/views/planMonitor/editToolAUS/schedule.vue @@ -262,8 +262,16 @@ 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 elemList = option.graphic[0].elements.filter(el => { return el.subType == 'area'}); + elemList.forEach(el => { + el.draggable = true; + el.ondrag = echarts.util.curry(this.onShapeDragging); + }) + } + + this.myChart.setOption(option, {notMerge: true}); - this.myChart.setOption(option, {notMerge: true}); } catch (error) { this.$messageBox(error.message); } @@ -359,6 +367,18 @@ export default { }); } }, + clearDraggable(labels=['area']) { + const option = this.myChart.getOption(); + const elements = option.graphic[0].elements; + const elemList = elements.filter(el => { return labels.includes(el.subType)}); + + elemList.forEach(el => { + el.draggable = false; + el.ondrag = null; + }) + + this.myChart.setOption(option, {notMerge: true}); + }, clearTrip() { const option = this.myChart.getOption(); const index = option.series.findIndex(el => { return el.name.includes('service-trip') }); @@ -371,19 +391,6 @@ export default { const option = this.myChart.getOption(); const elements = option.graphic[0].elements; option.graphic[0].elements = elements.filter(el => { return !labels.includes(el.subType)}); - this.myChart.setOption(option, {notMerge: true}); - }, - clearDraggable(labels=['drag', 'area']) { - const option = this.myChart.getOption(); - const elements = option.graphic[0].elements; - const elemList = elements.filter(el => { return labels.includes(el.subType)}); - - elemList.forEach(el => { - el.draggable = false; - el.ondrag = null; - el.onmousemove = null; - }) - this.myChart.setOption(option, {notMerge: true}); } } diff --git a/src/views/planMonitor/editToolAUS/utils.js b/src/views/planMonitor/editToolAUS/utils.js index 369ec2744..061148f33 100644 --- a/src/views/planMonitor/editToolAUS/utils.js +++ b/src/views/planMonitor/editToolAUS/utils.js @@ -9,16 +9,42 @@ export const MenuEnum = { planJustTurnBack: '1005' } -export function buildDragDataObj(position, point, that) { +export function buildHornDataObj(position, point, that, name='') { return { type: 'circle', subType: 'drag', position: [...position], point: [...point], + model: {}, + name, shape: { cx: 0, cy: 0, - r: 10 + r: 8 + }, + style: { + fill: 'rgba(0,0,0,0.3)' + }, + draggable: 'true', + onmouseover: echarts.util.curry(that.onShapeMouseOver), + ondrag: echarts.util.curry(that.onShapeDragging), + onmouseout: echarts.util.curry(that.onShapeMouseOut), + z: 100 + } +} + +export function buildDragDataObj(position, point, that, name='') { + return { + type: 'circle', + subType: 'drag', + position: [...position], + point: [...point], + model: {}, + name, + shape: { + cx: 0, + cy: 0, + r: 6 }, invisible: true, draggable: 'horizontal', @@ -29,13 +55,15 @@ export function buildDragDataObj(position, point, that) { } } -export function buildMarkPointObj(position, point, that) { +export function buildMarkPointObj(position, point, that, name='') { return { type: 'circle', subType: 'mark', z: 100, position: [...position], point: [...point], + model: {}, + name, shape: { cx: 0, cy: 0, From 751ebe5a1635519f416ef86ee45ce8b846014a79 Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Thu, 22 Oct 2020 16:39:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=AB=9E=E8=B5=9B=E7=BA=BF=E8=B7=AF=20?= =?UTF-8?q?=E5=88=97=E8=BD=A6=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/race_01.js | 20 +++++++++++--------- src/jmapNew/shape/Train/TrainBody.js | 10 ++++++++++ 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/jmapNew/config/skinCode/race_01.js b/src/jmapNew/config/skinCode/race_01.js index c29d8e2b2..20891c060 100644 --- a/src/jmapNew/config/skinCode/race_01.js +++ b/src/jmapNew/config/skinCode/race_01.js @@ -627,7 +627,7 @@ class SkinCode extends defaultStyle { this[deviceType.Train] = { trainBody: { fontFamily: 'consolas', - trainBodyLineWidth: 0.1, // 车身line宽 + trainBodyLineWidth: 1, // 车身line宽 changeTrainWidth: false, // 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度 specialTrainType: [ { @@ -642,15 +642,17 @@ class SkinCode extends defaultStyle { ], // 特殊列车类型需设置显示格式 lrPadding: 4, // 两边间隔 upPadding: 4, // 上边距离 - trainBodyFillColor: '#725A64', // 列车车身填充颜色 - trainNameFormat: 'serviceNumber:tripNumber'// 列车显示格式 + trainBodyFillColor: 'rgba(0,0,0,0)', // 列车车身填充颜色 + trainNameFormat: 'serviceNumber:tripNumber', // 列车显示格式 + trainSidelineColor:'#A5A5A5' // 列车边框颜色 }, soonerOrLater: { - level: 3, - serviceNumber: true, - earlyColor: '#00FF00', - lateColor: '#800000', - normalColor: '#FFF' + level: 6, + // serviceNumber: true, + smallLateColor:'#FFFF00', + bigEarlyColor:'#00C900', + bigLateColor:'#FF0000', + normalColor: '#A5A5A5' }, directionArrow: { }, @@ -690,7 +692,7 @@ class SkinCode extends defaultStyle { directionStopType:'normal', // special 西安二号线 停车 列车方向图标不消失 normal 正常 trainHeadHeight: 'trainBox', // 列车车头高度取决于trainBox高度 trainHeadArrowWidth: 6, // 列车车头三角宽度 - trainHeadArrowOffsetX: 2 // 列车车头三角偏移 + trainHeadArrowOffsetX: 7 // 列车车头三角偏移 }, common: { trainHeight: 20, // 列车高度 diff --git a/src/jmapNew/shape/Train/TrainBody.js b/src/jmapNew/shape/Train/TrainBody.js index 7e9cdd3b2..f69fda857 100644 --- a/src/jmapNew/shape/Train/TrainBody.js +++ b/src/jmapNew/shape/Train/TrainBody.js @@ -378,6 +378,16 @@ export default class TrainBody extends Group { this.style.Train.soonerOrLater.destinationCode && this.textTrainTarget && this.textTrainTarget.setStyle({textFill: this.style.Train.soonerOrLater.lateColor}); this.style.Train.soonerOrLater.trainBody && this.trainBodyBox && this.trainBodyBox.setColor({stroke: this.style.Train.soonerOrLater.lateColor}); } + } else if (this.style.Train.soonerOrLater && this.style.Train.soonerOrLater.level === 6) { + if (dt <= 59 && dt >= -59) { + this.style.Train.soonerOrLater.trainBody && this.trainBodyBox && this.trainBodyBox.setColor({stroke: this.style.Train.soonerOrLater.normalColor}); + } else if (dt < -59 && dt >= -300) { + this.style.Train.soonerOrLater.trainBody && this.trainBodyBox && this.trainBodyBox.setColor({stroke: this.style.Train.soonerOrLater.smallLateColor}); + } else if (dt > 300) { + this.style.Train.soonerOrLater.trainBody && this.trainBodyBox && this.trainBodyBox.setColor({stroke: this.style.Train.soonerOrLater.bigEarlyColor}); + } else if (dt < -300) { + this.style.Train.soonerOrLater.trainBody && this.trainBodyBox && this.trainBodyBox.setColor({stroke: this.style.Train.soonerOrLater.bigLateColor}); + } } } formatChangePosition(model, style) {