1.对接地图列表接口

2.对接车辆接口
3.对接算法接口
4.更新轨迹

src/api/workManagement.js

@@ -6,7 +6,7 @@ const selectDropDownByType = basePart + '/simulationProject/selectDropDownByType
 const selectDropDownByTypeNew = basePart + '/simulationProject/selectDropDownByTypeNew'; // 标准化测试详情中的下拉列表-new
 const selectMaxParallelism = basePart + '/simulationProject/selectMaxParallelism'; // 标准化测试详情中获取人员可用并行数
 const updateProjectNowRunState = basePart + '/simulationProject/updateProjectNowRunState'; // 标准化测试详情中修改工作运行状态
-
+ 
 const selectProject = basePart + '/simulationProject/selectProject'; // 标准化测试列表
 const deleteProjectByids = basePart + '/simulationProject/deleteProjectByids'; // 删除标准化测试
 const exportProjectReportAndTaskFileById = basePart + '/simulationProject/exportProjectReportAndTaskFileById'; // 导出报告和任务包
@@ -29,6 +29,10 @@ const deleteAutomaticProjectByids = basePart + '/simulationProject/deleteAutomat
 const deleteAutomaticSubProjectByIds = basePart + '/simulationProject/deleteAutomaticSubProjectByIds'; // 删除自动化测试子任务
 const updateAutoProjectNowRunState = basePart + '/simulationProject/updateAutoProjectNowRunState'; // 修改自动化测试子任务状态
 
+const carList = basePart + '/simulationProject/selectDropDownByTypeNew'; //多模式仿真获取车辆列表
+const mapList = basePart + '/simulationMap/selectAllSimulationMapList'; //多模式仿真获取地图列表
+const algorithmList = basePart + '/simulationProject/selectDropDownByTypeNew';//多模式仿真获取算法列表
+const mapDetails = basePart + '/simulationMap/getSimulationMap';//多模式仿真获取地图详情
 
 export default {
     addOrUpdateProject,
@@ -42,6 +46,12 @@ export default {
     deleteProjectByids,
     exportProjectReportAndTaskFileById,
     exportProjectTaskFileById,
+	
+	
+	carList,
+	mapList,
+	algorithmList,
+	mapDetails,
 
     selectProjectDetailsById,
     selectProjectTaskList,

src/mixin/workManagement/getStdMapMixin.js

@@ -1,3 +1,24 @@
+import * as THREE from "three";
+import {
+	OrbitControls
+} from "three/examples/jsm/controls/OrbitControls";
+import {
+	RGBELoader
+} from "three/examples/jsm/loaders/RGBELoader";
+import {
+	Reflector
+} from "three/examples/jsm/objects/Reflector";
+import {
+	GLTFLoader
+} from "three/examples/jsm/loaders/GLTFLoader";
+import {
+	DRACOLoader
+} from "three/examples/jsm/loaders/DRACOLoader";
+import {
+	Line2
+} from "three/examples/jsm/lines/Line2";
+
+
 export let getStdMapMixin = {
 	methods: {
 		getStdMapKeys(std_map, delete_map = false) {
@@ -78,10 +99,49 @@ export let getStdMapMixin = {
 			ctx.font = '320px Microsoft YaHei';
 			ctx.fillStyle = '#000000';
 			ctx.textAlign = 'center';
-			
-			ctx.fillText(content, ctx.width / 2, ctx.height/2 + 50, ctx.width - 20);
-			
+
+			ctx.fillText(content, ctx.width / 2, ctx.height / 2 + 50, ctx.width - 20);
+
 			return canvas;
+		},
+		get_geometry(odr_meshunion) {
+			const geom = new THREE.BufferGeometry();
+			geom.setAttribute(
+				"position",
+				new THREE.Float32BufferAttribute(
+					this.getStdVecEntries(odr_meshunion.vertices, true).flat(),
+					3
+				)
+			);
+			//获取uv坐标
+			geom.setAttribute(
+				"st",
+				new THREE.Float32BufferAttribute(
+					this.getStdVecEntries(odr_meshunion.st_coordinates, true).flat(),
+					2
+				)
+			);
+			//设置点颜色
+			geom.setAttribute(
+				"color",
+				new THREE.Float32BufferAttribute(
+					new Float32Array(geom.attributes.position.count * 3),
+					3
+				)
+			);
+			//设置几何体唯一编号
+			geom.setAttribute(
+				"id",
+				new THREE.Float32BufferAttribute(
+					new Float32Array(geom.attributes.position.count * 4),
+					4
+				)
+			);
+			// geom.setAttribute('ids', new THREE.Float32BufferAttribute(new Float32Array(geom.attributes.position.count * 4), 4));
+			//设置几何体索引数据
+			geom.setIndex(this.getStdVecEntries(odr_meshunion.indices, true));
+			geom.computeVertexNormals();
+			return geom;
 		}
 	},
 }

src/mixin/workManagement/openDriveMixin.js

@@ -82,24 +82,8 @@ export let openDriveMixin = {
 
 	},
 	mounted() {
-		this.initThreeJs();
-		this.initOffscreen();
-		this.initMaterial();
-		this.loadMap("/map/mine3.xodr");
-		// setTimeout(() => {
-		// 	this.reloadNewMap("/map/mine3.xodr");
-		// }, 5000)
-
-		//自适应大小
-		window.addEventListener("resize", onWindowResize, false);
-
-		//监听画面变化，更新渲染画面，（自适应的大小）
-		function onWindowResize() {
-			this.camera.aspect = window.innerWidth / window.innerHeight;
-			this.camera.updateProjectionMatrix();
-			this.renderer.setSize(window.innerWidth, window.innerHeight);
-			this.renderer.setPixelRatio(window.devicePixelRatio);
-		}
+		this.init();
+		// this.loadMap("/map/mine4.xodr");
 	},
 	methods: {
 		drawPoint(point) {
@@ -107,7 +91,6 @@ export let openDriveMixin = {
 			if (arr.length != 0) {
 				for (let elem of arr) {
 					if (elem.point.type == point.type) {
-						console.log("发生冲突", point)
 						let index = arr.indexOf(elem);
 						if (index !== -1) {
 							arr = [...arr.slice(0, index), ...arr.slice(index + 1)];
@@ -117,7 +100,7 @@ export let openDriveMixin = {
 				}
 			}
 			const group = new THREE.Group();
-			let cricle = new THREE.CircleBufferGeometry(3, 200);
+			let cricle = new THREE.CircleBufferGeometry(5, 200);
 			let metrial = new THREE.MeshBasicMaterial({
 				color: 0xff0000
 			})
@@ -146,7 +129,7 @@ export let openDriveMixin = {
 				}
 			}
 		},
-		clearMappingId(){
+		clearMappingId() {
 			this.mappingLineId = new Map();
 		},
 		loadMap(url) {
@@ -304,7 +287,6 @@ export let openDriveMixin = {
 			}
 
 			this.disposable_objs.push(road_network_geom);
-			console.log(this.road_network_material)
 			let road_network_mesh = new THREE.Mesh(
 				road_network_geom,
 				this.road_network_material
@@ -450,17 +432,17 @@ export let openDriveMixin = {
 			this.scene.add(roadmark_outline_lines);
 
 			/* fit view and camera */
-			console.log(refline_lines)
 			const bbox_reflines = new THREE.Box3().setFromObject(refline_lines);
 			const max_diag_dist = bbox_reflines.min.distanceTo(bbox_reflines.max);
 			this.camera.far = max_diag_dist * 1.5;
 			//controls.autoRotate = fit_view;
 
-			if (fit_view) {
-				this.camera.position.set(0, 0, 50);
-				// fitViewToBbox(bbox_reflines);
-				//fitViewToBbox(bbox_reflines);
-			}
+            this.camera.position.set(0, 0, max_diag_dist/3);
+			// if (fit_view) {
+			// 	this.camera.position.set(0, 0, 50);
+			// 	// fitViewToBbox(bbox_reflines);
+			// 	//fitViewToBbox(bbox_reflines);
+			// }
 
 			/**
 			 * 网格
@@ -468,11 +450,14 @@ export let openDriveMixin = {
 			let bbox_center_pt = new THREE.Vector3();
 			bbox_reflines.getCenter(bbox_center_pt);
 			let ground_grid = new THREE.GridHelper(
-				max_diag_dist,
+				max_diag_dist * 6,
 				max_diag_dist / 10,
-				0x2f2f2f,
-				0x2f2f2f
+				0x2f4f4f,
+				0x2f4f4f
 			);
+			// console.log(THREE.InfiniteGridHelper)
+			// let ground_grid = THREE.InfiniteGridHelper(10, 10, new THREE.Color(0x2f4f4f), 500);
+			this.ground_grid = ground_grid;
 			ground_grid.geometry.rotateX(Math.PI / 2);
 			ground_grid.position.set(
 				bbox_center_pt.x,
@@ -482,19 +467,27 @@ export let openDriveMixin = {
 			this.disposable_objs.push(ground_grid.geometry);
 			this.scene.add(ground_grid);
 
-			const rgbeLoader = new RGBELoader();
-			rgbeLoader.loadAsync("hdr/index8.hdr").then((loader) => {
-				loader.mapping = THREE.EquirectangularRefractionMapping;
-				const sphereGeometry = new THREE.SphereBufferGeometry(max_diag_dist * 1.5);
-				const sphereMetrial = new THREE.MeshBasicMaterial({
-					color: 0xffffff,
-					map: loader,
-				});
-				const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMetrial);
-				sphereMesh.geometry.scale(1, 1, -1);
-				sphereMesh.rotation.x = Math.PI / 2;
-				this.scene.add(sphereMesh);
-			});
+			// const rgbeLoader = new RGBELoader();
+			// rgbeLoader.loadAsync("hdr/index8.hdr").then((loader) => {
+			// 	loader.needsUpdate = true;
+			// 	loader.mapping = THREE.EquirectangularRefractionMapping;
+			// 	loader.encoding = THREE.RGBEEncoding; //设置编码属性的值
+			// 	loader.mapping = THREE.EquirectangularRefractionMapping;
+			// 	loader.minFilter = THREE.NearestFilter; //当一个纹素覆盖小于一个像素时，贴图将如何采样
+			// 	loader.magFilter = THREE.NearestFilter; //当一个纹素覆盖大于一个像素时，贴图将如何采样
+			// 	loader.flipY = true; //翻转图像的Y轴以匹配WebGL纹理坐标空间
+			// 	// this.scene.background = new THREE.Color(0x2F4F4F);
+			// 	const sphereGeometry = new THREE.SphereBufferGeometry(max_diag_dist, 100, 100);
+			// 	const sphereMetrial = new THREE.MeshBasicMaterial({
+			// 		color: 0xffffff,
+			// 		map: loader,
+			// 	});
+			// 	const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMetrial);
+			// 	sphereMesh.geometry.scale(1, 1, -1);
+			// 	sphereMesh.rotation.x = Math.PI / 2;
+			// 	this.scene.add(sphereMesh);
+			// });
+			 // this.scene.environment = new THREE.Color(0x2F4F4F);
 
 			/**
 			 * 灯光
@@ -513,10 +506,10 @@ export let openDriveMixin = {
 			this.light.target.position.needsUpdate = true;
 			this.light.target.updateMatrixWorld();
 
-			const t1 = performance.now();
-			console.log(
-				"Heap size: " + this.ModuleOpenDrive.HEAP8.length / 1024 / 1024 + " mb"
-			);
+			// const t1 = performance.now();
+			// console.log(
+			// 	"Heap size: " + this.ModuleOpenDrive.HEAP8.length / 1024 / 1024 + " mb"
+			// );
 
 
 			//删除数据冗余，避免造成内存泄漏
@@ -577,6 +570,8 @@ export let openDriveMixin = {
 				//平行光方向指向原点（0，0，0）
 				this.scene.add(this.light.target);
 			}
+
+			window.addEventListener("resize", this.onWindowResize, false);
 		},
 		initOffscreen() {
 			//选择车道线场景
@@ -661,8 +656,6 @@ export let openDriveMixin = {
 			});
 
 			this.road_network_material = new THREE.MeshPhongMaterial({
-				//vertexColors: THREE.VertexColors,
-				//版本问题，打印THREE，发现并没有VertexColors，于是查找资料中才发现把vertexColors: THREE.VertexColors设置为vertexColors: true即可
 				vertexColors: THREE.VertexColors,
 				wireframe: PARAMS.wireframe, //显示现况
 				shininess: 20.0,
@@ -670,45 +663,6 @@ export let openDriveMixin = {
 				opacity: 0.4,
 			});
 		},
-		get_geometry(odr_meshunion) {
-			const geom = new THREE.BufferGeometry();
-			geom.setAttribute(
-				"position",
-				new THREE.Float32BufferAttribute(
-					this.getStdVecEntries(odr_meshunion.vertices, true).flat(),
-					3
-				)
-			);
-			//获取uv坐标
-			geom.setAttribute(
-				"st",
-				new THREE.Float32BufferAttribute(
-					this.getStdVecEntries(odr_meshunion.st_coordinates, true).flat(),
-					2
-				)
-			);
-			//设置点颜色
-			geom.setAttribute(
-				"color",
-				new THREE.Float32BufferAttribute(
-					new Float32Array(geom.attributes.position.count * 3),
-					3
-				)
-			);
-			//设置几何体唯一编号
-			geom.setAttribute(
-				"id",
-				new THREE.Float32BufferAttribute(
-					new Float32Array(geom.attributes.position.count * 4),
-					4
-				)
-			);
-			// geom.setAttribute('ids', new THREE.Float32BufferAttribute(new Float32Array(geom.attributes.position.count * 4), 4));
-			//设置几何体索引数据
-			geom.setIndex(this.getStdVecEntries(odr_meshunion.indices, true));
-			geom.computeVertexNormals();
-			return geom;
-		},
 		animate() {
 			//控制电脑帧频，防止刷屏过快导致的页面刷3D数据刷新过快 控制每秒30次
 			setTimeout(() => {
@@ -737,13 +691,12 @@ export let openDriveMixin = {
 			this.renderer.render(this.st_scene, this.camera);
 
 			const lane_id_pixel_buffer = new Float32Array(4);
-			//拾取颜色
 			this.renderer.readRenderTargetPixels(
 				this.lane_picking_texture,
-				0, //相机截图左上角为坐标原点，相对于截图左上角而言的渲染起始点x坐标
-				0, //相机截图左上角为坐标原点，相对于截图左上角而言的渲染起始点y坐标
-				1, //渲染宽度范围
-				1, //渲染高度范围
+				0, 
+				0, 
+				1, 
+				1, 
 				this.lane_id_pixel_buffer
 			);
 			const roadmark_id_pixel_buffer = new Float32Array(4);
@@ -764,7 +717,6 @@ export let openDriveMixin = {
 				1,
 				this.xyz_pixel_buffer
 			);
-			//记录webgl坐标
 			xyz_pixel_buffer[0] += this.OpenDriveMap.x_offs;
 			xyz_pixel_buffer[1] += this.OpenDriveMap.y_offs;
 			const st_pixel_buffer = new Float32Array(4);
@@ -779,45 +731,31 @@ export let openDriveMixin = {
 
 			this.camera.clearViewOffset();
 			this.renderer.setRenderTarget(null);
-			/**
-			 * 选中车道离屏渲染
-			 */
 
-			if (this.isValid(lane_id_pixel_buffer)) {
-				//根据颜色值解码成车道ID
+			if (this.isValid(lane_id_pixel_buffer) && false) {
 				const decoded_lane_id = this.decodeUInt32(lane_id_pixel_buffer);
-				//自定义数据中获取所有车段中的所有车道数据
 				const odr_lanes_mesh =
 					this.road_network_mesh.userData.odr_road_network_mesh.lanes_mesh;
-				//本次选中的区域车道ID是否和上次一样
 				if (this.INTERSECTED_LANE_ID != decoded_lane_id) {
-					//当前是否是初始化状态，如果不是则进行初始化，防止重复初始化
 					if (this.INTERSECTED_LANE_ID != 0xffffffff) {
-						//根据车道ID索引获取车道信息
 						this.road_network_mesh.geometry.attributes.color.array.fill(
 							this.COLORS.road
 						);
 					}
 
-					//保存选中车道ID
 					this.INTERSECTED_LANE_ID = decoded_lane_id;
-					//根据车道ID获取车道信息
 					const lane_vert_idx_interval =
 						odr_lanes_mesh.get_idx_interval_lane(this.INTERSECTED_LANE_ID);
-					//获取该车道长度
 					const vert_count =
 						lane_vert_idx_interval[1] - lane_vert_idx_interval[0];
-					//修改离屏渲染场景中该车道的背景颜色
 					this.applyVertexColors(
 						this.road_network_mesh.geometry.attributes.color,
 						new THREE.Color(this.COLORS.lane_highlight),
 						lane_vert_idx_interval[0],
 						vert_count
 					);
-					//手动更新颜色值
 					this.road_network_mesh.geometry.attributes.color.needsUpdate = true;
 				}
-				//使用过后删除数据冗余，避免造成内存泄漏
 				odr_lanes_mesh.delete();
 			} else {
 				if (this.INTERSECTED_LANE_ID != 0xffffffff) {
@@ -896,22 +834,38 @@ export let openDriveMixin = {
 			}
 			this.renderer.render(this.scene, this.camera);
 		},
-		fillColorLine(roadId, lineId){
-			//这里函数lineId参数是road+line的拼接
+		fillColorLine(roadId, lineId) {
 			lineId = this.mappingLineId.get(roadId + ":" + lineId);
-			//自定义数据中获取所有车段中的所有车道数据
 			const odr_lanes_mesh = this.road_network_mesh.userData.odr_road_network_mesh.lanes_mesh;
-			//根据车道ID获取车道信息
 			const lane_vert_idx_interval = odr_lanes_mesh.get_idx_interval_lane(lineId);
-			//获取该车道长度
 			const vert_count = (lane_vert_idx_interval[1] - lane_vert_idx_interval[0]);
-			//修改离屏渲染场景中该车道的背景颜色
-			this.applyVertexColors(this.road_network_mesh.geometry.attributes.color, new THREE.Color(this.COLORS.lane_highlight),
-			lane_vert_idx_interval[0], vert_count);
-			//手动更新颜色值
+			this.applyVertexColors(this.road_network_mesh.geometry.attributes.color, new THREE.Color(this.COLORS
+					.lane_highlight),
+				lane_vert_idx_interval[0], vert_count);
 			this.road_network_mesh.geometry.attributes.color.needsUpdate = true;
-			//使用过后删除数据冗余，避免造成内存泄漏
 			odr_lanes_mesh.delete();
+		},
+		clearColorLine(roadId, lineId) {
+			lineId = this.mappingLineId.get(roadId + ":" + lineId);
+			const odr_lanes_mesh = this.road_network_mesh.userData.odr_road_network_mesh.lanes_mesh;
+			const lane_vert_idx_interval = odr_lanes_mesh.get_idx_interval_lane(lineId);
+			const vert_count = (lane_vert_idx_interval[1] - lane_vert_idx_interval[0]);
+			this.road_network_mesh.geometry.attributes.color.array.fill(
+				this.COLORS.road
+			);
+			this.road_network_mesh.geometry.attributes.color.needsUpdate = true;
+			odr_lanes_mesh.delete();
+		},
+		onWindowResize() {
+			this.camera.aspect = window.innerWidth / window.innerHeight;
+			this.camera.updateProjectionMatrix();
+			this.renderer.setSize(window.innerWidth, window.innerHeight);
+			this.renderer.setPixelRatio(window.devicePixelRatio);
+		},
+		init(){
+			this.initThreeJs();
+			this.initOffscreen();
+			this.initMaterial();
 		}
 	}
 }

src/views/workManagement/multimodeSimulation.vue

@@ -2,14 +2,18 @@
 	<div class="container">
 		<div class="select-map">
 			地图选择：
-			<el-select class="select-content" v-model="value" placeholder="请选择">
-				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+			<el-select class="select-content" v-model="selectMapId" 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></open-drive>
+				<open-drive 
+				:mapId="selectMapId" 
+				:startPoint="trackForm.startPoint" 
+				:endPoint="trackForm.endPoint"
+				:sections="trackForm.track.sections"></open-drive>
 			</div>
 			<div class="table">
 				<div class="table-operate">
@@ -20,25 +24,38 @@
 					style="width: 100%">
 					<el-table-column type="selection" width="55">
 					</el-table-column>
-					<el-table-column label="选择车辆" width="120">
-						<template slot-scope="scope">{{ scope.row.date }}</template>
+					<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 prop="name" label="选择算法" width="120">
+					<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 prop="address" label="选择轨迹" show-overflow-tooltip>
+					<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="mini-btn" size="mini">编辑</el-button>
-							<el-button size="mini-btn" type="danger">删除</el-button>
+							<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>
+					<el-pagination layout="prev, pager, next" :total="1000">
+					</el-pagination>
 				</div>
 			</div>
 		</div>
@@ -46,6 +63,35 @@
 			<el-button class="btn" type="primary">保存</el-button>
 			<el-button 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>
 	</div>
 </template>
 
@@ -53,26 +99,12 @@
 	import OpenDrive from "@/views/workManagement/openDriver";
 	export default {
 		name: "MultimodeSimulation", // 工作管理
-		components: {OpenDrive},
+		components: {
+			OpenDrive
+		},
 		data() {
 			return {
-				options: [{
-					value: '选项1',
-					label: '黄金糕'
-				}, {
-					value: '选项2',
-					label: '双皮奶'
-				}, {
-					value: '选项3',
-					label: '蚵仔煎'
-				}, {
-					value: '选项4',
-					label: '龙须面'
-				}, {
-					value: '选项5',
-					label: '北京烤鸭'
-				}],
-				value: '',
+				dialogVisible: false,
 				tableData: [{
 					date: '2016-05-03',
 					name: '王小虎',
@@ -93,16 +125,156 @@
 					date: '2016-05-08',
 					name: '王小虎',
 					address: '上海市普陀区金沙江路 1518 弄'
+				}, {
+					date: '2016-05-04',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1518 弄'
+				}, {
+					date: '2016-05-01',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1518 弄'
 				}],
-				multipleSelection: []
-
+				mapList: [],
+				selectMapId: "",
+				carList: [],
+				selectCarId: "",
+				algorithmList: [],
+				selectAlgorithmId: "",
+				trackList: [],
+				trackForm: {
+					track:{},
+					startPoint:{},
+					endPoint:{},
+					threat:""
+					
+				}
+				
 			}
 
 		},
+		computed:{
+			getName(){
+				return (str) => "name" + str;
+			}
+		},
+		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",
+					url: this.$api.workManagement.mapList,
+					data: {
+						"pageNum": 0,
+						"pageSize": 999999
+					}
+				}).then((res) => {
+					if (res.code == 200) {
+						this.mapList = res.info;
+						if (this.mapList.length > 0) {
+							this.$axios({
+								method: "post",
+								url: this.$api.workManagement.mapList,
+								data: {
+									"pageNum": 0,
+									"pageSize": 99999
+								}
+							}).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;
+									}
+								}
+							})
+						}
 
-		computed: {},
+					}
+				})
+			},
+			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;
+					}
+					return;
+				}
 
-		methods: {},
+				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('确认关闭？')
+					.then(_ => {
+						done();
+					})
+					.catch(_ => {});
+			},
+			onSubmit() {
+				console.log('submit!');
+			}
+		},
 
 		// mounted() {},
 	};
@@ -122,30 +294,37 @@
 		padding-left: 1rem;
 		width: 100%;
 		padding: 1rem;
-		background-color: red;
 	}
 
 	.content {
-		height: 36.5rem;
 		display: flex;
 		flex-direction: row;
+		padding: 0.2rem;
+	}
+
+	.block {
+		height: auto;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	.map {
 		flex: 1.5;
-		background-color: aqua;
-		position: relative;
 	}
 
 	.table {
 		flex: 1;
-		background-color: antiquewhite;
+		border: 0.05rem solid #DCDCDC;
+		margin: 0 0.2rem 0 0.25rem;
 	}
+
 	.table-operate {
 		height: 3.1rem;
 		display: flex;
 		flex-direction: row;
-		justify-content: center;
+		justify-content: right;
 		align-items: center;
 	}
 
@@ -154,6 +333,7 @@
 	}
 
 	.operate {
+		flex: auto;
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -164,13 +344,27 @@
 		height: 2.5rem;
 		margin: 1rem;
 	}
-	
-	.open-drive{
+
+	.open-drive {
 		width: 100%;
 		height: 100%;
 	}
-	
-	::v-deep .mini-btn{
-		width: 1rem !important;
+
+	.delete-btn {
+		color: #FFFFFF;
+		border-radius: 0.5rem;
+	}
+
+	/deep/ div.cell {
+		text-align: center;
+	}
+
+	/deep/ th div.cell {
+		font-size: .9rem;
+		font-weight: bold;
+	}
+
+	.block {
+		border: none !important;
 	}
 </style>

src/views/workManagement/openDriver.vue

@@ -1,36 +1,17 @@
 <template>
 	<div id="ThreeJS" class="three_div"></div>
 </template>
-<script>
-	import * as THREE from "three";
-	import {
-		OrbitControls
-	} from "three/examples/jsm/controls/OrbitControls";
-	import {
-		RGBELoader
-	} from "three/examples/jsm/loaders/RGBELoader";
-	import {
-		Reflector
-	} from "three/examples/jsm/objects/Reflector";
-	import {
-		GLTFLoader
-	} from "three/examples/jsm/loaders/GLTFLoader";
-	import {
-		DRACOLoader
-	} from "three/examples/jsm/loaders/DRACOLoader";
-	import {
-		Line2
-	} from "three/examples/jsm/lines/Line2";
-	// import gsap from "gsap";
-	// import * as CANNON from "cannon-es";
 
-	import * as echarts from "echarts";
+
+<script>
 	import {
 		getStdMapMixin
 	} from "@/mixin/workManagement/getStdMapMixin.js"
 	import {
 		openDriveMixin
 	} from "@/mixin/workManagement/openDriveMixin.js"
+
+
 	export default {
 		name: "OpenDrive",
 		mixins: [getStdMapMixin, openDriveMixin],
@@ -39,70 +20,102 @@
 			// glHome,
 		},
 		data() {
-			return {};
+			return {
+				isLoaded: false,
+				lineArr:[]
+			};
+		},
+		props: {
+			mapId: {
+				type: String,
+				default: () => ""
+			},
+			startPoint: {
+				type: Object,
+				default: () => {}
+			},
+			endPoint: {
+				type: Object,
+				default: () => {}
+			},
+			sections: {
+				type: Array,
+				default: () =>[]
+			}
 		},
 		methods: {
 			changeMap(fileUrl) {
 				this.onFileSelect(fileUrl);
 				this.reloadOdrMap();
-			}
-		},
-		mounted() {
-			setTimeout(() => {
-				let points = [{
-						"type": "start",
-						"x": 934.159,
-						"y": 357.5,
-						"h": 180.0,
-						"name": "A"
-					},
-					{
-						"type": "start",
-						"x": 984.159,
-						"y": 357.5,
-						"h": 180.0,
-						"name": "B"
-					}, {
-						"type": "end",
-						"x": 542.92,
-						"y": 357.5,
-						"name": "C"
-					},
-					{
-						"type": "end",
-						"x": 492.92,
-						"y": 357.5,
-						"name": "D"
+			},
+			getMapDetails(mapId) {
+			    if(mapId == "2"){
+					if(this.isLoaded == true){
+						this.reloadNewMap("/map/mine4.xodr");
+					}else{
+						this.loadMap("/map/mine4.xodr");
+						this.isLoaded = true;
 					}
-				]
-				points.forEach((elem, index) => {
-					console.log(elem)
-					this.drawPoint(elem);
-				})
-
-				let lines = [{
-						"roadId": 140,
-						"laneId": -1
-					},
-					{
-						"roadId": 187,
-						"laneId": -1
-					},
-					{
-						"roadId": 131,
-						"laneId": 1
-					}
-				];
+					return;
+				}
 				
-				lines.forEach((elem, index) => {
-					console.log(elem)
-					this.fillColorLine(elem.roadId, elem.laneId);
+				this.$axios({
+					method: "post",
+					url: this.$api.workManagement.mapDetails,
+					data: {
+						mapId
+					}
+				}).then((res) => {
+					if (res.code == 200) {
+						if(this.isLoaded == true){
+							this.reloadNewMap(res.info.mapPath);
+						}else{
+							this.loadMap(res.info.mapPath);
+							this.isLoaded = true;
+						}
+						
+					}
 				})
-			}, 2000)
+			}
+		},
+		mounted() {
 		},
 		updated() {
 
 		},
+		watch: {
+			mapId: {
+				handler(newVal, oldVal) {
+					this.getMapDetails(newVal);
+				}
+			},
+			startPoint: {
+				handler(newVal, oldVal) {
+					newVal.type="start";
+					this.drawPoint(newVal);
+				}
+			},
+			endPoint: {
+				handler(newVal, oldVal) {
+					newVal.type="end";
+					this.drawPoint(newVal);
+				}
+			},
+			sections: {
+				handler(newVal, oldVal) {
+					if(this.lineArr && this.lineArr.length > 0){
+						this.lineArr.forEach((elem, index) => {
+							this.clearColorLine(elem.roadId, elem.laneId);
+						})
+						this.clearPoint();
+					}
+					newVal.forEach((elem, index) => {
+						this.fillColorLine(elem.roadId, elem.laneId);
+					})
+					this.lineArr = newVal;
+				}
+			}
+		}
 	};
 </script>
 <style scoped lang="less">