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

<template>
  <div class="scriptRecordNew" :style="{bottom:(offsetBottom-15)+'px'}">
    <div v-show="isShow" class="scriptRecordNewIn">
      <el-tabs type="card">
        <el-tab-pane :label="$t('scriptRecord.scriptRecordTitle')+'('+language+')'">
          <div class="eachScriptPanel">
            <div class="scriptPanelLeft">
              <div class="panelLeftSelect">
                <span style="font-size:13px;">当前剧本角色:</span>
                <el-select v-model="memberId" placeholder="请选择" :disabled="isPause" @change="changeRole">
                  <el-option v-for="member in memberList" :key="member.id" :label="member.name" :value="member.id" />
                </el-select>
              </div>
              <el-button-group class="button-group">
                <el-button v-if="isPause" size="small" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
                <el-button v-else size="small" type="primary" :disabled="executeDisabled" @click="executePlayScript">恢复</el-button>
                <el-button size="small" type="danger" @click="dumpScenesData">{{ $t('scriptRecord.resetScript') }}</el-button>
                <el-button size="small" type="primary" :disabled="backDisabled" @click="saveScenesStage">{{ $t('scriptRecord.saveBackground') }}</el-button>
                <el-button size="small" type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
              </el-button-group>
            </div>
            <div class="scriptPanelRight">
              <get-action-new ref="getAction" :group="group" :size="size" @setAction="setAction" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="选择待出演剧本角色">
          <div class="eachScriptPanel">
            <add-role ref="addRole" :group="group" @refresh="refresh" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="scriptRecordNewTitle" @click="minisize">
      <span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import AddRole from '../scriptRecord/addRole';
import GetActionNew from '../scriptRecord/getActionNew';
import {getScriptPlayMemberNew, executeScriptNew, dumpScriptDataNew, saveScriptDataNew, saveScriptScenesNew, updateMapLocationNew, simulationPause} from '@/api/simulation';
import ConstConfig from '@/scripts/ConstConfig';
import {getDraftScriptByGroupNew} from '@/api/script';
import Cookies from 'js-cookie';

export default {
    name:'TipScriptRecordNew',
    components: {
        AddRole,
        GetActionNew
    },
    props: {
        group: {
            type: String,
            required: true
        },
        offsetBottom:{
            type: Number,
            required: true
        }
    },
    data() {
        return {
            isShow:true,
            language:'',
            memberId:'',
            isPause:false,
            executeDisabled: false,
            backDisabled: false,
            autoSaveScript: null,
            isSavingScript: false,
            memberList:[],
            size: {
                width: 300,
                height: 300
            }
        };
    },
    watch:{
        '$store.state.map.mapViewLoadedCount': function (val) {
            Vue.prototype.$jlmap.setOptions(this.$store.state.scriptRecord.mapLocation);
            this.isPause = !(this.$store.state.scriptRecord.simulationPause);
        },
        '$store.state.scriptRecord.bgSet': function (val) {
            this.backDisabled = val;
        }
    },
    beforeDestroy() {
        this.clearAutoSave();
        this.$store.dispatch('scriptRecord/updateBgSet', false);
    },
    mounted() {
        this.initData();
        this.language = this.$route.query.lang == 'en' ? this.$t('scriptRecord.english') : this.$t('scriptRecord.chinese');
        getDraftScriptByGroupNew(this.group).then(response=>{
            this.backDisabled = response.data.bgSet;
            this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
        });
    },
    methods:{
        refresh() {
            this.initData();
        },
        initData() {
            getScriptPlayMemberNew(this.group).then(resp => {
                const lastData = JSON.stringify(resp.data);
                this.memberList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
            }).catch(error => {
                this.$message(error.message);
            });
        },
        minisize() {
            if (this.isShow) {
                this.isShow = false;
            } else {
                this.isShow = true;
            }
        },
        changeRole() {

        },
        covert(data, roleTypeList) {
            let lastData = data;
            roleTypeList.forEach(function(element) {
                const rolename = element.value;
                if (Cookies.get('user_lang') == 'en') {
                    lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
                } else {
                    lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
                }
            });
            lastData = JSON.parse(lastData);
            lastData.forEach(each=>{
                const name = each.name == undefined ? '' : '-' + each.name;
                const deviceName = each.deviceName == undefined ? '' : '-' + each.deviceName;
                each.name = each.role + deviceName + name;
            });
            return lastData;
        },
        setAction() {

        },
        pauseScript() {
            simulationPause(this.group).then(resp => {
                this.$store.dispatch('scriptRecord/updateSimulationPause', true);
            }).catch(() => {
                this.$messageBox(this.$t('scriptRecord.pauseFail'));
            });
        },
        saveScenesData() {
            this.isSavingScript = true;
            saveScriptDataNew(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();
                }
            });
        },
        saveScenesStage() {
            const data = Vue.prototype.$jlmap.$options;
            const group = this.$route.query.group;
            const dataZoom = {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
            saveScriptScenesNew(this.group).then(resp => {
                updateMapLocationNew(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((error) => {
                this.$messageBox(`${this.$t('scriptRecord.saveBackgroundFail')}: ${error.message}`);
            });
        },
        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;
            }
        },
        executePlayScript() {
            executeScriptNew(this.group).then(resp => {
                this.$store.dispatch('scriptRecord/updateSimulationPause', false);
            }).catch(() => {
                this.$messageBox(this.$t('scriptRecord.recoverFail'));
            });
        },
        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(() => {
                dumpScriptDataNew(group).then(resp => {
                    this.$parent.resetBeginTime();
                    // this.$parent.$refs['display'].$refs['menuScript'].resetBeginTime();
                    this.$refs['getAction'].loadInitData();
                    this.$refs['addRole'].initData();
                    this.initData();
                    this.initAutoSaveScript();
                    this.$store.dispatch('scriptRecord/updateBgSet', false);
                    this.$message.success(this.$t('scriptRecord.resetDataSuccess'));
                }).catch(() => {
                    this.$messageBox(this.$t('scriptRecord.resetDataFail'));
                });
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.selectRolesTitle{

}
.button-group{
    position: absolute;
    bottom: 0;
}
.eachScriptPanel{
  height: 300px;
  display: inline-block;
  width:100%;
}
.scriptPanelLeft{
    width: 330px;
    height: 100%;
    vertical-align: top;
    position: absolute;
    left: 0;
    top: 0;
}
.scriptPanelRight{
    display: inline-block;
    width: 680px;
    vertical-align: top;
}
.scriptRecordNew{
    position: absolute;
    width: 700px;
    z-index: 10;
    padding-top: 28px;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%) translateY(0);
}
.scriptRecordNewTitle{
    position: absolute;
    background: #fff;
    border-radius: 5px 5px 0px 0px ;
    padding: 5px 0px;
    width: 100px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    top:0;
}
.scriptRecordNewIn{
    padding: 10px;
    background: #fff;
    border-radius: 5px 5px 0px 0px ;
    box-shadow: -1px -1px 3px #656565;
}
.scriptPanelRight{

}
</style>