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

<template>
  <div>
    <div>
      <chart-view ref="chatView" :group="group" />
    </div>
    <div class="draft-box">
      <div class="draft-menu">
        <el-row>
          <el-col :span="4">
            <el-select v-model="speed" :placeholder="$t('display.replay.pleaseSelect')" @change="changeSpeed">
              <el-option
                v-for="item in optionsList"
                :key="item.value"
                :label="item.label"
                size="mini"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" class="back btn" @click="play">{{ playName }}</el-button>
          </el-col>
          <el-col :span="12">
            <el-progress class="progress" :percentage="progress" style="width: 100%" :show-text="false" />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" class="back" @click="back">{{$t('display.replay.back')}}</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<!-- 回放界面 -->
<script>
import { Notification } from 'element-ui';
import { exitFullscreen } from '@/utils/screen';
import ChartView from './demon/chatBox';
import { putsSimulationRecord, putsSimulationRecordPause, putsSimulationRecordPlay, putsSimulationRecordPlaySpeed, putsSimulationRecordplayTime } from '@/api/simulationRecord';
import { EventBus } from '@/scripts/event-bus';

export default {
	name: 'MenuReplay',
	components: {
		ChartView
	},
	props: {
		group: {
			type: String,
			required: true
		},
		offset: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			isDisable: false,
			startLoading: false,
			speed: '1X',
			level: 1,
			isPlay: false,
			time: '',
			timeInterval: null,
			progress: 0,
			schedule: 0,
			optionsList: [
				{
					label: '1X',
					value: '1'
				},
				{
					label: '2X',
					value: '2'
				},
				{
					label: '4X',
					value: '4'
				},
				{
					label: '8X',
					value: '8'
				}
			]
		};
	},
	computed: {
		playName() {
			return this.isPlay ? this.$t('display.replay.pause') : this.$t('display.replay.play');
		}
	},
	watch: {
		'$store.state.map.mapViewLoadedCount': function() {
			this.isPlay = true;
		}
	},
	mounted() {
		EventBus.$emit('showChat');
		this.time = (+new Date(this.$route.query.destroyTime) - +new Date(this.$route.query.createTime)) / 1000;
		this.timeIntervals();
	},
	beforeDestroy() {
		clearInterval(this.timeInterval);
		this.timeInterval = null;
	},
	methods: {
		timeIntervals() {
			const timebili = 100 / this.time;
			if (!this.timeInterval) {
				this.timeInterval = setInterval(() => {
					if (this.isPlay) {
						this.progress += (this.level) * timebili;
						if (this.progress >= 100) {
							clearInterval(this.timeInterval);
							this.timeInterval = null;
							this.progress = 100;
							this.isPlay = false;
						}
					}
				}, 1000);
			}
		},
		async play() {
			this.isPlay = !this.isPlay;
			if (this.isPlay) {
				if (this.progress >= 100) {
					this.progress = 0;
					this.timeIntervals();
					this.$refs.chatView.clearTextList();
					await putsSimulationRecordplayTime(this.$route.query.replayId, 0);
				} else {
					await putsSimulationRecordPlay(this.$route.query.replayId);
				}
			} else {
				await putsSimulationRecordPause(this.$route.query.replayId);
			}
		},
		async changeSpeed(val) {
			this.level = val;
			await putsSimulationRecordPlaySpeed(this.$route.query.replayId, val);
		},
		async back() {
			await putsSimulationRecord(this.$route.query.replayId);
			history.go(-1);
			Notification.closeAll();
			exitFullscreen();
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .draft-box {
        position: absolute;
        display: inline;
        bottom: 10px;
		right: 0px;

        .draft-menu {
            position: static;
            width: 800px;
            float: right;

            .back {
                z-index: 100000;

                /deep/ .el-button {
                    font-weight: bold;
                }
            }

            .progress {
                left: -30px;
                position: relative;
                top: 14px;
            }
        }
    }
</style>