修改代码

src/jmapNew/theme/aus_00/planConvert.js

@@ -16,7 +16,8 @@ export default {
 		/** 按车次遍历数据*/
 		if (tripList && tripList.length) {
 			tripList.forEach(trip => {
-				const opt = { name: `run-${trip.tripNo}`, type: 'line', showAllSymbol:true, symbolKeepAspect: false, symbolSize: 6, markPoint: { data: [] }, data: []};
+				// const opt = { name: `run-${trip.tripNo}`, type: 'line', showAllSymbol:true, symbolKeepAspect: false, symbolSize: 6, markPoint: { data: [] }, data: []};
+				const opt = { name: `run-${trip.tripNo}`, type: 'line', legendHoverLink: false, symbolSize: 8, markPoint: { data: [] }, data: []};
 
 				// const length = trip.stationTimeList.length;
 				// if (trip.tripNo &&

src/permission.js

@@ -14,7 +14,7 @@ import localStore from 'storejs';
 //     return roles.some(role => permissionRoles.indexOf(role) >= 0);
 // }
 
-const whiteList = ['/login', '/design/login', '/gzzbxy/relay']; // 不重定向白名单
+const whiteList = ['/login', '/design/login', '/gzzbxy/relay', '/AUStool']; // 不重定向白名单
 
 // const designPageRegex = [/^\/design/, /^\/scriptDisplay/, /^\/publish/, /^\/orderauthor/, /^\/system/, /^\/iscs/, /^\/display\/record/, /^\/display\/manage/, /^\/apply/, /^\/plan/, /^\/display\/plan/, /^\/displayNew\/record/, /^\/displayNew\/manage/, /^\/displayNew\/plan/, /^\/practiceDisplayNew/, /^\/bigSplitScreen/];
 

src/router/index_Common.js

@@ -217,6 +217,11 @@ export const constantRoutes = [
         path: '/design/jlmap3d/assetmanager',
         component: Jlmap3dAssetManager,
         hidden: true
+	},
+	{ // 运行图编辑
+        path: '/AUStool',
+        component: PlanMonitorEditAUSTool,
+        hidden: true
     },
     {
         path: '/jlmap3d/sandbox',
@@ -371,11 +376,6 @@ export const publicAsyncRoute = [
         component: PlanMonitorEditUserTool,
         hidden: true
 	},
-	{ // 运行图编辑
-        path: '/plan/AUStool',
-        component: PlanMonitorEditAUSTool,
-        hidden: true
-    },
     { // 运行图编辑
         path: '/plan/tool',
         component: PlanMonitorEditTool,

src/views/planMonitor/editToolAUS/monitor.js

@@ -1,6 +1,7 @@
 import echarts from 'echarts';
 import { DeviceMenu } from '@/scripts/ConstDic';
 import { timeFormat } from '@/utils/date';
+import { option } from 'runjs';
 
 export default {
 	data() {
@@ -39,13 +40,13 @@ export default {
 				let pointInGrid = myChart.convertFromPixel({seriesIndex:0},pointInPixel);
 				let xIndex = pointInGrid[0];
 				let yIndex = pointInGrid[1];
-				let op = myChart.getOption();
+				let option = myChart.getOption();
-				let minY = op.yAxis[0].min;
+				let minY = option.yAxis[0].min;
-				let xVal = op.xAxis[0].data[xIndex];
+				let xVal = option.xAxis[0].data[xIndex];
 				let edgeOffset = this.planConvert.EdgeHeight/6;
 				let yObj = this.getStationByCoord(this.stations, yIndex-minY-edgeOffset);
 				if (yObj && cb) {
-					cb(yObj, xVal, pointInPixel);
+					cb(option, yObj, xVal, pointInPixel);
 				}
 			}
 		},
@@ -56,7 +57,8 @@ export default {
 				zr.on('click', this.onClick, this)
 				this.myChart.on('contextmenu', this.onContextMenu);
 				this.myChart.on('mousedown', this.onMouseDown);
-				this.myChart.on('datazoom', this.onUpdateZoom);
+				this.myChart.on('mouseup', this.onMouseUP);
+				this.myChart.on('datazoom', this.onUpdatePosition);
 				window.addEventListener('resize', this.onUpdatePosition);
 			}
 		},
@@ -65,41 +67,15 @@ export default {
 				const zr = this.myChart.getZr();
 
 				zr.off('click', this.onClick);
-				this.myChart.off('contextmenu', this.onContextMenu)
+				this.myChart.off('contextmenu', this.onContextMenu);
 				this.myChart.off('mousedown', this.onMouseDown);
-				this.myChart.off('datazoom', this.onUpdateZoom);
+				this.myChart.off('mouseup', this.onMouseUP);
+				this.myChart.off('datazoom', this.onUpdatePosition);
 				window.removeEventListener('resize', this.onUpdatePosition);
 			}
 		},
-		loadInitGraphic() {
-			const option = this.myChart.getOption();
-			const graphic = option.series.map((el,i) => {
-				return {
-					id: el.name,
-					elements: echarts.util.map(el.data||[], (el, dataIndex) => {
-						return {
-							type: 'circle',
-							position: this.myChart.convertToPixel('grid', el),
-							shape: {
-								cx: 0,
-								cy: 0,
-								r: 10
-							},
-							invisible: true,
-							draggable: true,
-							ondrag: echarts.util.curry(this.onPointDragging, dataIndex),
-							onmousemove: echarts.util.curry(this.onShowTooltip, dataIndex),
-							onmouseout: echarts.util.curry(this.onHideTooltip, dataIndex),
-							z: 100
-						};
-					})
-				}
-			})
-			graphic.push({ id: 'operate', elements: [] })
-			this.myChart.setOption({ graphic });
-		},
 		onPointDragging(dataIndex, dx, dy) {
-			//
+			console.log(dataIndex, dx, dy, this.selected)
 		},
 		onShowTooltip(dataIndex) {
 			this.myChart.dispatchAction({
@@ -113,38 +89,18 @@ export default {
 		},
 		onUpdatePosition(e) {
 			const option = this.myChart.getOption();
-			const shapes = option.graphic;
+			const elements = option.graphic[0].elements
-			// const graphic = shapes.map(el => {
+			const graphic = echarts.util.map(elements, (item) => {
-			// 	return echarts.util.map(el.elements||[], function (item, dataIndex) {
+				return {
-			// 		console.log(item, this.myChart.convertToPixel('grid', item.point))
+					position: this.myChart.convertToPixel('grid', item.data)
-			// 		return {
+				};
-			// 			position: this.myChart.convertToPixel('grid', item.point)
+			})
-			// 		};
-			// 	})
-			// })
-			// this.myChart.setOption({graphic});
-		},
-		onUpdateZoom(e) {;
-			const option = this.myChart.getOption();
-			const shapes = option.graphic;
 
-			// const graphic = shapes.map(el => {
+			this.myChart.setOption({graphic});
-			// 	console.log(el)
-			// 	const points = (el.elements||[]).map(el => { return el.point; });
-			// 	return echarts.util.map(points, function (point, dataIndex) {
-			// 		console.log(point, this.myChart.convertToPixel('grid', point))
-			// 		return {
-			// 			position: this.myChart.convertToPixel('grid', point)
-			// 		};
-			// 	})
-			// })
-			// this.myChart.setOption({graphic});
 		},
 		onClick(e) {
-			switch(this.action) {
+			if (this.action == 'Plan') {
-				case 'Plan':
+				this.pixelExecCb(e, this.handleCreateMark);
-					this.pixelExecCb(e, this.handleMarkPoint);
-				break;
 			}
 		},
 		onContextMenu(e) {
@@ -169,7 +125,9 @@ export default {
 					seriesId: e.seriesName.replace('run-', ''),
 					depTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
 					runTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
-					stationCode: value[2]
+					stationCode: value[2],
+					_x: value[0],
+					_y: value[1],
 				}
 
 				if (e.dataIndex == length - 1 ||
@@ -197,85 +155,106 @@ export default {
 					seriesId: e.seriesName.replace('run-', ''),
 					depTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
 					runTime: e.dataIndex < length - 1? nxt[0] - value[0]: 0,
-					stationCode: value[2]
+					stationCode: value[2],
+					_x: value[0],
 				}
 
-				this.dragging = true;
+				if (this.action == 'Translate') {
+					this.handleCreateDrag(option, value);
+				}
 			}
 		},
-		clearMarks() {
+		onMouseUP(e) {
-			const option = this.myChart.getOption();
+			if (this.selected) {
-			const graphic = option.graphic;
-			const index = graphic.findIndex(el => { return el.id == 'operate'});
-			if (index >= 0) {
-				graphic[index].elements = [];
 			}
+		},
+		clearGraphic(labels) {
+			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});
 		},
-		createMarkPoint(point, text) {
+		createDragGraphicObj(point, dataIndex) {
 			return {
 				type: 'circle',
-				z: 100,
+				subType: 'drag',
-				position: point,
+				position: this.myChart.convertToPixel('grid', point),
-				point,
+				data: [...point],
 				shape: {
 					cx: 0,
 					cy: 0,
 					r: 10
 				},
 				style: {
-					fill: 'rgba(0,0,0,0.3)'
+					fill: 'rgba(92,12,20,220.3)'
-				}
+				},
+				draggable: true,
+				ondrag: echarts.util.curry(this.onPointDragging, dataIndex),
+				onmousemove: echarts.util.curry(this.onShowTooltip, dataIndex),
+				onmouseout: echarts.util.curry(this.onHideTooltip, dataIndex),
+				z: 100
 			}
-
-			// return {
-            // 	type: 'group',
-			// 	z: 100,
-			// 	position: point,
-			// 	point,
-			// 	children: [
-			// 		{
-			// 			type: 'circle',
-			// 			z: 100,
-			// 			shape: {
-			// 				cx: 0,
-			// 				cy: 0,
-			// 				r: 5
-			// 			},
-			// 			style: {
-			// 				fill: 'rgba(0,0,0,0.3)'
-			// 			}
-			// 		},
-			// 		{
-			// 			type: 'circle',
-			// 			z: 100,
-			// 			shape: {
-			// 				cx: 0,
-			// 				cy: 0,
-			// 				r: 10
-			// 			},
-			// 			style: {
-			// 				fill: 'rgba(0,0,0,0.3)'
-			// 			}
-			// 		}
-			// 	]
-			// }
 		},
-		handleMarkPoint(yObj, xVal, pointInPixel) {
+		createMarkPointObj(point) {
-			let myChart = this.myChart;
+			return {
-			if (myChart) {
+				type: 'group',
-				let op = myChart.getOption();
+			 	subType: 'mark',
-				let graphic = op.graphic[0];
+				z: 100,
-				if (graphic) {
+				position: point,
-					graphic.elements.push(this.createMarkPoint(pointInPixel, 'hello world'))
+				point,
-					myChart.setOption(op);
+				children: [
-					if (graphic.elements.length == 1) {
+					{
-						this.createModel.startStationCode = yObj.code;
+						type: 'circle',
-						this.createModel.startTime = timeFormat(xVal);
+						z: 100,
-					} else if (graphic.elements.length >= 2) {
+						shape: {
-						this.createModel.endStationCode = yObj.code;
+							cx: 0,
-						this.handleCreate(this.createModel);
+							cy: 0,
+							r: 5
+						},
+						style: {
+							fill: 'rgba(0,0,0,0.3)'
+						}
+					},
+					{
+						type: 'circle',
+						z: 100,
+						shape: {
+							cx: 0,
+							cy: 0,
+							r: 10
+						},
+						style: {
+							fill: 'rgba(0,0,0,0.3)'
+						}
 					}
+				]
+			}
+		},
+		handleCreateDrag(option, value) {
+			const filters = option.graphic[0].elements.filter(el => { return el.subType != 'drag'});
+
+			filters.push(this.createDragGraphicObj(value))
+			option.graphic[0].elements = filters;
+			this.myChart.setOption(option, {notMerge: true});
+		},
+		handleCreateMark(option, yObj, xVal, pointInPixel) {
+			const myChart = this.myChart;
+			if (myChart) {
+				const graphic = option.graphic;
+				const elements = graphic[0].elements;
+
+				elements.push(this.createMarkPointObj(pointInPixel))
+
+				myChart.setOption(option, {notMerge: true});
+
+				const filters = elements.filter(el => { return el.subType == 'mark'});
+
+				if (filters.length == 1) {
+					this.createModel.startStationCode = yObj.code;
+					this.createModel.startTime = timeFormat(xVal);
+				} else if (filters.length >= 2) {
+					this.createModel.endStationCode = yObj.code;
+					this.handleCreate(this.createModel);
 				}
 			}
 		}

src/views/planMonitor/editToolAUS/schedule.vue

@@ -30,7 +30,6 @@ import { mapGetters } from 'vuex';
 import { timeFormat } from '@/utils/date';
 import { getStationList } from '@/api/runplan';
 import { getRpTools, addRpTrip, delRpTrip,  justTripNoRunning, justTripNoStop} from '@/api/rpTools';
-import { loadMapDataById } from '@/utils/loaddata';
 import { getPublishMapInfo } from '@/api/jmap/map';
 
 export default {
@@ -79,7 +78,12 @@ export default {
 				{
 					name: 'Plan',
 					type: 'Plan'
-				}			]
+				},
+				{
+					name: 'Translate',
+					type: 'Translate'
+				}
+			]
         };
     },
     computed: {
@@ -180,7 +184,7 @@ export default {
                     max: 0
 				},
 				graphic: [{
-					id: 'operate',
+					id: 'shape',
 					elements: []
 				}],
                 series: [],
@@ -260,7 +264,6 @@ export default {
                 this.$store.dispatch('rpTools/clear').then(() => {
                     this.loadInitChart().then(() => {
                         if (this.mapId) {
-							loadMapDataById(this.mapId);
 							getStationList(this.mapId).then(resp => {
 								const stations = resp.data.filter(el => {
 									return ['车辆段', '停车场'].findIndex(it => {
@@ -309,12 +312,13 @@ export default {
 				const option = this.myChart.getOption();
 
 				option.series = [];
-				option.graphic = [{ id: 'operate', elements: [] }];
+				option.graphic[0].elements = [];
+				console.log(option);
 				this.kmRangeCoordMap = this.planConvert.convertStationsToMap(stations);
 				this.pushModels(option.series, [this.planConvert.initializeYaxis(this.stations)]);
 				this.pushModels(option.series, this.planConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 0.5, color: '#000' }));
+
 				this.myChart.setOption(option, {notMerge: true});
-				this.loadInitGraphic();
             } catch (error) {
                 this.$messageBox(this.$t('error.loadingOperationGraphFailed') + this.$t('global.colon') + error.message);
             }
@@ -418,12 +422,13 @@ export default {
 		handleBtnSelect(el, i) {
 			this.active = i;
 			this.action = el.type;
+			this.clearGraphic(['drag', 'mark']);
 		},
 		handleCancle() {
 			this.active = -1;
 			this.action = '';
 			this.selected = null;
-			this.clearMarks();
+			this.clearGraphic(['drag', 'mark']);
 		},
 		handleCreate(data) {
 			if (this.myChart) {
@@ -437,7 +442,7 @@ export default {
 					});
 				}).catch(error => {
 					this.$message(error.message);
-					this.clearMarks();
+					this.clearGraphic(['mark']);
 				})
 			}
 		},