323 lines
12 KiB
Vue
323 lines
12 KiB
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="!backDisabled||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-tabs>
|
|
</div>
|
|
<div class="scriptRecordNewTitle" @click="minisize">
|
|
<span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue';
|
|
import GetActionNew from '../scriptRecord/getActionNew';
|
|
import {getScriptMemberDataNew, executeScriptNew, dumpScriptDataNew, saveScriptDataNew, saveScriptScenesNew, updateMapLocationNew, simulationPause} from '@/api/simulation';
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
|
import {getDraftScriptByGroupNew, changeScriptRole} from '@/api/script';
|
|
import Cookies from 'js-cookie';
|
|
|
|
export default {
|
|
name:'TipScriptRecordNew',
|
|
components: {
|
|
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,
|
|
mapLocation:null,
|
|
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);
|
|
if (this.mapLocation) {
|
|
const newMapLocation = {'offsetX': this.mapLocation.x, 'offsetY': this.mapLocation.y, 'scaleRate': this.mapLocation.scale};
|
|
Vue.prototype.$jlmap.setOptions(newMapLocation);
|
|
}
|
|
if (this.$store.state.scriptRecord.bgSet) {
|
|
this.$store.dispatch('training/setPrdType', null);
|
|
}
|
|
},
|
|
'$store.state.scriptRecord.bgSet': function (val) {
|
|
this.backDisabled = val;
|
|
},
|
|
'$store.state.scriptRecord.simulationPause': function(val) {
|
|
this.isPause = !(this.$store.state.scriptRecord.simulationPause);
|
|
},
|
|
'$store.state.map.runPlanStatus':function (val) {
|
|
this.initData();
|
|
this.$refs.getAction.loadInitData();
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.clearAutoSave();
|
|
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
|
this.$store.dispatch('scriptRecord/updateRole', null);
|
|
},
|
|
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.mapLocation = response.data.mapLocation;
|
|
this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
|
|
if (response.data.bgSet) { this.$store.dispatch('map/setRunPlanStatus', true); }
|
|
});
|
|
},
|
|
methods:{
|
|
initData() {
|
|
getScriptMemberDataNew(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(member) {
|
|
if (member) {
|
|
// this.$store.dispatch('scriptRecord/updateIsScriptCommand', true);
|
|
this.switchMode(member);
|
|
}
|
|
},
|
|
switchMode(role) {
|
|
changeScriptRole(this.group, role).then(res=>{
|
|
let prdType = '';
|
|
const memberInfo = this.memberList.find(member=>{
|
|
return member.id == role;
|
|
});
|
|
if (memberInfo) {
|
|
if (memberInfo.role == '行值') {
|
|
prdType = '01';
|
|
} else if (memberInfo.role == '行调') {
|
|
prdType = '02';
|
|
} else if (memberInfo.role == '司机') {
|
|
prdType = '04';
|
|
} else {
|
|
prdType = '';
|
|
}
|
|
}
|
|
this.$store.dispatch('training/setPrdType', prdType);
|
|
ConstConfig.ConstSelect.roleTypeNew.forEach(each=>{
|
|
if (each.label == memberInfo.role) {
|
|
this.$store.dispatch('scriptRecord/updateRole', each.value);
|
|
}
|
|
});
|
|
}).catch(()=>{
|
|
this.$messageBox('切换角色失败');
|
|
});
|
|
},
|
|
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.$store.dispatch('training/setPrdType', null);
|
|
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.$refs['getAction'].loadInitData();
|
|
this.initData();
|
|
this.memberId = '';
|
|
this.$store.dispatch('map/setRunPlanStatus', false);
|
|
this.$store.dispatch('training/setPrdType', '01');
|
|
// 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;
|
|
z-index: 2;
|
|
}
|
|
.scriptPanelRight{
|
|
width: 680px;
|
|
}
|
|
.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 ;
|
|
height: 380px;
|
|
box-shadow: -1px -1px 3px #656565;
|
|
}
|
|
.scriptPanelRight{
|
|
|
|
}
|
|
</style>
|