添加驾驶操作面板，三维模型资源改本地

src/i18n/langs/en/jlmap3d.js

@@ -19,5 +19,69 @@ export default {
 	stationInfoDisplay: 'Station information — display',
 	stationInfoHidden: 'Station information — hidden',
 	trainInfoDisplay: 'Train information — display',
-	trainInfoHidden: 'Train information — hidden'
+	trainInfoHidden: 'Train information — hidden',
+
+	drive: 'Driving a car',
+  train: 'Train',
+  driver: 'Driver',
+  newInformation: 'A new message',
+  driving: 'Driving in',
+  unselectedVehicle: 'Unselected vehicle',
+  returnDriving: 'Return to driving',
+  accordingChat: 'According to the chat',
+  displayControl: 'Display controller',
+  haveBus: 'Have got on the bus',
+  busUnrideable: 'The bus is unrideable',
+
+	highSpeedCircuitBreaker: 'High speed circuit breaker',
+  washCarModel: 'Wash',
+  forcedAirCompressor: 'Compressor Forced Start',
+  ATBStart: 'ATB',
+  forcedRelieve: 'Forced Relief',
+  closeLeftDoor: 'L Door Close',
+  openLeftDoor: 'L Door Open',
+  ATOStart: 'ATO',
+  electricHornButton: 'Whistle',
+  roomLightingControl: 'Compartment light',
+  sivsControl: 'SIV',
+  driverRoomLights: 'Cab light',
+  passingBeam: 'Low',
+  headLamp: 'Headlight',
+  distanceLight: 'High',
+  leftDoorOpen: 'Left door open',
+  leftDoorClose: 'Port door closed',
+  openRightDoor: 'R Door Open',
+  closeRightDoor: 'R Door Close',
+  sprayWater: 'Open',
+  waterSwitch: 'Water Spray',
+  slow: 'Slow',
+  highSpeed: 'Fast',
+  wiperSwitch: 'Wiper',
+  emergencyBraking: 'Emergency Braking',
+  leftSide: 'Left',
+  location0: '0',
+  rightSide: 'Right',
+  doorSideChoose: 'Door Selection',
+  doorModel: 'Door Model',
+  rightDoorOpen: 'Right side door open',
+  rightDoorClose: 'Door on right',
+
+	close: 'Close',
+  shut: 'Close',
+  open: 'Open',
+	front: 'front',
+  later: 'back',
+  electricGongSheng: 'The electric GongSheng',
+  pantographFall: 'Pantograph fall',
+  lampButton: 'Try the lamp button',
+  removalATP: 'ATP Removal of',
+  infliction: 'applying',
+  mesoPosition: 'The median',
+  remission: 'ease',
+  parkingBrakeMode: 'Parking brake mode',
+	traction: 'Traction',
+  braking: 'Braking',
+  quick: 'Quick Braking',
+  noComponent: 'No session',
+
 };

src/i18n/langs/zh/jlmap3d.js

@@ -19,5 +19,69 @@ export default {
 	stationInfoDisplay: '站台信息——显示',
 	stationInfoHidden: '站台信息——隐藏',
 	trainInfoDisplay: '列车信息——显示',
-	trainInfoHidden: '列车信息——隐藏'
+	trainInfoHidden: '列车信息——隐藏',
+
+	drive: '开车',
+  train: '列车',
+  driver: '司机',
+  newInformation: '新的消息',
+  driving: '驾驶中',
+  unselectedVehicle: '未选择车辆',
+  returnDriving: '返回驾驶',
+  accordingChat: '显示聊天',
+  displayControl: '显示控制器',
+  haveBus: '已上车',
+  busUnrideable: '该车无法搭乘',
+
+  highSpeedCircuitBreaker: '高速断路器分',
+  washCarModel: '洗车模式',
+  forcedAirCompressor: '空压机强迫启动',
+  ATBStart: 'ATB启动',
+  forcedRelieve: '强迫缓解',
+  closeLeftDoor: '关左门',
+  openLeftDoor: '开左门',
+  ATOStart: 'ATO启动',
+  electricHornButton: '电笛按钮',
+  roomLightingControl: '客室照明控制',
+  sivsControl: 'SIV',
+  driverRoomLights: '司机室灯',
+  passingBeam: '近光',
+  distanceLight: '远光',
+  headLamp: '头灯',
+  leftDoorOpen: '左侧车门开',
+  leftDoorClose: '左侧车门关',
+  openRightDoor: '开右门',
+  closeRightDoor: '关右门',
+  sprayWater: '喷水',
+  waterSwitch: '喷水开关',
+  slow: '低速',
+  highSpeed: '高速',
+  wiperSwitch: '刮雨器开关',
+  emergencyBraking: '紧急制动',
+  leftSide: '左侧',
+  location0: '0位',
+  rightSide: '右侧',
+  doorSideChoose: '门侧选择',
+  doorModel: '门模式',
+  rightDoorOpen: '右侧车门开',
+  rightDoorClose: '右侧车门关',
+
+  close: '关',
+  shut: '关闭',
+  open: '开',
+	front: '前',
+  later: '后',
+  electricGongSheng: '受电弓升',
+  pantographFall: '受电弓降',
+  lampButton: '试灯按钮',
+  removalATP: 'ATP切除',
+  infliction: '施加',
+  mesoPosition: '中位',
+  remission: '缓解',
+  parkingBrakeMode: '停放制动模式',
+
+	traction: '牵引',
+  braking: '制动',
+  quick: '快制',
+  noComponent: '暂无会话',
 };

src/jlmap3d/edit/jlmap3dedit.js

@@ -53,7 +53,7 @@ export function JLmap3dEdit(dom, data, mapid) {
   dom.appendChild(this.renderer.domElement);
 
   //定义相机
-  this.camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 1, 20000);
+  this.camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 1, 1000);
   this.camera.aspect = window.innerWidth / window.innerHeight;
   this.camera.updateProjectionMatrix();
   this.camera.position.set(0,0,1800);
@@ -163,7 +163,7 @@ export function JLmap3dEdit(dom, data, mapid) {
   this.export = function(){
     let exporter = new THREE.OBJExporter();
     console.log(scope.mapdata);
-    let exportmodels = scope.mapdata.linklist.linksgroup;
+    let exportmodels = scope.mapdata.stationstandlist.group;
     // let exportmodels = scope.mapdata.sectionlist.switchgroup;
     // let exportmodels = scope.mapdata.stationstandlist.group;
     let result = exporter.parse( exportmodels );

src/jlmap3d/jl3ddrive/drivecontrol/simulation.js

@@ -0,0 +1,99 @@
+import request from '@/utils/request';
+
+
+// 获取仿真成员列表（新版地图）
+export function getSimulationMembersNew(group) {
+	return request({
+		url: `/simulation/${group}/members`,
+		method: 'get'
+	})
+}
+
+// 获取仿真成员（新版地图）
+export function getSimulationMemberNew(group) {
+	return request({
+		url: `/simulation/${group}/member`,
+		method: 'get'
+	});
+}
+
+// 获取仿真会话列表（新版地图）
+export function getSimulationConversationListNew(group) {
+	return request({
+		url: `/simulation/${group}/conversations`,
+		method: 'get'
+	});
+}
+
+// 获取仿真会话消息列表（新版地图）
+export function getSimulationContextListNew(group, conversationId) {
+	return request({
+		url: `/simulation/${group}/conversation/${conversationId}`,
+		method: 'get'
+	});
+}
+
+// 获取客户端已经进入仿真的用户仿真所在group(新版地图)
+export function getSimulationRunningNew(params) {
+	return request({
+		url: `/simulation/running`,
+		method: 'get',
+		params
+	})
+}
+
+// 根据group获取仿真对象（新版地图）
+export function getSimulationByGroupNew(group) {
+	return request({
+		url: `/simulation/${group}`,
+		method: 'get'
+	})
+}
+
+// 获取/创建仿真会话（新版地图）
+export function getSimulationConversationIdNew(params, group) {
+	return request({
+		url: `/simulation/${group}/wx/conversation`,
+		method: 'get',
+		params: params
+	});
+}
+
+// 仿真驾驶车辆列表（新版地图）
+export function getSimulationTrainlistNew(group) {
+	return request({
+		url: `/simulation/driving/${group}/trainList`,
+		method: 'get',
+		params: ''
+	})
+}
+
+//新版仿真驾驶发送命令
+export function bindSimulationTrain(group,groupNumber) {
+	return request({
+		url: `/simulation/driving/${group}/bindTrain/${groupNumber}`,
+		method: 'post',
+		params: ''
+	})
+}
+export function trainSimulationEb(group,groupNumber) {
+	return request({
+		url: `/simulation/driving/${group}/train/${groupNumber}/eb`,
+		method: 'put',
+		params: ''
+	})
+}
+export function trainSimulationForce(group,groupNumber,percent) {
+	return request({
+		url: `/simulation/driving/${group}/train/${groupNumber}/force/${percent}`,
+		method: 'put',
+		params: ''
+	})
+}
+export function trainSimulationGear(group,groupNumber,gear) {
+	return request({
+		url: `/simulation/driving/${group}/train/${groupNumber}/gear/${gear}`,
+		method: 'put',
+		params: ''
+	})
+}

src/jlmap3d/jl3ddrive/jl3ddrive.js

@@ -134,7 +134,7 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj
 	// });
 
 	let controls3 = new MouseControls(camera, 1.6);
-	controls3.enabled = true;
+	controls3.enabled = false;
 	// controls3.getObject().rotation.x = Math.PI/2;
 	scene.add(controls3.getObject());
 
@@ -229,8 +229,9 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj
 	// getPublish3dMapDetail(mapId).then(netdata => {
 	// 	DriverLoad(data, scope, netdata.data, sectionlist,linklist,signallist,stationstandlist,trainlisttest,realsectionlist,rails, camera, controls3, scene,mixers,storemod);
 	// });
-	let stats = new Stats();
+	let stats =null;
-	dom.appendChild( stats.dom );
+	// let stats = new Stats();
+	// dom.appendChild( stats.dom );
 	// 开启渲染
 	animate();
 	startWorker();
@@ -314,7 +315,7 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj
 	};
 
 	updatemmi.updatedrivingcode = function(code) {
-		console.log(trainlisttest);
+		// console.log(trainlisttest);
 		drivingcode = code;
 		trainlisttest.group.children[0].children[0].add(controls3.getObject());
 		controls3.getObject().position.x = 10;

src/jlmap3d/jl3ddrive/moveupdate/DrivingConnectNew.js

@@ -98,7 +98,7 @@ export function Jl3dDrivingNew(mixers,updatemmi,sound,translation,routegroup,sta
 		// 遍历后台数据
 		// console.log(data);
 		if(data.type == "Train_Position"){
-			stats.update();
+			// stats.update();
 			trainrun(data.body);
 			return;
 		}

src/jlmap3d/main/loaders/AssetLoader.js

@@ -4,13 +4,13 @@ import { getBaseUrl } from '@/utils/baseUrl';
 import { Loading } from 'element-ui';
 const BASE_API = getBaseUrl();
 let modelurl = "../../static/model";
-if(BASE_API == 'https://joylink.club/jlcloud'){
+// if(BASE_API == 'https://joylink.club/jlcloud'){
-  modelurl = "https://joylink.club/oss";
+//   modelurl = "https://joylink.club/oss";
-}else if(BASE_API == 'https://test.joylink.club/jlcloud'){
+// }else if(BASE_API == 'https://test.joylink.club/jlcloud'){
-  modelurl = "https://test.joylink.club/oss";
+//   modelurl = "https://test.joylink.club/oss";
-}else {
+// }else {
-  modelurl = "https://test.joylink.club/oss";
+//   modelurl = "https://test.joylink.club/oss";
-}
+// }
 let defaultsignal = {
   id:"3",
   name:"低位三灯",
@@ -37,7 +37,7 @@ let defaultstation = {
   type:"num4",
   picUrl:"",
   assetUrl:"../../static/model/station/fuzhou.FBX"
-}//modelurl+"/models/station/fuzhou/fuzhou.FBX"
+}//modelurl+"/station/fuzhou/fuzhou.FBX"
 let waicestation = {
   id:"10",
   name:"外侧车站",
@@ -52,11 +52,11 @@ let defaulttopstation = {
   deviceType:"topstand",
   type:"num5",
   picUrl:"",
-  assetUrl:modelurl+"/models/station/fuzhou/topstation.FBX"
+  assetUrl:modelurl+"/station/fuzhou/topstation.FBX"
 }
-//modelurl+"/models/station/fuzhou/fuzhou.FBX"
+//modelurl+"/station/fuzhou/fuzhou.FBX"
-//https://test.joylink.club/oss/models/station/fuzhou/fuzhou.FBX
+//https://test.joylink.club/oss/station/fuzhou/fuzhou.FBX
-//https://joylink.club/oss/models/station/fuzhou/fuzhou.FBX
+//https://joylink.club/oss/station/fuzhou/fuzhou.FBX
 //../../static/model/station/zhantai715(2).FBX
 
 let defaultswitch = {
@@ -65,7 +65,7 @@ let defaultswitch = {
   deviceType:"switch",
   type:"fuzhou",
   picUrl:"",
-  assetUrl:modelurl+"/models/daocha/daocha.FBX"
+  assetUrl:modelurl+"/daocha/daocha.FBX"
 }
 
 let defaultdriver = {
@@ -74,7 +74,7 @@ let defaultdriver = {
   deviceType:"driver",
   type:"driver",
   picUrl:"",
-  assetUrl:modelurl+"/models/driver/driver.FBX"
+  assetUrl:modelurl+"/driver/driver.FBX"
 }
 
 let defaultsuidao = {
@@ -83,7 +83,7 @@ let defaultsuidao = {
   deviceType:"suidao",
   type:"suidao",
   picUrl:"",
-  assetUrl:modelurl+"/models/suidao/suidao.FBX"
+  assetUrl:modelurl+"/suidao/suidao.FBX"
 }
 
 let defaultbackground = {
@@ -92,11 +92,11 @@ let defaultbackground = {
   deviceType:"background",
   type:"background",
   picUrl:"",
-  assetUrl:modelurl+"/models/suidao/background.FBX"
+  assetUrl:modelurl+"/suidao/background.FBX"
 }
-//modelurl+"/models/suidao/suidao.FBX"
+//modelurl+"/suidao/suidao.FBX"
-//https://test.joylink.club/oss/models/suidao/suidao.FBX
+//https://test.joylink.club/oss/suidao/suidao.FBX
-//https://joylink.club/oss/models/suidao/suidao.FBX
+//https://joylink.club/oss/suidao/suidao.FBX
 //../../static/model/suidao/suidao.FBX
 
 let defaultautorail = {
@@ -132,7 +132,7 @@ let autoswitch1 = {
   deviceType:"autoswitch1",
   type:"fuzhou",
   picUrl:"",
-  assetUrl:modelurl+"/models/auto/switch1.FBX"
+  assetUrl:modelurl+"/auto/switch1.FBX"
 }
 
 let autoswitch2 = {
@@ -141,7 +141,7 @@ let autoswitch2 = {
   deviceType:"autoswitch2",
   type:"fuzhou",
   picUrl:"",
-  assetUrl:modelurl+"/models/auto/switch2.FBX"
+  assetUrl:modelurl+"/auto/switch2.FBX"
 }
 
 export function AssetLoader(){
@@ -226,7 +226,7 @@ export function AssetLoader(){
 
 
         Promise.all(initlist).then((result) => {
-          ////console.log(result);
+
           resolve("loaderassets");             //['成功了', 'success']
         }).catch((error) => {
           //console.log(error);

src/store/modules/socket.js

@@ -2,7 +2,7 @@ import store from '@/store';
 import { Notification } from 'element-ui';
 
 function handle(state, data) {
-    console.log(data, 'socket订阅');
+    // console.log(data, 'socket订阅');
     const msg = data.body;
     const path = window.location.href;
     switch (data.type) {
@@ -29,7 +29,7 @@ function handle(state, data) {
         //     runFactMsg = [msg];
         // }
         if (!Array.isArray(msg)) {
-            console.log([msg], '列车实际到发车站消息');
+            // console.log([msg], '列车实际到发车站消息');
             state.trainStationList = [msg];
         }
         break;

src/views/jlmap3d/drive/drivecontrol/centerpane.vue

@@ -0,0 +1,411 @@
+<template>
+	<div style="width:25%;height:100%;position:absolute;left:50%;">
+		<div id="start" class="panebutton2" style="bottom:1%;left:5%;">
+			<img class="buttonimg2" :src="start" />
+		</div>
+
+		<div id="direct" class="panebutton2" style="bottom:1%;left:25%;">
+			<img class="buttonimg2" :src="direct" />
+			<img id="directimg" class="buttonimg2" :src="directoffpng" :style="{transform:toutransform}" @mousedown="touchstart"  />
+			<div class="directbutton" style="top:0px;right:0;">{{ $t('jlmap3d.front') }}</div>
+			<div class="directbutton" style="top:18px;right:0;">0</div>
+			<div class="directbutton" style="top:36px;right:0;">{{ $t('jlmap3d.later') }}</div>
+		</div>
+
+		<div id="div1" class ="pane-box">
+      <img class="paneimg" :src="pane"/>
+      <div class="panelb" :style="{right: isZh? '80px': '80px', top: isZh? '0px': '0px'}">{{ $t('jlmap3d.traction') }}</div>
+      <div class="panelb" :style="{right: isZh? '80px': '80px', top: '70px'}">0</div>
+      <div class="panelb" :style="{right: isZh? '80px': '80px', top: isZh? '130px': '130px'}">{{ $t('jlmap3d.braking') }}</div>
+      <div class="panelb" :style="{right: isZh? '80px': '80px', top: isZh? '145px': '145px'}">{{ $t('jlmap3d.quick') }}</div>
+      <img id="div2" class="lgimg" :src="lg" :style="{top:movex}" @mousedown="speedstart"    />
+			<!-- @mouseup="speedend" -->
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import { trainSimulationForce,trainSimulationGear } from '@/jlmap3d/jl3ddrive/drivecontrol/simulation.js';
+	import { throttle } from '@/utils/throttle.js';
+	export default {
+		name: 'CentercPane',
+		components: {
+
+		},
+		props: {
+			drawWay: {
+				type: String,
+				default: 'false'
+			},
+			groupNum: {
+				type: String,
+				default: null
+			},
+			userRole: {
+				type: String,
+				default: null
+			}
+		},
+		data() {
+			return {
+				move:0,
+				movex:"73px",
+				apoimg:"",
+				touchcontrol:true,
+				touchstate:"Neutral",
+				toutransform:"rotate(175deg)",
+				start:"/static/jl3d/control/start.png",
+				direct:"/static/jl3d/control/direct.png",
+				directz:"/static/jl3d/control/directfront.png",
+				directoffpng:"/static/jl3d/control/directoff.png",
+				pane:"/static/jl3d/control/pane.png",
+				lg:"/static/jl3d/control/lg.png",
+
+				iconrotate:45,//旋转deg
+				icontranslateX:100,//沿x轴位移px
+				icontranslateY:100,//沿y轴位移px
+				mouseX:0,
+				mouseY:0,
+				objX:0,
+				objY:0,
+				isDown:false,
+
+				angleoffset: {
+					x: null,
+					y: null
+				},
+				movelimit: {
+	        x: null,
+	        y: null
+				},
+				moveheight:null,
+				speedlimit:160,
+
+			}
+		},
+		watch: {
+			move:function(val,oldval) {
+				if(val != oldval){
+					let command ={
+						code:this.groupNum,
+						operation:"602",
+						type:"07",
+						param:val
+					};
+					// if(this.drawWay == 'true'){
+					throttle(trainSimulationForce(this.group,this.groupNum,val),200,true);
+					//
+					// }else{
+					// 	throttle(sendSimulationCommand(this.group,command),200,true);
+					// }
+
+				}
+			},
+			touchstate:function(val,oldval){
+				if(val != oldval){
+					// if(this.userRole == "DRIVER"){
+					// 	trainSimulationGear(this.group,this.groupNum,this.touchstate).then(netdata => {
+					//
+					// 	});
+					// }
+				}
+			}
+		},
+
+		computed: {
+			group() {
+				return this.$route.query.group;
+			},
+			code() {
+				return this.$store.state.app.code;
+			},
+			traincode() {
+				return this.$store.state.app.driverTrain;
+			},
+			atostate(){
+				return this.$store.state.app.atostate;
+			},
+			iconstyle:function(){//图标动态样式
+			   let arr = new Array();
+			   arr.push('transform:');//注意：先移动后旋转，实现原地旋转；先旋转后移动，位置按照旋转后的新坐标系确定
+			   arr.push('translateX('+this.icontranslateX+'px) ');
+			   arr.push('translateY('+this.icontranslateY+'px) ');
+			   arr.push('rotate('+this.iconrotate+'deg) ');
+			   return arr.join("");
+			},
+      isZh() {
+          return this._i18n.locale == 'zh';
+      }
+		},
+		mounted() {
+
+		},
+		beforeDestroy() {
+
+		},
+		methods: {
+			centerstate : function(gear){
+				this.touchstate = gear;
+				if(this.touchstate == "Drive"){
+					this.toutransform = "rotate(140deg)";
+				}else if(this.touchstate == "Neutral"){
+					this.toutransform = "rotate(175deg)";
+				}else if(this.touchstate == "Reverse"){
+					this.toutransform = "rotate(205deg)";
+				}
+			},
+			centercontrol : function(){
+
+			},
+			setData : function(){
+				this.msgshow = false;
+			},
+			showcontrolmsg:function(data,callback){
+				this.controlmsg = data;
+				this.msgshow = true;
+
+				callback = callback || function(){
+					this.setData();
+				};
+				setTimeout( callback.bind(this),2000);
+
+			},
+			startclick: function (e){
+				this.showcontrolmsg(this.$t('jlmap3d.drive'));
+			},
+			onChange: function(e){
+				this.move = e.detail.x;
+			},
+
+			controlsend:function(traincode,operation,type,param){
+				if(this.userRole == "Driver"){
+					let command ={
+						code:traincode,
+						operation:operation,
+						type:type,
+						param:param
+					};
+					sendSimulationCommand(this.group,command);
+				}else{
+
+				}
+			},
+			speedstart: function(event){
+				let domoffset = document.getElementById("div1").getBoundingClientRect();
+				// movelimit
+				this.movelimit.x = domoffset.x;
+				this.movelimit.y = domoffset.y;
+				event.preventDefault();
+	      document.getElementById("div1").onmousemove = this.speedchange;
+				document.getElementById("div2").onmouseup  = this.speedend;
+			},
+			speedchange: function(event){
+					this.moveheight = event.pageY-this.movelimit.y;
+					this.movex = this.moveheight-7 +"px";
+					// if(this.atostate == true){
+					// 	this.$store.dispatch('app/setAtoState', false);
+					// }
+					if(this.moveheight<=1){
+						this.moveheight=1;
+						this.movex=-6+"px";
+					}
+					if(this.moveheight>=159){
+						this.moveheight=159;
+						this.movex=153+"px";
+					}
+					if(this.moveheight>85&&this.moveheight<76){
+						this.movex=73+"px";
+						this.move = 0;
+					}else if(this.moveheight<0&&this.moveheight>159){
+
+					}else{
+
+						if(this.moveheight>=85){
+							this.move = -(this.moveheight-85)/65;
+						}
+						if(this.moveheight<=75){
+							this.move = (75 - this.moveheight)/75;
+						}
+						this.movex=this.moveheight-7+"px";
+						if(this.moveheight>=145){
+							this.movex= 153+"px";
+							this.move = -2;
+						}
+
+					}
+			},
+			speedend: function(event){
+				document.getElementById("div1").onmousemove = null;
+				document.getElementById("div2").onmouseup  = null;
+			},
+
+
+
+			click:function(){//图标点击事件
+			    if (this.iconrotate==0) {
+						this.iconrotate=315;
+			    }else {
+						this.iconrotate=0;
+			    }
+			},
+			touchstart:function(e){
+
+
+				let domoffset = document.getElementById("directimg").getBoundingClientRect();
+				// movelimit
+				this.angleoffset.x = domoffset.x;
+				this.angleoffset.y = domoffset.y;
+
+				e.preventDefault();
+
+				document.getElementById("directimg").onmousemove = this.touchmove;
+				document.getElementById("directimg").onmouseup  = this.touchend;
+
+
+			},
+			touchmove:function(e){//finger move 触发
+				// console.log(e);
+				this.getAngle(e.pageX-this.angleoffset.x ,e.pageY-this.angleoffset.y);
+			},
+			touchend:function(e){
+				document.getElementById("directimg").onmousemove = null;
+				document.getElementById("directimg").onmouseup  = null;
+			},
+			getAngle:function(mx,my){
+				//圆心坐标
+				// console.log(mx);
+				// console.log(my);
+				let px=30;
+				let py=30;
+				let x = Math.abs(px-mx);
+				let y = Math.abs(py-my);
+				let z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
+				let cos = y/z;
+				let radina = Math.acos(cos);//用反三角函数求弧度
+				let angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
+
+				if(mx>px&&my>py){//鼠标在第四象限
+					angle = 180 - angle;
+				}
+
+				if(mx==px&&my>py){//鼠标在y轴负方向上
+					angle = 180;
+				}
+
+				if(mx>px&&my==py){//鼠标在x轴正方向上
+					angle = 90;
+				}
+
+				if(mx<px&&my>py){//鼠标在第三象限
+					angle = 180+angle;
+				}
+
+				if(mx<px&&my==py){//鼠标在x轴负方向
+					angle = 270;
+				}
+
+				if(mx<px&&my<py){//鼠标在第二象限
+					angle = 360 - angle;
+				}
+
+				if(angle<127 && angle>46){
+					if(this.userRole == "DRIVER"){
+						if(angle<63 && angle>46){
+							if(this.touchstate != "Drive"){
+								trainSimulationGear(this.group,this.groupNum,"Drive").then(netdata => {
+									if(netdata.code == "200"){
+										this.toutransform = "rotate(140deg)";
+										this.touchstate = "Drive";
+										document.getElementById("directimg").onmousemove = null;
+										document.getElementById("directimg").onmouseup  = null;
+									}
+								});
+							}
+
+						}else if(angle<93 && angle>68){
+							if(this.touchstate != "Neutral"){
+								trainSimulationGear(this.group,this.groupNum,"Neutral").then(netdata => {
+									if(netdata.code == "200"){
+										this.toutransform = "rotate(175deg)";
+										this.touchstate = "Neutral";
+										document.getElementById("directimg").onmousemove = null;
+										document.getElementById("directimg").onmouseup  = null;
+									}
+								});
+							}
+
+						}else if(angle<127 && angle>101){
+							if(this.touchstate != "Reverse"){
+								trainSimulationGear(this.group,this.groupNum,"Reverse").then(netdata => {
+									if(netdata.code == "200"){
+										this.toutransform = "rotate(205deg)";
+										this.touchstate = "Reverse";
+										document.getElementById("directimg").onmousemove = null;
+										document.getElementById("directimg").onmouseup  = null;
+									}
+								});
+							}
+
+						}
+					}
+
+
+
+
+				}
+
+			},
+		},
+	}
+</script>
+
+<style >
+    .pane-box{
+        right: 30px;
+        top: 0px;
+        width:120px;
+        height:160px;
+        overflow: hidden;
+        position: absolute;
+
+    }
+		.lgimg{
+				width: 60px;
+				right:4px;
+				bottom:0px;
+				height: 15px;
+				position: absolute;
+		}
+
+		.panelb {
+				position: absolute;
+				font-size: 24rpx;
+				color: #fff;
+				text-align: center;
+				vertical-align: middle;
+				/* transform: rotate(90deg); */
+		}
+	.paneimg{
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		width:100px;
+		height:160px;
+		position: absolute;
+	}
+
+
+	.directbutton{
+		color:#FFFFFF;
+		font-size: 13px;
+		position:absolute;
+	}
+
+	.tfbutton{
+		color:#000000;
+		font-size: 1px;
+		position:absolute;
+	}
+
+</style>

src/views/jlmap3d/drive/drivecontrol/drivecontrol.vue

@@ -0,0 +1,230 @@
+<template>
+	<div class="drivepane">
+
+		<div style="position: absolute;left:50%;top:10%;z-index:10;background: #EBEBEB;">
+			<el-select v-model="value" placeholder="请选择列车" @change="currentsel" @visible-change="clickselect">
+				<el-option
+					v-for="item in options"
+					:key="item.value"
+					:label="item.label"
+					:value="item.value">
+				</el-option>
+			</el-select>
+		</div>
+
+			<Centerc-Pane ref="centercontrol" :draw-way="drawWay" :group-num="groupnum" :user-role="userrole" />
+
+			<Left-Pane ref="leftcontrol" />
+
+			<Right-Pane ref="rightcontrol" />
+
+			<TopRight-Pane ref="topcontrol" />
+
+
+
+<!--
+		<div class="msg" v-show ="msgshow">
+			<div class="msgtext">
+				{{controlmsg}}
+			</div>
+		</div>
+
+		<div class="switchpane" style="left:0;top:47.5%;transform: rotate(90deg);" v-show="switchleft" @tap="switchl">
+			<image class="switchimg" :src="jiantou" />
+		</div>
+
+		<div class="switchpane" style="left:47.5%;top:0;transform: rotate(180deg);" v-show="switchtop" @tap="switcht">
+			<image class="switchimg" :src="jiantou" />
+		</div>
+
+		<div class="switchpane" style="right:0;top:47.5%;transform: rotate(270deg);" v-show="switchright" @tap="switchr">
+			<image class="switchimg" :src="jiantou" />
+		</div>
+
+		<div class="switchpane" style="right:47.5%;bottom:0;" v-show="switchbottom" @tap="switchb">
+			<image class="switchimg" :src="jiantou" />
+		</div> -->
+
+	</div>
+</template>
+
+<script>
+	//
+	// import { sendSimulationCommand,getSimulationTrainlist,getSimulationTrainlistNew,getSimulationMember, getSimulationMemberNew,bindSimulationTrain,trainSimulationEb,trainSimulationForce,trainSimulationGear} from '@/api/simulation.js';
+	// import { creatSubscribe, clearSubscribe, SocketStatusMap } from '@/utils/subscribe.js';
+	// import { hideLoading } from '@/utils/loading.js';
+	import CentercPane from '@/views/jlmap3d/drive/drivecontrol/centerpane';
+	import LeftPane from '@/views/jlmap3d/drive/drivecontrol/leftpane';
+	import RightPane from '@/views/jlmap3d/drive/drivecontrol/rightpane';
+	import TopRightPane from '@/views/jlmap3d/drive/drivecontrol/toprightpane';
+
+	import StompClient from '@/utils/sock';
+
+	import { creatSubscribe, clearSubscribe, displayTopic, screenTopic } from '@/utils/stomp';
+	import { bindSimulationTrain,getSimulationTrainlistNew,getSimulationMemberNew,trainSimulationEb,trainSimulationForce,trainSimulationGear} from '@/jlmap3d/jl3ddrive/drivecontrol/simulation.js';
+	import { getToken } from '@/utils/auth';
+  // import Vue from 'vue';
+  // import StompClient from '@/utils/stompclient.js';
+import axios from 'axios';
+	export default {
+		name: 'DriveControl',
+		components: {
+		   CentercPane,
+		   LeftPane,
+		   RightPane,
+		   TopRightPane,
+		},
+
+		data() {
+			return {
+				options: [],
+        value: '',
+				teststomp:null,
+				topid:null,
+				trainlist:null,
+			}
+		},
+		watch: {
+
+		},
+		onLoad(e) {
+		},
+    onReady() {
+
+    },
+		computed: {
+			group() {
+				return this.$route.query.group;
+			}
+		},
+		async mounted() {
+			// this.teststomp = new StompClient();
+
+		},
+		beforeDestroy() {
+		},
+		methods: {
+			currentsel(selVal){
+			 	this.selVal = selVal;
+			 	this.dialogVisible = true;
+				this.groupnum = selVal;
+				for(let i=0;i<this.trainlist.length;i++){
+					if(this.trainlist[i].groupNumber == this.groupnum){
+						this.$refs.centercontrol.centerstate(this.trainlist[i].gear);
+					}
+				}
+
+				bindSimulationTrain(this.group,this.groupnum);
+
+		 	},
+			clickselect(e){
+				if(e == true){
+					getSimulationMemberNew(this.group).then(netdata => {
+						this.userrole = netdata.data.role;
+					});
+					getSimulationTrainlistNew(this.group).then(netdata => {
+						this.options = [];
+						this.trainlist = netdata.data;
+						for(let i=0;i<netdata.data.length;i++){
+
+							let option= {
+				          value: netdata.data[i].groupNumber,
+				          label: netdata.data[i].groupNumber
+				        }
+								if(netdata.data[i].name){
+									option.label = netdata.data[i].name+"正在驾驶"+netdata.data[i].groupNumber;
+								}
+
+
+							this.options.push(option);
+						}
+
+					});
+				}
+		 	},
+		},
+	}
+</script>
+
+<style>
+	.drivepane{
+		width:100%;
+    height:160px;
+		left:0;
+		bottom:0;
+		position: absolute;
+		background-size: 100% 100%;
+		background-image: url('/static/jl3d/control/scene.png');
+	}
+	.panebutton{
+		height: 73px;
+		width: 60px;
+		position: absolute;
+		text-align: center;
+	}
+
+	.panebutton2{
+		height: 73px;
+		width: 80px;
+		position: absolute;
+		text-align: center;
+	}
+
+	.buttonimg{
+		top:0;
+		/* position: absolute; */
+		height: 40px;
+		width: 40px;
+	}
+
+	.buttonimg2{
+		top:0;
+		left:10px;
+		position: absolute;
+		height: 60px;
+		width: 60px;
+	}
+
+	.buttontext{
+		width:100%;
+		bottom:0px;
+
+		/* position: absolute; */
+		color: #FFFFFF;
+		font-size: 4px;
+	}
+	.buttontext2{
+		width:100%;
+		bottom:0px;
+
+		position: absolute;
+		color: #FFFFFF;
+		font-size: 4px;
+	}
+
+	.msgtext{
+		width:200px;
+		height:50px;
+		border-radius:5px;
+		background:#C0C0C0;
+		color:#FFFFFF;
+		font-size: 40px;
+		transform: rotate(90deg);
+	}
+
+	.switchpane{
+		width:30px;
+		height:30px;
+		position:absolute;
+	}
+
+	.switchimg{
+		width:100%;
+		height:100%;
+	}
+
+	.selecttraintext{
+		font-size: 18px;
+	}
+
+</style>

src/views/jlmap3d/drive/drivecontrol/leftpane.vue

@@ -0,0 +1,425 @@
+<template>
+	<div style="width:25%;height:100%;position:absolute;bottom:0;left:0;">
+		<div id="breaker" class="panebutton" style="top:3%;left:3%;" @tap="breakerclick">
+			<img class="buttonimg" :src="greenzimg" />
+			<div class="buttontext">{{ $t('jlmap3d.highSpeedCircuitBreaker') }}</div>
+		</div>
+		<div id="carwash" class="panebutton" style="top:3%;left:14%;" @tap="carwashclick">
+			<img class="buttonimg" :src="redzimg" />
+			<div class="buttontext">{{ $t('jlmap3d.washCarModel')  }}</div>
+		</div>
+		<div id="aircom" class="panebutton" style="top:3%;left:28%;" @tap="aircomclick">
+			<img class="buttonimg" :src="aircomimg" />
+			<div class="buttontext">{{ $t('jlmap3d.forcedAirCompressor') }}</div>
+		</div>
+		<div id="atb" class="panebutton" style="top:3%;left:42%;" @tap="atbclick">
+			<img class="buttonimg" :src="greenimg" />
+			<div class="buttontext">{{ $t('jlmap3d.ATBStart') }}</div>
+		</div>
+		<div id="bmcbtc" class="panebutton" style="top:3%;left:56%;" @tap="bmcbtcclick">
+			<img class="buttonimg" :src="greenimg" />
+			<div class="buttontext">BM/CBTC</div>
+		</div>
+		<div id="rm" class="panebutton" style="top:3%;left:70%;" @tap="rmclick">
+			<img class="buttonimg" :src="greenimg" />
+			<div class="buttontext">RM</div>
+		</div>
+		<div id="relieve" class="panebutton" style="top:3%;left:84%;" @tap="relieveclick">
+			<img class="buttonimg" :src="aircomimg" />
+			<div class="buttontext">{{ $t('jlmap3d.forcedRelieve') }}</div>
+		</div>
+
+		<div id="dlclose" class="panebutton" style="bottom:3%;left:3%;" @tap="dlcclick">
+			<img class="buttonimg" :src="greenimg" />
+			<div class="buttontext">{{ $t('jlmap3d.closeLeftDoor') }}</div>
+		</div>
+		<div id="dlopen" class="panebutton" style="bottom:3%;left:14%;" @tap="dloclick">
+			<img class="buttonimg" :src="redimg" />
+			<div class="buttontext">{{ $t('jlmap3d.openLeftDoor') }}</div>
+		</div>
+		<div id="dlopen" class="panebutton" style="bottom:3%;left:28%;" @tap="dloclick">
+			<img class="buttonimg" :src="redimg" />
+			<div class="buttontext">{{ $t('jlmap3d.openLeftDoor') }}</div>
+		</div>
+		<div id="atoa" class="panebutton" style="bottom:3%;left:42%;" @tap="atoaclick">
+			<img class="buttonimg" :src="apoimg" />
+			<div class="buttontext">{{ $t('jlmap3d.ATOStart') }}</div>
+		</div>
+		<div id="atob" class="panebutton" style="bottom:3%;left:56%;" @tap="atobclick">
+			<img class="buttonimg" :src="apoimg" />
+			<div class="buttontext">{{ $t('jlmap3d.ATOStart') }}</div>
+		</div>
+		<div id="cbtc" class="panebutton" style="bottom:3%;left:70%;" @tap="cbtcclick">
+			<img class="buttonimg" :src="greenimg" />
+			<div class="buttontext">CBTC</div>
+		</div>
+		<div id="elflute" class="panebutton" style="bottom:3%;left:84%;" @tap="elfluteclick">
+			<img class="buttonimg" :src="grayimg" />
+			<div class="buttontext">{{ $t('jlmap3d.electricHornButton') }}</div>
+		</div>
+
+
+	</div>
+
+
+</template>
+
+<script>
+
+	import Vue from 'vue';
+	// import { sendSimulationCommand } from '@/api/simulation.js';
+
+	export default {
+		name: 'LeftPane',
+		components: {
+
+		},
+		data() {
+			return {
+
+				apoimg:"/static/jl3d/control/green.png",
+				greenzimg:"/static/jl3d/control/greenz.png",
+				redzimg:"/static/jl3d/control/redz.png",
+				greenimg:"/static/jl3d/control/green.png",
+				redimg:"/static/jl3d/control/red.png",
+				greenlimg:"/static/jl3d/control/greenl.png",
+				grayimg:"/static/jl3d/control/gray.png",
+				zuoimg:"/static/jl3d/control/zuo.png",
+				niuimg:"/static/jl3d/control/niu.png",
+				aircomimg:"/static/jl3d/control/aircom.png",
+				passlighttf:"rotate(0deg)",
+				sivtf:"rotate(0deg)",
+				driverlighttf:"rotate(0deg)",
+				headlighttf:"rotate(0deg)",
+			}
+		},
+		watch: {
+			'$store.state.app.atostate': function (val,newval) {
+				if(val != newval){
+					if(newval == true){
+						this.apoimg = this.greenimg;
+						this.$store.dispatch('app/setAtoState', false);
+					}else{
+						this.apoimg = this.greenlimg;
+						this.$store.dispatch('app/setAtoState', true);
+					}
+				}
+			},
+		},
+		computed: {
+			group() {
+				return this.$store.state.app.group;
+			},
+			code() {
+				return this.$store.state.app.code;
+			},
+			traincode() {
+				return this.$store.state.app.driverTrain;
+			},
+			movespeed() {
+				return this.$store.state.app.movespeed;
+			},
+			drivedirect() {
+				return this.$store.state.app.drivedirect;
+			},
+			atostate(){
+				return this.$store.state.app.atostate;
+			}
+
+		},
+		mounted() {
+
+		},
+		beforeDestroy() {
+
+		},
+		methods: {
+			leftstate : function(lefts){
+				if(lefts.ato == true){
+					this.apoimg = this.greenlimg;
+					this.$store.dispatch('app/setAtoState', true);
+				}else{
+					this.apoimg = this.greenimg;
+					this.$store.dispatch('app/setAtoState', false);
+
+				}
+			},
+			leftcontrol : function(){
+
+			},
+			showmsg:function(data){
+				wx.showToast({
+					title: data,
+					icon: 'loading',
+					duration: 2000
+				});
+			},
+			setData : function(){
+				this.msgshow = false;
+			},
+			showcontrolmsg:function(data,callback){
+				this.controlmsg = data;
+				this.msgshow = true;
+
+				callback = callback || function(){
+					this.setData();
+				};
+				setTimeout( callback.bind(this),2000);
+
+			},
+			//左侧车门开
+			dloclick: function (e){
+				console.log(this.$t('jlmap3d.leftDoorOpen'));
+				if(this.movespeed == 0){
+					//this.showcontrolmsg("左侧车门开");
+					this.controlsend(this.traincode,"603","07","");
+				}
+			},
+			//左侧车门关
+			dlcclick: function (e){
+				console.log(this.$t('jlmap3d.leftDoorClose'));
+				if(this.movespeed == 0){
+					//this.showcontrolmsg("左侧车门关");
+					this.controlsend(this.traincode,"605","07","");
+				}
+			},
+			//断路器
+			breakerclick: function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","breaker");
+			},
+			//洗车模式
+			carwashclick: function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","carwash");
+			},
+			//空压机
+			aircomclick : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","aircom");
+			},
+			//ATB
+			atbclick : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","atb");
+			},
+			//BMCBTC
+			bmcbtcclick : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","bm");
+			},
+			//RM
+			rmclick  : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","rm");
+			},
+			//强迫缓解
+			relieveclick  : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","relieve");
+			},
+			//ATOA
+			atoaclick  : function (e){
+				//console.log("ato自动驾驶");
+				if(this.movespeed == 0){
+					if(this.drivedirect == "Drive"){
+						this.controlsend(this.traincode,"601","07","");
+						this.apoimg = this.greenlimg;
+						this.showcontrolmsg(this.$t('jlmap3d.ATOStart'));
+						this.$store.dispatch('app/setAtoState', true);
+					}
+				}
+			},
+			//ATOB
+			atobclick  : function (e){
+				if(this.movespeed == 0){
+					if(this.drivedirect == "Drive"){
+						this.controlsend(this.traincode,"601","07","");
+						this.apoimg = this.greenimg;
+						this.showcontrolmsg(this.$t('jlmap3d.ATOStart'));
+						this.$store.dispatch('app/setAtoState', true);
+					}
+				}
+			},
+			//CBTC
+			cbtcclick  : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","cbtc");
+			},
+			//电笛
+			elfluteclick : function (e){
+				Vue.prototype.$stomp.send("/app/topic/simulation/drive","elflute");
+			},
+			controlsend:function(traincode,operation,type,param){
+				if(this.$store.state.app.userRole == "Driver"){
+					let command ={
+						code: traincode,
+						operation: operation,
+						type: type,
+						param: param
+					};
+					// sendSimulationCommand(this.group,command);
+				}else{
+
+				}
+			},
+			passlighttouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			passlighttouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=75;
+					let py=155;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<360 && angle>245){
+						if(angle<327 && angle>245){
+							this.passlighttf = "rotate(359deg)";
+						}else if(angle<360 && angle>327){
+							this.passlighttf = "rotate(90deg)";
+						}
+					}
+				}
+			},
+			passlighttouchend:function(e){
+				this.touchcontrol = false;
+			},
+			sivtouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			sivtouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=75;
+					let py=255;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<360 && angle>245){
+						if(angle<327 && angle>245){
+							this.sivtf = "rotate(359deg)";
+						}else if(angle<360 && angle>327){
+							this.sivtf = "rotate(90deg)";
+						}
+					}
+				}
+			},
+			sivtouchend:function(e){
+				this.touchcontrol = false;
+			},
+			driverlighttouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			driverlighttouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=75;
+					let py=355;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<360 && angle>245){
+						if(angle<327 && angle>245){
+							this.driverlighttf = "rotate(359deg)";
+						}else if(angle<360 && angle>327){
+							this.driverlighttf = "rotate(90deg)";
+						}
+					}
+				}
+			},
+			driverlighttouchend:function(e){
+				this.touchcontrol = false;
+			},
+			headlighttouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			headlighttouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=75;
+					let py=455;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<360 && angle>245){
+						if(angle<295 && angle>245){
+							this.headlighttf = "rotate(359deg)";
+						}else if(angle<338 && angle>295){
+							this.headlighttf = "rotate(405deg)";
+						}else if(angle<360 && angle>338){
+							this.headlighttf = "rotate(90deg)";
+						}
+					}
+				}
+			},
+			headlighttouchend:function(e){
+				this.touchcontrol = false;
+			},
+			getAngle:function(px,py,mx,my){
+				//圆心坐标
+				let x = Math.abs(px-mx);
+				let y = Math.abs(py-my);
+				let z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
+				let cos = y/z;
+				let radina = Math.acos(cos);//用反三角函数求弧度
+				let angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
+
+				if(mx>px&&my>py){//鼠标在第四象限
+					angle = 180 - angle;
+				}
+
+				if(mx==px&&my>py){//鼠标在y轴负方向上
+					angle = 180;
+				}
+
+				if(mx>px&&my==py){//鼠标在x轴正方向上
+					angle = 90;
+				}
+
+				if(mx<px&&my>py){//鼠标在第三象限
+					angle = 180+angle;
+				}
+
+				if(mx<px&&my==py){//鼠标在x轴负方向
+					angle = 270;
+				}
+
+				if(mx<px&&my<py){//鼠标在第二象限
+					angle = 360 - angle;
+				}
+				return angle;
+			},
+
+		},
+	}
+</script>
+
+<style>
+
+</style>

src/views/jlmap3d/drive/drivecontrol/rightpane.vue

@@ -0,0 +1,338 @@
+<template>
+	<div style="width:25%;height:100%;position:absolute;left:75%;">
+
+	    <div id="dropen" class="panebutton" style="bottom:1%;left:1%;" @tap="droclick">
+			<img class="buttonimg" :src="redlimg" />
+			<div class="buttontext">{{ $t('jlmap3d.openRightDoor') }}</div>
+		</div>
+
+		<div id="dropen" class="panebutton" style="bottom:1%;left:21%;" @tap="droclick">
+			<img class="buttonimg" :src="redlimg" />
+			<div class="buttontext">{{ $t('jlmap3d.openRightDoor') }}</div>
+		</div>
+
+		<div id="drclose" class="panebutton" style="bottom:1%;left:41%;" @tap="drcclick">
+			<img class="buttonimg" :src="greenimg" />
+			<div class="buttontext">{{ $t('jlmap3d.closeRightDoor') }}</div>
+		</div>
+
+		<div id="waterswitch" class="panebutton2" style="bottom:1%;left:61%;" @tap="waterclick">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:watertou}" @touchstart='watertouchstart' @touchmove='watertouchmove' @touchend='watertouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:33px;">{{ $t('jlmap3d.close') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:15px;left:50px;">{{ $t('jlmap3d.sprayWater') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.waterSwitch') }}</div>
+		</div>
+
+		<div id="wiper" class="panebutton2" style="bottom:1%;left:81%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:washtou}" @touchstart='washtouchstart' @touchmove='washtouchmove' @touchend='washtouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:33px;">{{ $t('jlmap3d.close') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:13px;left:50px;">{{ $t('jlmap3d.slow') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:23px;left:50px;">{{ $t('jlmap3d.highSpeed') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.wiperSwitch') }}</div>
+		</div>
+
+		<div id="urgestop" class="panebutton" style="top:1%;left:1%;">
+			<img class="buttonimg" :src="urgestopimg" />
+			<div class="buttontext">{{ $t('jlmap3d.emergencyBraking') }}</div>
+		</div>
+
+		<div id="doorpick" class="panebutton2" style="top:1%;left:33%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:doordirecttou}" @touchstart='doordirecttouchstart' @touchmove='doordirecttouchmove' @touchend='doordirecttouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:13px;left:5px;">{{ $t('jlmap3d.leftSide') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:33px;">{{ $t('jlmap3d.location0') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:13px;left:50px;">{{ $t('jlmap3d.rightSide') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.doorSideChoose') }}</div>
+		</div>
+
+		<div id="doormode" class="panebutton2" style="top:1%;left:66%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:doormodetou}" @touchstart='doormodetouchstart' @touchmove='doormodetouchmove' @touchend='doormodetouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:13px;left:5px;">AA</div>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:33px;">AM</div>
+			<div class="tfbutton" style="font-size:1px;top:13px;left:50px;">MM</div>
+			<div class="buttontext2">{{ $t('jlmap3d.doorModel') }}</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+	import Vue from 'vue';
+	import { sendSimulationCommand } from '@/api/simulation.js';
+
+	export default {
+		name: 'RightPane',
+		components: {
+
+		},
+		data() {
+			return {
+				redlimg:"/static/jl3d/control/redl.png",
+				greenimg:"/static/jl3d/control/green.png",
+				zuoimg:"/static/jl3d/control/zuo.png",
+				niuimg:"/static/jl3d/control/niu.png",
+				urgestopimg:"/static/jl3d/control/urgestop.png",
+				doordirecttou:"rotate(0deg)",
+				doormodetou:"rotate(0deg)",
+				watertou:"rotate(0deg)",
+				washtou:"rotate(0deg)",
+			}
+		},
+		watch: {
+
+		},
+		computed: {
+			group() {
+				return this.$store.state.app.group;
+			},
+			code() {
+				return this.$store.state.app.code;
+			},
+			traincode() {
+				return this.$store.state.app.driverTrain;
+			},
+			movespeed() {
+				return this.$store.state.app.movespeed;
+			},
+		},
+		mounted() {
+
+		},
+		beforeDestroy() {
+
+		},
+		methods: {
+			rightstate : function(rights){
+
+			},
+			rightcontrol : function(){
+
+			},
+			showmsg:function(data){
+				wx.showToast({
+					title: data,
+					icon: 'loading',
+					duration: 2000
+				});
+			},
+			showcontrolmsg:function(data,callback){
+				this.controlmsg = data;
+				this.msgshow = true;
+
+				callback = callback || function(){
+					this.setData();
+				};
+				setTimeout( callback.bind(this),2000);
+
+			},
+			droclick: function (e){
+				//console.log("右侧车门开");
+				if(this.movespeed == 0){
+					this.showcontrolmsg(this.$t('jlmap3d.rightDoorOpen'));
+					this.controlsend(this.traincode,"604","07","");
+				}
+			},
+			drcclick: function (e){
+				//console.log("右侧车门关");
+				if(this.movespeed == 0){
+					this.showcontrolmsg(this.$t('jlmap3d.rightDoorClose'));
+					this.controlsend(this.traincode,"606","07","");
+				}
+			},
+			urgestopclick: function (e){
+
+			},
+			controlsend:function(traincode,operation,type,param){
+				if(this.$store.state.app.userRole == "Driver"){
+					let command ={
+						code: traincode,
+						operation: operation,
+						type: type,
+						param: param
+					};
+					sendSimulationCommand(this.group,command);
+				}else{
+
+				}
+			},
+			watertouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			watertouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=140;
+					let py=400;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<338 && angle>245){
+						if(angle<295 && angle>245){
+							this.watertou = "rotate(359deg)";
+						}else if(angle<338 && angle>295){
+							this.watertou = "rotate(412deg)";
+						}
+					}
+				}
+			},
+			watertouchend:function(e){
+				this.touchcontrol = false;
+			},
+			washtouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			washtouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=140;
+					let py=510;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					// console.log(angle);
+					// this.washtou = "rotate("+(angle+85)+"deg)";
+					if(angle<360 && angle>245){
+						if(angle<295 && angle>245){
+							this.washtou = "rotate(359deg)";
+						}else if(angle<338 && angle>295){
+							this.washtou = "rotate(412deg)";
+						}else if(angle<360 && angle>338){
+							this.washtou = "rotate(90deg)";
+						}
+					}
+				}
+			},
+			washtouchend:function(e){
+				this.touchcontrol = false;
+			},
+			doordirecttouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			doordirecttouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=230;
+					let py=180;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<338 && angle>219){
+						if(angle<245 && angle>219){
+							this.doordirecttou = "rotate(305deg)";
+						}else if(angle<295 && angle>245){
+							this.doordirecttou = "rotate(359deg)";
+						}else if(angle<338 && angle>295){
+							this.doordirecttou = "rotate(412deg)";
+						}
+					}
+				}
+			},
+			doordirecttouchend:function(e){
+				this.touchcontrol = false;
+			},
+			doormodetouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			doormodetouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					let px=230;
+					let py=280;
+					let angle = this.getAngle(px,py,e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+					if(angle<338 && angle>219){
+						if(angle<245 && angle>219){
+							this.doormodetou = "rotate(305deg)";
+							Vue.prototype.$stomp.send("/app/topic/simulation/drive","AA");
+						}else if(angle<295 && angle>245){
+							this.doormodetou = "rotate(359deg)";
+							Vue.prototype.$stomp.send("/app/topic/simulation/drive","AM");
+						}else if(angle<338 && angle>295){
+							this.doormodetou = "rotate(412deg)";
+							Vue.prototype.$stomp.send("/app/topic/simulation/drive","MM");
+						}
+					}
+				}
+			},
+			doormodetouchend:function(e){
+				this.touchcontrol = false;
+			},
+			getAngle:function(px,py,mx,my){
+				//圆心坐标
+				let x = Math.abs(px-mx);
+				let y = Math.abs(py-my);
+				let z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
+				let cos = y/z;
+				let radina = Math.acos(cos);//用反三角函数求弧度
+				let angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
+
+				if(mx>px&&my>py){//鼠标在第四象限
+					angle = 180 - angle;
+				}
+
+				if(mx==px&&my>py){//鼠标在y轴负方向上
+					angle = 180;
+				}
+
+				if(mx>px&&my==py){//鼠标在x轴正方向上
+					angle = 90;
+				}
+
+				if(mx<px&&my>py){//鼠标在第三象限
+					angle = 180+angle;
+				}
+
+				if(mx<px&&my==py){//鼠标在x轴负方向
+					angle = 270;
+				}
+
+				if(mx<px&&my<py){//鼠标在第二象限
+					angle = 360 - angle;
+				}
+				return angle;
+			},
+
+		},
+	}
+</script>
+
+<style>
+
+</style>

src/views/jlmap3d/drive/drivecontrol/toprightpane.vue

@@ -0,0 +1,225 @@
+<template>
+	<div style="width:25%;height:100%;position:absolute;left:25%;">
+
+		<div id="passlight" class="panebutton2" style="top:1%;left:1%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:passlighttf}" @touchstart='passlighttouchstart' @touchmove='passlighttouchmove' @touchend='passlighttouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:33px;">{{ $t('jlmap3d.close') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:25px;left:50px;">{{ $t('jlmap3d.open') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.roomLightingControl') }}</div>
+		</div>
+
+		<div id="siv" class="panebutton2" style="top:1%;left:20%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:sivtf}" @touchstart='sivtouchstart' @touchmove='sivtouchmove' @touchend='sivtouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:33px;">{{ $t('jlmap3d.close') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:25px;left:50px;">{{ $t('jlmap3d.open') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.sivsControl') }}</div>
+		</div>
+
+		<div id="driverlight" class="panebutton2" style="top:1%;left:40%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:driverlighttf}" @touchstart='driverlighttouchstart' @touchmove='driverlighttouchmove' @touchend='driverlighttouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:28px;">{{ $t('jlmap3d.shut') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:25px;left:50px;">{{ $t('jlmap3d.open') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.driverRoomLights') }}</div>
+		</div>
+
+		<div id="headlight" class="panebutton2" style="top:1%;left:60%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg" :style="{transform:headlighttf}" @touchstart='headlighttouchstart' @touchmove='headlighttouchmove' @touchend='headlighttouchend'/>
+			<div class="tfbutton" style="font-size:1px;top:5px;left:28px;">{{ $t('jlmap3d.shut') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:13px;left:50px;">{{ $t('jlmap3d.passingBeam') }}</div>
+			<div class="tfbutton" style="font-size:1px;top:25px;left:50px">{{ $t('jlmap3d.distanceLight') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.headLamp') }}</div>
+		</div>
+
+
+		<div id="sg" class="panebutton" style="bottom:1%;left:1%;" @tap="sgclink">
+			<img class="buttonimg" :src="sgimg" />
+			<div class="buttontext">{{ $t('jlmap3d.electricGongSheng') }}</div>
+		</div>
+
+		<div id="jg" class="panebutton" style="bottom:1%;left:20%;" @tap="jgclick">
+			<img class="buttonimg" :src="jgimg" />
+			<div class="buttontext">{{ $t('jlmap3d.pantographFall') }}</div>
+		</div>
+
+		<div id="sl" class="panebutton" style="bottom:1%;left:40%;" @tap="slclick">
+			<img class="buttonimg" :src="slimg" />
+			<div class="buttontext">{{ $t('jlmap3d.lampButton') }}</div>
+		</div>
+
+		<div id="atp" class="panebutton" style="bottom:1%;left:60%;" @tap="atpclick">
+			<img class="buttonimg" :src="atpimg" />
+			<div class="buttontext">{{ $t('jlmap3d.removalATP') }}</div>
+		</div>
+
+		<div id="staymode" class="panebutton2" style="bottom:1%;left:80%;">
+			<img class="buttonimg2" :src="zuoimg" />
+			<img class="buttonimg2" :src="niuimg"  :style="{transform:toutransform}" @touchstart='stopmodetouchstart' @touchmove='stopmodetouchmove' @touchend='stopmodetouchend'/>
+			<div class="tfbutton" style="top:25px;left:1px;">{{ $t('jlmap3d.infliction') }}</div>
+			<div class="tfbutton" style="top:5px;left:25px;">{{ $t('jlmap3d.mesoPosition') }}</div>
+			<div class="tfbutton" style="top:25px;left:50px;">{{ $t('jlmap3d.remission') }}</div>
+			<div class="buttontext2">{{ $t('jlmap3d.parkingBrakeMode') }}</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+	import Vue from 'vue';
+	import { sendSimulationCommand } from '@/api/simulation.js';
+
+	export default {
+		name: 'TopRightPane',
+		components: {
+
+		},
+		data() {
+			return {
+				move:0,
+				movex:"20%",
+				apoimg:"",
+				sgimg:"/static/jl3d/control/redz.png",
+				jgimg:"/static/jl3d/control/greenz.png",
+				atpimg:"/static/jl3d/control/atp.png",
+				slimg:"/static/jl3d/control/gray.png",
+				zuoimg:"/static/jl3d/control/zuo.png",
+				niuimg:"/static/jl3d/control/niu.png",
+				toutransform:"rotate(0deg)",
+			}
+		},
+		watch: {
+
+		},
+		computed: {
+			group() {
+				return this.$store.state.app.group;
+			},
+			code() {
+				return this.$store.state.app.code;
+			},
+			traincode() {
+				return this.$store.state.app.driverTrain;
+			}
+		},
+		mounted() {
+
+		},
+		beforeDestroy() {
+
+		},
+		methods: {
+			topstate : function(tops){
+				if(tops.atpCutOff == true){
+
+				}else{
+
+				}
+			},
+			topcontrol : function(){
+
+			},
+			showmsg:function(data){
+				wx.showToast({
+					title: data,
+					icon: 'loading',
+					duration: 2000
+				});
+			},
+			showcontrolmsg:function(data,callback){
+				this.controlmsg = data;
+				this.msgshow = true;
+				callback = callback || function(){
+					this.setData();
+				};
+				setTimeout( callback.bind(this),2000);
+			},
+			stopmodetouchstart:function(e){
+				// let command ={
+				// 	code:this.traincode,
+				// 	operation:"607",
+				// 	type:"07",
+				// 	param:""
+				// };
+				// command.param = this.touchstate;
+				// sendSimulationCommand(this.group,command).then(netdata => {
+				// 	if(netdata.data == true){
+				this.touchcontrol = true;
+				// 	}
+				// });
+			},
+			stopmodetouchmove:function(e){//finger move 触发
+				if(this.touchcontrol == true){
+					this.getAngle(e.changedTouches[0].clientX,e.changedTouches[0].clientY);
+				}
+			},
+			stopmodetouchend:function(e){
+				this.touchcontrol = false;
+			},
+				getAngle:function(mx,my){
+				//圆心坐标
+				let px=140;
+				let py=510;
+				let x = Math.abs(px-mx);
+				let y = Math.abs(py-my);
+				let z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
+				let cos = y/z;
+				let radina = Math.acos(cos);//用反三角函数求弧度
+				let angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
+
+				if(mx>px&&my>py){//鼠标在第四象限
+					angle = 180 - angle;
+				}
+
+				if(mx==px&&my>py){//鼠标在y轴负方向上
+					angle = 180;
+				}
+
+				if(mx>px&&my==py){//鼠标在x轴正方向上
+					angle = 90;
+				}
+
+				if(mx<px&&my>py){//鼠标在第三象限
+					angle = 180+angle;
+				}
+
+				if(mx<px&&my==py){//鼠标在x轴负方向
+					angle = 270;
+				}
+
+				if(mx<px&&my<py){//鼠标在第二象限
+					angle = 360 - angle;
+				}
+				if(angle<338 && angle>219){
+
+					if(angle<245 && angle>219){
+						this.toutransform = "rotate(305deg)";
+					}else if(angle<295 && angle>245){
+						this.toutransform = "rotate(359deg)";
+					}else if(angle<338 && angle>295){
+						this.toutransform = "rotate(412deg)";
+
+					}
+				}
+			},
+			sgclink: function (e){
+				//console.log("升弓");
+			},
+			jgclick: function (e){
+				//console.log("降弓");
+			},
+			slclick: function (e){
+				//console.log("试灯");
+			},
+			atpclick: function (e){
+				//console.log("atp");
+			},
+
+		},
+	}
+</script>
+
+<style>
+</style>

src/views/jlmap3d/drive/jl3ddrive.vue

@@ -27,7 +27,7 @@
     <Drive-Mmi v-if="mmishow" ref="mmiui" />
 
     <Drive-Tms v-if="mmishow" />
-
+    <Drive-Control />
   </div>
 
 </template>
@@ -51,13 +51,14 @@ import { JLmapDriving } from '@/jlmap3d/jl3ddrive/jl3ddrive';
 
 import DriveMmi from '@/views/jlmap3d/drive/sceneview/mmiview';
 import DriveTms from '@/views/jlmap3d/drive/sceneview/tmsview';
-
+import DriveControl from '@/views/jlmap3d/drive/drivecontrol/drivecontrol';
 var train;
 export default {
 	name: 'Jl3dDrive',
 	components: {
 		DriveMmi,
-		DriveTms
+		DriveTms,
+    DriveControl
 	},
 	data() {
 		return {

src/views/jlmap3d/drive/sceneview/mmiview.vue

@@ -341,7 +341,7 @@ export default {
     height:333px;
     background: black;
     position:absolute;
-    bottom:0;
+    bottom:160px;
   }
   .meter{
     width:60%;

src/views/jlmap3d/drive/sceneview/tmsview.vue

@@ -47,7 +47,7 @@ export default {
     background-size:100% 100%;
     background-image:url('/static/jl3d/tms.png');
     position:absolute;
-    bottom:0;
+    bottom:160px;
     right:0;
   }