Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

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',

src/jmapNew/config/skinCode/race_01.js

@@ -638,7 +638,7 @@ class SkinCode extends defaultStyle {
         this[deviceType.Train] = {
             trainBody: {
                 fontFamily: 'consolas',
-                trainBodyLineWidth: 0.1, // 车身line宽
+                trainBodyLineWidth: 1, // 车身line宽
                 changeTrainWidth: false, // 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度
                 specialTrainType: [
                     {
@@ -653,15 +653,17 @@ class SkinCode extends defaultStyle {
                 ], // 特殊列车类型需设置显示格式
                 lrPadding: 4, // 两边间隔
                 upPadding: 4, // 上边距离
-                trainBodyFillColor: '#725A64', // 列车车身填充颜色
+                trainBodyFillColor: 'rgba(0,0,0,0)', // 列车车身填充颜色
-                trainNameFormat: 'serviceNumber:tripNumber'// 列车显示格式
+                trainNameFormat: 'serviceNumber:tripNumber', // 列车显示格式
+                trainSidelineColor:'#A5A5A5' // 列车边框颜色
             },
             soonerOrLater: {
-                level: 3,
+                level: 6,
-                serviceNumber: true,
+                // serviceNumber: true,
-                earlyColor: '#00FF00',
+                smallLateColor:'#FFFF00',
-                lateColor: '#800000',
+                bigEarlyColor:'#00C900',
-                normalColor: '#FFF'
+                bigLateColor:'#FF0000',
+                normalColor: '#A5A5A5'
             },
             directionArrow: {
             },
@@ -701,7 +703,7 @@ class SkinCode extends defaultStyle {
                 directionStopType:'normal', // special 西安二号线 停车 列车方向图标不消失  normal 正常
                 trainHeadHeight: 'trainBox', // 列车车头高度取决于trainBox高度
                 trainHeadArrowWidth: 6, // 列车车头三角宽度
-                trainHeadArrowOffsetX: 2 // 列车车头三角偏移
+                trainHeadArrowOffsetX: 7 // 列车车头三角偏移
             },
             common: {
                 trainHeight: 20, // 列车高度

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) {

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

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;

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 => {
+			planData.areaList.forEach(model => {
-				const startTime = toTimeStamp(area.startTime);
+				model.startTime = toTimeStamp(model.startTime);
-				const endTime = toTimeStamp(area.endTime);
+				model.endTime = toTimeStamp(model.endTime);
-
+				graphs.push(createRectArea(this.calcAreaArgsByModel(chart, model)));
-				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
-				}));
 			})
 		}
 
@@ -179,33 +186,41 @@ export default {
 	},
 
 	/** 根据方向计算y折返偏移量*/
-	getOffsetYByDirection(value, direction) {
+	getOffsetY(isSpecial, direction) {
-		if (direction === '1') {
+		if (isSpecial) {
-			value -= this.EdgeHeight / 2;
+			if (direction === '1') {
-		} else if (direction === '2') {
+				return -this.EdgeHeight / 2;
-			value += 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;
+			value = this.getCoordinateYByKmRange(station.kmRange) + this.getOffsetY(isSpecial, direction);
-            if (isSpecial) {
-                value = this.getOffsetYByDirection(value, 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

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,

src/views/planMonitor/editToolAUS/index.vue

@@ -34,11 +34,9 @@
 		</schedule>
 		<plan-just-running :config="config" :selected="selected" :stations="stations" @justRunning="doJustRunning" />
 	    <plan-just-stop :config="config" :selected="selected" :stations="stations" @justStop="doJustStop"/>
-		<plan-just-turn-back :config="config" :selected="selected" :stations="stations" @justTurnBack="doJustTurnBack"/>
+		<plan-just-turnback :config="config" :selected="selected" :stations="stations" @justTurnBack="doJustTurnback"/>
 		<plan-set-params :config="config" @setParams="doSetPlanParams" />
 		<plan-set-area-note :target="target"  @setAreaNote="doSetAreaNote" />
-
-		<plan-modify-area :target="target" :stations="stations" @modifyArea="doModifyArea" />
   </div>
 </template>
 
@@ -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 => {
+                this.refresh();
-					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', []);
-                });
             }).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 => {
+				this.refresh();
-					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.');
-				});
 			}).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 => {
+                    this.refresh();
-						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.$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 => {
+					this.refresh();
-						const planData = rest.data;
+				}).catch(error => {
-						this.$store.commit('rpTools/setPlanData', planData);
-						this.$refs.schedule.loadChartData(planData);
-                    }).catch(() => {
-						this.$messageBox('Failed to load the plan.');
-                    });
-                }).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 => {
+                justTripTurnback(this.selected.tripNo, model).then(resp => {
-                    getRpTools().then(rest => {
+					this.refresh();
-						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.$message.info(error.message);
+					this.refresh();
                 })
             }
 		},
@@ -360,23 +304,18 @@ export default {
 			}
 
 			addRpTrip(model).then(resp => {
-				getRpTools().then(rest => {
+				this.refresh();
-					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.$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 startKmRange = data.startKmRange;
-			const endCodeIndex = this.stations.findIndex(el => { return el.code == data.endStationCode; })
+			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,
+				fartherKmRange: startKmRange < endKmRange? data.endKmRange: data.startKmRange,
-				closerStationCode: startCodeIndex < endCodeIndex? data.startStationCode: data.endStationCode,
+				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 => {
+				this.refresh();
-					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.$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 => {
+                    this.refresh();
-						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();
                     this.$message.info(error.message);
                 });
             }
@@ -427,22 +356,17 @@ export default {
 			if (this.target) {
 				const data = this.target.model;
 				const model =  {
-					fartherStationCode: data.fartherStationCode,
+					fartherKmRange: parseInt(data.fartherKmRange),
-					closerStationCode: data.closerStationCode,
+					closerKmRange: parseInt(data.closerKmRange),
-					startTime: data.startTime,
+					startTime: timeFormat(data.startTime),
-					endTime: data.endTime,
+					endTime: timeFormat(data.endTime),
 					text: data.text
 				}
 
                 modifyRpArea(data.areaNo, model).then(resp => {
-                    getRpTools().then(rest => {
+					this.refresh();
-						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();
                     this.$message.info(error.message);
                 });
             }
@@ -450,15 +374,9 @@ export default {
 		doRemoveService() {
 			 if (this.selected) {
                 delRpService(this.selected.serviceNo).then(resp => {
-                    getRpTools().then(rest => {
+                    this.refresh();
-						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.');
-                    });
                 }).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 => {
+                	this.refresh();
-						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.');
-                    });
                 }).catch(error => {
+					this.refresh();
                     this.$message.info(error.message);
                 })
             }
         },
         doRemoveArea() {
 			if (this.target) {
-                delRpArea(this.target.areaNo).then(resp => {
+				const data = this.target.model;
-                    getRpTools().then(rest => {
+                delRpArea(data.areaNo).then(resp => {
-						const planData = rest.data;
+					this.refresh();
-						this.$store.commit('rpTools/setPlanData', planData);
-						this.$refs.schedule.loadChartData(planData);
-						this.onClear();
-                    }).catch(() => {
-                        this.$messageBox('Failed to load the plan.');
-                    });
                 }).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.');
+			});
+		}
     }
 };
 </script>

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 width = Math.abs(position1[0] - position2[0]);
-					const height = Math.abs(position[1] - position2[1])
+					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') {
+			if (this.model.choice == 'Construction') {
-				this.pixelExecCb(e, this.doSetAreaTranslate);
+				if (this.model.action == 'Translate') {
-			} else if (this.model.action == 'Edit') {
+					this.pixelExecCb(e, this.doSetAreaTranslate);
-				this.pixelExecCb(e, this.doSetAreaDrags);
+				} 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.dragging) {
-				if(this.model.action == 'Translate' && this.dragging) {
+				if(this.model.choice == 'Plan') {
-					this.pixelExecCb(e, this.doTranslate)
+					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 = pointInGrid[0];
-					this.buildModel.startTime = xVal;
+					this.buildModel.startKmRange = this.planUtil.getKmRangeByCoordinateY(pointInGrid[1]);
 				} else if (markList.length >= 2) {
-					this.buildModel.endStationCode = yObj.code;
+					this.buildModel.endTime = pointInGrid[0];
-					this.buildModel.endTime = xVal;
+					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],
+					_y: pointInGrid[1]
-					dx: 0,
-					dy: 0,
-					sx: 0,
-					sy: 0
 				})
 
 				this.target = target;
@@ -353,8 +356,8 @@ export default {
 					_y: pointInGrid[1],
 					dx: 0,
 					dy: 0,
-					sx: 0,
+					time: 0,
-					sy: 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;
+				graph.draggable = true;
-				shape.ondrag = echarts.util.curry(this.onShapeDragging);
+				graph.ondrag = echarts.util.curry(this.onShapeDragging);
 
 				this.myChart.setOption(option, {notMerge: true});
-
-				console.log(shape);
 			}
 		},
-		doSetAreaDrags({e}) {
+		doSetAreaHorns({e}) {
-			console.log('set drag')
+			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;
+				const target = this.target;
-				if (model.sx != undefined && model.sy != undefined) {
+				const model = target.model;
-					model.dx = pointInGrid[0] - model._x;
+
-					model.dy = pointInGrid[1] - model._y;
+				const dx = pointInGrid[0] - model._x;
-					model.sx += model.dx;
+				const dy = pointInGrid[1] - model._y;
-					model.sy += model.dy;
+				model._x = pointInGrid[0];
-					model._x = pointInGrid[0];
+				model._y = pointInGrid[1];
-					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');
 		}
 	}

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});
 		}
     }

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,