From e3e7bf4a8df0dccff24478bd4aeaaa6ca9a6e356 Mon Sep 17 00:00:00 2001 From: sunzhenyu Date: Thu, 17 Jun 2021 15:50:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=89=E7=BB=B4=E5=A4=A7?= =?UTF-8?q?=E9=93=81=E9=A9=BE=E9=A9=B6=E9=9D=A2=E6=9D=BF=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E4=BA=91=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jl3drailwaydrive/jl3drailwaydrive.js | 50 +++- src/utils/baseUrl.js | 2 +- .../railwaydrive/drivecontrol/centerpane.vue | 267 +++++++++++++++++- .../drivecontrol/drivecontrol.vue | 6 +- .../jlmap3d/railwaydrive/sceneview/mmi.js | 78 ++--- .../railwaydrive/sceneview/mmiview.vue | 4 +- static/jl3d/railway/c.png | Bin 0 -> 58580 bytes static/jl3d/raiwaybiao.png | Bin 0 -> 27982 bytes 8 files changed, 348 insertions(+), 59 deletions(-) create mode 100644 static/jl3d/railway/c.png create mode 100644 static/jl3d/raiwaybiao.png diff --git a/src/jlmap3d/jl3drailwaydrive/jl3drailwaydrive.js b/src/jlmap3d/jl3drailwaydrive/jl3drailwaydrive.js index a8cb07696..a3e3148b0 100644 --- a/src/jlmap3d/jl3drailwaydrive/jl3drailwaydrive.js +++ b/src/jlmap3d/jl3drailwaydrive/jl3drailwaydrive.js @@ -67,6 +67,52 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj //let camera = SetCamera(dom); // 定义场景(渲染容器) let scene = SetScene(project); + scene.background = new THREE.CubeTextureLoader() + .setPath( 'https://oss.joylink.club/oss/joylink/PICTURE/2021-06-15/' ) + .load( [ '18-75117.jpg', '17-78286.jpg', '19-62689.jpg', '15-95146.jpg', '16-99183.jpg', '14-94914.jpg' ] ); + + let meshCloud; + var loader = new THREE.TextureLoader(); + // 加载一个资源 + loader.load( + // 资源URL + JL3D_LOCAL_STATIC+"/jl3d/railway/c.png", + + // onLoad回调 + function ( texture ) { + + let materialCloud = new THREE.MeshPhongMaterial({ + transparent:true, + map:texture, + }); + let planeCloud = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) ); + let geoCloud = new THREE.Geometry(); + + for ( var i = 0; i < 20; i++ ) { + + planeCloud.position.x = 1000 - 2000 * Math.random(); + planeCloud.position.y = Math.random() * 500+100 ; + planeCloud.position.z = 1000 - 2000 * Math.random(); + planeCloud.rotation.z = Math.random() * Math.PI*i; + planeCloud.scale.x = planeCloud.scale.y = Math.random() * Math.random() * 5+0.5; + planeCloud.lookAt(new THREE.Vector3( 0, 0, 0 )); + THREE.GeometryUtils.merge( geoCloud, planeCloud ); + + } + + meshCloud = new THREE.Mesh( geoCloud, materialCloud ); + meshCloud.renderOrder = 8; + camera.add( meshCloud ); + }, + + // 目前暂不支持onProgress的回调 + undefined, + + // onError回调 + function ( err ) { + console.error( 'An error happened.' ); + } + ); let speed = 0; @@ -113,7 +159,7 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj // 地图模型数据 let mapdata = new Jl3ddata(); - let camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 0.1, 400000); + let camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 0.1, 4000); camera.position.set( 0, 0, 0 ); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); @@ -201,7 +247,7 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj // 根据相机渲染场景 renderer.render(scene, camera); //cctv渲染 - + meshCloud.rotation.y += 0.0001; if(scope.cctvswitch == true){ renderercctv.render(scene,cameracctv); } diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js index 3a11ac066..11702c286 100644 --- a/src/utils/baseUrl.js +++ b/src/utils/baseUrl.js @@ -6,7 +6,7 @@ export function getBaseUrl() { // BASE_API = 'http://192.168.8.107:9000'; // 袁琪 // BASE_API = 'http://192.168.3.83:9000'; // 旭强 有线 // BASE_API = 'http://192.168.8.114:9000'; // 旭强 无线 - BASE_API = 'http://192.168.3.120:9000'; // 张赛 + // BASE_API = 'http://192.168.3.120:9000'; // 张赛 // BASE_API = 'http://192.168.8.140:9000'; // 杜康 // BASE_API = 'http://b29z135112.zicp.vip'; // BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康 diff --git a/src/views/jlmap3d/railwaydrive/drivecontrol/centerpane.vue b/src/views/jlmap3d/railwaydrive/drivecontrol/centerpane.vue index 04c59130b..53b1a07a3 100644 --- a/src/views/jlmap3d/railwaydrive/drivecontrol/centerpane.vue +++ b/src/views/jlmap3d/railwaydrive/drivecontrol/centerpane.vue @@ -9,16 +9,26 @@ --> -
+ + +
+ +
- -
- - +
油门
+ + + +
+
+
刹车
+ +
@@ -65,6 +75,10 @@ pane:JL3D_LOCAL_STATIC+"/jl3d/railway/lg.png", lg:JL3D_LOCAL_STATIC+"/jl3d/railway/yuahdfgdfre.png", + doordirecttou:"rotate(0deg)", + zuoimg:JL3D_LOCAL_STATIC+"/jl3d/railway/direct.png", + niuimg:JL3D_LOCAL_STATIC+"/jl3d/control/niu.png", + iconrotate:45,//旋转deg icontranslateX:100,//沿x轴位移px icontranslateY:100,//沿y轴位移px @@ -83,6 +97,11 @@ y: null }, moveheight:null, + move:0, + movex:"73px", + stopheight:null, + stop:0, + stopx:"73px", speedlimit:160, } @@ -147,11 +166,30 @@ updateInitStatus : function(data){ this.moveheight = data[4]/100*235; this.movex = this.moveheight+15 +"px"; - let angle = 397 - data[6]/150*83; - let angleall =397 - data[5]/100*105; - this.braketrans = "rotate("+angle+"deg)"; - this.braketransall = "rotate("+angleall+"deg)"; + this.stopheight = data[6]/150*235; + this.stopx = this.stopheight+15 +"px"; + // let angle = 397 - data[6]/150*83; + // let angleall =397 - data[5]/100*105; + // this.braketrans = "rotate("+angle+"deg)"; + // this.braketransall = "rotate("+angleall+"deg)"; + + if(data[2] == "1"){ + this.doordirecttou = "rotate("+320+"deg)"; + this.oldDirectType = 1; + } + if(data[2] == "0"){ + this.doordirecttou = "rotate("+360+"deg)"; + this.oldDirectType = 0; + } + if(data[2] == "-1"){ + this.doordirecttou = "rotate("+399+"deg)"; + this.oldDirectType = -1; + } + if(data[2] == "2"){ + this.doordirecttou = "rotate("+442+"deg)"; + this.oldDirectType = 2; + } }, centerstate : function(gear){ this.touchstate = gear; @@ -199,6 +237,54 @@ } }, + bakestart: function(event){ + let domoffset = document.getElementById("div3").getBoundingClientRect(); + // movelimit + this.movelimit.x = domoffset.x; + this.movelimit.y = domoffset.y; + event.preventDefault(); + document.getElementById("div3").onmousemove = this.bakechange; + document.getElementById("div4").onmouseup = this.bakeend; + }, + bakechange: function(event){ + this.stopheight = event.pageY-this.movelimit.y; + this.stopx = this.stopheight-15 +"px"; + // if(this.atostate == true){ + // this.$store.dispatch('app/setAtoState', false); + // } + this.stop = this.stopheight/235; + if(this.stopheight<=40){ + this.stopheight=30; + this.stopx=23+"px"; + this.stop = 0; + } + if(this.stopheight>=235){ + this.stopheight=235; + this.stopx=235+"px"; + this.stop = 1; + } + + let param = { + // id:this.groupNum, + id:"001", + pos:parseInt(this.stop*150) + }; + const userInfo = store.state.training.simulationUserList.find(el => el.id == store.state.user.id); + throttle( + trainSimulationForce(this.group,userInfo.memberId,param,"Train_Drive_Auto_Break ").then(res => { + // console.log(res); + }).catch((error) => { + console.log(error); + }),200,true); + }, + bakeend: function(event){ + document.getElementById("div3").onmousemove = null; + document.getElementById("div4").onmouseup = null; + }, + bakeout: function(event){ + document.getElementById("div3").onmousemove = null; + document.getElementById("div4").onmouseup = null; + }, speedstart: function(event){ let domoffset = document.getElementById("div1").getBoundingClientRect(); // movelimit @@ -207,6 +293,7 @@ event.preventDefault(); document.getElementById("div1").onmousemove = this.speedchange; document.getElementById("div2").onmouseup = this.speedend; + }, speedchange: function(event){ this.moveheight = event.pageY-this.movelimit.y; @@ -245,7 +332,10 @@ document.getElementById("div1").onmousemove = null; document.getElementById("div2").onmouseup = null; }, - + speedout: function(event){ + document.getElementById("div1").onmousemove = null; + document.getElementById("div2").onmouseup = null; + }, click:function(){//图标点击事件 @@ -340,7 +430,7 @@ }).catch((error) => { console.log(error); }),200,true); - updatemmic1(param.percent); + // updatemmic1(param.percent); } @@ -434,6 +524,135 @@ } }, + doordirecttouchstart:function(e){ + + + let domoffset = document.getElementById("directimgdiv").getBoundingClientRect(); + // movelimit + this.angleoffset.x = domoffset.x; + this.angleoffset.y = domoffset.y; + + + e.preventDefault(); + + document.getElementById("directimgdiv").onmousemove = this.doordirecttouchmove; + document.getElementById("directimgdiv").onmouseup = this.doordirecttouchup; + + + }, + doordirecttouchmove:function(e){//finger move 触发 + // console.log(e); + + this.getAngle(e.pageX-this.angleoffset.x ,e.pageY-this.angleoffset.y); + }, + doordirecttouchup:function(e){ + document.getElementById("directimgdiv").onmousemove = null; + document.getElementById("directimgdiv").onmouseup = null; + }, + + getAngle:function(mx,my){ + + let px=50; + let py=50; + // 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));//将弧度转换成角度 + + + //圆心坐标 + 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(mxpy){//鼠标在第三象限 + angle = 180+angle; + } + // + // if(mx356 && angle<372){ + this.doordirecttou = "rotate("+360+"deg)"; + this.directType = 0; + paramGear.pos = '0'; + } + + if(angle>372 && angle<421){ + this.doordirecttou = "rotate("+399+"deg)"; + this.directType = -1; + paramGear.pos = '4'; + } + + if(angle>421){ + this.doordirecttou = "rotate("+442+"deg)"; + this.directType = 2; + paramGear.pos = '4'; + } + + + + + + if(this.oldDirectType != this.directType){ + this.oldDirectType = this.directType; + let param = { + // id:this.groupNum, + id:"001", + pos:parseInt(this.directType) + }; + const userInfo = store.state.training.simulationUserList.find(el => el.id == store.state.user.id); + + trainSimulationForce(this.group,userInfo.memberId,paramGear,"Train_Drive_Gear_Change").then(res => { + // console.log(res); + }).catch((error) => { + console.log(error); + }); + + trainSimulationForce(this.group,userInfo.memberId,param,"Train_Drive_Change_Over_Switch").then(res => { + // console.log(res); + }).catch((error) => { + console.log(error); + }); + } + }, }, } @@ -462,7 +681,16 @@ height:300px; overflow: hidden; position: absolute; - + text-align: center; + } + .pane-box2{ + right: 0px; + bottom: 10px; + width:120px; + height:300px; + overflow: hidden; + position: absolute; + text-align: center; } .lgimg{ width: 60px; @@ -502,5 +730,20 @@ font-size: 1px; position:absolute; } + .directbutton{ + width: 100px; + height: 100px; + position: absolute; + text-align: center; + cursor:pointer; + } + + .rightbuttonbcimg{ + width: 100%; + height: 100%; + position: absolute; + top:0; + left:0; + } diff --git a/src/views/jlmap3d/railwaydrive/drivecontrol/drivecontrol.vue b/src/views/jlmap3d/railwaydrive/drivecontrol/drivecontrol.vue index 7fc7ac786..ca46ce9ab 100644 --- a/src/views/jlmap3d/railwaydrive/drivecontrol/drivecontrol.vue +++ b/src/views/jlmap3d/railwaydrive/drivecontrol/drivecontrol.vue @@ -20,7 +20,7 @@ - + @@ -290,7 +290,7 @@ import axios from 'axios'; updateDriveValue(newvalue){ this.$refs.centercontrol.updateInitStatus(newvalue); - this.$refs.rightcontrol.updateInitStatus(newvalue); + // this.$refs.rightcontrol.updateInitStatus(newvalue); }, updatetrainlist(){ getMemberListCommon(this.$route.query.group,"DRIVER").then(netdata => { @@ -362,7 +362,7 @@ import axios from 'axios';