diff --git a/src/i18n/langs/en/scriptRecord.js b/src/i18n/langs/en/scriptRecord.js
index d9612d42e..eca5fdc9c 100644
--- a/src/i18n/langs/en/scriptRecord.js
+++ b/src/i18n/langs/en/scriptRecord.js
@@ -80,5 +80,8 @@ export default {
 	drivingByPlan: 'Driving By Plan',
 	scriptBack: 'Back',
 	speakTo: 'to',
-	executeCommandTips: 'execute command: '
+	executeCommandTips: 'execute command: ',
+	language: 'language',
+	chinese: 'Chinese Simplified',
+	english: 'English'
 };
diff --git a/src/i18n/langs/zh/scriptRecord.js b/src/i18n/langs/zh/scriptRecord.js
index 0201ade15..89eb76ee4 100644
--- a/src/i18n/langs/zh/scriptRecord.js
+++ b/src/i18n/langs/zh/scriptRecord.js
@@ -81,5 +81,8 @@ export default {
 	drivingByPlan: '按计划行车',
 	scriptBack: '返回',
 	speakTo: '对',
-	executeCommandTips: '执行指令: '
+	executeCommandTips: '执行指令: ',
+	language: '语言',
+	chinese: '中文',
+	english: '英文'
 };
diff --git a/src/utils/baseUrl.js b/src/utils/baseUrl.js
index 871e8ec9c..f997f31f4 100644
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@@ -3,8 +3,8 @@ export function getBaseUrl() {
 	let BASE_API;
 	if (process.env.NODE_ENV === 'development') {
 		// BASE_API = 'https://joylink.club/jlcloud';
-		BASE_API = 'https://test.joylink.club/jlcloud';
-		// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
+		// BASE_API = 'https://test.joylink.club/jlcloud';
+		BASE_API = 'http://192.168.3.5:9000'; // 袁琪
 		// BASE_API = 'http://192.168.3.6:9000'; // 旭强
 		// BASE_API = 'http://192.168.3.41:9000'; // 王兴杰
 	} else {
diff --git a/src/views/display/index.vue b/src/views/display/index.vue
index b62d48c2c..b4d39ad94 100644
--- a/src/views/display/index.vue
+++ b/src/views/display/index.vue
@@ -227,6 +227,9 @@ export default {
 				}
 			});
 		},
+		'size.width': function(val) {
+			this.setWindowSize();
+		},
 		'$store.state.app.windowSizeCount': function() {
 			this.setWindowSize();
 		},
diff --git a/src/views/ibp/ibpDraft/ibpEdit/index.vue b/src/views/ibp/ibpDraft/ibpEdit/index.vue
index 449047ce1..00ff4636a 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/index.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/index.vue
@@ -2,7 +2,7 @@
   <transition name="el-zoom-in-center">
     <div class="mapPaint">
       <div class="map-view">
-        <ibp-plate ref="ibpPlate" :size="size"/>
+        <ibp-plate ref="ibpPlate" :size="size" />
       </div>
       <div class="map-draft">
         <ibp-operate ref="ibpOperate" @ibpChange="ibpChange" />
@@ -22,10 +22,10 @@ export default {
 	},
 	data() {
 		return {
-            size: {
-                width: this.$store.state.app.width-521,
-                height: this.$store.state.app.height - 60
-            }
+			size: {
+				width: this.$store.state.app.width-521,
+				height: this.$store.state.app.height - 60
+			}
 		};
 	},
 	watch: {
@@ -33,9 +33,9 @@ export default {
 			this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
 		}
 	},
-    created() {
-        this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
-    },
+	created() {
+		this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
+	},
 	mounted() {
 		this.$refs.ibpPlate.show();
 		this.$refs.ibpPlate.drawIbpInit();
@@ -44,10 +44,10 @@ export default {
 
 	},
 	methods: {
-        ibpChange(stationCode) {
-            this.$refs.ibpPlate.show(stationCode);
-            this.$refs.ibpPlate.drawIbpInit();
-        }
+		ibpChange(stationCode) {
+			this.$refs.ibpPlate.show(stationCode);
+			this.$refs.ibpPlate.drawIbpInit();
+		}
 	}
 };
 </script>
diff --git a/src/views/scriptManage/detail/index.vue b/src/views/scriptManage/detail/index.vue
index e4d1cc7b2..aabb955d3 100644
--- a/src/views/scriptManage/detail/index.vue
+++ b/src/views/scriptManage/detail/index.vue
@@ -23,6 +23,7 @@
 
 
 <script>
+import Cookies from 'js-cookie';
 import { UrlConfig } from '@/router/index';
 import {listPublishMap} from '@/api/jmap/map';
 import {getQuestById, updateQuest, deleteQuest} from '@/api/quest';
@@ -92,7 +93,7 @@ export default {
 			const scriptId =this.$route.params.scriptId;
 			if (parseInt(scriptId)) {
 				getQuestById(scriptId).then(resp=>{
-					const data={'name': resp.data.name, 'description': resp.data.description, 'mapId': resp.data.mapId};
+					const data={'name': resp.data.name, 'description': resp.data.description, 'mapId': resp.data.mapId,'lang':resp.data.lang};
 					this.formModel=data;
 					this.formModel.id=scriptId;
 				}).catch(error => {
@@ -103,7 +104,7 @@ export default {
 		drawUp() {
 			const data=this.formModel;
 			scriptRecordNotify(data.id).then(resp => {
-				const query = { mapId: data.mapId, group: resp.data, scriptId: data.id };
+				const query = { mapId: data.mapId, group: resp.data, scriptId: data.id,lang:data.lang };
 				this.$router.push({ path: `${UrlConfig.scriptDisplay}/script`, query });
 				launchFullscreen();
 			}).catch(error => {
@@ -112,6 +113,11 @@ export default {
 		},
 		modifyScript() {
 			const data=this.formModel;
+			if(Cookies.get("user_lang")=="en"){
+				data.lang='en';
+			}else{
+				data.lang='zh';
+			}
 			updateQuest(data.id, data).then(resp => {
 				this.$emit('refresh');
 				this.$message.success(this.$t('scriptRecord.modifyScriptSuccess'));
diff --git a/src/views/scriptManage/display/index.vue b/src/views/scriptManage/display/index.vue
index 45b12843e..8b3b9ba60 100644
--- a/src/views/scriptManage/display/index.vue
+++ b/src/views/scriptManage/display/index.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="script-parent">
-    <div class="script-card">
-      <tip-script-record ref="tipTaskRecord" :group="group" />
+    <div class="script-card" :style="{width: widthLeft+'px'}">
+      <tip-script-record ref="tipTaskRecord" :group="group" :width="widthLeft" />
     </div>
+    <drap-left :width-left="widthLeft" :min="780" :max="980" @drapWidth="drapWidth" />
     <div class="script-display">
       <display ref="display" :size="size" />
     </div>
@@ -12,15 +13,18 @@
 <script>
 import Display from '@/views/display/index';
 import TipScriptRecord from './tipScriptRecord';
+import drapLeft from '@/views/components/drapLeft/index';
 
 export default {
 	name: 'ScriptDisplay',
 	components: {
 		Display,
-		TipScriptRecord
+		TipScriptRecord,
+		drapLeft
 	},
 	data() {
 		return {
+			widthLeft: 780,
 			size: {
 				width: document.documentElement.clientWidth - 780,
 				height: document.documentElement.clientHeight
@@ -33,6 +37,14 @@ export default {
 	watch: {
 		'$store.state.app.windowSizeCount': function() {
 			this.size = { width: this.$store.state.app.width - 780, height: this.$store.state.app.height};
+		},
+		widthLeft: function(val) {
+			this.size = { width: this.$store.state.app.width - val, height: this.$store.state.app.height};
+		}
+	},
+	methods: {
+		drapWidth(width) {
+			this.widthLeft = Number(width);
 		}
 	}
 };
diff --git a/src/views/scriptManage/display/tipScriptRecord.vue b/src/views/scriptManage/display/tipScriptRecord.vue
index 974bbda1f..0cbc85d7f 100644
--- a/src/views/scriptManage/display/tipScriptRecord.vue
+++ b/src/views/scriptManage/display/tipScriptRecord.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="reminder-drag">
-    <div ref="drapBox" class="reminder-box" :style="{height:'100%'}">
+    <div ref="drapBox" class="reminder-box" :style="{height:'100%', width: width + 'px'}">
       <el-container class="actionPane">
         <el-header style="height:50px;">
           <el-row class="actionList">
             <span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
+			<span class="titleStyle">( {{$t('scriptRecord.language')}}: {{ $route.query.lang=="en"?$t('scriptRecord.english'):$t('scriptRecord.chinese') }} )</span>
           </el-row>
         </el-header>
         <el-main style="padding-top:10px;padding-bottom:10px;">
@@ -12,7 +13,8 @@
           <add-action ref="addAction" :group="group" :size="size" @create="create" @setDisabled="setDisabled" />
           <get-action ref="getAction" :group="group" :size="size" @setAction="setAction" />
         </el-main>
-        <el-footer>
+        <!-- <el-footer> -->
+        <el-card class="scriptFooter">
           <el-button-group class="button-group">
             <el-button v-if="isPause" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
             <el-button v-else type="primary" :disabled="executeDisabled" @click="executePlayScript">{{ $t('scriptRecord.recoverAndExecute') }}</el-button>
@@ -21,13 +23,10 @@
             <el-button type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
             <!-- 暂停 -->
           </el-button-group>
-        </el-footer>
+        <!-- </el-footer> -->
+        </el-card>
       </el-container>
     </div>
-	
-
-
-
   </div>
 </template>
 <script>
@@ -48,6 +47,10 @@ export default {
 		group: {
 			type: String,
 			required: true
+		},
+		width: {
+			type: Number || String,
+			required: true
 		}
 	},
 	data() {
@@ -72,6 +75,9 @@ export default {
 		},
 		'$store.state.app.windowSizeCount': function() {
 			this.size = { width: 350, height: window.innerHeight-342};
+		},
+		width: function(val) {
+			this.size = { width: val / 2 - 20, height: window.innerHeight - 342};
 		}
 	},
 	mounted() {
@@ -149,7 +155,7 @@ export default {
 			this.clearAutoSave();
 			const group=this.group;
 			this.$confirm(this.$t('scriptRecord.clearDataTip'), this.$t('global.tips'), {
-				confirmButtonText:  this.$t('global.confirm'),
+				confirmButtonText: this.$t('global.confirm'),
 				cancelButtonText: this.$t('global.cancel'),
 				type: 'warning'
 			}).then(() => {
@@ -183,13 +189,17 @@ export default {
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
     @import "src/styles/mixin.scss";
+	.reminder-drag{
+		width: 100%;
+		height: 100%;
+	}
 
     .reminder-box {
         position: absolute;
         float: left;
         left: 0px;
         top:0px;
-        width: 765px;
+        // width: 100%;
         height:100%;
         background-color: #fff;
         overflow: hidden;
@@ -201,7 +211,7 @@ export default {
         }
 
         .button-group{
-            margin-bottom: 20px;
+            margin: 8px;
             float: right;
         }
 
diff --git a/src/views/scriptManage/home.vue b/src/views/scriptManage/home.vue
index 41c79e128..8ac5c5bde 100644
--- a/src/views/scriptManage/home.vue
+++ b/src/views/scriptManage/home.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import Cookies from 'js-cookie';
 import { UrlConfig } from '@/router/index';
 import {listPublishMap} from '@/api/jmap/map';
 import {createQuest} from '@/api/quest';
@@ -93,6 +94,11 @@ export default {
 				this.$refs.dataform.validateForm(() => {
 					this.loading=true;
 					const data=this.formModel;
+					if(Cookies.get("user_lang")=="en"){
+						data.lang='en';
+					}else{
+						data.lang='zh';
+					}
 					createQuest(data).then(resp => {
 						const data={mapId: self.formModel.mapId, scriptId: resp.data};
 						this.$emit('refresh', data);
diff --git a/src/views/scriptManage/scriptRecord/addAction.vue b/src/views/scriptManage/scriptRecord/addAction.vue
index fd88ee0e5..95e888dc5 100644
--- a/src/views/scriptManage/scriptRecord/addAction.vue
+++ b/src/views/scriptManage/scriptRecord/addAction.vue
@@ -1,69 +1,69 @@
 <template>
-    <el-scrollbar class="addScript" :style="{width:size.width+'px',height:size.height+'px'}" ref="elActionScrollbar" wrapClass="scrollbar-wrapper">
-        <el-card class="conversitionCard">
-            <div class="addConversition">{{$t('scriptRecord.addConversition')}}</div>
-                <el-form size="mini"  :model="modalData" ref="modalData" :rules="rules" label-width="100px" class="conversitionInfo" label-position="right">
-                    <!-- <el-form-item label="动作类型" class="conditionVO" prop="actionVO.type" >
+  <el-scrollbar ref="elActionScrollbar" class="addScript" :style="{width:size.width+'px',height:size.height+'px'}" wrap-class="scrollbar-wrapper">
+    <el-card class="conversitionCard">
+      <div class="addConversition">{{ $t('scriptRecord.addConversition') }}</div>
+      <el-form ref="modalData" size="mini" :model="modalData" :rules="rules" label-width="100px" class="conversitionInfo" 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> -->
-                    <div>
-                        <div class="itemGroup">
-                            <el-form-item :label="$t('scriptRecord.narrator')" class="conditionVO" prop="actionVO.memberId">
-                                <el-select v-model="modalData.actionVO.memberId" :placeholder="$t('scriptRecord.narratorRules')" :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="$t('scriptRecord.receiver')" class="conditionVO" prop="actionVO.targetId">
-                                <el-select v-model="modalData.actionVO.targetId" :placeholder="$t('scriptRecord.receiverRules')" :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>
-                        </div>
-                        <div class="changeGroup">
-                            <div class="changeTop"></div>
-                            <i class="el-icon-sort changeItem" @click="changeItem"></i>
-                            <div class="changeBottom"></div>
-                        </div>
-                    </div>
-                    <el-form-item :label="$t('scriptRecord.conversitionContent')" class="conditionVO" prop="actionVO.reply">
-                        <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-button type="primary" @click="addScriptActionInfo('modalData')" :disabled="isPause&&isNotModify" :loading="modifying">{{buttonName}}</el-button>
-                    </el-form-item>
-                </el-form>
-        </el-card>
-        <el-card class="commandCard">
-            <div class="addCommand">{{$t('scriptRecord.addCommand')}}</div>
-            <el-form size="mini" :model="commandData" ref="commandData" :rules="commandRules" label-width="120px" class="actionInfo" label-position="right">
-                <el-form-item :label="$t('scriptRecord.executor')" class="conditionVO" prop="action.memberId">
-                    <el-select v-model="commandData.action.memberId" :placeholder="$t('scriptRecord.executorRules')" :disabled="isPause" @change="changeRole">
-                        <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="$t('scriptRecord.executeCommand')" class="conditionVO" prop="action.deviceCommand">
-                    <el-select v-model="commandData.action.deviceCommand " :placeholder="$t('scriptRecord.executeCommandRules')" @change="changeCommand" class="inputStyle" :disabled="isPause">
-                        <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="$t('scriptRecord.startStation')" class="conditionVO" v-if="isJinLu" prop="param.startStation">
-                    <el-select v-model="commandData.param.startStation " :placeholder="$t('scriptRecord.startStationRules')" class="inputStyle" :disabled="isPause">
-                        <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="$t('scriptRecord.endStation')" class="conditionVO" v-if="isJinLu" prop="param.endStation">
-                    <el-select v-model="commandData.param.endStation " :placeholder="$t('scriptRecord.endStationRules')" class="inputStyle" :disabled="isPause">
-                        <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="addCommandAction('commandData')" :disabled="isPause" :loading="adding">{{$t('scriptRecord.addCommandButton')}}</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-    </el-scrollbar>
+        <div>
+          <div class="itemGroup">
+            <el-form-item :label="$t('scriptRecord.narrator')" class="conditionVO" prop="actionVO.memberId">
+              <el-select v-model="modalData.actionVO.memberId" :placeholder="$t('scriptRecord.narratorRules')" :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-select>
+            </el-form-item>
+            <el-form-item :label="$t('scriptRecord.receiver')" class="conditionVO" prop="actionVO.targetId">
+              <el-select v-model="modalData.actionVO.targetId" :placeholder="$t('scriptRecord.receiverRules')" :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-select>
+            </el-form-item>
+          </div>
+          <div class="changeGroup">
+            <div class="changeTop" />
+            <i class="el-icon-sort changeItem" @click="changeItem" />
+            <div class="changeBottom" />
+          </div>
+        </div>
+        <el-form-item :label="$t('scriptRecord.conversitionContent')" class="conditionVO" prop="actionVO.reply">
+          <el-input v-model="modalData.actionVO.reply" type="textarea" class="textareaStyle" rows="3" :disabled="isPause&&isNotModify" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :disabled="isPause&&isNotModify" :loading="modifying" @click="addScriptActionInfo('modalData')">{{ buttonName }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="commandCard">
+      <div class="addCommand">{{ $t('scriptRecord.addCommand') }}</div>
+      <el-form ref="commandData" size="mini" :model="commandData" :rules="commandRules" label-width="120px" class="actionInfo" label-position="right">
+        <el-form-item :label="$t('scriptRecord.executor')" class="conditionVO" prop="action.memberId">
+          <el-select v-model="commandData.action.memberId" :placeholder="$t('scriptRecord.executorRules')" :disabled="isPause" @change="changeRole">
+            <el-option v-for="member in memberList" :key="member.id" :label="member.role+(member.name==undefined?'':member.name)" :value="member.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('scriptRecord.executeCommand')" class="conditionVO" prop="action.deviceCommand">
+          <el-select v-model="commandData.action.deviceCommand " :placeholder="$t('scriptRecord.executeCommandRules')" class="inputStyle" :disabled="isPause" @change="changeCommand">
+            <el-option v-for="deviceCommand in deviceCommandList" :key="deviceCommand.deviceCommand" :label="deviceCommand.label" :value="deviceCommand.deviceCommand" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="isJinLu" :label="$t('scriptRecord.startStation')" class="conditionVO" prop="param.startStation">
+          <el-select v-model="commandData.param.startStation " :placeholder="$t('scriptRecord.startStationRules')" class="inputStyle" :disabled="isPause">
+            <el-option v-for="station in stationList" :key="station.code" :label="station.name" :value="station.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="isJinLu" :label="$t('scriptRecord.endStation')" class="conditionVO" prop="param.endStation">
+          <el-select v-model="commandData.param.endStation " :placeholder="$t('scriptRecord.endStationRules')" class="inputStyle" :disabled="isPause">
+            <el-option v-for="station in stationList" :key="station.code" :label="station.name" :value="station.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :disabled="isPause" :loading="adding" @click="addCommandAction('commandData')">{{ $t('scriptRecord.addCommandButton') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </el-scrollbar>
 </template>
 <script>
     import Vue from 'vue';
@@ -201,12 +201,29 @@
                 let role=this.orginMemberList.find(elem=>{return elem.id==index}).role;
                 let data={role:role};
                 getAvailableDeviceCommand(data).then(response=>{
+                    if(Cookies.get("user_lang")=="en"){
+                        let tempData=response.data;
+                        tempData.forEach( element => {
+                            switch(element.deviceCommand){
+                                case "Train_Manual_Limit_Drive":{
+                                    element.label="Confirm to run to the front station";
+                                    break;
+                                }
+                                case "Train_Manual_Route_Blocking_Drive":{
+                                    element.label="Drive as the route block method";
+                                    break;
+                                }
+                            }
+                        });
+                        this.deviceCommandList=tempData;
+                    }else{
                         this.deviceCommandList=response.data;
-                        if(response.data.length<=0)
-                        {
-                            this.commandData.action.deviceCommand="";
-                            this.isJinLu=false;
-                        }
+                    }
+                    if(response.data.length<=0)
+                    {
+                        this.commandData.action.deviceCommand="";
+                        this.isJinLu=false;
+                    }
                 });
             },
             getDeviceCode(){
@@ -442,5 +459,5 @@
         margin-top:20px;
         float:left;
     }
-    
+
 </style>
diff --git a/src/views/scriptManage/scriptRecord/addRole.vue b/src/views/scriptManage/scriptRecord/addRole.vue
index 6b5be45e2..bf5262fca 100644
--- a/src/views/scriptManage/scriptRecord/addRole.vue
+++ b/src/views/scriptManage/scriptRecord/addRole.vue
@@ -1,136 +1,132 @@
 <template>
-    <el-card class="scriptTop">
-        <el-transfer v-model="selectRoleData" :data="allRoleData" class="script-player-choose" :titles="[$t('scriptRecord.allRoles'), $t('scriptRecord.actors')]" @change="handleChange">
-            <span slot-scope="{option}">
-                <span>{{option.role+(option.name==undefined?'':option.name)}}</span>
-                <el-radio-group v-model="option.gender" size="mini" class="sexGroup" @change="changeSex($event,option.key)">
-                    <el-radio-button label="Male">{{$t('scriptRecord.roleSexMale')}}</el-radio-button>
-                    <el-radio-button label="Female">{{$t('scriptRecord.roleSexFemale')}}</el-radio-button>
-                </el-radio-group>
-            </span>
-        </el-transfer>
-    </el-card>
+  <el-card class="scriptTop">
+    <el-transfer v-model="selectRoleData" :data="allRoleData" class="script-player-choose" :titles="[$t('scriptRecord.allRoles'), $t('scriptRecord.actors')]" @change="handleChange">
+      <span slot-scope="{option}">
+        <span>{{ option.role+(option.name==undefined?'':option.name) }}</span>
+        <el-radio-group v-model="option.gender" size="mini" class="sexGroup" @change="changeSex($event,option.key)">
+          <el-radio-button label="Male">{{ $t('scriptRecord.roleSexMale') }}</el-radio-button>
+          <el-radio-button label="Female">{{ $t('scriptRecord.roleSexFemale') }}</el-radio-button>
+        </el-radio-group>
+      </span>
+    </el-transfer>
+  </el-card>
 </template>
 <script>
-    import Vue from 'vue';
-    import Cookies from 'js-cookie';
-    import ConstConfig from '@/scripts/ConstConfig';
-    import {getScriptPlayMember,getScriptMemberData,cancleScriptMembers,selectScriptMembers,modifyScriptMemberSex} from '@/api/simulation';
-    export default {
-        name: 'addRole',
-        props: {
-            group: {
-                type: String,
-                required: true
-            },
-        },
-        data() {
-            return {
-                allRoleData:[],
-                selectRoleData:[],
-                sexGroup:this.$t('scriptRecord.roleSexMale'),
-            }
-        },
-        mounted(){
-            this.initData();
-        },
-        watch:{
-            '$store.state.socket.simulationStart': function (val) {
-                if(val)
-                {
-                    this.initData();
-                }
-            },
-        },
-        methods:{
-            initData(){
-                let group=this.$props.group;
-                getScriptMemberData(group).then(response=>{
-                    let lastData=JSON.stringify(response.data);
-                    this.allRoleData=this.coverData(lastData);
-                    getScriptPlayMember(group).then(response=>{
-                        let last=response.data;
-                        // let userdata=JSON.stringify(response.data)
-                        // let reg=new RegExp('\"id\":\"(.*?)\\\"','g');
-                        // let datalist=userdata.match(reg);
-                        let data=[];
-                        last.forEach(function(element){data.push(element.id)});
-                        this.selectRoleData=data;
-                    })
-                })
-            },
-            coverData(data){
-                let roleTypeList=ConstConfig.ConstSelect.roleType;
-                let lastData=data.replace(new RegExp('id','g'),'key');
-                roleTypeList.forEach(function(element){
-                    let rolename=element.value;
-                    if(Cookies.get("user_lang")=="en"){
-                        lastData=lastData.replace(new RegExp(rolename,'g'),element.enLabel);
-                    }else{
-                        
-                        lastData=lastData.replace(new RegExp(rolename,'g'),element.label);
-                    }
-                });
-                lastData=JSON.parse(lastData);
-                return lastData;
-            },
-            handleChange(value, direction, movedKeys) {
-                switch(direction)
-                {
-                    case 'right':{
-                        let group=this.$props.group;
-                        let data=movedKeys;
-                        selectScriptMembers(group,data).then(response=>{
-                            this.$message.success(this.$t('scriptRecord.selectScriptActorSuccess'));
-                            this.$emit("refresh");
-                        })
-                        .catch(error => {
-                            this.$messageBox(`${this.$t('scriptRecord.selectScriptActorFail')}: ${error.message}`);
-                            return false;
-                        });
-                        break;
-                    }
-                    case 'left':{
-                        let group=this.$props.group;
-                        let data=movedKeys;
-                        cancleScriptMembers(group,data).then(response=>{
-                            this.$emit("refresh");
-                            this.$message.success(this.$t('scriptRecord.cancleScriptActorSuccess'));
-                        })
-                        .catch(error => {
-                            this.$messageBox(`${this.$t('scriptRecord.cancleScriptActorFail')}: ${error.message}`);
-                            this.initData();
-                        });
-                    }
-                }
-            },
-            // resetData(data){
-            //     debugger;
-            //     let allRoleData=this.allRoleData;
-            //     // debugger;
-            //     data.forEach(function(element){
-            //         allRoleData.forEach(function(select){
-            //                 if(select.key==element)
-            //                 {
-            //                     debugger;
-            //                     select.disabled="disabled";
-            //                 }
-            //         });
-            //     });
-            // },
-            changeSex(event,id)
-            {
-                let group=this.$props.group;
-                let data={"gender":event};
-                modifyScriptMemberSex(group,id,data).then(response=>{
-                    this.$message.success(this.$t('scriptRecord.modifyScriptActorSexSuccess'));
-                })
-                .catch(error => {
-                    this.$messageBox(`${this.$t('scriptRecord.modifyScriptActorSexFail')}: ${error.message}`);
-                });
-            }
-        }
-    }
+import Cookies from 'js-cookie';
+import ConstConfig from '@/scripts/ConstConfig';
+import {getScriptPlayMember, getScriptMemberData, cancleScriptMembers, selectScriptMembers, modifyScriptMemberSex} from '@/api/simulation';
+export default {
+	name: 'AddRole',
+	props: {
+		group: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			allRoleData: [],
+			selectRoleData: [],
+			sexGroup: this.$t('scriptRecord.roleSexMale')
+		};
+	},
+	watch: {
+		'$store.state.socket.simulationStart': function (val) {
+			if (val) {
+				this.initData();
+			}
+		}
+	},
+	mounted() {
+		this.initData();
+	},
+	methods: {
+		initData() {
+			const group=this.$props.group;
+			getScriptMemberData(group).then(response=>{
+				const lastData=JSON.stringify(response.data);
+				this.allRoleData=this.coverData(lastData);
+				getScriptPlayMember(group).then(response=>{
+					const last=response.data;
+					// let userdata=JSON.stringify(response.data)
+					// let reg=new RegExp('\"id\":\"(.*?)\\\"','g');
+					// let datalist=userdata.match(reg);
+					const data=[];
+					last.forEach(function(element) { data.push(element.id); });
+					this.selectRoleData=data;
+				});
+			});
+		},
+		coverData(data) {
+			const roleTypeList=ConstConfig.ConstSelect.roleType;
+			let lastData=data.replace(new RegExp('id', 'g'), 'key');
+			roleTypeList.forEach(function(element) {
+				const rolename=element.value;
+				if (Cookies.get('user_lang')=='en') {
+					lastData=lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
+				} else {
+
+					lastData=lastData.replace(new RegExp(rolename, 'g'), element.label);
+				}
+			});
+			lastData=JSON.parse(lastData);
+			return lastData;
+		},
+		handleChange(value, direction, movedKeys) {
+			switch (direction) {
+			case 'right': {
+				const group=this.$props.group;
+				const data=movedKeys;
+				selectScriptMembers(group, data).then(response=>{
+					this.$message.success(this.$t('scriptRecord.selectScriptActorSuccess'));
+					this.$emit('refresh');
+				})
+					.catch(error => {
+						this.$messageBox(`${this.$t('scriptRecord.selectScriptActorFail')}: ${error.message}`);
+						return false;
+					});
+				break;
+			}
+			case 'left': {
+				const group=this.$props.group;
+				const data=movedKeys;
+				cancleScriptMembers(group, data).then(response=>{
+					this.$emit('refresh');
+					this.$message.success(this.$t('scriptRecord.cancleScriptActorSuccess'));
+				})
+					.catch(error => {
+						this.$messageBox(`${this.$t('scriptRecord.cancleScriptActorFail')}: ${error.message}`);
+						this.initData();
+					});
+			}
+			}
+		},
+		// resetData(data){
+		//     debugger;
+		//     let allRoleData=this.allRoleData;
+		//     // debugger;
+		//     data.forEach(function(element){
+		//         allRoleData.forEach(function(select){
+		//                 if(select.key==element)
+		//                 {
+		//                     debugger;
+		//                     select.disabled="disabled";
+		//                 }
+		//         });
+		//     });
+		// },
+		changeSex(event, id) {
+			const group=this.$props.group;
+			const data={'gender': event};
+			modifyScriptMemberSex(group, id, data).then(response=>{
+				this.$message.success(this.$t('scriptRecord.modifyScriptActorSexSuccess'));
+			})
+				.catch(error => {
+					this.$messageBox(`${this.$t('scriptRecord.modifyScriptActorSexFail')}: ${error.message}`);
+				});
+		}
+	}
+};
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
     @import "src/styles/mixin.scss";
@@ -140,24 +136,28 @@
     }
     .scriptTop{
         padding: 10px 10px;
-        width: 730px;
-    }
-    /deep/ {
-        .script-player-choose .el-transfer-panel__body{
-            height: 120px;
-        }
-        .script-player-choose .el-transfer-panel__list{
-            height: 120px;
-        }
-        .script-player-choose .el-transfer-panel{
-            width: 310px;
-        }
-        .el-transfer-panel__item{
-            margin-right:0px;
-        }
-        .el-transfer__buttons{
-            padding: 0 20px;
-        }
+        width: 100%;
+		/deep/ {
+			.script-player-choose .el-transfer-panel__body{
+				height: 120px;
+			}
+			.script-player-choose .el-transfer-panel__list{
+				height: 120px;
+			}
+			.script-player-choose .el-transfer-panel{
+				width: 44%;
+			}
+			.el-transfer-panel__item{
+				margin-right:0px;
+			}
+			.el-transfer__buttons{
+				padding: 0;
+				width: 12%;
+				.el-button{
+					margin: 14px auto;
+				}
+			}
+		}
     }
 </style>
 <style>
@@ -166,4 +166,3 @@
     }
 </style>
 
-                
diff --git a/src/views/scriptManage/scriptRecord/getAction.vue b/src/views/scriptManage/scriptRecord/getAction.vue
index 834754256..7911fdb7c 100644
--- a/src/views/scriptManage/scriptRecord/getAction.vue
+++ b/src/views/scriptManage/scriptRecord/getAction.vue
@@ -1,159 +1,148 @@
 <template>
-    <el-scrollbar wrapClass="scrollbar-wrapper" ref="elActionScrollbar" class="scriptBottom" :style="{width:370+'px',height:size.height+'px'}">
-            <el-timeline :reverse="reverse" class="el_timeline">
-                <el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
-                    <el-card>
-                        <div class="actionTable">
-                            <span class="detail" v-html="actionInfo.detail">
-                            </span>
-                            <span class="otherInfo" v-html="actionInfo.otherInfo"></span>
-                            <span v-if="actionInfo.isCoversition">
-                                <span class="roleClass">{{actionInfo.memberName}}</span>
-                                <span>{{$t('scriptRecord.speakTo')}}</span>
-                                <span class="roleClass">{{actionInfo.targetName}}</span>
-                                <span>: </span>
-                                <span>{{actionInfo.reply}}</span>
-                            </span>
-                            <span v-else>
-                                <span class="roleClass">{{actionInfo.memberName}}</span>
-                                <span>{{$t('scriptRecord.executeCommandTips')}}</span>
-                                <span class="commandStyle">{{actionInfo.command}}</span>
-                            </span>
-                        </div>
-                        <div class="btnGroup">
-                            <el-button type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)" v-if="actionInfo.visible">{{$t('scriptRecord.modifyConversitionButton')}}</el-button>
-                            <!-- <el-button type="danger" size="mini" @click="deleteAction(actionInfo.id)">删除</el-button> -->
-                        </div>
-                    </el-card>
-                </el-timeline-item>
-            </el-timeline>
-    </el-scrollbar>
+  <el-scrollbar ref="elActionScrollbar" wrap-class="scrollbar-wrapper" class="scriptBottom" :style="{width:370+'px',height:size.height+'px'}">
+    <el-timeline :reverse="reverse" class="el_timeline">
+      <el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
+        <el-card>
+          <div class="actionTable">
+            <span class="detail" v-html="actionInfo.detail" />
+            <span class="otherInfo" v-html="actionInfo.otherInfo" />
+            <span v-if="actionInfo.isCoversition">
+              <span class="roleClass">{{ actionInfo.memberName }}</span>
+              <span>{{ $t('scriptRecord.speakTo') }}</span>
+              <span class="roleClass">{{ actionInfo.targetName }}</span>
+              <span>: </span>
+              <span>{{ actionInfo.reply }}</span>
+            </span>
+            <span v-else>
+              <span class="roleClass">{{ actionInfo.memberName }}</span>
+              <span>{{ $t('scriptRecord.executeCommandTips') }}</span>
+              <span class="commandStyle">{{ actionInfo.command }}</span>
+            </span>
+          </div>
+          <div class="btnGroup">
+            <el-button v-if="actionInfo.visible" type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)">{{ $t('scriptRecord.modifyConversitionButton') }}</el-button>
+            <!-- <el-button type="danger" size="mini" @click="deleteAction(actionInfo.id)">删除</el-button> -->
+          </div>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </el-scrollbar>
 </template>
 <script>
-    import Vue from 'vue';
-    import {getScriptRecord,deleteScriptAction,getAvailableDeviceCommand,getScriptPlayMember,getScriptMemberData} from '@/api/simulation';
-    import ConstConfig from '@/scripts/ConstConfig';
-    export default {
-        name: 'getAction',
-        props: {
-            group: {
-                type: String,
-                required: true
-            },
-            size:{
-                type: Object,
-                required: true
-            }
-        },
-        data() {
-            return {
-                actionInfoList:[],
-                deviceCommandList:[],
-                reverse:true,
-                loading:true,
-                // behaviorName:"",
-                memberName:"",
-            }
-        },
-        mounted(){
-            this.loadInitData();
-        },
-        watch:{
-            actionInfoList: function(val){
-                this.$nextTick(function(){
-                    var div = this.$refs['elActionScrollbar'].$refs['wrap'];
-                    div.scrollTop=this.$refs['elActionScrollbar'].wrap.scrollHeight;
-                });
-            }
-        },
-        methods:{
-            loadInitData() {
-                let group=this.$route.query.group;
-                let data={role:"Driver"};
-                getAvailableDeviceCommand(data).then(response=>{
-                    this.deviceCommandList=response.data;
-                    this.loadOtherData(this.$route.query);
-                });
-            },
-            loadOtherData(obj){
-                let group=obj.group;
-                getScriptRecord(group).then(response=>{
-                    this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
-                    this.actionInfoList=[];
-                    let roleTypeList=ConstConfig.ConstSelect.roleType;
+import {getScriptRecord, deleteScriptAction, getAvailableDeviceCommand } from '@/api/simulation';
+import ConstConfig from '@/scripts/ConstConfig';
+export default {
+	name: 'GetAction',
+	props: {
+		group: {
+			type: String,
+			required: true
+		},
+		size: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			actionInfoList: [],
+			deviceCommandList: [],
+			reverse: true,
+			loading: true,
+			// behaviorName:"",
+			memberName: ''
+		};
+	},
+	watch: {
+		actionInfoList: function(val) {
+			this.$nextTick(function() {
+				var div = this.$refs['elActionScrollbar'].$refs['wrap'];
+				div.scrollTop=this.$refs['elActionScrollbar'].wrap.scrollHeight;
+			});
+		}
+	},
+	mounted() {
+		this.loadInitData();
+	},
+	methods: {
+		loadInitData() {
+			// const group=this.$route.query.group;
+			const data={role: 'Driver'};
+			getAvailableDeviceCommand(data).then(response=>{
+				this.deviceCommandList=response.data;
+				this.loadOtherData(this.$route.query);
+			});
+		},
+		loadOtherData(obj) {
+			const group=obj.group;
+			getScriptRecord(group).then(response=>{
+				this.$store.dispatch('scriptRecord/updateBgSet', response.data.bgSet);
+				this.actionInfoList=[];
+				const roleTypeList=ConstConfig.ConstSelect.roleType;
 
-                    let memberVOList=JSON.stringify(response.data.memberVOList);
-                    roleTypeList.forEach(function(element){
-                        let rolename=element.value;
-                        memberVOList=memberVOList.replace(new RegExp(rolename,'g'),element.label);
-                    });
-                    memberVOList=JSON.parse(memberVOList);
-                    let actionList=response.data.actionVOList;
+				let memberVOList=JSON.stringify(response.data.memberVOList);
+				roleTypeList.forEach(function(element) {
+					const rolename=element.value;
+					memberVOList=memberVOList.replace(new RegExp(rolename, 'g'), element.label);
+				});
+				memberVOList=JSON.parse(memberVOList);
+				const actionList=response.data.actionVOList;
 
+				actionList.forEach(element => {
 
-                    
-                    actionList.forEach(element => {
+					const member=memberVOList.find(elem=>{ return elem.id==element.memberId; });
 
-                        let member=memberVOList.find(elem=>{return elem.id==element.memberId});
-
-                        let memberName=member.name?" - "+member.name:"";
-                        switch(element.type)
-                        {
-                            case "Conversation":
-                            {
-                                let target=memberVOList.find(elem=>{return elem.id==element.targetId});
-                                let targetName=target.name?" - "+target.name:"";
-                                this.actionInfoList.push({id:element.id,isCoversition:true,memberName:member.role+memberName,targetName:target.role+targetName,reply:element.reply,row:element,visible:true});
-                                break;
-                            }
-                            case "Command":
-                            {
-                                let deviceCommand=this.deviceCommandList.find(elem=>{return elem.deviceCommand==element.deviceCommand});
-                                switch(element.deviceCommand)
-                                {
-                                    case 'Train_Manual_Route_Blocking_Drive':
-                                    {
-                                        this.actionInfoList.push({id:element.id,isCoversition:false,memberName:member.role+memberName,command:deviceCommand.label,row:element,visible:false});
-                                        break;
-                                    }
-                                    case 'Train_Manual_Limit_Drive':
-                                    {
-                                        this.actionInfoList.push({id:element.id,isCoversition:false,memberName:member.role+memberName,command:deviceCommand.label,row:element,visible:false});
-                                        break;
-                                    }
-                                    default:
-                                    {
-                                    }
-                                }
-                                break;
-                            }
-                        }
-                    });
-                    if(response.data.mapLocation)
-                    {
-                        let mapLocation={"offsetX":response.data.mapLocation.x,"offsetY":response.data.mapLocation.y,"scaleRate":response.data.mapLocation.scale};
-                        this.$store.dispatch('scriptRecord/updateMapLocation', mapLocation);
-                    }
-                    this.loading=false;
-                });
-            },
-            deleteAction(row){
-                let group=this.$props.group;
-                deleteScriptAction(group,row).then(resp => {
-                    this.reloadTable();
-                    this.$message.success('删除行为动作成功');
-                }).catch(error => {
-                    this.$messageBox(`删除行为动作失败: ${error.message}`);
-                });
-            },
-            reloadTable(){
-                this.loadInitData();
-            },
-            modifyAction(row){
-                this.$emit("setAction",row);
-            }
-        }
-    }
+					const memberName=member.name?' - '+member.name:'';
+					switch (element.type) {
+					case 'Conversation':
+					{
+						const target=memberVOList.find(elem=>{ return elem.id==element.targetId; });
+						const targetName=target.name?' - '+target.name:'';
+						this.actionInfoList.push({id: element.id, isCoversition: true, memberName: member.role+memberName, targetName: target.role+targetName, reply: element.reply, row: element, visible: true});
+						break;
+					}
+					case 'Command':
+					{
+						const deviceCommand=this.deviceCommandList.find(elem=>{ return elem.deviceCommand==element.deviceCommand; });
+						switch (element.deviceCommand) {
+						case 'Train_Manual_Route_Blocking_Drive':
+						{
+							this.actionInfoList.push({id: element.id, isCoversition: false, memberName: member.role+memberName, command: deviceCommand.label, row: element, visible: false});
+							break;
+						}
+						case 'Train_Manual_Limit_Drive':
+						{
+							this.actionInfoList.push({id: element.id, isCoversition: false, memberName: member.role+memberName, command: deviceCommand.label, row: element, visible: false});
+							break;
+						}
+						}
+					}
+					}
+				});
+				if (response.data.mapLocation) {
+					const mapLocation={'offsetX': response.data.mapLocation.x, 'offsetY': response.data.mapLocation.y, 'scaleRate': response.data.mapLocation.scale};
+					this.$store.dispatch('scriptRecord/updateMapLocation', mapLocation);
+				}
+				this.loading=false;
+			});
+		},
+		deleteAction(row) {
+			const group=this.$props.group;
+			deleteScriptAction(group, row).then(resp => {
+				this.reloadTable();
+				this.$message.success('删除行为动作成功');
+			}).catch(error => {
+				this.$messageBox(`删除行为动作失败: ${error.message}`);
+			});
+		},
+		reloadTable() {
+			this.loadInitData();
+		},
+		modifyAction(row) {
+			this.$emit('setAction', row);
+		}
+	}
+};
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
     @import "src/styles/mixin.scss";
@@ -165,7 +154,7 @@
     }
     .btnGroup{
         padding: 10px 10px 10px 10px;
-        float:right;
+        float: right;
         vertical-align: top;
         display: inline-block;
     }