joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

剧本编制页面结构调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2019-08-20 13:21:38 +08:00
parent adc6828060
commit 0db73aba5f
3 changed files with 156 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/display/scriptRecord/addAction.vue
View File

@ -1,17 +1,19 @@
<template>
<div>
<el-card class="conversitionCard">
<div class="addConversition">添加对话</div>
<el-form :model="modalData" ref="modalData" :rules="rules" label-width="100px" class="actionInfo" label-position="right">
<el-form-item label="主体角色" class="conditionVO" prop="actionVO.memberId">
<!-- <el-form-item label="动作类型" class="conditionVO" prop="actionVO.type" >
<el-select v-model="modalData.actionVO.type " placeholder="请选择动作类型" @change="changeType" :disabled="deviceTypeReadOnly||isPause">
<el-option v-for="actionType in actionTypeList" :key="actionType.label" :label="actionType.label" :value="actionType.value"></el-option>
</el-select>
</el-form-item> -->
<el-form-item :label="memberName" class="conditionVO" prop="actionVO.memberId">
<el-select v-model="modalData.actionVO.memberId" placeholder="请选择主体角色" :disabled="isPause&&isNotModify">
<el-option v-for="member in memberList" :key="member.id" :label="member.role+(member.name==undefined?'':member.name)" :value="member.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="动作类型" class="conditionVO" prop="actionVO.type" >
<el-select v-model="modalData.actionVO.type " placeholder="请选择动作类型" @change="changeType" :disabled="deviceTypeReadOnly||isPause">
<el-option v-for="actionType in actionTypeList" :key="actionType.label" :label="actionType.label" :value="actionType.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目标角色" class="conditionVO" prop="actionVO.targetId" v-if="isConversitionAdd">
<el-form-item label="接收者" class="conditionVO" prop="actionVO.targetId" v-if="isConversitionAdd">
<el-select v-model="modalData.actionVO.targetId" placeholder="请选择目标角色" :disabled="isPause&&isNotModify">
<el-option v-for="member in memberList" :key="member.id" :label="member.role+(member.name==undefined?'':member.name)" :value="member.id"></el-option>
</el-select>
@ -38,6 +40,8 @@
<el-button type="primary" @click="addScriptActionInfo('modalData')" :disabled="isPause&&isNotModify" :loading="modifying">{{buttonName}}</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
@ -102,6 +106,7 @@
isPause:false,
isNotModify:true,
modifying:false,
memberName:"讲述者",
isConversitionAdd:true,
isCommandAdd:false,
actionTypeList:DeviceTypeDic.ConstSelect.actionType,
@ -216,6 +221,7 @@
{
this.$refs['modalData'].resetFields();
// this.$nextTick(function(){
this.memberName="讲述者";
this.deviceTypeReadOnly=false;
this.modalData.actionVO.type="Conversation";
this.modalData.actionVO.memberId="";
@ -243,6 +249,7 @@
switch(index)
{
case "Conversation":{
this.memberName="讲述者";
this.isConversitionAdd=true;
this.isCommandAdd=false;
this.isJinLu=false;
@ -250,6 +257,7 @@
break;
}
case "Command":{
this.memberName="执行者";
this.isConversitionAdd=false;
this.isCommandAdd=true;
//
@ -330,6 +338,10 @@
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.addConversition{
margin-left:10px;
}
.addAction{
margin-top: 20px;
margin-left: 5px;
@ -348,4 +360,13 @@
.textareaStyle{
width:300px;
}
.conversitionCard{
margin-left: 20px;
padding-bottom: 20px;
margin-top: 10px;
}
.addConversition{
font-size:15px;
padding: 20px 10px;
}
</style>

51
src/views/display/scriptRecord/getAction.vue
View File

@ -1,14 +1,14 @@
<template>
<div>
<div class="actionPaneInner">
<div class="actionList">
<span class="titleStyle">剧本动作</span>
</div>
<div class="tab-pane-big">
<el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar">
<add-action ref="addBehavior" :group="group" @create="create" :buttonName="buttonName" :operateType="operateType" @modifyButtonName="modifyButtonName" class="addScript"></add-action>
<div class="vertialLine"></div>
<!-- <div class="vertialLine"></div> -->
<div class="block actionListTable">
<el-timeline :reverse="reverse">
<el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar">
<el-timeline :reverse="reverse" class="el_timeline">
<el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
<el-card>
<div class="actionTable">
@ -23,10 +23,10 @@
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-scrollbar>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
@ -137,10 +137,14 @@
},
create(){
this.reloadTable();
this.$nextTick(function(){
debugger;
var div = this.$refs['elActionScrollbar'].$refs['wrap'];
div.scrollTop=this.$refs['elActionScrollbar'].wrap.scrollHeight;
});
},
modifyAction(row){
// var div = this.$refs['elActionScrollbar'].$refs['wrap'];
// div.scrollTop=this.$refs['elActionScrollbar'].wrap.scrollHeight;
this.operateType="modify";
this.buttonName="修改动作"
this.$refs.addBehavior.doShow(row);
@ -154,6 +158,10 @@
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.actionPaneInner{
height:100%;
padding-top:70px;
}
.addScript{
float:left;
width:450px;
@ -161,24 +169,31 @@
position: fixed;
}
.actionListTable{
margin-top: 15px;
margin-left: 5px;
font-size: 15px;
width:452px;
width:490px;
display: inline-block;
margin-left:450px;
height:100%;
}
.actionList{
margin-top: 10px;
margin-left: 5px;
padding-top: 20px;
margin-left: 20px;
font-size: 15px;
margin-bottom:10px;
padding-bottom: 15px;
position: absolute;
top: 0;
left: 0;
margin-right: 20px;
width: 940px;
border-bottom: 1px #ccc solid;
}
.titleStyle{
margin-left:10px;
}
.tab-pane-big{
height:380px;
height:100%;
padding-bottom: 20px;
position: relative;
}
.actionTable{
width:370px;
@ -193,10 +208,14 @@
display: inline-block;
}
.vertialLine{
height: 380px;
height: 100%;
margin-left: 440px;
border-right: 1px #dadada solid;
position: fixed;
position:absolute;
width: 0px;
}
.el_timeline{
width: 470px;
margin-top:10px;
}
</style>

93
src/views/display/tipScriptRecord.vue
View File

@ -1,25 +1,13 @@
<template>
<div class="reminder-drag">
<div class="reminder-box" ref="drapBox">
<div class="tip-title">
<i class="icon el-icon-minus" @click="shrink" v-show="isShrink"></i>
<i class="icon el-icon-plus" @click="shrink" v-show="!isShrink"></i>
<p style="color: #fff;" v-if="isShrink">
<span>{{ title }}</span>
</p>
</div>
<div class="tip-body-box" ref="dragBody">
<div class="tip-body">
<div>
<div class="reminder-box" ref="drapBox" :style="{height:'100%'}">
<div class="actionPane">
<get-action ref="getAction" :group="group"></get-action>
</div>
<!-- <el-button-group class="button-group1"> -->
<!-- </el-button-group> -->
<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="primary" @click="saveMaplocation">{{$t('scriptRecord.saveMaplocation')}}</el-button>
<!-- <el-button type="primary" @click="saveMaplocation">{{$t('scriptRecord.saveMaplocation')}}</el-button> -->
<el-button type="danger" @click="dumpScenesData">重置剧本</el-button>
<el-button type="primary" @click="saveScenesStage">{{$t('scriptRecord.saveBackground')}}</el-button>
<el-button type="success" @click="saveScenesData" :loading="isSavingScript" >{{$t('scriptRecord.saveData')}}</el-button>
@ -27,8 +15,6 @@
</el-button-group>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
@ -64,7 +50,7 @@
},
mounted(){
this.initAutoSaveScript();
this.shrink();
// this.shrink();
},
beforeDestroy() {
this.clearAutoSave();
@ -122,12 +108,23 @@
});
},
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 => {
// this.isSaveStage = false;
updateMapLocation(group,dataZoom).then(response=>{
// this.$message.success('更新定位成功');
this.$message.success('保存背景成功');
}).catch(error => {
this.$messageBox(`更新定位失败: ${error.message}`);
});
// this.isSaveStage = false;
// this.$message.success('保存背景成功');
}).catch(error => {
this.$messageBox('保存背景失败!');
})
},
saveScenesData() {
this.isSavingScript=true;
@ -168,14 +165,7 @@
},
saveMaplocation()
{
let data=Vue.prototype.$jlmap.$options;
let group=this.$route.query.group;
let dataZoom={scale:data.scaleRate,x:data.offsetX,y:data.offsetY};
updateMapLocation(group,dataZoom).then(response=>{
this.$message.success('更新定位成功');
}).catch(error => {
this.$messageBox(`更新定位失败: ${error.message}`);
});
}
}
}
@ -183,12 +173,14 @@
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.tip-body-box {
position: relative;
// height: 540px;
}
// .tip-body-box {
// position: relative;
// height:100%;
// }
.tab-pane-big{
height:420px;
// width:100%;
// height:100%;
}
.breadColor{
color:#fff;
@ -197,45 +189,27 @@
.reminder-box {
position: absolute;
float: left;
left: 15px;
bottom: 15px;
width: 995px;
height: 540px;
left: 0px;
top:0px;
width: 955px;
height:100%;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
z-index: 10;
font-size: 18px;
.tip-title {
width: 100%;
overflow: hidden;
height: 40px;
display: flex;
align-items: center;
flex-direction: row-reverse;
background-color: #409EFF;
border-radius: 5px 5px 0 0;
justify-content: space-between;
padding: 0 10px;
.actionPane{
height: 100%;
padding-bottom: 80px;
}
.tip-body {
height: 500px;
padding: 10px;
.list-label {
width: 105px;
}
.button-group{
margin-top:15px;
margin-left: 20px;
float:right;
}
.button-group1{
margin-top:15px;
margin-left: 20px;
float:left;
position: absolute;
bottom: 30px;
right: 20px;
}
.actionInfo{
margin-top:30px;
@ -252,7 +226,6 @@
.titleStyle{
margin-left:10px;
}
}
.icon {
float: right;