添加驾驶操作面板，三维模型资源改本地
This commit is contained in:
sunzhenyu
parent
b8d4cbcaba
commit
d4f7da9c8b
@ -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',
|
||||
|
||||
};
|
||||
|
||||
@ -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: '暂无会话',
|
||||
};
|
||||
|
||||
@ -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 );
|
||||
|
||||
99
src/jlmap3d/jl3ddrive/drivecontrol/simulation.js
Normal file
99
src/jlmap3d/jl3ddrive/drivecontrol/simulation.js
Normal file
@ -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: ''
|
||||
})
|
||||
}
|
||||
@ -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();
|
||||
dom.appendChild( stats.dom );
|
||||
let stats =null;
|
||||
// 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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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'){
|
||||
modelurl = "https://joylink.club/oss";
|
||||
}else if(BASE_API == 'https://test.joylink.club/jlcloud'){
|
||||
modelurl = "https://test.joylink.club/oss";
|
||||
}else {
|
||||
modelurl = "https://test.joylink.club/oss";
|
||||
}
|
||||
// if(BASE_API == 'https://joylink.club/jlcloud'){
|
||||
// modelurl = "https://joylink.club/oss";
|
||||
// }else if(BASE_API == 'https://test.joylink.club/jlcloud'){
|
||||
// modelurl = "https://test.joylink.club/oss";
|
||||
// }else {
|
||||
// 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"
|
||||
//https://test.joylink.club/oss/models/station/fuzhou/fuzhou.FBX
|
||||
//https://joylink.club/oss/models/station/fuzhou/fuzhou.FBX
|
||||
//modelurl+"/station/fuzhou/fuzhou.FBX"
|
||||
//https://test.joylink.club/oss/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"
|
||||
//https://test.joylink.club/oss/models/suidao/suidao.FBX
|
||||
//https://joylink.club/oss/models/suidao/suidao.FBX
|
||||
//modelurl+"/suidao/suidao.FBX"
|
||||
//https://test.joylink.club/oss/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);
|
||||
|
||||
@ -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;
|
||||
|
||||
411
src/views/jlmap3d/drive/drivecontrol/centerpane.vue
Normal file
411
src/views/jlmap3d/drive/drivecontrol/centerpane.vue
Normal file
@ -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>
|
||||
0
src/views/jlmap3d/drive/drivecontrol/dirvespee.js
Normal file
0
src/views/jlmap3d/drive/drivecontrol/dirvespee.js
Normal file
230
src/views/jlmap3d/drive/drivecontrol/drivecontrol.vue
Normal file
230
src/views/jlmap3d/drive/drivecontrol/drivecontrol.vue
Normal file
@ -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>
|
||||
425
src/views/jlmap3d/drive/drivecontrol/leftpane.vue
Normal file
425
src/views/jlmap3d/drive/drivecontrol/leftpane.vue
Normal file
@ -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>
|
||||
338
src/views/jlmap3d/drive/drivecontrol/rightpane.vue
Normal file
338
src/views/jlmap3d/drive/drivecontrol/rightpane.vue
Normal file
@ -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>
|
||||
225
src/views/jlmap3d/drive/drivecontrol/toprightpane.vue
Normal file
225
src/views/jlmap3d/drive/drivecontrol/toprightpane.vue
Normal file
@ -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>
|
||||
@ -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 {
|
||||
|
||||
@ -341,7 +341,7 @@ export default {
|
||||
height:333px;
|
||||
background: black;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
bottom:160px;
|
||||
}
|
||||
.meter{
|
||||
width:60%;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
BIN
static/jl3d/control/aircom.png
Normal file
BIN
static/jl3d/control/aircom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/jl3d/control/atp.png
Normal file
BIN
static/jl3d/control/atp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
static/jl3d/control/direct.png
Normal file
BIN
static/jl3d/control/direct.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
static/jl3d/control/directoff.png
Normal file
BIN
static/jl3d/control/directoff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
static/jl3d/control/gray.png
Normal file
BIN
static/jl3d/control/gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
static/jl3d/control/green.png
Normal file
BIN
static/jl3d/control/green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
static/jl3d/control/greenl.png
Normal file
BIN
static/jl3d/control/greenl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/jl3d/control/greenz.png
Normal file
BIN
static/jl3d/control/greenz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
static/jl3d/control/jiantou.png
Normal file
BIN
static/jl3d/control/jiantou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/jl3d/control/lg.png
Normal file
BIN
static/jl3d/control/lg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/jl3d/control/niu.png
Normal file
BIN
static/jl3d/control/niu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/jl3d/control/pane.png
Normal file
BIN
static/jl3d/control/pane.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/jl3d/control/red.png
Normal file
BIN
static/jl3d/control/red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
static/jl3d/control/redl.png
Normal file
BIN
static/jl3d/control/redl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
static/jl3d/control/redz.png
Normal file
BIN
static/jl3d/control/redz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
static/jl3d/control/scene.png
Normal file
BIN
static/jl3d/control/scene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
BIN
static/jl3d/control/start.png
Normal file
BIN
static/jl3d/control/start.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
static/jl3d/control/urgestop.png
Normal file
BIN
static/jl3d/control/urgestop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/jl3d/control/zuo.png
Normal file
BIN
static/jl3d/control/zuo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
Binary file not shown.
BIN
static/model/station/fuzhouold.FBX
Normal file
BIN
static/model/station/fuzhouold.FBX
Normal file
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user