剧本代码调整
This commit is contained in:
joylink_cuiweidong
parent
9126397070
commit
d942ae7916
@ -1,13 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<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 style="padding:0px 10px;height: 240px;" />
|
||||
<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 style="padding:0px 10px;height: 240px;">
|
||||
<el-tab-pane label="选择待出演剧本角色">
|
||||
<div class="eachScriptPanel">
|
||||
<add-role ref="addRole" :group="group" @refresh="refresh" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@ -15,21 +33,23 @@
|
||||
</div>
|
||||
<div class="scriptRecordNewTitle" @click="minisize">
|
||||
<span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
|
||||
<!-- <span class="titleStyle">( {{ $t('scriptRecord.language') }}: {{ $route.query.lang=="en"?$t('scriptRecord.english'):$t('scriptRecord.chinese') }} )</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="selectRoles">
|
||||
<div class="selectRolesTitle">选择成员角色</div>
|
||||
<add-role ref="addRole" :group="group" @refresh="refresh" />
|
||||
</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
|
||||
AddRole,
|
||||
GetActionNew
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
@ -44,14 +64,52 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isShow:true,
|
||||
language:''
|
||||
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) {
|
||||
@ -59,28 +117,141 @@ export default {
|
||||
} 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>
|
||||
// .selectRoles{
|
||||
// position: absolute;
|
||||
// width: 700px;
|
||||
// left: 5px;
|
||||
// bottom: 424px;
|
||||
// z-index: 10;
|
||||
// background: #fff;
|
||||
// height: 200px;
|
||||
// border-radius: 5px;
|
||||
// }
|
||||
.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;
|
||||
max-height: 400px;
|
||||
z-index: 10;
|
||||
padding-top: 28px;
|
||||
left: 50%;
|
||||
@ -104,5 +275,8 @@ export default {
|
||||
background: #fff;
|
||||
border-radius: 5px 5px 0px 0px ;
|
||||
box-shadow: -1px -1px 3px #656565;
|
||||
}
|
||||
.scriptPanelRight{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
186
src/views/scriptManage/scriptRecord/getActionNew.vue
Normal file
186
src/views/scriptManage/scriptRecord/getActionNew.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<el-scrollbar ref="elActionScrollbar" wrap-class="scrollbar-wrapper" class="scriptBottom" :style="{width:370+'px',height:size.height+'px'}">
|
||||
<el-timeline :reverse="reverse" class="el_timeline">
|
||||
<el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
|
||||
<el-card>
|
||||
<div class="actionTable">
|
||||
<span class="detail" v-html="actionInfo.detail" />
|
||||
<span class="otherInfo" v-html="actionInfo.otherInfo" />
|
||||
<span v-if="actionInfo.isCoversition">
|
||||
<span class="roleClass">{{ actionInfo.memberName }}</span>
|
||||
<span>{{ $t('scriptRecord.speakTo') }}</span>
|
||||
<span class="roleClass">{{ actionInfo.targetName }}</span>
|
||||
<span>: </span>
|
||||
<span>{{ actionInfo.reply }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span class="roleClass">{{ actionInfo.memberName }}</span>
|
||||
<span>{{ $t('scriptRecord.executeCommandTips') }}</span>
|
||||
<span class="commandStyle">{{ actionInfo.command }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="btnGroup">
|
||||
<!-- <el-button v-if="actionInfo.visible" type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)">{{ $t('scriptRecord.modifyConversitionButton') }}</el-button> -->
|
||||
<!-- <el-button type="danger" size="mini" @click="deleteAction(actionInfo.id)">删除</el-button> -->
|
||||
</div>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
import {getScriptAllAction, getScriptPlayMemberNew } from '@/api/simulation';
|
||||
import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
||||
import CommandHandler from '@/scripts/cmdPlugin/CommandHandler';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
export default {
|
||||
name: 'GetActionNew',
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actionInfoList: [],
|
||||
deviceCommandList: [],
|
||||
reverse: false,
|
||||
loading: true,
|
||||
// behaviorName:"",
|
||||
memberName: ''
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
// drawWay() {
|
||||
// const drawWay = this.$route.query.drawWay;
|
||||
// return drawWay && JSON.parse(drawWay);
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
actionInfoList: function(val) {
|
||||
this.$nextTick(function() {
|
||||
var div = this.$refs['elActionScrollbar'].$refs['wrap'];
|
||||
div.scrollTop = this.$refs['elActionScrollbar'].wrap.scrollHeight;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
loadInitData() {
|
||||
this.loadOtherData(this.$route.query);
|
||||
},
|
||||
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;
|
||||
},
|
||||
loadOtherData(obj) {
|
||||
const group = obj.group;
|
||||
getScriptPlayMemberNew(this.group).then(response => {
|
||||
const lastData = JSON.stringify(response.data);
|
||||
const memberVOList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
|
||||
getScriptAllAction(group).then(resp=>{
|
||||
this.actionInfoList = [];
|
||||
const actionList = resp.data;
|
||||
actionList.forEach(element => {
|
||||
const member = memberVOList.find(elem=>{ return elem.id == element.memberId; });
|
||||
const memberName = member.name;
|
||||
switch (element.type) {
|
||||
case 'Conversation':
|
||||
{
|
||||
const target = memberVOList.find(elem=>{ return elem.id == element.targetId; });
|
||||
const targetName = target.name;
|
||||
this.actionInfoList.push({id: element.id, isCoversition: true, memberName: memberName, targetName: targetName, reply: element.reply, row: element, visible: true});
|
||||
break;
|
||||
}
|
||||
case 'Command':
|
||||
{
|
||||
const command = CommandHandler.getScriptDefinition(element.operationType);
|
||||
let operateType = command.operate.split('_')[0];
|
||||
const data = command.operate.toUpperCase();
|
||||
if (operateType == 'CM') {
|
||||
operateType = 'ControlConvertMenu';
|
||||
}
|
||||
const operateName = CMD[operateType]['CMD_' + data];
|
||||
const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式'};
|
||||
const operateTypeName = deviceTypeList[operateType];
|
||||
this.actionInfoList.push({id: element.id, isCoversition: false, memberName: memberName, command: operateTypeName + '(' + operateName.label + ')', row: element, visible: false});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message(error.message);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$message(error.message);
|
||||
});
|
||||
},
|
||||
reloadTable() {
|
||||
this.loadInitData();
|
||||
}
|
||||
// modifyAction(row) {
|
||||
// this.$emit('setAction', row);
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.actionTable{
|
||||
width:280px;
|
||||
padding: 15px 0px 10px 15px;
|
||||
display: inline-block;
|
||||
line-height: 200%;
|
||||
}
|
||||
.btnGroup{
|
||||
padding: 10px 10px 10px 10px;
|
||||
float: right;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
.el_timeline{
|
||||
width: 350px;
|
||||
margin-top:5px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
.el-timeline{
|
||||
font-size:13px;
|
||||
}
|
||||
.roleClass{
|
||||
color:#409EFF
|
||||
}
|
||||
.commandStyle{
|
||||
color:#F00;
|
||||
}
|
||||
.scriptPane{
|
||||
height: 100%;
|
||||
padding-top:200px;
|
||||
}
|
||||
.scriptBottom{
|
||||
margin-left:300px;
|
||||
margin-top: 0px;
|
||||
font-size:13px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user