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

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

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

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

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

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

@ -1,32 +1,18 @@
<template> <template>
<div class="reminder-drag"> <div class="reminder-drag">
<div class="reminder-box" ref="drapBox"> <div class="reminder-box" ref="drapBox" :style="{height:'100%'}">
<div class="tip-title"> <div class="actionPane">
<i class="icon el-icon-minus" @click="shrink" v-show="isShrink"></i> <get-action ref="getAction" :group="group"></get-action>
<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>
<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="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>
<!-- 暂停 -->
</el-button-group>
</div>
</div> </div>
<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="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>
<!-- 暂停 -->
</el-button-group>
</div> </div>
</div> </div>
</template> </template>
@ -64,7 +50,7 @@
}, },
mounted(){ mounted(){
this.initAutoSaveScript(); this.initAutoSaveScript();
this.shrink(); // this.shrink();
}, },
beforeDestroy() { beforeDestroy() {
this.clearAutoSave(); this.clearAutoSave();
@ -122,12 +108,23 @@
}); });
}, },
saveScenesStage() { 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 => { saveScriptScenes(this.group).then(resp => {
updateMapLocation(group,dataZoom).then(response=>{
// this.$message.success('更新定位成功');
this.$message.success('保存背景成功');
}).catch(error => {
this.$messageBox(`更新定位失败: ${error.message}`);
});
// this.isSaveStage = false; // this.isSaveStage = false;
this.$message.success('保存背景成功'); // this.$message.success('保存背景成功');
}).catch(error => { }).catch(error => {
this.$messageBox('保存背景失败!'); this.$messageBox('保存背景失败!');
}) })
}, },
saveScenesData() { saveScenesData() {
this.isSavingScript=true; this.isSavingScript=true;
@ -168,14 +165,7 @@
}, },
saveMaplocation() 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> <style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
.tip-body-box { // .tip-body-box {
position: relative; // position: relative;
// height: 540px; // height:100%;
} // }
.tab-pane-big{ .tab-pane-big{
height:420px; height:420px;
// width:100%;
// height:100%;
} }
.breadColor{ .breadColor{
color:#fff; color:#fff;
@ -197,61 +189,42 @@
.reminder-box { .reminder-box {
position: absolute; position: absolute;
float: left; float: left;
left: 15px; left: 0px;
bottom: 15px; top:0px;
width: 995px; width: 955px;
height: 540px; height:100%;
background-color: #fff; background-color: #fff;
border-radius: 5px;
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
font-size: 18px; font-size: 18px;
.tip-title { .actionPane{
width: 100%; height: 100%;
overflow: hidden; padding-bottom: 80px;
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;
} }
.tip-body { .list-label {
height: 500px; width: 105px;
padding: 10px; }
.button-group{
.list-label { position: absolute;
width: 105px; bottom: 30px;
} right: 20px;
.button-group{ }
margin-top:15px; .actionInfo{
margin-left: 20px; margin-top:30px;
float:right; }
} .conditionVO{
.button-group1{ width:400px;
margin-top:15px; }
margin-left: 20px; .actionList{
float:left; margin-top: 10px;
} margin-left: 5px;
.actionInfo{ font-size: 15px;
margin-top:30px; margin-bottom:10px;
} }
.conditionVO{ .titleStyle{
width:400px; margin-left:10px;
}
.actionList{
margin-top: 10px;
margin-left: 5px;
font-size: 15px;
margin-bottom:10px;
}
.titleStyle{
margin-left:10px;
}
} }
.icon { .icon {