增加 替换背景的操作

src/api/simulation.js

@@ -147,6 +147,30 @@ export function modifyScriptActionNew(group, data) {
     });
 }
 
+/** 开始替换 */
+export function startReplaceBg(group) {
+    return request({
+        url: `/api/scriptSimulation/${group}/replace/start`,
+        method: 'put'
+    });
+}
+
+/** 确认替换 */
+export function confirmReplaceBg(group) {
+    return request({
+        url: `/api/scriptSimulation/${group}/replace/confirm`,
+        method: 'put'
+    });
+}
+
+/** 放弃替换 */
+export function cancelReplaceBg(group) {
+    return request({
+        url: `/api/scriptSimulation/${group}/replace/cancel`,
+        method: 'put'
+    });
+}
+
 /** 分页查询存在的仿真 */
 export function getExistingSimulation(params) {
     return request({

src/i18n/langs/en/scriptRecord.js

@@ -109,5 +109,10 @@ export default {
     revokeScriptTip: 'This action will undo release script, whether to continue?',
     inputScriptName: 'Please input script name',
     selectMap: 'Please select map',
-    inputScriptDescription: 'Please input script description'
+	inputScriptDescription: 'Please input script description',
+
+
+	startReplaceBg: '替换背景',
+	confirmReplaceBg: '确认替换',
+	cancelReplaceBg: '放弃替换'
 };

src/i18n/langs/zh/scriptRecord.js

@@ -110,5 +110,9 @@ export default {
     revokeScriptTip: '此操作将撤销发布剧本申请, 是否继续?',
     inputScriptName: '请输入剧本名称',
     selectMap: '请选择地图',
-    inputScriptDescription: '请输入剧本描述'
+	inputScriptDescription: '请输入剧本描述',
+
+	startReplaceBg: '替换背景',
+	confirmReplaceBg: '确认替换',
+	cancelReplaceBg: '放弃替换'
 };

src/utils/baseUrl.js

@@ -5,7 +5,7 @@ export function getBaseUrl() {
         BASE_API = 'https://test.joylink.club/jlcloud';
         // BASE_API = 'http://192.168.8.107:9000'; // 袁琪
         // BASE_API = 'http://192.168.8.114:9000'; // 旭强
-        // BASE_API = 'http://192.168.3.175:9000'; // 张赛
+        BASE_API = 'http://192.168.8.109:9000'; // 张赛
         // BASE_API = 'http://192.168.8.110:9000'; // 杜康
         // BASE_API = 'http://b29z135112.zicp.vip';
         // BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康

src/views/newMap/chatView/chatBox.vue

@@ -138,6 +138,7 @@
           <chat-member-list ref="chatMemberList" :conversition-member-list="conversitionMemberList" :simulation-users="simulationUsers" />
         </div>
       </template>
+	  <div v-if="maskShow" class="mask"/>
     </div>
     <audio id="teleRing" :src="teleRing" preload loop />
     <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
@@ -166,7 +167,11 @@ export default {
         userRole: {
             type: String,
             required: true
-        }
+		},
+		isReplaceBg: {
+			type: Boolean,
+			default: false
+		}
     },
     data() {
         return {
@@ -217,7 +222,10 @@ export default {
         },
         IsAnswering() {
             return !(this.$route.path.includes('refereeJsxtDisplay'));
-        },
+		},
+		maskShow() {
+			return this.isReplaceBg;
+		},
         userId() {
             return this.$store.state.user.id;
         },
@@ -1309,6 +1317,28 @@ export default {
     -webkit-animation: isInviting infinite 1s;	/* Safari 和 Chrome */
     -o-animation: isInviting infinite 1s;	/* Opera */
 }
+
+.mask {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #000;
+	opacity: 0.7;
+	z-index: 2000;
+	&::before{
+		content: '';
+		position: absolute;
+		top:0;
+		right:0;
+		bottom:0;
+		left:0;
+		background: #aaa;
+		filter: blur(20px);
+	}
+}
+
 #teleName{
     background: #6BBE16;
     position: absolute;

src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue

@@ -2,9 +2,9 @@
   <div>
     <div class="display-draft">
       <el-button-group>
-        <el-button v-if="!isScriptCommand" type="success" :disabled="isDisable || dataError" @click="selectBeginTime">{{ $t('scriptRecord.drivingByPlan') }}</el-button>
+        <el-button v-if="!isScriptCommand||isReplaceBg" type="success" :disabled="isDisable||dataError" @click="selectBeginTime">{{ $t('scriptRecord.drivingByPlan') }}</el-button>
-        <el-button v-if="!isScriptCommand" type="danger" :disabled="dataError" @click="end">初始化</el-button>
+        <el-button v-if="!isScriptCommand||isReplaceBg" type="danger" :disabled="dataError" @click="end">初始化</el-button>
-        <el-button type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
+        <el-button v-if="!isReplaceBg" type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
       </el-button-group>
     </div>
     <demon-menu
@@ -34,12 +34,15 @@
       :group="group"
       :offset-bottom="offsetBottom"
       :offset="offset"
+	  :isReplaceBg="isReplaceBg"
       @resetChat="resetChat"
+	  @setReplace="setReplace"
     />
     <chat-box
       ref="chatbox"
       :group="group"
       :user-role="userRole"
+	  :isReplaceBg="isReplaceBg"
     />
   </div>
 </template>
@@ -96,7 +99,8 @@ export default {
     data() {
         return {
             isDisable: false,
-            isScriptCommand:false,
+			isScriptCommand:false,
+			isReplaceBg: false,
             userRole:''
         };
     },
@@ -234,7 +238,10 @@ export default {
         },
         resetChat() {
             // this.$refs.chatbox.resetCoversition();
-        }
+		},
+		setReplace(isRp) {
+			this.isReplaceBg = isRp
+		}
     }
 };
 </script>

src/views/scriptManage/tipScriptRecord.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="position:relative">
     <div class="scriptRecordNew" :style="{bottom:(offsetBottom-15)+'px'}">
       <div v-show="isShow" class="scriptRecordNewIn">
         <el-tabs type="card">
@@ -24,12 +24,13 @@
                     </div>
                   </div>
                 </div>
-                <el-button-group class="button-group">
+                <el-button-group class="button-group" v-if="!isReplaceBg">
-                  <el-button v-if="isPause" size="small" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
+					<el-button v-if="isPause" size="small" type="primary" :disabled="executeDisabled" @click="pauseScript">{{ $t('scriptRecord.drivingPause') }}</el-button>
-                  <el-button v-else size="small" type="primary" :disabled="executeDisabled" @click="executePlayScript">恢复</el-button>
+					<el-button v-else size="small" type="primary" :disabled="executeDisabled" @click="executePlayScript">恢复</el-button>
-                  <el-button size="small" type="danger" :disabled="!backDisabled" @click="dumpScenesData">{{ $t('scriptRecord.resetScript') }}</el-button>
+					<el-button size="small" type="danger" :disabled="!backDisabled" @click="dumpScenesData">{{ $t('scriptRecord.resetScript') }}</el-button>
-                  <el-button size="small" type="primary" :disabled="backDisabled" @click="saveScenesStage">{{ $t('scriptRecord.saveBackground') }}</el-button>
+					<el-button size="small" type="primary" v-if="backDisabled" @click="startReplaceBg">{{ $t('scriptRecord.startReplaceBg') }}</el-button>
-                  <el-button size="small" type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
+					<el-button size="small" type="primary" v-else :disabled="backDisabled" @click="saveScenesStage">{{ $t('scriptRecord.saveBackground') }}</el-button>
+					<el-button size="small" type="success" :loading="isSavingScript" @click="saveScenesData">{{ $t('scriptRecord.saveData') }}</el-button>
                 </el-button-group>
               </div>
               <div class="scriptPanelRight">
@@ -50,10 +51,15 @@
             </div>
           </el-tab-pane>
         </el-tabs>
-      </div>
+		<div v-if="maskShow" class="mask"/>
-      <div class="scriptRecordNewTitle" @click="minisize">
+		<el-button-group v-if="isReplaceBg" class="button-group" style="padding: 0 0 10px 10px" >
-        <span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
+		  <el-button size="small" type="primary"  @click="confirmReplaceBg">{{ $t('scriptRecord.confirmReplaceBg') }}</el-button>
-      </div>
+		  <el-button size="small" type="info"  @click="cancelReplaceBg">{{ $t('scriptRecord.cancelReplaceBg') }}</el-button>
+		</el-button-group>
+	  </div>
+	  <div class="scriptRecordNewTitle" @click="minisize">
+		<span class="titleStyle">{{ $t('scriptRecord.scriptRecordTitle') }}</span>
+	  </div>
     </div>
     <add-script-member ref="addScriptMember" @addScriptMember="addScriptMember" />
   </div>
@@ -68,7 +74,7 @@ import {covertMemberData} from '@/views/newMap/displayNew/utils';
 import GetActionNew from './getAction';
 import AllScriptRole from './allScriptRole';
 import { getToken } from '@/utils/auth';
-import {executeScriptNew, dumpScriptDataNew, saveScriptDataNew, saveScriptScenesNew, updateMapLocationNew, simulationPause} from '@/api/simulation';
+import {executeScriptNew, dumpScriptDataNew, saveScriptDataNew, saveScriptScenesNew, updateMapLocationNew, simulationPause, startReplaceBg, confirmReplaceBg, cancelReplaceBg} from '@/api/simulation';
 export default {
     name:'TipScriptRecord',
     components: {
@@ -88,7 +94,11 @@ export default {
         offset:{
             type: Number,
             required: true
-        }
+        },
+		isReplaceBg: {
+			type: Boolean,
+			default: false
+		}
     },
     data() {
         return {
@@ -123,7 +133,10 @@ export default {
         },
         orignalUserRoleId() {
             return this.$store.state.training.orignalUserRoleId;
-        }
+		},
+		maskShow() {
+			return this.isReplaceBg;
+		}
     },
     watch:{
         '$store.state.map.mapViewLoadedCount': function (val) {
@@ -518,7 +531,29 @@ export default {
             );
             this.oldMember = Object.assign({}, role);
             this.$refs.allScriptRole.updateLoading();
-        }
+		},
+		startReplaceBg() {
+			startReplaceBg(this.group).then(resp => {
+				this.$emit('setReplace', true);
+			}).catch(error => {
+				this.$messageBox(error.message);
+			})
+		},
+		confirmReplaceBg() {
+			confirmReplaceBg(this.group).then(resp => {
+				this.$message.success('替换成功');
+				this.$emit('setReplace', false);
+			}).catch(error => {
+				this.$messageBox(error.message);
+			})
+		},
+		cancelReplaceBg() {
+			cancelReplaceBg(this.group).then(resp => {
+				this.$emit('setReplace', false);
+			}).catch(error => {
+				 this.$messageBox(error.message);
+			})
+		}
     }
 };
 </script>
@@ -529,6 +564,7 @@ export default {
 .button-group{
     position: absolute;
     bottom: 0;
+	z-index: 5;
 }
 .eachScriptPanel{
   height: 300px;
@@ -609,5 +645,26 @@ export default {
     text-align: center;
     display: inline-block;
 }
+
+.mask {
+	position: absolute;
+    top: 28px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0.5;
+    z-index: 2;
+	&::before {
+		content: '';
+		position: absolute;
+		top:0;
+		right:0;
+		bottom:0;
+		left:0;
+		background: #aaa;
+		filter: blur(20px);
+	}
+}
 </style>