rt-sim-training-client/src/views/scriptManage/display/tipScriptRecord.vue

<template>
  <div class="reminder-drag">
    <div ref="drapBox" class="reminder-box" :style="{width: width + 'px'}">
      <el-container class="actionPane">
        <el-header style="height: 50px;">
          <el-row class="actionList">
            <span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
            <span class="titleStyle">( {{ $t('scriptRecord.language') }}: {{ $route.query.lang=="en"?$t('scriptRecord.english'):$t('scriptRecord.chinese') }} )</span>
          </el-row>
        </el-header>
        <el-main style="padding-top:10px;padding-bottom:10px;">
          <add-role ref="addRole" :group="group" @refresh="refresh" />
          <add-action ref="addAction" :group="group" :size="size" @create="create" @setDisabled="setDisabled" />
          <get-action ref="getAction" :group="group" :size="size" @setAction="setAction" />
        </el-main>
        <el-card class="scriptFooter">
          <el-button-group class="button-group">
            <el-button v-if="isPause" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
            <el-button v-else type="primary" :disabled="executeDisabled" @click="executePlayScript">{{ $t('scriptRecord.recoverAndExecute') }}</el-button>
            <el-button type="danger" @click="dumpScenesData">{{ $t('scriptRecord.resetScript') }}</el-button>
            <el-button type="primary" :disabled="backDisabled" @click="saveScenesStage">{{ $t('scriptRecord.saveBackground') }}</el-button>
            <el-button type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
          </el-button-group>
        </el-card>
      </el-container>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import AddAction from '../scriptRecord/addAction';
import GetAction from '../scriptRecord/getAction';
import AddRole from '../scriptRecord/addRole';
import {saveScriptScenes, saveScriptData, dumpScriptData, updateMapLocation, scriptPause, executeScript} from '@/api/simulation';

export default {
    name: 'TipScriptRecord',
    components: {
        GetAction,
        AddRole,
        AddAction
    },
    props: {
        group: {
            type: String,
            required: true
        },
        width: {
            type: Number || String,
            required: true
        }
    },
    data() {
        return {
            title: this.$t('scriptRecord.scriptRecordTitle'),
            isShrink: false,
            mapLocation: {},
            autoSaveScript: null,
            isSavingScript: false,
            isPause: true,
            executeDisabled: false,
            backDisabled: false,
            size: {
                width: 350,
                height: window.innerHeight - 342
            }
        };
    },
    watch: {
        '$store.state.scriptRecord.bgSet': function (val) {
            this.backDisabled = val;
        },
        '$store.state.app.windowSizeCount': function() {
            this.size = { width: 350, height: window.innerHeight - 342};
        },
        width: function(val) {
            this.size = { width: val / 2 - 20, height: window.innerHeight - 342};
        }
    },
    mounted() {
        this.initAutoSaveScript();
        this.backDisabled = this.$store.state.scriptRecord.bgSet;
    },
    beforeDestroy() {
        this.clearAutoSave();
    },
    methods: {
        setIsParse(isPause) {
            this.isPause = isPause;
        },
        setDisabled(data) {
            this.executeDisabled = !data;
        },
        initAutoSaveScript() {
            const timeout = 1000 * 20;
            this.clearAutoSave(this.autoSaveScript);
            this.autoSaveScript = setInterval(this.saveScenesData, timeout);
        },
        clearAutoSave() {
            if (this.autoSaveScript) {
                clearInterval(this.autoSaveScript);
                this.autoSaveScript = null;
            }
        },
        pauseScript() {
            scriptPause(this.group).then(resp => {
                this.$store.dispatch('scriptRecord/updateSimulationPause', true);
            }).catch(() => {
                this.$messageBox(this.$t('scriptRecord.pauseFail'));
            });
        },
        executePlayScript() {
            executeScript(this.group).then(resp => {
                this.$store.dispatch('scriptRecord/updateSimulationPause', false);
            }).catch(() => {
                this.$messageBox(this.$t('scriptRecord.recoverFail'));
            });
        },
        saveScenesStage() {
            const data = Vue.prototype.$jlmap.$options;
            const group = this.$route.query.group;
            const dataZoom = {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
            saveScriptScenes(this.group).then(resp => {
                updateMapLocation(group, dataZoom).then(response=>{
                    this.$store.dispatch('scriptRecord/updateBgSet', true);
                    this.$message.success(this.$t('scriptRecord.saveBackgroundSuceess'));
                }).catch(error => {
                    this.$messageBox(`${this.$t('scriptRecord.updateLocationFail')}: ${error.message}`);
                });
            }).catch(() => {
                this.$messageBox(this.$t('scriptRecord.saveBackgroundFail'));
            });

        },
        saveScenesData() {
            this.isSavingScript = true;
            saveScriptData(this.group).then(resp => {
                this.$message.success(this.$t('scriptRecord.saveDataSucess'));
                this.isSavingScript = false;
                this.initAutoSaveScript();
            }).catch(error => {
                this.$messageBox(`${this.$t('scriptRecord.saveDataFail')}: ${error.message}`);
                this.isSavingScript = false;
                if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
                    this.clearAutoSave();
                } else {
                    this.initAutoSaveScript();
                }
            });
        },
        dumpScenesData() {
            this.clearAutoSave();
            const group = this.group;
            this.$confirm(this.$t('scriptRecord.clearDataTip'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                dumpScriptData(group).then(resp => {
                    this.$parent.$refs['display'].$refs['menuScript'].resetBeginTime();
                    this.$refs['getAction'].loadInitData();
                    this.$refs['addRole'].initData();
                    this.$refs['addAction'].initData();
                    this.initAutoSaveScript();
                    this.$store.dispatch('scriptRecord/updateBgSet', false);
                    this.$message.success(this.$t('scriptRecord.resetDataSuccess'));
                }).catch(() => {
                    this.$messageBox(this.$t('scriptRecord.resetDataFail'));
                });
            }).catch(() => {
                this.initAutoSaveScript();
            });
        },
        refresh() {
            this.$refs['addAction'].initData();
        },
        create() {
            this.$refs['getAction'].loadInitData();
        },
        setAction(row) {
            this.$refs['addAction'].doShow(row);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.reminder-drag{
		width: 100%;
		height: 100%;
	}

    .reminder-box {
        position: absolute;
        float: left;
        left: 0px;
        top:0px;
        height: 100%;
        background-color: #fff;
        overflow: hidden;
        z-index: 10;
        font-size: 18px;

        .actionPane{
            height: 100%;
        }

        .button-group{
            margin: 8px;
            float: right;
        }

        .actionList{
            margin-top: 10px;
            font-size: 15px;
            padding-top: 5px;
            border-bottom: 1px #ccc solid;
            height: 35px;
        }
        .titleStyle{
            margin-left:5px;
        }

        .icon {
            float: right;
            margin-right: 10px;
            cursor: pointer;
            background-color: #f3f3f3;
            border-radius: 50%;
        }

        /deep/ {
            .el-tree-node__content {
                margin-bottom: 4px;
            }

            .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #d6e5f7;
            }
        }
    }
</style>