rt-sim-training-client/src/views/newMap/jointTrainingNew/menuDemon.vue

<template>
  <div>
    <chat-box :group="group" :user-role="userRole" />
    <div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01'}">
      <el-button-group>
        <el-button v-if="isAdmin && adminMode" @click="handleEquipment">设备管理</el-button>
        <el-button v-if="isAdmin && adminMode" @click="memberManage">成员管理</el-button>
        <el-button v-if="isAdmin && adminMode" type="primary" @click="generateQrCode">生成二维码</el-button>
        <el-button v-if="hasRealDevice && !dataError " type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
        <el-button v-if="isDriver && !dataError" type="jumpjlmap3d" @click="jumpjlmap3d">{{ $t('joinTraining.driverPerspective') }}</el-button>
        <el-button v-if="isStationSupervisor && !dataError" type="jmap3dcctv" @click="jlmap3dcctv">cctv</el-button>
        <template v-if="isAdmin && adminMode && project != 'refereeJsxt'">
          <el-button type="success" :disabled="isDisable || dataError" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
          <el-button type="danger" :disabled="dataError" @click="end">{{ $t('joinTraining.initialize') }}</el-button>
        </template>
      </el-button-group>
      <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" @click="startCompetition">开始</el-button>
        <el-button :disabled="jsStart" type="danger" @click="endCompetition">提交</el-button>
      </template>
      <el-button v-if="project==='refereeJsxt'" type="success" @click="refeeEndCompetition">退出</el-button>
      <el-button v-if="project!=='jsxt'&&project!=='refereeJsxt'" type="primary" :loading="backLoading" @click="back">退出</el-button>
    </div>
    <qr-code ref="qrCode" />
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
    <real-device ref="realDevice" />
    <equipment ref="equipment" />
  </div>
</template>

<script>
import QrCode from '@/components/QrCode';
import ChatBox from './newChatView/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 { EventBus } from '@/scripts/event-bus';
import { getSessionStorage } from '@/utils/auth';
import RealDevice from './menuDraft/realDevice';
import { refereeExitSimulation, quitCurrentRace, startPracticalCompetition, submitPracticalCompetition } from '@/api/competition';
import { prefixIntrger } from '@/utils/date';
import localStore from 'storejs';

export default {
    name: 'MenuDemonJoint',
    components: {
        ChatBox,
        QrCode,
        SetTime,
        RealDevice,
        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;
            }
        },
        adminMode: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            isDisable: false,
            backLoading:false,
            chatShow: true,
            offset: 10,
            userId: '',
            stationList: [],
            stationLists: [],
            jsStart: true,
            isGoback: false
        };
    },
    computed: {
        lineCode() {
            return this.$route.query.lineCode;
        },
        isSpeaking() {
            return this.userRole != 'DRIVER' && this.userRole != '';
        },
        isStationSupervisor() {
            return this.userRole == 'STATION_SUPERVISOR';
        },
        isDriver() {
            return this.userRole == 'DRIVER';
        },
        hasRealDevice() {
            return getSessionStorage('project').endsWith('gzb') && this.userRole === 'CI';
        },
        project() {
            return getSessionStorage('project');
        }
    },
    watch: {
        '$store.state.config.menuBarLoadedCount': function (val) {
            this.setPosition();
        },
        '$store.state.map.map.stationList': function (val) { // 执行一次 以后不会有变化
            if (val && val.length) {
                this.stationList = val;
                this.stationLists = val;
            }
        },
        '$store.state.socket.roleList': function (val) {
            if (val && val.length) {
                this.$nextTick(() => {
                    this.addrolesList(val);
                    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();
                }
            }
        }
    },
    async mounted() {
        this.userId = this.$store.state.user.id;
        this.backLoading = false;
        await this.initLoadPage();
        this.isDisable = this.$store.state.map.runPlanStatus;
    },
    beforeDestroy() {
        this.$store.dispatch('training/setGroup', '');
        if (this.project === 'jsxt') {
            quitCurrentRace(this.$route.query.raceId, {group:this.group}).then(res=>{
            });
        }
    },
    methods: {
        async initLoadPage() {
            try {
                // const resp = await runDiagramIsStart(this.group);
                // if (resp && resp.data) {
                //     this.isDisable = true;
                //     this.$store.dispatch('training/simulationStart');
                // } else {
                //     this.isDisable = false;
                //     this.$store.dispatch('training/over');
                // }

            } catch (error) {
                console.log(error);
            }
        },
        setPosition() {
            this.$nextTick(() => {
                let offset = 10;
                const menuBar = document.getElementById('menuBar');
                const menuTool = document.getElementById('menuTool');

                if (menuBar) {
                    offset += (menuBar.offsetHeight || 0);
                }

                if (menuTool) {
                    offset += (menuTool.offsetHeight || 0);
                }

                if (this.offset != offset) {
                    this.offset = offset;
                }
            });
        },
        // 设置用户角色  Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 MAINTAINER 通号
        addrolesList(list) {
            list.forEach(item => {
                if (this.userId == 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', ''); 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);
            }).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');
        },
        setRelDevice() {
            this.$refs.realDevice.doShow();
        },
        formatTime(initTime) {
            const hh = prefixIntrger(initTime.getHours(), 2);
            const mm = prefixIntrger(initTime.getMinutes(), 2);
            const ss = prefixIntrger(initTime.getSeconds(), 2);
            return `${hh}:${mm}:${ss}`;
        },
        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.go(-1);
                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() {
            const self = this;
            getSimulationQrcode(this.$route.query.group).then(resp => {
                const param = {
                    url: resp.data,
                    title: self.$t('综合演练二维码'),
                    group: self.$route.query.group
                };
                if (self.$refs) {
                    self.$refs.qrCode.doShow(param);
                }
            }).catch(() => {
                this.$messageBox('仿真生成二维码失败！');
            });
        }
    }
};
</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;
		}
	}

	.display-draft {
		position: absolute;
		float: right;
		right: 40px;
		bottom: 28px;
	}
	.display-type-hb{
		bottom: 105px;
	}
</style>