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 { putsSimulationRecord, putsSimulationRecordPause, putsSimulationRecordPlay, putsSimulationRecordPlaySpeed, putsSimulationRecordplayTime } from '@/api/simulationRecord';
import { EventBus } from '@/scripts/event-bus';

export default {
    name: 'MenuReplay',
    components: {
    },
    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>