joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改三维驾驶tms界面逻辑，修改三维课程成绩考试模块

Browse Source
This commit is contained in:
sunzhenyu 2021-08-06 16:36:33 +08:00
parent bc47132b21
commit 744544d2a6
12 changed files with 829 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/jlmap3d/lesson3d/lesson3dplayer.js
View File

@ -35,6 +35,7 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
//定义当前课程角色
let nowRole = "";
let oldIndex = 0;
//考试课程
let examList = [];
let examData = {};
@ -88,20 +89,34 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
}
this.changeIndex = function(nowIndex){
if(nowIndex!=0){
oldIndex = lessonIndex;
}
if(lessonData.lessonProgress[oldIndex].roleName == nowRole){
updateExam(lessonData.lessonProgress[oldIndex],oldIndex);
}
lessonIndex = nowIndex;
console.log(nowIndex);
scope.nowSceneType = lessonData.lessonProgress[nowIndex].progressScene;
console.log(nowRole);
console.log(lessonData.lessonProgress[lessonIndex].roleName);
// console.log(nowRole);
// console.log(lessonData.lessonProgress[lessonIndex].roleName);
if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
controlManager.initControlMode(lessonIndex);
controlManager.initRoleMode(true,nowRole);
controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,true,assetModelManager.lessonTriggerList[scope.nowSceneType]);
}else{
controlManager.initControlMode(lessonIndex);
controlManager.initRoleMode(false,nowRole);
controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,false,assetModelManager.lessonTriggerList[scope.nowSceneType]);
}
if(nowIndex == lessonData.lessonProgress.length-1){
lessonEnd();
}
}
this.changeCameraPos = function(pos){
@ -116,10 +131,7 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
if(lessonData.lessonProgress[lessonIndex].roleName == nowRole){
roleMode = true;
}
controlManager.initRoleMode(roleMode);
console.log(assetModelManager);
for(let i=0;i<lessonData.lessonProgress.length;i++){
if(nowRole == lessonData.lessonProgress[i].roleName){
examList.push(
@ -140,7 +152,7 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
nowStep:0,
time:0,
};
controlManager.initExam(examList,examData);
updataExamStatus(examData);
// if(lessonData.lessonProgress[lessonIndex].action.length>0){
controlManager.changeIndexEvent(lessonData.lessonProgress[lessonIndex].action,roleMode,assetModelManager.lessonTriggerList[scope.nowSceneType]);
@ -151,6 +163,17 @@ export function Lesson3dPlayer(dom,lessonData,lessonIndex) {
// }
};
function updateExam(newIndexData,newIndex){
for(let i=0;i<examList.length;i++){
if(examList[i].index == newIndex){
examData.trueStep.push(newIndexData);
examData.lastScore += 10;
examData.nowStep += 1;
updataExamStatus(examData);
break;
}
}
}
//循环渲染函数
function animate() {

13
src/jlmap3d/lesson3d/manager/controlmanager.js
View File

@ -15,6 +15,10 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
this.eventHitMode = false;
let nowRole = "";
let roleMode = false;
let examList = {};
let examData = {};
let eventBoxs = [];
let raycasterBoxs = [];
let actionList = [];
@ -108,6 +112,15 @@ export function ControlManager(dom,scene,lessonData,lessonIndex) {
// console.log(roleMode);
};
this.initExam = function(newExamList,newExamData){
examList = newExamList;
examData = newExamData;
};
function updateExam(){
updataExamStatus(examData);
}
const worldOctree = new Octree();
const playerCollider = new Capsule( new THREE.Vector3( 0, 10, 0 ), new THREE.Vector3( 0, 11.9, 0 ), 1 );

9
src/views/jlmap3d/drive/jl3ddrive.vue
View File

@ -33,7 +33,7 @@
</div>
<Drive-Mmi v-if="mmishow" ref="mmiui" />
<Drive-Tms v-if="tmsshow" />
<Drive-Tms v-if="tmsshow" ref="tmsui"/>
<Drive-Control v-if="dcontrolshow" ref="dcontrol" @warningmsg="warningmsg" @warningmsgoff="warningmsgoff" />
</div>
@ -105,6 +105,9 @@ export default {
if (this.mmishow == true) {
this.$refs.mmiui.updatespeed(newVal);
}
// if(this.tmsshow == true){
// this.$refs.tmsui.updatespeed(newVal);
// }
}
}
},
@ -336,10 +339,14 @@ export default {
// updateDriveValue(this.trainnum);
// }
updatedoorlight(newdata);
console.log(newdata.v);
updatetmsstatus(newdata);
if(this.$refs.mmiui){
this.$refs.mmiui.updatetrainstatus(newdata);
}
updatabuttonlight(newdata);
},
warningmsg(nowmsg){

285
src/views/jlmap3d/drive/sceneview/tmscomponent/tmsfault.vue
View File

@ -1,9 +1,210 @@
<template>
<div class = "tmsfault" >
<div class = "tmsvoltage">{{voltage}}</div>
<div class = "tmscurrent">{{current}}</div>
<div class = "tmslevel">{{level}}</div>
<div class = "tmsspeed">{{speed}}</div>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">车号</div></el-col>
<el-col :span="59"><div class="demoCol">1</div></el-col>
<el-col :span="59"><div class="demoCol">2</div></el-col>
<el-col :span="59"><div class="demoCol">3</div></el-col>
<el-col :span="59"><div class="demoCol">4</div></el-col>
<el-col :span="59"><div class="demoCol">5</div></el-col>
<el-col :span="59"><div class="demoCol">6</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">辅助状态</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">辅助ON</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
<el-col :span="59"><div class="demoCol">辅助OFF</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">辅助ON</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">牵引系统状态</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">58A</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">58A</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">46A</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">57A</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">制动缸压力</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv">0.00</div>
<div class="twodiv">0.00</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv">0.00</div>
<div class="twodiv">0.00</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv">0.00</div>
<div class="twodiv">0.00</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv">0.00</div>
<div class="twodiv">0.00</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv">0.00</div>
<div class="twodiv">0.00</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv">0.00</div>
<div class="twodiv">0.00</div>
</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">转向架切除</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv"></div>
<div class="twodiv"></div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv"></div>
<div class="twodiv"></div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv"></div>
<div class="twodiv"></div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv"></div>
<div class="twodiv"></div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv"></div>
<div class="twodiv"></div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="twodiv"></div>
<div class="twodiv"></div>
</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">1侧门</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">1</div>
<div class="fourdiv">3</div>
<div class="fourdiv">5</div>
<div class="fourdiv">7</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">1</div>
<div class="fourdiv">3</div>
<div class="fourdiv">5</div>
<div class="fourdiv">7</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">1</div>
<div class="fourdiv">3</div>
<div class="fourdiv">5</div>
<div class="fourdiv">7</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">8</div>
<div class="fourdiv">6</div>
<div class="fourdiv">4</div>
<div class="fourdiv">2</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">8</div>
<div class="fourdiv">6</div>
<div class="fourdiv">4</div>
<div class="fourdiv">2</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">8</div>
<div class="fourdiv">6</div>
<div class="fourdiv">4</div>
<div class="fourdiv">2</div>
</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">2侧门</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">2</div>
<div class="fourdiv">4</div>
<div class="fourdiv">6</div>
<div class="fourdiv">8</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">2</div>
<div class="fourdiv">4</div>
<div class="fourdiv">6</div>
<div class="fourdiv">8</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">2</div>
<div class="fourdiv">4</div>
<div class="fourdiv">6</div>
<div class="fourdiv">8</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">7</div>
<div class="fourdiv">5</div>
<div class="fourdiv">3</div>
<div class="fourdiv">1</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">7</div>
<div class="fourdiv">5</div>
<div class="fourdiv">3</div>
<div class="fourdiv">1</div>
</div></el-col>
<el-col :span="59"><div class="demoCol">
<div class="fourdiv">7</div>
<div class="fourdiv">5</div>
<div class="fourdiv">3</div>
<div class="fourdiv">1</div>
</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">交流输出电压</div></el-col>
<el-col :span="59"><div class="demoCol">378</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
<el-col :span="59"><div class="demoCol">--</div></el-col>
<el-col :span="59"><div class="demoCol">-</div></el-col>
<el-col :span="59"><div class="demoCol">-</div></el-col>
<el-col :span="59"><div class="demoCol">378</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">空压机状态</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol"></div></el-col>
<el-col :span="59"><div class="demoCol"></div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">停放制动施加状态</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">7.85 bar</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">7.9 bar</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">7.8 bar</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">7.85 bar</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">7.85 bar</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}">7.85 bar</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">HSCB状态</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}"></div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}"></div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}"></div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}"></div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
</el-row>
<el-row class="demoRow" >
<el-col :span="59"><div class="demoCol">牵引脉冲使能</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}"></div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol">-- --</div></el-col>
<el-col :span="59"><div class="demoCol" :style="{backgroundColor:'#00ff00',color:'#000'}"></div></el-col>
</el-row>
</div>
</template>
@ -18,10 +219,7 @@ export default {
},
data() {
return {
voltage:"750V",
current:"0A",
level:"",
speed:"km/h",
}
},
mounted() {
@ -48,48 +246,43 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.tmsfault{
position: absolute;
// border-style:solid;
// border-color: #ffffff;
top:7%;
width:100%;
height:84%;
color:white;
}
.tmsvoltage{
top:7%;
left:3%;
width: 15%;
position: absolute;
top:95px;
left:15px;
width:420px;
height:180px;
text-align: center;
// border-style:solid;
// border-color: #ffffff;
}
.tmscurrent{
top:7%;
left:19%;
width: 15%;
position: absolute;
text-align: center;
// border-style:solid;
// border-color: #ffffff;
.demoRow{
}
.tmslevel{
top:7%;
left:60%;
width: 20%;
position: absolute;
text-align: center;
// border-style:solid;
// border-color: #ffffff;
.demoCol{
width:60px;
height:15px;
color:#fff;
font-size: 9px;
border:solid 1px #fff;
background-color: #000;
}
.tmsspeed{
top:7%;
left:82%;
width: 15%;
position: absolute;
text-align: center;
// border-style:solid;
// border-color: #ffffff;
.twodiv{
width:28.9px;
height:15px;
float:left;
// position: absolute;
border-right:solid 0.5px #fff;
margin: auto;
}
.fourdiv{
width:12px;
height:13px;
margin:1px;
float:left;
// position: absolute;
// border-right:solid 0.5px #fff;
background-color: #00ff00;
color:#000;
}
</style>

367
src/views/jlmap3d/drive/sceneview/tmsview.vue
View File

@ -1,7 +1,65 @@
<template>
<div class = "tms" :style="{'background-image': 'url('+localStatic+'/jl3d/tms.png)'}" >
<div class = "tmsdiv" >
<div class="tmstopdiv">
<div class="tmstopdivchild" style="left:0">
运行
</div>
<div :id="topmsg.id" class="tmstopdivchild" v-for="(topmsg,index) in trainData" :style="{left:topmsg.left+'px',width:topmsg.width+'px'}">
<div class="tmstopmsg" style="top:0" :style="{width:topmsg.width+'px'}">
{{topmsg.name}}
</div>
<div class="tmstopmsg" style="bottom:0" :style="{width:topmsg.width+'px',color:topmsg.color,backgroundColor:topmsg.bgcolor}">
{{topmsg.value1}}{{topmsg.value2}}
</div>
</div>
<div class="tmstopdivchild" style="right:30px;font-size:10px">
<div id="tmstime" style="width:100%;height:20px;position:absolute;top:0;font-size:10px">
</div>
<div id="tmstimeupdate" style="width:100%;height:20px;position:absolute;bottom:0;font-size:10px">
</div>
</div>
<div class="tmstopdivchild" style="width:30px;right:0px"></div>
</div>
<div style="position:absolute;width:340px;height:25px;left:70px;top:70px;background-repeat:no-repeat;background-size:100% 100%"
:style="{backgroundImage: 'url(' + trainStatusPng + ')' }"/>
<div class="tractionText" :style="{color:trainData[3].bgcolor}">
{{trainData[3].value2}}
</div>
<div style="position:absolute;width:55px;height:150px;right:10px;top:110px;background-repeat:no-repeat;background-size:100% 100%"
:style="{backgroundImage: 'url(' + trainSpeedPng + ')' }">
<div class="tractionPlane" :style="{height:tractionHeight+'px',backgroundColor:trainData[3].bgcolor}"></div>
<div class="speedPlane" :style="{height:speedHeight+'px'}"></div>
</div>
<div class="speedText">
{{trainData[2].value2}}
</div>
<Tms-Fault>
</Tms-Fault>
<div class="tmsdowndiv">
<div class="tmsdowndivmsg" style="top:0;">
<div class="tmsdownbutton"
v-for="(button1,indexbt1) in buttonList1"
:style="{left:button1.left+'px',backgroundColor:button1.bgcolor}">
{{button1.name}}
</div>
</div>
<div class="tmsdowndivmsg" style="bottom:0;border:solid 0.5px #fff">
<div class="tmsdownbutton"
v-for="(button2,indexbt2) in buttonList2"
:style="{left:button2.left+'px',backgroundColor:button2.bgcolor}">
{{button2.name}}
</div>
</div>
</div>
</div>
@ -10,6 +68,8 @@
<script>
import axios from 'axios';
import { prefixIntrger } from '@/utils/date';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
import TmsFault from '@/views/jlmap3d/drive/sceneview/tmscomponent/tmsfault';
@ -22,6 +82,147 @@ export default {
data() {
return {
localStatic:JL3D_LOCAL_STATIC,
timer: '',
speedHeight:0,
tractionHeight:0,
trainData: [
{
id:"voltage",
width:48,
left:48,
name:"网压",
value1:"",
value2:"1600 V",
color:"#0000FF",
bgcolor:"#000",
},
{
id:"electricity",
width:48,
left:96,
name:"网流",
value1:"",
value2:"317 A",
color:"#0000FF",
bgcolor:"#000",
},
{
id:"v",
width:48,
left:144,
name:"速度",
value1:"",
value2:"0 km/h",
color:"#0000FF",
bgcolor:"#000",
},
{
id:"traction",
width:66,
left:192,
name:"牵引/制动级位",
value1:"",
value2:"0 %",
color:"#fff",
bgcolor:"#000",
},
{
id:"kilm",
width:48,
left:258,
name:"里程标",
value1:"",
value2:"---",
color:"#0000FF",
bgcolor:"#000",
},
{
id:"nextStation",
width:48,
left:306,
name:"下一站",
value1:"",
value2:"XXX",
color:"#0000FF",
bgcolor:"#000",
},
{
id:"lastStation",
width:48,
left:354,
name:"目的站",
value1:"",
value2:"XXX",
color:"#0000FF",
bgcolor:"#000",
}
],
trainStatusPng:JL3D_LOCAL_STATIC+'/jl3d/tms/PMsa2.png',
trainSpeedPng:JL3D_LOCAL_STATIC+'/jl3d/tms/PMS3.png',
buttonList1:[
{
name:"ATO模式",
left:"5",
bgcolor:"#00FF00",
},
{
name:"网络模式",
left:"65",
bgcolor:"#00FF00",
},
{
name:"紧急广播",
left:"245",
bgcolor:"#fff",
},
{
name:"报站设定",
left:"325",
bgcolor:"#fff",
},
],
buttonList2:[
{
name:"主菜单",
left:"5",
bgcolor:"#fff",
},
{
name:"运行",
left:"65",
bgcolor:"#0000FF",
},
{
name:"制动状态",
left:"125",
bgcolor:"#fff",
},
{
name:"牵引状态",
left:"185",
bgcolor:"#fff",
},
{
name:"辅助状态",
left:"245",
bgcolor:"#fff",
},
{
name:"旁路状态",
left:"305",
bgcolor:"#fff",
},
{
name:"空调状态",
left:"365",
bgcolor:"#fff",
},
{
name:"帮助",
left:"425",
bgcolor:"#fff",
}
],
}
},
beforeDestroy() {
@ -29,13 +230,78 @@ export default {
},
watch: {
},
methods: {
'$store.state.training.initTime': function (initTime) {
let date = new Date(initTime);
this.timer = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}:${prefixIntrger(date.getSeconds(), 2)}`;
document.getElementById("tmstimeupdate").innerHTML = this.timer;
}
},
mounted() {
this.time();
window.updatetmsstatus = this.updatetmsstatus;
},
methods: {
time(){
let vDay;
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
document.getElementById("tmstime").innerHTML = year + "/" + month + "/" + day ;
},
updatetmsstatus(newdata){
if(newdata.v || newdata.v == 0){
this.trainData[2].value2 = parseInt(newdata.v)+" km/h";
this.speedHeight = newdata.v/80*149;
}
if(newdata.forcePercent){
// console.log(newdata.forcePercent);
this.trainData[3].value2 = newdata.forcePercent+"%";
this.tractionHeight = newdata.forcePercent/100*149;
}
if(newdata.tow){
if(newdata.tow == "1"){
this.trainData[3].value1 = "牵引 ";
this.trainData[3].color = "#000";
this.trainData[3].bgcolor = "#00FF00";
// this.c1image = this.images.c1["qianyin"];
}
if(newdata.tow == "2"){
// this.c1image = this.images.c1["zhidong"];
this.trainData[3].value1 = "制动 ";
this.trainData[3].color = "#fff";
this.trainData[3].bgcolor = "#FF0000";
}
if(newdata.tow == "3"){
// this.c1image = this.images.c1["duoxing"];
this.trainData[3].value1 = "惰行 ";
this.trainData[3].color = "#fff";
this.trainData[3].bgcolor = "#000";
}
if(newdata.tow == "4"){
// this.c1image = this.images.c1["none"];
this.trainData[3].value1 = "";
this.trainData[3].color = "#fff";
this.trainData[3].bgcolor = "#000";
}
}
if(newdata.nextStation){
this.trainData[5].value2 = newdata.nextStation;
}
if(newdata.endStation){
this.trainData[6].value2 = newdata.endStation;
}
},
},
beforeDestroy() {
}
@ -45,14 +311,101 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.tms{
.tmsdiv{
width:500px;
height:333px;
background-size:100% 100%;
background-color: #000;
position:absolute;
bottom:0;
left:0;
// border: 0.1px solid #ffffff;
}
.tractionPlane{
width:15px;
position:absolute;
bottom:1px;
left:11px;
background-color: #00ff00;
}
.tractionText{
width:60px;
height:30px;
text-align: center;
position: absolute;
color: #00ff00;
font-size: 12px;
top:90px;
right:0;
}
.speedPlane{
width:15px;
position:absolute;
bottom:1px;
right:11px;
background-color: #00FFFF;
}
.speedText{
width:60px;
height:30px;
text-align: center;
position: absolute;
color: #00FFFF;
font-size: 12px;
top:270px;
right:0;
}
.tmstopdiv{
width:480px;
height:60px;
top:3px;
left:10px;
position: absolute;
text-align: center;
}
.tmstopdivchild{
width:48px;
height:60px;
border:solid 0.5px #fff;
position: absolute;
color:#fff;
}
.tmstopmsg{
// width:100%;
height:50%;
position: absolute;
font-size:10px;
border:solid 0.5px #fff;
// font-weight:30px;
font-weight: 900;
}
.tmsdowndiv{
width:490px;
height:50px;
position:absolute;
text-align: center;
left:5px;
bottom:0;
font-size: 13px;
line-height: 20px;
}
.tmsdowndivmsg{
width:490px;
height:25px;
position:absolute;
}
.tmsdownbutton{
width:55px;
height:20px;
position: absolute;
top:2px;
color:#000;
background-color: #fff;
border:solid 0.5px #fff;
}
</style>

84
src/views/jlmap3d/lesson3dplayer/lesson3dplayer.vue
View File

@ -70,19 +70,34 @@
@changeCameraPos="changeCameraPos">
</Tool-Bar>
<Result-Tips
:examStatus='examStatus'
ref="rtui">
</Result-Tips>
<div id="lesson3ddraw" class="lesson3ddraw">
</div>
</div>
<div class="lessondowndiv"
:style="{'background-image': 'url('+lessonbg+')'}">
<div class="lessondowndivroommsg"
:style="{'background-image': 'url('+lessonbg+')'}">
房间编号:1
</div>
<div class="lessondowndivmsg"
:style="{'background-image': 'url('+lessonbg+')'}"
v-show = "endExam"
@click="showResult">
考试成绩分析
</div>
<div class="lessondowndivmsg"
:style="{'background-image': 'url('+lessonbg+')'}">
考试计时:{{this.playTime.h}}:{{this.playTime.m}}:{{this.playTime.s}}
考试计时:{{this.lastPlayTime}}
</div>
<div class="lessondowndivmsg"
:style="{'background-image': 'url('+lessonbg+')'}">
@ -103,6 +118,7 @@
import localStore from 'storejs';
// import AssetsModel from '@/views/jlmap3d/lesson3dedit/component/assetsmodel';
import ResultTips from '@/views/jlmap3d/lesson3dplayer/tools/resulttips';
import StepTips from '@/views/jlmap3d/lesson3dplayer/tools/stepstips';
import ProcessLog from '@/views/jlmap3d/lesson3dplayer/tools/processlog';
@ -130,7 +146,8 @@
ProcessLog,
ExplainPane,
JobPane,
ToolBar
ToolBar,
ResultTips
},
data() {
return {
@ -151,6 +168,10 @@
s:0,
},
time:'',
ms:0,
lastPlayTime:"",
endExam:false,
examResultShow:false,
showSelectJob:true,
lessonMsg:{},
selectJobList:[],
@ -207,6 +228,7 @@
window.actionEvent = this.actionEvent;
window.startLesson = this.startLesson;
window.updataExamStatus = this.updataExamStatus;
window.lessonEnd = this.lessonEnd;
this.init(this.$route.query.lessonId);
},
beforeDestroy() {
@ -245,13 +267,14 @@
this.lessonData.loadLessonProgress(loadData.lessonProgress);
}else{
this.lessonData.initLessonProgress();
this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
this.jl3d.initNowRole();
}
console.log("loaddata----------------");
console.log(loadData);
console.log(this.lessonMsg);
// console.log("loaddata----------------");
// console.log(loadData);
// console.log(this.lessonMsg);
this.jl3d = new Lesson3dPlayer(dom,loadData,this.lessonPlayIndex);
}).catch(() => {
});
@ -259,6 +282,16 @@
updataExamStatus(newExamStatus){
this.examStatus = newExamStatus;
},
lessonEnd(){
this.endExam = true;
this.showResult();
this.examStatus.time = this.lastPlayTime;
this.stopTime();
},
showResult(){
this.$refs.rtui.showdiv();
},
selectJob(job){
this.showSelectJob = false;
for(let i=0;i<this.jobPaneData.dataList.length;i++){
@ -267,35 +300,32 @@
console.log(this.nowRole);
this.lessonMsg.userJob = job;
this.jl3d.initNowRole(this.nowRole);
this.timeStart();
}
}
},
timeStart(){
this.time =setInterval(this.timer,50)
this.time =setInterval(this.timer,100)
},
timer () {//定义计时函数
// this.ms =this.ms +50 //毫秒
// if (this.ms >=1000) {
// this.ms =0
// this.second =this.second +1 //秒
// }
//
// if (this.second >=60) {
// this.second =0
// this.minute =this.minute +1 //分钟
// }
//
// if (this.minute >=60) {
// this.minute =0
// this.hour =this.hour +1 //小时
// }
// this.str =this.toDub(this.hour) +':' +this.toDub(this.minute) +':' +this.toDub(this.second)/*+""+this.toDubms(this.ms)+"毫秒"*/
//
// this.playTime.s = parseInt(count % 60);
// this.playTime.m = parseInt(count / 60) % 60;
// this.playTime.h = parseInt(count / 60 / 60);
this.ms =this.ms +100 //毫秒
if (this.ms >=1000) {
this.ms =0
this.playTime.s =this.playTime.s +1 //秒
}
if (this.playTime.s >=60) {
this.playTime.s =0;
this.playTime.m =this.playTime.m +1 //分钟
}
if (this.playTime.m >=60) {
this.playTime.m;
this.playTime.h =this.playTime.h +1 //小时
}
this.lastPlayTime =this.toDub(this.playTime.h) +':' +this.toDub(this.playTime.m) +':' +this.toDub(this.playTime.s)/*+""+this.toDubms(this.ms)+"毫秒"*/
},
toDub (n) {//补0操作
if (n <10) {

71
src/views/jlmap3d/lesson3dplayer/tools/actiontips.vue
View File

@ -1,71 +0,0 @@
<template>
<div class="stepstipsdiv" >
<div class="stepstipstittle" >
{{tipsTittle}}
</div>
<div class="stepstipstext" >
{{tipsText}}
</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//操作提示
export default {
name: 'ActionTips',
components: {
},
data() {
return {
tipsTittle:"步骤一",
tipsText:"步骤一",
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.stepstipsdiv {
position: absolute;
width: 20%;
height: 20%;
left:0;
top:0;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.stepstipstittle{
text-align: center;
font-size: 20px;
}
.stepstipstext{
font-size: 16px;
}
</style>

4
src/views/jlmap3d/lesson3dplayer/tools/explainpane.vue
View File

@ -81,7 +81,7 @@
.explainpanetittle{
// height:15%;
text-align: center;
font-size: 25px;
font-size: 20px;
}
.explainpanepic{
@ -97,7 +97,7 @@
position:relative;
left:5%;
width:90%;
font-size: 20px;
font-size: 18px;
// height:20%;
}

119
src/views/jlmap3d/lesson3dplayer/tools/resulttips.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<div class="stepstipsdiv"
:style="{'background-image': 'url('+lessonbg+')'}"
v-show="divshow">
<div class="resultTittleDiv">考试成绩</div>
<div class="resultMsgDiv">
<div v-for="(examItem,index) in examStatus.trueStep" style="width:100%;height:10%">
<div>
{{examItem.explainPane.tittle}}
</div>
<div>
得分:10分
</div>
</div>
<div>
总成绩:{{examStatus.lastScore}}分
</div>
<div>
考试用时:{{examStatus.time}}
</div>
</div>
<div class="resultCloseDiv" @click="closediv">关闭窗口</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//操作提示
export default {
name: 'ResultTips',
props:['examStatus'],
components: {
},
data() {
return {
divshow:false,
lessonbg:JL3D_LOCAL_STATIC+"/lesson3d/lessonbg.png",
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
showdiv(){
this.divshow = true;
},
closediv(){
this.divshow = false;
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.stepstipsdiv {
position: absolute;
width: 60%;
height: 80%;
left:20%;
top:10%;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.resultTittleDiv{
width:60%;
height:40px;
font-size: 40px;
color:#fff;
position: absolute;
left:20%;
top:5%;
text-align: center;
}
.resultMsgDiv{
width:90%;
height:70%;
font-size: 20px;
color:#fff;
position: absolute;
left:5%;
top:15%;
border:solid 2px #000;
overflow:auto;
}
.resultCloseDiv{
width:40%;
height:30px;
font-size: 25px;
color:#fff;
position: absolute;
text-align: center;
left:30%;
bottom:5%;
border:solid 2px #000;
}
</style>

4
src/views/jlmap3d/lesson3dplayer/tools/stepstips.vue
View File

@ -70,10 +70,10 @@
}
.stepstipstittle{
text-align: center;
font-size: 25px;
font-size: 20px;
}
.stepstipstext{
font-size: 20px;
font-size: 18px;
}

BIN
static/jl3d/tms/PMS3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/jl3d/tms/PMsa2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB