实训预览暂提
This commit is contained in:
fan
parent
a2b5b7bdda
commit
0d5efd0941
@ -118,6 +118,7 @@ const MapPreviewNew = () => import('@/views/designPlatform/mapPreviewNew');
|
||||
const BigScreen = () => import('@/views/designPlatform/bigScreen');
|
||||
const BigSplitScreen = () => import('@/views/designPlatform/bigSplitScreen');
|
||||
const TrainingDesign = () => import('@/views/designPlatform/trainingDesign');
|
||||
const TrainingPreview = () => import('@/views/designPlatform/trainingPreview');
|
||||
const TestRunplan = () => import('@/views/designPlatform/testRunplan');
|
||||
|
||||
const Package = () => import('@/views/package/index');
|
||||
@ -485,6 +486,11 @@ export const publicAsyncRoute = [
|
||||
component: TrainingDesign,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/trainingPreview',
|
||||
component: TrainingPreview,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/jointTrainingNew',
|
||||
component: JointTrainingNew,
|
||||
|
||||
@ -93,6 +93,7 @@ export default {
|
||||
}
|
||||
},
|
||||
clickEvent(obj, data, ele) {
|
||||
console.log(obj.type, '----------');
|
||||
switch (obj.type) {
|
||||
case 'scriptDesign': {
|
||||
const query = {lineCode:obj.lineCode};
|
||||
@ -147,6 +148,19 @@ export default {
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'trainingPreview': {
|
||||
const data = { mapId: obj.mapId, prdType: '01' };
|
||||
createSimulationNew(data).then(resp => {
|
||||
if (this.loadingProjectList.includes(this.project)) {
|
||||
this.$store.dispatch('app/transitionAnimations');
|
||||
}
|
||||
const query = { ...data, group: resp.data, scriptId: obj.id, lineCode:obj.lineCode};
|
||||
this.$router.push({ path: `/trainingPreview`, query });
|
||||
}).catch(error => {
|
||||
this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
async refresh(filterSelect) {
|
||||
@ -230,7 +244,16 @@ export default {
|
||||
cityCode: elem.cityCode
|
||||
}
|
||||
);
|
||||
|
||||
elem.children.push(
|
||||
{
|
||||
id: '10',
|
||||
name: '实训预览',
|
||||
type: 'trainingPreview',
|
||||
mapId: elem.id,
|
||||
lineCode: elem.lineCode,
|
||||
cityCode: elem.cityCode
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
this.treeData = res.data;
|
||||
|
||||
158
src/views/designPlatform/leftSlider.vue
Normal file
158
src/views/designPlatform/leftSlider.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div id="leftSlider" class="left-slider">
|
||||
<div class="tip-title">
|
||||
<span>
|
||||
{{ $t('display.lesson.coursePracticeList') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="handleShow">
|
||||
<!-- {{ $t('display.lesson.unfold') }} -->
|
||||
<span v-if="show" class="el-icon-arrow-right" style="cursor:pointer" @click="handleSliderShow(true)">实训列表</span>
|
||||
<!-- {{ $t('display.lesson.fold') }} -->
|
||||
<span v-else class="el-icon-arrow-left" style="cursor:pointer" @click="handleSliderShow(false)">实训列表</span>
|
||||
</div>
|
||||
<div class="slider-tree">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" style="background: #fff;">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
style="margin-top: 10px"
|
||||
:data="treeList"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:span="22"
|
||||
default-expand-all
|
||||
@node-click="clickEvent"
|
||||
>
|
||||
<span slot-scope="{ node }">
|
||||
<span v-if="node.data.type === 'Training'" class="el-icon-goods" />
|
||||
<span v-if="node.data.id === trainingId" :style="{color: 'red'}"> {{ node.data.name }}</span>
|
||||
<span v-else-if="node.data.valid" :style="{color: 'green'}"> {{ node.data.name }}</span>
|
||||
<span v-else> {{ node.data.name }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPublishLessonTree } from '@/api/jmap/lesson';
|
||||
// import { trainingNotifyNew } from '@/api/simulation';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import { UrlConfig } from '@/scripts/ConstDic';
|
||||
export default {
|
||||
name: 'LeftSlider',
|
||||
props:{
|
||||
offsetBottom:{
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
treeList: [],
|
||||
defaultProps: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
trainingId () {
|
||||
return this.$route.query.trainingId;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadPage();
|
||||
// this.$nextTick(() => {
|
||||
// document.querySelector('.left-slider').style.height = document.querySelector('.left-slider').offsetHeight - this.offsetBottom + 'px';
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
initLoadPage() {
|
||||
/* getPublishLessonTree(this.$route.query.lessonId).then(response => {
|
||||
if (response.data.tree && response.data.tree.length > 0) {
|
||||
this.treeList = response.data.tree;
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(this.$t('tip.failedCourse') + ':' + error.message);
|
||||
});*/
|
||||
},
|
||||
handleSliderShow(flag) {
|
||||
this.$emit('overallTranslation', flag);
|
||||
const slider = document.getElementById('leftSlider');
|
||||
if (flag) {
|
||||
slider.style.transform = 'translateX(0)';
|
||||
this.show = false;
|
||||
} else {
|
||||
slider.style.transform = '';
|
||||
this.show = true;
|
||||
}
|
||||
},
|
||||
clickEvent(obj, node, ele) {
|
||||
if (obj && obj.type === 'Training') {
|
||||
if (obj.valid) {
|
||||
this.disabled = true;
|
||||
// trainingNotifyNew({ trainingId: obj.id }).then(resp => {
|
||||
const query = {
|
||||
group: this.$route.query.group, trainingId: obj.id, lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, lineCode:this.$route.query.lineCode, noPreLogout: this.$route.query.noPreLogout
|
||||
};
|
||||
this.$router.replace({ path: `${UrlConfig.displayNew}/teach`, query: query });
|
||||
launchFullscreen();
|
||||
// }).catch(error => {
|
||||
// this.$messageBox(`${this.$t('tip.createSimulationFaild')} : ${error.message}`);
|
||||
// this.disabled = false;
|
||||
// });
|
||||
} else {
|
||||
this.$confirm(this.$t('tip.accessCourseNo'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('tip.confirm'),
|
||||
cancelButtonText: this.$t('tip.cancel')
|
||||
}).then(() => {
|
||||
// this.buy();
|
||||
}).catch(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.left-slider{
|
||||
z-index: 10;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateX(-400px);
|
||||
}
|
||||
.slider-tree{
|
||||
height: calc(100% - 40px);
|
||||
border: 2px solid #409EFF;
|
||||
}
|
||||
.handleShow{
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
top: 50%;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 3px;
|
||||
box-shadow: 3px 1px 5px #000;
|
||||
padding: 3px;
|
||||
}
|
||||
.tip-title {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-color: #409EFF;
|
||||
border-radius: 5px 5px 0 0;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
305
src/views/designPlatform/tipTrainingDetail.vue
Normal file
305
src/views/designPlatform/tipTrainingDetail.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<!-- v-drag 拖拽 调整宽高 -->
|
||||
<div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
|
||||
<div ref="drapBox" class="reminder-box">
|
||||
<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 v-if="isShrink" class="reminder-box-content">
|
||||
<div class="zhezhao" />
|
||||
<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" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
|
||||
<span class="list-elem elem-span">{{ courseModel.remarks }}</span>
|
||||
</p>
|
||||
<p class="list-item">
|
||||
<span class="list-label">当前操作：</span>
|
||||
<span class="list-elem">{{ courseModel.minDuration }}</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>-->
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="drag-right" />
|
||||
<div class="drag-left" />
|
||||
<div class="drag-bottom" />
|
||||
<div class="drag-top" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getPublishLessonDetail } from '@/api/jmap/lesson';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
|
||||
export default {
|
||||
name: 'TipTrainingDetail',
|
||||
props: {
|
||||
trainingObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
isShrink: true,
|
||||
lessonName: '',
|
||||
courseModel: {
|
||||
id: '',
|
||||
name: '',
|
||||
maxDuration: '',
|
||||
minDuration: '',
|
||||
remarks: '',
|
||||
updateTime: ''
|
||||
},
|
||||
showSumbit: false,
|
||||
lessonIndex: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('trainingList', [
|
||||
'trainingList'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'trainingObj': function (val) {
|
||||
if (val) {
|
||||
this.courseModel = {
|
||||
id: val.id,
|
||||
name: val.name,
|
||||
maxDuration: val.maxDuration,
|
||||
minDuration: val.minDuration,
|
||||
remarks: val.remarks,
|
||||
updateTime: val.updateTime
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData(this.$route.query);
|
||||
},
|
||||
methods: {
|
||||
loadInitData(obj) {
|
||||
this.showSumbit = false;
|
||||
this.lessonName = '';
|
||||
this.courseModel = {
|
||||
id: '',
|
||||
name: '',
|
||||
maxDuration: '',
|
||||
minDuration: '',
|
||||
remarks: '',
|
||||
updateTime: ''
|
||||
};
|
||||
|
||||
if (parseInt(obj.lessonId)) {
|
||||
// getPublishLessonDetail({ id: obj.lessonId }).then(response => {
|
||||
// this.lessonName = response.data.name;
|
||||
// }).catch(error => {
|
||||
// this.$message.error(this.$t('display.training.getCourseInformationFail') + ':' + error.message);
|
||||
// });
|
||||
}
|
||||
},
|
||||
jump(obj) {
|
||||
const query = {
|
||||
group: this.$route.query.group,
|
||||
trainingId: this.$route.query.trainingId,
|
||||
lessonId: this.$route.query.lessonId
|
||||
};
|
||||
this.$router.push({ path: `/display/${this.$route.params.mode}`, query: query });
|
||||
launchFullscreen();
|
||||
},
|
||||
shrink() {
|
||||
// const height = this.$refs.dragBody.offsetHeight + 40;
|
||||
// const top = this.$refs.drapBox.style.top;
|
||||
if (this.isShrink) {
|
||||
//
|
||||
// this.$refs.drapBox.style.height = '40px';
|
||||
// this.$refs.drapBox.style.top = '';
|
||||
this.isShrink = false;
|
||||
} else {
|
||||
this.isShrink = true;
|
||||
this.$nextTick(()=>{
|
||||
const dragDom = document.querySelector('.reminder-drag').style.bottom;
|
||||
if (document.body.clientHeight - 300 - parseInt(dragDom.replace('px', '')) < 0) {
|
||||
document.querySelector('.reminder-drag').style.bottom = `${document.body.clientHeight - 300}px`;
|
||||
}
|
||||
});
|
||||
// this.$refs.drapBox.style.height = height + 'px';
|
||||
// this.$refs.drapBox.style.top = top;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.tip-body-box {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reminder-drag{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.elem-span{
|
||||
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);
|
||||
position:absolute;
|
||||
}
|
||||
.reminder-box-content{
|
||||
width: 500px;
|
||||
height: 260px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: rgba(255,255,255,0.8);
|
||||
position: relative;
|
||||
}
|
||||
.reminder-box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
|
||||
.tip-title {
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
background-color: rgba(64, 158, 255,1);
|
||||
border-radius: 5px 5px 0 0;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.drag-right,
|
||||
.drag-left {
|
||||
width: 10px;
|
||||
cursor: e-resize;
|
||||
background-color: yellow;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.drag-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag-top {
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: s-resize;
|
||||
background-color: yellow;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tip-body {
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
|
||||
.list-label {
|
||||
width: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-foot {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0 10px 10px;
|
||||
|
||||
.foot-detail {
|
||||
height: 100%;
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.foot-submit {
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #d6e5f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
186
src/views/designPlatform/trainingPreview.vue
Normal file
186
src/views/designPlatform/trainingPreview.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="train">
|
||||
<div v-show="maskOpen" class="trainMask" />
|
||||
<jlmap-visual ref="jlmapVisual" />
|
||||
<menu-demon ref="menuDemon" />
|
||||
<voice-chat-box v-if="$route.query.lineCode == '16'" ref="chatbox" :group="group" :user-role="userRole" />
|
||||
<chat-box v-else ref="chatbox" :group="group" :user-role="userRole" />
|
||||
<tip-training-detail :training-obj="trainingObj" :offset-bottom="offsetBottom" />
|
||||
<left-slider :offset-bottom="offsetBottom" @overallTranslation="overallTranslation" />
|
||||
<div class="trainBack">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="back">返回</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
||||
import {loadMapDataById } from '@/utils/loaddata';
|
||||
import { clearSimulation } from '@/api/simulation';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import chatBox from '@/views/newMap/chatView/chatBox.vue';
|
||||
import VoiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
|
||||
import MenuDemon from '@/views/trainingManage/demonMenu.vue';
|
||||
import LeftSlider from './leftSlider';
|
||||
import TipTrainingDetail from './tipTrainingDetail';
|
||||
export default {
|
||||
name: 'TrainingDesign',
|
||||
components: {
|
||||
JlmapVisual,
|
||||
MenuDemon,
|
||||
chatBox,
|
||||
VoiceChatBox,
|
||||
LeftSlider,
|
||||
TipTrainingDetail
|
||||
},
|
||||
props: {
|
||||
widthLeft: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
trainingObj: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maskOpen: false,
|
||||
offsetBottom: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
userRole() {
|
||||
let role = 'AUDIENCE';
|
||||
switch (this.$store.state.training.prdType) {
|
||||
case '02': { role = 'DISPATCHER'; break; }
|
||||
case '01': { role = 'STATION_SUPERVISOR'; break; }
|
||||
case '04': { role = 'DRIVER'; break; }
|
||||
case '05': { role = 'DEPOT_DISPATCHER'; break; }
|
||||
default: { role = 'AUDIENCE'; break; }
|
||||
}
|
||||
return role;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.$nextTick(() => {
|
||||
this.initLoadData();
|
||||
});
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount':function() {
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
if (this.$route.query.group && !this.$route.path.includes('displayIscs')) {
|
||||
this.subscribe();
|
||||
}
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length && this.$route.query.group) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
this.backOut();
|
||||
}
|
||||
},
|
||||
async beforeDestroy() {
|
||||
await this.$store.dispatch('map/mapClear');
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('training/setPrdType', '01');
|
||||
this.setWindowSize();
|
||||
this.initLoadData();
|
||||
},
|
||||
methods: {
|
||||
initLoadData() { // 加载地图数据
|
||||
if (this.$route.query.group) {
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
} else {
|
||||
this.$store.dispatch('training/changeMode', { mode: null });
|
||||
loadMapDataById(this.mapId, 'preview');
|
||||
}
|
||||
},
|
||||
overallTranslation(flag) {
|
||||
const panel = document.getElementById('leftSlider');
|
||||
if (flag) {
|
||||
panel.style.transform = 'translateX(400px)';
|
||||
} else {
|
||||
panel.style.transform = '';
|
||||
}
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
},
|
||||
async back() {
|
||||
if (this.$route.query.group) {
|
||||
await clearSimulation(this.$route.query.group);
|
||||
this.clearSubscribe();
|
||||
}
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
history.go(-1);
|
||||
});
|
||||
},
|
||||
backOut() {
|
||||
if (this.$route.query.projectDevice) {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
},
|
||||
async subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
|
||||
// await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.train {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.trainMask{
|
||||
opacity: 1;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
.trainBack {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 19;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user