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

<template>
  <div>
    <demon-menu
      ref="demonMenu"
      :is-all-show="!dataError"
      :jl3dmodel-show="isShow3dmodel && !isShowScheduling && !isDrive"
      :jl3dname-show="!isShowScheduling&&!isDrive"
      :cctv-show="!isShowScheduling"
      :trafficplan-show="!isShowScheduling"
      :schedule-load-show="isShowScheduling && !runing"
      :schedule-preview-show="isShowScheduling && runing"
      :jlmap3d-fault-show="false"
      :driver-show="isDrive"
      :all-style="'top:'+(offset+textStatusHeight)+'px'"
    />

    <menu-schema
      ref="menuSchema"
      :offset="offset"
      :data-error="dataError"
      :offset-bottom="offsetBottom"
    />

    <div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'||$route.query.lineCode == '14'}" :style="{bottom: offsetBottom + 'px'}">
      <el-button-group class="button-group-box">
        <template v-if="!dataError">
          <template v-if="!projectDevice">
            <el-button v-if="simulationPause" v-loading="pauseLoading" type="primary" size="small" @click="start">开始</el-button>
            <el-button v-if="!simulationPause" v-loading="pauseLoading" type="warning" size="small" @click="pause">暂停</el-button>
            <el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
          </template>
        </template>
        <el-button v-if="project !='bjd'" type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
      </el-button-group>
    </div>
  </div>

</template>

<!-- 单人仿真 -->
<script>
import DemonMenu from './demonMenu';
import { Notification } from 'element-ui';
import MenuSchema from '@/views/newMap/displayCity/menuSchema';
import { getGoodsTryUse } from '@/api/management/goods';
import {clearSimulation } from '@/api/simulation';
import { PermissionType } from '@/scripts/ConstDic';
import { getCountTime } from '@/utils/index';
import { TrainingMode } from '@/scripts/ConstDic';
// import { quitScriptNew } from '@/api/simulation';
import { setGoodsTryUse } from '@/api/management/goods';
// import {loadScriptNew } from '@/api/simulation';
import StatusIcon from '@/views/components/StatusIcon/statusIcon';
import { simulationPause, simulationStart } from '../../../api/rtSimulation';
// import Vue from 'vue';
import { getSessionStorage } from '@/utils/auth';
// import { EventBus } from '@/scripts/event-bus';

export default {
    name: 'MenuDemon',
    components: {
        MenuSchema,
        DemonMenu,
        StatusIcon
    },
    props: {
        offset: {
            type: Number,
            required: true
        },
        offsetBottom: {
            type: Number,
            required: true
        },
        dataError: {
            type: Boolean,
            default() {
                return false;
            }
        },
        textStatusHeight: {
            type: Number,
            default() {
                return 0;
            }
        }
    },
    data() {
        return {
            tryTime: 0, 				// 进入页面多少秒
            timeNow: 0, 				// 进入页面 相对时间
            time: null, 				// 定时器
            countTime: 0, 				// 显示 倒计时
            remainingTime: 0,
            userRole:'AUDIENCE',
            goodsId: this.$route.query.goodsId,
            try: this.$route.query.try, // 是否是试用权限
            training: {
                id: '',
                name: '',
                remarks: ''
            },
            isScriptRun:false,
            jl3dname: this.$t('display.demon.threeDimensionalView'),
            jl3dmodel: this.$t('display.demon.deviceView'),
            isShow3dmodel :true,
            isGoback: false,
            runing:false,
            pauseLoading: false,
            prdTypeMap: {
                '01': '01', 	// 现地 => 现地
                '02': '02', 	// 行调 => 行调
                '04': '02', 	// 司机 => 行调
                '05': ''		// 派班 => null
            }
        };
    },
    computed: {
        isShowScheduling() {
            return this.$route.query.prdType == '05';
        },
        isDrive() {
            return this.$route.query.prdType == '04';
        },
        group() {
            return this.$route.query.group;
        },
        projectDevice() {
            return this.$route.query.projectDevice;
        },
        project() {
            return getSessionStorage('project');
        },
        simulationPause() {
            return this.$store.state.socket.simulationPause;
        }
    },
    watch: {
        '$store.state.training.subscribeCount': function () {
            this.group && this.initLoadPage();
        },
        '$store.state.socket.simulationRoleList':function(val) {
            (val || []).forEach(item => {
                if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
                    !this.isGoback && this.back();
                }
            });
        },
        '$store.state.socket.simulationOver':function(val) {
            !this.isGoback && this.back();
        },
        '$store.state.socket.simulationStart':function(val) {
            if (val) {
                this.setRuning(true);
                this.$store.dispatch('training/simulationStart').then(() => {
                    this.$store.dispatch('map/setShowCentralizedStationNum');
                });
            }
        },
        '$store.state.socket.simulationReset':function(val) {
            this.setRuning(false);
        }
    },
    created() {
        this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
        switch (this.$store.state.training.prdType) {
        case '02': { this.userRole = 'DISPATCHER'; break; }
        case '01': { this.userRole = 'STATION_SUPERVISOR'; break; }
        case '04': { this.userRole = 'DRIVER'; break; }
        case '05': { this.userRole = 'DEPOT_DISPATCHER'; break; }
        default: { this.userRole = 'AUDIENCE'; break; }
        }
    },
    beforeDestroy() {
        if (this.time) {
            this.setTryTime();
            clearTimeout(this.time);
        }
        this.$store.dispatch('scriptRecord/updateSimulationPause', false);
        this.$store.dispatch('map/resetActiveTrainList', true);
    },
    mounted() {
        this.$store.dispatch('training/end', TrainingMode.NORMAL);
        this.$nextTick(() => {
            this.$refs.demonMenu.menuClick();
        });
    },
    methods: {
        async initLoadPage() {
            try {
                if (this.try != '0') {
                    this.loadInitData();
                }
            } catch (error) {
                console.log(error);
            }
        },
        loadInitData() {
            const data = {
                mapId: this.$route.query.mapId,
                prdType: this.$route.query.prdType,
                permissionType: PermissionType.SIMULATION
            };
            getGoodsTryUse(data).then(res => {
                this.remainingTime = res.data.tryTime;
                this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
                if (this.try) {
                    this.time = setInterval(() => {
                        this.tryTime += 1;
                        this.countTime = getCountTime(this.timeNow);
                        if (this.countTime == -1) {
                            this.back();
                        }
                    }, 1000);
                }
            }).catch(() => {
                this.$messageBox(this.$t('display.demon.getTimeFail'));
            });
        },
        selectBeginTime() {
            this.$refs.setTime.doShow();
        },
        start() {
            this.pauseLoading = true;
            simulationStart(this.$route.query.group).then(resp => {
                this.pauseLoading = false;
            }).catch((e) =>{
                this.$message.error('仿真开始失败！');
            });
        },
        pause() {
            this.pauseLoading = true;
            simulationPause(this.$route.query.group).then(resp => {
                this.pauseLoading = false;
            }).catch((e) => {
                this.pauseLoading = false;
                this.$message.error('仿真暂停失败！');
            });
        },
        setRuning(run) {
            this.runing = run;
        },
        end() {
            this.$emit('end');
        },
        clearAllData() {
            this.$refs.chatbox.clearAllData();
        },
        async back() {
            this.isGoback = true;
            if (this.projectDevice) {
                clearSimulation(this.group).then(res=>{
                    this.$store.dispatch('training/over').then(() => {
                        this.$store.dispatch('LogOut').then(() => {
                            location.reload();
                        });
                    });
                });
            } else {
                if (this.project === 'bjd') {
                    window.close();
                } else {
                    this.$store.dispatch('map/setShowCentralizedStationCode', '');
                    history.go(-1);
                    Notification.closeAll();
                }

            }
        },
        setTryTime() {
            if (this.try) {
                const data = { time: this.tryTime, goodsId: this.goodsId };
                if (data.goodsId) {
                    setGoodsTryUse(data);
                }

            }
        },
        quit() {
            window.close();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .display-card {
        z-index: 9;
        display: inline-block;
        position: absolute;
        top: 17px;
        left: 160px;
        height: 32px;
    }

    .display-card .el-row {
        line-height: 32px !important;
    }

    .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;
    }
	.haerbin_btn_box{
		width: 450px;
		bottom: 15px!important;
	}
	.display-draft {
		position: absolute;
		right: 10px;
		bottom: 15px;
		.button-group-box{
			float: right;
		}
	}
</style>