From 0db73aba5f089d6c95edb027ab27030105b04d2e Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Tue, 20 Aug 2019 13:21:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=A7=E6=9C=AC=E7=BC=96=E5=88=B6=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=93=E6=9E=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/display/scriptRecord/addAction.vue |  97 +++++++-----
 src/views/display/scriptRecord/getAction.vue |  51 +++++--
 src/views/display/tipScriptRecord.vue        | 151 ++++++++-----------
 3 files changed, 156 insertions(+), 143 deletions(-)

diff --git a/src/views/display/scriptRecord/addAction.vue b/src/views/display/scriptRecord/addAction.vue
index 2079ded0f..0c48d20d0 100644
--- a/src/views/display/scriptRecord/addAction.vue
+++ b/src/views/display/scriptRecord/addAction.vue
@@ -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>
diff --git a/src/views/display/scriptRecord/getAction.vue b/src/views/display/scriptRecord/getAction.vue
index 6eaf8aa73..250173c47 100644
--- a/src/views/display/scriptRecord/getAction.vue
+++ b/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,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>
diff --git a/src/views/display/tipScriptRecord.vue b/src/views/display/tipScriptRecord.vue
index 1db46d317..60210617f 100644
--- a/src/views/display/tipScriptRecord.vue
+++ b/src/views/display/tipScriptRecord.vue
@@ -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 {