This commit is contained in:
fan 2020-04-14 15:46:36 +08:00
commit 4bbc0d648f
4 changed files with 90 additions and 50 deletions

View File

@ -10,7 +10,7 @@
<span v-else class="el-icon-arrow-left" @click="handleSliderShow(false)">{{ $t('display.lesson.fold') }}</span>
</div>
<div class="slider-tree">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-scrollbar wrap-class="scrollbar-wrapper" style="background: #fff;">
<el-tree
ref="tree"
style="margin-top: 10px"
@ -42,6 +42,12 @@ import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/scripts/ConstDic';
export default {
name: 'LeftSlider',
props:{
offsetBottom:{
type: Number,
required: true
}
},
data() {
return {
show: true,
@ -55,6 +61,9 @@ export default {
},
mounted() {
this.initLoadPage();
// this.$nextTick(() => {
// document.querySelector('.left-slider').style.height = document.querySelector('.left-slider').offsetHeight - this.offsetBottom + 'px';
// });
},
methods: {
initLoadPage() {
@ -70,10 +79,10 @@ export default {
this.$emit('overallTranslation', flag);
const slider = document.getElementById('leftSlider');
if (flag) {
slider.setAttribute('style', 'transform: translateX(0)');
slider.style.transform = 'translateX(0)';
this.show = false;
} else {
slider.setAttribute('style', '');
slider.style.transform = '';
this.show = true;
}
},
@ -83,9 +92,9 @@ export default {
this.disabled = true;
trainingNotifyNew({ trainingId: obj.id }).then(resp => {
const query = {
group: resp.data, trainingId: obj.id, lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId
group: resp.data, trainingId: obj.id, lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, lineCode:this.$route.query.lineCode
};
this.$router.push({ path: `${UrlConfig.displayNew}/teach`, query: query });
this.$router.replace({ path: `${UrlConfig.displayNew}/teach`, query: query });
launchFullscreen();
}).catch(error => {
this.$messageBox(`${this.$t('tip.createSimulationFaild')} : ${error.message}`);
@ -123,7 +132,11 @@ export default {
position: absolute;
left: 400px;
top: 50%;
color: #fff;
background: #fff;
color: #000;
border-radius: 3px;
box-shadow: 3px 1px 5px #000;
padding: 3px;
}
.tip-title {
width: 100%;

View File

@ -67,7 +67,7 @@
</div>
<!-- <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" /> -->
<left-slider v-if="isShowLeftSlider" @overallTranslation="overallTranslation" />
<left-slider v-if="isShowLeftSlider" :offset-bottom="offsetBottom" @overallTranslation="overallTranslation" />
<Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @showdevice="showdevice" />
<Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
@ -584,12 +584,12 @@ export default {
});
},
overallTranslation(flag) {
const panel = document.getElementById('panel');
const panel = document.getElementById('leftSlider');
this.$refs.lessonMenu.handelGroupButtonTranslate(flag);
if (flag) {
panel.setAttribute('style', 'transform: translateX(400px)');
panel.style.transform = 'translateX(400px)';
} else {
panel.setAttribute('style', '');
panel.style.transform = '';
}
},
switchStationMode(val) {

View File

@ -16,7 +16,7 @@
</div>
<div id="teachGroupButton" class="display-draft" :style="{bottom: offsetBottom + 'px'}">
<el-button-group>
<el-button type="success" :disabled="isDisable" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
<el-button type="success" class="start" :disabled="isDisable" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
<el-button type="danger" class="end" :disabled="!isDisable" @click="end">{{ $t('display.endBtn') }}</el-button>
<el-button type="primary" :disabled="backDisable" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
</el-button-group>
@ -111,6 +111,13 @@ export default {
this.isDisable = false;
},
'$store.state.map.mapViewLoadedCount': function (val) {
this.$store.dispatch('training/end', null);
this.$store.dispatch('training/reset');
this.$store.dispatch('training/emitTipFresh');
this.$store.dispatch('menuOperation/setButtonOperation', null);
this.isDisable = false;
},
'$store.state.training.operateErrMsg': function (val) {
this.tipInfo({ color: val.color, message: val.errMsg });
}
@ -216,12 +223,12 @@ export default {
}
},
handelGroupButtonTranslate(flag) {
const buttons = document.getElementById('teachGroupButton');
if (flag) {
buttons.setAttribute('style', 'transform: translateX(-400px)');
} else {
buttons.setAttribute('style', '');
}
// const buttons = document.getElementById('teachGroupButton');
// if (flag) {
// buttons.style.transform = 'translateX(-400px)';
// } else {
// buttons.style.transform = 'translateX(0px)';
// }
},
switchStationMode(val) {
this.$emit('switchStationMode', val);
@ -297,6 +304,8 @@ export default {
z-index: 100000;
}
.start,.end{z-index:2}
/deep/ .el-button {
font-weight: bold;
}

View File

@ -2,38 +2,41 @@
<!-- v-drag 拖拽 调整宽高 -->
<div v-quickMenuDrag class="reminder-drag">
<div ref="drapBox" class="reminder-box" :style="{bottom: offsetBottom + 'px'}">
<div class="tip-title">
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
<p v-if="isShrink" style="color: #fff;">
<span>{{ lessonName }}</span>
</p>
</div>
<div ref="dragBody" class="tip-body-box">
<div class="tip-body">
<el-scrollbar wrap-class="scrollbar-wrapper">
<p class="list-item">
<span class="list-label">{{ $t('display.training.trainingName') }}</span>
<span class="list-elem">{{ courseModel.name }}</span>
</p>
<p class="list-item">
<span class="list-label">{{ $t('display.training.bestTime') }}</span>
<span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>
</p>
<p class="list-item">
<span class="list-label">{{ $t('display.training.maximumTime') }}</span>
<span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
</p>
<p class="list-item">
<span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
<span class="list-elem elem-span">{{ courseModel.remarks }}</span>
</p>
</el-scrollbar>
<div class="zhezhao" />
<div class="reminder-box-content">
<div class="tip-title">
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
<p v-if="isShrink" style="color: #fff;">
<span>{{ lessonName }}</span>
</p>
</div>
<div ref="dragBody" class="tip-body-box">
<div class="tip-body">
<el-scrollbar wrap-class="scrollbar-wrapper">
<p class="list-item">
<span class="list-label">{{ $t('display.training.trainingName') }}</span>
<span class="list-elem">{{ courseModel.name }}</span>
</p>
<p class="list-item">
<span class="list-label">{{ $t('display.training.bestTime') }}</span>
<span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>
</p>
<p class="list-item">
<span class="list-label">{{ $t('display.training.maximumTime') }}</span>
<span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
</p>
<p class="list-item">
<span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
<span class="list-elem elem-span">{{ courseModel.remarks }}</span>
</p>
</el-scrollbar>
</div>
<div class="drag-right" />
<div class="drag-left" />
<div class="drag-bottom" />
<div class="drag-top" />
</div>
<div class="drag-right" />
<div class="drag-left" />
<div class="drag-bottom" />
<div class="drag-top" />
</div>
</div>
</div>
@ -163,6 +166,21 @@ export default {
display:inline-block;width:77%;line-height:26px;margin-top:-4px;
}
.zhezhao{
width: 100%;
height: 100%;
filter: blur(8px);
background: rgba(255,255,255,0.9);
}
.reminder-box-content{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
background: rgba(255,255,255,0.8);
}
.reminder-box {
position: absolute;
float: left;
@ -170,7 +188,7 @@ export default {
bottom: 15px;
width: 500px;
height: 300px;
background-color: #fff;
background: transparent;
border-radius: 5px;
overflow: hidden;
z-index: 10;
@ -183,7 +201,7 @@ export default {
display: flex;
align-items: center;
flex-direction: row-reverse;
background-color: #409EFF;
background-color: rgba(64, 158, 255,0.8);
border-radius: 5px 5px 0 0;
justify-content: space-between;
padding: 0 10px;