365 lines
13 KiB
Vue
365 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="isAllShow" class="display_top_draft" :style="allStyle">
|
|
<div class="btn_hover" @click="menuClick">菜单</div>
|
|
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
|
|
<!-- 地图错误判断 -->
|
|
<template v-if="project === 'bjd'">
|
|
<el-button size="small" @click="passengersView">客流视图</el-button>
|
|
<el-button v-if="running" size="small" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
|
|
<el-button v-if="!running" size="small" type="warning" @click="loadRunPlan">{{ $t('joinTraining.runGraphLoading') }}</el-button><!-- 运行图加载 -->
|
|
</template>
|
|
<!-- 设备视图 -->
|
|
<el-button v-if="jl3dmodelShow && !isContest && project !== 'bjd'" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button>
|
|
<!-- 三维视图/数字沙盘 -->
|
|
<el-button v-if="jl3dnameShow && !isContest && project !== 'bjd'" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
|
|
<!-- cctv视图 -->
|
|
<el-button v-if="cctvShow && !isContest && project !== 'bjd'" size="small" @click="jumpjl3dpassflow">{{ jl3dpassflow }}</el-button>
|
|
<!-- 客流规划视图 -->
|
|
<!-- <el-button v-if="trafficplanShow && project == 'bjd' && !isContest" size="small" @click="jumpjl3dtrafficplan">{{ jl3dtrafficplan }}</el-button>
|
|
<el-button v-if="trafficplanShow && project == 'bjd' && !isContest" size="small" @click="jumpjl3dtraffictrain">{{ $t('display.demon.traffictraintext') }}</el-button> -->
|
|
|
|
<!-- 故障设备视图 -->
|
|
<el-button v-if="jlmap3dFaultShow" size="small" @click="jumpjlmap3dFault">故障设备</el-button>
|
|
<!-- 司机视角 -->
|
|
<el-button v-if="driverShow" size="small" type="jumpjlmap3d" @click="jumpjlmap3dDriver">司机视角</el-button>
|
|
<!-- 排班计划 -->
|
|
<el-button v-if="scheduleLoadShow" type="primary" size="small" @click="jumpScheduling">派班计划加载</el-button>
|
|
<el-button v-if="schedulePreviewShow" type="primary" size="small" @click="schedulingView">派班计划预览</el-button>
|
|
<el-button v-if="isContest" size="small" :disabled="practiceDisabled" @click="fieldPractice">实操练习</el-button>
|
|
<!-- <el-button v-if="isContest" size="small" @click=" fieldTeach">实操教学</el-button> -->
|
|
<!-- <el-button v-if="isContest" size="small" @click=" fieldExam">实操测验</el-button> -->
|
|
<el-button v-if="isContest" size="small" @click="goTheoryQuiz">理论考试</el-button>
|
|
<el-button v-if="project === 'bjd'" size="small" @click="distribute">权限分发</el-button>
|
|
<el-button v-if="isContest || project === 'bjd'" size="small" @click="messageBoardShow">留言板</el-button>
|
|
<el-button v-if="isContest || project === 'bjd'" size="small" @click="contectUs">联系方式</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<Jl3d-Device
|
|
v-if="deviceShow"
|
|
ref="Jl3dDevice"
|
|
:panel-show="deviceShow"
|
|
@closedevice3dview="jumpjlmap3dmodel"
|
|
/>
|
|
<distribute-draft ref="distribute" @QrCodeShow="QrCodeShow" />
|
|
<Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
|
|
<scheduling v-if="scheduleLoadShow" ref="scheduling" :group="group" />
|
|
<scheduling-view v-if="schedulePreviewShow" ref="schedulingView" :group="group" />
|
|
<qr-code ref="qrCode" />
|
|
<message-board ref="messageBoard" />
|
|
<contect-us ref="contectUs" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
|
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
|
import { getToken } from '@/utils/auth';
|
|
import { getSessionStorage } from '@/utils/auth';
|
|
import Scheduling from '@/views/newMap/displayNew/demon/scheduling';
|
|
import SchedulingView from '@/views/newMap/displayNew/demon/schedulingView';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
import DistributeDraft from '@/views/components/limits/distribute';
|
|
import QrCode from '@/components/QrCode';
|
|
import MessageBoard from './demon/messageBoard';
|
|
import ContectUs from '@/views/newMap/displayNew/dispatherContest/contectUs';
|
|
import { PermissionType } from '@/scripts/ConstDic';
|
|
export default {
|
|
name:'DemonMenu',
|
|
components:{
|
|
Jl3dDevice,
|
|
Jl3dDrive,
|
|
Scheduling,
|
|
SchedulingView,
|
|
DistributeDraft,
|
|
QrCode,
|
|
ContectUs,
|
|
MessageBoard
|
|
},
|
|
props:{
|
|
isAllShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
jl3dmodelShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
jl3dnameShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
cctvShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
trafficplanShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
traffictrainShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
scheduleLoadShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
driverShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
schedulePreviewShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
jlmap3dFaultShow:{
|
|
type:Boolean,
|
|
require:true
|
|
},
|
|
allStyle:{
|
|
type:String,
|
|
default() {
|
|
return '';
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
hoverBtn: false,
|
|
btnWidth: 0,
|
|
group:'',
|
|
mapId:'',
|
|
lineCode:'',
|
|
practiceDisabled:false,
|
|
deviceShow: false,
|
|
drivingShow: false,
|
|
jl3dtrafficplan:this.$t('display.demon.trafficplantext'),
|
|
jl3dtraffictrain:this.$t('display.demon.traffictraintext'),
|
|
jl3dpassflow:this.$t('display.demon.passengerflow'),
|
|
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
|
jl3dmodel: this.$t('display.demon.deviceView'),
|
|
openWindow:null
|
|
};
|
|
},
|
|
computed:{
|
|
isDrive() {
|
|
return this.$route.query.prdType == '04';
|
|
},
|
|
project() {
|
|
return getSessionStorage('project');
|
|
},
|
|
isContest() {
|
|
return this.$route.params.mode === 'demon' && this.project == 'drts';
|
|
},
|
|
running() {
|
|
return this.$store.state.training.started;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.group = this.$route.query.group;
|
|
this.mapId = this.$route.query.mapId;
|
|
this.lineCode = this.$route.query.lineCode;
|
|
EventBus.$on('loadScene', () => {
|
|
this.practiceDisabled = true;
|
|
});
|
|
EventBus.$on('quitScene', () => {
|
|
this.practiceDisabled = false;
|
|
});
|
|
},
|
|
methods:{
|
|
menuClick() {
|
|
this.hoverBtn = !this.hoverBtn;
|
|
if (this.hoverBtn) {
|
|
// this.$refs.button_group_box.$el.clientWidth ||
|
|
this.btnWidth = 600; // 默认宽度
|
|
} else {
|
|
// button_group_box
|
|
this.btnWidth = 0;
|
|
}
|
|
},
|
|
jumpjlmap3dmodel() {
|
|
if (this.deviceShow == false) {
|
|
this.deviceShow = true;
|
|
} else {
|
|
this.deviceShow = false;
|
|
}
|
|
},
|
|
showdriving() {
|
|
this.drivingShow = false;
|
|
},
|
|
jumpjlmap3d() {
|
|
const routeData = this.$router.resolve({
|
|
path:'/jlmap3d/sandbox',
|
|
query:{
|
|
mapid:this.mapId,
|
|
group:this.group,
|
|
token:getToken(),
|
|
project: this.project,
|
|
noPreLogout: true
|
|
}
|
|
});
|
|
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
|
},
|
|
jumpjl3dpassflow() {
|
|
const routeData = this.$router.resolve({
|
|
path:'/jlmap3d/passengerflow',
|
|
query:{
|
|
mapid:this.mapId,
|
|
group:this.group,
|
|
project: this.project,
|
|
noPreLogout: true,
|
|
lineCode:this.lineCode
|
|
}
|
|
});
|
|
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
|
},
|
|
// jumpjl3dtrafficplan() {
|
|
// const routeData = this.$router.resolve({
|
|
// path:'/jlmap3d/trafficplan',
|
|
// query:{
|
|
// mapid:this.mapId,
|
|
// group:this.group,
|
|
// project: this.project,
|
|
// noPreLogout: true,
|
|
// lineCode:this.lineCode
|
|
// }
|
|
// });
|
|
// window.open(routeData.href, '_blank', 'noopener noreferrer');
|
|
// },
|
|
// jumpjl3dtraffictrain() {
|
|
// const routeData = this.$router.resolve({
|
|
// path:'/jlmap3d/traffictrain',
|
|
// query:{
|
|
// mapid:this.mapId,
|
|
// group:this.group,
|
|
// project: this.project,
|
|
// noPreLogout: true,
|
|
// lineCode:this.lineCode
|
|
// }
|
|
// });
|
|
// window.open(routeData.href, '_blank', 'noopener noreferrer');
|
|
// },
|
|
jumpjlmap3dFault() {
|
|
const routeData = this.$router.resolve({
|
|
path:'/jlmap3d/maintainer',
|
|
query:{
|
|
mapid:this.mapId,
|
|
group:this.group,
|
|
token:getToken(),
|
|
project: this.project,
|
|
noPreLogout: true
|
|
}
|
|
});
|
|
window.open(routeData.href);
|
|
},
|
|
jumpjlmap3dDriver() {
|
|
this.drivingShow = true;
|
|
this.$refs.Jl3dDrive.show(this.mapId, this.group);
|
|
},
|
|
jumpScheduling() {
|
|
this.$refs.scheduling.doShow();
|
|
},
|
|
schedulingView() {
|
|
this.$refs.schedulingView.doShow();
|
|
},
|
|
hideScheduling(running) {
|
|
if (running) {
|
|
this.$refs.scheduling && this.$refs.scheduling.doClose();
|
|
} else {
|
|
this.$refs.schedulingView && this.$refs.schedulingView.doClose();
|
|
}
|
|
},
|
|
fieldPractice() {
|
|
this.$emit('fieldPractice');
|
|
},
|
|
viewRunPlan() {
|
|
const routeData = this.$router.resolve({
|
|
path:'/planSchedule/window',
|
|
query:{
|
|
mapId:this.$route.query.mapId,
|
|
group:this.$route.query.group,
|
|
lineCode: this.$route.query.lineCode,
|
|
project: this.$route.query.project,
|
|
noPreLogout: true,
|
|
initTime: this.$store.state.training.initTime
|
|
}
|
|
});
|
|
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
|
},
|
|
passengersView() {
|
|
if (this.openWindow) {
|
|
this.openWindow.close();
|
|
}
|
|
const routeData = this.$router.resolve({
|
|
path:'/practiceDisplay',
|
|
query:{
|
|
mapId:this.$route.query.mapId,
|
|
group:this.$route.query.group,
|
|
lineCode: this.$route.query.lineCode,
|
|
project: this.$route.query.project,
|
|
noPreLogout: true
|
|
// initTime: this.$store.state.training.initTime
|
|
}
|
|
});
|
|
// this.openWindow = window.open(routeData.href, '_blank', 'noopener noreferrer');
|
|
this.openWindow = window.open(routeData.href);
|
|
},
|
|
loadRunPlan() {
|
|
this.$emit('runPlanLoadShow');
|
|
},
|
|
goTheoryQuiz() {
|
|
this.$emit('goTheoryQuiz');
|
|
},
|
|
QrCodeShow(data) {
|
|
if (this.$refs && data) {
|
|
this.$refs.qrCode.doShow(data);
|
|
}
|
|
},
|
|
distribute() {
|
|
if (this.$refs) {
|
|
this.$refs.distribute.doShow({PermissionType:PermissionType.SIMULATION, mapId: this.$route.query.mapId, prdType: this.$route.query.prdType});
|
|
}
|
|
},
|
|
messageBoardShow() {
|
|
this.$refs.messageBoard.doShow();
|
|
},
|
|
contectUs() {
|
|
this.$refs.contectUs.doShow();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.display_top_draft{
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 15px;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
padding-left: 44px;
|
|
z-index: 35;
|
|
.btn_hover{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
color: #4e4d4d;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
padding: 8px;
|
|
border-radius: 5px;
|
|
display: block;
|
|
cursor: pointer;
|
|
float: left;
|
|
height: 32px;
|
|
}
|
|
.button_group_box{
|
|
float: left;
|
|
transition: all 0.5s;
|
|
overflow: hidden;
|
|
margin-left: -700px;
|
|
// transform: translateX(0px);
|
|
}
|
|
}
|
|
</style>
|