剧本编制页面结构调整
This commit is contained in:
joylink_cuiweidong
parent
adc6828060
commit
0db73aba5f
@ -1,43 +1,47 @@
|
||||
<template>
|
||||
<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-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-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>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" class="conditionVO" prop="actionVO.reply" v-if="isConversitionAdd">
|
||||
<el-input v-model="modalData.actionVO.reply" type="textarea" class="textareaStyle" rows="3" :disabled="isPause&&isNotModify"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备指令" class="conditionVO" prop="actionVO.deviceCommand" v-if="isCommandAdd">
|
||||
<el-select v-model="modalData.actionVO.deviceCommand " placeholder="请选择设备指令" @change="changeCommand" class="inputStyle" :disabled="isPause&&isModify">
|
||||
<el-option v-for="deviceCommand in deviceCommandList" :key="deviceCommand.deviceCommand" :label="deviceCommand.label" :value="deviceCommand.deviceCommand"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始站台" class="conditionVO" v-if="isJinLu" prop="param.startStation">
|
||||
<el-select v-model="modalData.param.startStation " placeholder="请选择起始站台" class="inputStyle" :disabled="isPause&&isNotModify">
|
||||
<el-option v-for="station in stationList" :key="station.code" :label="station.name" :value="station.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终点站台" class="conditionVO" v-if="isJinLu" prop="param.endStation">
|
||||
<el-select v-model="modalData.param.endStation " placeholder="请选择终点站台" class="inputStyle" :disabled="isPause&&isNotModify">
|
||||
<el-option v-for="station in stationList" :key="station.code" :label="station.name" :value="station.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addScriptActionInfo('modalData')" :disabled="isPause&&isNotModify" :loading="modifying">{{buttonName}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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.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.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>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" class="conditionVO" prop="actionVO.reply" v-if="isConversitionAdd">
|
||||
<el-input v-model="modalData.actionVO.reply" type="textarea" class="textareaStyle" rows="3" :disabled="isPause&&isNotModify"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备指令" class="conditionVO" prop="actionVO.deviceCommand" v-if="isCommandAdd">
|
||||
<el-select v-model="modalData.actionVO.deviceCommand " placeholder="请选择设备指令" @change="changeCommand" class="inputStyle" :disabled="isPause&&isModify">
|
||||
<el-option v-for="deviceCommand in deviceCommandList" :key="deviceCommand.deviceCommand" :label="deviceCommand.label" :value="deviceCommand.deviceCommand"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始站台" class="conditionVO" v-if="isJinLu" prop="param.startStation">
|
||||
<el-select v-model="modalData.param.startStation " placeholder="请选择起始站台" class="inputStyle" :disabled="isPause&&isNotModify">
|
||||
<el-option v-for="station in stationList" :key="station.code" :label="station.name" :value="station.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终点站台" class="conditionVO" v-if="isJinLu" prop="param.endStation">
|
||||
<el-select v-model="modalData.param.endStation " placeholder="请选择终点站台" class="inputStyle" :disabled="isPause&&isNotModify">
|
||||
<el-option v-for="station in stationList" :key="station.code" :label="station.name" :value="station.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<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>
|
||||
|
||||
@ -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,8 +23,8 @@
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -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>
|
||||
|
||||
@ -1,32 +1,18 @@
|
||||
<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>
|
||||
<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 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-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>
|
||||
</template>
|
||||
@ -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 => {
|
||||
updateMapLocation(group,dataZoom).then(response=>{
|
||||
// this.$message.success('更新定位成功');
|
||||
this.$message.success('保存背景成功');
|
||||
}).catch(error => {
|
||||
this.$messageBox(`更新定位失败: ${error.message}`);
|
||||
});
|
||||
// this.isSaveStage = false;
|
||||
this.$message.success('保存背景成功');
|
||||
// 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,61 +189,42 @@
|
||||
.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;
|
||||
}
|
||||
.actionInfo{
|
||||
margin-top:30px;
|
||||
}
|
||||
.conditionVO{
|
||||
width:400px;
|
||||
}
|
||||
.actionList{
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.titleStyle{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.list-label {
|
||||
width: 105px;
|
||||
}
|
||||
.button-group{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 20px;
|
||||
}
|
||||
.actionInfo{
|
||||
margin-top:30px;
|
||||
}
|
||||
.conditionVO{
|
||||
width:400px;
|
||||
}
|
||||
.actionList{
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.titleStyle{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user