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">试用时间：{{ 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" :disabled="isDisable" @click="selectBeginTime">按计划行车</el-button>
          <el-button type="danger" :disabled="!isDisable" @click="end">退出计划</el-button>
        </template>
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
  </div>
</template>

<!-- 单人仿真 -->
<script>
// import ChartView from './demon/chartView';
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, quitQuest } from '@/api/simulation';
import { timeFormat } from '@/utils/date';
import { EventBus } from '@/scripts/event-bus';

export default {
	name: 'MenuDemon',
	components: {
		// ChartView,
		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: '三维视图'
		};
	},
	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();
				}

				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,
				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(() => {
				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(() => {
				this.isDisable = false;
				this.$messageBox('开始仿真失败，请返回重试');
			});
		},
		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('结束仿真失败，请返回');
			});
		},
		handleQuitQuest() {
			quitQuest(this.group).then(resp => {
				this.$emit('quitQuest');
			}).catch(() => {
				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() {
			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 = '司机视角';
			} else {
				this.jl3dname = '三维视图';
			}
		}
	}
};
</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>