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

<template>
    <div class="reminder-drag">
        <div class="reminder-box" ref="drapBox" :style="{height:'100%'}">
            <el-container class="actionPane">
                <el-header style="height:50px;">
                    <el-row class="actionList">
                        <span class="titleStyle">剧本编制</span>
                    </el-row>
                </el-header>
                <el-main style="padding-top:10px;padding-bottom:10px;">
                    <add-role :group="group" ref="addRole" @refresh="refresh"></add-role>
                    <add-action ref="addAction" :group="group" :size="size" @create="create" @setDisabled="setDisabled"></add-action>
                    <get-action ref="getAction" :group="group" :size="size" @setAction="setAction"></get-action>
                </el-main>
                <el-footer>
                    <el-button-group class="button-group">
                        <el-button type="primary" @click="pauseScript" v-if="isPause" :disabled="executeDisabled">暂停</el-button>
                        <el-button type="primary" @click="executePlayScript" v-else :disabled="executeDisabled">恢复并执行</el-button>
                        <el-button type="danger" @click="dumpScenesData">重置剧本</el-button>
                        <el-button type="primary" @click="saveScenesStage" :disabled="backDisabled">{{$t('scriptRecord.saveBackground')}}</el-button>
                        <el-button type="success" @click="saveScenesData" :loading="isSavingScript" >{{$t('scriptRecord.saveData')}}</el-button>
                        <!-- 暂停 -->
                    </el-button-group>
                </el-footer>
            </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 WindowResizeHandler from '@/mixin/WindowResizeHandler';
import {saveScriptScenes, saveScriptData, dumpScriptData, updateMapLocation, scriptPause, executeScript} from '@/api/simulation';

    export default {
        name: 'TipScriptRecord',
        props: {
            group: {
                type: String,
                required: true
            },
        },
        components: {
            GetAction,
            AddRole,
            AddAction
        },
        mixins: [WindowResizeHandler],
        // this.$t('scriptRecord.scriptTitle')
        data() {
            return {
                title:"剧本编制",
                isShrink: false,
                mapLocation:{},
                autoSaveScript: null,
                isSavingScript:false,
                isPause:true,
                executeDisabled:false,
                backDisabled:false,
                size:{
                    width:350,
                    height:window.innerHeight-130-212,
                }
                // isSaveStage: true,
            }
        },
        created() {
        },
        watch:{
            '$store.state.scriptRecord.bgSet': function (val) {
                this.backDisabled=val;
            },
        },
        mounted(){
            this.initAutoSaveScript();
            this.backDisabled=this.$store.state.scriptRecord.bgSet;
        },
        beforeDestroy() {
            this.clearAutoSave();
        },
        methods: {
            resizeHandler() {
                this.size = { width:350, height:window.innerHeight-130-212};
            },
            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.isSaveStage = false;
                    this.$store.dispatch('scriptRecord/updateSimulationPause',true);
                    // this.$message.success('暂停成功');
                }).catch(error => {
                    this.$messageBox('暂停失败!');
                });
            },
            executePlayScript(){
                executeScript(this.group).then(resp => {
                    // this.isSaveStage = false;
                    this.$store.dispatch('scriptRecord/updateSimulationPause',false);
                    // this.$message.success('暂停成功');
                }).catch(error => {
                    this.$messageBox('恢复失败!');
                });
            },
            saveScenesStage() {
                let data=Vue.prototype.$jlmap.$options;
                let group=this.$route.query.group;
                let dataZoom={scale:data.scaleRate,x:data.offsetX,y:data.offsetY};
                saveScriptScenes(this.group).then(resp => {
                    updateMapLocation(group,dataZoom).then(response=>{
                        // this.$message.success('更新定位成功');
                        this.$store.dispatch('scriptRecord/updateBgSet',true);
                        this.$message.success('保存背景成功');
                    }).catch(error => {
                        this.$messageBox(`更新定位失败: ${error.message}`);
                    });
                    // this.isSaveStage = false;
                    // this.$message.success('保存背景成功');
                }).catch(error => {
                    this.$messageBox('保存背景失败!');
                })

            },
            saveScenesData() {
                this.isSavingScript=true;
                saveScriptData(this.group).then(resp => {
                    this.$message.success('保存数据成功');
                    this.isSavingScript=false;
                    this.initAutoSaveScript();
                }).catch(error => {
                    this.$messageBox(`保存数据失败!: ${error.message}`);
                    this.isSavingScript=false;
                    if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
                        this.clearAutoSave();
                    } else {
                        this.initAutoSaveScript();
                    }
                })
            },
            dumpScenesData() {
                this.clearAutoSave();
                let group=this.group;
                this.$confirm('此操作将会清除已保存的编制数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    dumpScriptData(group).then(resp => {
                        // this.isSaveStage = true;
                        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('重置数据成功');
                    }).catch(error => {
                        this.$messageBox('重置数据失败!');
                    })
                }).catch(error => { 
                    this.initAutoSaveScript();
                })
            },
            refresh(){
                this.$refs['addAction'].initData();
            },
            create(){
                this.$refs['getAction'].loadInitData();
            },
            setAction(row){
                debugger;
                this.$refs['addAction'].doShow(row);
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

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

        .actionPane{
            height: 100%;
        }
        
        .button-group{
            margin-bottom: 20px;
            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>