绘制新版个人上传

src/components/krpanoVideo/index.vue

@@ -47,6 +47,7 @@
 				petData:null,
 				redBoxData:null,
 				bgMusicData:null,
+				scale:1,
             }
         },
 		props:{
@@ -97,6 +98,10 @@
 					console.warn("***muted-webgl_rxdz_krpanoVideo***", newVal,oldVal)
 					if(this.panoramicKrpano){
 						this.panoramicKrpano.call(`toggleMute(${newVal})`);
+						let video = this.panoramicKrpano.get("hotspot[video]");
+						if(video && video.visible){
+							console.warn("**peopleAtv***",video.ath,video.atv)
+						}
 					}
 				},
 				immediate: true,
@@ -137,6 +142,11 @@
 				console.warn("**scaleChange****",scale,tabIndex)
 				if(tabIndex==0){//数字人
 					this.panoramicKrpano.call(`scalePeopleChange(${scale})`);
+					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+					if(image_hotspot){
+						image_hotspot.scale = scale;
+					}
+					this.scale = scale;//缩放比例
 				}else if(tabIndex==1){//数字宠物
 					this.panoramicKrpano.call(`scalePetChange(${scale})`);
 				}
@@ -147,11 +157,20 @@
 				}
 				if(item.scale){
 					this.panoramicKrpano.call(`scalePeopleChange(${item.scale})`);
+					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+					if(image_hotspot){
+						image_hotspot.scale = item.scale;
+					}
 				}
 				if(item.ath){
 					let object = this.panoramicKrpano.get("hotspot[video]");
 					object.ath = item.ath;
 					object.atv = item.atv;
+					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+					if(image_hotspot){
+						image_hotspot.ath = item.ath;
+						image_hotspot.atv = item.atv;
+					}
 					//移动视角到AI人物上
 					this.panoramicKrpano.set('view.hlookat', item.ath);
 					this.panoramicKrpano.set('view.vlookat', item.atv);
@@ -185,11 +204,47 @@
 					this.playBgMusic(item.url)
 				}
 			},
+			updataVideoSize(item){
+				//如果存在视频尺寸
+				if(!item.width || !item.height){
+					item.width = 180;
+					item.height = 320;
+				}
+				let object = this.panoramicKrpano.get("hotspot[video]");
+				let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
+				if(item.width>=item.height){//横屏
+					let realWidth = 480;
+					let realHeight = item.height/(item.width/480);
+					object.width = realWidth;
+					object.height = realHeight;
+					if(image_hotspot){
+						// let _scale = realWidth/640;
+						image_hotspot.width = realWidth;
+						image_hotspot.height = realHeight;
+						image_hotspot.scale = this.scale;
+						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow22.png';
+					}
+				}else{//竖直版视频
+					let realWidth = 180;
+					let realHeight = item.height/(item.width/180);
+					object.width = realWidth;
+					object.height = realHeight;
+					if(image_hotspot){
+						// let _scale = realWidth/360;
+						image_hotspot.width = realWidth;
+						image_hotspot.height = realHeight;
+						image_hotspot.scale = this.scale;
+						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow11.png';
+					}
+				}
+				console.warn("**updataVideoSize****",item.width,item.height,this.scale)
+			},
 			aiChange(item,type,tabIndex){
 				console.warn("**aiChange****",item,type,tabIndex)
 				if(tabIndex==0){
 					if(type=='add'){
-						this.playVideo(item.url)
+						this.playVideo(item.url);
+						this.updataVideoSize(item);
 					}else if(type=='canel'){
 						this.stopPeopleVideo()
 					}

src/components/krpanoVideo/panoramic.xml

@@ -101,9 +101,9 @@
 		>
 		</hotspot>
 		<!-- 电子人的阴影 -->
-		<!-- <hotspot name="image_hotspot" ath="50.082" atv="14" rotate="-45.0" zorder="1"
-			distorted="true" scale="0.5" alpha="0.5"
-			url="https://dm.static.elab-plus.com/miniProgram/grass.jpg" keep="true"></hotspot> -->
+		<hotspot name="image_hotspot" ath="50.082" atv="14" rotate="0" zorder="1"
+			distorted="true" scale="1" alpha="0.5" visible="false" width="180" height="320"
+			url="https://dm.static.elab-plus.com/miniProgram/shadow11.png" keep="true"></hotspot>
 		<action name="draghotspot">
 			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
 			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
@@ -112,8 +112,8 @@
 				sub(dx, mouse.stagex, drag_adjustx);
 				sub(dy, mouse.stagey, drag_adjusty);
 				screentosphere(dx, dy, ath, atv);
-				<!-- set(hotspot[image_hotspot].ath, get(ath)); -->
-				<!-- set(hotspot[image_hotspot].atv, get(atv)); -->
+				set(hotspot[image_hotspot].ath, get(ath));
+				set(hotspot[image_hotspot].atv, get(atv));
 			);
 		</action>
 		<!-- 宠物视频 -->
@@ -123,7 +123,7 @@
 			url="https://dm.static.elab-plus.com/videoplayer.js"
 			videourl=""
 			width="180"
-			height="320"
+			height="180"
 			chromakey="0x238E54|0.294|0.133"
 			preload="true"
 			pausedonstart="false"
@@ -208,6 +208,7 @@
 		    <!-- mobilescale(); -->
 		    <!-- 播放视频 -->
 			set(hotspot[video].visible, 'true');
+			set(hotspot[image_hotspot].visible, 'true');
 		    hotspot[video].playvideo(%1, '', false);
 			set(hotspot[video].scale, get(scale));
 		</action>
@@ -216,6 +217,7 @@
 			<!-- hotspot[video].playvideo('', '', false); -->
 			hotspot[video].stop();
 			set(hotspot[video].visible, get(false));
+			set(hotspot[image_hotspot].visible, get(false));
 		</action>
 		<action name="playPetVideo">
 			def(scale, string, get(hotspot[petVideo].scale));

src/components/krpanoVideo/panoramic_no_drag.xml

@@ -94,7 +94,7 @@
 			url="https://dm.static.elab-plus.com/videoplayer.js"
 			videourl=""
 			width="180"
-			height="320"
+			height="180"
 			chromakey="0x238E54|0.294|0.133"
 			preload="true"
 			pausedonstart="false"

src/components/newBottomCom/viewAI/viewAI.html

@@ -11,9 +11,50 @@
 	<div class="ai-people" v-if="tabIndex==0">
 		<div class="main grid-view1">
 			<div :class="['item', peopleIndex==idx ? 'active': '']" v-for="(item, idx) in leftList"
-				:key="idx" @click="selectAction(item,idx)">
-				<img class="itemImg" :src="item.icon"/>
-				<div class="item-name rows justify-center">{{item.value}}</div>
+				:key="idx">
+				<template v-if="item.userUpload">
+					<div v-if="!videoUrl">
+						<div class="empty-item" @click="showMask">
+							<div class="add-icon rows justify-center">
+								<img class="bg" :src="uploadStatus==1 || uploadStatus==2 || uploadStatus==4?'https://dm.static.elab-plus.com/miniProgram/person_icon1.png':'https://dm.static.elab-plus.com/miniProgram/person_icon.png'"/>
+							</div> 
+							<div class="rows justify-center" v-if="uploadStatus==1" style="width: 100%;height: 100%;">
+								<el-progress :format="format" :stroke-width="8"
+								define-back-color="#fff" color="#92CE8B" 
+								text-color="#92CE8B" type="circle" :percentage="progress"></el-progress>
+							</div>
+							<div class="rows justify-center" v-if="uploadStatus==2" style="width: 100%;height: 100%;">
+								<el-progress :format="format" :stroke-width="8"
+								define-back-color="#fff" color="#92CE8B" 
+								text-color="#92CE8B" type="circle" :percentage="ktProgress"></el-progress>
+							</div>
+							<!-- <form id='uploadVideoFrom' class="uploadVideoFrom">
+								<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom')"
+								 name="file" accept="video/*" class="el-upload__input">
+							</form> -->
+						</div>
+						<div class="item-name rows justify-center empty-text" v-if="uploadStatus==0">个人形象</div>
+						<div class="item-name rows justify-center empty-text" v-else-if="uploadStatus==1 || uploadStatus==2" @click.stop="stopUpload">
+							<img class="close_icon" src="https://dm.static.elab-plus.com/miniProgram/close_icon.png" />
+							取消
+						</div>
+					</div>
+					<div v-else>
+						<img class="itemImg" :src="item.icon" @click.stop="selectAction(item,idx)" />
+						<div class="item-name rows justify-center">
+							<i class="iconfont icon-ic-huanyihuan rows justify-center"></i>
+							替换
+							<form id='uploadVideoFrom1' class="uploadVideoFrom">
+								<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom1',2)"
+								 name="file" accept="video/*" class="el-upload__input">
+							</form>
+						</div>
+					</div>
+				</template>
+				<template v-else>
+					<img class="itemImg" :src="item.icon" @click.stop="selectAction(item,idx)"/>
+					<div class="item-name rows justify-center" @click.stop="selectAction(item,idx)">{{item.value}}</div>
+				</template>
 			</div>
 		</div>
 	</div>
@@ -41,8 +82,6 @@
 								红包调整
 							</div>
 						</div>
-							
-						
 					</div>
 					<div class="plus">+</div>
 					<!-- <img class="special-img" :src="specialImg"/> -->
@@ -74,4 +113,29 @@
 		{{tabIndex==0?'点击添加到场景中，可调整大小和拖动到摆放位置':(tabIndex==1?'点击宠物添加到场景中，可调整大小和拖动到摆放位置':(tabIndex==3?'点击音乐添加到场景中':'点击红包添加到场景中，您的朋友将收到你的红包祝福'))}}
 	</div>
 	<div class="ai-bottom rows justify-center" @click.stop="mynavigateFuc">发布全景</div>
+	<!-- 弹出层-添加个人形象 -->
+	<div class="mask-view" v-if="showPersonView">
+		<div class="content">
+			<i class="iconfont icon-close close" @click.stop="showPersonView=false;"></i>
+			<div class="title rows justify-center">添加个人形象</div>
+			<div class="desc rows justify-center">
+				生成时间较长约3-5分钟，<br />
+				生成前会以人物剪影的方式在场景中占位
+			</div>
+			<img class="img" src="https://dm.static.elab-plus.com/miniProgram/mask-img.png"/>
+			<div class="section-text">
+				1.文件小于50M，时长小于20秒<br />
+				2.人物需全身照，拍摄时需保持稳定<br />
+				3.人物双脚需靠近摄像画面底部<br />
+				4.背景不要太乱，推荐美颜相机
+			</div>
+			<div class="btn">
+				<div class="bg rows justify-center">上传</div>
+				<form id='uploadVideoFrom' class="uploadVideoFrom">
+					<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom',1)"
+					 name="file" accept="video/*" class="el-upload__input">
+				</form>
+			</div>
+		</div>
+	</div>
 </div>

src/components/newBottomCom/viewAI/viewAI.scss

@@ -65,11 +65,60 @@
 				// margin-right: 20px;
 				font-size: 0px;
 				.item-name{
+					position:relative;
 					font-family: "Verdana";
 					font-weight: 400;
 					font-size: 28px;
 					color: #4e4e4e;
 					height: 30px;
+					.icon-ic-huanyihuan{
+						font-size: 24px;
+						color: #000;
+						margin-right: 4px;
+					}
+					.close_icon{
+						width: 24px;
+						height: 24px;
+						background: transparent;
+						margin-right: 4px;
+					}
+				}
+				.empty-item{
+					position: relative;
+					width: 150px;
+					height: 140px;
+					border-radius: 20px;
+					background: transparent;
+					border: 2px dashed rgba(40, 44, 51, 0.2);
+					box-sizing: border-box;
+					margin-bottom: 10px;
+					.add-icon{
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						z-index: -1;
+						font-size: 70px;
+						// color:rgba(40, 44, 51, 0.25);
+						.bg{
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+						}
+					}
+					::v-deep .el-progress-circle{
+						width: 110px!important;
+						height: 110px!important;
+					}
+					::v-deep .el-progress__text{
+						font-family: "Verdana";
+						font-weight: 400;
+						white-space: pre;
+						font-size: 22px!important;
+						color: #8aff7c;
+					}
+				}
+				.empty-text{
+					font-size: 24px;
 				}
 				.itemImg{
 					width: 150px;
@@ -88,7 +137,7 @@
 			.item.active{
 				color: #85b474;
 			}
-			.active > .itemImg{
+			.active .itemImg{
 				border: solid 4px #94DB75;
 			}
 			
@@ -206,3 +255,100 @@
 	pointer-events: none;
 }
 
+.mask-view{
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.64);
+	z-index: 999;
+	.content{
+		position: absolute;
+		bottom: 0px;
+		width: 100%;
+		height: calc(100% - 304px);
+		border-radius: 40px 40px 0 0;
+		background: #fff;
+		box-sizing: border-box;
+		font-size:0px;
+		padding: 40px;
+		.close{
+			position: absolute;
+			right: 40px;
+			top: 40px;
+			width: 30px;
+			height: 30px;
+			color: rgba(68, 68, 68, 0.44);
+		}
+		.title{
+			font-family: "Verdana Bold";
+			font-weight: 700;
+			font-size: 34px;
+			color: #000;
+			margin-bottom: 30px;
+		}
+		.desc{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 34px;
+			color: rgba(33, 33, 33, 0.76);
+			text-align: center;
+			margin-bottom: 30px;
+		}
+		.img{
+			width: 441.42px;
+			height: 620.58px;
+			background: transparent;
+			// margin-bottom: 45px;
+			margin-left: 50%;
+			transform: translateX(-50%);
+		}
+		.section-text{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 28px;
+			// line-height: 48px;
+			margin-left: 70px;
+			color: rgba(33, 33, 33, 0.76);
+		}
+		.btn{
+			position: absolute;
+			left: 60px;
+			bottom: 60px;
+			width: 630px;
+			height: 80px;
+			border-radius: 40px;
+			background: #92ce8b;
+			font-size: 0px;
+			.bg{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				font-family: "DIN Alternate Bold";
+				font-weight: 700;
+				font-size: 32px;
+				color: #fff;
+			}
+			
+			
+		}
+	}
+}
+.uploadVideoFrom{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	font-size: 0px;
+	.el-upload__input {
+		position: absolute;
+		cursor: pointer;
+		width: 100%;
+		height: 100%;
+		right: 0px;
+		top: 0px;
+		opacity: 0;
+		-ms-filter: 'alpha(opacity=0)';
+		display: inline-block;
+	}
+}

src/components/newBottomCom/viewAI/viewAI.vue

@@ -48,6 +48,18 @@
 					},
 				],
 				hasRedBox:false,	//是否添加了红包
+				limit:20,
+				videoId:'',	//上传视频的id
+				videoUrl:'',	//处理好的视频地址
+				progress:0,	//进度条
+				ktProgress:0,	//抠图进度条
+				showPersonView:false,	//是否显示个人形象提示弹窗
+				uploadStatus:0,	//视频处理的状态 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
+				count:0,		//结果请求次数
+				timeOut:90000,	//超时时间
+				outTimer:null,	//延时处理对象
+				timer:null,		//轮询对象
+				widthHeight:'',	//用户上传视频尺寸
 			}
 		},
 		props: {
@@ -62,6 +74,11 @@
 			this.getDatalist(1);
 			this.getDatalist(3);
 		},
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
 		// 页面被展示时执行
 		onPageShow: function() {
 
@@ -71,6 +88,15 @@
 			// console.warn("***detached-hide***")
 		},
 		methods: {
+			format(percentage) {
+				let text = "上传中";
+				if(this.uploadStatus==1){
+					text = "上传中";
+				}else if(this.uploadStatus==2){
+					text = "抠图中";
+				}
+				return `${text}\n${percentage}%`;
+			},
 			resolveIndex(index) {
 				this.selectIndex = index || 0;
 			},
@@ -122,10 +148,236 @@
 					});
 				}
 			},
+			initStatus(){
+				this.progress = 0;
+				this.ktProgress = 0;
+				this.count = 0;
+				this.videoUrl = '';
+				this.widthHeight = '';
+				this.leftList[0].icon = '';
+				this.leftList[0].url = '';
+				this.uploadStatus = 0;//处理完毕
+			},
+			uploadImgObj(e,form,type=1){
+				if(type==2){
+					this.initStatus();//重置上传状态到初始值
+				}
+				//上传图片
+				var file = e.target.files[0];
+				var fileSize = file.size / 1024 / 1024;
+				if (!/\.(MP4|mp4)$/.test(e.target.value)) {
+					this.$message.warning('文件片类型必须是MP4');
+					var videoForm = document.getElementById(form); //获取表单对象
+					videoForm && videoForm.reset(); // 重置表单
+					return false
+				}
+				if (fileSize > this.limit) {
+					this.$message.warning('您的上传的视频过大，请低于' + this.limit + 'MB');
+					var videoForm = document.getElementById(form); //获取表单对象
+					videoForm && videoForm.reset(); // 重置表单
+					return false
+				}
+				if (file.name.length > 100) {
+					this.$message.warning('文件名过长，请不要超过100个字符');
+					var videoForm = document.getElementById(form); //获取表单对象
+					videoForm && videoForm.reset(); // 重置表单
+					return false;
+				}
+				let reader = new FileReader();
+				reader.onload = (event) => {
+					let video = document.createElement('video');
+					video.onloadedmetadata = (event) => {
+						let duration = video.duration;
+						let width = video.videoWidth;
+						let height = video.videoHeight;
+						// this.videoWidth = width;
+						// this.videoHeight = height;
+						console.warn('视频时长：', duration);
+						console.warn('视频尺寸：x:', width, 'y:', height);
+						if (duration > 20) {
+							this.$message.warning('您的上传的视频过长，请低于20s');
+							var videoForm = document.getElementById(form); //获取表单对象
+							videoForm && videoForm.reset(); // 重置表单
+							return false
+						}else{
+							var item = {};
+							item.file = file;
+							console.warn("***uploadImgObj***",file)
+							this.uploadMaterielFile(item, form); //正常上传图片
+						}
+					};
+					video.src = event.target.result;
+				};
+				reader.readAsDataURL(file);
+				// var item = {};
+				// item.file = file;
+				// console.warn("***uploadImgObj***",file)
+				// this.uploadMaterielFile(item, form); //正常上传图片
+			},
+			//视频上传进度处理
+			uploadProgress(e){
+				this.progress = Math.round((e.loaded / e.total) * 100);//loaded已经加载的
+				console.warn("***uploadProgress***",this.progress)
+			},
+			//停止上传
+			stopUpload(){
+				
+			},
+			async uploadMaterielFile(item, form) {
+				var self = this;
+				let formData = new FormData();
+				formData.append('file', item.file);
+				formData.append('brandId', $config.brandId);
+				formData.append('userId', this.userId);
+				// formData.append('width', this.videoWidth);
+				// formData.append('height', this.videoHeight);
+				console.warn("***formData***",formData);
+				this.uploadStatus = 1;//上传中
+				this.showPersonView = false;
+				this.addSilhouette();//添加剪影视频
+				let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress)
+				if (res.success && res.single) {
+					this.videoId = res.single;//根据Id查询结果
+					this.startInterval();//开始轮询获取结果
+				}
+				var videoForm = document.getElementById(form); //获取表单对象
+				videoForm && videoForm.reset(); // 重置表单
+			},
+			async getVideoUrl() {
+				if(!this.videoId){
+					Toast({
+						message: '请先上传视频',
+					});
+					return false;
+				}
+				this.count = this.count + 1;
+				let res = await requestConfig('get_result', {id:this.videoId,userId:this.userId}, true, false,'get')
+				if (res.success && res.single) {
+					this.resultHandle(res.single)
+				}else{
+					this.videoUrl = "https://test.static.elab-plus.com/digital_human/f4c16cffae9711ee9853845cf3fb2826.mp4";//视频地址
+					this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/0";
+					this.leftList[0].url = this.videoUrl;
+					this.uploadStatus = 4;//处理失败
+				}
+			},
+			//添加剪影视频
+			addSilhouette(){
+				let data = {
+					url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
+					value:'个人形象',
+					width:'',
+					height:'',
+				}
+				this.aiPeopleChange(data, 'add')
+			},
+			//添加用户绿幕视频
+			addRealVideo(){
+				let data = {
+					url:this.videoUrl,
+					value:'个人形象',
+					width:this.widthHeight.split('x')[0],
+					height:this.widthHeight.split('x')[1],
+				}
+				this.aiPeopleChange(data, 'add')
+			},
+			//上传结果处理
+			resultHandle(single){
+				if(!single){
+					return false;
+				}
+				if(single.status=='completed' && single.output){//有结果
+					this.ktProgress = 100;//抠图进度100%
+					this.videoUrl = single.output;//视频地址
+					// this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/5";
+					this.widthHeight = single.widthHeight; //"856x480"
+					this.leftList[0].icon = single.virtualBg;
+					this.leftList[0].url = this.videoUrl;
+					this.uploadStatus = 3;//处理完毕
+					this.stopInterval();//停止轮询
+					this.addRealVideo();
+				}else{//没有结果
+					let progress = single.progress;
+					progress = progress.replace(this.videoId + ':','');
+					let index = progress.indexOf("|");
+					progress = progress.substr(0,index);
+					console.warn("***抠图进度条***",progress);
+					this.ktProgress = parseFloat(progress);//提取出来的进度条
+					if(this.ktProgress>99){
+						this.ktProgress = 99;
+					}
+				}
+			},
+			//开始生成AI图的轮询，每隔1s轮询一次
+			startInterval() {
+				if(this.timer){
+					return false;
+				}
+				let self = this;
+				this.count = 0;//轮询次数
+				this.uploadStatus = 2;//绿幕抠图中
+				this.getVideoUrl();//获取结果
+				this.timer = setInterval(()=>{
+					this.getVideoUrl();//获取结果
+				},1000);//1秒轮询一次
+				this.setOutTimer();//设置超时逻辑
+			},
+			//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
+			setOutTimer() {
+				var self = this;
+				if (this.outTimer) {
+					clearTimeout(this.outTimer)
+					this.outTimer = null
+				}
+				this.outTimer = setTimeout(function() {
+					if(!self.videoUrl){//没有结果
+						MessageBox.confirm('',{
+							title: '提示',
+							message: '当前AI使用火爆，请继续尝试?',
+							showCancelButton: true,
+							confirmButtonText:'继续尝试',
+							cancelButtonText:'取消等待',
+						}).then(action => {
+							console.warn("***MessageBox-action***",action)
+							if(action == 'confirm'){
+								// self.confirmHandle(1);
+							}
+						}).catch(err=>{
+							console.warn("***MessageBox-err***",err)
+							if(err == 'cancel'){
+								// self.cancelHandle();
+							}
+						});
+						// MessageBox.confirm('确定执行此操作?')
+					}
+					self.stopInterval();//停止轮询
+				}, this.timeOut);
+			},
+			//停止轮询
+			stopInterval() {
+				if (this.timer) {
+					clearInterval(this.timer);
+					this.timer = null;
+				}
+				if (this.outTimer) {
+					clearTimeout(this.outTimer)
+					this.outTimer = null
+				}
+				this.myloading = false;
+				this.aiFlag = false;
+			},
+			
+			showMask(){
+				this.showPersonView = true;
+				console.warn("***showMask***",this.showPersonView)
+			},
 			//AI数字人切换
 			selectAction(selItem, index) {
-				console.log('点击动作111：', selItem, index)
+				console.log('点击动作111：', selItem, index,this.leftList)
 				if (this.tabIndex == 0) {
+					if(!this.leftList[index].url){
+						return false
+					}
 					if (this.peopleIndex == index) { //取消选中
 						this.aiPeopleChange(this.leftList[this.peopleIndex], 'canel')
 						this.peopleIndex = -1;
@@ -181,7 +433,13 @@
 				if (res && res.success && res.list) {
 					let list = res.list;
 					if (type == 0) {
-						this.leftList = list;
+						this.leftList.push({
+							icon:'',
+							userUpload:true,
+							value:'',
+							url:'',
+						})
+						this.leftList = this.leftList.concat(list);
 					} else if (type == 1) {
 						this.rightList = list;
 					} else if (type == 3) {
@@ -283,6 +541,7 @@
 							url: url	
 						})
 					} else {
+						console.warn("data:", _ps)
 						Toast({
 							message: '敬请期待',
 						});

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.html

@@ -31,6 +31,6 @@
 		<div class="slide-word">缩小</div>
 	</div>
 	<!-- AI数字人组件 -->
-	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" @tabChange="tabChange" @setRedBox="setRedBox" @redBox="redBox" style="z-index: 13;"></viewAI>
+	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" @tabChange="tabChange" @setRedBox="setRedBox" @redBox="redBox" style="z-index: 130;"></viewAI>
 	<payView ref="payView"></payView>
 </div>

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.vue

@@ -6,6 +6,9 @@
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
 	import viewAI from '@/components/newBottomCom/viewAI/viewAI.vue';
 	import payView from '@/components/payView/payView.vue';
+	import {
+		Toast
+	} from 'mint-ui';
 	// import commonPageMethod from '@/common/commonPageMethod.js';
 	export default {
 		components: {
@@ -67,9 +70,27 @@
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			this.videoUrl = this.$route.query.videoUrl || '';
 			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
-			
+			// this.AIPeople = this.$route.query.AIPeople ? JSON.parse(this.$route.query.AIPeople) : '';
+			// this.AIPet = this.$route.query.AIPet ? JSON.parse(this.$route.query.AIPet) : '';
+			// this.bgMusic = this.$route.query.bgMusic ? JSON.parse(this.$route.query.bgMusic) : '';
+			// this.redBox = this.$route.query.redBox ? JSON.parse(this.$route.query.redBox) : '';
+			// this.initAI();
 		},
 		methods: {
+			initAI(){
+				if(this.AIPeople){
+					this.$refs.krpanoVideo.peopleData = this.AIPeople;
+				}
+				if(this.AIPet){
+					this.$refs.krpanoVideo.petData = this.AIPet;
+				}
+				if(this.redBox){
+					this.$refs.krpanoVideo.redBoxData = this.redBox;
+				}
+				if(this.bgMusic){
+					this.$refs.krpanoVideo.bgMusicData = this.bgMusic;
+				}
+			},
 			clearHandle() {
 				this.clearEvent();
 			},

src/services/request.js

@@ -25,13 +25,19 @@ axios.interceptors.request.use(function(config) {
 		console.warn("***图片get请求***",config.url)
 		return config;
 	} else {
-		config.url = window.$config.api_url + config.url;
-		if (config.url.includes('elab-marketing-operate/mofangTest/user/login')||config.url.includes('elab-marketing-user/vcode/send/verifyCode')) {
+		if(config.url.startsWith('http')){
+			config.url = config.url;
+		}else{
+			config.url = window.$config.api_url + config.url;
+		}
+		if (config.url.includes('elab-marketing-operate/mofangTest/user/login')
+		||config.url.includes('elab-marketing-user/vcode/send/verifyCode')) {
 			config.headers['userId'] = "";
 			config.headers['ip'] = "";
 			showToast = true;
 		} else {//uploadOss 上传format文件过大时提示不成功，接口500，通过测试与header有关，注释掉上传的header就好了
-			if (!config.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')){
+			if (!config.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')
+			&& !config.url.includes('/robust_video')){
 				config.headers['userId'] = mapVue.$route.query.leavePhoneCustomerId || '';
 				config.headers['openId'] = mapVue.$route.query.openid || '';
 				// config.headers['ip'] = getStorage('ip');

src/services/requestConfig.js

@@ -39,9 +39,12 @@ const endpoints = {
 	shareDetail: 'elab-marketing-content/aiDreamHouse/V3.0/shareDetail', // 分享查看
 	queryEnumList: 'elab-marketing-user/enum/queryEnumList', // 获取数字人
 	rob: 'elab-marketing-file/redpack/rob', // 抢红包
+	robust_video: 'http://192.168.50.108:5000/robust_video', // 上传视频
+	get_result: 'http://192.168.50.108:5000/get_result', // 获取视频上传结果
+	aliyunOpenapiUploadOss: "elab-marketing-sms/aliyun/openapi/uploadOss", // 上传文件到oss
 	// predictions: "https://api.replicate.com/v1/deployments/feathers-wing/spacely-realistic-style-softedge-a100/predictions", // 分享查看
 };
-window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post') => {
+window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post',uploadProgress=null) => {
 	if (!endpoints.hasOwnProperty(endpoint)) {
         console.error(`no such endpoint: ${endpoint}`);
         return {
@@ -86,30 +89,35 @@ window.requestConfig = async(endpoint, options, isHideLoading = false, preventDo
         store.state.loading = false; //显示loading态
     }
     if (requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/importLocations') ||
-        requestOptions.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss')) {
-        requestOptions.ContentType = 'multipart/form-data'
+        requestOptions.url.includes('elab-marketing-sms/aliyun/openapi/uploadOss') ||
+		requestOptions.url.includes('/robust_video')) {
+        requestOptions.ContentType = 'multipart/form-data';
+		if(uploadProgress && typeof(uploadProgress)==='function'){
+			requestOptions.uploadProgress = uploadProgress;
+		}
+		
     }
     if (requestOptions) {
         let platform = (window.userInfo && window.userInfo['userAccount'] && window.userInfo['userAccount'].platform) ? window.userInfo['userAccount'].platform : ''; //TODO 要还原成‘’的
         let currentProject = store.state.currentProject ? store.state.currentProject : null;
         let landId = currentProject ? currentProject.id : '';
         requestOptions.data = requestOptions.data ? requestOptions.data : {};
-        let userTypeId = window.userInfo && window.userInfo.userType ? window.userInfo.userType.id : ''; //1客户端 ，2投手端
-        if (userTypeId == 2) {
-            if (!requestOptions.data.hasOwnProperty('platform') || !requestOptions.data.platform) {
-                requestOptions.data.platform = platform
-            }
-        }
-        if (!requestOptions.data.hasOwnProperty('landId') || !requestOptions.data.landId) {
-            requestOptions.data.landId = landId
-        }
     }
     var response;
-    if (requestOptions.url.includes('http') || method == 'get') {
+    if (!requestOptions.url.includes('robust_video') && (requestOptions.url.includes('http') || method == 'get')) {
         let params = requestOptions.data;
         response = await axios.get(requestOptions.url, { params });
     } else {
-        response = await axios.post(requestOptions.url, requestOptions.data);
+		if(requestOptions.uploadProgress && typeof(requestOptions.uploadProgress)==='function'){
+			response = await axios.post(requestOptions.url, requestOptions.data,{
+				onUploadProgress: progressEvent => {
+					requestOptions.uploadProgress(progressEvent)
+				}
+			});
+		}else{
+			response = await axios.post(requestOptions.url, requestOptions.data);
+		}
+        
     }
     //说明该接口需要防止连击
     if (preventDoubleClick && doubleClickList[requestOptions.path] && doubleClickList[requestOptions.path]