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

<template>
  <div>
    <div class="display-card" :style="{top: offset+'px'}">
      <el-row>
        <span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span>
      </el-row>
    </div>
    <div class="display-draft">
      <el-button-group>
        <el-button v-if="isShowScheduling" type="primary" @click="jumpScheduling">{{ $t('display.demon.dispatchingPlan') }}</el-button>
        <el-button type="jumpjlmap3d" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
        <template v-if="isShowQuest">
          <!-- && !isDesignPlatform  -->
          <el-button v-if="!isDesignPlatform " type="danger" @click="handleQuitQuest">{{ $t('display.demon.exitScript') }}</el-button>
        </template>
        <template v-else>
          <el-button type="success" :disabled="isDisable" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
          <el-button type="danger" :disabled="!isDisable" @click="end">{{ $t('display.demon.exitPlan') }}</el-button>
        </template>
        <el-button type="primary" @click="back">{{ $t('display.demon.back') }}</el-button>
      </el-button-group>
    </div>
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
  </div>
</template>

<!-- 单人仿真 -->
<script>
import SetTime from './demon/setTime';
import { Notification } from 'element-ui';
import { getGoodsTryUse } from '@/api/management/goods';
import { runDiagramStart, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
import { PermissionType } from '@/scripts/ConstDic';
import { exitFullscreen } from '@/utils/screen';
import { getCountTime } from '@/utils/index';
import { runDiagramIsStart, quitScript } from '@/api/simulation';
import { timeFormat } from '@/utils/date';
import { EventBus } from '@/scripts/event-bus';

export default {
    name: 'MenuDemon',
    components: {
        SetTime
    },
    props: {
        group: {
            type: String,
            required: true
        },
        offset: {
            type: Number,
            required: true
        },
        questId: {
            type: Number,
            default() {
                return 0;
            }
        }
    },
    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: this.$t('display.demon.threeDimensionalView')
        };
    },
    computed: {
        isShowQuest() {
            return this.questId;
        },
        isShowScheduling() {
            return this.$route.query.prdType == '05';
        },
        isDesignPlatform() {
            return this.$route.fullPath.includes('design/display/demon');
        }
    },
    watch: {
        '$store.state.training.subscribeCount': function () {
            this.group && this.initLoadPage();
        },
        '$store.state.socket.tipOperateCount': function (val) {
            this.$alert(this.$t('display.demon.taskOperateSuccess'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                callback: action => {
                }
            });
        }
    },
    beforeDestroy() {
        if (this.time) {
            this.setTryTime();
            clearTimeout(this.time);
        }
    },
    methods: {
        async initLoadPage() {
            try {
                if (this.try != '0') {
                    this.loadInitData();
                }

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

                await this.loadSystemTime();
                this.change3dname();
            } catch (error) {
                console.log(error);
            }
        },
        loadInitData() {
            const data = {
                mapId: this.$route.query.mapId,
                prdCode: this.$route.query.code,
                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(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(() => {
                this.isDisable = false;
                this.$messageBox(this.$t('display.demon.startSimulationFail'));
            });
        },
        end() {
            this.isDisable = false;
            runDiagramOver(this.group).then(() => {
                this.$store.dispatch('training/over').then(() => {
                    this.$store.dispatch('training/setMapDefaultState').then(() => {
                        this.$store.dispatch('map/clearJlmapTrainView');
                        this.$store.dispatch('map/setTrainWindowShow', false);
                    });
                });
            }).catch(() => {
                this.isDisable = true;
                this.$messageBox(this.$t('display.demon.endSimulationFail'));
            });
        },
        handleQuitQuest() {
            quitScript(this.group).then(resp => {
                this.$emit('quitQuest');
                this.initLoadPage();
            }).catch(() => {
                this.$messageBox(this.$t('display.demon.exitTaskFail'));
            });
        },
        back() {
            this.$store.dispatch('training/over').then(() => {
                EventBus.$emit('runPlanStop');
                EventBus.$emit('chatSubscribeStop');
                history.go(-1);
                Notification.closeAll();
                exitFullscreen();
            });
        },
        jumpjlmap3d() {
            this.$emit('hidepanel');
        },
        jumpScheduling() {
            this.$emit('showScheduling');
        },
        setTryTime() {
            if (this.try) {
                this.$emit('tryTime', { time: this.tryTime, goodsId: this.goodsId });
            }
        },
        async loadSystemTime() {
            const 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 = this.$t('display.demon.driverPerspective');
            } else {
                this.jl3dname = this.$t('display.demon.threeDimensionalView');
            }
        }
    }
};
</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;
    }

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