多仿真模型界面功能完善（保存，更新，修改，设为仿真，返回，轨迹）

src/api/workManagement.js

@@ -33,6 +33,10 @@ const carList = basePart + '/simulationProject/selectDropDownByTypeNew'; //多
 const mapList = basePart + '/simulationMap/selectAllSimulationMapList'; //多模式仿真获取地图列表
 const algorithmList = basePart + '/simulationProject/selectDropDownByTypeNew';//多模式仿真获取算法列表
 const mapDetails = basePart + '/simulationMap/getSimulationMap';//多模式仿真获取地图详情
+const sceneCarList = basePart + '/simulationProject/getMultiSimulationSceneCarList';//获取记录
+const deleteRecord = basePart + '/simulationProject/deleteMultiSimulationSceneCar';//删除记录
+const settingsSimulation = basePart + '/simulationProject/setMultiSimulationSceneCarView';//设置仿真视角
+const saveOrUpdateSceneCarList = basePart + '/simulationProject/addOrUpdateMultiSimulationSceneCarList';//设置仿真视角
 
 export default {
     addOrUpdateProject,
@@ -52,6 +56,10 @@ export default {
 	mapList,
 	algorithmList,
 	mapDetails,
+	sceneCarList,
+	deleteRecord,
+	settingsSimulation,
+	saveOrUpdateSceneCarList,
 
     selectProjectDetailsById,
     selectProjectTaskList,

src/mixin/workManagement/openDriveMixin.js

@@ -74,7 +74,7 @@ export let openDriveMixin = {
 				-295.65, 117.04, -408.97, -114.11, -272.34, -220.81, 250.93, 194.26,
 				338.92, 65.23, -3.58, -16.76,
 			],
-			startAndEndPoints: [],
+			startAndEndPoints: {},
 			mappingLineId: new Map()
 		}
 	},
@@ -87,23 +87,22 @@ export let openDriveMixin = {
 	},
 	methods: {
 		drawPoint(point) {
-			let arr = this.startAndEndPoints;
-			if (arr.length != 0) {
-				for (let elem of arr) {
-					if (elem.point.type == point.type) {
-						let index = arr.indexOf(elem);
-						if (index !== -1) {
-							arr = [...arr.slice(0, index), ...arr.slice(index + 1)];
-						}
-						this.scene.remove(elem.target);
-					}
-				}
+			if (this.startAndEndPoints[point.type]) {
+				this.scene.remove(this.startAndEndPoints[point.type].target);
 			}
+
 			const group = new THREE.Group();
 			let cricle = new THREE.CircleBufferGeometry(5, 200);
-			let metrial = new THREE.MeshBasicMaterial({
-				color: 0xff0000
-			})
+			let metrial;
+			if (point.type == "start") {
+				metrial = new THREE.MeshBasicMaterial({
+					color: 0x00FF00
+				})
+			} else {
+				metrial = new THREE.MeshBasicMaterial({
+					color: 0xff0000
+				})
+			}
 			let mesh = new THREE.Mesh(cricle, metrial);
 			group.add(mesh);
 			let texture = new THREE.CanvasTexture(this.getTextCanvas(point.name));
@@ -113,21 +112,18 @@ export let openDriveMixin = {
 			let sprite = new THREE.Sprite(material);
 			sprite.position.set(0, 0, 2);
 			group.add(sprite);
-			group.position.set(point.x - this.OpenDriveMap.x_offs, point.y - this.OpenDriveMap.y_offs, 0.015)
+			group.position.set(point.x - this.OpenDriveMap.x_offs, point.y - this.OpenDriveMap.y_offs, 0.015);
 			this.scene.add(group);
-
-			this.startAndEndPoints.push({
+			this.startAndEndPoints[point.type] = {
 				target: group,
 				point: point
-			});
-
+			};
 		},
 		clearPoint() {
-			if (this.startAndEndPoints.length != 0) {
-				for (let elem of this.startAndEndPoints) {
-					this.scene.remove(elem.target);
-				}
-			}
+			Object.values(this.startAndEndPoints).forEach(value => {
+				this.scene.remove(value.target);
+			});
+			this.startAndEndPoints = {};
 		},
 		clearMappingId() {
 			this.mappingLineId = new Map();
@@ -146,6 +142,7 @@ export let openDriveMixin = {
 			});
 		},
 		reloadOdrMap() {
+			this.clearPoint();
 			if (this.OpenDriveMap) this.OpenDriveMap.delete();
 			this.OpenDriveMap = new this.ModuleOpenDrive.OpenDriveMap(
 				"./data.xodr",
@@ -437,7 +434,7 @@ export let openDriveMixin = {
 			this.camera.far = max_diag_dist * 1.5;
 			//controls.autoRotate = fit_view;
 
-            this.camera.position.set(0, 0, max_diag_dist/3);
+			this.camera.position.set(0, 0, max_diag_dist / 3);
 			// if (fit_view) {
 			// 	this.camera.position.set(0, 0, 50);
 			// 	// fitViewToBbox(bbox_reflines);
@@ -487,7 +484,7 @@ export let openDriveMixin = {
 			// 	sphereMesh.rotation.x = Math.PI / 2;
 			// 	this.scene.add(sphereMesh);
 			// });
-			 // this.scene.environment = new THREE.Color(0x2F4F4F);
+			// this.scene.environment = new THREE.Color(0x2F4F4F);
 
 			/**
 			 * 灯光
@@ -693,10 +690,10 @@ export let openDriveMixin = {
 			const lane_id_pixel_buffer = new Float32Array(4);
 			this.renderer.readRenderTargetPixels(
 				this.lane_picking_texture,
-				0, 
-				0, 
-				1, 
-				1, 
+				0,
+				0,
+				1,
+				1,
 				this.lane_id_pixel_buffer
 			);
 			const roadmark_id_pixel_buffer = new Float32Array(4);
@@ -862,7 +859,7 @@ export let openDriveMixin = {
 			this.renderer.setSize(window.innerWidth, window.innerHeight);
 			this.renderer.setPixelRatio(window.devicePixelRatio);
 		},
-		init(){
+		init() {
 			this.initThreeJs();
 			this.initOffscreen();
 			this.initMaterial();

src/views/workManagement/openDriver.vue → src/views/workManagement/components/openDriver.vue

@@ -22,7 +22,10 @@
 		data() {
 			return {
 				isLoaded: false,
-				lineArr:[]
+				lineArr:[],
+				startPointJson: {},
+				endPointJson: {},
+				timer: ''
 			};
 		},
 		props: {
@@ -46,18 +49,8 @@
 		methods: {
 			changeMap(fileUrl) {
 				this.onFileSelect(fileUrl);
-				this.reloadOdrMap();
 			},
 			getMapDetails(mapId) {
-			    if(mapId == "2"){
-					if(this.isLoaded == true){
-						this.reloadNewMap("/map/mine4.xodr");
-					}else{
-						this.loadMap("/map/mine4.xodr");
-						this.isLoaded = true;
-					}
-					return;
-				}
 				
 				this.$axios({
 					method: "post",
@@ -76,6 +69,15 @@
 						
 					}
 				})
+			},
+			reloadMap(){
+				this.reloadOdrMap();
+				this.initData();
+			},
+			initData(){
+				// this.startPoint = {};
+				// this.endPoint = {};
+				// this.sections = [];
 			}
 		},
 		mounted() {
@@ -91,13 +93,11 @@
 			},
 			startPoint: {
 				handler(newVal, oldVal) {
-					newVal.type="start";
 					this.drawPoint(newVal);
 				}
 			},
 			endPoint: {
 				handler(newVal, oldVal) {
-					newVal.type="end";
 					this.drawPoint(newVal);
 				}
 			},
@@ -107,7 +107,7 @@
 						this.lineArr.forEach((elem, index) => {
 							this.clearColorLine(elem.roadId, elem.laneId);
 						})
-						this.clearPoint();
+						//this.clearPoint();
 					}
 					newVal.forEach((elem, index) => {
 						this.fillColorLine(elem.roadId, elem.laneId);

src/views/workManagement/components/pathDialog.vue

@@ -0,0 +1,146 @@
+<template>
+	<el-dialog title="选择轨迹" :visible.sync="open" width="25%" :before-close="onClose" :modal="false"
+		:close-on-click-modal="false">
+		<el-form ref="form" :model="selectRecord" label-width="100px" size="mini">
+			<el-form-item label="选择轨迹">
+				<el-select v-model="dataParams.pathId" @change="switchTrack">
+					<el-option v-for="item in trackList" :key="item.id" :label="item.id" :value="item.id">
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item label="轨迹起点">
+				<el-select v-model="dataParams.pathStartJson" value-key="name" @change="switchStartPoint">
+					<el-option v-for="(item, index) in selectTrack.startPoints" :key="index" :label="item.name"
+						:value="item" :disabled="checkOption(selectTrack.id, item.name, 'start')">
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item label="轨迹终点">
+				<el-select v-model="dataParams.pathEndJson" value-key="name" @change="switchEndPoint">
+					<el-option v-for="(item, index) in selectTrack.endPoints" :key="index" :label="item.name"
+						:value="item" :disabled="checkOption(selectTrack.id, item.name, 'end')">
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item label="车辆朝向">
+				<el-input v-model="dataParams.pathStartJson.h" disabled></el-input>
+			</el-form-item>
+		</el-form>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="onClose">取 消</el-button>
+			<el-button type="primary" @click="onSubmit">确 定</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "PathDialog",
+		components: {
+			// vueQr,
+			// glHome,
+		},
+		data() {
+			return {
+				selectRecord: {
+					pathStartJson: {
+
+					}
+				},
+				trackList: [],
+				selectTrack: {},
+				dataParams: {
+					pathId: "",
+					pathStartJson: {},
+					pathEndJson:{}
+				}
+			};
+		},
+		props: {
+			open: {
+				type: Boolean,
+				default: () => false
+			},
+			params: {
+				type: Object,
+				default: _ => {}
+			}
+
+		},
+		methods: {
+			checkOption(pathId, pointName, type){
+				if(!this.dataParams.selectedPoints[pathId]){
+					return false;
+				}
+				
+				if(!this.dataParams.selectedPoints[pathId][type]){
+					return false;
+				}
+				return this.dataParams.selectedPoints[pathId][type].includes(pointName);
+			},
+			isEmptyJson(obj) {
+			    return Object.keys(obj).length === 0;
+			},
+			getMapDetails(mapId) {
+				this.$axios({
+					method: "post",
+					url: this.$api.workManagement.mapDetails,
+					data: {
+						mapId
+					}
+				}).then((res) => {
+					if (res.code == 200 && res.info) {
+						this.trackList = res.info.path;
+						this.switchTrack(this.params.pathId);
+					}
+				})
+			},
+			switchTrack(id) {
+				let isFirst = this.isEmptyJson(this.selectTrack);
+				this.trackList.forEach((elem, index) => {
+					if (elem.id == id) {
+						this.selectTrack = elem;
+					}
+				});
+				if(!isFirst){
+					this.dataParams.pathStartJson = {};
+					this.dataParams.pathEndJson = {};
+				}
+				this.changeMap();
+
+			},
+			switchStartPoint() {
+				this.changeMap();
+			},
+			switchEndPoint() {
+				this.changeMap();
+			},
+			changeMap() {
+				let data = Object.assign({}, this.dataParams, {sections: this.selectTrack.sections})
+				data.pathStartJson.type = "start";
+				data.pathEndJson.type = "end";
+				this.$emit("change", data);
+			},
+			onClose() {
+				this.$emit("onClose");
+			},
+			onSubmit() {
+				this.$emit("onSubmit", Object.assign({}, this.dataParams, {
+					sections: this.selectTrack.sections
+				}));
+			}
+		},
+		watch: {
+			params: {
+				handler(newVal, oldVal) {
+					this.selectTrack = {},
+					this.dataParams = JSON.parse(JSON.stringify(newVal));
+					this.getMapDetails(newVal.mapId);
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/workManagement/components/simulationTable.vue

@@ -0,0 +1,356 @@
+<template>
+	<div class="container">
+		<div class="table-operate">
+			<el-button class="btn" type="primary" @click="add">添加</el-button>
+			<el-button class="btn" type="info" @click="settingsSimulation">设为仿真视角</el-button>
+		</div>
+		<el-table class="table-content" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
+			<el-table-column label="序号" width="55">
+				<template slot-scope="scope">
+					<el-radio v-model="currentFactor" :label="getRowIndex(scope.$index)"
+						@change="changeRowIndex(scope.row)"></el-radio>
+				</template>
+			</el-table-column>
+			<el-table-column label="选择车辆">
+				<template slot-scope="scope">
+					<el-select v-model="scope.row.carId" class="algorithm-select">
+						<el-option v-for="item in carList" :key="item.code" :label="item.name" :value="item.code">
+						</el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="选择算法">
+				<template slot-scope="scope">
+					<el-select v-model="scope.row.algorithmId" class="algorithm-select">
+						<el-option v-for="item in algorithmList" :key="item.code" :label="item.name" :value="item.code">
+						</el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column label="选择轨迹">
+				<template slot-scope="scope">
+					<div @click="showDialog(scope.row)" class="path-text">{{getSelectPathText(scope.row)}}</div>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作">
+				<template slot-scope="scope">
+					<el-button class="delete-btn" size="mini-btn" type="danger"
+						@click="deleteRecord(scope.row)">删除</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "SimulationTable",
+		components: {
+			// vueQr,
+			// glHome,
+		},
+		data() {
+			return {
+				currentFactor: "",
+				tableData: [],
+				carList: [],
+				algorithmList: [],
+				selectRow: {},
+				showRow: {},
+				notSaved: [],
+				contentHasSave: false,
+				mockData: {
+					"sceneId": "",
+					"carId": "",
+					"carName": "",
+					"sceneCarId": "",
+					"algorithmId": "",
+					"algorithmType": 0,
+					"pathId": "",
+					"pathStart": {},
+					"pathEnd": {}
+				},
+				defaultData: {
+					"newType": "new",
+					"newUuid": "",
+					"id": "",
+					"sceneId": "",
+					"carId": "",
+					"algorithmId": "",
+					"algorithmType": 0,
+					"pathId": "",
+					"sceneCarId": null,
+					"pathStartJson": {
+
+					},
+					"pathEndJson": {}
+				},
+				collectPointsSelected: {}
+			};
+		},
+		props: {
+			sceneId: {
+				type: String,
+				default: _ => ""
+			}
+		},
+		computed: {
+			getSelectPathText(row) {
+				return (row) => row.pathId + " (" + row.pathStartJson.name + "," + row.pathEndJson.name + ")";
+			}
+		},
+		mounted() {
+			this.getCarList();
+			this.getAlgorithmList();
+			this.getSceneCarList();
+		},
+		methods: {
+			add() {
+				let newRow = JSON.parse(JSON.stringify(this.defaultData));
+				newRow.newUuid = this.getUUID();
+				this.tableData.push(newRow);
+				this.notSaved.push(newRow);
+
+			},
+			updateRow(data) {
+				// this.showRow = Object.assign({}, this.showRow, {
+				// 	pathId: data.pathId,
+				// 	pathStartJson: data.pathStartJson,
+				// 	pathEndJson: data.pathEndJson
+				// })
+				this.showRow.pathId = data.pathId;
+				this.showRow.pathStartJson = data.pathStartJson;
+				this.showRow.pathEndJson = data.pathEndJson;
+				this.collectSelectedPoints(this.tableData);
+			},
+			getRowIndex(rowIndex) {
+				return rowIndex + 1;
+			},
+			changeRowIndex(row) {
+				this.selectRow = row;
+				this.$emit("changeRow", row);
+			},
+			showDialog(row) {
+				this.showRow = row;
+				let data = {
+					pathId: row.pathId,
+					pathStartJson: row.pathStartJson,
+					pathEndJson: row.pathEndJson,
+					selectedPoints: this.collectPointsSelected
+				};
+				this.$emit("openDialog", data);
+			},
+			getSceneCarList() {
+				this.$axios({
+					method: "post",
+					url: this.$api.workManagement.sceneCarList,
+					data: {
+						"sceneId": this.sceneId,
+						"pageNum": "1",
+						"pageSize": 999999
+					}
+				}).then((res) => {
+					if (res.code == 200) {
+						this.tableData = res.info.list;
+						this.collectSelectedPoints(this.tableData);
+					}
+				})
+			},
+			getCarList() {
+				this.$axios({
+					method: "post",
+					url: this.$api.workManagement.carList,
+					data: {
+						"dropDownType": "2",
+						"algorithmType": "1"
+					}
+				}).then((res) => {
+					if (res.code == 200) {
+						this.carList = [...res.info[0].dropDownList[0].children, ...res.info[0]
+							.dropDownList[1]
+							.children
+						];
+						if (this.carList.length > 0) {
+							this.selectCarId = this.carList[0].code;
+						}
+					}
+				})
+			},
+			collectSelectedPoints(dataList) {
+				dataList.forEach((elem, index) => {
+					if (elem.pathId) {
+						if (!this.collectPointsSelected[elem.pathId]) {
+							this.collectPointsSelected[elem.pathId] = {};
+						}
+						let tarckSelected = this.collectPointsSelected[elem.pathId];
+						if (!tarckSelected.start) {
+							tarckSelected.start = new Set();
+						}
+						tarckSelected.start.add(elem.pathStartJson.name);
+						if (!tarckSelected.end) {
+							tarckSelected.end = new Set();
+						}
+						tarckSelected.end.add(elem.pathEndJson.name);
+					}
+				})
+			},
+			deleteRecord(row) {
+				this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					if (row.newType) {
+						this.removeViewTableRecord(row);
+					} else {
+						this.$axios({
+							method: "post",
+							url: this.$api.workManagement.deleteRecord,
+							data: {
+								"sceneCarId": row.id
+							}
+						}).then((res) => {
+							if (res.code == 200) {
+								this.removeViewTableRecord(row);
+								this.collectSelectedPoints(this.tableData);
+								//this.getSceneCarList();
+							}
+						})
+					}
+				}).catch(() => {});
+			},
+			removeViewTableRecord(row) {
+				let length = this.tableData.length;
+				for (let index = 0; index < length; index++) {
+					let elem = this.tableData[index];
+					if ((row.newUuid && row.newUuid == elem.newUuid) || (row.id && row.id == elem.id)) {
+						this.tableData.splice(index, 1);
+						break;
+					}
+				}
+			},
+			getAlgorithmList() {
+				this.$axios({
+					method: "post",
+					url: this.$api.workManagement.algorithmList,
+					data: {
+						"dropDownType": "1",
+						"algorithmType": "1"
+					}
+				}).then((res) => {
+					if (res.code == 200 && res.info) {
+						this.algorithmList = [...res.info[0].dropDownList[0].children, ...res.info[0]
+							.dropDownList[
+								1].children
+						];
+						if (this.algorithmList.length > 0) {
+							this.selectAlgorithmId = this.algorithmList[0].code;
+						}
+					}
+				})
+			},
+			settingsSimulation() {
+				this.$emit("simulationBtnCallBack", this.selectRow);
+			},
+			saveAll(mapId) {
+				this.$axios({
+					method: "post",
+					url: this.$api.workManagement.saveOrUpdateSceneCarList,
+					data: {
+						"mapId": mapId,
+						"sceneId": this.sceneId,
+						"paramList": this.switchModel(this.tableData)
+					}
+				}).then((res) => {
+					if (res.code == 200) {
+						this.$message({
+							message: '保存成功',
+							type: 'success'
+						});
+						this.getSceneCarList();
+					} else {
+						this.$message({
+							message: '保存失败',
+							type: 'warning'
+						});
+					}
+				})
+			},
+			switchModel(dataArr) {
+				let newDataArr = []
+				dataArr.forEach((elem, index) => {
+					let data = {
+						"sceneId": elem.sceneId,
+						"carId": elem.carId,
+						"carName": elem.carName,
+						"sceneCarId": elem.sceneCarId,
+						"algorithmId": elem.algorithmId,
+						"algorithmType": elem.algorithmType,
+						"pathId": elem.pathId,
+						"pathStart": elem.pathStartJson,
+						"pathEnd": elem.pathEndJson
+					}
+					if (elem.newType) {
+						data.sceneId = this.sceneId;
+						data.sceneCarId = "";
+					} else {
+						data.sceneCarId = elem.id;
+					}
+
+					newDataArr.push(data);
+				})
+				return newDataArr;
+			},
+			S4() {
+				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+			},
+			getUUID() {
+				return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this
+					.S4() +
+					this.S4() + this.S4());
+			}
+		}
+	}
+</script>
+
+<style lang='less' scoped>
+	.container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.table-operate {
+		height: 3.1rem;
+		display: flex;
+		flex-direction: row;
+		justify-content: right;
+		align-items: center;
+	}
+
+	.btn {
+		color: #FFFFFF;
+		height: 2.5rem;
+		margin: 1rem;
+	}
+
+	.table-content {
+		flex: auto;
+	}
+
+	.delete-btn {
+		color: #FFFFFF;
+		border-radius: 0.5rem;
+	}
+
+	.path-text {
+		cursor: pointer;
+		font-size: 0.75rem;
+	}
+
+	/deep/ .table-content {
+		height: 100%;
+		overflow-y: scroll;
+	}
+</style>

src/views/workManagement/multimodeSimulation.vue

@@ -1,187 +1,67 @@
 <template>
 	<div class="container">
-		<div class="select-map">
+		<div class="select-map" :class="{'no-interaction': isDisabled}">
 			地图选择：
-			<el-select class="select-content" v-model="selectMapId" placeholder="请选择">
+			<el-select class="select-content" v-model="openDrive.mapId" placeholder="请选择">
 				<el-option v-for="(item, index) in mapList" :key="item.id" :label="item.mapName" :value="item.id">
 				</el-option>
 			</el-select>
 		</div>
 		<div class="content">
-			<div class="map">
-				<open-drive 
-				:mapId="selectMapId" 
-				:startPoint="trackForm.startPoint" 
-				:endPoint="trackForm.endPoint"
-				:sections="trackForm.track.sections"></open-drive>
-			</div>
-			<div class="table">
-				<div class="table-operate">
-					<el-button class="btn" type="primary">添加</el-button>
-					<el-button class="btn" type="info">设为仿真视角</el-button>
-				</div>
-				<el-table class="table-content" ref="multipleTable" :data="tableData" tooltip-effect="dark"
-					style="width: 100%">
-					<el-table-column type="selection" width="55">
-					</el-table-column>
-					<el-table-column label="选择车辆">
-						<template slot-scope="scope">
-							<el-select v-model="selectCarId" class="algorithm-select">
-								<el-option v-for="item in carList" :key="item.code" :label="item.name"
-									:value="item.code">
-								</el-option>
-							</el-select>
-						</template>
-					</el-table-column>
-					<el-table-column label="选择算法">
-						<template slot-scope="scope">
-							<el-select v-model="selectAlgorithmId" class="algorithm-select">
-								<el-option v-for="item in algorithmList" :key="item.code" :label="item.name"
-									:value="item.code">
-								</el-option>
-							</el-select>
-						</template>
-					</el-table-column>
-					<el-table-column label="选择轨迹">
-						<template slot-scope="scope">
-							<div @click="showDialog">{{scope.row.address}}</div>
-						</template>
-					</el-table-column>
-					<el-table-column label="操作">
-						<template slot-scope="scope">
-							<el-button class="delete-btn" size="mini-btn" type="danger">删除</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-				<div class="block">
-					<el-pagination layout="prev, pager, next" :total="1000">
-					</el-pagination>
-				</div>
-			</div>
+			<open-drive class="map" ref="openDrive" :mapId="openDrive.mapId" :startPoint="openDrive.pathStartJson"
+				:endPoint="openDrive.pathEndJson" :sections="openDrive.sections"></open-drive>
+			<SimulationTable ref="table" @simulationBtnCallBack="settingSimulation" @openDialog="showDialog"
+				class="table" :sceneId="sceneId" :class="{'no-interaction': isDisabled}"/>
 		</div>
-		<div class="operate">
-			<el-button class="btn" type="primary">保存</el-button>
-			<el-button class="btn" type="info">返回</el-button>
+		<div class="operate" :class="{'no-interaction': isDisabled}">
+			<el-button @click="saveAll" class="btn" type="primary">保存</el-button>
+			<el-button @click="back" class="btn" type="info">返回</el-button>
 		</div>
-		<el-dialog title="选择轨迹" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-			<el-form ref="form" :model="trackForm" label-width="100px" size="mini">
-				<el-form-item label="选择轨迹">
-					<el-select v-model="trackForm.track" class="algorithm-select">
-						<el-option v-for="item in trackList" :key="item.id" :label="item.id" :value="item">
-						</el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="轨迹起点">
-					<el-select v-model="trackForm.startPoint" class="algorithm-select">
-						<el-option v-for="(item, index) in trackForm.track.startPoints" :key="index" :label="getName(index)" :value="item">
-						</el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="轨迹终点">
-					<el-select v-model="trackForm.endPoint" class="algorithm-select">
-						<el-option v-for="(item, index) in trackForm.track.endPoints" :key="index" :label="getName(index)" :value="item">
-						</el-option>
-					</el-select>
-				</el-form-item>
-<!-- 				<el-form-item label="车辆朝向">
-					<el-input v-model="sizeForm.name"></el-input>
-				</el-form-item> -->
-			</el-form>
-			<span slot="footer" class="dialog-footer">
-				<el-button @click="dialogVisible = false">取 消</el-button>
-				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-			</span>
-		</el-dialog>
+		<PathDialog :open="dialog.dialogOpen" :params="dialog.dialogParam" @onClose="closeDialog"
+			@onSubmit="sumbitDialog" @change="changeMap" />
 	</div>
 </template>
 
 <script>
-	import OpenDrive from "@/views/workManagement/openDriver";
+	import OpenDrive from "@/views/workManagement/components/openDriver";
+	import PathDialog from "@/views/workManagement/components/pathDialog";
+	import SimulationTable from "@/views/workManagement/components/simulationTable";
+
 	export default {
 		name: "MultimodeSimulation", // 工作管理
 		components: {
-			OpenDrive
+			OpenDrive,
+			PathDialog,
+			SimulationTable
 		},
 		data() {
 			return {
-				dialogVisible: false,
-				tableData: [{
-					date: '2016-05-03',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}, {
-					date: '2016-05-02',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}, {
-					date: '2016-05-04',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}, {
-					date: '2016-05-01',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}, {
-					date: '2016-05-08',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}, {
-					date: '2016-05-04',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}, {
-					date: '2016-05-01',
-					name: '王小虎',
-					address: '上海市普陀区金沙江路 1518 弄'
-				}],
+				isDisabled: false,
 				mapList: [],
-				selectMapId: "",
-				carList: [],
-				selectCarId: "",
-				algorithmList: [],
-				selectAlgorithmId: "",
-				trackList: [],
-				trackForm: {
-					track:{},
-					startPoint:{},
-					endPoint:{},
-					threat:""
-					
+				sceneId: "",
+				dialog: {
+					dialogParam: {},
+					dialogOpen: false
+				},
+				openDrive: {
+					mapId: "",
+					pathStartJson: {},
+					pathEndJson: {},
+					sections: []
 				}
-				
 			}
 
 		},
-		computed:{
-			getName(){
-				return (str) => "name" + str;
+		beforeMount() {
+			this.sceneId = this.$route.query.sceneId;
+			if(!this.sceneId){
+				this.sceneId = "b1e8fb96cf8a41d9a0364d29a9289628";
 			}
 		},
 		mounted() {
 			this.getMapList();
-			this.getCarList();
-			this.getAlgorithmList();
 		},
 		methods: {
-			getCarList() {
-				this.$axios({
-					method: "post",
-					url: this.$api.workManagement.carList,
-					data: {
-						"dropDownType": "2",
-						"algorithmType": "1"
-					}
-				}).then((res) => {
-					if (res.code == 200) {
-						this.carList = [...res.info[0].dropDownList[0].children, ...res.info[0].dropDownList[1]
-							.children
-						];
-						if (this.carList.length > 0) {
-							this.selectCarId = this.carList[0].code;
-						}
-					}
-				})
-			},
 			getMapList() {
 				this.$axios({
 					method: "post",
@@ -203,14 +83,9 @@
 								}
 							}).then((res) => {
 								if (res.code == 200) {
-									let map = {
-										id: "2",
-										mapName: "测试2"
-									};
-									res.info.push(map)
 									this.mapList = res.info;
 									if (this.mapList.length > 0) {
-										this.selectMapId = this.mapList[0].id;
+										this.openDrive.mapId = this.mapList[0].id;
 									}
 								}
 							})
@@ -219,89 +94,125 @@
 					}
 				})
 			},
-			getAlgorithmList() {
-				this.$axios({
-					method: "post",
-					url: this.$api.workManagement.algorithmList,
-					data: {
-						"dropDownType": "1",
-						"algorithmType": "1"
-					}
-				}).then((res) => {
-					if (res.code == 200 && res.info) {
-						this.algorithmList = [...res.info[0].dropDownList[0].children, ...res.info[0].dropDownList[
-							1].children];
-						if (this.algorithmList.length > 0) {
-							this.selectAlgorithmId = this.algorithmList[0].code;
-						}
-					}
-				})
-			},
-			getMapDetails(mapId) {
-				if (mapId == "2") {
-					if (this.isLoaded == true) {
-						this.reloadNewMap("/map/mine4.xodr");
-					} else {
-						this.loadMap("/map/mine4.xodr");
-						this.isLoaded = true;
-					}
+			settingSimulation(row) {
+				if (row.id == null || row.id == "") {
+					this.$message({
+						message: '警告哦，请选择一条已保存记录',
+						type: 'warning'
+					});
 					return;
 				}
 
-				this.$axios({
-					method: "post",
-					url: this.$api.workManagement.mapDetails,
-					data: {
-						mapId
-					}
-				}).then((res) => {
-					if (res.code == 200 && res.info) {
-						this.trackList = res.info.path;
-					}
-				})
-			},
-			showDialog() {
-				this.dialogVisible = true;
-				this.getMapDetails(this.selectMapId);
-			},
-			handleClose(done) {
-				this.$confirm('确认关闭？')
+				this.$confirm('确定设为仿真视角？')
 					.then(_ => {
-						done();
+						this.$axios({
+							method: "post",
+							url: this.$api.workManagement.settingsSimulation,
+							data: {
+								"sceneCarId": row.id,
+							}
+						}).then((res) => {
+							if(res.code == 200){
+								this.$message({
+									message: '设为仿真视角成功',
+									type: 'success'
+								});
+							}else{
+								this.$message({
+									message: '设为仿真视角失败',
+									type: 'warning'
+								});
+							}
+						})
 					})
 					.catch(_ => {});
+
+			},
+			reloadMap() {
+				setTimeout(() => {
+					this.$refs.openDrive.reloadMap();
+				}, 50);
+			},
+			changeMap(data) {
+				this.openDrive = data;
+			},
+			showDialog(data) {
+				console.log(data)
+				this.isDisabled = true;
+				this.dialog.dialogOpen = true;
+				this.dialog.dialogParam = Object.assign({}, data, {
+					mapId: this.openDrive.mapId
+				});
+			},
+			closeDialog() {
+				this.dialog.dialogOpen = false;
+				this.isDisabled = false;
+				this.reloadMap();
+			},
+			sumbitDialog(data) {
+				this.dialog.dialogOpen = false;
+				this.isDisabled = false;
+				this.$refs.table.updateRow(data);
+				this.reloadMap();
 			},
-			onSubmit() {
-				console.log('submit!');
+			saveAll(){
+				this.$refs.table.saveAll(this.openDrive.mapId);
+			},
+			back(){
+				
+				this.$router.go(-1);
 			}
-		},
-
-		// mounted() {},
+		}
 	};
 </script>
 
 <style lang='less' scoped>
+	*{
+		margin: 0;
+		padding: 0;
+		box-sizing: content-box;
+	}
+	.mainBox {
+		padding-bottom: 0px !important
+	}
+
 	.container {
+		/* background-color: rebeccapurple; */
+		height: 100%;
 		width: 100%;
 		display: flex;
 		flex-direction: column;
+		padding: 0 0.5rem;
 	}
 
 	.select-map {
 		font-size: 1rem;
 		color: #333333;
 		letter-spacing: 0.05rem;
+		display: flex;
+		align-items: center;
 		padding-left: 1rem;
 		width: 100%;
-		padding: 1rem;
+		/* padding: 1rem; */
+		height: 4rem;
 	}
 
 	.content {
 		display: flex;
 		flex-direction: row;
 		padding: 0.2rem;
+		height: 38rem;
 	}
 
+	.operate {
+		height: 4rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0rem;
+	}
+
+
 	.block {
 		height: auto;
 		width: 100%;
@@ -320,28 +231,9 @@
 		margin: 0 0.2rem 0 0.25rem;
 	}
 
-	.table-operate {
-		height: 3.1rem;
-		display: flex;
-		flex-direction: row;
-		justify-content: right;
-		align-items: center;
-	}
-
-	.table-content {
-		height: 30.5rem;
-	}
-
-	.operate {
-		flex: auto;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
 	.btn {
 		color: #FFFFFF;
-		height: 2.5rem;
+		height: 1.5rem;
 		margin: 1rem;
 	}
 
@@ -367,4 +259,26 @@
 	.block {
 		border: none !important;
 	}
+
+	.el-dialog__wrapper {
+		pointer-events: none;
+
+		/deep/ .el-dialog {
+			pointer-events: auto;
+		}
+	}
+
+	/deep/ .el-dialog {
+		position: absolute !important;
+		top: 0 !important;
+		right: 10rem !important;
+	}
+	.no-interaction {
+	  pointer-events: none;
+	  /* 其他样式，比如背景色、边框等 */
+/* 	  background-color: #f0f0f0;
+	  border: 1px solid #ccc; */
+/* 	  padding: 10px;
+	  margin: 10px; */
+	}
 </style>