From d3ea1cd22eeea57c452497d5de4f1bc90a2b3893 Mon Sep 17 00:00:00 2001
From: lVAL <wx_5f6b45a71ecc4675bb5307decf1326c7@git.code.tencent.com>
Date: Tue, 20 Oct 2020 15:38:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0AUSTool=E7=BB=98=E5=88=B6?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=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--.js     |  55 ++++-
 src/jmapNew/theme/aus_00/planConvert.js       |  62 ++++--
 src/scripts/ConstDic.js                       |   6 +-
 .../editToolAUS/dialog/planJustRunning.vue    |  12 +-
 .../editToolAUS/dialog/planJustStop.vue       |  12 +-
 .../editToolAUS/dialog/planModifyArea.vue     | 158 ++++++++++++++
 .../editToolAUS/dialog/planSetParams.vue      |  34 +--
 src/views/planMonitor/editToolAUS/index.vue   | 154 ++++++++++----
 src/views/planMonitor/editToolAUS/menus.vue   |   6 +-
 src/views/planMonitor/editToolAUS/monitor.js  | 196 ++++++++++--------
 .../planMonitor/editToolAUS/schedule.vue      |  37 ++--
 src/views/planMonitor/editToolAUS/utils.js    |  35 +---
 13 files changed, 529 insertions(+), 240 deletions(-)
 create mode 100644 src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue

diff --git a/src/api/rpTools.js b/src/api/rpTools.js
index 64222f89e..ffac62027 100644
--- a/src/api/rpTools.js
+++ b/src/api/rpTools.js
@@ -87,7 +87,7 @@ export function modifyRpArea(areaNo, data) {
 /**
  * 删除区域
  */
-export function deleteRpArea(areaNo) {
+export function delRpArea(areaNo) {
 	return request({
 		url: `/api/rpTools/${areaNo}/area`,
 		method: 'delete'
diff --git a/src/jmapNew/theme/aus_00/planConvert--.js b/src/jmapNew/theme/aus_00/planConvert--.js
index 02c84e9a9..0bd3bbd02 100644
--- a/src/jmapNew/theme/aus_00/planConvert--.js
+++ b/src/jmapNew/theme/aus_00/planConvert--.js
@@ -1,4 +1,5 @@
 import { createMartPoint, createSeriesModel, createMarkLineModels, hexColor, prefixTime, convertSheetToList } from '@/utils/runPlan';
+import { toTimeStamp } from '@/utils/date';
 
 export default {
     /** 边缘高度*/
@@ -11,8 +12,52 @@ export default {
     TranslationTime: 0,
 
 	/** 将后台数据解析成图形*/
+	parseDataToGraph(chart, planData, stations, kmRangeCoordMap) {
+		const graphs = [];
+		if (planData &&
+			planData.areaList &&
+			planData.areaList.length) {
+			planData.areaList.forEach(el => {
+				const startTime = toTimeStamp(el.startTime);
+				const endTime = toTimeStamp(el.endTime);
+
+				const fartherKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.fartherStationCode});
+				const closerKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.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({
+					type: 'rect',
+					subType: 'Area',
+					areaNo: el.areaNo,
+					position,
+					point1,
+					point2,
+					model: el,
+					shape: {
+						x: 0,
+						y: 0,
+						width,
+						height
+					},
+					style: {
+						fill: 'rgb(255,0,0, 0.3)',
+						stroke: 'rgb(255, 0, 0, 0.8)'
+					},
+					z: 100
+				})
+			})
+		}
+
+		return graphs;
+	},
+
     /** 将后台数据解析成折线*/
-    parseDataToModels(planData, stations, kmRangeCoordMap) {
+    parseDataToSeries(chart, planData, stations, kmRangeCoordMap) {
         var models = [];
 		/** 按车次遍历数据*/
 		if (planData && planData.length) {
@@ -37,11 +82,11 @@ export default {
 				/** 计算停站点坐标集合*/
 				trip.stationTimeList.forEach((elem,idx) => {
 					if (elem.arrivalTime) {
-						opt.data.push([elem.arrivalTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
+						opt.data.push([elem.arrivalTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
 					}
 
 					if (elem.departureTime) {
-						opt.data.push([elem.departureTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
+						opt.data.push([elem.departureTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), elem.stationCode, trip.tripNo]);
 					}
 				});
 
@@ -53,7 +98,7 @@ export default {
     },
 
     /** 更新数据并解析成折线*/
-    updateDataToModels(planData, stations, kmRangeCoordMap, runPlanData, series) {
+    updateDataToModels(chart, planData, stations, kmRangeCoordMap, runPlanData, series) {
         if (planData && planData.length) {
         }
         return series;
@@ -109,7 +154,7 @@ export default {
     },
 
     /** 根据elem计算y值*/
-    getCoordYByElem(stations, kmRangeCoordMap, elem, directionCode, isSpecial) {
+    getCoordYByObj(stations, kmRangeCoordMap, elem, directionCode, isSpecial) {
         var defaultVlue = 0;
         var station = stations.find(it => { return it.code == elem.stationCode; });
         if (station) {
diff --git a/src/jmapNew/theme/aus_00/planConvert.js b/src/jmapNew/theme/aus_00/planConvert.js
index 7eaf68f56..b332fb48d 100644
--- a/src/jmapNew/theme/aus_00/planConvert.js
+++ b/src/jmapNew/theme/aus_00/planConvert.js
@@ -1,4 +1,5 @@
 import { createMartPointReverse, createSeriesModel, createMarkLineModels, hexColor, convertSheetToList, prefixTime } from '@/utils/runPlan';
+import { toTimeStamp } from '@/utils/date';
 
 export default {
     /** 边缘高度*/
@@ -11,12 +12,44 @@ export default {
 	TranslationTime: 0,
 
 	/** 将后台数据解析成图形*/
-	parseDataToGraph(planData, stations) {
+	parseDataToGraph(chart, planData, stations, kmRangeCoordMap) {
 		const graphs = [];
 		if (planData &&
 			planData.areaList &&
 			planData.areaList.length) {
 			planData.areaList.forEach(el => {
+				const startTime = toTimeStamp(el.startTime);
+				const endTime = toTimeStamp(el.endTime);
+
+				const fartherKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.fartherStationCode});
+				const closerKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.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({
+					type: 'rect',
+					subType: 'Area',
+					areaNo: el.areaNo,
+					position,
+					point1,
+					point2,
+					model: el,
+					shape: {
+						x: 0,
+						y: 0,
+						width,
+						height
+					},
+					style: {
+						fill: 'rgb(255,0,0, 0.3)',
+						stroke: 'rgb(255, 0, 0, 0.8)'
+					},
+					z: 100
+				})
 			})
 		}
 
@@ -24,7 +57,7 @@ export default {
 	},
 
     /** 将后台数据解析成折线*/
-    parseDataToModels(planData, stations, kmRangeCoordMap) {
+    parseDataToSeries(chart, planData, stations, kmRangeCoordMap) {
 		const models = [];
 		if (planData &&
 			planData.serviceList &&
@@ -52,7 +85,7 @@ export default {
 
 						trip.stationTimeList.forEach((elem,idx) => {
 							if (elem.arrivalTime) {
-								opt.data.push([elem.arrivalTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), {
+								opt.data.push([elem.arrivalTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), {
 									stationCode: elem.stationCode,
 									serviceNo: el.serviceNo,
 									tripNo: trip.tripNo,
@@ -61,7 +94,7 @@ export default {
 							}
 
 							if (elem.departureTime) {
-								opt.data.push([elem.departureTime, this.getCoordYByElem(stations, kmRangeCoordMap, elem), {
+								opt.data.push([elem.departureTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), {
 									stationCode: elem.stationCode,
 									serviceNo: el.serviceNo,
 									tripNo: trip.tripNo,
@@ -81,7 +114,7 @@ export default {
 },
 
     /** 更新数据并解析成折线*/
-    updateDataToModels(planData, stations, kmRangeCoordMap, runPlanData, series, lineStyle) {
+    updateDataToModels(chart, planData, stations, kmRangeCoordMap, series) {
         if (planData && planData.length) {
         }
         return series;
@@ -129,25 +162,8 @@ export default {
         return yText;
     },
 
-    /** 根据是否和上一个车次是否相交，计算下一个车次的折返的高度*/
-    computedReentryNumber(code) {
-        // return parseInt(code || 1) % 2 ? 1 : 2;
-        return 1;
-    },
-
-    /** 根据方向计算y折返偏移量*/
-    getYvalueByDirectionCode(defaultVlue, directionCode, num) {
-        if (directionCode === '1') {
-            defaultVlue += this.EdgeHeight / 2 * num;
-        } else if (directionCode === '2') {
-            defaultVlue -= this.EdgeHeight / 2 * num;
-        }
-
-        return defaultVlue;
-    },
-
     /** 根据elem计算y值*/
-    getCoordYByElem(stations, kmRangeCoordMap, elem) {
+    getCoordYByObj(stations, kmRangeCoordMap, elem) {
         var defaultVlue = 0;
         var station = stations.find(it => { return it.code == elem.stationCode; });
         if (station) {
diff --git a/src/scripts/ConstDic.js b/src/scripts/ConstDic.js
index 4bd74bfda..9adfb41c2 100644
--- a/src/scripts/ConstDic.js
+++ b/src/scripts/ConstDic.js
@@ -128,11 +128,7 @@ export const DeviceMenu = {
     SetDriver: '106',
     Script: '107',
     IscsSystem: '108',
-	IscsInterface: '109',
-
-	planJustRunning: '1000',
-	planJustDeparture: '1001',
-	planSetParams: '1002'
+	IscsInterface: '109'
 };
 
 /**
diff --git a/src/views/planMonitor/editToolAUS/dialog/planJustRunning.vue b/src/views/planMonitor/editToolAUS/dialog/planJustRunning.vue
index 36f1dc765..7f906c7bc 100644
--- a/src/views/planMonitor/editToolAUS/dialog/planJustRunning.vue
+++ b/src/views/planMonitor/editToolAUS/dialog/planJustRunning.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { DeviceMenu } from '@/scripts/ConstDic';
+import { MenuEnum } from '../utils.js';
 
 export default {
 	props: {
@@ -29,6 +29,10 @@ export default {
 			default() {
 				return []
 			}
+		},
+		config: {
+			type: Object,
+			required: true
 		}
 	},
     data() {
@@ -38,8 +42,8 @@ export default {
 				this.stations[this.selected.dataIndex].kmRange -
 				this.stations[this.selected.dataIndex+1].kmRange
 			)
-			const min = Math.floor(offset / 19.4);
-			const max = Math.floor(offset / 8.3);
+			const min = Math.floor(offset / (this.config.maxSpeed * 1000/3600));
+			const max = Math.floor(offset / 1);
 
 			if (value < min) {
 				callback(new Error('Below minimum run time.'));
@@ -69,7 +73,7 @@ export default {
 	},
 	watch: {
         '$store.state.menuOperation.menuCount': function (val) {
-            if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planJustRunning)) {
+            if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planJustRunning)) {
                 this.doShow(this.$store.state.menuOperation.menuPosition);
             } else {
                 this.doClose();
diff --git a/src/views/planMonitor/editToolAUS/dialog/planJustStop.vue b/src/views/planMonitor/editToolAUS/dialog/planJustStop.vue
index 113ac4536..16ac90da9 100644
--- a/src/views/planMonitor/editToolAUS/dialog/planJustStop.vue
+++ b/src/views/planMonitor/editToolAUS/dialog/planJustStop.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { DeviceMenu } from '@/scripts/ConstDic';
+import { MenuEnum } from '../utils.js';
 
 export default {
 	props: {
@@ -29,12 +29,16 @@ export default {
 			default() {
 				return []
 			}
+		},
+		config: {
+			type: Object,
+			required: true
 		}
 	},
     data() {
 		var validator = (rule, value, callback) => {
-			if (value > 0 && value <= 15) {
-				callback(new Error('Stop time cannot be within 0-15 seconds.'));
+			if (value > 0 && value <= this.config.minStopTime) {
+				callback(new Error(`Stop time cannot be within 0-${this.config.minStopTime} seconds.`));
 			} else {
 				callback()
 			}
@@ -59,7 +63,7 @@ export default {
 	},
 	watch: {
         '$store.state.menuOperation.menuCount': function (val) {
-            if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planJustDeparture)) {
+            if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planJustDeparture)) {
                 this.doShow(this.$store.state.menuOperation.menuPosition);
             } else {
                 this.doClose();
diff --git a/src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue b/src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue
new file mode 100644
index 000000000..cf07414f4
--- /dev/null
+++ b/src/views/planMonitor/editToolAUS/dialog/planModifyArea.vue
@@ -0,0 +1,158 @@
+<template>
+  <el-dialog v-dialogDrag  append-to-body title="Modification of train diagram parameters" :visible.sync="dialogShow" width="30%" :close-on-click-modal="false" :before-close="doClose">
+    <el-form ref="form" label-width="160px" :model="formModel" :rules="rules">
+		<el-form-item label="Start station" prop="startStationCode">
+			<el-select v-model="formModel.startStationCode" placeholder="请选择">
+				<el-option
+					v-for="(el,i) in stations"
+					:key="i"
+					:label="el.name"
+					:value="el.code">
+				</el-option>
+			</el-select>
+		</el-form-item>
+		<el-form-item label="End station" prop="endStationCode">
+			<el-select v-model="formModel.endStationCode" placeholder="请选择">
+				<el-option
+					v-for="(el,i) in stations"
+					:key="i"
+					:label="el.name"
+					:value="el.code">
+				</el-option>
+			</el-select>
+		</el-form-item>
+		<el-form-item label="Start time" prop="startTime">
+			<el-time-picker value-format="HH:mm:ss" v-model="formModel.startTime" />
+		</el-form-item>
+		<el-form-item label="End time" prop="endTime">
+			<el-time-picker value-format="HH:mm:ss" v-model="formModel.endTime" />
+		</el-form-item>
+	</el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
+      <el-button type="primary" @click="doConfirm">{{ $t('map.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { MenuEnum } from '../utils.js';
+import { getRpConfig } from '@/api/rpTools';
+import { toTimeStamp } from '@/utils/date';
+
+export default {
+	props: {
+		stations: {
+			type: Array,
+			required: true
+		},
+		target: {
+			type: Object,
+			default() {
+				return null
+			}
+		}
+	},
+    data() {
+		var startTimeValidator = (rule, value, callback) => {
+			const startTime = toTimeStamp(value);
+			const endTime = toTimeStamp(this.formModel.endTime);
+			if (startTime >= endTime) {
+				callback(new Error('The start time is greater than the end time.'));
+			} else if (Math.abs(startTime - endTime) < 10*60) {
+				callback(new Error('The time interval shall not be less than 10 min.'));
+			} else {
+				callback()
+			}
+		}
+
+		var endTimeValidator = (rule, value, callback) => {
+			const startTime = toTimeStamp(this.formModel.startTime);
+			const endTime = toTimeStamp(value);
+			if (endTime <= startTime) {
+				callback(new Error('The end time is less than the start time.'));
+			} else if (Math.abs(startTime - endTime) < 10*60) {
+				callback(new Error('The time interval shall not be less than 10 min.'));
+			} else {
+				callback()
+			}
+		}
+
+
+        return {
+            dialogShow: false,
+			formModel: {
+				areaNo: '',
+				startStationCode: '',
+				endStationCode: '',
+				startTime: 0,
+				endTime: 0
+			},
+			rules: {
+				startStationCode: [
+					{
+						required: true, message: 'Please select the farther station.', trigger: 'blur'
+					},
+				],
+				endStationCode: [
+					{
+						required: true, message: 'Please select the closer station.', trigger: 'blur'
+					},
+				],
+				startTime: [
+					{
+						required: true, message: 'Please select the start time.', trigger: 'blur'
+					},
+					{
+						validator: startTimeValidator, trigger: 'blur'
+					}
+				],
+				endTime: [
+					{
+						required: true, message: 'Please select the end time.', trigger: 'blur'
+					},
+					{
+						validator: endTimeValidator, trigger: 'blur'
+					}
+				]
+			}
+        };
+	},
+	watch: {
+		'$store.state.menuOperation.menuCount': function (val) {
+            if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planModifyArea)) {
+                this.doShow(this.$store.state.menuOperation.menuPosition);
+            } else {
+                this.doClose();
+            }
+		}
+    },
+    methods: {
+        doShow() {
+			if (this.target &&
+				this.target.model) {
+				const model = this.target.model;
+				this.formModel = {
+					areaNo: model.areaNo,
+					startStationCode: model.fartherStationCode,
+					endStationCode: model.closerStationCode,
+					startTime: model.startTime,
+					endTime: model.endTime
+				}
+			}
+			this.dialogShow = true;
+        },
+        doClose() {
+            this.dialogShow = false;
+		},
+		doConfirm() {
+			this.$refs.form.validate((valid) => {
+				if(valid) {
+					this.$emit('modifyArea', this.formModel);
+					this.doClose();
+				}
+			});
+		}
+    }
+};
+</script>
diff --git a/src/views/planMonitor/editToolAUS/dialog/planSetParams.vue b/src/views/planMonitor/editToolAUS/dialog/planSetParams.vue
index e350c3bfc..55b4f9dd0 100644
--- a/src/views/planMonitor/editToolAUS/dialog/planSetParams.vue
+++ b/src/views/planMonitor/editToolAUS/dialog/planSetParams.vue
@@ -34,10 +34,15 @@
 </template>
 
 <script>
-import { DeviceMenu } from '@/scripts/ConstDic';
-import { getRpConfig } from '@/api/rpTools';
+import { MenuEnum } from '../utils.js';
 
 export default {
+	props: {
+		config: {
+			type: Object,
+			required: true
+		}
+	},
     data() {
         return {
             dialogShow: false,
@@ -87,7 +92,7 @@ export default {
 		selected: function(val) {
 		},
 		'$store.state.menuOperation.menuCount': function (val) {
-            if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.planSetParams)) {
+            if (this.$store.getters['menuOperation/checkDialogIsOpen'](MenuEnum.planSetParams)) {
                 this.doShow(this.$store.state.menuOperation.menuPosition);
             } else {
                 this.doClose();
@@ -96,20 +101,15 @@ export default {
     },
     methods: {
         doShow() {
-			getRpConfig().then(resp => {
-				const data = resp.data;
-				this.formModel = {
-					averageSpeed: data.averageSpeed,
-					maxSpeed: data.maxSpeed,
-					stopTime: data.stopTime,
-					minStopTime: data.minStopTime,
-					minIntervalTime: data.minIntervalTime,
-					turnBackTime: data.turnBackTime
-				}
-	            this.dialogShow = true;
-			}).catch(error => {
-				this.$message.info(error.message)
-			})
+			this.formModel = {
+				averageSpeed: this.config.averageSpeed,
+				maxSpeed: this.config.maxSpeed,
+				stopTime: this.config.stopTime,
+				minStopTime: this.config.minStopTime,
+				minIntervalTime: this.config.minIntervalTime,
+				turnBackTime: this.config.turnBackTime
+			}
+			this.dialogShow = true;
         },
         doClose() {
             this.dialogShow = false;
diff --git a/src/views/planMonitor/editToolAUS/index.vue b/src/views/planMonitor/editToolAUS/index.vue
index e4a6df08c..904067245 100644
--- a/src/views/planMonitor/editToolAUS/index.vue
+++ b/src/views/planMonitor/editToolAUS/index.vue
@@ -7,18 +7,17 @@
 			:height="height"
 			:width="width"
 			:model="model"
-			@tag="handleTarget"
-			@select="handleSelected"
-			@clear="handleClear"
-			@create="handleCreate"
-			@translate="handleTranslate"
-			@edit="handleEdit"
+			@tag="onTarget"
+			@select="onSelected"
+			@clear="onClear"
+			@create="onCreate"
+			@translate="onTranslate"
 		>
 			<template slot="header">
 				<div class="header">
 					<div class="menus-left">
 					<el-button type="primary" @click="doNewPlan">New</el-button>
-					<el-button type="primary" @click="handleDialog(DeviceMenu.planSetParams)">Set Param</el-button>
+					<el-button type="primary" @click="onDialog(DeviceMenu.planSetParams)">Set Param</el-button>
 					</div>
 					<div class="menus-right">
 						<span style="font-size:22px;padding:0 17px;">Plan</span>
@@ -26,16 +25,17 @@
 							:model="model"
 							:selected="selected"
 							:target="target"
-							@remove="handleRemove"
-							@clear="handleClear"
+							@remove="onRemove"
+							@clear="onClear"
 						/>
 					</div>
 				</div>
 			</template>
 		</schedule>
-		<plan-just-running :selected="selected" :stations="stations" @justRunning="doJustRunning" />
-	    <plan-just-stop :selected="selected" :stations="stations" @justStop="doJustStop"/>
-		<plan-set-params @setParams="doSetPlanParams" ref="planSetParams" />
+		<plan-just-running :config="config" :selected="selected" :stations="stations" @justRunning="doJustRunning" />
+	    <plan-just-stop :config="config" :selected="selected" :stations="stations" @justStop="doJustStop"/>
+		<plan-set-params :config="config" @setParams="doSetPlanParams" />
+		<plan-modify-area :target="target" :stations="stations" @modifyArea="doModifyArea" />
   </div>
 </template>
 
@@ -44,16 +44,18 @@ import Schedule from './schedule.vue';
 import PlanJustRunning from './dialog/planJustRunning.vue';
 import PlanJustStop from './dialog/planJustStop.vue';
 import PlanSetParams from './dialog/planSetParams.vue';
+import PlanModifyArea from './dialog/planModifyArea.vue';
 import Menus from './menus.vue';
 import { DeviceMenu } from '@/scripts/ConstDic';
+import { timeFormat } from '@/utils/date';
 import { mapGetters } from 'vuex';
 import { getStationList } from '@/api/runplan';
 import {
 	getRpTools, clearRpPlan, addRpTrip, delRpTrip,
 	justTripNoRunning, justTripNoStop,
 	translateTripNo,
-	modifyRpConfig,
-	createRpArea
+	getRpConfig, modifyRpConfig,
+	createRpArea, modifyRpArea, delRpArea
 } from '@/api/rpTools';
 
 export default {
@@ -62,6 +64,7 @@ export default {
 		PlanJustRunning,
 		PlanJustStop,
 		PlanSetParams,
+		PlanModifyArea,
         Menus
     },
     data() {
@@ -75,7 +78,9 @@ export default {
 			model: {
                 choice: 'Plan',
                 action: '',
-            }
+			},
+			config: {
+			}
         };
 	},
     computed: {
@@ -121,7 +126,7 @@ export default {
 		},
 		loadInitData() {
 			getStationList(this.mapId).then(resp => {
-				const stations = resp.data.filter(el => {
+				const stations = this.stations =  resp.data.filter(el => {
 					return ['车辆段', '停车场'].findIndex(it => { return el.name.includes(it) }) < 0;
 				});
 				this.$store.commit('rpTools/setStations', stations);
@@ -131,27 +136,40 @@ export default {
 					const planData = rest.data;
 					this.$store.commit('rpTools/setPlanData', planData);
 					this.$refs.schedule.loadChartData(planData);
+					getRpConfig().then(resm => {
+						const data = resm.data;
+						this.config = {
+							averageSpeed: data.averageSpeed,
+							maxSpeed: data.maxSpeed,
+							stopTime: data.stopTime,
+							minStopTime: data.minStopTime,
+							minIntervalTime: data.minIntervalTime,
+							turnBackTime: data.turnBackTime
+						}
+					}).catch(error => {
+						this.$message.info(error.message)
+					})
 				});
 			}).catch(error => {
 				this.$messageBox(error.message);
 			})
 		},
-		handleClear() {
+		onClear() {
             this.model.action = '';
 			this.selected = null;
 			this.$refs.schedule.setLineReset();
             this.$refs.schedule.clearGraphic();
 		},
-		handleDialog(menu) {
+		onDialog(menu) {
 			this.$store.dispatch('menuOperation/setPopMenu', { position: {x: 0, y: 0}, menu });
 		},
-		handleTarget(target) {
+		onTarget(target) {
 			this.target = target;
 		},
-		handleSelected(selected) {
+		onSelected(selected) {
 			this.selected = selected;
 		},
-		handleCreate(data) {
+		onCreate(data) {
 			switch(this.model.choice) {
 				case 'Plan':
 					this.doCreateTrip(data);
@@ -161,19 +179,14 @@ export default {
 				break;
 			}
 		},
-		handleEdit() {
-		},
-		handleTranslate(data) {
+		onTranslate(data) {
 			switch(this.model.choice) {
 				case 'Plan':
 					this.doTranslateTrip(data);
 				break;
-				case 'Construction':
-					this.doTranslateArea(data);
-				break;
 			}
 		},
-        handleRemove(){
+        onRemove(){
 			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
 				confirmButtonText: '确定',
 				cancelButtonText: '取消',
@@ -207,11 +220,38 @@ export default {
 		},
 		doSetPlanParams(data) {
 			modifyRpConfig(data).then(resp => {
+				this.config = data;
 				this.$message.success('Parameters of plan were modified successfully.');
 			}).catch(error => {
 				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);
+			})
+		},
 		doJustRunning(time) {
             if (this.selected) {
                 const model = {
@@ -253,7 +293,20 @@ export default {
             }
         },
 		doCreateTrip(data) {
-			addRpTrip(data).then(resp => {
+			if (Math.abs(data.endTime - data.startTime) < 2*60) {
+				this.$refs.schedule.clearGraphic(['mark']);
+				this.$message.info('The time interval shall not be less than 2 min.')
+				return;
+			}
+
+			const model = {
+				endStationCode: data.endStationCode,
+				startStationCode: data.startStationCode,
+				startTime: timeFormat(data.startTime),
+				endTime: timeFormat(data.endTime)
+			}
+
+			addRpTrip(model).then(resp => {
 				getRpTools().then(rest => {
 					const planData = rest.data;
 					this.$store.commit('rpTools/setPlanData', planData);
@@ -267,11 +320,22 @@ export default {
 			})
         },
 		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; })
+
+			if (Math.abs(endTime - startTime) < 10*60) {
+				this.$refs.schedule.clearGraphic(['mark']);
+				this.$message.info('The time interval shall not be less than 10 min.')
+				return;
+			}
+
 			const model = {
-				closerStationCode: data.startStationCode,
-				fartherStationCode: data.endStationCode,
-				startTime: data.startTime,
-				endTime: data.endTime,
+				fartherStationCode: startCodeIndex < endCodeIndex? data.endStationCode: data.startStationCode,
+				closerStationCode: startCodeIndex < endCodeIndex? data.startStationCode: data.endStationCode,
+				startTime: endTime < startTime? timeFormat(data.endTime): timeFormat(data.startTime),
+				endTime: endTime < startTime? timeFormat(data.startTime): timeFormat(data.endTime)
 			}
 
 			createRpArea(model).then(resp => {
@@ -287,7 +351,7 @@ export default {
 				this.$refs.schedule.clearGraphic(['mark']);
 			})
 		},
-		doTranslateTrip(data) {
+		doTranslateTrip() {
             if (this.selected) {
                 const model = {
                     seconds : this.selected.time
@@ -306,10 +370,6 @@ export default {
                 });
             }
         },
-		doTranslateArea(data) {
-			if (this.selected) {
-			}
-		},
 		doRemoveTrip() {
             if (this.selected) {
                 delRpTrip(this.selected.tripNo).then(resp => {
@@ -317,7 +377,7 @@ export default {
 						const planData = rest.data;
 						this.$store.commit('rpTools/setPlanData', planData);
 						this.$refs.schedule.loadChartData(planData);
-						this.handleClear();
+						this.onClear();
                     }).catch(() => {
                         this.$messageBox('Failed to load the plan.');
                     });
@@ -327,8 +387,20 @@ export default {
             }
         },
         doRemoveArea() {
-			 if (this.selected) {
-			 }
+			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.');
+                    });
+                }).catch(error => {
+                    this.$message.info(error.message);
+                })
+            }
         }
     }
 };
diff --git a/src/views/planMonitor/editToolAUS/menus.vue b/src/views/planMonitor/editToolAUS/menus.vue
index b8835a254..71cea6157 100644
--- a/src/views/planMonitor/editToolAUS/menus.vue
+++ b/src/views/planMonitor/editToolAUS/menus.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="menus">
-		<el-select v-model="model.choice" placeholder="请选择功能类型" style="margin-right:20px">
+		<el-select v-model="model.choice" placeholder="请选择功能类型" style="margin-right:20px" @change="$emit('clear')">
 			<el-option v-for="(el,i) in options" :key="i" :label="el.label" :value="el.value" />
 		</el-select>
 		<div v-if="option">
@@ -93,10 +93,6 @@ export default {
 							label: 'Add',
 							value: 'Add',
 						},
-						{
-							label: 'Translate',
-							value: 'Translate'
-						},
 						{
 							label: 'Edit',
 							value: 'Edit'
diff --git a/src/views/planMonitor/editToolAUS/monitor.js b/src/views/planMonitor/editToolAUS/monitor.js
index a0ee1860f..c09c27430 100644
--- a/src/views/planMonitor/editToolAUS/monitor.js
+++ b/src/views/planMonitor/editToolAUS/monitor.js
@@ -1,7 +1,6 @@
 import echarts from 'echarts';
 import * as utils from './utils'
-import { DeviceMenu } from '@/scripts/ConstDic';
-import { timeFormat } from '@/utils/date';
+import { MenuEnum } from './utils';
 
 export default {
 	data() {
@@ -11,8 +10,8 @@ export default {
 			buildModel: {
 				endStationCode: '',
 				startStationCode: '',
-				startTime: '',
-				endTime: ''
+				startTime: 0,
+				endTime: 0
 			},
 			selected: null,
 			target: null,
@@ -73,26 +72,47 @@ export default {
 			}
 		},
 		onUpdatePosition(e) {
+			const fixedList = ['Area'];
 			const option = this.myChart.getOption();
 			const elements = option.graphic[0].elements
-			const graphic = echarts.util.map(elements, (item) => {
-				return { position: this.myChart.convertToPixel('grid', item.point)};
+			const graphic = echarts.util.map(elements, (el) => {
+				if (fixedList.includes(el.subType)) {
+					const position = 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])
+
+					return {
+						position,
+						shape: { width, height }
+					}
+				} else {
+					return {
+						position: this.myChart.convertToPixel('grid', el.point)
+					};
+				}
 			})
+
 			this.myChart.setOption({graphic});
 		},
 		onZrMouseDown(e) {
 			if (e.target && ['Area'].includes(e.target.subType)) {
 				this.target = e.target;
 				this.$emit('tag', this.target);
+				if (this.model.choice == 'Construction') {
+					if (this.model.action == 'Edit') {
+						this.pixelExecCb(e, this.handlePopDialog);
+					}
+				}
 			}
 
 			if (this.model.choice == 'Plan') {
 				if (this.model.action == 'Add') {
-					this.pixelExecCb(e, this.handleCreateMark);
+					this.pixelExecCb(e, this.onCreateMark);
 				}
 			} else if (this.model.choice == 'Construction') {
 				if (this.model.action == 'Add') {
-					this.pixelExecCb(e, this.handleCreateArea);
+					this.pixelExecCb(e, this.onCreateArea);
 				}
 			}
 		},
@@ -100,12 +120,12 @@ export default {
 			if (['Plan', 'Construction'].includes(this.model.choice)) {
 				if(this.model.action == 'Translate' && this.dragging) {
 					this.dragging = false;
-					this.pixelExecCb(e, this.handleTranslate)
+					this.pixelExecCb(e, this.onTranslate)
 				}
 			}
 		},
 		onMouseDown(e) {
-			if (['Plan', 'Construction'].includes(this.model.choice)) {
+			if (this.model.choice == 'Plan') {
 				if (this.model.action == 'Edit') {
 					this.pixelExecCb(e, this.handlePopDialog);
 				}
@@ -116,7 +136,7 @@ export default {
 				if (this.model.choice == 'Plan') {
 					this.handleSelectLine({e});
 					if (this.model.action == 'Translate') {
-						this.handleCreateDrag({e, pointInPixel})
+						this.onCreateDrag({e, pointInPixel})
 					}
 				}
 			});
@@ -132,7 +152,7 @@ export default {
 				if (this.model.choice == 'Plan') {
 					this.handleSelectLine({e});
 					if(this.model.action == 'Translate') {
-						this.handleCreateDrag({e, pointInPixel})
+						this.onCreateDrag({e, pointInPixel})
 					}
 				}
 			});
@@ -175,20 +195,86 @@ export default {
 				});
 			}
 		},
+		onCreateDrag({e, pointInPixel}) {
+			if (this.selected) {
+				const option = this.myChart.getOption();
+				const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
+				filters.push(utils.buildDragDataObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
+				option.graphic[0].elements = filters;
+
+				this.myChart.setOption(option, {notMerge: true});
+
+				this.myChart.dispatchAction({
+					type: 'showTip',
+					seriesIndex: this.selected.seriesIndex,
+					dataIndex: this.selected.dataIndex
+				});
+			}
+		},
+		onCreateMark({e, pointInPixel, yObj, xVal}) {
+			if (!e.target) {
+				const option = this.myChart.getOption();
+				const graphic = option.graphic;
+				const elements = graphic[0].elements;
+
+				elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
+
+				this.myChart.setOption(option, {notMerge: true});
+
+				const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
+				const elemList = elements.filter(el => { return el.subType != 'mark'});
+
+				if (markList.length == 1) {
+					this.buildModel.startStationCode = yObj.code;
+					this.buildModel.startTime = xVal;
+				} else if (markList.length >= 2) {
+					this.buildModel.endStationCode = yObj.code;
+					this.buildModel.endTime = xVal;
+					option.graphic[0].elements = elemList;
+					this.$emit('create', this.buildModel);
+				}
+			}
+		},
+		onCreateArea({e, pointInPixel, yObj, xVal}) {
+			if (!e.target) {
+				const option = this.myChart.getOption();
+				const graphic = option.graphic;
+				const elements = graphic[0].elements;
+
+				elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
+
+				this.myChart.setOption(option, {notMerge: true});
+
+				const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
+				const elemList = elements.filter(el => { return el.subType != 'mark'});
+
+				if (markList.length == 1) {
+					this.buildModel.startStationCode = yObj.code;
+					this.buildModel.startTime = xVal;
+				} else if (markList.length >= 2) {
+					this.buildModel.endStationCode = yObj.code;
+					this.buildModel.endTime = xVal;
+					option.graphic[0].elements = elemList;
+					this.$emit('create', this.buildModel);
+				}
+			}
+		},
 		handlePopDialog({e, pointInPixel}) {
+			const point = {
+				x: pointInPixel[0],
+				y: pointInPixel[1]
+			}
+
 			if (e.componentType == "series" &&
 				e.componentSubType == "line" &&
 				e.seriesName.includes('plan-')) {
-				const value = e.value;
-				const point = {
-					x: pointInPixel[0],
-					y: pointInPixel[1]
-				}
+
 				const option = this.myChart.getOption();
 				const dataList = option.series[e.seriesIndex].data;
 				const length = dataList.length;
 				const nxt = dataList[e.dataIndex+1];
 				const pre = dataList[e.dataIndex-1];
+				const value = e.value;
 
 				this.selected = {
 					dataIndex: e.dataIndex,
@@ -205,10 +291,12 @@ export default {
 				this.$emit('select', this.selected);
 
 				if (e.dataIndex < length - 1 && value[2] == nxt[2]) {
-					this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: DeviceMenu.planJustDeparture });
+					this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustDeparture });
 				} else if (e.dataIndex == 0 ||  e.dataIndex > 0 && value[1] == pre[1]) {
-					this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: DeviceMenu.planJustRunning });
+					this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planJustRunning });
 				}
+			} else if (e.target && e.target.subType == 'Area') {
+				this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: MenuEnum.planModifyArea });
 			}
 		},
 		handleSelectLine({e}) {
@@ -244,72 +332,6 @@ export default {
 				this.setLineLight();
 			}
 		},
-		handleCreateDrag({e, pointInPixel}) {
-			if (this.selected) {
-				const option = this.myChart.getOption();
-				const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
-				// const point =  [e.value[0], e.value[1]]
-				// filters.push(utils.buildDragDataObj(this.myChart.convertToPixel('grid', point), point, this))
-				filters.push(utils.buildDragDataObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
-				option.graphic[0].elements = filters;
-
-				this.myChart.setOption(option, {notMerge: true});
-
-				this.myChart.dispatchAction({
-					type: 'showTip',
-					seriesIndex: this.selected.seriesIndex,
-					dataIndex: this.selected.dataIndex
-				});
-			}
-		},
-		handleCreateMark({e, pointInPixel, yObj, xVal}) {
-			if (!e.target) {
-				const option = this.myChart.getOption();
-				const graphic = option.graphic;
-				const elements = graphic[0].elements;
-
-				elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
-
-				this.myChart.setOption(option, {notMerge: true});
-
-				const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
-				const elemList = elements.filter(el => { return el.subType != 'mark'});
-
-				if (markList.length == 1) {
-					this.buildModel.startStationCode = yObj.code;
-					this.buildModel.startTime = timeFormat(xVal);
-				} else if (markList.length >= 2) {
-					this.buildModel.endStationCode = yObj.code;
-					this.buildModel.endTime = timeFormat(xVal);
-					option.graphic[0].elements = elemList;
-					this.$emit('create', this.buildModel);
-				}
-			}
-		},
-		handleCreateArea({e, pointInPixel, yObj, xVal}) {
-			if (!e.target) {
-				const option = this.myChart.getOption();
-				const graphic = option.graphic;
-				const elements = graphic[0].elements;
-
-				elements.push(utils.buildMarkPointObj(pointInPixel, this.myChart.convertFromPixel('grid', pointInPixel), this))
-
-				this.myChart.setOption(option, {notMerge: true});
-
-				const markList = this.markList = elements.filter(el => { return el.subType == 'mark'});
-				const elemList = elements.filter(el => { return el.subType != 'mark'});
-
-				if (markList.length == 1) {
-					this.buildModel.startStationCode = yObj.code;
-					this.buildModel.startTime = timeFormat(xVal);
-				} else if (markList.length >= 2) {
-					this.buildModel.endStationCode = yObj.code;
-					this.buildModel.endTime = timeFormat(xVal);
-					option.graphic[0].elements = elemList;
-					this.$emit('create', this.buildModel);
-				}
-			}
-		},
 		handleSeriesDragging({e, xVal}) {
 			if (this.selected) {
 				this.selected.dx = xVal - this.selected._x;
@@ -335,8 +357,8 @@ export default {
 		},
 		handleAreaDragging({e, xVal}) {
 		},
-		handleTranslate({e}) {
-			this.$emit('translate', this.buildModel);
+		onTranslate({e}) {
+			this.$emit('translate');
 		}
 	}
 }
diff --git a/src/views/planMonitor/editToolAUS/schedule.vue b/src/views/planMonitor/editToolAUS/schedule.vue
index 0dbf12e86..e720d7c16 100644
--- a/src/views/planMonitor/editToolAUS/schedule.vue
+++ b/src/views/planMonitor/editToolAUS/schedule.vue
@@ -189,21 +189,21 @@ export default {
             return '';
 		},
 		axisTooltip(param) {
-            let data = '';
-            const arr = [];
-            const station = this.stations.find(el => { return el.code == param.value[2] })||{ name: '', kmRange: ''};
-            if (!arr.includes(`${param.data[0]}${param.data[1]}`)) {
-				arr.push(`${param.data[0]}${param.data[1]}`);
-				console.log(param)
-                    const list = [
-                        `Station name: ${station.name}<br>`,
-                        `Kilometer post: ${station.kmRange} m <br>`,
-                        `Arrival Time: ${timeFormat(param.data[0] + this.planUtil.TranslationTime)}<br>`,
-                        `Train number: ${param.seriesName}`,
-                        `<hr size=1 style="margin: 3px 0">`
-                    ];
-                    data += list.join('');
-            }
+			let data = '';
+			const xVal = param.data[0];
+			const yObj = param.data[1];
+			const model = param.value[2];
+            const station = this.stations.find(el => { return el.code == yObj.stationCode })||{ name: '', kmRange: ''};
+			const list = [
+				`Service No: ${model.serviceNo}<br>`,
+				`Trip No: ${model.tripNo}<br>`,
+				`direction: ${model.direction == 2? 'Up': 'Down'}<br>`,
+				`Station name: ${station.name}<br>`,
+				`Kilometer post: ${station.kmRange} m <br>`,
+				`Arrival Time: ${timeFormat(xVal + this.planUtil.TranslationTime)}<br>`,
+				`<hr size=1 style="margin: 3px 0">`
+			];
+			data += list.join('');
             return data;
         },
         loadInitChart() {
@@ -252,7 +252,8 @@ export default {
 				this.planData = planData;
 
                 this.pushModels(option.series, [this.planUtil.initializeYaxis(this.stations)]);
-                this.pushModels(option.series, this.planUtil.parseDataToModels(planData, this.stations, this.kmRangeCoordMap));
+                this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations, this.kmRangeCoordMap));
+				this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations, this.kmRangeCoordMap));
 
                 this.myChart.setOption(option, {notMerge: true});
             } catch (error) {
@@ -329,7 +330,7 @@ export default {
 						showAllSymbol: true,
 						lineStyle: {
 							width: 2,
-							color: 'red'
+							color: '#0000FF'
 						}
 					}
 				});
@@ -344,7 +345,7 @@ export default {
 						showAllSymbol: true,
 						lineStyle: {
 							width: 1,
-							color: '#000'
+							color: '#000000'
 						}
 					}
 				});
diff --git a/src/views/planMonitor/editToolAUS/utils.js b/src/views/planMonitor/editToolAUS/utils.js
index 31b551e3e..d649b73c4 100644
--- a/src/views/planMonitor/editToolAUS/utils.js
+++ b/src/views/planMonitor/editToolAUS/utils.js
@@ -1,37 +1,12 @@
 import echarts from 'echarts';
 
-export function buildDragAreaObj(position, point, that) {
-	const markList = that.markList||[];
-	const length = markList.length;
-	const first = markList[0];
-	const last = markList[length-1];
-	const width = first.position[0] - last.position[0]||20;
-	const height = first.position[1] - last.position[1]||20;
-
-	return {
-		type: 'rect',
-		subType: 'Area',
-		position: [...position],
-		point: [...point],
-		shape: {
-			x: 0,
-			y: 0,
-			width,
-			height
-		},
-		style: {
-			fill: 'rgb(255,0,0, 0.3)',
-			stroke: 'rgb(255, 0, 0, 0.8)'
-		},
-		draggable: 'horizontal',
-		ondrag: echarts.util.curry(that.onShapeDragging),
-		onmouseover: echarts.util.curry(that.onShapeMouseOver),
-		onmouseout: echarts.util.curry(that.onShapeMouseOut),
-		z: 100
-	}
+export const MenuEnum = {
+	planJustRunning: '1000',
+	planJustDeparture: '1001',
+	planSetParams: '1002',
+	planModifyArea: '1003'
 }
 
-
 export function buildDragDataObj(position, point, that) {
 	return {
 		type: 'circle',