rt-sim-training-client/src/views/display/menuDemon.vue

<template>
    <div>
        <div class="display-card" :style="{top: offset+'px'}">
            <el-row>
                <span class="display-score" v-if="countTime">试用时间：{{ countTime }}</span>
            </el-row>
        </div>
        <div class="display-draft">
            <el-button-group>
                <el-button type="jumpjlmap3d" @click="jumpjlmap3d">{{jl3dname}}</el-button>
                <template v-if="questId">
                    <el-button type="danger" @click="handleQuitQuest">退出任务</el-button>
                </template>
                <template v-else>
                    <el-button type="success" @click="selectBeginTime" :disabled="isDisable">按计划行车</el-button>
                    <el-button type="danger" @click="end" :disabled="!isDisable">退出计划</el-button>
                </template>
                <el-button type="primary" @click="back">返回</el-button>
            </el-button-group>
        </div>
        <set-time ref="setTime" @ConfirmSelectBeginTime="start"></set-time>
        <tip-quest-detail ref="questTip" :questId="questId" v-show="questId"></tip-quest-detail>
    </div>
</template>

<!-- 单人仿真 -->
<script>
    import ChartView from './demon/chartView';
    import SetTime from './demon/setTime';
    import TipQuestDetail from './tipQuestDetail';
    import { mapGetters } from 'vuex';
    import { Notification } from 'element-ui';
    import { getGoodsTryUse } from '@/api/management/goods';
    import { runDiagramStart, runDiagramOver, setTrainingCbtcInitTime, runDiagramGetTime } from '@/api/simulation';
    import { OperateMode, PermissionType } from '@/scripts/ConstDic';
    import { exitFullscreen } from '@/utils/screen';
    import { getCountTime } from '@/utils/index';
    import { loadMapData } from '@/utils/loaddata';
    import { runDiagramIsStart, quitQuest } from '@/api/simulation';
    import { timeFormat } from '@/utils/date';

    export default {
        name: 'MenuDemon',
        props: {
            group: {
                type: String,
                required: true
            },
            offset: {
                type: Number,
                required: true
            },
            questId: {
                type: Number,
                default() {
                    return 0;
                }
            }
        },
        components: {
            ChartView,
            SetTime,
            TipQuestDetail
        },
        data() {
            return {
                isDisable: false,
                tryTime: 0,      // 进入页面多少秒
                timeNow: 0,      // 进入页面 相对时间
                time: null,      // 定时器
                countTime: 0,    // 显示 倒计时
                remainingTime: 0,
                goodsId: this.$route.query.goodsId,
                try: this.$route.query.try,    // 是否是试用权限
                training: {
                    id: '',
                    name: '',
                    remarks: ''
                },
                jl3dname: "三维视图",
            }
        },
        watch: {
            '$store.state.training.subscribeCount': function () {
                this.group && this.InitLoadPage()
            },
            '$store.state.socket.tipOperateCount': function (val) {
                this.$alert('任务操作成功！', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            }
        },
        beforeDestroy() {
            if (this.time) {
                this.setTryTime();
                clearTimeout(this.time);
            }
        },
        methods: {
            async InitLoadPage() {
                try {
                    if (this.try != '0') {
                        this.loadInitData();
                    }

                    let 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');
                    }

                    await this.loadSystemTime();
                    this.change3dname();
                } catch (error) {
                    console.log(error);
                }
            },
            loadInitData() {
                let data = {
                    mapId: this.$route.query.mapId,
                    mapProductCode: this.$route.query.code,
                    productType: 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(error => {
                    this.$messageBox(`获取时间失败`);
                })
            },
            selectBeginTime() {
                this.$refs.setTime.doShow();
            },
            start(model) {
                this.isDisable = true;
                runDiagramStart(model, this.group).then(res => {
                    this.$store.dispatch('training/simulationStart').then(() => {
                        this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
                    })
                }).catch(error => {
                    this.isDisable = false;
                    this.$messageBox('开始仿真失败，请返回重试');
                });
            },
            end() {
                this.isDisable = false;
                runDiagramOver(this.group).then(() => {
                    this.$store.dispatch('training/over').then(() => {
                        this.$store.dispatch('map/clearJlmapTrainView');
                        this.$store.dispatch('map/setTrainWindowShow', false);
                        this.$store.dispatch('training/setMapDefaultStatus');
                    })
                }).catch(error => {
                    this.isDisable = true;
                    this.$messageBox('结束仿真失败，请返回');
                })
            },
            handleQuitQuest() {
                quitQuest(this.group).then(resp => {
                    this.$emit('quitQuest');
                }).catch(error => {
                    this.$messageBox('退出任务失败');
                })
            },
            back() {
                this.$store.dispatch('training/over').then(() => {
                    eventBus.$emit('runPlanStop');
                    eventBus.$emit('chatSubscribeStop');
                    history.go(-1);
                    Notification.closeAll();
                    exitFullscreen();
                })
            },
            jumpjlmap3d() {
                this.$emit('hidepanel');
            },
            setTryTime() {
                if (this.try) {
                    this.$emit('tryTime', { time: this.tryTime, goodsId: this.goodsId });
                }
            },
            async loadSystemTime() {
                let rest = await runDiagramGetTime(this.group);
                if (rest && rest.code == 200) {
                    this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${timeFormat(rest.data)}`));
                }
            },
            change3dname() {
                if (this.$route.query.prdType == "04") {
                    this.jl3dname = "司机视角";
                } else {
                    this.jl3dname = "三维视图";
                }
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .display-card {
        z-index: 9;
        display: inline;
        position: absolute;
        top: 17px;
        float: left;
        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;
    }

    .display-draft {
        position: absolute;
        float: right;
        right: 20px;
        bottom: 15px;
    }
</style>