Merge branch 'feature_UI调整' of http://101.231.166.56:3000/elab-damai-h5/h5-webgl-program into feature_UI调整

src/App.vue

@@ -70,6 +70,14 @@
 					alert("**内存不足，页面重新载入**")
 				}
 			});
+			// 监听页面隐藏事件
+			window.addEventListener('pagehide', function(event) {
+			    // 判断页面是否因为内存不足而被卸载或隐藏
+			    if (event.persisted) {
+			        // 页面被卸载或隐藏，可以执行一些重载操作
+			        alert("**内存不足，页面重新载入ios**")
+			    }
+			});
 
 			// window.onerror = function(message,source,line,column,error) {
 			// };

src/components/newBottomCom/viewCareful/viewCareful.vue

@@ -41,6 +41,7 @@
 						}
 					}
 				},
+				deep:true,
 			},
 		},
 		mixins: [],
@@ -167,6 +168,7 @@
 			},
 			callBack(type){
 				console.warn("***callBack***",type)
+				this.initData();
 				this.$parent.$parent.callBackFun = null;//注销父页面的通知回调函数
 			}
 		}

src/components/newBottomCom/viewMask/viewMask.html

@@ -5,7 +5,13 @@
 	:autoplay="false" :loop="false" ref="carousel"
 	 @change="swiperChangeImg" :initial-index="currentIndex" :indicator-dots="false">
 		<el-carousel-item v-for="(item,index1) in aiImagesList" :key="index1">
-			<img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image>
+			<!-- <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image> -->
+			<el-image 
+				@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
+			    style="width:100%;height:100%;"
+			    :src="item.image"
+			    :preview-src-list="item.list">
+			  </el-image>
 		</el-carousel-item>
 	</el-carousel>
 	<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1 && showAIImage">

src/components/newBottomCom/viewMask/viewMask.vue

@@ -23,7 +23,7 @@
 				inputBase64Url: "",
 				taskId: "", // 图生图任务ID
 				img2imgTimer: null,
-				imageWidth: 320,
+				imageWidth: 750,
 				imageHeight: 448,
 				showAIFlag:false,//继续生成状态切换标志
 				checked:false,
@@ -568,7 +568,10 @@
 				
 				const prompt = this.styleList[this.curStyleIndex].prompt;
 				const noPromot = this.styleList[this.curStyleIndex].negativePrompt;
-				
+				let unit = 768 / window.screen.width;
+				this.imageWidth = parseInt((window.screen.width * unit).toFixed());
+				this.imageHeight = parseInt((this.$parent.canvasHeight * unit).toFixed());
+				// this.$parent.canvasHeight = window.screen.height - (208 * unit);
 				var parmas = {
 					negativePrompt: noPromot,
 					prompt: prompt,
@@ -593,7 +596,8 @@
 				let that = this;
 				if (res.success && res.single) {
 					if(typeof(res.single)=="object"){
-						this.showToast(`${res.single.queueCount | 0}人排队中，预计等待${Math.round(Math.random() * 20)}秒`)
+						let cot = res.single.queueCount || 1;
+						this.showToast("正有"+cot+"人排队，预计等待"+cot*25+"秒");
 						this.aiImage = "";
 						this.aiFlag = false;
 						this.clearInterval();
@@ -636,6 +640,7 @@
 							let _data = {
 								image:newImage,
 								checked:false,
+								list:[newImage],
 							}
 							this.aiImagesList.push(_data);
 							this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
@@ -671,6 +676,11 @@
 								this.$store.dispatch('setAiData', cpAiData)
 							}
 							this.clearInterval();
+							if(this.aiImagesList.length>1){
+								setTimeout(()=>{
+									this.$refs.carousel.next();
+								}, 1000);
+							}
 						} else {
 							if (!res.success) {
 								this.showToast("渲染失败，请重试")
@@ -690,7 +700,8 @@
 							}
 						}
 					} else {
-						this.showToast(`${res.single.queueCount | 0}人排队中，预计等待${Math.round(Math.random() * 20)}秒`)
+						let cot = res.single.queueCount || 1;
+						this.showToast("正有"+cot+"人排队，预计等待"+cot*25+"秒");
 						this.aiImage = "";
 						this.aiFlag = false;
 						this.clearInterval();

src/components/newBottomCom/viewShell/viewShell.scss

@@ -57,6 +57,7 @@
 .floor-item.active{
 	color: #faa040;
 	background: #fff;
+	border-radius: 12rem;
 }
 .tips-view{
 	position: absolute;

src/mixins/loadModel.js

@@ -121,16 +121,19 @@ export default {
 			if(this.type == 2){//全局精简模型;需要的是所有空间的模型
 				allowSpaceId = this.spaceList.map(it=>it.spaceId)
 			}else{//空间模型模式
-				// allowSpaceId = [this.curSpaceObj.spaceId];
-				// if(this.curSpaceObj.spaceType==4){//厨房
-				// 	let list = this.spaceList.filter(it=>it.spaceType==2)
-				// 	allowSpaceId.push(...list.map(it=>it.spaceId));//客厅
-				// }
-				// if(this.curSpaceObj.spaceType==2){//餐厅
-				// 	let list = this.spaceList.filter(it=>it.spaceType==4)
-				// 	allowSpaceId.push(...list.map(it=>it.spaceId));//厨房
-				// }
-				allowSpaceId = this.spaceList.map(it=>it.spaceId);//当前空间 精模加载，其他空间用 简模加载
+				if(this.isIOS){
+					allowSpaceId = [this.curSpaceObj.spaceId];
+					if(this.curSpaceObj.spaceName=='主卧'){//主卧
+						let list = this.spaceList.filter(it=>it.spaceName=='休闲小客厅')
+						allowSpaceId.push(...list.map(it=>it.spaceId));//休闲小客厅
+					}
+					if(this.curSpaceObj.spaceName=='休闲小客厅'){//休闲小客厅
+						let list = this.spaceList.filter(it=>it.spaceName=='主卧')
+						allowSpaceId.push(...list.map(it=>it.spaceId));//主卧
+					}
+				}else{
+					allowSpaceId = this.spaceList.map(it=>it.spaceId);//当前空间 精模加载，其他空间用 简模加载
+				}
 			}
 			console.warn("重新加载布局", arrFrunList,this.spaceList,this.gltfLayouts,allowSpaceId);
 			arrFrunList.forEach(signel => {

src/pages/webgl_rxdz/webgl_rxdz.html

@@ -2,7 +2,10 @@
 	<mynavbar :barData='navbar'/>
 	<!-- 提交按钮 -->
 	<div class="submit-btn" @click="submitHouse" v-if="styleType==1">提交</div>
-	
+	<div class="area-view">
+		<div>当前面积：{{sumArea}}<span style="font-weight: 700;">㎡</span></div>
+		<div v-if="changeArea" style="font-size: 28rem;color: #fa9f40;">{{changeArea < 0 ? '减少':'增加'}}了：{{Math.abs(changeArea)}}<span style="font-weight: 700;">㎡</span></div>
+	</div>
     <div id="mapDiv" ref="webgl"></div>
 	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
 	 :style="{'height':canvasHeight+'px'}">

src/pages/webgl_rxdz/webgl_rxdz.scss

@@ -54,6 +54,15 @@ canvas { width:100vw; height:calc(100vh - 200rem);z-index: 10; }
 	position: absolute;
 	left:0rem;
 }
+.area-view{
+	position: absolute;
+	top:68rem;
+	left:30rem;
+	width:100%;
+	font-size: 32rem;
+	font-family: "Verdana";
+	font-weight: 400;
+}
 .tran{
 	transition-timing-function: linear;
 	transition: height 1s;

src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -121,12 +121,13 @@
 				isIos:false,	//是否ios手机。默认不是
 				currentChangeSpaceId:null,	//当前变化的空间id
 				styleType:1,
+				sumArea:0,	//总面积
+				changeArea:0,	//当次变化的面积
 			}
 		},
 		beforeDestroy() {
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
-			// setTimeout(() => {
 			if (this.renderer instanceof THREE.WebGLRenderer) {
 				this.renderer.dispose()
 				this.renderer.forceContextLoss()
@@ -144,7 +145,7 @@
 			this.instancedFurList = [];
 			this.wallList = [];
 			TWEEN && TWEEN.removeAll();//清除所有的tween;
-			// }, 0)
+			console.warn("***beforeDestroy-webgl_rxdz***");
 		},
         mounted() {
 			console.log("***onLoad-webgl_rxdz***", this.$route.query)
@@ -366,7 +367,7 @@
 					cameraNewPosition = {
 						x:spaceObj.centerX/100,
 						y:camera.position.y, 
-						z:-spaceObj.centerY/100,
+						z:-spaceObj.centerY/100 + 0.5,//增加偏差，防止极点翻转问题？不知道为啥会有用
 					}
 					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
 					targetNewPosition = {
@@ -375,15 +376,20 @@
 						z:-spaceObj.centerY/100,
 					}
 					oldUp = camera.up;//俯视状态
-					newUp = camera.up
+					newUp = camera.up;
+					// newUp = new THREE.Vector3(0,0,-1);
 					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
 					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
+					// if(cameraNewPosition.x<0){
+					// 	cameraNewPosition.x = 0;
+					// }
 				}
 				console.warn("**moveMeshCenter***",isUserContorl,spaceObj,JSON.stringify(camera.position),JSON.stringify(controls.target)
 				,cameraNewPosition,targetNewPosition,JSON.stringify(camera.up))
 				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,1000);
 				setTimeout(()=>{
 					that.showLables = true;
+					// camera.up = new THREE.Vector3(0,1,0);
 					// updateLables();
 				},1001);//动画结束后回复原始状态
 			}
@@ -866,7 +872,10 @@
 			//		area:12, //正负值 单位平方米
 			//	}
 			curSpaceChange(data){
-				console.warn("***空间面积变化***",this.overChange,data)
+				console.warn("***空间面积变化***",this.overChange,data);
+				// let changArea = data.isZoomIn ? parseFloat(data.area.toFixed(2)) : -parseFloat(data.area.toFixed(2));
+				// this.changeArea = changArea;//当次变化的面积，有正负值
+				// this.sumArea = parseFloat((this.sumArea + changArea).toFixed(2));
 				this.overChange = true;//变形开始 防止在形变结束前，再次形变
 				this.currentChangeSpaceId = data.spaceId
 				this.changCurSpaceArea(data);
@@ -1581,6 +1590,15 @@
 			
 			//空间面积等变更后-同步更新其他数据对象
 			updataPageData(){
+				let sumArea = 0;
+				this.spaceList.forEach(space=>{
+					let curSpaceArea = parseFloat((
+						(space.spaceWidth * space.spaceHeight) / 10000
+					).toFixed(2));
+					sumArea +=curSpaceArea;
+				})
+				this.changeArea = parseFloat((sumArea - this.sumArea).toFixed(2));
+				this.sumArea = parseFloat(sumArea.toFixed(2));
 				let str = JSON.stringify(this.spaceList)
 				//更新当前空间对象
 				this.curHouseObj.houseJson = str;
@@ -1590,7 +1608,7 @@
 				})
 				layoutStruct.houseJson = str;
 				this.currentChangeSpaceId = null;//变化结束后
-				console.warn("***curLayoutStruct-updataPageData***",this.curHouseFloor,this.curHouseObj,layoutStruct)
+				console.warn("***curLayoutStruct-updataPageData***",this.changeArea,this.sumArea,this.curHouseFloor,this.curHouseObj,layoutStruct)
 			},
 			//户型大类发生了变更
 			curHouseTypeChange(item){
@@ -1632,8 +1650,9 @@
 				setTimeout(()=>{
 					that.loadSpace();
 				}, 100);
-				console.warn("***curHouseObj***",this.curHouseObj,that.aiData)
-				this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡"
+				console.warn("***curHouseObj***",this.curHouseObj,this.aiData)
+				this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡";
+				this.sumArea = this.curHouseObj.houseArea;
 			},
 			async getInitData(){
 				let parmas = {

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -89,6 +89,14 @@
 			this.worker && this.worker.terminate()
 			setTimeout(() => {
 				if (this.renderer instanceof THREE.WebGLRenderer) {
+					// 清空场景中所有对象的资源
+					this.scene.traverse(function(object) {
+						if (object instanceof THREE.Mesh) {
+							object.geometry && object.geometry.dispose();
+							object.material && object.material.dispose();
+							object.texture && object.texture.dispose();
+						}
+					});
 					this.renderer.dispose()
 					this.renderer.forceContextLoss()
 					this.renderer.context = null
@@ -182,10 +190,10 @@
 					canvas:canvas3d, 
 					alpha: true,
 				});
-				// if(!that.isIOS){
+				if(!that.isIOS){
 					renderer.shadowMap.enabled = true;//产生阴影
 					renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
-				// }
+				}
                 renderer.outputEncoding = THREE.sRGBEncoding;
                 renderer.outputColorSpace = THREE.SRGBColorSpace;
                 // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -97,6 +97,14 @@
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
 			if (this.renderer instanceof THREE.WebGLRenderer) {
+				// 清空场景中所有对象的资源
+				this.scene.traverse(function(object) {
+					if (object instanceof THREE.Mesh) {
+						object.geometry && object.geometry.dispose();
+						object.material && object.material.dispose();
+						object.texture && object.texture.dispose();
+					}
+				});
 				this.renderer.dispose()
 				this.renderer.forceContextLoss()
 				this.renderer.context = null
@@ -177,16 +185,18 @@
 				//平行光
 				const light = new THREE.DirectionalLight(0xFFF8E5, 2.5);
 				light.position.set(5, 7, 3); //default; light shining from top
-				light.castShadow = true; // default false
-				// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
-				light.shadow.camera.left = -100; // 这个区域内产生阴影
-				light.shadow.camera.right  = 100; // 这个区域内产生阴影
-				light.shadow.camera.top  = 100; // 这个区域内产生阴影
-				light.shadow.camera.bottom  = -100; // 这个区域内产生阴影
+				if(!that.isIOS){
+					light.castShadow = true; // default false
+					// 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
+					light.shadow.camera.left = -100; // 这个区域内产生阴影
+					light.shadow.camera.right  = 100; // 这个区域内产生阴影
+					light.shadow.camera.top  = 100; // 这个区域内产生阴影
+					light.shadow.camera.bottom  = -100; // 这个区域内产生阴影
+					
+					light.shadow.mapSize.width = 1024; 	// 影响阴影的清晰度
+					light.shadow.mapSize.height = 1024; // 影响阴影的清晰度
+				}
 				
-				light.shadow.mapSize.width = 1024; 	// 影响阴影的清晰度
-				light.shadow.mapSize.height = 1024; // 影响阴影的清晰度
-
 				scene.add(light);
 				
 				//antialias 这个值得设置为false，不然IOS上截图会失效
@@ -196,10 +206,10 @@
 					antialias:true,
 					preserveDrawingBuffer: true,
 				});
-				// if(!that.isIOS){
+				if(!that.isIOS){
 					renderer.shadowMap.enabled = true;//产生阴影
 					renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
-				// }
+				}
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.outputColorSpace = THREE.SRGBColorSpace;
 				// renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1