rt-sim-training-client/src/views/newMap/displayNew/demonMenu.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`">
        <!-- 地图错误判断 -->
        <!-- 设备视图 -->
        <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 && !isContest" size="small" @click="jumpjl3dtrafficplan">{{ jl3dtrafficplan }}</el-button>
        <el-button v-if="trafficplanShow && !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="isContest" size="small" @click="contectUs">联系方式</el-button>
        <el-button v-if="isContest" size="small" @click="messageBoardShow">留言板</el-button>
        <template v-if="project === 'bjd'">
          <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><!-- 运行图加载 -->
          <el-button size="small" @click="distribute">权限分发</el-button>
        </template>
      </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';
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')
        };
    },
    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
                }
            });
            this.openWindow = 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');
        },
        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:'03', 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>