代码调整
This commit is contained in:
joylink_cuiweidong
parent
6b37a216cb
commit
599bf4f722
@ -56,6 +56,7 @@
|
||||
|
||||
<training-tip v-if="trainingId" ref="trainingTip" />
|
||||
<training-position-tip v-if="trainingId" ref="trainingPositionTip" />
|
||||
<training-menu v-if="trainingDetail" ref="trainingMenu" :offset-bottom="offsetBottom" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -95,6 +96,7 @@ import ExamPanel from './exam/examPanel';
|
||||
import TrainingList from './trainingList/index.vue';
|
||||
import TrainingTip from './trainingList/trainingTip.vue';
|
||||
import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
|
||||
import TrainingMenu from './trainingList/trainingMenu';
|
||||
|
||||
export default {
|
||||
name: 'SimulationMenu',
|
||||
@ -125,7 +127,8 @@ export default {
|
||||
MemberManage,
|
||||
TrainingList,
|
||||
TrainingTip,
|
||||
TrainingPositionTip
|
||||
TrainingPositionTip,
|
||||
TrainingMenu
|
||||
// StatusIcon
|
||||
},
|
||||
props: {
|
||||
@ -145,6 +148,7 @@ export default {
|
||||
playerList: [],
|
||||
isScriptLoad: false,
|
||||
mapLocation: {},
|
||||
offsetBottom: 15,
|
||||
userRole: 'AUDIENCE',
|
||||
menuMap: {
|
||||
demon: [
|
||||
@ -480,6 +484,9 @@ export default {
|
||||
},
|
||||
teachMode() {
|
||||
return this.$store.state.trainingNew.teachMode;
|
||||
},
|
||||
trainingDetail() {
|
||||
return this.$store.state.trainingNew.trainingDetail;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -521,10 +528,14 @@ export default {
|
||||
}
|
||||
this.$store.dispatch('trainingNew/setTrainingDetail', detailResp.data);
|
||||
this.$store.dispatch('trainingNew/setTrainingScore', '');
|
||||
loadPublishTraining(this.group, this.trainingId, {mode: this.teachMode});
|
||||
this.$message.success('加载实训成功！');
|
||||
loadPublishTraining(this.group, this.trainingId, {mode: this.teachMode}).then(resp=>{
|
||||
console.log('加载实训成功！');
|
||||
}).catch((error)=>{
|
||||
this.$messageBox(error.message);
|
||||
});
|
||||
// this.$message.success('加载实训成功！');
|
||||
}).catch(()=>{
|
||||
this.$message.error('加载实训失败！');
|
||||
this.$messageBox('加载实训失败！');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
101
src/views/newMap/display/trainingList/scenePlayRole.vue
Normal file
101
src/views/newMap/display/trainingList/scenePlayRole.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="角色扮演"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
append-to-body
|
||||
:before-close="doClose"
|
||||
center
|
||||
>
|
||||
<template v-for="user in userList">
|
||||
<div :key="user.id" style="display: flex;justify-content: space-between;">
|
||||
<div>{{ user.nickName }}</div>
|
||||
<el-select v-model="user.memberId" size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="commit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {covertMemberData} from '@/views/newMap/displayNew/utils';
|
||||
import { assignUsersPlayRoles } from '@/api/jointSimulation';
|
||||
export default {
|
||||
name: 'ScenePlayRole',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
userList: [],
|
||||
roleList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
trainingDetail() {
|
||||
return this.$store.state.trainingNew.trainingDetail;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.simulationUserList': function(val) {
|
||||
this.userList = [];
|
||||
this.$store.state.training.simulationUserList.forEach(user => {
|
||||
this.userList.push({id: user.userId, nickName: user.nickName, memberId: ''});
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$store.state.training.simulationUserList && this.$store.state.training.simulationUserList.length) {
|
||||
this.userList = [];
|
||||
this.$store.state.training.simulationUserList.forEach(user => {
|
||||
this.userList.push({id: user.userId, nickName: user.nickName, memberId: ''});
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
doShow() {
|
||||
const playerList = JSON.parse(this.trainingDetail.playerIdJson);
|
||||
const memberData = this.$store.state.training.memberData;
|
||||
const activeTrainList = this.$store.state.map.activeTrainList || [];
|
||||
const newMemberData = {};
|
||||
playerList.forEach(playerId => {
|
||||
newMemberData[playerId] = memberData[playerId];
|
||||
});
|
||||
const result = covertMemberData(activeTrainList, Object.values(newMemberData));
|
||||
let list = [];
|
||||
result.deviceListData.forEach(item => {
|
||||
list = list.concat(item);
|
||||
});
|
||||
this.roleList = list;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
commit() {
|
||||
const list = [];
|
||||
this.userList.forEach(user => {
|
||||
list.push({userId: user.id, memberId: user.memberId});
|
||||
});
|
||||
assignUsersPlayRoles(list, this.$route.query.group).then(resp => {
|
||||
this.$emit('startTraining');
|
||||
this.doClose();
|
||||
}).catch(() => {
|
||||
this.$message.error('扮演角色失败！');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
308
src/views/newMap/display/trainingList/trainingMenu.vue
Normal file
308
src/views/newMap/display/trainingList/trainingMenu.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<!-- v-drag 拖拽 调整宽高 -->
|
||||
<div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
|
||||
<div ref="drapBox" class="reminder-box">
|
||||
<div class="tip-title">
|
||||
<div>
|
||||
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
|
||||
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
|
||||
<i v-show="!isShrink && !trainingSwitch && trainingDetail" class="icon el-icon-video-play" @click="handlerStart" />
|
||||
<i v-show="!isShrink && trainingSwitch" class="icon el-icon-switch-button" @click="handlerEnd" />
|
||||
</div>
|
||||
<p style="color: #fff;">
|
||||
<span>{{ trainingDetail.name }}</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">{{ trainingDetail.name }}</span>
|
||||
</p>
|
||||
<p v-if="demoMode === TrainingMode.TEST" class="list-item">
|
||||
<span class="list-label">{{ $t('display.lesson.score') }}</span>
|
||||
<span class="list-elem">{{ trainingScore }}</span>
|
||||
</p>
|
||||
<p class="list-item">
|
||||
<span class="list-label">实训模式：</span>
|
||||
<span class="list-elem">
|
||||
<el-radio-group v-model="demoMode" :disabled="trainingSwitch" class="mode" size="small" @change="changeMode">
|
||||
<el-radio :label="TrainingMode.TEACH" border>{{ $t('display.lesson.teachingMode') }}</el-radio>
|
||||
<el-radio :label="TrainingMode.PRACTICE" border>{{ $t('display.lesson.practiceMode') }}</el-radio>
|
||||
<el-radio :label="TrainingMode.TEST" border>{{ $t('display.lesson.testMode') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</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">{{ trainingDetail.description }}</span>
|
||||
</p>
|
||||
<p class="list-item">
|
||||
<span class="list-label">操作按钮：</span>
|
||||
<span class="list-elem">
|
||||
<el-button v-if="!trainingSwitch && trainingDetail" size="small" type="success" @click="handlerStart">开始</el-button>
|
||||
<el-button v-if="trainingSwitch" size="small" type="danger" @click="handlerEnd">结束</el-button>
|
||||
</span>
|
||||
</p>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="drag-right" />
|
||||
<div class="drag-left" />
|
||||
<div class="drag-bottom" />
|
||||
<div class="drag-top" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scene-play-role ref="scenePlayRole" @startTraining="startTraining" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ScriptMode } from '@/scripts/ConstDic';
|
||||
import { clearSimulation } from '@/api/simulation';
|
||||
import { startTraining, endTraining } from '@/api/jmap/training';
|
||||
import ScenePlayRole from './scenePlayRole';
|
||||
|
||||
export default {
|
||||
name: 'TipTrainingDetail',
|
||||
components: {
|
||||
ScenePlayRole
|
||||
},
|
||||
props: {
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShrink: true,
|
||||
showSumbit: false,
|
||||
demoMode: ScriptMode.TEACH,
|
||||
TrainingMode: ScriptMode
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
trainingSwitch() {
|
||||
return this.$store.state.trainingNew.trainingSwitch;
|
||||
},
|
||||
trainingScore() {
|
||||
return this.$store.state.trainingNew.trainingScore;
|
||||
},
|
||||
trainingDetail() {
|
||||
return this.$store.state.trainingNew.trainingDetail;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
teachMode() {
|
||||
return this.$store.state.trainingNew.teachMode;
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
loadInitData() {
|
||||
this.showSumbit = false;
|
||||
},
|
||||
shrink() {
|
||||
if (this.isShrink) {
|
||||
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`;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
changeMode(val) {
|
||||
this.demoMode = val;
|
||||
this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
|
||||
},
|
||||
handlerStart() {
|
||||
if (this.trainingDetail.type === 'SCENE') {
|
||||
this.$refs.scenePlayRole.doShow();
|
||||
} else {
|
||||
this.startTraining();
|
||||
}
|
||||
},
|
||||
startTraining() {
|
||||
this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
|
||||
startTraining(this.group, {mode: this.demoMode}).then(() => {
|
||||
this.$store.dispatch('trainingNew/trainingStart');
|
||||
this.$store.dispatch('trainingNew/setTrainingScore', '');
|
||||
}).catch(() => {
|
||||
this.$message.error('开始实训失败！');
|
||||
});
|
||||
},
|
||||
handlerEnd() {
|
||||
endTraining(this.group).then((resp) => {
|
||||
this.$store.dispatch('trainingNew/trainingEnd');
|
||||
this.$store.dispatch('socket/clearTrainingStepTip');
|
||||
this.$store.dispatch('trainingNew/clearStepOrder');
|
||||
this.$store.dispatch('trainingNew/clearOperateOrder');
|
||||
this.$store.dispatch('trainingNew/setTrainingScore', resp.data);
|
||||
}).catch(() => {
|
||||
this.$message.error('结束实训失败！');
|
||||
});
|
||||
},
|
||||
back() {
|
||||
if (this.group) {
|
||||
clearSimulation(this.group);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.tip-body-box {
|
||||
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>
|
||||
@ -13,10 +13,10 @@
|
||||
<i class="el-icon-user" />
|
||||
<span class="teachMenuTitle" :style="{color: $route.path.includes('studentManage')?'#5BDBFF': '#000'}">学生管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="6" @click="clickMenu">
|
||||
<!-- <el-menu-item index="6" @click="clickMenu">
|
||||
<img :src="ruleIcon" class="teachMenu">
|
||||
<span class="teachMenuTitle" :style="{color: $route.path.includes('trainingDesign')?'#5BDBFF': '#000'}">实训设计</span>
|
||||
</el-menu-item>
|
||||
</el-menu-item> -->
|
||||
<el-menu-item index="7" @click="clickMenu">
|
||||
<img :src="ruleIcon" class="teachMenu">
|
||||
<span class="teachMenuTitle" :style="{color: $route.path.includes('trainingManage')?'#5BDBFF': '#000'}">实训管理</span>
|
||||
@ -98,9 +98,11 @@ export default {
|
||||
this.$router.replace('/teaching/organization/ruleManage');
|
||||
} else if (val.index === '5') {
|
||||
this.$router.replace('/teaching/organization/studentManage');
|
||||
} else if (val.index === '6') {
|
||||
this.$router.push('/teaching/organization/trainingDesign'); //
|
||||
} else if (val.index === '7') {
|
||||
}
|
||||
// else if (val.index === '6') {
|
||||
// this.$router.push('/teaching/organization/trainingDesign'); //
|
||||
// }
|
||||
else if (val.index === '7') {
|
||||
this.$router.replace('/teaching/organization/trainingManage'); //
|
||||
} else if (val.index === '8') {
|
||||
this.$router.replace('/teaching/organization/theoryManage');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user