剧本编制页面结构调整

src/views/display/scriptRecord/addAction.vue

@@ -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-form-item label="接收者" class="conditionVO" prop="actionVO.targetId" v-if="isConversitionAdd">
-                <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>
@@ -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>

src/views/display/scriptRecord/getAction.vue

@@ -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;
+        padding-top: 20px;
-        margin-left: 5px;
+        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>

src/views/display/tipScriptRecord.vue

@@ -1,25 +1,13 @@
 <template>
     <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>
-                <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="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 {
+    // .tip-body-box {
-        position: relative;
+    //     position: relative;
-        // height: 540px;
+    //     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;
+        left: 0px;
-        bottom: 15px;
+        top:0px;
-        width: 995px;
+        width: 955px;
-        height: 540px;
+        height:100%;
         background-color: #fff;
-        border-radius: 5px;
         overflow: hidden;
         z-index: 10;
         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 {
-            height: 500px;
-            padding: 10px;
-
         .list-label {
             width: 105px;
         }
         .button-group{
-                margin-top:15px;
+            position: absolute;
-                margin-left: 20px;
+            bottom: 30px;
-                float:right;
+            right: 20px;
-            }
-            .button-group1{
-                margin-top:15px;
-                margin-left: 20px;
-                float:left;
         }
         .actionInfo{
             margin-top:30px;
@@ -252,7 +226,6 @@
         .titleStyle{
             margin-left:10px;
         }
-        }
 
         .icon {
             float: right;