535 lines
20 KiB
Vue
535 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<chat-box :group="group" :user-role="userRole" />
|
||
<!-- <div class="btn_hover" @mouseenter="btnHover"><i class="el-icon-s-promotion" /></div> -->
|
||
<!-- @mouseenter="btnBoxEnter" @mouseleave.stop="btnBoxLeave" -->
|
||
<div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01', 'haerbin_btn_box': $route.query.lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}">
|
||
<el-button-group class="button-group-box">
|
||
<el-button v-if="project==='refereeJsxt'" type="success" size="small" @click="refeeEndCompetition">退出</el-button>
|
||
<el-button v-if="project!=='jsxt'&&project!=='refereeJsxt'" type="primary" :loading="backLoading" size="small" @click="back">退出</el-button>
|
||
<template v-if="isAdmin && project != 'refereeJsxt'">
|
||
<el-button type="danger" :disabled="dataError" size="small" @click="end">{{ $t('joinTraining.initialize') }}</el-button>
|
||
<el-button type="success" :disabled="isDisable || dataError" size="small" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
|
||
</template>
|
||
<template v-if="project==='jsxt'">
|
||
<div style="background: #FFF;display: inline-block;height: 40px;line-height: 40px;padding: 0 5px;border: 2px solid #F00;border-radius: 6px;margin-right: 8px;">{{ '剩余时间:' + countdownTime }}</div>
|
||
<el-button :disabled="!jsStart" type="success" size="small" @click="startCompetition">开始</el-button>
|
||
<el-button :disabled="jsStart" type="danger" size="small" @click="endCompetition">提交</el-button>
|
||
</template>
|
||
<!-- 设备视图 -->
|
||
<el-button v-if="isShow3dmodel && isShowScheduling && !dataError" size="small" @click="jumpjlmap3dmodel">{{ $t('display.demon.deviceView') }}</el-button>
|
||
<!-- 三维视图 / 司机视角 -->
|
||
<el-button v-if="(isShowScheduling && !dataError) || (isDriver && !dataError)" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
|
||
<!-- cctv视图 -->
|
||
<el-button v-if="(isShowScheduling && !dataError) || (isStationSupervisor && !dataError)" size="small" @click="jumpjl3dpassflow">{{ $t('display.demon.passengerflow') }}</el-button>
|
||
<el-button v-if="isAdmin && !noQrcodeList.includes(project)" type="primary" size="small" @click="generateQrCode">生成二维码</el-button>
|
||
<el-button v-if="isAdmin" size="small" @click="memberManage">成员管理</el-button>
|
||
<el-button v-if="isAdmin && isProject" size="small" @click="handleEquipment">设备管理</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<qr-code ref="qrCode" />
|
||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||
<equipment ref="equipment" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QrCode from '@/components/QrCode';
|
||
import ChatBox from './chatView/chatBox';
|
||
import Equipment from '@/views/newMap/displayNew/demon/equipment';
|
||
import SetTime from '@/views/newMap/displayNew/demon/setTime';
|
||
import { ranAsPlan, exitRunPlan, clearSimulation } from '@/api/simulation';
|
||
import { exitFullscreen } from '@/utils/screen';
|
||
import { getSimulationQrcode } from '@/api/jointSimulation';
|
||
import { getSessionStorage } from '@/utils/auth';
|
||
import { refereeExitSimulation, quitCurrentRace, startPracticalCompetition, submitPracticalCompetition } from '@/api/competition';
|
||
import { NoQrcodeList } from '@/scripts/ProjectConfig';
|
||
import { prefixIntrger } from '@/utils/date';
|
||
import localStore from 'storejs';
|
||
|
||
export default {
|
||
name: 'MenuDemonJoint',
|
||
components: {
|
||
ChatBox,
|
||
QrCode,
|
||
SetTime,
|
||
Equipment
|
||
},
|
||
props: {
|
||
group: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
userRole: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
countdownTime: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
deviceCode: {
|
||
type: String,
|
||
default() {
|
||
return '';
|
||
}
|
||
},
|
||
dataError: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
isAdmin: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
offsetBottom: {
|
||
type: [String, Number],
|
||
default: 15
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isDisable: false,
|
||
backLoading: false,
|
||
chatShow: true,
|
||
jsStart: true,
|
||
isGoback: false,
|
||
noQrcodeList: NoQrcodeList,
|
||
isShow3dmodel :false,
|
||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||
hoverBtn: false
|
||
};
|
||
},
|
||
computed: {
|
||
lineCode() {
|
||
return this.$route.query.lineCode;
|
||
},
|
||
isShowScheduling() {
|
||
// 行调与管理员 可显示
|
||
return (this.$store.state.training.prdType == '02' || this.isAdmin) && !this.$route.query.projectDevice;
|
||
},
|
||
isSpeaking() {
|
||
return this.userRole != 'DRIVER' && this.userRole != '';
|
||
},
|
||
isStationSupervisor() {
|
||
return this.userRole == 'STATION_SUPERVISOR' && !this.$route.query.projectDevice;
|
||
},
|
||
isDriver() {
|
||
return this.userRole == 'DRIVER' && !this.$route.query.projectDevice;
|
||
},
|
||
project() {
|
||
return getSessionStorage('project');
|
||
},
|
||
isProject() {
|
||
return getSessionStorage('project') != 'login' && getSessionStorage('project') != 'design';
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.socket.roleList': function (roleList) { // 综合演练室用户消息
|
||
if (roleList && roleList.length) {
|
||
this.$nextTick(() => {
|
||
this.addrolesList(roleList);
|
||
this.$store.dispatch('config/updateMenuBar');
|
||
});
|
||
}
|
||
},
|
||
'$store.state.socket.simulationStart': async function (val) {
|
||
if (val) {
|
||
this.$store.dispatch('training/setInitTime', +new Date(val));
|
||
this.$store.dispatch('training/simulationStart', { start: true});
|
||
}
|
||
},
|
||
'$store.state.map.runPlanStatus': function (val) {
|
||
this.isDisable = val;
|
||
},
|
||
'$store.state.socket.simulationOver':function(val) {
|
||
if (val && this.project == 'refereeJsxt') {
|
||
this.$router.go(-1);
|
||
} else {
|
||
if (!this.isGoback) {
|
||
this.back();
|
||
}
|
||
}
|
||
},
|
||
'$store.state.training.prdType': function(prdType) {
|
||
this.change3dname();
|
||
}
|
||
},
|
||
async mounted() {
|
||
this.change3dname();
|
||
},
|
||
beforeDestroy() {
|
||
this.$store.dispatch('training/setGroup', '');
|
||
if (this.project === 'jsxt') {
|
||
quitCurrentRace(this.$route.query.raceId, {group:this.group}).then(res=>{
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
// 设置用户角色 Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 MAINTAINER 通号
|
||
addrolesList(list) {
|
||
list.forEach(item => {
|
||
if (this.$store.state.user.id == item.id) {
|
||
switch (item.userRole) {
|
||
case 'INSTRUCTOR':
|
||
this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'INSTRUCTOR');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'DISPATCHER':
|
||
this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'DISPATCHER');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'STATION_SUPERVISOR':
|
||
if (!item['deviceCode']) {
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
|
||
break;
|
||
}
|
||
this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'CI':
|
||
this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'CI');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'DRIVER':
|
||
this.$store.dispatch('training/setPrdType', '04'); this.$store.dispatch('training/setRoles', 'DRIVER');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'MAINTAINER':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'MAINTAINER');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'IBP':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'IBP');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'BIGSCREEN':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'BIGSCREEN');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
default:
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
if (this.$refs.chatView) {
|
||
this.$refs.chatView.getUserRole();
|
||
}
|
||
},
|
||
selectBeginTime() {
|
||
this.$refs.setTime.doShow();
|
||
},
|
||
// 开始仿真
|
||
start(model) {
|
||
this.isDisable = true;
|
||
const data = {
|
||
time: model.initTime
|
||
};
|
||
ranAsPlan(data, this.group).then(res => {
|
||
this.$store.dispatch('training/simulationStart').then(() => {
|
||
if (this.project == 'jsxt') {
|
||
this.jsStart = false;
|
||
}
|
||
this.$store.dispatch('map/setRunPlanStatus', true);
|
||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
|
||
});
|
||
}).catch((error) => {
|
||
this.isDisable = false;
|
||
if (error.code == '5001') {
|
||
this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5002') {
|
||
this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5003') {
|
||
this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5004') {
|
||
this.$messageBox(this.$t('error.runningDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5000') {
|
||
this.$messageBox(this.$t('error.systemError') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4000') {
|
||
this.$messageBox(this.$t('error.simulationDoesNotExist') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4001') {
|
||
this.$messageBox(this.$t('error.simulationOperationIsNotDefined') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4002') {
|
||
this.$messageBox(this.$t('error.simulationOperationProcessingMethodNotFound') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4003') {
|
||
this.$messageBox(this.$t('error.simulationOperationFailed') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4004') {
|
||
this.$messageBox(this.$t('error.operationConflict') + ',' + this.$t('error.startSimulationFailed'));
|
||
}
|
||
});
|
||
},
|
||
end() {
|
||
this.isDisable = false;
|
||
// EventBus.$emit('trainView');
|
||
exitRunPlan(this.group).then(()=>{
|
||
this.$store.dispatch('map/setRunPlanStatus', false);
|
||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||
this.$store.dispatch('map/resetActiveTrainList');
|
||
}).catch(() => {
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.isDisable = true;
|
||
this.$store.dispatch('map/resetActiveTrainList');
|
||
this.$messageBox(this.$t('error.endSimulationFailed'));
|
||
});
|
||
});
|
||
},
|
||
handleEquipment() {
|
||
this.$refs.equipment.doShow();
|
||
},
|
||
async back() {
|
||
this.isGoback = true;
|
||
if (this.isAdmin) {
|
||
await clearSimulation(this.group);
|
||
}
|
||
this.$store.dispatch('training/setMemberList', {memberList:[], userId: this.$store.state.user.id});
|
||
this.$store.dispatch('training/setSimulationUserList', []);
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.backLoading = true;
|
||
this.$store.dispatch('map/resetActiveTrainList');
|
||
if (this.$route.query.projectDevice) {
|
||
this.$store.dispatch('LogOut').then(() => {
|
||
location.reload();
|
||
});
|
||
} else {
|
||
history.go(-1);
|
||
exitFullscreen();
|
||
}
|
||
});
|
||
},
|
||
jumpjlmap3d() {
|
||
this.$emit('hidepanel');
|
||
},
|
||
jlmap3dcctv() {
|
||
this.$emit('hidejl3dcctv');
|
||
},
|
||
jumpjl3dpassflow() {
|
||
this.$emit('passflow');
|
||
},
|
||
jumpjlmap3dmodel() {
|
||
this.$emit('devicemodel');
|
||
},
|
||
startCompetition() {
|
||
startPracticalCompetition(this.group, this.$route.query.raceId).then(resp => {
|
||
this.$emit('startCounting');
|
||
this.jsStart = false;
|
||
}).catch(()=> {
|
||
this.$message.error('开始竞赛失败');
|
||
});
|
||
},
|
||
endCompetition() {
|
||
this.$confirm('此操作将结束并提交本次竞赛，是否继续', this.$t('global.tips'), {
|
||
confirmButtonText: this.$t('global.confirm'),
|
||
cancelButtonText: this.$t('global.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.submit();
|
||
});
|
||
},
|
||
// 竞赛退出
|
||
refeeEndCompetition() {
|
||
refereeExitSimulation(this.group).then(resp => {
|
||
this.$router.replace({ path: `/refereeJsxt/home`, query: { raceId: this.$route.query.raceId } });
|
||
}).catch(()=> {
|
||
this.$message.success('退出系统失败');
|
||
});
|
||
},
|
||
// 竞赛提交
|
||
submit() {
|
||
submitPracticalCompetition(this.group, this.$route.query.raceId).then(resp => {
|
||
const storeKey = this.$store.state.user.id + '' + this.$route.query.raceId + 'practical';
|
||
localStore.remove(storeKey);
|
||
this.$router.replace({ path: `/jsxt/result`, query: { subSystem: this.$route.query.subSystem, mapId: this.$route.query.mapId, type: 'operate', raceId:this.$route.query.raceId } });
|
||
}).catch(()=> {
|
||
this.$message.error('提交试卷失败！');
|
||
});
|
||
},
|
||
memberManage() {
|
||
this.$emit('handlerMemberManage');
|
||
},
|
||
generateQrCode() {
|
||
getSimulationQrcode(this.$route.query.group).then(resp => {
|
||
const param = {
|
||
url: resp.data,
|
||
title: this.$t('综合演练二维码'),
|
||
group: this.$route.query.group
|
||
};
|
||
if (this.$refs) {
|
||
this.$refs.qrCode.doShow(param);
|
||
}
|
||
}).catch(() => {
|
||
this.$messageBox('仿真生成二维码失败！');
|
||
});
|
||
},
|
||
change3dname() {
|
||
if (this.$store.state.training.prdType == '04') {
|
||
this.jl3dname = this.$t('display.demon.driverPerspective'); // 司机视角
|
||
} else {
|
||
this.jl3dname = this.$t('display.demon.threeDimensionalView'); // 三维视图
|
||
this.isShow3dmodel = true;
|
||
}
|
||
}
|
||
// btnHover() {
|
||
// if (!this.btnHoverTime) {
|
||
// this.btnHoverTime = setTimeout(() => {
|
||
// this.hoverBtn = false;
|
||
// }, 8000)
|
||
// }
|
||
// this.hoverBtn = true;
|
||
// },
|
||
// btnBoxEnter() {
|
||
// if (this.btnHoverTime) {
|
||
// clearTimeout(this.btnHoverTime);
|
||
// this.btnHoverTime = null;
|
||
// }
|
||
// if (this.btnBoxLeaveTime) {
|
||
// clearTimeout(this.btnBoxLeaveTime);
|
||
// this.btnBoxLeaveTime = null;
|
||
// }
|
||
// },
|
||
// btnBoxLeave() {
|
||
// if (!this.btnBoxLeaveTime) {
|
||
// this.btnBoxLeaveTime = setTimeout(() => {
|
||
// this.hoverBtn = false;
|
||
// }, 5000)
|
||
// }
|
||
// }
|
||
}
|
||
};
|
||
</script>
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import "src/styles/mixin.scss";
|
||
.tabs-roles {
|
||
overflow: hidden;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
|
||
.roles {
|
||
padding: 0 20px;
|
||
height: 41px;
|
||
list-style: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
cursor: pointer;
|
||
border-left: 1px solid #e4e7ed;
|
||
border-right: 1px solid #e4e7ed;
|
||
float: left;
|
||
}
|
||
|
||
.roles-first {
|
||
border-right: none;
|
||
}
|
||
|
||
.roles-active {
|
||
border-bottom-color: #fff;
|
||
color: #409EFF;
|
||
}
|
||
|
||
}
|
||
|
||
.tabs-content {
|
||
height: 300px;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.display-score {
|
||
background-color: black;
|
||
display: -moz-inline-box;
|
||
display: inline-block;
|
||
text-align: left;
|
||
height: 32px;
|
||
line-height: 24px;
|
||
border-radius: 4px;
|
||
padding-left: 2px;
|
||
margin-left: 10px;
|
||
font-family: "Microsoft" !important;
|
||
font-size: 18px !important;
|
||
color: #fff;
|
||
}
|
||
|
||
.reminder-drag {
|
||
position: absolute;
|
||
float: left;
|
||
left: 10px;
|
||
bottom: 10px;
|
||
width: 500px;
|
||
height: 340px;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
font-size: 18px;
|
||
|
||
/deep/ {
|
||
.el-tabs__header {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.title-bar {
|
||
height: 40px;
|
||
}
|
||
|
||
.content {
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.btn_hover{
|
||
position: absolute;
|
||
right: -2px;
|
||
bottom: 15px;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
background: #1756e4;
|
||
padding: 8px 2px;
|
||
border-radius: 5px;
|
||
}
|
||
.display-draft {
|
||
position: absolute;
|
||
// float: right;
|
||
right: 10px;
|
||
bottom: 28px;
|
||
// transform: translateX(calc(100% + 40px));
|
||
// transition: all 0.5s;
|
||
// &.active{
|
||
// transform: translateX(0);
|
||
// }
|
||
button {
|
||
float: right!important;
|
||
}
|
||
.button-group-box{
|
||
float: right;
|
||
}
|
||
/deep/ .el-button-group>.el-button:last-child {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-top-left-radius: 4px;
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
/deep/ .el-button-group>.el-button:first-child{
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
}
|
||
.haerbin_btn_box{
|
||
width: 450px;
|
||
bottom: 15px!important;
|
||
}
|
||
.display-type-hb{
|
||
bottom: 105px;
|
||
}
|
||
</style>
|