优化

src/components/krpanoVideo/index.vue

@@ -176,6 +176,9 @@
 					this.panoramicKrpano.set('view.hlookat', item.ath);
 					this.panoramicKrpano.set('view.vlookat', item.atv);
 				}
+				if(item.deg){
+					this.panoramicKrpano.call(`rotateVideo(${item.deg})`);
+				}
 			},
 			initPet(item){
 				if(item.url){
@@ -205,6 +208,9 @@
 					this.playBgMusic(item.url)
 				}
 			},
+			rotateVideo(deg){
+				this.panoramicKrpano.call(`rotateVideo(${deg})`);
+			},
 			updataVideoSize(item){
 				//如果存在视频尺寸
 				if(!item.width || !item.height){

src/components/krpanoVideo/panoramic.xml

@@ -201,6 +201,9 @@
 		<action name="mobilescale" autorun="preinit" devices="mobile">
 		    mul(stagescale,0.5);
 		</action>
+		<action name="rotateVideo">
+			set(hotspot[video].rotate, %1);
+		</action>
 		<action name="playSceneName">
 			def(scale, string, get(hotspot[video].scale));
 		    <!-- 打印日志 -->

src/components/krpanoVideo/panoramic_no_drag.xml

@@ -144,6 +144,9 @@
 		<action name="mobilescale" autorun="preinit" devices="mobile">
 		    mul(stagescale,0.5);
 		</action>
+		<action name="rotateVideo">
+			set(hotspot[video].rotate, %1);
+		</action>
 		<action name="playSceneName">
 			def(scale, string, get(hotspot[video].scale));
 		    <!-- 打印日志 -->

src/components/newBottomCom/viewAI/viewAI.html

@@ -17,7 +17,7 @@
 					<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'"/>
+								<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"
@@ -29,6 +29,12 @@
 								define-back-color="#fff" color="#92CE8B" 
 								text-color="#92CE8B" type="circle" :percentage="ktProgress"></el-progress>
 							</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="cProgress"></el-progress>
+							</div>
 						</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="showPopViewHandle">
@@ -161,4 +167,5 @@
 		</div>
 	</div>
 	<!-- <video id="videoPlayer" loop muted autoplay style="display: none;" controls="false" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src=""></video> -->
+	<!-- <video id="output-video" controls :src="videoSrc"></video> -->
 </div>

src/components/newBottomCom/viewAI/viewAI.scss

@@ -445,4 +445,9 @@
 			}
 		}
 	}
+}
+#output-video{
+	position: relative;
+	width: 300px;
+	height: 200px;
 }

src/components/newBottomCom/viewCareful/viewCareful.vue

@@ -2,9 +2,8 @@
 
 </template>
 <script>
-	const util = require('@/utils/util.js').default;
+	// const util = require('@/static/utils/util.js');
 	const config = require('@/services/urlConfig.js');
-	import spaceTypes from '@/static/spaceTypesIE.js';
 	// import Bus from '@/common/bus';
 	// import commonMethod from '@/common/commonMethod.js';
 	// import requestConfig from '@/static/lib/requestConfig';
@@ -65,8 +64,10 @@
 				this.lastCareList = [];
 				const spaceDetail = this.curHouseObj;
 				const spaceList = JSON.parse(spaceDetail.houseJson);
-				let result = 0;
 				spaceList && spaceList.forEach((item,index)=>{
+					let curSpaceArea = parseFloat(
+						(item.spaceWidth * item.spaceHeight) / 10000
+					).toFixed(1);
 					let minArea = 0;
 					let maxArea = 100;
 					if(item.hasOwnProperty('spaceWidthMin') && item.hasOwnProperty('spaceHeightMin')){
@@ -75,54 +76,39 @@
 					if(item.hasOwnProperty('spaceWidthMax') && item.hasOwnProperty('spaceHeightMax')){
 						maxArea = parseFloat((item.spaceWidthMax * item.spaceHeightMax) / 10000).toFixed(1);
 					}
-					//修改为显示空间类型名称
-					let text = spaceTypes[item.spaceType - 1] || item.spaceName;
-					if(item.spaceType==15 && item.layoutSpaceType){
-						text = spaceTypes[item.layoutSpaceType - 1]; 
-					}
-					if(item.spaceName && !item.isSizeLock){//楼梯不显示
-						let curSpaceArea = Number(parseFloat(
-							(item.spaceWidth * item.spaceHeight) / 10000
-						).toFixed(1));
+					let text = item.spaceName;
+					// console.warn("***carefulList-change1***", item,item.spaceType)
+					if(text && !item.isSizeLock){//楼梯不显示
 						let data = {
 							spaceId:item.spaceId,
 							index:this.carefulList.length,
 							name:text,
-							area:curSpaceArea,
-							percent:0,
+							area:parseFloat(curSpaceArea),
+							percent:null,
 							minArea:parseFloat(minArea),	//最小面积
 							maxArea:parseFloat(maxArea),	//最大面积
 						}
-						result = result + curSpaceArea;
 						this.carefulList.push(data);
 						this.lastCareList.push({
 							spaceId:item.spaceId,
 							index:this.carefulList.length,
-							area:curSpaceArea,
+							area:parseFloat(curSpaceArea),
 						})
 					}
 				})
-				// let result = this.carefulList.reduce((prev, cur)=>{
-				//     return prev + parseFloat(cur.area);
-				// },0);
+				
+				let result = this.carefulList.reduce((prev, cur)=>{
+				    return prev + parseFloat(cur.area);
+				},0);
 				this.carefulList.forEach(it=>{
 					if(!result){
 						it.percent = 100;
 					}else{
 						it.percent = (parseFloat(it.area) / parseFloat(result)*100).toFixed(0);
 					}
-					// console.warn("***carefulList-change1***", it.area,it)
 				})
 				console.warn("***viewCareful-change***", this.carefulList)
 			},
-			updataData(spaceId,layoutObj){
-				let lable = this.carefulList.find(it=>it.spaceId == spaceId);
-				let name = spaceTypes[layoutObj.type - 1];
-				if(lable){
-					lable.name = name;
-				}
-				console.warn("***updataData***",lable)
-			},
 			sliderChanging(e,item) {
 				// const wallValue = e.detail.value;
 				// item.percent = 60;
@@ -153,12 +139,20 @@
 					clkId: 'clk_2cmina_23080405', //点击ID
 					clkName: 'zoomin_clk', //点击前往的页面名称
 					clkParams: {
-						locusName: this.curHouseObj.houseType + "·" + this.$parent.$parent.fixedArea + " " + this.curHouseObj.note,
-						locusValue:this.carefulList[index].name + "面积由" + parseFloat(item.area).toFixed(1)
-						+ "㎡调整为"+ value + "㎡",
+						locusName: "精细调整放大",
 					}
 				};
-				util.trackRequest(param);
+				if(_area<0){//缩小
+					param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080406', //点击ID
+						clkName: 'zoomout_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "精细调整缩小",
+						}
+					};
+				}
+				// util.trackRequest(param);
 				console.log("发送消息-空间变化: ",data, JSON.stringify(item));
 				// this.selectItem = item;
 				item.area = value;
@@ -171,16 +165,6 @@
 			goRoam(){
 				let item = this.lastCareList[this.selectIndex];
 				this.$parent.$parent.goRoam1(item.spaceId);
-				let param = {
-					type: 'CLK', //埋点类型
-					clkId: 'clk_2cmina_24012901', //点击ID
-					clkName: 'AI_clk', //点击前往的页面名称
-					clkParams: {
-						locusName: "AI精软装",
-						carefulList:this.carefulList
-					}
-				};
-				util.trackRequest(param);
 			},
 			callBack(type){
 				console.warn("***callBack***",type)

src/components/newBottomCom/viewMask/viewMask.html

@@ -13,7 +13,7 @@
 			    :src="item.image"
 				fit='cover'
 			    >
-			</el-image>
+			  </el-image>
 		</el-carousel-item>
 	</el-carousel>
 	<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1 && showAIImage">
@@ -31,10 +31,10 @@
 			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
 		</div>
 		<!-- 切换视角 -->
-		<!-- <div class="change-angle columns" @click.stop="switchActor" >
+		<div class="change-angle columns" @click.stop="switchActor" >
 			<img class="camera" src="https://dm.static.elab-plus.com/miniProgram/iconfont/camera.png" mode="widthFix"/>
 			视角切换
-		</div> -->
+		</div>
 	</div>
 	
 	<!-- 左侧按钮  -->
@@ -55,8 +55,8 @@
 	</div>
 	<!-- 微信客服 -->
 	<div class="connect-view columns"
-		@click.stop="mynavigateFuc" data-jumptype="50" v-if="connectUsImg">
-		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
+		@click.stop="mynavigateFuc" data-jumptype="50">
+		<img class="defaultHead" src="https://dm.static.elab-plus.com/miniProgram/conentUs.png" mode="widthFix"/>
 	</div>
 	<!-- 风格层主操作视图 -->
 	<div class="layout-view">
@@ -65,15 +65,9 @@
 		<!-- 精装修 -->
 		<div class="aiEdit">
 			<!-- tab视图 -->
-			<!-- <div class="tab-view rows">
+			<div class="tab-view rows">
 				<div class='left btn rows justify-center' :class="{active:modelType==2}" @click="changeModel(2)">精准设计</div>
 				<div class='right btn rows justify-center' :class="{active:modelType==1}" @click="changeModel(1)">创意设计</div>
-			</div> -->
-			<div class="tab-view">
-				<div class="content rows">
-					<div class="btn rows justify-center" v-for="(item, idx) in datalist" @click="changeSpace(item)"
-					:class="{active:spaceObj.spaceId==item.spaceId}" :key="idx">{{item.text}}</div>
-				</div>
 			</div>
 			<div class="aiStyleList rows">
 				<div class="styleItem" v-for="(item, idx) in styleList" :key="idx" :id="'styleItem'+idx"
@@ -97,11 +91,11 @@
 				</div>
 			</div>
 			<div class="btn-list rows rows-between" >
-				<div class="btn AiBtn rows justify-center up1" @click.stop="aiSubmit(1)">
-					<div class="iconfont icon-a-lujing35039 style1"></div>{{aiImagesList && aiImagesList.length>0?'继续生成':'开始设计'}}
+				<div class="btn houseType rows justify-center up1" @click.stop="goback">
+					<div class="iconfont icon-huxingjianshang style1"></div>返回户型
 				</div>
-				<div class="btn houseType rows justify-center up2" @click.stop="gonext">
-					下一步
+				<div class="btn AiBtn rows justify-center up2" @click.stop="aiSubmit(1)">
+					<div class="iconfont icon-a-lujing35039 style1"></div>{{aiImagesList && aiImagesList.length>0?'继续设计':'开始设计'}}
 				</div>
 			</div>
 		</div>
@@ -110,4 +104,37 @@
 		<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
 		<div class="loadingMsg">{{loadingMsg}}</div>
 	</div>
+	<!-- <div class="dialog">
+		
+	</div> -->
+	<el-dialog
+		title="提醒"
+		:visible.sync="dialogVisible"
+		width="80%"
+		top="35vh"
+		:modal="false"
+		style="pointer-events: auto;"
+		:before-close="cancelHandle"
+		>
+		<span>当前AI使用火爆，请继续尝试</span>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click.stop="cancelHandle();">取消等待</el-button>
+			<el-button type="primary" @click.stop="confirmHandle(1);">继续尝试</el-button>
+		</span>
+	</el-dialog>
+	<el-dialog
+		title="提醒"
+		:visible.sync="dialogAIVisible"
+		width="80%"
+		top="35vh"
+		:modal="false"
+		style="pointer-events: auto;"
+		:before-close="cancelHandle"
+		>
+		<span>AI开了小差，是否重新生成</span>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click.stop="cancelHandle();">放弃生成</el-button>
+			<el-button type="primary" @click.stop="confirmHandle(0);">继续生成</el-button>
+		</span>
+	</el-dialog>
 </div>

src/components/newBottomCom/viewMask/viewMask.scss

@@ -140,17 +140,9 @@
 	// align-items: center;
 	margin-top:30px;
 	.tab-view{
-		position: relative;
 		margin-bottom: 30px;
-		overflow-x: auto;
-		width: 100%;
-		height: 56px;
-		.content{
-			position: absolute;
-		}
 		.btn{
-			// width: 148px;
-			width: max-content;
+			width: 148px;
 			height: 56px;
 			border-radius: 16px;
 			background: transparent;
@@ -159,7 +151,6 @@
 			font-size: 30px;
 			color: #4e4e4e;
 			margin-right:40px;
-			padding: 0px 16px;
 		}
 		.btn.active{
 			background: #343434;
@@ -301,7 +292,7 @@
 	}
 	.up1{
 		color: rgba(245, 145, 39, 1);
-		background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.2) 0%, rgba(239, 149, 57, 0.2) 100%);
+		background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.4) 0%, rgba(239, 149, 57, 0.4) 100%);
 	}
 	.up2{
 		color: rgba(255, 255, 255, 1);
@@ -324,18 +315,17 @@
 }
 .connect-view{
 	position: absolute;
-	width: 242px;
-	height: 330px;
+	width: 139px;
+	height: 184px;
 	background: transparent;
-	bottom: 442px;
-	right:-18px; 
+	bottom: 605px;
+	right:24px; 
 	box-sizing: border-box;
 	z-index: 13;
 	pointer-events: auto;
 	.defaultHead{
-		width: 242px;
-		height: 330px;
-		// clip-path: polygon(0 0%, 100% 0, 100% 100px, 0 100px);
+		width: 139px;
+		height: 184px;
 	}
 }
 .indicator-view{
@@ -439,10 +429,4 @@
 		box-sizing: border-box;
 	}
 	    
-}
-::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    color: transparent;
-	display: none;
 }

src/components/newBottomCom/viewMask/viewMask.vue

@@ -3,15 +3,9 @@
 </template>
 <script>
 	const util = require('@/utils/util.js').default;
-	import router from "@/router";
 	import { MessageBox } from 'mint-ui';
-	import spaceTypes from '@/static/spaceTypesIE.js';
 	// const config = require('@/services/url$config.js');
 	import touchHandle from '@/mixins/touchHandle.js';
-	import {
-		setStorage,
-		getStorage,
-	} from '@/utils/localStorage';
 	// import requestConfig from '@/static/lib/requestConfig';
 	// const app = getApp(); //获取应用实例
 	export default {
@@ -40,7 +34,79 @@
 				count:0,
 				random:1,
 				// disableAble:false,
-				
+				spaceTypes: [{
+						icon: "",
+						title: "卧室",
+						subtitle: "0个布局",
+						englishRemark: "bedroom",
+					},
+					{
+						icon: "",
+						title: "客厅",
+						subtitle: "0个布局",
+						englishRemark: "living room",
+					},
+					{
+						icon: "",
+						title: "餐厅",
+						subtitle: "0个布局",
+						englishRemark: "dinning room",
+					},
+					{
+						icon: "",
+						title: "厨房",
+						subtitle: "0个个布局",
+						englishRemark: "kitchen",
+					},
+					{
+						icon: "",
+						title: "玄关",
+						subtitle: "0个布局",
+						englishRemark: "hallway",
+					},
+					{
+						icon: "",
+						title: "卫生间",
+						subtitle: "0个布局",
+						englishRemark: "bathroom",
+					},
+					{
+						icon: "",
+						title: "衣帽间",
+						subtitle: "0个布局",
+						englishRemark: "walkin closet",
+					},
+					{
+						icon: "",
+						title: "收纳",
+						subtitle: "0个布局",
+						englishRemark: "storage room",
+					},
+					{
+						icon: "",
+						title: "阳台",
+						subtitle: "0个布局",
+						englishRemark: "balcony",
+					},
+					{
+						icon: "",
+						title: "飘窗",
+						subtitle: "0个布局",
+						englishRemark: "bay window",
+					},
+					{
+						icon: "",
+						title: "链接空间",
+						subtitle: "0个布局",
+						englishRemark: "connecting space between two rooms",
+					},
+					{
+						icon: "",
+						title: "自定义",
+						subtitle: "0个布局",
+						englishRemark: "room",
+					},
+				],
 				myloading:false,
 				loadingMsg:'',
 				screenWidth:0,
@@ -162,11 +228,8 @@
 						resultImg:'',
 					}
 				],
-				// dialogVisible: false,
-				// dialogAIVisible: false,
-				datalist:[],
-				connectUsImg:'',
-				curSpaceId:'',
+				dialogVisible: false,
+				dialogAIVisible: false,
 			}
 		},
 		props:{
@@ -174,58 +237,19 @@
 				type: Object,
 				default: null,
 			},
-			spaceList: {
-				type: [Array ,Object],
-				default: [],
-			},
-			layoutList:{
-				type: [Array ,Object],
-				default: [],
-			}
 		},
 		watch: {
 			spaceObj(newVal, oldVal) {
 				if (newVal == null) {
 					return;
 				}
-				console.log("当前空间数据view-mark-watch:", newVal,newVal.layoutSpaceName,newVal.layoutSpaceType);
+				console.log("当前空间数据view-mark-watch:", newVal);
 				this.getAiBeautyFamily();
 				// this.curSpaceArea = parseFloat(
 				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
 				// ).toFixed(2);
 				// this.getOverallArrangementDetailsList();
 			},
-			spaceList(newVal, oldVal) {
-				if (newVal == null) {
-					return;
-				}
-				console.log("当前空间数据spaceList-watch:", newVal);
-				if(newVal && newVal.length>0){
-					this.datalist = [];
-					newVal.forEach(it=>{
-						if(it.spaceName && !it.isSizeLock){
-							this.datalist.push(it);
-						}
-					})
-				}
-				
-				// this.curSpaceArea = parseFloat(
-				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
-				// ).toFixed(2);
-				// this.getOverallArrangementDetailsList();
-			},
-			layoutList(newVal, oldVal) {
-				if (newVal == null) {
-					return;
-				}
-				this.updataLable();
-			},
-		},
-		filters:{
-		// 	spaceTypeFilter(type){
-		// 		let name = spaceTypes[type - 1];
-		// 		return name || '-'
-		// 	},
 		},
 		mounted() {//组件挂载时事件
 			// console.warn("***mounted-nav***",this.seedItem)
@@ -253,9 +277,14 @@
 			if(window.innerHeight && window.screen.height){
 				this.screenHeight = Math.min(window.innerHeight,window.screen.height)
 			}
-			let firstData = JSON.parse(getStorage('firstData'));
-			this.connectUsImg = firstData[0].selectOptionImageUrl;
 		},
+		// 页面被展示时执行
+		onPageShow: function() {  
+			
+		},
+		//页面被隐藏时执行
+        onPageHide: function() {
+        },
 		beforeDestroy:function(){
 			console.warn("***beforeDestroy***");//更新到页面上的数据
 			this.stopInterval();
@@ -269,46 +298,11 @@
 			},
 		},
 		methods:{
-			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
-			updataLable(){
-				let list = this.layoutList;
-				this.datalist.forEach(lable=>{
-					if(lable.spaceType==15){
-						let layoutId = lable.layoutId;
-						let layout = list.find(it=>it.id == layoutId);
-						if(layout){
-							let name = spaceTypes[layout.type - 1];
-							lable.text = name;
-						}
-					}else{
-						let name = spaceTypes[lable.spaceType - 1];
-						lable.text = name;
-					}
-				})
-				this.$forceUpdate()
-				console.warn("***updataLable***",this.datalist)
-			},
 			swiperChangeImg(e){
 				this.currentIndex = e.detail?e.detail.current:e;
 				this.checked = this.aiImagesList[this.currentIndex].checked;
 				console.warn("***swiperChangeImg***",this.checked);//更新到页面上的数据
 			},
-			//切换空间
-			changeSpace(item){
-				this.$parent.changeSpace(item.spaceId);
-				let param = {
-					type: 'CLK', //埋点类型
-					clkId: 'clk_2cmina_23080417', //点击ID
-					clkName: 'changeangle_clk', //点击前往的页面名称
-					clkParams: {
-						locusName: "空间切换",
-						locusValue:item.text,
-						spaceId:item.spaceId,
-						type:item.text,
-					}
-				};
-				util.trackRequest(param);
-			},
 			//视角切换
 			switchActor(){
 				// this.$parent.clearHandle()
@@ -431,14 +425,14 @@
 				this.checked = !this.checked;//变更选项
 				this.aiImagesList[this.currentIndex].checked = this.checked;
 				console.warn("***changeAIImg***",this.checked,this.aiData)
-				// if(this.aiData){//给上一个页面回传生成的数据
-				// 	let space = this.aiData.find(it=>{
-				// 		return it.spaceId == this.spaceObj.spaceId
-				// 	})
-				// 	if(space){
-				// 		space.aiImagesList[this.currentIndex].checked = this.checked;
-				// 	}
-				// }
+				if(this.aiData){//给上一个页面回传生成的数据
+					let space = this.aiData.find(it=>{
+						return it.spaceId == this.spaceObj.spaceId
+					})
+					if(space){
+						space.aiImagesList[this.currentIndex].checked = this.checked;
+					}
+				}
 				if(this.checked){
 					let param = {
 						type: 'CLK', //埋点类型
@@ -486,6 +480,10 @@
 					})
 				}
 			},
+			//返回上一页
+			goback(){
+				this.$router.go(-1);
+			},
 			mynavigateFuc(e) {
 				if (e) {
 					// this.$parent.clearHandle();
@@ -512,12 +510,11 @@
 			async getAiBeautyFamily() {
 				// const spaceName = this.spaceTypes[this.spaceObj.spaceType - 1].title;
 				let res = await requestConfig("getHardboundEffects", {
-					"houseId": this.$route.query.houseId || this.$store.state.houseId,
-					"spaceType": this.spaceObj.layoutSpaceType || this.spaceObj.spaceType,
-					"spaceName": this.spaceObj.layoutSpaceName || this.spaceObj.spaceName,
+					"houseId": this.$route.query.houseId,
+					"spaceType": this.spaceObj.spaceType,
+					"spaceName": this.spaceObj.spaceName,
 				});
 				this.styleList = [];
-				// alert("***getAiBeautyFamily-res***"+JSON.stringify(res))
 				if (res.success) {
 					let list = res.list;
 					this.styleList = list;
@@ -716,7 +713,6 @@
 						parmas.model = "deployments/elabgroup/elab-ssd-1b";
 					}
 				}
-				this.curSpaceId = this.spaceObj.spaceId;//生成时的空间id
 				let result = await this.prevHandle(parmas);
 				console.warn("***prevHandle***",result)
 				if(result && result.length>0){
@@ -889,11 +885,15 @@
 			},
 			confirmHandle(type){
 				console.log('用户点击确定')
+				this.dialogVisible = false;
+				this.dialogAIVisible = false;
 				this.subType = type || 0;
 				this.startServer();
 			},
 			cancelHandle(){
 				console.log('用户点击取消')
+				this.dialogVisible = false;
+				this.dialogAIVisible = false;
 				this.subType = 0;
 			},
 			//获取生成图结果
@@ -999,12 +999,25 @@
 					if(random >= 100){
 						random = 99;
 					}
-					this.myloading = true;
-					this.loadingMsg = '生成中…' + parseInt(random) + '%';
+					// uni.showLoading({
+					// 	icon: 'loading',
+					// 	title: '生成中…' + parseInt(random) + '%'
+					// })
+					// if(!this.showAIImage){
+						this.myloading = true;
+						this.loadingMsg = '生成中…' + parseInt(random) + '%';
+					// }
 					this.getOutPicture();
 				}else if(single.status=='succeeded'){
-					this.myloading = true;
-					this.loadingMsg = '生成中…100%';
+					// uni.showLoading({
+					// 	icon: 'loading',
+					// 	title: '生成中…100%',
+					// 	duration:2000,
+					// })
+					// if(!this.showAIImage){
+						this.myloading = true;
+						this.loadingMsg = '生成中…100%';
+					// }
 				}
 			},
 			//返回结果处理
@@ -1019,57 +1032,48 @@
 					image:newImage,
 					checked:false,
 					list:[newImage],
-					spaceId:this.curSpaceId,//记录下当前生成的AI图是哪个空间的，因为会切换空间
 				}
 				this.aiImagesList.push(_data);
 				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
 				if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
 					this.$parent.clearHandle();
 				}
+				let cpAiData = JSON.parse(JSON.stringify(this.aiData)) || []
+				if(cpAiData && this.curHouseObj && this.curHouseObj.houseFloor){//给上一个页面回传生成的数据
+					let space = cpAiData.find(it=>{
+						return it.houseFloor == this.curHouseObj.houseFloor && it.spaceId == this.spaceObj.spaceId
+					})
+					if(space){
+						let data ={
+							aiStyleName:aiStyleName,
+							image:newImage,
+							checked:false,
+						}
+						space.aiImagesList.push(data);
+					}else{//不存在则构建数据
+						let data = {
+							houseFloor:this.curHouseObj.houseFloor,//当前的楼层
+							spaceId:this.spaceObj.spaceId,
+							aiImagesList:[
+								{
+									aiStyleName:aiStyleName,
+									image:newImage,
+									checked:false,
+								}
+							]
+						}
+						cpAiData.push(data)
+					}
+					this.$store.dispatch('setAiData', cpAiData)
+				}
 				this.stopInterval();
 				if(this.aiImagesList.length>1){
 					setTimeout(()=>{
+						// this.$refs.carousel.next();
 						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
 					}, 1000);
 				}
 			},
-			//空间数据整理
-			spaceAIHandle(){
-				let curHouseObj = this.$parent.curHouseObj;//当前户型数据对象
-				let aiImagesList = this.aiImagesList;//AI生成图数据对象
-				let wallList = this.$parent.wallList;//当前户型墙体数据列表对象
-				let spaceList =  JSON.parse(curHouseObj.houseJson);
-				
-				//遍历当前户型下的每一个空间
-				spaceList.forEach((item)=>{
-					let space = item;
-					let list = aiImagesList.filter(it=>it.spaceId==space.spaceId);//找到AI生成图中的当前空间
-					if(list && list.length>0){
-						list = list.filter(it=>it.checked==true);//过滤选中的
-						list = list.map(it=>{
-							return it.image
-						})
-						space.hardboundEffect = list;
-						console.warn("submitHouse: ", list,space);
-					}
-					let wall = wallList.find(it=>it.id==space.wallId);
-					if(wall){//找到当前空间的墙体数据
-						space.wallList = JSON.stringify(wall);
-					}
-				})
-				setStorage('spaceList', spaceList);//把空间选择的数据存入本地缓存里面，方便后续使用
-				console.warn("**spaceList**",spaceList)
-			},
-			//进入下一步
-			gonext(){
-				this.spaceAIHandle()
-				router.push({
-					name: "webgl_rxdz_env",
-					query:{
-						houseId:this.$route.query.houseId || this.$store.state.houseId,
-					}
-				});
-			},
 			showToast(title,time=3000){
 				this.myloading = false;
 				this.$store.state.loading = true;

src/components/newBottomCom/viewShell/viewShell.html

@@ -1,38 +1,33 @@
 <!-- 弹出层的壳子 -->
-<div class="shell-view" :class="(styleType==2 || styleType==3)?'shell-view2':''">
+<div class="shell-view" :class="styleType==2?'shell-view2':''">
 	<!-- 楼层 -->
-	<!-- <div class="floor-view" v-if="pageType==1 && floorList&&floorList.length>1">
+	<div class="floor-view" v-if="pageType==1 && floorList&&floorList.length>1">
 		<div class="floor-item rows justify-center" :class="floorId==floor.id?'active':''" 
 			v-for="(floor,index) in floorList" :key="index" @click="floorChange(floor)">
 			{{floor.houseFloor?floor.houseFloor+'F':''}}
 		</div>
-	</div> -->
+	</div>
 	<!-- 提示 -->
 	<!-- <div class="tips-view">
 		{{pageType==1?'点击进入空间':'单击圆点切换视角'}}
 	</div> -->
 	<!-- 放大缩小操作区域 -->
-	<div class="zoom-view" @click.stop="zoomInOut">
-		<img class="icon" :src="styleType==2?'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomin.png':'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomout.png'" mode="widthFix"/>
+	<div class="zoom-view" @click.stop="zoomInOut" v-if="styleType==2">
+		<img class="icon":src="styleType==2?'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomin.png':'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomout.png'" mode="widthFix"/>
 	</div>
 	<!-- 微信客服 -->
-	<div class="connect-view columns" v-if="connectUsImg"
+	<div class="connect-view columns"
 		@click="mynavigateFuc" data-jumptype="50">
-		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
+		<img class="defaultHead" src="https://dm.static.elab-plus.com/miniProgram/conentUs.png" mode="widthFix"/>
 	</div>
 	<!-- 手势操作区域 -->
-	<div v-if="showSignscoll" class="shell-signscoll rows justify-center" @click="upScrollOrDown" @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend">
+	<!-- <div v-if="showSignscoll" class="shell-signscoll rows justify-center" @click="upScrollOrDown" @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend">
 		<div class="signscoll-block"></div>
-	</div>
+	</div> -->
 	<!-- 精细化视图 -->
-	<viewCareful ref="viewCareful" v-show="styleType==2" @curSpaceChange="curSpaceChange" 
-	:overChange="overChange" :curHouseObj="houseObj"></viewCareful>
-	<!-- 布局选择 -->
-	<viewPlot ref="viewPlot" v-show="styleType==3" @curSpaceChange="curSpaceChange"
-	:overChange="overChange" :selectSpace="selectSpace"></viewPlot>
+	<viewCareful ref="viewCareful" v-show="styleType==2" @curSpaceChange="curSpaceChange" :overChange="overChange" :curHouseObj="houseObj"></viewCareful>
 	<!-- 种子户型视图 -->
-	<viewlayout ref="viewlayout" @curSpaceChange="curSpaceChange" :styleType="styleType" :overChange="overChange" :curHouseObj="houseObj" 
-	@upCom="upCom" @streamRecord="streamRecord" @streamRecordEnd="streamRecordEnd"></viewlayout>
+	<viewlayout ref="viewlayout" @curSpaceChange="curSpaceChange" :styleType="styleType" :overChange="overChange" :curHouseObj="houseObj" :houseList="houseList" @upCom="upCom" @streamRecord="streamRecord" @streamRecordEnd="streamRecordEnd" @seedChange="seedChange"></viewlayout>
 	<!-- nav视图 -->
 	<!-- <viewToolNav v-show="pageType==1 && (styleType==2 || styleType==3)" :seedItem="seedItem" @downCom="downScroll"></viewToolNav> -->
 	<!-- 风格选择视图 -->

src/components/newBottomCom/viewShell/viewShell.scss

@@ -18,7 +18,7 @@
 	transition: height 1s;
 }
 .shell-view2{
-	height: 748px;
+	height: 800px;
 }
 .shell-signscoll{
 	position: absolute;
@@ -86,17 +86,15 @@
 }
 .connect-view{
 	position: absolute;
-	width: 242px;
-	height: 330px;
+	width: 139px;
+	height: 184px;
 	background: transparent;
-	top:-158px;
-	right:-18px; 
+	top:-190px;
+	right:24px; 
 	box-sizing: border-box;
-	z-index: 2;
 	.defaultHead{
-		width: 242px;
-		height: 330px;
-		clip-path: polygon(0 0%, 100% 0, 100% 158px, 0 158px);
+		width: 139px;
+		height: 184px;
 	}
 }
 button{

src/components/newBottomCom/viewShell/viewShell.vue

@@ -4,14 +4,10 @@
 <script>
 	const util = require('@/utils/util.js').default;
 	// import commonMethod from '@/common/commonMethod.js';
-	import touchHandle from '@/mixins/touchHandle.js';
+	// import touchHandle from '@/mixins/touchHandle.js';
 	// import requestConfig from '@/static/lib/requestConfig';
 	import viewlayout from'@/components/newBottomCom/viewlayout/viewlayout.vue';
 	import viewCareful from'@/components/newBottomCom/viewCareful/viewCareful.vue';
-	import viewPlot from'@/components/newBottomCom/viewPlot/viewPlot.vue';
-	import {
-		getStorage,
-	} from '@/utils/localStorage';
 	// import viewToolNav from'@/components/newBottomCom/viewToolNav/viewToolNav.vue';
 	// import viewStyle from'@/webgl/components/newBottomCom/viewStyle/viewStyle.vue';
 
@@ -35,9 +31,6 @@
 				styleType:1,	//当前底部组件的状态
 				seedItem:null,	//当前选中的种子户型
 				showSignscoll:true,	//是否显示手势操作区域
-				selectSpace:null,//用户选择的空间
-				lastStyleType:null,
-				connectUsImg:'',
 			}
 		},
 		props:{
@@ -49,16 +42,16 @@
 				type: [String, Number],
 				default: 1,
 			},
-			// curHouseType: {//当前选中的户型类型
-			// 	type: [String, Number],
-			// 	default: '',
-			// },
-			// houseList: {//当前户型所有的户型详情，可以切换
-			// 	type: Array,
-			// 	default: () => {
-			// 		return []
-			// 	}
-			// },
+			curHouseType: {//当前选中的户型类型
+				type: [String, Number],
+				default: '',
+			},
+			houseList: {//当前户型所有的户型详情，可以切换
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
 			houseObj: {//当前户型的具体详情
 				type: Object,
 				default: () => {
@@ -73,15 +66,15 @@
 			},
 		},
 		watch: {
-			// curHouseType: {
-			// 	handler(newVal) {
-			// 		if (newVal) {
-			// 			//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
-			// 			console.warn("***curHouseType-change***",newVal)
-			// 			this.initData()
-			// 		}
-			// 	},
-			// },
+			curHouseType: {
+				handler(newVal) {
+					if (newVal) {
+						//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
+						console.warn("***curHouseType-change***",newVal)
+						this.initData()
+					}
+				},
+			},
 			styleType: {//组件展开状态切换
 				handler(newVal,oldVal) {
 					if (newVal) {
@@ -98,8 +91,8 @@
 							this.shellHeight = '800px';
 							_endHeight = 800;
 						}else if(newVal==3){//变更为最小状态
-							this.shellHeight = '748';
-							_endHeight = 748;
+							this.shellHeight = '200px';
+							_endHeight = 200;
 						}
 						// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 						if(this.$parent && this.$parent.hasOwnProperty('canvasHeight')){
@@ -121,29 +114,40 @@
 		components:{
 			viewlayout,
 			viewCareful,
-			viewPlot,
 			// viewStyle,
 		},
-		mixins: [touchHandle],
+		// mixins: [touchHandle],
 		async mounted() {
 			// await this.getCityHouseList();		
 			console.warn("***viewShell***",this.houseList)
-			let firstData = JSON.parse(getStorage('firstData'));
-			this.connectUsImg = firstData[0].selectOptionImageUrl;
 		},
+		// 页面被展示时执行
+		onPageShow: function() {  
+			
+		},
+		//页面被隐藏时执行
+        onPageHide: function() {
+        	// console.warn("***detached-hide***")
+        },
 		methods:{
-			changeStyleType(type,selectSpace){
-				console.warn("***changeStyleType***",this.lastStyleType)
-				if(this.styleType != type){
-					this.lastStyleType = this.styleType;//记录下当前的状态，因为会返回到这个状态
+			initData(){
+				let houseList = this.houseList;
+				// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				// let curHouseType = currPage.curHouseType?currPage.curHouseType:houseList[0].spaceStructure;//获取当前页面选中的户型类型
+				let curHouseType = this.curHouseType || houseList[0].spaceStructure;//获取当前页面选中的户型类型
+				//获取当前选中的户型大类，从中提取楼层信息
+				let curData = houseList.find(item=>{
+					return item.spaceStructure == curHouseType;
+				})
+				this.floorList = [];
+				curData.layoutStruct && curData.layoutStruct.forEach(item=>{
+					this.floorList.push(item);
+				})
+				console.warn("***floorList-init***",this.floorList)
+				if(this.floorList && this.floorList[0]){
+					this.floorId = this.floorList[0].id;//默认选中第一个
+					this.$emit("curHouseFloorChange", this.floorList[0]);//通知页面，户型楼层发生了变更
 				}
-				this.styleType = type;
-				this.selectSpace = selectSpace;
-			},
-			rebackLast(){
-				console.warn("***rebackLast***",this.lastStyleType)
-				this.styleType = this.lastStyleType;//返回记录下的状态
-				this.selectSpace = null;
 			},
 			catchTouchMove: function() {
 				return false;
@@ -160,32 +164,32 @@
 				this.showSignscoll = true;
 			},
 			//楼层切换
-			// floorChange(item){
-			// 	if(this.floorId==item.id){
-			// 		return false;
-			// 	}
-			// 	if(this.$parent.loadLayFlag){//加载家具模型中
-			// 		this.$message("加载模型中,请稍后再试");
-			// 		return false
-			// 	}
-			// 	this.floorId = item.id;
-			// 	let param = {
-			// 		type: 'CLK', //埋点类型
-			// 		clkId: 'clk_2cmina_23080410', //点击ID
-			// 		clkName: 'floorswitching_clk', //点击前往的页面名称
-			// 		clkParams: {
-			// 			locusName: "楼层切换",
-			// 		}
-			// 	};
-			// 	util.trackRequest(param);
-			// 	this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
-			// },
+			floorChange(item){
+				if(this.floorId==item.id){
+					return false;
+				}
+				if(this.$parent.loadLayFlag){//加载家具模型中
+					this.$message("加载模型中,请稍后再试");
+					return false
+				}
+				this.floorId = item.id;
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_23080410', //点击ID
+					clkName: 'floorswitching_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "楼层切换",
+					}
+				};
+				util.trackRequest(param);
+				this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
+			},
 			//种子户型变更-户型大类变更
-			// seedChange(item){
-			// 	console.warn("***seedChange***",item)
-			// 	this.seedItem = item;
-			// 	this.$emit("curHouseTypeChange", item);//通知页面，户型大类发生了变更
-			// },
+			seedChange(item){
+				console.warn("***seedChange***",item)
+				this.seedItem = item;
+				this.$emit("curHouseTypeChange", item);//通知页面，户型大类发生了变更
+			},
 			//放大缩小
 			zoomInOut(){
 				if(this.styleType == 2){
@@ -258,7 +262,7 @@
 					if(window.__wxjs_environment === 'miniprogram'){
 						wx.miniProgram.navigateTo({url: '/pages/transfer/transfer?event=openCustomerServiceChat&houseId='+this.$store.state.houseId})
 					}else{
-						// this.$message.warning("敬请期待");
+						this.$message.warning("敬请期待");
 					}
 				}
 			},

src/components/newBottomCom/viewlayout/viewlayout.html

@@ -3,27 +3,20 @@
 <div class="layout-view">
 	<!-- 种子区域 -->
 	<div>
-		<!-- <div class="btn-list rows rows-between" v-if="styleType==1 || styleType==3">
+		<div class="btn-list rows rows-between" v-if="styleType==1 || styleType==3">
+			<!-- <div class="btn voice rows justify-center" :class="recording?'voice2':'voice3'" @touchstart="streamRecord" @touchmove="mytouchmove">
+				<img class="icon" :src="recording?'https://dm.static.elab-plus.com/miniProgram/iconfont/source.png':'https://dm.static.elab-plus.com/miniProgram/iconfont/source1.png'" mode="widthFix"/>
+			</div> -->
 			<div class="btn rows up justify-center" @click="upCom" :class="styleType==1?'up1':'up2'">开始定制户型 ></div>
-		</div> -->
-		<!-- <div class="btn-list rows rows-between" v-else-if="styleType==2">
+			
+		</div>
+		<div class="btn-list rows rows-between" v-else-if="styleType==2">
 			<div class="btn houseType rows justify-center up2" >
 				<div class="iconfont icon-huxingjianshang style1"></div>户型空间
 			</div>
 			<div class="btn AiBtn rows justify-center up1" @click="goRoam">
 				<div class="iconfont icon-a-lujing35039 style1"></div>AI精软装
 			</div>
-		</div> -->
-		<div class="btn-list rows rows-between" v-if="styleType==1 || styleType==2">
-			<div class="btn houseType rows justify-center up1" @click="goback">
-				<div class="iconfont icon-huxingjianshang style1"></div>重选空间
-			</div>
-			<div class="btn AiBtn rows justify-center up2" @click="goRoam">
-				<div class="iconfont icon-a-lujing35039 style1"></div>AI精软装
-			</div>
 		</div>
-		<!-- <div class="btn-list rows rows-between" v-if="styleType==3">
-			<div class="btn rows up justify-center" @click="upCom" :class="styleType==1?'up1':'up2'">确认</div>
-		</div> -->
 	</div>
 </div>

src/components/newBottomCom/viewlayout/viewlayout.vue

@@ -26,61 +26,61 @@
 					text: '等待说话',
 				},
 				recording: false, // 正在录音
-				startX: 0,
-				startY: 0,
-				clientX: 0,
-				clientY: 0,
-				defaultIndex: 0, //默认选中的户型大类
-				carefulList: [],
-				lastSpace: null, //上一个语音操作的空间对象
-				bigWord: "变大,放大,大一点,变宽",
-				bigWordPY: "bianda,fangda,dayidian,biankuan",
-				smaillWord: "变小,缩放,小一点,变窄",
-				smaillWordPY: "bianxiao,suofang,xiaoyidian,bianzhai",
-				changeRate: 0.05, //每次变化的比例
+				startX:0,
+				startY:0,
+				clientX:0,
+				clientY:0,
+				defaultIndex:0,//默认选中的户型大类
+				carefulList:[],
+				lastSpace:null,	//上一个语音操作的空间对象
+				bigWord:"变大,放大,大一点,变宽",
+				bigWordPY:"bianda,fangda,dayidian,biankuan",
+				smaillWord:"变小,缩放,小一点,变窄",
+				smaillWordPY:"bianxiao,suofang,xiaoyidian,bianzhai",
+				changeRate:0.05,	//每次变化的比例
 			}
 		},
 		props: {
-			// houseList: {//当前户型所有的户型详情，可以切换
-			// 	type: Array,
-			// 	default: () => {
-			// 		return []
-			// 	}
-			// },
-			// curHouseObj: {//当前展示的户型
-			// 	type: Object,
-			// 	default: () => {
-			// 		return null
-			// 	}
-			// },
-			overChange: { //当前选中的户型类型
+			houseList: {//当前户型所有的户型详情，可以切换
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			curHouseObj: {//当前展示的户型
+				type: Object,
+				default: () => {
+					return null
+				}
+			},
+			overChange: {//当前选中的户型类型
 				type: Boolean,
 				default: false,
 			},
-			styleType: {
+			styleType:{
 				type: [String, Number],
 				default: '',
 			}
 		},
 		watch: {
-			// houseList: {
-			// 	handler(newVal) {
-			// 		if (newVal) {
-			// 			console.warn("***houseList-change***", newVal)
-			// 			this.initData(newVal);
-			// 		}
-			// 	},
-			// },
-			// curHouseObj: {
-			// 	handler(newVal,oldVal) {
-			// 		if (newVal) {
-			// 			console.warn("***curHouseObj-CHANGE-layout***", newVal)
-			// 			if((oldVal && oldVal.id != newVal.id) || !oldVal){
-			// 				this.initSpanceData();
-			// 			}
-			// 		}
-			// 	},
-			// },
+			houseList: {
+				handler(newVal) {
+					if (newVal) {
+						console.warn("***houseList-change***", newVal)
+						this.initData(newVal);
+					}
+				},
+			},
+			curHouseObj: {
+				handler(newVal,oldVal) {
+					if (newVal) {
+						console.warn("***curHouseObj-CHANGE-layout***", newVal)
+						if((oldVal && oldVal.id != newVal.id) || !oldVal){
+							this.initSpanceData();
+						}
+					}
+				},
+			},
 		},
 		async mounted() {
 			// this.getRecordAuth();//获取录音权限
@@ -90,17 +90,113 @@
 		},
 		// 页面被展示时执行
 		onPageShow: function() {
-
+			
 		},
 		//页面被隐藏时执行
 		onPageHide: function() {
 			console.warn("***detached-hide***")
 		},
 		methods: {
-			//返回上一页
-			goback(){
-				this.$router.go(-1);
+			initSpanceData(){
+				this.carefulList = [];
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				const spaceDetail = this.curHouseObj;
+				const spaceList = JSON.parse(spaceDetail.houseJson);
+				spaceList && spaceList.forEach(async (item,index)=>{
+					let curSpaceArea = parseFloat(
+						(item.spaceWidth * item.spaceHeight) / 10000
+					).toFixed(1);
+					let minArea = 0;
+					let maxArea = 100;
+					if(item.hasOwnProperty('spaceWidthMin') && item.hasOwnProperty('spaceHeightMin')){
+						minArea = parseFloat((item.spaceWidthMin * item.spaceHeightMin) / 10000).toFixed(1);
+					}
+					if(item.hasOwnProperty('spaceWidthMax') && item.hasOwnProperty('spaceHeightMax')){
+						maxArea = parseFloat((item.spaceWidthMax * item.spaceHeightMax) / 10000).toFixed(1);
+					}
+					let text = item.spaceName;
+					if(text && !item.isSizeLock){
+						// let res = await requestConfig("chineseToPinyin", {chinese:text},true);
+						// let pinyin = res.single;
+						let data = {
+							spaceId:item.spaceId,
+							index:this.carefulList.length,
+							name:text,
+							namePY:'',
+							area:curSpaceArea,
+							percent:null,
+							minArea:minArea,	//最小面积
+							maxArea:maxArea,	//最大面积
+						}
+						this.carefulList.push(data)
+					}
+				})
+				console.warn("***viewlayout-init***", this.carefulList)
 			},
+			initData(houseList){
+				this.seedLayoutList = [];
+				houseList && houseList.forEach(item=>{
+					let data = {
+						spaceStructure: item.spaceStructure,
+						spaceName: item.spaceName,
+						set: false, //是否已经设置过
+					};
+					this.seedLayoutList.push(data);
+				})
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				// if(currPage.curHouseType){//获取当前页面选中的户型类型
+				// 	this.selectSeedId = currPage.curHouseType
+				// } else if(this.seedLayoutList && this.seedLayoutList[this.defaultIndex]){//默认选中第一个
+				// 	this.selectSeedId = this.seedLayoutList[this.defaultIndex].spaceStructure;
+				// }
+				this.selectSeedId = this.seedLayoutList[this.defaultIndex].spaceStructure;
+				let keyWord = this.$route.query.layer;
+				if(keyWord){//如果存在结构特征，则定位到该模型大类下
+					let item = this.seedLayoutList.find(it=>keyWord.includes(it.spaceName));
+					if(item){
+						this.selectSeedId = item.spaceStructure;
+					}
+				}
+				if(this.selectSeedId){
+					let item = this.seedLayoutList.find(it=>{
+						return it.spaceStructure == this.selectSeedId
+					})
+					this.$emit("seedChange", item);//通知父组件-当前已经选中了户型大类
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080402', //点击ID
+						clkName: 'seedroom_clk', //点击前往的页面名称
+						clkParams: {
+							type: item.spaceName,
+							locusValue: item.spaceStructure,
+							locusName: "切换种子户型",
+						}
+					};
+					// util.trackRequest(param);
+				}
+				console.warn("***curHouseType-init***",this.seedLayoutList)
+			},
+			// seedItemCheck(item) {
+			// 	if (!item || !item.spaceStructure) {
+			// 		return false;
+			// 	}
+			// 	if (item.spaceStructure == this.selectSeedId) {
+			// 		return false;
+			// 	}
+			// 	this.selectSeedId = item.spaceStructure;
+			// 	this.$emit("seedChange", item);
+			// 	let param = {
+			// 		type: 'CLK', //埋点类型
+			// 		clkId: 'clk_2cmina_23080402', //点击ID
+			// 		clkName: 'seedroom_clk', //点击前往的页面名称
+			// 		clkParams: {
+			// 			type: item.spaceName,
+			// 			locusValue: item.spaceStructure,
+			// 			locusName: "切换种子户型",
+			// 		}
+			// 	};
+			// 	// util.trackRequest(param);
+			// },
 			//上划触发
 			upCom() {
 				console.warn("***upCom***")
@@ -115,7 +211,7 @@
 				};
 				// util.trackRequest(param);
 			},
-			goRoam() {
+			goRoam(){
 				this.$parent.$refs.viewCareful.goRoam();
 			},
 			//获取录音权限
@@ -146,27 +242,27 @@
 				})
 			},
 			//求最长公共子集
-			findSubStr(str1, str2) {
-				if (str1.length > str2.length) {
-					var temp = str1;
-					str1 = str2;
-					str2 = temp;
-				}
-				let len1 = str1.length;
-				let len2 = str2.length;
-				for (var j = len1; j > 0; j--) {
-					for (var i = 0; i < len1 - j; i++) {
-						var current = str1.substr(i, j);
-						if (str2.indexOf(current) >= 0) {
-							return current;
-						}
-					}
-				}
-				return "";
+			findSubStr(str1, str2){
+			    if (str1.length > str2.length) {
+			      var temp = str1;
+			      str1 = str2;
+			      str2 = temp;
+			    }
+			    let len1 = str1.length;
+			    let len2 = str2.length;
+			    for (var j = len1; j > 0; j--) {
+			      for (var i = 0; i < len1 - j; i++) {
+			        var current = str1.substr(i, j);
+			        if (str2.indexOf(current) >= 0) {
+			          return current;
+			        }
+			      }
+			    }
+			    return "";
 			},
 			//声音变化
 			async textChange(text) {
-				if (this.overChange) {
+				if(this.overChange){
 					uni.showToast({
 						title: '请慢一点',
 						icon: 'none',
@@ -174,42 +270,40 @@
 					})
 					return false;
 				}
-				let res = await requestConfig("chineseToPinyin", {
-					chinese: text
-				});
+				let res = await requestConfig("chineseToPinyin", {chinese:text});
 				let pinyin = res.single;
-				console.warn("****pinyin***", pinyin)
+				console.warn("****pinyin***",pinyin)
 				text = pinyin;
 				//全匹配轮一遍
-				let curSpace = this.carefulList.find(space => {
+				let curSpace = this.carefulList.find(space=>{
 					return text.includes(space.namePY)
 				})
-				if (!curSpace) {
-					let list = this.carefulList.map((space, index) => {
+				if(!curSpace){
+					let list = this.carefulList.map((space,index)=>{
 						let comStr = this.findSubStr(text, space.namePY + ' ');
 						return {
-							spaceId: space.spaceId,
-							namePY: space.namePY,
-							name: space.name,
+							spaceId:space.spaceId,
+							namePY:space.namePY,
+							name:space.name,
 							comStr,
 							index,
 						}
 					})
 					//寻找5个字符串以上的
-					let tmpList = list.filter(it => {
+					let tmpList = list.filter(it=>{
 						return it.comStr.length > 5;
 					})
-					if (tmpList && tmpList.length > 0) {
+					if(tmpList && tmpList.length>0){
 						tmpList.sort((a, b) => a.comStr.length - b.comStr.length);
-						let index = tmpList[tmpList.length - 1].index; //最大值在carefulList的序号
-						curSpace = this.carefulList[index]; //
-					} else {
+						let index = tmpList[tmpList.length-1].index;//最大值在carefulList的序号
+						curSpace = this.carefulList[index];//
+					}else{
 						curSpace = this.lastSpace;
 					}
 				}
-
+				
 				//没有找到语音操作对象
-				if (!curSpace) {
+				if(!curSpace){
 					uni.showToast({
 						title: '请再说一次',
 						icon: 'none',
@@ -218,48 +312,48 @@
 					return false;
 				}
 				this.lastSpace = curSpace;
-
-				console.log("textChange：", curSpace, this.carefulList, text, this.bigWordPY, this.smaillWordPY);
-
-				let biglist = this.bigWordPY.split(',').map(word => {
+				
+				console.log("textChange：", curSpace,this.carefulList,text,this.bigWordPY,this.smaillWordPY);
+				
+				let biglist = this.bigWordPY.split(',').map(word=>{
 					return text.lastIndexOf(word)
 				})
-				let smalllist = this.smaillWordPY.split(',').map(word => {
+				let smalllist = this.smaillWordPY.split(',').map(word=>{
 					return text.lastIndexOf(word)
 				})
 				let a = Math.max(...biglist);
 				let b = Math.max(...smalllist);
 				let big = false;
-				if (a == -1 && b == -1) { //都没命中
+				if(a==-1 && b==-1){//都没命中
 					uni.showToast({
 						title: '请再说一次',
 						icon: 'none',
 						duration: 2000
 					})
 					return false;
-				} else if (a > -1 && b > -1) { //两个都命中了
-					if (a > b) { //放大靠后-命中靠后
+				}else if(a>-1 && b>-1){//两个都命中了
+					if(a > b){//放大靠后-命中靠后
 						big = true;
-					} else {
+					}else{
 						big = false;
 					}
-				} else if (a > -1) {
+				}else if(a>-1){
 					big = true;
 				}
 				let _area = parseFloat(curSpace.area) * this.changeRate;
 				let data = {
-					spaceId: curSpace.spaceId,
-					area: _area,
-					isZoomIn: big, //true 放大 false 缩放
+					spaceId:curSpace.spaceId,
+					area:_area,
+					isZoomIn:big,//true 放大 false 缩放
 				}
-				console.log("viewlayout-发送消息-空间变化: ", data, curSpace.area, big);
+				console.log("viewlayout-发送消息-空间变化: ",data,curSpace.area,big);
 				uni.showToast({
 					title: '正在变化，请稍后',
 					icon: 'none',
 					duration: 2000
 				})
 				// this.sendMessageAction(JSON.stringify(parmas));
-				this.$emit("curSpaceChange", data); //通知父组件-当前已经选中了户型大类
+				this.$emit("curSpaceChange",data);//通知父组件-当前已经选中了户型大类
 			},
 			/**
 			 * 初始化语音识别回调
@@ -273,28 +367,28 @@
 						text: res.result,
 					})
 					this.currentTranslate = currentData;
-					console.warn("***manager-正在录音***", this.currentTranslate)
+					console.warn("***manager-正在录音***",this.currentTranslate)
 				}
 				// 识别结束事件
 				manager.onStop = (res) => {
-					console.warn("***manager-识别结束0***", this.recording, res)
+					console.warn("***manager-识别结束0***",this.recording,res)
 					// this.textChange("客厅大一点");
-					if (this.recording == false) { //已经强制结束识别了
-						return false; //不识别
+					if(this.recording==false){//已经强制结束识别了
+						return false;//不识别
 					}
 					let text = res.result
-					if (text == '') { //识别内容为空时的反馈
+					if (text == '') {//识别内容为空时的反馈
 						this.showRecordEmptyTip()
 						return
 					}
-					console.warn("***manager-识别结束***", text);
+					console.warn("***manager-识别结束***",text);
 					let param = {
 						type: 'CLK', //埋点类型
 						clkId: 'clk_2cmina_23080407', //点击ID
 						clkName: 'voice_clk', //点击前往的页面名称
 						clkParams: {
 							locusName: "语音调整",
-							text: text
+							text:text
 						}
 					};
 					// util.trackRequest(param);
@@ -307,8 +401,8 @@
 
 				// 识别错误事件
 				manager.onError = (res) => {
-					console.warn("***manager-识别错误***", this.recording, res)
-					if (this.recording == false) {
+					console.warn("***manager-识别错误***",this.recording,res)
+					if(this.recording == false){
 						return false;
 					}
 					this.stopRecordHandle();
@@ -322,19 +416,19 @@
 				uni.onBackgroundAudioPlay(res => {
 					const backgroundAudioManager = uni.getBackgroundAudioManager()
 					let src = backgroundAudioManager.src
-
+					
 					this.currentTranslateVoice = src;
 				})
 			},
 			//执行停止录音的方法
-			stopRecordHandle() {
+			stopRecordHandle(){
 				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				this.recording = false;
-				this.$emit("streamRecordEnd"); //通知父组件
+				this.$emit("streamRecordEnd");//通知父组件
 				// currPage.voiceMaskChange(false);//关闭蒙层
 			},
 			//用户语音为空
-			showRecordEmptyTip() {
+			showRecordEmptyTip(){
 				this.stopRecordHandle();
 				uni.showToast({
 					title: '告诉我您的想法',
@@ -342,7 +436,7 @@
 					duration: 2000
 				})
 			},
-			catchTapEvent: function() {
+			catchTapEvent:function(){
 				return false;
 			},
 			/**
@@ -351,8 +445,7 @@
 			streamRecord: function(e) {
 				// this.getRecordAuth();//获取录音权限
 				console.warn("streamrecord", e)
-				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages()
-					.length - 1].$vm : null;
+				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
 				// let buttonItem = detail.buttonItem || {}
 				manager.start({
 					lang: language[0].lang_content,
@@ -362,8 +455,8 @@
 				this.clientY = 0;
 				this.startX = e.changedTouches[0].clientX;
 				this.startY = e.changedTouches[0].clientY;
-				this.recording = true; //录音中
-				currPage.voiceMaskChange(true); //显示蒙层
+				this.recording = true;//录音中
+				currPage.voiceMaskChange(true);//显示蒙层
 				this.$emit("streamRecord");
 			},
 			mytouchmove(e) {
@@ -374,22 +467,22 @@
 				this.clientX = touchMoveX - startX;
 				this.clientY = touchMoveY - startY;
 			},
-			angle(start, end) {
+			angle(start,end){
 				let _X = end.X - start.X;
 				let _Y = end.Y - start.Y;
-				if (_X == 0) return 90;
-				return 360 * Math.atan((_Y / _X) / (2 * Math.PI))
+				if(_X == 0) return 90;
+				return 360 * Math.atan((_Y / _X) / (2*Math.PI))
 			},
 			/**
 			 * 松开按钮结束语音识别
 			 */
 			streamRecordEnd: function(e) {
-				console.warn("streamRecordEnd", this.recording, e)
+				console.warn("streamRecordEnd" ,this.recording,e)
 				// let detail = e.detail || {} // 自定义组件触发事件时提供的detail对象
 				// let buttonItem = detail.buttonItem || {}
 
 				// 防止重复触发stop函数
-				if (this.recording == false) {
+				if (this.recording==false) {
 					console.warn("has finished!")
 					return
 				}
@@ -397,7 +490,8 @@
 				let startY = this.startY; //开始y坐标
 				let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标 
 				let touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标 
-				let angle = this.angle({
+				let angle = this.angle(
+				{
 					X: startX,
 					Y: startY
 				}, {
@@ -406,25 +500,25 @@
 				})
 				//滑动角度超过45retrun
 				// console.log(Math.abs(angle), "Math.abs(angle)")
-				if (Math.abs(angle) > 45) { //上下滑动
-					if (startY > touchMoveY && (startY - touchMoveY) > 20) { //上滑
-						console.warn("***touchend-上滑***", startY - touchMoveY);
-						this.stopRecordHandle(); //停止录音了
+				if (Math.abs(angle) > 45){//上下滑动
+					if (startY > touchMoveY && (startY - touchMoveY)>20) { //上滑
+						console.warn("***touchend-上滑***",startY - touchMoveY);
+						this.stopRecordHandle();//停止录音了
 						manager.stop()
 						uni.showToast({
 							title: '识别已取消!',
 							icon: 'none',
 							duration: 2000
 						})
-					} else {
-						this.stopRecordHandle(); //停止录音了
+					}else{
+						this.stopRecordHandle();//停止录音了
 						manager.stop()
-						console.warn("streamRecordEnd-stop1", this.recording)
+						console.warn("streamRecordEnd-stop1" ,this.recording)
 					}
-				} else {
-					this.stopRecordHandle(); //停止录音了
+				}else{
+					this.stopRecordHandle();//停止录音了
 					manager.stop();
-					console.warn("streamRecordEnd-stop2", this.recording)
+					console.warn("streamRecordEnd-stop2" ,this.recording)
 				}
 			},
 		}

src/components/newQCCom/viewAI/viewAI.html

@@ -0,0 +1,164 @@
+<div class="ai-view">
+	<div class="ai-title rows">
+		<!-- v-if="relationId" -->
+		<div v-if="relationId" class="title-btn rows justify-center" :class="{active:tabIndex==2}" @click.stop="tabChange(2)">
+			<img class="redbox_icon" src="https://dm.static.elab-plus.com/miniProgram/redbox.gif" alt=""></img>
+			活动
+		</div>
+		<div class="title-btn rows justify-center" :class="{active:tabIndex==0}" @click.stop="tabChange(0)">数字人</div>
+		<div class="title-btn rows justify-center" :class="{active:tabIndex==1}" @click.stop="tabChange(1)">数字宠物</div>
+		<div class="title-btn rows justify-center" :class="{active:tabIndex==3}" @click.stop="tabChange(3)">音乐</div>
+	</div>
+	<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">
+				<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>
+						</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="showPopViewHandle">
+							<div class="close-view rows justify-center">
+								<i class="iconfont icon-close rows justify-center"></i>
+							</div>
+							取消
+						</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>
+	<div class="ai-people" v-else-if="tabIndex==1">
+		<div class="main grid-view1">
+			<div :class="['item', petIndex==idx ? 'active': '']" v-for="(item, idx) in rightList"
+				:key="idx" @click="selectAction(item,idx)">
+				<img class="itemImg" :src="item.icon"/>
+				<div class="item-name rows justify-center">{{item.value}}</div>
+			</div>
+		</div>
+	</div>
+	<!-- 红包视图 -->
+	<div class="redbox" v-else-if="tabIndex==2">
+		<div class="main-box rows rows-between flex-start">
+			<div class="left-box">
+				<div class="left-main rows">
+					<div class="main-red columns justify-center">
+						<img class="red-img" src="https://dm.static.elab-plus.com/miniProgram/redbox.gif"/>
+						<!-- <div v-if="hasRedBox==false" class="red-btn rows justify-center" @click="addRedBox">添加红包</div>
+						<div class="rows justify-center" v-else>
+							<div class="iconfont icon-icon_delete rows justify-center" @click="removeRedBox"></div>
+							<div class="red-btn rows justify-center red-adjust" @click="setRedBox">
+								红包调整
+							</div>
+						</div> -->
+						<div class="red-info" v-if="amount">
+							<div class="red-money">
+								<span class="tips">￥</span>{{amount}}
+							</div>
+							<div class="word">
+								场景礼包总奖励金
+							</div>
+						</div>
+					</div>
+					<div class="plus">+</div>
+					<div id="special-img" class="special-img"></div>
+				</div>
+				<div class="title"></div>
+			</div>
+			<div class="right-box">
+				<div class="select-view columns" style="justify-content:space-around">
+					<div class="select-btn" :class="{active:specialIndex==0}" @click.stop="specialChange(0)">金光闪闪</div>
+					<div class="select-btn" :class="{active:specialIndex==1}" @click.stop="specialChange(1)">烟花喷射</div>
+					<div class="select-btn" :class="{active:specialIndex==2}" @click.stop="specialChange(2)">彩带飘落</div>
+				</div>
+				<div class="title">打开特效</div>
+			</div>
+		</div>
+		<div class="playTips rows justify-center" @click="setRedBox">
+			玩法说明 >
+		</div>
+	</div>
+	<!-- 音乐列表 -->
+	<div class="ai-people" v-else-if="tabIndex==3">
+		<div class="main grid-view1">
+			<div :class="['item', musicIndex==idx ? 'active': '']" v-for="(item, idx) in musicList"
+				:key="idx" @click="selectAction(item,idx)">
+				<img class="itemImg" :src="item.icon?item.icon:'https://dm.static.elab-plus.com/miniProgram/ai-icon.png'"/>
+				<div class="item-name rows justify-center">{{item.value}}</div>
+			</div>
+		</div>
+	</div>
+	<div class="ai-tips">
+		{{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" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
+		<div class="content">
+			<i class="iconfont icon-close close rows justify-center" @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 class="pop-view" v-if="showPopView">
+		<div class="content">
+			<i class="iconfont icon-close close" @click.stop="showPopView=false;"></i>
+			<div class="title">
+				是否终止添加个人形象？<br />
+				终止后重新添加需重新等待
+			</div>
+			<div class="btns rows rows-between">
+				<div class="btn sty1 rows justify-center" @click.stop="stopUpload">终止上传</div>
+				<div class="btn sty2 rows justify-center" @click.stop="showPopView=false;">继续添加</div>
+			</div>
+		</div>
+	</div>
+	<!-- <video id="videoPlayer" loop muted autoplay style="display: none;" controls="false" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src=""></video> -->
+</div>

src/components/newQCCom/viewAI/viewAI.scss

@@ -0,0 +1,448 @@
+.ai-view{
+	position: relative;
+	width: 100%;
+	height: calc(100% - 750px);
+	background: #fff;
+	padding-top: 20px;
+	.ai-title{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		margin-bottom: 20px;
+		.title-btn{
+			// width: 210px;
+			height: 56px;
+			border-radius: 16px;
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 30px;
+			background: #fff;
+			color: #4e4e4e;
+			padding: 0px 17px;
+			box-sizing: border-box;
+			.redbox_icon{
+				width: 56px;
+				height: 56px;
+				// margin-right: 15px;
+			}
+		}
+		.title-btn.active{
+			background: #343434;
+			color: #cef5bc;
+		}
+		
+	}
+	.ai-tips{
+		position: absolute;
+		bottom: 160px;
+		width: 100%;
+		height: 34px;
+		// padding-left: 40px;
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 26px;
+		color: #4e4e4e;
+		opacity: 0.5;
+		// margin-bottom: 30px;
+		// margin-top: 20px;
+		text-align:center;
+	}
+	.grid-view1 {
+	    display: grid;
+	    grid-template-columns: repeat(4, 1fr);
+	    /* grid-row-gap: 20rem; */
+	    grid-gap: 20px 20px;
+	}
+	.ai-people{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		padding-right: 40px;
+		height: calc(100% - 76px - 28px - 194px);
+		.main{
+			// max-height: 400px;
+			max-height: 100%;
+			overflow-y: auto;
+			.item{
+				// margin-right: 20px;
+				font-size: 0px;
+				.item-name{
+					position:relative;
+					font-family: "Verdana";
+					font-weight: 400;
+					font-size: 24px;
+					color: #4e4e4e;
+					height: 34px;
+					.icon-ic-huanyihuan{
+						font-size: 24px;
+						color: #000;
+						margin-right: 4px;
+					}
+					.close-view{
+						width: 24px;
+						height: 24px;
+						line-height: 24px;
+						margin-right: 4px;
+						background: #231815;
+						opacity: 0.28;
+						color: #fff;
+						border-radius: 50%;
+						.icon-close{
+							font-size: 14px;
+						}
+					}
+				}
+				.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;
+					height: 140px;
+					border-radius: 20px;
+					border: solid 4px transparent;
+					font-size: 0px;
+					margin-bottom: 4px;
+					box-sizing: border-box;
+					object-fit: contain;
+				}
+			}
+			.item:last-child{
+				margin-right: 0px;
+			}
+			.item.active{
+				color: #85b474;
+			}
+			.active .itemImg{
+				border: solid 4px #94DB75;
+			}
+			
+			
+		}
+	}
+	.ai-bottom{
+		position: absolute;
+		left: 116px;
+		bottom: 60px;
+		width: 518px;
+		height: 80px;
+		border-radius: 40px;
+		background: linear-gradient(130.79deg, #a0ed84 0%, #e8f4b7 100%);
+		border: 2px solid rgba(255, 255, 255, 0.22);
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 34px;
+		color: #365d39;
+	}
+}
+
+.redbox{
+	position: relative;
+	box-sizing: border-box;
+	padding: 0px 20px;
+	margin-top: 50px;
+	.main-box{
+		margin-bottom: 44px;
+		.title{
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 24px;
+			text-align: center;
+			color: #4e4e4e;
+			opacity: 0.5;
+		}
+		.left-box{
+			.title{
+				text-align: center;
+				width: 217px;
+			}
+			.left-main{
+				position: relative;
+				.main-red{
+					.red-img{
+						width: 217px;
+						height: 217px;
+					}
+					.icon-icon_delete{
+						width: 54px;
+						height: 54px;
+						border-radius: 27px;
+						background: rgba(118, 118, 118, 0.1);
+						font-size: 20px;
+						margin-right: 10px;
+					}
+					.red-btn{
+						width: 166px;
+						height: 54px;
+						border-radius: 27px;
+						background: #f27966;
+						font-family: "DIN Alternate Bold";
+						font-weight: 700;
+						font-size: 24px;
+						color: #fff;
+					}
+					.red-adjust{
+						background: rgba(242, 121, 102, 0.1);
+						color: #f27966;
+					}
+					.red-info{
+						.red-money{
+							color: rgb(229, 85, 85);
+							font-size: 40px;
+							font-family: DINCondensed-Bold;
+							font-weight: 700;
+							text-align: center;
+							.tips{
+								font-size: 26px;
+							}
+						}
+						.word{
+							font-family: "Verdana";
+							font-weight: 400;
+							font-size: 24px;
+							text-align: center;
+							color: rgba(78, 78, 78, 0.5);
+						}
+					}
+				}
+				.plus{
+					position: absolute;
+					left: 217px;
+					font-size: 30px;
+					top: 136px;
+				}
+				.special-img{
+					width: 286px;
+					height: 342px;
+					margin-left:49px;
+				}
+				
+			}
+		}
+		.right-box{
+			.select-view{
+				margin-top: 50px;
+			}
+			.select-btn{
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				margin-bottom: 27px;
+				color: rgba(54, 93, 57, 0.3);
+			}
+			.select-btn.active{
+				color: #365d39;
+			}
+		}
+	}
+	.playTips{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 26px;
+		color: #4e4e4e;
+	}
+}
+
+
+.tips-view{
+	position: absolute;
+	left:50%;
+	transform:translateX(-50%);
+	top:-50px;
+	font-family: "Verdana";
+	font-weight: 400;
+	font-size: 26px;
+	line-height: 30px;
+	text-align: center;
+	color: #2b2b2b;
+	opacity: 0.5;
+	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: 1320px;
+		border-radius: 40px 40px 0 0;
+		background: #fff;
+		box-sizing: border-box;
+		font-size:0px;
+		padding: 40px;
+		.close{
+			position: absolute;
+			right: 10px;
+			top: 10px;
+			width: 80px;
+			height: 80px;
+			color: rgba(68, 68, 68, 0.44);
+			z-index: 999;
+		}
+		.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: 628.98px;
+			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;
+	}
+}
+.pop-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;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		width: 650px;
+		height: 400px;
+		border-radius: 40px;
+		background: #fff;
+		padding: 20px 78px;
+		.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;
+			text-align: center;
+			color: rgba(33, 33, 33, 0.76);
+			margin-top: 92px;
+			margin-bottom: 60px;
+		}
+		.btns{
+			.btn{
+				width: 238px;
+				height: 80px;
+				border-radius: 40px;
+				font-family: "DIN Alternate Bold";
+				font-weight: 700;
+				font-size: 28px;
+			}
+			.sty1{
+				background: #d5d5d5;
+				color: #191919;
+				margin-right:20px ;
+			}
+			.sty2{
+				background: #92ce8b;
+				color: #fff;
+			}
+		}
+	}
+}

src/components/newQCCom/viewAI/viewAI.vue

@@ -0,0 +1,748 @@
+<template src="./viewAI.html">
+
+</template>
+<script>
+	const util = require('@/utils/util.js').default;
+	import {
+		MessageBox
+	} from 'mint-ui';
+	import {
+		Indicator
+	} from 'mint-ui';
+	import {
+		Toast
+	} from 'mint-ui';
+	import lottie from "lottie-web"; //lottie
+	// import commonMethod from '@/common/commonMethod.js';
+	// import touchHandle from '@/mixins/touchHandle.js';
+	// import requestConfig from '@/static/lib/requestConfig';
+
+	export default {
+		data: function() {
+			return {
+				leftList: [],
+				rightList: [],
+				musicList: [], //音乐列表
+				dataList: [],
+				tabIndex: 0, //当前选中的tab序号
+				selectIndex: -1,
+				peopleIndex: -1,
+				petIndex: -1,
+				musicIndex: -1,
+				specialIndex: 1,
+				specialList:[
+					{
+						id:1,
+						url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/gold.json',
+						title:'金光闪闪',
+					},
+					{
+						id:2,
+						url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/fireworks.json',
+						title:'烟花',
+					},
+					{
+						id:3,
+						url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/coloreRibbon.json',
+						title:'彩带',
+					},
+				],
+				hasRedBox:false,	//是否添加了红包
+				limit:20,
+				videoId:'',	//上传视频的id
+				videoUrl:'',	//处理好的视频地址
+				progress:0,	//进度条
+				ktProgress:0,	//抠图进度条
+				showPersonView:false,	//是否显示个人形象提示弹窗
+				showPopView:false,		//是否显示确认取消框
+				uploadStatus:0,	//视频处理的状态 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
+				count:0,		//结果请求次数
+				timeOut:90000,	//超时时间
+				outTimer:null,	//延时处理对象
+				timer:null,		//轮询对象
+				widthHeight:'',	//用户上传视频尺寸
+				stopFlag:false,	//停止上传动作
+				cancelTokenSource:null,	//取消上传的操作对象
+				repeartFlag:false,	//防止重复点击
+			}
+		},
+		props: {
+			relationId: {
+				type: String,
+				default: '',
+			},
+			amount: {
+				type: String,
+				default: '',
+			},
+		},
+		watch: {
+			relationId(newVal, oldVal) {
+				if (newVal == null) {
+					return;
+				}
+				console.log("当前空间数据relationId:", newVal);
+				this.tabIndex = 2;//有红包时默认切换为红包
+				if(!this.hasRedBox){
+					setTimeout(()=>{
+						this.addRedBox();//添加红包
+					},500)
+					this.$nextTick(() => {
+						// 播放lottie动画
+						lottie.destroy("markLoading");
+						var element = document.getElementById("special-img");
+						this.anim = lottie.loadAnimation({
+							container: element,
+							name: "markLoading",
+							renderer: "svg",
+							loop: true,
+							autoplay: true,
+							path: this.specialList[this.specialIndex].url, //动画json
+						});
+					});
+				}
+				// this.curSpaceArea = parseFloat(
+				// 	(newVal.spaceWidth * newVal.spaceHeight) / 10000
+				// ).toFixed(2);
+				// this.getOverallArrangementDetailsList();
+			},
+		},
+		// mixins: [touchHandle],
+		async mounted() {
+			// await this.getCityHouseList();		
+			console.warn("***viewAI***")
+			Indicator.open('加载中...');
+			this.getDatalist(0);
+			this.getDatalist(1);
+			this.getDatalist(3);
+			// this.getRelationInfo();//获取场景信息
+		},
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
+		// 页面被展示时执行
+		onPageShow: function() {
+
+		},
+		//页面被隐藏时执行
+		onPageHide: function() {
+			// 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;
+			},
+			catchTapEvent:function(){
+				return false;
+			},
+			specialChange(index) {
+				if (this.specialIndex == index) {
+					return false;
+				}
+				this.specialIndex = index;
+				this.$nextTick(() => {
+					// 播放lottie动画
+					lottie.destroy("markLoading");
+					var element = document.getElementById("special-img");
+					this.anim = lottie.loadAnimation({
+						container: element,
+						name: "markLoading",
+						renderer: "svg",
+						loop: true,
+						autoplay: true,
+						path: this.specialList[this.specialIndex].url, //动画json
+					});
+				});
+			},
+			tabChange(index) {
+				if (this.tabIndex == index) {
+					return false;
+				}
+				if (this.$parent.repeatFlag == true) {
+					Toast({
+						message: '加载中...请稍后再试',
+					});
+					return false
+				}
+				this.tabIndex = index;
+				this.$emit("tabChange", this.tabIndex); //通知页面，户型大类发生了变更
+				if(this.tabIndex==2 && this.specialIndex>-1){
+					if(!this.hasRedBox){
+						this.addRedBox();//添加红包
+					}
+					this.$nextTick(() => {
+						// 播放lottie动画
+						lottie.destroy("markLoading");
+						var element = document.getElementById("special-img");
+						this.anim = lottie.loadAnimation({
+							container: element,
+							name: "markLoading",
+							renderer: "svg",
+							loop: true,
+							autoplay: true,
+							path: this.specialList[this.specialIndex].url, //动画json
+						});
+					});
+				}
+			},
+			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){
+				this.stopFlag = false;//上传开始时，开启上传
+				if(type==2){
+					this.initStatus();//重置上传状态到初始值
+				}
+				//上传图片
+				var file = e.target.files[0];
+				var fileSize = file.size / 1024 / 1024;
+				// alert('**文件**' + e.target.value + "-fileName=" + file.name);
+				if (!/\.(MP4|mp4|MOV|mov)$/.test(e.target.value)) {
+					this.$message.warning('文件类型必须是mp4或者mov');
+					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;
+				}
+				if(this.$parent.isIOS){//IOS则直接上传
+					// let reader = new FileReader();
+					// reader.onload = (event) => {
+					// 	alert("onloadedmetadata0")
+					// 	let video = document.getElementById('videoPlayer');
+					// 	video.setAttribute("crossOrigin", "Anonymous");
+					// 	video.src = event.target.result;
+					// 	video.controls = false;
+					// 	video.autoplay = true;
+					// 	video.preload = 'auto';
+					// 	video.setAttribute('webkit-playsinline', true);
+					// 	video.setAttribute('playsinline', true);
+					// 	video.load();
+					// 	// video.play();
+					// 	video.onloadedmetadata = (event) => {
+					// 		alert("onloadedmetadata1")
+					// 		if(!this.stopFlag){
+					// 			var item = {};
+					// 			item.file = file;
+					// 			console.warn("***uploadImgObj***",file)
+					// 			this.uploadMaterielFile(item, form); //正常上传图片
+					// 		}
+					// 	}
+					// };
+					// reader.readAsDataURL(file);
+					if(!this.stopFlag){
+						var item = {};
+						item.file = file;
+						console.warn("***uploadImgObj***",file)
+						this.uploadMaterielFile(item, form); //正常上传图片
+					}
+				}else{//安卓
+					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,this.stopFlag);
+							console.warn('视频尺寸：x:', width, 'y:', height);
+							if (duration > 20) {
+								this.$message.warning('您的上传的视频过长，请低于20s');
+								var videoForm = document.getElementById(form); //获取表单对象
+								videoForm && videoForm.reset(); // 重置表单
+								return false
+							}else{
+								if(!this.stopFlag){
+									var item = {};
+									item.file = file;
+									console.warn("***uploadImgObj***",file)
+									this.uploadMaterielFile(item, form); //正常上传图片
+								}
+							}
+						};
+						video.src = event.target.result;
+					};
+					reader.readAsDataURL(file);
+				}
+			},
+			//视频上传进度处理
+			uploadProgress(e){
+				this.progress = Math.round((e.loaded / e.total) * 100);//loaded已经加载的
+				console.warn("***uploadProgress***",this.progress)
+			},
+			//显示弹窗提示框
+			showPopViewHandle(){
+				this.showPopView = true;//弹出确认框；
+			},
+			//取消上传
+			cancel(cancelTokenSource){
+				this.cancelTokenSource = cancelTokenSource;
+				console.warn("***取消上传函数定义***")
+			},
+			//停止上传
+			stopUpload(){
+				this.showPopView = false;//弹出确认框；
+				this.stopFlag = true;//停止上传标志打开
+				if(this.uploadStatus == 1){
+					this.cancelTokenSource.cancel('上传已取消');//通知取消上传
+					Toast({
+						message: '上传已取消',
+					});
+				}
+				else if(this.uploadStatus==2 || this.uploadStatus==3){//绿幕抠图中 或者已经完成
+					let data = {
+						userId:this.userId,
+						brandId: $config.brandId,
+						processStatus:'canceled',
+						virtualNo:this.videoId,
+					}
+					requestConfig('addUserVirtural', data);//停止该绿幕视频的使用
+					this.initStatus();//还原初始状态
+				}
+				let data = {
+					url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
+					value:'个人形象',
+					width:'',
+					height:'',
+				}
+				this.aiPeopleChange(data, 'canel')
+				this.peopleIndex = -1;
+			},
+			//获取用户上传的个人形象
+			async getUserVirtural() {
+				let data = {
+					userId:this.userId,
+					brandId: $config.brandId,
+					processStatus:'completed',
+				}
+				let res = await requestConfig('getUserVirtural', data);//停止该绿幕视频的使用
+				if (res.success && res.list && res.list[0]) {
+					let data = res.list[res.list.length - 1];//获取最新的一个用户的个人形象数据
+					this.leftList[0].icon = data.virtualBg;
+					this.leftList[0].url = data.virtualUrl;
+					this.videoUrl = data.virtualUrl;
+					if(data.widthHeight){
+						this.leftList[0].width = data.widthHeight.split('x')[0];
+						this.leftList[0].height = data.widthHeight.split('x')[1];
+					}
+				}
+			},
+			async uploadMaterielFile(item, form) {
+				this.uploadStatus = 0;
+				this.peopleIndex = 0;	//选中第一个
+				if(this.stopFlag){
+					return false;
+				}
+				var self = this;
+				let formData = new FormData();
+				formData.append('file', item.file);
+				formData.append('brandId', $config.brandId);
+				formData.append('userId', this.userId);
+				console.warn("***uploadMaterielFile***");
+				this.uploadStatus = 1;//上传中
+				this.showPersonView = false;
+				this.addSilhouette();//添加剪影视频
+				let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress,this.cancel)
+				if (axios.isCancel(res)) {//取消上传处理
+					this.initStatus();//还原初始状态
+				}else if (res.success && res.single) {
+					this.videoId = res.single;//根据Id查询结果
+					this.startInterval();//开始轮询获取结果
+				}
+				var videoForm = document.getElementById(form); //获取表单对象
+				videoForm && videoForm.reset(); // 重置表单
+			},
+			async getVideoUrl() {
+				if(this.stopFlag){
+					this.stopInterval();
+				}
+				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(this.stopFlag){
+					this.stopInterval();
+				}
+				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.leftList[0].width = single.widthHeight.split('x')[0],
+					this.leftList[0].height = single.widthHeight.split('x')[1],
+					this.uploadStatus = 3;//处理完毕
+					// alert("***virtualBg***"+single.virtualBg);
+					this.stopInterval();//停止轮询
+					if(this.peopleIndex==0 && this.tabIndex==0){//如果当前在个人形象上，则替换视频
+						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.uploadStatus = 0;//回到初始上传状态
+			},
+			
+			showMask(){
+				//上传过程中，不允许再次上传
+				if(this.uploadStatus==1 || this.uploadStatus == 2){
+					return false;
+				}
+				this.showPersonView = true;
+				console.warn("***showMask***",this.showPersonView)
+			},
+			//AI数字人切换
+			selectAction(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;
+						return false
+					}
+				} else if (this.tabIndex == 1) {
+					if (this.petIndex == index) { //取消选中
+						this.aiPeopleChange(this.rightList[this.petIndex], 'canel')
+						this.petIndex = -1;
+						return false
+					}
+				} else if (this.tabIndex == 3) {
+					if (this.musicIndex == index) { //取消选中
+						this.aiPeopleChange(this.musicList[this.musicIndex], 'canel')
+						this.musicIndex = -1;
+						return false
+					}
+				}
+				if (this.$parent.repeatFlag == true) {
+					Toast({
+						message: '加载中...请稍后再试',
+					});
+					return false
+				}
+				if (this.tabIndex == 0) {
+					this.peopleIndex = index;
+					this.aiPeopleChange(this.leftList[this.peopleIndex], 'add')
+				} else if (this.tabIndex == 1) {
+					this.petIndex = index;
+					this.aiPeopleChange(this.rightList[this.petIndex], 'add')
+				} else if (this.tabIndex == 3) {
+					this.musicIndex = index;
+					this.aiPeopleChange(this.musicList[this.musicIndex], 'add')
+				}
+			},
+			// // 获取场景信息
+			// async getRelationInfo() {
+			// 	if(!this.$parent.relationId){
+			// 		return false;
+			// 	}
+			// 	var parmas = {
+			// 		"relationId": this.$parent.relationId,
+			// 		"brandId": $config.brandId,
+			// 	}
+			// 	let res = await requestConfig('getRelationInfo', parmas)
+			// 	this.selectIndex = 0;
+			// 	if (res && res.success) {
+			// 		this.count = res.single.count;
+			// 	}
+			// },
+			// 获取瀑布流数据
+			async getDatalist(type) {
+				let typeName = "Virtual_Human";
+				if (type == 0) {
+					typeName = "Virtual_Human";
+				} else if (type == 1) {
+					typeName = "Virtual_Pet";
+				} else if (type == 3) {
+					typeName = "Virtual_Music";
+					Indicator.close();
+				}
+				var parmas = {
+					"type": typeName,
+					// "brandId": $config.brandId,
+				}
+				let res = await requestConfig('queryEnumList', parmas)
+				this.selectIndex = 0;
+				if (res && res.success && res.list) {
+					let list = res.list;
+					list.forEach(item=>{
+						if(item.remark && item.remark.indexOf('x')>0){
+							item.width = item.remark.split('x')[0];
+							item.height = item.remark.split('x')[1];
+						}
+					})
+					if (type == 0) {
+						this.leftList.push({
+							icon:'',
+							userUpload:true,
+							value:'',
+							url:'',
+							width:'',
+							height:'',
+						})
+						this.leftList = this.leftList.concat(list);
+						this.getUserVirtural();
+					} else if (type == 1) {
+						this.rightList = list;
+					} else if (type == 3) {
+						this.musicList = list;
+					}
+				}
+			},
+			catchTouchMove: function() {
+				return false;
+			},
+			addRedBox(){//添加红包
+				console.warn("***添加红包***")
+				this.$emit("redBox",'add');
+				this.hasRedBox = true;
+			},
+			removeRedBox(){//去除红包
+				this.$emit("redBox",'canel');
+				this.hasRedBox = false;
+			},
+			setRedBox(){
+				this.$emit("setRedBox");
+			},
+			//AI数字人切换
+			aiPeopleChange(item, type) {
+				this.$emit("aiPeopleChange", item, type, this.tabIndex); //通知页面，AI数字人切换了
+			},
+			//发布全景
+			mynavigateFuc(e) {
+				if (e) {
+					// if(this.hasRedBox){
+					// 	if(!this.$parent.redBoxData.count){
+					// 		Toast({
+					// 			message: '请输入红包个数！',
+					// 		});
+					// 		return false;
+					// 	}
+					// 	if(!this.$parent.redBoxData.money){
+					// 		Toast({
+					// 			message: '请输入充值金额！',
+					// 		});
+					// 		return false;
+					// 	}
+					// }
+					if(this.peopleIndex==0 && (this.uploadStatus ==1 || this.uploadStatus ==2)){
+						Toast({
+							message: '请在个人形象上传完成后发布！',
+						});
+						return false;
+					}
+					if(this.repeartFlag){
+						return false;
+					}
+					this.repeartFlag = true;
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23121301', //点击ID
+						clkName: 'webgl_public_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "720发布",
+						}
+					};
+					util.trackRequest(param);
+					let _ps = this.$parent.getPosition();
+					if (window.__wxjs_environment === 'miniprogram') {
+						let url = '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query.houseId || '') 
+						url += '&bgUrl=' + encodeURIComponent(this.$parent.bgUrl)
+						if(this.peopleIndex>-1){
+							let people = {
+								url:this.leftList[this.peopleIndex].url,
+								ath:_ps.peopleAth,
+								atv:_ps.peopleAtv,
+								width:this.leftList[this.peopleIndex].width || '',
+								height:this.leftList[this.peopleIndex].height || '',
+								scale:this.$parent.peopleScale,
+								userUpload:this.peopleIndex==0?true:false,//是否使用了个人形象
+							}
+							url += '&AIPeople=' + encodeURIComponent(JSON.stringify(people))
+						}
+						if(this.petIndex>-1){
+							let pet = {
+								url:this.rightList[this.petIndex].url,
+								ath:_ps.petAth,
+								atv:_ps.petAtv,
+								scale:this.$parent.petScale,
+							}
+							url += '&AIPet=' + encodeURIComponent(JSON.stringify(pet))
+						}
+						if(this.musicIndex>-1){
+							let music = {
+								url:this.musicList[this.musicIndex].url,
+								title:this.musicList[this.musicIndex].value
+							};
+							url += '&bgMusic=' + encodeURIComponent(JSON.stringify(music))
+						}
+						if(this.hasRedBox){
+							let redBox = {
+								url:'https://dm.static.elab-plus.com/miniProgram/redbox.mp4',
+								ath:_ps.redBoxAth,
+								atv:_ps.redBoxAtv,
+								scale:1,
+								lottieIndex:this.specialIndex,
+								// count:this.$parent.redBoxData.count,
+								// money:this.$parent.redBoxData.money,
+								// message:this.$parent.redBoxData.message,
+							}
+							url += '&redBox=' + encodeURIComponent(JSON.stringify(redBox))
+						}
+						console.warn("data:", _ps, url);
+						wx.miniProgram.navigateTo({
+							url: url,
+							complete:(e)=>{
+								this.repeartFlag = false;
+							}
+						})
+					} else {
+						console.warn("data:", _ps)
+						Toast({
+							message: '敬请期待',
+						});
+					}
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./viewAI.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/components/newQCCom/viewCareful/viewCareful.html

@@ -0,0 +1,31 @@
+<!-- 精细调整操作视图 -->
+<div class="careful-view">
+	<!-- 精细调整区域 -->
+	<div class="scroll-view">
+		<div class="careful-list grid">
+			<div class="careful-item" v-for="(carefulItem,index) in carefulList" :key="carefulItem.spaceId">
+				<div class="columns rows-between" >
+					<div class="item-top rows rows-between" :class="{active:selectIndex==index}">
+						<div class="rows">
+							<div class="index-view rows justify-center">{{carefulItem.index+1}}</div>
+							<div class="name-view eslipe" >{{carefulItem.name}}</div>
+							<div class="percent-view">{{carefulItem.percent}}%</div>
+						</div>
+						<div class="rows">
+							<div class="area-view">{{carefulItem.area}}㎡</div>
+						</div>
+					</div>
+					<div class="item-slider" :class="{active:selectIndex==index}">
+						<el-slider class="slider-style" :disabled="overChange" v-model="carefulItem.area"
+							@change="sliderChange($event,index)" :step="0.1" :show-tooltip="false"
+							:min='carefulItem.minArea' :max='carefulItem.maxArea' ></el-slider>
+					</div>
+				</div>
+				<!-- <div class="ai-btn rows justify-center" @click="goRoam()">
+					美家
+				</div> -->
+			</div>
+			
+		</div>
+	</div>
+</div>

src/components/newQCCom/viewCareful/viewCareful.scss

@@ -0,0 +1,100 @@
+.careful-view{
+	position: relative;
+	width: auto;
+	box-sizing: border-box;
+	z-index: 12;
+}
+.grid{
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);;
+	grid-row-gap: 20px;
+	grid-column-gap:50px;
+}
+.careful-list{
+	width: 100%;
+	max-height:584px;
+}
+.item-top{
+	width: 100%;
+}
+.scroll-view{
+	overflow-y: auto;
+	margin-top:30px;
+}
+.careful-item .item-top {
+	font-family: "Verdana Bold";
+	font-weight: 700;
+	font-size: 28px;
+	color: #585858;
+	.index-view{
+		// font-family: "DINCondensed-Bold";
+		font-family: "Verdana";
+		margin-right:10px;
+	}
+	.name-view{
+		max-width:150px;
+		margin-right:15px;
+	}
+	.percent-view{
+		font-family: "DINCondensed-Bold";
+		opacity: 0.3;
+		font-size:24px;
+	}
+	
+	.area-view{
+		font-family: "DINCondensed-Bold";
+		font-weight: 700;
+		color: #8D8D8D;
+		font-size:26px;
+	}
+}
+.item-top.active {
+	color: #ff9f40;
+	.area-view{
+		color: #f5891c;
+	}
+}
+
+.item-slider{
+	width: 100%;
+	.slider-style{
+		margin:20px 16px
+	}
+}
+.ai-btn{
+	width: 80px;
+	height: 84px;
+	border-radius: 8px;
+	background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.2) 0%, rgba(239, 149, 57, 0.2) 100%);
+	font-weight: 400;
+	font-size: 24px;
+	color: #f59d40;
+}
+
+/deep/ .el-slider__runway{
+	.el-slider__bar{
+		background-color: #A3A3A3;
+	}
+	.el-slider__button{
+		background: #A5A5A5;
+		border: 4px solid #fff;
+	}
+}
+/deep/.el-slider__button-wrapper{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+.active{
+	/deep/ .el-slider__runway{
+		.el-slider__bar{
+			background-color: #FFAD5C;
+		}
+		.el-slider__button{
+			background: #FF9B0A;
+			border: 4px solid #fff;
+		}
+	}
+}
+      

src/components/newQCCom/viewCareful/viewCareful.vue

@@ -0,0 +1,196 @@
+<template src="./viewCareful.html">
+
+</template>
+<script>
+	const util = require('@/utils/util.js').default;
+	const config = require('@/services/urlConfig.js');
+	import spaceTypes from '@/static/spaceTypesIE.js';
+	// import Bus from '@/common/bus';
+	// import commonMethod from '@/common/commonMethod.js';
+	// import requestConfig from '@/static/lib/requestConfig';
+	// import bgLoading from "@/components/bgLoading/bgLoading.vue"
+	// import { nextTick } from "vue";
+	// const app = getApp(); //获取应用实例
+	export default {
+		data: function() {
+			return {
+				selectItem:null,
+				carefulList:[],
+				lastCareList:[],//上一次的滑块值
+				selectIndex:0,
+			}
+		},
+		props:{
+			overChange: {//当前页面是否处在忙碌状态
+				type: Boolean,
+				default: false,
+			},
+			curHouseObj: {//当前展示的户型
+				type: Object,
+				default: () => {
+					return null
+				}
+			},
+		},
+		watch: {
+			curHouseObj: {
+				handler(newVal,oldVal) {
+					if (newVal) {
+						console.warn("***curHouseObj-CHANGE-viewCareful***", newVal,oldVal)
+						if(!oldVal || (oldVal && oldVal.id != newVal.id)){
+							this.initData();
+						}
+					}
+				},
+				deep:true,
+			},
+		},
+		mixins: [],
+		async mounted() {//组件挂载时事件
+			// this.initData();
+			// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+			this.$parent.$parent.updateCareFul = this.initData;//页面注册变更方法
+		},
+		// 页面被展示时执行
+		onPageShow: function() {  
+		},
+		//页面被隐藏时执行
+        onPageHide: function() {
+        },
+		methods:{
+			//初始化数据
+			initData(){
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				this.carefulList = [];
+				this.lastCareList = [];
+				const spaceDetail = this.curHouseObj;
+				const spaceList = JSON.parse(spaceDetail.houseJson);
+				let result = 0;
+				spaceList && spaceList.forEach((item,index)=>{
+					let minArea = 0;
+					let maxArea = 100;
+					if(item.hasOwnProperty('spaceWidthMin') && item.hasOwnProperty('spaceHeightMin')){
+						minArea = parseFloat((item.spaceWidthMin * item.spaceHeightMin) / 10000).toFixed(1);
+					}
+					if(item.hasOwnProperty('spaceWidthMax') && item.hasOwnProperty('spaceHeightMax')){
+						maxArea = parseFloat((item.spaceWidthMax * item.spaceHeightMax) / 10000).toFixed(1);
+					}
+					//修改为显示空间类型名称
+					let text = spaceTypes[item.spaceType - 1] || item.spaceName;
+					if(item.spaceType==15 && item.layoutSpaceType){
+						text = spaceTypes[item.layoutSpaceType - 1]; 
+					}
+					if(item.spaceName && !item.isSizeLock){//楼梯不显示
+						let curSpaceArea = Number(parseFloat(
+							(item.spaceWidth * item.spaceHeight) / 10000
+						).toFixed(1));
+						let data = {
+							spaceId:item.spaceId,
+							index:this.carefulList.length,
+							name:text,
+							area:curSpaceArea,
+							percent:0,
+							minArea:parseFloat(minArea),	//最小面积
+							maxArea:parseFloat(maxArea),	//最大面积
+						}
+						result = result + curSpaceArea;
+						this.carefulList.push(data);
+						this.lastCareList.push({
+							spaceId:item.spaceId,
+							index:this.carefulList.length,
+							area:curSpaceArea,
+						})
+					}
+				})
+				// let result = this.carefulList.reduce((prev, cur)=>{
+				//     return prev + parseFloat(cur.area);
+				// },0);
+				this.carefulList.forEach(it=>{
+					if(!result){
+						it.percent = 100;
+					}else{
+						it.percent = (parseFloat(it.area) / parseFloat(result)*100).toFixed(0);
+					}
+					// console.warn("***carefulList-change1***", it.area,it)
+				})
+				console.warn("***viewCareful-change***", this.carefulList)
+			},
+			updataData(spaceId,layoutObj){
+				let lable = this.carefulList.find(it=>it.spaceId == spaceId);
+				let name = spaceTypes[layoutObj.type - 1];
+				if(lable){
+					lable.name = name;
+				}
+				console.warn("***updataData***",lable)
+			},
+			sliderChanging(e,item) {
+				// const wallValue = e.detail.value;
+				// item.percent = 60;
+				// console.warn("***sliderChanging***",item)
+				// this.curWallMoveValue = Math.abs(this.curWallValue - wallValue);
+			},
+			sliderChange(e,index) {
+				let value = e.detail?e.detail.value:e;
+				let item = this.lastCareList[index];
+				console.log("滑块值：", value,item);
+				if(this.overChange){
+					this.$message.warning("请慢一点!");
+					return false;
+				}
+				this.selectIndex = index;
+				this.$parent.$parent.selectSpaceId = item.spaceId;
+				let _area = value - parseFloat(item.area);
+				if(_area==0){
+					return false;
+				}
+				let data = {
+					spaceId:item.spaceId,
+					area:Math.abs(_area),
+					isZoomIn:_area>0?true:false,
+				}
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_23080405', //点击ID
+					clkName: 'zoomin_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: this.curHouseObj.houseType + "·" + this.$parent.$parent.fixedArea + " " + this.curHouseObj.note,
+						locusValue:this.carefulList[index].name + "面积由" + parseFloat(item.area).toFixed(1)
+						+ "㎡调整为"+ value + "㎡",
+					}
+				};
+				util.trackRequest(param);
+				console.log("发送消息-空间变化: ",data, JSON.stringify(item));
+				// this.selectItem = item;
+				item.area = value;
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				// this.sendMessageAction(JSON.stringify(parmas));
+				this.$parent.$parent.callBackFun = this.callBack;//向父页面注册通知回调函数
+				this.$emit("curSpaceChange",data);//通知父组件-空间面积变化
+			},
+			//去往详情页面
+			goRoam(){
+				let item = this.lastCareList[this.selectIndex];
+				this.$parent.$parent.goRoam1(item.spaceId);
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_24012901', //点击ID
+					clkName: 'AI_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "AI精软装",
+						carefulList:this.carefulList
+					}
+				};
+				util.trackRequest(param);
+			},
+			callBack(type){
+				console.warn("***callBack***",type)
+				this.initData();
+				this.$parent.$parent.callBackFun = null;//注销父页面的通知回调函数
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+    @import "./viewCareful.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/components/newQCCom/viewMask/viewMask.html

@@ -0,0 +1,113 @@
+<!-- 覆盖层操作视图 -->
+<div class="mask-view" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
+	<!-- AI图片-轮播图 -->
+	<el-carousel v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper" 
+	: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> -->
+			<el-image 
+				@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
+				@click="previewAction"
+			    style="width:100%;height:100%;cursor:none;"
+			    :src="item.image"
+				fit='cover'
+			    >
+			</el-image>
+		</el-carousel-item>
+	</el-carousel>
+	<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1 && showAIImage">
+		<div class="indicator-item" :class="{'active': currentIndex == idx}" v-for="(item, idx) in aiImagesList" :key="idx"></div>
+	</div>
+	<!-- <div class="loading_more" v-if="aiFlag && aiImagesList.length>0 && showAIImage">
+		<img class="loading_img"
+			src="https://dm.static2.elab-plus.com/aiBeauty/aiBeauty3/icon_loading_Img.png"
+			mode="aspectFit"></image>
+			自动生成更多图片中{{random+'%'}}...
+	</div> -->
+	<div class="btn-view columns" v-if="showAIImage==false">
+		<!-- 切换视图-退出当前模式 -->
+		<div class="compareBtn btn1" @click.stop="showOrHideWebGl" v-if="aiImagesList && aiImagesList.length>0">
+			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
+		</div>
+		<!-- 切换视角 -->
+		<!-- <div class="change-angle columns" @click.stop="switchActor" >
+			<img class="camera" src="https://dm.static.elab-plus.com/miniProgram/iconfont/camera.png" mode="widthFix"/>
+			视角切换
+		</div> -->
+	</div>
+	
+	<!-- 左侧按钮  -->
+	<div class="btn-view columns" v-else-if="aiImagesList && aiImagesList.length>0">
+		<!-- 下载 -->
+		<div class="compareBtn btn1" @click.stop="save" v-if="showAIImage">
+			<img class="down" src="https://dm.static.elab-plus.com/miniProgram/iconfont/down.png" mode="widthFix"/>
+		</div>
+		<!-- 切换视图-退出当前模式 -->
+		<div class="compareBtn btn1" @click.stop="showOrHideWebGl">
+			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
+		</div>
+		<!-- 点赞喜欢 -->
+		<div class="likeBtn columns" @click.stop="changeAIImg" :class="{like:checked}">
+			<div class="iconfont icon-qeuren"></div>
+			喜欢
+		</div>
+	</div>
+	<!-- 微信客服 -->
+	<div class="connect-view columns"
+		@click.stop="mynavigateFuc" data-jumptype="50" v-if="connectUsImg">
+		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
+	</div>
+	<!-- 风格层主操作视图 -->
+	<div class="layout-view">
+		<!-- 手势区域 -->
+		<!-- <div class="signscoll-block"></div> -->
+		<!-- 精装修 -->
+		<div class="aiEdit">
+			<!-- tab视图 -->
+			<!-- <div class="tab-view rows">
+				<div class='left btn rows justify-center' :class="{active:modelType==2}" @click="changeModel(2)">精准设计</div>
+				<div class='right btn rows justify-center' :class="{active:modelType==1}" @click="changeModel(1)">创意设计</div>
+			</div> -->
+			<div class="tab-view">
+				<div class="content rows">
+					<div class="btn rows justify-center" v-for="(item, idx) in datalist" @click="changeSpace(item)"
+					:class="{active:spaceObj.spaceId==item.spaceId}" :key="idx">{{item.text}}</div>
+				</div>
+			</div>
+			<div class="aiStyleList rows">
+				<div class="styleItem" v-for="(item, idx) in styleList" :key="idx" :id="'styleItem'+idx"
+				@click.stop="selectStyle(idx)" :class="{'styleItemSelected':curStyleIndex==idx}">
+					<img class="styleIcon" :src="item.imgUrl+'?imageMogr2/auto-orient/thumbnail/200x200/blur/1x0/quality/75'" mode="aspectFill"></image>
+					<span class="styleTitle">{{item.styleName}}</span>
+				</div>
+			</div>
+			<!-- 主题 -->
+			<div class="section4">
+				<div class="items">
+					<div :class="['item', themeIndex==idx ? 'item_sel columns': 'columns']" v-for="(item, idx) in themeList"
+						:key="idx" @click="selectAction(item,'theme',idx)">
+						<div class="def-view" v-if="idx==0"></div>
+						<div class="color-view rows" v-else>
+							<div class="left" :style="{'background':item.leftColor}"></div>
+							<div class="right" :style="{'background':item.rightColor}"></div>
+						</div>
+						<div>{{item.text}}</div>
+					</div>
+				</div>
+			</div>
+			<div class="btn-list rows rows-between" >
+				<div class="btn AiBtn rows justify-center up1" @click.stop="aiSubmit(1)">
+					<div class="iconfont icon-a-lujing35039 style1"></div>{{aiImagesList && aiImagesList.length>0?'继续生成':'开始设计'}}
+				</div>
+				<div class="btn houseType rows justify-center up2" @click.stop="gonext">
+					下一步
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="loadData" v-show="myloading">
+		<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
+		<div class="loadingMsg">{{loadingMsg}}</div>
+	</div>
+</div>

src/components/newQCCom/viewMask/viewMask.scss

@@ -0,0 +1,448 @@
+.mask-view{
+	position: absolute;
+	bottom:0px;
+	width:100vw; 
+	height:100vh;
+	box-sizing: border-box;
+	z-index: 12;
+	font-family: "Verdana Bold";
+	font-size: 0px;
+	background: transparent;
+	pointer-events: none;
+}
+// .pointer-auto{
+// 	pointer-events: auto;
+// }
+.swiper{
+	position: relative;
+	width: 100%;
+	height:calc(100vh - 600px + 40px);
+	z-index: 12;
+	pointer-events: auto;
+	/deep/.el-image__preview{
+		cursor: none;
+	}
+}
+/deep/.el-carousel__container{
+	height:calc(100vh - 600px + 40px);
+}
+.btn-view{
+	position: absolute;
+	bottom: 620px;
+	left: 30px;
+	width: 72px;
+	z-index: 13;
+	pointer-events: auto;
+	.change-angle{
+		position: relative;
+		width: 72px;
+		height: 160px;
+		border-radius: 36px;
+		padding:20px 10px;
+		background: rgba(0, 0, 0, 0.5);
+		box-sizing: border-box;
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		justify-content:unset;
+		z-index: 13;
+		.camera{
+			width: 43.07px;
+			height: 49.22px;
+		}
+		pointer-events: auto;
+	}
+	.compareBtn {
+		position: relative;
+		background: rgba(0,0,0,0.2);
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: auto;
+		z-index:11;
+		width: 72px;
+		height: 72px;
+	}
+	.likeBtn{
+		width: 72px;
+		height: 132px;
+		border-radius: 36px;
+		padding:30px 10px;
+		background: rgba(0, 0, 0, 0.5);
+		box-sizing: border-box;
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		justify-content:unset;
+		z-index: 13;
+		pointer-events: auto;
+		.icon-qeuren{
+			margin-bottom:10px;
+			font-size:30px;
+		}
+	}
+	.like{
+		background: rgba(249, 193, 102, 0.5);
+	}
+	.btn1{
+		margin-bottom:20px;
+	}
+	.compareIcon {
+		width: 42px;
+		height: 44px;
+	}
+	.down{
+		width: 40px;
+		height: 39px;
+	}
+}
+
+.layout-view{
+	position: absolute;
+	bottom:0px;
+	left:0px;
+	width: 100vw;
+	height: 600px;
+	border-radius: 40px 40px 0 0;
+	background: #fff;
+	box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.12);
+	z-index: 15;
+	padding:0px 30px;
+	box-sizing: border-box;
+	pointer-events: auto;
+	.signscoll-block{
+		position: absolute;
+		width: 90px;
+		height: 10px;
+		border-radius: 5px;
+		background: #707070;
+		opacity: 0.6;
+		top: 10px;
+		left:330px;
+	}
+}
+.grid{
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);;
+	grid-row-gap: 20px;
+	grid-column-gap:50px;
+}
+.aiEdit {
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	// align-items: center;
+	margin-top:30px;
+	.tab-view{
+		position: relative;
+		margin-bottom: 30px;
+		overflow-x: auto;
+		width: 100%;
+		height: 56px;
+		.content{
+			position: absolute;
+		}
+		.btn{
+			// width: 148px;
+			width: max-content;
+			height: 56px;
+			border-radius: 16px;
+			background: transparent;
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 30px;
+			color: #4e4e4e;
+			margin-right:40px;
+			padding: 0px 16px;
+		}
+		.btn.active{
+			background: #343434;
+			color: #fff;
+		}
+	}
+	.aiStyleList {
+		width: 720px;
+		margin-bottom: 30px;
+		overflow-x: auto;
+		.styleItem:first-child {
+			// margin-left: 30px;
+		}
+
+		.styleItem:last-child {
+			margin-right: 0px;
+		}
+
+		.styleItem {
+			width: 120px;
+			height: 168px;
+			margin-right: 30px;
+			// height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.styleIcon {
+				width: 120px;
+				height: 120px;
+				background: #5c5c5c;
+				border-radius: 12px;
+				border: 2px solid #fff;
+				box-sizing: border-box;
+				object-fit: cover;
+			}
+
+			.styleTitle {
+				margin-top: 8px;
+				height:40px;
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				text-align: center;
+				color: #4e4e4e;
+			}
+		}
+
+		.styleItemSelected {
+			.styleIcon {
+				border: 2px solid #ff9c38;
+			}
+
+			.styleTitle {
+				font-family: "Verdana Bold";
+				font-weight: 700;
+				color: #ff9f40;
+			}
+		}
+	}
+	::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		background-color: transparent;
+	}
+	.section4 {
+		width: 720px;
+		display: flex;
+		align-items: center;
+		overflow-x: auto;
+		.items {
+			display: flex;
+			align-items: center;
+	
+			.item {
+				width: 140px;
+				height: 100px;
+				border-radius: 12px;
+				background: rgba(243, 243, 243, 1);
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 24px;
+				text-align: center;
+				color: #4e4e4e;
+				// margin-right: 10px;
+				margin-right: 16px;
+	
+				padding: 10px 20px;
+				border: 2px solid transparent;
+				box-sizing: border-box;
+				white-space: nowrap;
+				.def-view{
+					width: 40px;
+					height: 40px;
+					border-radius: 50%;
+					background: conic-gradient(from 90.00deg at 50.00% 50.00%, #ea3333 0%, #ffc350 13.54%, #eded5e 29.06%, #8ad960 45.32%, #72b3a7 59.55%, #4f7aed 75%, #9f5bed 88.67%, #ef6d6d 100%);
+				}
+				.color-view{
+					margin-bottom: 6px;
+					.left{
+						width: 50px;
+						height: 40px;
+						border-radius: 8px 0 0 8px;
+					}
+					.right{
+						width: 50px;
+						height: 40px;
+						border-radius: 0 8px 8px 0;
+					}
+				}
+			}
+	
+			.item_sel {
+				background: rgba(247, 211, 116, 0.15);
+				border-color: #FDAD56;
+				color: #fcac56;
+			}
+			.item:last-child {
+				margin-right: 0px;
+			}
+		}
+	}
+	
+}
+.btn-list{
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+	margin-top:30px;
+	.btn{
+		height: 88px;
+		border-radius: 50px;
+		backdrop-filter:blur(40px);
+		--webkit-backdrop-filter: blur(40px);
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 32px;
+		color: #272727;
+		box-sizing: border-box;
+	}
+	.up1{
+		color: rgba(245, 145, 39, 1);
+		background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.2) 0%, rgba(239, 149, 57, 0.2) 100%);
+	}
+	.up2{
+		color: rgba(255, 255, 255, 1);
+		background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%);
+	}
+	
+	.houseType{
+		width: 320px;
+		margin-left: -14px;
+		box-shadow: 0 6px 20px #f2980233;
+	}
+	.style1{
+		margin-right:17px;
+	}
+	.AiBtn{
+		width: 320px;
+		margin-right: -14px;
+		box-shadow: 0 6px 20px #f2980233;
+	}
+}
+.connect-view{
+	position: absolute;
+	width: 242px;
+	height: 330px;
+	background: transparent;
+	bottom: 442px;
+	right:-18px; 
+	box-sizing: border-box;
+	z-index: 13;
+	pointer-events: auto;
+	.defaultHead{
+		width: 242px;
+		height: 330px;
+		// clip-path: polygon(0 0%, 100% 0, 100% 100px, 0 100px);
+	}
+}
+.indicator-view{
+	position: absolute;
+	z-index: 12;
+	bottom: 620px;
+	left:50%;
+	transform: translateX(-50%);
+	.indicator-item{
+		width: 12px;
+		height: 12px;
+		background: #fff;
+		opacity: 0.52;
+		margin-right:6px;
+		border-radius: 50%;
+		&.active{
+			opacity:1;
+		}
+		&:last-child{
+			margin-right:0px;
+		}
+	}
+}
+.loading_more {
+	position: absolute;
+	width: 100%;
+	z-index: 12;
+	bottom: 640px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 25;
+	color:#fff;
+	font-size:28px;
+	.loading_img {
+		width: 40px;
+		height: 40px;
+		margin-right: 10px;
+
+		-webkit-animation: rotation 1s linear infinite;
+		animation: rotation 1s linear infinite;
+	}
+
+	@-webkit-keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.loading_text {
+		height: 40px;
+	}
+
+}
+.loadData{
+    min-width:200px;
+    height:150px;
+    position: absolute;
+    left: 50%;
+    top:50%;
+	z-index: 999999999999;
+    transform: translate(-50%,-50%);
+    background: rgba(0,0,0,0.6);
+    border-radius: 10px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content:center;
+	font-size:18px;
+    img{
+        width:90px;
+		margin-top: 10px;
+    }
+    .loadingMsg{
+        color: rgba(255, 255, 255, 0.83);
+        margin: 10px;
+		margin-top: 0px;
+    }
+}
+.dialog{
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: auto;
+	margin: 0;
+	.main{
+		margin-top: 35vh;
+		width: 80%;
+		position: relative;
+		margin: 0 auto 50px;
+		background: #FFF;
+		border-radius: 2px;
+		box-shadow: 0 1px 3px rgba(0,0,0,.3);
+		box-sizing: border-box;
+	}
+	    
+}
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    color: transparent;
+	display: none;
+}

src/components/newQCCom/viewShell/viewShell.html

@@ -0,0 +1,40 @@
+<!-- 弹出层的壳子 -->
+<div class="shell-view" :class="(styleType==2 || styleType==3)?'shell-view2':''">
+	<!-- 楼层 -->
+	<!-- <div class="floor-view" v-if="pageType==1 && floorList&&floorList.length>1">
+		<div class="floor-item rows justify-center" :class="floorId==floor.id?'active':''" 
+			v-for="(floor,index) in floorList" :key="index" @click="floorChange(floor)">
+			{{floor.houseFloor?floor.houseFloor+'F':''}}
+		</div>
+	</div> -->
+	<!-- 提示 -->
+	<!-- <div class="tips-view">
+		{{pageType==1?'点击进入空间':'单击圆点切换视角'}}
+	</div> -->
+	<!-- 放大缩小操作区域 -->
+	<div class="zoom-view" @click.stop="zoomInOut">
+		<img class="icon" :src="styleType==2?'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomin.png':'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomout.png'" mode="widthFix"/>
+	</div>
+	<!-- 微信客服 -->
+	<div class="connect-view columns" v-if="connectUsImg"
+		@click="mynavigateFuc" data-jumptype="50">
+		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
+	</div>
+	<!-- 手势操作区域 -->
+	<div v-if="showSignscoll" class="shell-signscoll rows justify-center" @click="upScrollOrDown" @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend">
+		<div class="signscoll-block"></div>
+	</div>
+	<!-- 精细化视图 -->
+	<viewCareful ref="viewCareful" v-show="styleType==2" @curSpaceChange="curSpaceChange" 
+	:overChange="overChange" :curHouseObj="houseObj"></viewCareful>
+	<!-- 布局选择 -->
+	<viewPlot ref="viewPlot" v-show="styleType==3" @curSpaceChange="curSpaceChange"
+	:overChange="overChange" :selectSpace="selectSpace"></viewPlot>
+	<!-- 种子户型视图 -->
+	<viewlayout ref="viewlayout" @curSpaceChange="curSpaceChange" :styleType="styleType" :overChange="overChange" :curHouseObj="houseObj" 
+	@upCom="upCom" @streamRecord="streamRecord" @streamRecordEnd="streamRecordEnd"></viewlayout>
+	<!-- nav视图 -->
+	<!-- <viewToolNav v-show="pageType==1 && (styleType==2 || styleType==3)" :seedItem="seedItem" @downCom="downScroll"></viewToolNav> -->
+	<!-- 风格选择视图 -->
+	<!-- <viewStyle v-if="pageType==2" :spaceObj="spaceObj" @hideOrShowActor="hideOrShowActor"></viewStyle> -->
+</div>

src/components/newQCCom/viewShell/viewShell.scss

@@ -0,0 +1,109 @@
+.plus_park {
+	position: relative;
+}
+.shell-view{
+	position: fixed;
+	left: 0px;
+	bottom: 0px;
+	width: 100vw;
+	height: 200px;
+	border-radius: 40px 40px 0 0;
+	background: #fff;
+	box-shadow: 0 -6px 12px #0000001f;
+	box-sizing: border-box;
+	z-index: 315;
+	padding:0px 40px;
+	padding-top:30px;
+	padding-bottom:60px;
+	transition: height 1s;
+}
+.shell-view2{
+	height: 748px;
+}
+.shell-signscoll{
+	position: absolute;
+	top:-50px;
+	left:275px;
+	width:200px;
+	height: 100px;
+	z-index: 120;
+	/* padding-top:50px; */
+	box-sizing: border-box;
+}
+.signscoll-block{
+	position: absolute;
+	width: 90px;
+	height: 10px;
+	border-radius: 5px;
+	background: #707070;
+	opacity: 0.6;
+	bottom: 30px;
+}
+.floor-view{
+	position: absolute;
+	transform: translateY(-150%);
+	left:30px;
+	width: 72px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.4);
+	overflow: hidden;
+}
+.floor-item{
+	height: 60px;
+	color: #fff;
+	font-size: 28px;
+}
+.floor-item.active{
+	color: #faa040;
+	background: #fff;
+	border-radius: 12px;
+}
+.tips-view{
+	position: absolute;
+	left:50%;
+	transform:translateX(-50%);
+	top:-50px;
+	font-family: "Verdana";
+	font-weight: 400;
+	font-size: 26px;
+	line-height: 30px;
+	text-align: center;
+	color: #2b2b2b;
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.zoom-view{
+	position: fixed;
+	top:42px;
+	right:30px;
+	width: 52px;
+	height: 52px;
+}
+.zoom-view .icon {
+	width: 52px;
+	height: 52px;
+}
+.connect-view{
+	position: absolute;
+	width: 242px;
+	height: 330px;
+	background: transparent;
+	top:-158px;
+	right:-18px; 
+	box-sizing: border-box;
+	z-index: 2;
+	.defaultHead{
+		width: 242px;
+		height: 330px;
+		clip-path: polygon(0 0%, 100% 0, 100% 158px, 0 158px);
+	}
+}
+button{
+	background-color: unset;
+	line-height: unset;
+	padding: unset;
+}
+button::after {
+    border: none;
+}

src/components/newQCCom/viewShell/viewShell.vue

@@ -0,0 +1,271 @@
+<template src="./viewShell.html">
+
+</template>
+<script>
+	const util = require('@/utils/util.js').default;
+	// import commonMethod from '@/common/commonMethod.js';
+	import touchHandle from '@/mixins/touchHandle.js';
+	// import requestConfig from '@/static/lib/requestConfig';
+	import viewlayout from'@/components/newQCCom/viewlayout/viewlayout.vue';
+	import viewCareful from'@/components/newQCCom/viewCareful/viewCareful.vue';
+	import viewPlot from'@/components/newQCCom/viewPlot/viewPlot.vue';
+	import {
+		getStorage,
+	} from '@/utils/localStorage';
+	// import viewToolNav from'@/components/newQCCom/viewToolNav/viewToolNav.vue';
+	// import viewStyle from'@/webgl/components/newQCCom/viewStyle/viewStyle.vue';
+
+	// const app = getApp(); //获取应用实例
+	// let positions = new Set();
+	export default {
+		data: function() {
+			return {
+				floorList:[
+					{
+						text:'1F',
+					},
+					{
+						text:'2F',
+					}
+				],
+				floorId:0,//楼层选中的id
+				shellHeight:'200px',
+				isShare: false,
+				shareVideoItem:null,
+				styleType:1,	//当前底部组件的状态
+				seedItem:null,	//当前选中的种子户型
+				showSignscoll:true,	//是否显示手势操作区域
+				selectSpace:null,//用户选择的空间
+				lastStyleType:null,
+				connectUsImg:'',
+			}
+		},
+		props:{
+			overChange: {//当前选中的户型类型
+				type: Boolean,
+				default: false,
+			},
+			pageType: {//当前组件所在的页面类型-决定了使用哪些子组件和样式
+				type: [String, Number],
+				default: 1,
+			},
+			// curHouseType: {//当前选中的户型类型
+			// 	type: [String, Number],
+			// 	default: '',
+			// },
+			// houseList: {//当前户型所有的户型详情，可以切换
+			// 	type: Array,
+			// 	default: () => {
+			// 		return []
+			// 	}
+			// },
+			houseObj: {//当前户型的具体详情
+				type: Object,
+				default: () => {
+					return null
+				}
+			},
+			spaceObj: {//当前户型的空间详情
+				type: Object,
+				default: () => {
+					return null
+				}
+			},
+		},
+		watch: {
+			// curHouseType: {
+			// 	handler(newVal) {
+			// 		if (newVal) {
+			// 			//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
+			// 			console.warn("***curHouseType-change***",newVal)
+			// 			this.initData()
+			// 		}
+			// 	},
+			// },
+			styleType: {//组件展开状态切换
+				handler(newVal,oldVal) {
+					if (newVal) {
+						console.warn("***styleType***",newVal,oldVal)
+						let _starHeight = parseInt(this.shellHeight);
+						let _endHeight = 380;
+						if(this.inter){//存在，说明当前还在弹窗过程中
+							return false;
+						}
+						if(newVal==1){//变更为初始状态
+							this.shellHeight = '200px';
+							_endHeight = 200;
+						}else if(newVal==2){//变更为展开状态
+							this.shellHeight = '800px';
+							_endHeight = 800;
+						}else if(newVal==3){//变更为最小状态
+							this.shellHeight = '748';
+							_endHeight = 748;
+						}
+						// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+						if(this.$parent && this.$parent.hasOwnProperty('canvasHeight')){
+							this.$parent.gradientResize(1,_starHeight,_endHeight)
+						}
+						this.$parent.styleType = newVal;//变更为展开状态
+					}
+				},
+			},
+			// houseObj: {
+			// 	handler(newVal) {
+			// 		if (newVal) {
+			// 			//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
+			// 			console.warn("***curHouseType-change***",newVal)
+			// 		}
+			// 	},
+			// },
+		},
+		components:{
+			viewlayout,
+			viewCareful,
+			viewPlot,
+			// viewStyle,
+		},
+		mixins: [touchHandle],
+		async mounted() {
+			// await this.getCityHouseList();		
+			console.warn("***viewShell***",this.houseList)
+			let firstData = JSON.parse(getStorage('firstData'));
+			this.connectUsImg = firstData[0].selectOptionImageUrl;
+		},
+		methods:{
+			changeStyleType(type,selectSpace){
+				console.warn("***changeStyleType***",this.lastStyleType)
+				if(this.styleType != type){
+					this.lastStyleType = this.styleType;//记录下当前的状态，因为会返回到这个状态
+				}
+				this.styleType = type;
+				this.selectSpace = selectSpace;
+			},
+			rebackLast(){
+				console.warn("***rebackLast***",this.lastStyleType)
+				this.styleType = this.lastStyleType;//返回记录下的状态
+				this.selectSpace = null;
+			},
+			catchTouchMove: function() {
+				return false;
+			},
+			// hideOrShowActor(type){
+			// 	this.$emit('hideOrShowActor',type);//隐藏所有视角
+			// },
+			//子组件开始录音
+			streamRecord(){
+				this.showSignscoll = false;
+			},
+			//子组件录音结束
+			streamRecordEnd(){
+				this.showSignscoll = true;
+			},
+			//楼层切换
+			// floorChange(item){
+			// 	if(this.floorId==item.id){
+			// 		return false;
+			// 	}
+			// 	if(this.$parent.loadLayFlag){//加载家具模型中
+			// 		this.$message("加载模型中,请稍后再试");
+			// 		return false
+			// 	}
+			// 	this.floorId = item.id;
+			// 	let param = {
+			// 		type: 'CLK', //埋点类型
+			// 		clkId: 'clk_2cmina_23080410', //点击ID
+			// 		clkName: 'floorswitching_clk', //点击前往的页面名称
+			// 		clkParams: {
+			// 			locusName: "楼层切换",
+			// 		}
+			// 	};
+			// 	util.trackRequest(param);
+			// 	this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
+			// },
+			//种子户型变更-户型大类变更
+			// seedChange(item){
+			// 	console.warn("***seedChange***",item)
+			// 	this.seedItem = item;
+			// 	this.$emit("curHouseTypeChange", item);//通知页面，户型大类发生了变更
+			// },
+			//放大缩小
+			zoomInOut(){
+				if(this.styleType == 2){
+					this.styleType = 1;//变更为最小状态
+				}else if(this.styleType == 1){
+					this.styleType = 2;//变更为最大状态
+				}
+			},
+			//子组件通知上划到状态2
+			upCom(){
+				if(this.styleType==1 || this.styleType==3){//初始状态 或者 收缩状态
+					this.styleType = 2;//变更为展开状态
+				}
+			},
+			curSpaceChange(data){
+				this.$emit("curSpaceChange", data);
+			},
+			//点击-不是手势动作
+			upScrollOrDown(){
+				if(this.pageType!=1){//只有1才起作用
+					return false
+				}
+				if(this.styleType==1 || this.styleType==3){//初始状态 或者 收缩状态
+					this.styleType = 2;//变更为展开状态
+				}
+				else if(this.styleType==2){//当前是展开状态，可以下滑
+					this.styleType = 1;//下滑到初始收缩状态
+				}
+			},
+			//上划-手势动作
+			upScroll(){
+				if(this.pageType!=1){//只有1才起作用
+					return false
+				}
+				if(this.styleType==1 || this.styleType==3){//初始状态 或者 收缩状态
+					this.styleType = 2;//变更为展开状态
+				}
+			},
+			//下划-手势动作
+			downScroll(){
+				if(this.pageType!=1){//只有1才起作用
+					return false
+				}
+				let carefulList = this.$refs.viewCareful && this.$refs.viewCareful.carefulList ? JSON.parse(JSON.stringify(this.$refs.viewCareful.carefulList)) : {}; 
+				if(this.styleType==2 || this.styleType==3){//当前是展开状态，可以下滑
+					this.styleType = 1;//下滑到初始收缩状态
+					let trackparam = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080404', //点击ID
+						clkName: 'adjust_back_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "精细调整返回 /下划线",
+							userparamter:carefulList,
+						}
+					};
+					util.trackRequest(trackparam);
+				}
+			},
+			mynavigateFuc(e) {
+				if (e) {
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080408', //点击ID
+						clkName: 'WeCom_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "联系定制",
+						}
+					};
+					util.trackRequest(param);
+					if(window.__wxjs_environment === 'miniprogram'){
+						wx.miniProgram.navigateTo({url: '/pages/transfer/transfer?event=openCustomerServiceChat&houseId='+this.$store.state.houseId})
+					}else{
+						// this.$message.warning("敬请期待");
+					}
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+    @import "./viewShell.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/components/newQCCom/viewStyle/viewStyle.html

@@ -0,0 +1,30 @@
+<!-- 风格层主操作视图 -->
+<div class="layout-view">
+	<!-- 精装修 -->
+	<div class="aiEdit">
+		<scroll-view scroll-x="true" class="aiStyleList" :scroll-into-view="seqToStyleView">
+			<div class="scrollViewItem" v-for="(item, idx) in styleList" :key="idx" :id="'styleItem'+idx"
+				@click="curStyleIndex=idx">
+				<div class="styleItem" :class="{'styleItemSelected':curStyleIndex==idx}">
+					<img class="styleIcon" :src="item.imgList[0]" mode="aspectFill"></image>
+					<text class="styleTitle">{{item.item}}</text>
+				</div>
+			</div>
+		</scroll-view>
+		<div class="aiTool">
+			<div class="changeBtn" v-if="showAIFlag" @click="changeAIImg">
+				<span v-if="checked==false" class="iconfont icon-xingzhuang-tuoyuanxing" style="margin-right:10px;font-size:36px;"></span>
+				<span v-else class="iconfont icon-ziyuan" style="margin-right:10px;font-size:36px;color:#FAB060"></span>
+				<!-- <img class="right-icon" src="https://dm.static.elab-plus.com/miniProgram/iconfont/right-icon.png" mode="widthFix"/> -->
+				{{checked?'已选定图片':'选定图片'}}
+			</div>
+			<div v-if="showAIFlag" class="submitBtn continue rows justify-center" @click="aiSubmit">
+				继续生成
+			</div>
+			<div v-else class="submitBtn rows justify-center" @click="aiSubmit">
+				<img class="magic-icon" src="https://dm.static.elab-plus.com/miniProgram/iconfont/magic.png" mode="widthFix"/>
+				AI生成精软装风格
+			</div>
+		</div>
+	</div>
+</div>

src/components/newQCCom/viewStyle/viewStyle.scss

@@ -0,0 +1,138 @@
+.layout-view{
+	margin-top:30px;
+}
+
+.aiEdit {
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	.aiStyleList {
+		width: 100%;
+		height: 240px;
+		/* background: #333; */
+		flex-shrink: 0;
+		white-space: nowrap;
+
+		.scrollViewItem {
+			width: 152px;
+			height: 100%;
+			display: inline-block;
+			margin: 0px 10px;
+		}
+
+		.scrollViewItem:first-child {
+			margin-left: 30px;
+		}
+
+		.scrollViewItem:last-child {
+			margin-right: 30px;
+		}
+
+		.styleItem {
+			position: absolute;
+			width: 144px;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			/* background: red; */
+			.styleIcon {
+				width: 144px;
+				height: 144px;
+				background: #5c5c5c;
+				border-radius: 12px;
+				border: 2px solid #fff;
+			}
+
+			.styleTitle {
+				margin-top: 20px;
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				text-align: center;
+				color: #4e4e4e;
+			}
+		}
+
+		.styleItemSelected {
+			.styleIcon {
+				border: 2px solid #ff9c38;
+			}
+
+			.styleTitle {
+				font-family: "Verdana Bold";
+				font-weight: 700;
+				color: #ff9f40;
+			}
+		}
+	}
+
+	.aiStyleList ::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		background-color: transparent;
+	}
+
+	.aiTool {
+		width: 100%;
+		height: 100px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		/* background: red; */
+		// margin: 0px 30px;
+		margin-top: 10px;
+		padding: 0px 30px;
+		box-sizing: border-box;
+		.changeBtn {
+			width: 320px;
+			height: 100px;
+			border-radius: 50px;
+			background: rgba(255, 156, 56, 0.15);
+			margin-right: 30px;
+			line-height: 100px;
+			text-align: center;
+			font-family: "DIN Alternate Bold";
+			font-weight: 700;
+			font-size: 32px;
+			color: #ff9f36;
+		}
+
+		.submitBtn {
+			width: 460px;
+			border-radius: 50px;
+			background: rgba(255, 156, 56, 0.15);
+			text-align: center;
+			height: 100%;
+			line-height: 100px;
+			font-family: "DIN Alternate Bold";
+			font-weight: 700;
+			font-size: 28px;
+			color: #fff;
+			box-shadow: 0 6px 20px rgba(242, 152, 2, 0.2);
+			backdrop-filter: blur(40px);
+			background-color: rgba(255, 255, 255, 0.15);
+			background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%);
+		}
+		.continue{
+			width: 330px;
+			background: #fab060;
+		}
+		.right-icon{
+			width: 34px;
+			height: 34px;
+			margin-right:10px;
+		}
+		.magic-icon{
+			width: 40.6px;
+			height: 40.56px;
+			margin-right:10px;
+		}
+	}
+}

src/components/newQCCom/viewToolNav/viewToolNav.css

@@ -0,0 +1,18 @@
+.nav-view{
+	position: absolute;
+	bottom:60rpx;
+	width: 630rpx;
+	box-sizing: border-box;
+	z-index: 12;
+	font-family: "Verdana Bold";
+	font-size: 34rpx;
+	background: #fff;
+}
+.back-view{
+	font-weight: 700;
+	color: #faad5c;
+}
+.nav-title{
+	font-weight: 700;
+	color: #4d4d4d;
+}

src/components/newQCCom/viewToolNav/viewToolNav.html

@@ -0,0 +1,10 @@
+<!-- nav操作视图 -->
+<view class="nav-view rows rows-between">
+	<view class="back-view" @click="navBack">
+		<span class="iconfont icon-fanhui" style="margin-right:20rpx;font-size:34rpx;"></span>返回
+	</view>
+	<!-- 当前标题 -->
+	<view class="nav-title">
+		{{title || ''}}
+	</view>
+</view>

src/components/newQCCom/viewToolNav/viewToolNav.vue

@@ -0,0 +1,59 @@
+<template src="./viewToolNav.html">
+
+</template>
+<script>
+	const util = require('@/static/utils/util.js');
+	const config = require('@/static/config.js');
+	import Bus from '@/common/bus';
+	import commonMethod from '@/common/commonMethod.js';
+	import requestConfig from '@/static/lib/requestConfig';
+	// import bgLoading from "@/components/bgLoading/bgLoading.vue"
+	// import { nextTick } from "vue";
+	const app = getApp(); //获取应用实例
+	export default {
+		data: function() {
+			return {
+				title:"",
+			}
+		},
+		props:{
+			seedItem: {
+				type: Object,
+				default: {},
+			},
+		},
+		watch: {
+			seedItem: {
+				handler(newVal) {
+					if (newVal) {
+						this.title = newVal.spaceName
+						console.warn("***seedItem-change***",newVal)
+					}
+				},
+			},
+		},
+		mounted() {//组件挂载时事件
+			console.warn("***mounted-nav***",this.seedItem)
+			if(this.seedItem){
+				this.title = this.seedItem.spaceName;
+			}
+		},
+		// 页面被展示时执行
+		onPageShow: function() {  
+			
+		},
+		//页面被隐藏时执行
+        onPageHide: function() {
+
+        },
+		methods:{
+			navBack(){
+				this.$emit("downCom");
+			},
+		}
+	}
+</script>
+<style lang="css" scoped>
+    @import "./viewToolNav.css";
+	@import "@/common/css/common.css";
+</style>

src/components/newQCCom/viewlayout/viewlayout.html

@@ -0,0 +1,29 @@
+<!-- 户型弹出层主操作视图 -->
+<!-- <div class="layout-view" @touchend="streamRecordEnd"> -->
+<div class="layout-view">
+	<!-- 种子区域 -->
+	<div>
+		<!-- <div class="btn-list rows rows-between" v-if="styleType==1 || styleType==3">
+			<div class="btn rows up justify-center" @click="upCom" :class="styleType==1?'up1':'up2'">开始定制户型 ></div>
+		</div> -->
+		<!-- <div class="btn-list rows rows-between" v-else-if="styleType==2">
+			<div class="btn houseType rows justify-center up2" >
+				<div class="iconfont icon-huxingjianshang style1"></div>户型空间
+			</div>
+			<div class="btn AiBtn rows justify-center up1" @click="goRoam">
+				<div class="iconfont icon-a-lujing35039 style1"></div>AI精软装
+			</div>
+		</div> -->
+		<div class="btn-list rows rows-between" v-if="styleType==1 || styleType==2">
+			<div class="btn houseType rows justify-center up1" @click="goback">
+				<div class="iconfont icon-huxingjianshang style1"></div>重选空间
+			</div>
+			<div class="btn AiBtn rows justify-center up2" @click="goRoam">
+				<div class="iconfont icon-a-lujing35039 style1"></div>AI精软装
+			</div>
+		</div>
+		<!-- <div class="btn-list rows rows-between" v-if="styleType==3">
+			<div class="btn rows up justify-center" @click="upCom" :class="styleType==1?'up1':'up2'">确认</div>
+		</div> -->
+	</div>
+</div>

src/components/newQCCom/viewlayout/viewlayout.scss

@@ -0,0 +1,85 @@
+.layout-view{
+	position: fixed;
+	left: 30px;
+	bottom: 0px;
+	padding-bottom: 60px;
+	width: 690px;
+	z-index: 15;
+	background-color: rgba(255, 255, 255, 1);
+}
+.layout-list{
+	position: relative;
+	width: auto;
+	box-sizing: border-box;
+	z-index: 12;
+}
+.seed-item{
+	margin-right:90px;
+}
+.seed-item:last-child{
+	margin-right:0px;
+}
+.item-text{
+	font-family: "Verdana Bold";
+	font-weight: 700;
+	font-size: 34px;
+	text-align: center;
+	color: #1c1c1c;
+	width: 95px;
+	/* height: 80px; */
+	margin-bottom:10px;
+}
+.item-select{
+	width: 50px;
+	height: 12px;
+	border-radius: 6px;
+	background: #ffa040;
+}
+.item-set{
+	font-family: "Verdana";
+	font-weight: 400;
+	font-size: 24px;
+	text-align: left;
+	color: #faa040;
+}
+.btn-list{
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+	margin-top:26px;
+}
+.btn{
+	height: 100px;
+	border-radius: 50px;
+	backdrop-filter:blur(40px);
+	--webkit-backdrop-filter: blur(40px);
+	font-family: "Verdana Bold";
+	font-weight: 700;
+	font-size: 32px;
+	color: #272727;
+	box-sizing: border-box;
+}
+.up{
+	width: 690px;
+	box-shadow: 0 6px 20px #f2980233;
+}
+.up1{
+	color: rgba(245, 145, 39, 1);
+	background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.4) 0%, rgba(239, 149, 57, 0.4) 100%);
+}
+.up2{
+	color: rgba(255, 255, 255, 1);
+	background-image:linear-gradient(124deg, rgba(245, 201, 82, 1) 0%, rgba(239, 149, 57, 1) 100%);
+}
+
+.houseType{
+	width: 320px;
+	box-shadow: 0 6px 20px #f2980233;
+}
+.style1{
+	margin-right:17px;
+}
+.AiBtn{
+	width: 320px;
+	box-shadow: 0 6px 20px #f2980233;
+}

src/components/newQCCom/viewlayout/viewlayout.vue

@@ -0,0 +1,436 @@
+<template src="./viewlayout.html">
+
+</template>
+<script>
+	// const util = require('@/static/utils/util.js');
+	const config = require('@/services/urlConfig.js');
+	// import Bus from '@/common/bus';
+	// import commonMethod from '@/common/commonMethod.js';
+	// import requestConfig from '@/static/lib/requestConfig';
+	// import { language } from '@/static/utils/conf.js'
+	// const plugin = requirePlugin("WechatSI");
+	// 获取**全局唯一**的语音识别管理器**recordRecoManager**
+	// const manager = plugin.getRecordRecognitionManager()
+	// import bgLoading from "@/components/bgLoading/bgLoading.vue"
+	// import { nextTick } from "vue";
+	// const app = getApp(); //获取应用实例
+	// let positions = new Set();
+	export default {
+		data: function() {
+			return {
+				seedLayoutList: [],
+				selectSeedId: null, //当前选中的种子户型id
+				currentTranslate: {
+					// 当前语音输入内容
+					create: '04/27 15:37',
+					text: '等待说话',
+				},
+				recording: false, // 正在录音
+				startX: 0,
+				startY: 0,
+				clientX: 0,
+				clientY: 0,
+				defaultIndex: 0, //默认选中的户型大类
+				carefulList: [],
+				lastSpace: null, //上一个语音操作的空间对象
+				bigWord: "变大,放大,大一点,变宽",
+				bigWordPY: "bianda,fangda,dayidian,biankuan",
+				smaillWord: "变小,缩放,小一点,变窄",
+				smaillWordPY: "bianxiao,suofang,xiaoyidian,bianzhai",
+				changeRate: 0.05, //每次变化的比例
+			}
+		},
+		props: {
+			// houseList: {//当前户型所有的户型详情，可以切换
+			// 	type: Array,
+			// 	default: () => {
+			// 		return []
+			// 	}
+			// },
+			// curHouseObj: {//当前展示的户型
+			// 	type: Object,
+			// 	default: () => {
+			// 		return null
+			// 	}
+			// },
+			overChange: { //当前选中的户型类型
+				type: Boolean,
+				default: false,
+			},
+			styleType: {
+				type: [String, Number],
+				default: '',
+			}
+		},
+		watch: {
+			// houseList: {
+			// 	handler(newVal) {
+			// 		if (newVal) {
+			// 			console.warn("***houseList-change***", newVal)
+			// 			this.initData(newVal);
+			// 		}
+			// 	},
+			// },
+			// curHouseObj: {
+			// 	handler(newVal,oldVal) {
+			// 		if (newVal) {
+			// 			console.warn("***curHouseObj-CHANGE-layout***", newVal)
+			// 			if((oldVal && oldVal.id != newVal.id) || !oldVal){
+			// 				this.initSpanceData();
+			// 			}
+			// 		}
+			// 	},
+			// },
+		},
+		async mounted() {
+			// this.getRecordAuth();//获取录音权限
+			// this.initRecord();
+			// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+			// currPage.updateSpanceData = this.initSpanceData;//页面注册变更方法
+		},
+		// 页面被展示时执行
+		onPageShow: function() {
+
+		},
+		//页面被隐藏时执行
+		onPageHide: function() {
+			console.warn("***detached-hide***")
+		},
+		methods: {
+			//返回上一页
+			goback(){
+				this.$router.go(-1);
+			},
+			//上划触发
+			upCom() {
+				console.warn("***upCom***")
+				this.$emit("upCom");
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_23080403', //点击ID
+					clkName: 'adjust_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "精细调整",
+					}
+				};
+				// util.trackRequest(param);
+			},
+			goRoam() {
+				this.$parent.$refs.viewCareful.goRoam();
+			},
+			//获取录音权限
+			getRecordAuth: function() {
+				uni.getSetting({
+					success(res) {
+						console.log("succ")
+						console.log(res)
+						if (!res.authSetting['scope.record']) {
+							uni.authorize({
+								scope: 'scope.record',
+								success() {
+									// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
+									console.log("succ auth")
+								},
+								fail() {
+									console.log("fail auth")
+								}
+							})
+						} else {
+							console.log("record has been authed")
+						}
+					},
+					fail(res) {
+						console.log("fail")
+						console.log(res)
+					}
+				})
+			},
+			//求最长公共子集
+			findSubStr(str1, str2) {
+				if (str1.length > str2.length) {
+					var temp = str1;
+					str1 = str2;
+					str2 = temp;
+				}
+				let len1 = str1.length;
+				let len2 = str2.length;
+				for (var j = len1; j > 0; j--) {
+					for (var i = 0; i < len1 - j; i++) {
+						var current = str1.substr(i, j);
+						if (str2.indexOf(current) >= 0) {
+							return current;
+						}
+					}
+				}
+				return "";
+			},
+			//声音变化
+			async textChange(text) {
+				if (this.overChange) {
+					uni.showToast({
+						title: '请慢一点',
+						icon: 'none',
+						duration: 2000
+					})
+					return false;
+				}
+				let res = await requestConfig("chineseToPinyin", {
+					chinese: text
+				});
+				let pinyin = res.single;
+				console.warn("****pinyin***", pinyin)
+				text = pinyin;
+				//全匹配轮一遍
+				let curSpace = this.carefulList.find(space => {
+					return text.includes(space.namePY)
+				})
+				if (!curSpace) {
+					let list = this.carefulList.map((space, index) => {
+						let comStr = this.findSubStr(text, space.namePY + ' ');
+						return {
+							spaceId: space.spaceId,
+							namePY: space.namePY,
+							name: space.name,
+							comStr,
+							index,
+						}
+					})
+					//寻找5个字符串以上的
+					let tmpList = list.filter(it => {
+						return it.comStr.length > 5;
+					})
+					if (tmpList && tmpList.length > 0) {
+						tmpList.sort((a, b) => a.comStr.length - b.comStr.length);
+						let index = tmpList[tmpList.length - 1].index; //最大值在carefulList的序号
+						curSpace = this.carefulList[index]; //
+					} else {
+						curSpace = this.lastSpace;
+					}
+				}
+
+				//没有找到语音操作对象
+				if (!curSpace) {
+					uni.showToast({
+						title: '请再说一次',
+						icon: 'none',
+						duration: 2000
+					})
+					return false;
+				}
+				this.lastSpace = curSpace;
+
+				console.log("textChange：", curSpace, this.carefulList, text, this.bigWordPY, this.smaillWordPY);
+
+				let biglist = this.bigWordPY.split(',').map(word => {
+					return text.lastIndexOf(word)
+				})
+				let smalllist = this.smaillWordPY.split(',').map(word => {
+					return text.lastIndexOf(word)
+				})
+				let a = Math.max(...biglist);
+				let b = Math.max(...smalllist);
+				let big = false;
+				if (a == -1 && b == -1) { //都没命中
+					uni.showToast({
+						title: '请再说一次',
+						icon: 'none',
+						duration: 2000
+					})
+					return false;
+				} else if (a > -1 && b > -1) { //两个都命中了
+					if (a > b) { //放大靠后-命中靠后
+						big = true;
+					} else {
+						big = false;
+					}
+				} else if (a > -1) {
+					big = true;
+				}
+				let _area = parseFloat(curSpace.area) * this.changeRate;
+				let data = {
+					spaceId: curSpace.spaceId,
+					area: _area,
+					isZoomIn: big, //true 放大 false 缩放
+				}
+				console.log("viewlayout-发送消息-空间变化: ", data, curSpace.area, big);
+				uni.showToast({
+					title: '正在变化，请稍后',
+					icon: 'none',
+					duration: 2000
+				})
+				// this.sendMessageAction(JSON.stringify(parmas));
+				this.$emit("curSpaceChange", data); //通知父组件-当前已经选中了户型大类
+			},
+			/**
+			 * 初始化语音识别回调
+			 * 绑定语音播放开始事件
+			 */
+			initRecord: function() {
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				//有新的识别内容返回，则会调用此事件
+				manager.onRecognize = (res) => {
+					let currentData = Object.assign({}, this.currentTranslate, {
+						text: res.result,
+					})
+					this.currentTranslate = currentData;
+					console.warn("***manager-正在录音***", this.currentTranslate)
+				}
+				// 识别结束事件
+				manager.onStop = (res) => {
+					console.warn("***manager-识别结束0***", this.recording, res)
+					// this.textChange("客厅大一点");
+					if (this.recording == false) { //已经强制结束识别了
+						return false; //不识别
+					}
+					let text = res.result
+					if (text == '') { //识别内容为空时的反馈
+						this.showRecordEmptyTip()
+						return
+					}
+					console.warn("***manager-识别结束***", text);
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080407', //点击ID
+						clkName: 'voice_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "语音调整",
+							text: text
+						}
+					};
+					// util.trackRequest(param);
+					text = text.replaceAll(/，|。/ig, "");
+					this.textChange(text);
+					this.stopRecordHandle();
+					//翻译
+					// this.translateText(currentData, this.dialogList.length)
+				}
+
+				// 识别错误事件
+				manager.onError = (res) => {
+					console.warn("***manager-识别错误***", this.recording, res)
+					if (this.recording == false) {
+						return false;
+					}
+					this.stopRecordHandle();
+					uni.showToast({
+						title: '请再说一次',
+						icon: 'none',
+						duration: 2000
+					})
+				}
+				// 语音播放开始事件
+				uni.onBackgroundAudioPlay(res => {
+					const backgroundAudioManager = uni.getBackgroundAudioManager()
+					let src = backgroundAudioManager.src
+
+					this.currentTranslateVoice = src;
+				})
+			},
+			//执行停止录音的方法
+			stopRecordHandle() {
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				this.recording = false;
+				this.$emit("streamRecordEnd"); //通知父组件
+				// currPage.voiceMaskChange(false);//关闭蒙层
+			},
+			//用户语音为空
+			showRecordEmptyTip() {
+				this.stopRecordHandle();
+				uni.showToast({
+					title: '告诉我您的想法',
+					icon: 'none',
+					duration: 2000
+				})
+			},
+			catchTapEvent: function() {
+				return false;
+			},
+			/**
+			 * 按住按钮开始语音识别
+			 */
+			streamRecord: function(e) {
+				// this.getRecordAuth();//获取录音权限
+				console.warn("streamrecord", e)
+				let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages()
+					.length - 1].$vm : null;
+				// let buttonItem = detail.buttonItem || {}
+				manager.start({
+					lang: language[0].lang_content,
+				})
+				// this.recordStatus = 0;
+				this.clientX = 0;
+				this.clientY = 0;
+				this.startX = e.changedTouches[0].clientX;
+				this.startY = e.changedTouches[0].clientY;
+				this.recording = true; //录音中
+				currPage.voiceMaskChange(true); //显示蒙层
+				this.$emit("streamRecord");
+			},
+			mytouchmove(e) {
+				let startX = this.startX // 开始x坐标 
+				let startY = this.startY //开始y坐标
+				let touchMoveX = e.changedTouches[0].clientx //滑动变化坐标 
+				let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标 
+				this.clientX = touchMoveX - startX;
+				this.clientY = touchMoveY - startY;
+			},
+			angle(start, end) {
+				let _X = end.X - start.X;
+				let _Y = end.Y - start.Y;
+				if (_X == 0) return 90;
+				return 360 * Math.atan((_Y / _X) / (2 * Math.PI))
+			},
+			/**
+			 * 松开按钮结束语音识别
+			 */
+			streamRecordEnd: function(e) {
+				console.warn("streamRecordEnd", this.recording, e)
+				// let detail = e.detail || {} // 自定义组件触发事件时提供的detail对象
+				// let buttonItem = detail.buttonItem || {}
+
+				// 防止重复触发stop函数
+				if (this.recording == false) {
+					console.warn("has finished!")
+					return
+				}
+				let startX = this.startX; // 开始x坐标
+				let startY = this.startY; //开始y坐标
+				let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标 
+				let touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标 
+				let angle = this.angle({
+					X: startX,
+					Y: startY
+				}, {
+					X: touchMoveX,
+					Y: touchMoveY
+				})
+				//滑动角度超过45retrun
+				// console.log(Math.abs(angle), "Math.abs(angle)")
+				if (Math.abs(angle) > 45) { //上下滑动
+					if (startY > touchMoveY && (startY - touchMoveY) > 20) { //上滑
+						console.warn("***touchend-上滑***", startY - touchMoveY);
+						this.stopRecordHandle(); //停止录音了
+						manager.stop()
+						uni.showToast({
+							title: '识别已取消!',
+							icon: 'none',
+							duration: 2000
+						})
+					} else {
+						this.stopRecordHandle(); //停止录音了
+						manager.stop()
+						console.warn("streamRecordEnd-stop1", this.recording)
+					}
+				} else {
+					this.stopRecordHandle(); //停止录音了
+					manager.stop();
+					console.warn("streamRecordEnd-stop2", this.recording)
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./viewlayout.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.html

@@ -20,7 +20,7 @@
 	<!-- 题目数据 -->
 	<div class="topic-view">
 		<!-- 题目列表 -->
-		<div class="screenList">
+		<!-- <div class="screenList">
 			<div class="items" v-for="(item, idx) in tabData" :key="idx">
 				<div class="item_title">
 					{{item.fatherContent}}：
@@ -33,7 +33,7 @@
 					</div>
 				</div>
 			</div>
-		</div>
+		</div> -->
 		<!-- 按钮 -->
 		<div class="btn rows justify-center" @click="enterAction">下一步，DIY空间</div>
 	</div>

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.scss

@@ -16,7 +16,7 @@
 }
 .scroll-class{
 	position: relative;
-	height: calc(100% - 404px);
+	height: calc(100% - 210px);
 	padding-top: 170px;
 	.main{
 		// max-height: 400px;
@@ -78,7 +78,7 @@
 .topic-view{
 	position: relative;
 	width: 100vw;
-	height: 404px;
+	height: 210px;
 	border-radius: 40px 40px 0 0;
 	background: #fff;
 	padding: 50px 30px;

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.vue

@@ -65,7 +65,7 @@
 			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : (this.$store.state.houseId || '');
 			this.id = this.$route.query.id2 ? this.$route.query.id2 : (this.queryObj && this.queryObj.id2?this.queryObj.id2:'110');
 			this.findHouseTypeSpaceList();
-			this.queryTestcaseSingle();
+			// this.queryTestcaseSingle();
 			document.title = this.navbar.title;
 		},
 		methods: {
@@ -153,19 +153,19 @@
 				util.trackRequest(param);
 			},
 			//查询题目数据
-			async queryTestcaseSingle() {
-				let params = {
-					id: this.id,
-					brandId: $config.brandId,
-					houseId: this.houseId,
-				};
-				const res = await requestConfig('queryTestcaseSingle', params);
-				if (res.success) {
-					let list = res.list;
-					list.forEach(it => it.checkedIndex = -1); //增加当前题目用户选择的需要，默认不选中
-					this.tabData = list;
-				}
-			},
+			// async queryTestcaseSingle() {
+			// 	let params = {
+			// 		id: this.id,
+			// 		brandId: $config.brandId,
+			// 		houseId: this.houseId,
+			// 	};
+			// 	const res = await requestConfig('queryTestcaseSingle', params);
+			// 	if (res.success) {
+			// 		let list = res.list;
+			// 		list.forEach(it => it.checkedIndex = -1); //增加当前题目用户选择的需要，默认不选中
+			// 		this.tabData = list;
+			// 	}
+			// },
 			// 查询户型列表
 			async findHouseTypeSpaceList() {
 				// const { houseId, brandId } = getApp().globalData;
@@ -205,13 +205,6 @@
 			},
 			//进入下一步
 			enterAction() {
-				let index = this.tabData.findIndex(it=>it.checkedIndex==-1);
-				if(index>-1){
-					Toast({
-						message: this.tabData[index].fatherContent + '选项不能为空',
-					});
-					return false;
-				}
 				if(!this.curHouseObj){
 					Toast({
 						message: '请选择喜欢的空间',
@@ -221,22 +214,6 @@
 				console.log("进入订制户型: ", this.curHouseObj);
 				setStorage('curHouseObj', this.curHouseObj);
 				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
-				let dataList = [
-					{
-						name:'户型偏好',
-						selectOptionName:this.houseList[this.selectIndex].houseType || '',
-						selectOptionImageUrl:'',
-					}
-				];
-				this.tabData.forEach(tab=>{
-					let _dt = {
-						name:tab.fatherContent,
-						selectOptionName:tab.options[tab.checkedIndex].content || '',
-						selectOptionImageUrl:tab.options[tab.checkedIndex].imageUrl || '',
-					}
-					dataList.push(_dt);
-				})
-				setStorage('secondData', dataList);//把第一步选择的数据存入本地缓存里面，方便后续使用
 				let data = {
 					houseId:this.houseId,
 				}

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.html

@@ -9,6 +9,9 @@
 		<img class="icon-yinle" src="https://dm.static.elab-plus.com/miniProgram/music_icon.png" alt=""></img>
 		{{music.title}}
 	</div>
+	<div class="to rows justify-center" @click="rotateVideo" v-if="tabIndex==0">
+		<img class="convert" src="https://dm.static.elab-plus.com/miniProgram/convert1.png" alt=""></img>
+	</div>
 	<krpanoVideo ref="krpanoVideo" :bgUrl="bgUrl" :muted="muted"></krpanoVideo>
 	<div class="voice-btn rows justify-center" @click="updateMuted">
 		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.scss

@@ -148,4 +148,18 @@ page {
 		color: #fff;
 		margin-right: 20px;
 	}
+}
+.to{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	left: 120px;
+	top: 650px;
+	border-radius: 50%;
+	z-index: 99;
+	.convert{
+		width: 42px;
+		height: 42px;
+	}
 }

src/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr.vue

@@ -62,6 +62,7 @@
 				},
 				relationId:'',	//场景id
 				amount:'',	//场景总金额，如果有的话
+				deg:0,
 			}
 		},
 		beforeDestroy() {
@@ -107,6 +108,12 @@
 			updateMuted(){
 				this.muted = !this.muted;
 			},
+			rotateVideo(){
+				this.deg = this.deg + 45;
+				this.deg = this.deg % 360;
+				console.warn("******",this.deg)
+				this.$refs.krpanoVideo.rotateVideo(this.deg);
+			},
 			getPosition(){
 				let position = this.$refs.krpanoVideo.getPosition();
 				return position;

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -6,7 +6,7 @@
 	import Stats from 'three/addons/libs/stats.module.js';
 	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-	import spaceTypes from '@/static/spaceTypesIE.js';
+	
 	import TWEEN from 'three/addons/libs/tween.module.js';
 
 	var requestId = "";
@@ -58,7 +58,7 @@
                 controls:null,
 				curHouseObj: null,
 				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
-				cameraStarPosition : { x:0, y:30, z:0}	,//摄像头初始位置
+				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
 				// cameraLastPosition: null,		//摄像头上一次移动到的位置
 				// controlLastPosition: null,		//观察点上一次移动到的位置
 				canvasHeight:430,	//canvas视图的高度-计算得出
@@ -235,11 +235,11 @@
 				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
                 
 				controls = new OrbitControls(camera, renderer.domElement);
-				controls.screenSpacePanning = false;
+				controls.screenSpacePanning = true;
 				controls.enableDamping = true;
 				controls.minDistance = 1;
 				controls.maxDistance = 400;
-				controls.minPolarAngle = Math.PI / 8;// 默认0
+				controls.minPolarAngle = 0;// 默认0
 				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
 				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
 				controls.enableZoom = true;//启用摄像机的缩放
@@ -327,11 +327,10 @@
 				let oldUp = {};
 				let newUp = {};
 				if (isUserContorl === false) { // 非漫游状态
-					let _juli = camera.position.y * Math.tan(Math.PI / 8);
 					cameraNewPosition = {
 						x:spaceObj.centerX/100,
 						y:camera.position.y, 
-						z:-spaceObj.centerY/100 + _juli,
+						z:-spaceObj.centerY/100,
 					}
 					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
 					targetNewPosition = {
@@ -496,8 +495,7 @@
 			        id: this.id,
 			        brandId: $config.brandId,
 					houseId:this.houseId,
-					// userId,
-					type:'QIANCE',
+					userId,
 			    };
 			    const res = await requestConfig('getCustomizedRecord', params);
 			    if (res.success ) {
@@ -543,17 +541,9 @@
 				this.gltfSpaces.forEach((cube,index) =>{
 					// 给地板加上空间类型标注, 空间为链接空间的不显示
 					if(cube.spaceName && !cube.isSizeLock){
-						let name = spaceTypes[cube.spaceType - 1];
-						if(cube.spaceType==15){			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
-							let layoutId = this.spaceList.find(it => it.spaceId == cube.spaceId).layoutId;
-							let layout = this.arrFrunList.find(it=>it.id == layoutId);
-							if(layout){
-								name = spaceTypes[layout.type - 1];
-							}
-						}
 						this.lableItem.push(
 							{
-								text:name,
+								text:cube.spaceName,
 								spaceId:cube.spaceId,
 								transform:'',
 								cubeIndex:index,
@@ -581,7 +571,7 @@
 				}
                 if(this.curHouseObj){
                     const spaceDetail = this.curHouseObj;
-                    const spaceList = spaceDetail.houseJson.filter(it=>it.spaceId);
+                    const spaceList = spaceDetail.houseJson;
                     // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
                     for (let index = 0; index < spaceList.length; index++) {
                         var element = spaceList[index];
@@ -610,14 +600,8 @@
 					    this.curSpaceObj = this.spaceList[0];
 					}
                 }
-				if(this.curHouseObj.layoutArea<=100){//面积小于100平米，则摄像头靠近一点
-					this.cameraStarPosition.y = 25;
-				}else if(this.curHouseObj.layoutArea>100){
-					this.cameraStarPosition.y = 35;
-				}
                 console.log("该户型空间数据:", this.spaceList);
 				console.log("当前选中的空间:", this.curSpaceObj);
-				this.cameraInit();
 				this.loaderSpaceArr(this.spaceList);
                 // 获取墙体数据并且绘制墙体
                 this.getHouseTypeSpaceWalls();
@@ -678,6 +662,7 @@
 					let endTime = new Date().getTime();
 					console.log("模型全部加载完成，时间：",endTime - startTime);
 					this.$nextTick(()=>{
+						this.moveMeshCenter(this.curSpaceObj);
 						this.progress = 100;
 						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
 						this.$store.state.loadingMsg="加载中..." + this.progress + '%';
@@ -685,7 +670,6 @@
 							this.myLoadingStatus = false;
 							// this.$refs.myLoading.hideLoading();
 							setTimeout(()=>{
-								this.moveMeshCenter(this.curSpaceObj);
 								this.addWordLabel(); // 添加文字标签
 							}, 610);
 						})

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.html

@@ -22,7 +22,7 @@
 	</canvas>
 	<!-- AI结果覆盖层 -->
 	<viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
-	  :spaceObj="curSpaceObj" :spaceList="spaceList" :layoutList="arrFrunList" ></viewMask>
+	  :spaceObj="curSpaceObj" ></viewMask>
 	<!-- 生成截屏的画布对象 -->
-	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px'}"></canvas>
+	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
 </div>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.scss

@@ -1,10 +1,9 @@
 .main-view{
 	width:100vw;
-	height:100%;
+	height:100vh;
 	overflow: hidden;
-	position: relative;
 }
-canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;position: relative;top: 0px;}
+canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;}
 #mapDiv{
 	background-color: #fff;
 }
@@ -20,9 +19,8 @@ page {
 #canvas {
 	width: 100vw;
 	z-index: -1;
-	position: absolute;
+	// position: absolute;
 	left:0px;
-	top: -100vh;
 }
 .canvas-view{
 	position:relative;

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -628,7 +628,7 @@
 				return {cameraNewPosition,targetNewPosition,lookPosition}
 			}
 			//直接定位到摄像头位置
-			function positionCamer(mesh=null,needAni=false){
+			function positionCamer(mesh=null){
 				if(mesh){//如果传入了模型，则取模型
 					chooseMesh = mesh;
 				}
@@ -653,20 +653,13 @@
 				let data = roamPositionHandle();
 				let cameraNewPosition = data.cameraNewPosition;
 				let targetNewPosition = data.targetNewPosition;
-				targetNewPosition.z = targetNewPosition.z + 0.5;//增加偏差，防止极点翻转问题？不知道为啥会有用
 				let lookPosition = data.lookPosition;
 				creatMoveTip(cameraNewPosition);//创建移动的地标
-				if(needAni){
-					let oldUp = {x:0,y:1,z:0};	//俯视
-					let newUp = {x:0,y:1,z:0};	//正视
-					tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
-				}else{
-					camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
-					controls.target.set(lookPosition.x,lookPosition.y,lookPosition.z);
-					// controls.target.set(cameraNewPosition.x,cameraNewPosition.y,cameraNewPosition.z);
-					// controls.target.copy(camera.position);
-					camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
-				}
+				camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
+				controls.target.set(lookPosition.x,lookPosition.y,lookPosition.z);
+				// controls.target.set(cameraNewPosition.x,cameraNewPosition.y,cameraNewPosition.z);
+				// controls.target.copy(camera.position);
+				camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
 			}
 			// oldP  相机原来的位置
             // oldT  target原来的位置
@@ -854,8 +847,7 @@
                     }
                 }
 				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
-				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
-				document.title = this.navbar.title;
+				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡"
                 console.log("该户型空间数据:", this.spaceList);
                 console.log("当前选中的空间:", this.curSpaceObj);
 				this.positionCamer(this.curSpaceObj);
@@ -863,18 +855,6 @@
                 // 获取墙体数据并且绘制墙体
                 this.getHouseTypeSpaceWalls();
             },
-			changeSpace(spaceId){
-				console.warn("***changeSpace***",spaceId,this.spaceId)
-				if(spaceId == this.spaceId){
-					return false;
-				}
-				this.spaceId = spaceId;
-				this.curSpaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
-				this.positionCamer(this.curSpaceObj,true);
-				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
-				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
-				document.title = this.navbar.title;
-			},
 			// 获取墙体数据
             async getHouseTypeSpaceWalls(){
 				let wallList = [];

src/pages/webgl_rxdz_role/webgl_rxdz_role.vue

@@ -239,7 +239,7 @@
 				// setStorage('curHouseObj', this.curHouseObj);
 				// this.$store.dispatch('setCurHouseObj', this.curHouseObj);
 				router.push({
-					name: "webgl_rxdz_houseList",
+					name: "webgl_rxdz_test_houseList",
 					query:{
 						houseId:this.houseId,
 					}

src/pages/webgl_rxdz_test/webgl_rxdz_test.vue

@@ -17,14 +17,14 @@
 	import wallType from '@/static/wallData.js';
 	// import modelData from '@/webgl/static/layoutModelData.js';
 	// import requestConfig from '@/services/requestConfig.js';
-	// import viewShell from'@/webgl/components/newBottomCom/viewShell/viewShell.vue';
+	// import viewShell from'@/webgl/components/newQCCom/viewShell/viewShell.vue';
 	// import * as BufferGeometryUtils from '@/webgl/jsm/utils/BufferGeometryUtils.js';
 	import screenshot from '@/mixins/screenshot.js';
 	import floorMethod from '@/mixins/floorMethod.js';
 	import wallMethod from '@/mixins/wallMethod.js';
 	import loadModel from '@/mixins/loadModel.js';
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
-	import viewShell from'@/components/newBottomCom/viewShell/viewShell.vue';
+	import viewShell from'@/components/newQCCom/viewShell/viewShell.vue';
 	export default {
 		name:"webgl_rxdz",
 		components:{viewShell},
@@ -1643,7 +1643,7 @@
 				}
 				this.repeatFlag = true;
 				router.push({
-					name: "webgl_rxdz_roam",
+					name: "webgl_rxdz_test_roam",
 					query:data
 				});
 				if(this.isIOS){

src/pages/webgl_rxdz_env/webgl_rxdz_env.vue

@@ -1,4 +1,4 @@
-<template src="./webgl_rxdz_env.html">
+<template src="./webgl_rxdz_test_env.html">
 </template>
 
 <script>
@@ -396,5 +396,5 @@
 	}
 </script>
 <style lang="scss" scoped>
-	@import "./webgl_rxdz_env.scss";
+	@import "./webgl_rxdz_test_env.scss";
 </style>

src/pages/webgl_rxdz_test_houseList/webgl_rxdz_test_houseList.html

@@ -0,0 +1,40 @@
+<div class="container">
+	<!-- <div class="back"><i class="iconfont icon-fanhui" @click="backFun"></i></div> -->
+	<div class="title rows justify-center">
+		- 选择您喜欢的空间 -
+	</div>
+	<!-- 户型选择区域 -->
+	<div class="scroll-class">
+		<div class="main grid-view1">
+			<div @click="changeHouse(house,index)" class="item columns" :class="{'active': selectIndex == index}" 
+				v-for="(house,index) in houseList" :key="index" >
+				<img class="item-img" :src="house.coverImage" />
+				<div class="tab-info rows justify-center">
+					<i class="iconfont icon-Hook-1"></i>
+				</div>
+				<div class="item-text rows justify-center">{{house.houseType}}·{{house.houseArea}}㎡</div>
+				<div class="item-note rows justify-center">{{house.note}}</div>
+			</div>
+		</div>
+	</div>
+	<!-- 题目数据 -->
+	<div class="topic-view">
+		<!-- 题目列表 -->
+		<div class="screenList">
+			<div class="items" v-for="(item, idx) in tabData" :key="idx">
+				<div class="item_title">
+					{{item.fatherContent}}：
+				</div>
+				<div class="item_list">
+					<div :class="['item', idx1 == item.checkedIndex ? 'item_sel': '']" 
+						v-for="(item1, idx1) in item.options" :key="idx1" 
+						@click.stop="changeOption(idx, idx1)">
+						{{item1.content}}
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 按钮 -->
+		<div class="btn rows justify-center" @click="enterAction">下一步，DIY空间</div>
+	</div>
+</div>

src/pages/webgl_rxdz_test_houseList/webgl_rxdz_test_houseList.scss

@@ -0,0 +1,183 @@
+.container{
+	height: 100%;
+	background: #f2f3f4;
+	
+}
+.title{
+	position: absolute;
+	width: 100vw;
+	height: auto;
+	top: 66px;
+	left: 0px;
+	font-family: "Verdana Bold";
+	font-weight: 700;
+	font-size: 32px;
+	color: #343434;
+}
+.scroll-class{
+	position: relative;
+	height: calc(100% - 404px);
+	padding-top: 170px;
+	.main{
+		// max-height: 400px;
+		max-height: 100%;
+		overflow-y: auto;
+		padding: 0px 20px;
+		.item{
+			position: relative;
+			font-size: 0px;
+			border: 2px solid transparent;
+			box-sizing: border-box;
+			border-radius: 20px;
+			&.active{
+				border-color: #f9870f;
+			}
+			.tab-info{
+				position: absolute;
+				width: 40px;
+				height: 40px;
+				top: 20px;
+				right: 20px;
+				font-size: 12px;
+				background: #ff870f;
+				border: 2px solid #ff870f;
+				border-radius: 50%;
+				box-sizing: border-box;
+				color: #fff;
+				opacity: 0;
+				i{
+					font-size: 14px;
+				}
+			}
+			&.active .tab-info{
+				opacity: 1;
+			}
+			.item-img{
+				width: 340px;
+				height: 260px;
+				object-fit: contain;
+				margin-bottom: 8px;
+			}
+			.item-text{
+				font-family: "DIN Alternate Bold";
+				font-weight: 700;
+				font-size: 28px;
+				color: #0f0f0f;
+				margin-bottom: 4px;
+			}
+			.item-note{
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				color: #e0862e;
+			}
+		}
+			
+	}
+}
+.topic-view{
+	position: relative;
+	width: 100vw;
+	height: 404px;
+	border-radius: 40px 40px 0 0;
+	background: #fff;
+	padding: 50px 30px;
+	box-sizing: border-box;
+	.screenList {
+		width: 100%;
+		// padding: 0px 20px 0px 20px;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 30;
+		margin-bottom: 10px;
+		.items {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			margin-bottom: 20px;
+	
+			.item_title {
+				width: 94px;
+				min-width: 94px;
+				font-family: "Verdana Bold";
+				font-weight: 700;
+				font-size: 26px;
+				line-height: 56px;
+				text-align: left;
+				white-space: nowrap;
+				color: rgba(38, 38, 38, 0.6);
+				// border: 2px solid #00000000;
+			}
+	
+			.item_list {
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				overflow-x: scroll;
+	
+				.item {
+					font-family: "Verdana";
+					font-weight: 400;
+					font-size: 32px;
+					height: 56px;
+					line-height: 56px;
+					text-align: center;
+					color: #3b3b3b;
+					border: 2px solid #00000000;
+					padding: 0 20px;
+					border-radius: 12px;
+					box-sizing: content-box;
+					white-space: nowrap;
+				}
+	
+				.item_sel {
+					border-radius: 16px;
+					background: #343434;
+					font-family: "DIN Alternate Bold";
+					font-weight: 700;
+					color: #fefefe;
+				}
+			}
+	
+		}
+	}
+	.btn{
+		position: absolute;
+		bottom: 68px;
+		left: 140px;
+		width: 470px;
+		height: 92px;
+		border-radius: 46px;
+		/* Note: currently only Safari supports backdrop-filter */
+		backdrop-filter:blur(40px);
+		background: linear-gradient(130.79deg, rgba(245, 201, 82, 1) 0%, rgba(253, 148, 41, 1) 100%);
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 30px;
+		color: #fff;
+	}
+}
+.grid-view1 {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	/* grid-row-gap: 20rem; */
+	grid-gap: 20px 20px;
+}
+.back{
+	margin-top: 30px;
+	height: 50px;
+	color: #000;
+	display: flex;
+	justify-content: start;
+	align-items: center;
+	position: absolute;
+	z-index: 10;
+	top: 0;
+}
+.icon-fanhui{
+	margin-left: 20px;
+}
+
+
+

src/pages/webgl_rxdz_test_houseList/webgl_rxdz_test_houseList.vue

@@ -0,0 +1,255 @@
+<template src="./webgl_rxdz_test_houseList.html">
+</template>
+
+<script>
+	const util = require('@/utils/util.js').default;
+	const config = require('@/services/urlConfig.js');
+	import router from "@/router";
+	import {
+		setStorage,
+		getStorage,
+	} from '@/utils/localStorage';
+	import {
+		Toast
+	} from 'mint-ui';
+	// import houseList from "../../components/houseList/houseList.vue";
+	// import houseList2 from "../../components/houseList/houseList2.vue";
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	export default {
+		mixins: [commonPageMethod],
+		name: 'webgl_rxdz_test_houseList',
+		data() {
+			return {
+				pvId: 'p_2cmina_24012401',
+				locusBehaviorName: "空间偏好",
+				locusValue: "",
+				locusName: "",
+				pvCurPageName: "space_set",
+				pvCurPageParams: null,
+				navbar: {
+					showCapsule: 1,
+					title: '空间偏好',
+					titleColor: '#fff',
+					navPadding: 0,
+					navPaddingBg: 'transparent',
+					navBarColor: 'transparent',
+					navBackColor: 'transparent',
+					haveCallback: false, // 如果是 true 会接手 navbarBackClk
+					fromShare: false,
+					fromProject: 0,
+					shareToken: "",
+					pageName: this.pvCurPageName,
+				},
+				id:'',	//题目id
+				houseId: '',
+				houseList:[],	//户型列表
+				optionIndex: -1, //选项选中的序号
+				tabData: [],	//
+				curHouseObj:null,	//用户选择的户型
+				selectIndex:-1,	//用户选择的户型序号
+				queryObj:null,//页面参数
+			}
+		},
+		// components: {
+		// 	houseList,
+		// },
+		watch: {},
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
+		mounted(options) {
+			console.log("***onLoad-webgl_rxdz_test_houseList***", this.$route.query)
+			this.queryObj = getStorage('queryObj') ? JSON.parse(getStorage('queryObj')) : null;
+			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : (this.$store.state.houseId || '');
+			this.id = this.$route.query.id2 ? this.$route.query.id2 : (this.queryObj && this.queryObj.id2?this.queryObj.id2:'110');
+			this.findHouseTypeSpaceList();
+			this.queryTestcaseSingle();
+			document.title = this.navbar.title;
+		},
+		methods: {
+			backFun() {
+				uni.navigateBack({
+					url: 'pages/groupIndex2/groupIndex2'
+				})
+			},
+			// selectHouseObj(obj) {
+			// 	console.log("户型", obj);
+			// 	this.enterAction(obj, 0, 0);
+			// },
+			//切换选项
+			changeOption(idx, idx1) {
+				if (idx1 == this.tabData[idx].checkedIndex) {
+					return false;
+				}
+				this.tabData[idx].checkedIndex = idx1;
+				// console.warn("***changeOption***", this.tabData,this.allSelect)
+				// let param = {
+				// 	type: 'CLK', //埋点类型
+				// 	clkId: 'clk_2cmina_24012401', //点击ID
+				// 	clkName: 'option_clk', //点击前往的页面名称
+				// 	clkParams: {
+				// 		type: this.tabData[idx].options[idx1].content,
+				// 		locusName: "选项选择",
+				// 	}
+				// };
+				// util.trackRequest(param);
+				this.submitAnswer(idx,idx1);
+			},
+			submitAnswer(tabIndex,optionIndex){
+				let userId = this.userId || '';
+				let params = {
+					"answerContent": [
+						{
+							"optionTitle": this.tabData[tabIndex].options[optionIndex].content,
+							"questionTitle": this.tabData[tabIndex].subContent,//问题标题
+							"subOptionId": this.tabData[tabIndex].options[optionIndex].id,
+							"subQuestionId": this.tabData[tabIndex].id,
+						}
+					],
+					brandId: $config.brandId,
+					houseId: this.houseId,
+					channel:this.queryObj ? this.queryObj.channel : '',
+					city:this.queryObj ? this.queryObj.city : '',
+					district:this.queryObj ? this.queryObj.district : '',
+					province:this.queryObj ? this.queryObj.province : '',
+					paperTitle:'',//试卷id
+					testThemeId:'',
+					testcaseId:this.id,
+					uuid:userId,
+					xcxCustomerId:userId,
+				};
+				requestConfig('submitAnswer', params,true);
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_24022002', //点击ID
+					clkName: 'option_clk', //点击前往的页面名称
+					clkParams: {
+						locusValue: this.tabData[tabIndex].options[optionIndex].content,
+						locusName: "选项选择",
+					}
+				};
+				util.trackRequest(param);
+			},
+			changeHouse(item,index){
+				this.curHouseObj = item;
+				this.selectIndex = index;
+				console.log("changeHouse: ", this.curHouseObj,this.selectIndex);
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_24012401', //点击ID
+					clkName: 'option_clk', //点击前往的页面名称
+					clkParams: {
+						houseType: item.houseType,
+						name: item.name,
+						note: item.note,
+						area: item.houseArea,
+						id: item.id,
+						locusValue: item.houseType,
+						locusName: "空间选择",
+					}
+				};
+				util.trackRequest(param);
+			},
+			//查询题目数据
+			async queryTestcaseSingle() {
+				let params = {
+					id: this.id,
+					brandId: $config.brandId,
+					houseId: this.houseId,
+				};
+				const res = await requestConfig('queryTestcaseSingle', params);
+				if (res.success) {
+					let list = res.list;
+					list.forEach(it => it.checkedIndex = -1); //增加当前题目用户选择的需要，默认不选中
+					this.tabData = list;
+				}
+			},
+			// 查询户型列表
+			async findHouseTypeSpaceList() {
+				// const { houseId, brandId } = getApp().globalData;
+				var parmas = {
+					brandId: $config.brandId,
+					houseId: this.houseId,
+					pageNo: 1,
+					pageSize: 2000,
+					isCloud: 1,
+				};
+				let res = await requestConfig("findHouseTypeSpaceList",parmas);
+				if (res.success && res.pageModel) {
+					let list = res.pageModel.resultSet || [];
+					list && list.forEach((item,index)=>{
+						if(item.houseJson){
+							let spaceList = JSON.parse(item.houseJson);
+							// 交换centerX， centerY
+							for (let index = 0; index < spaceList.length; index++) {
+							    var element = spaceList[index];
+							    const {centerX, centerY} = element;
+							    element.centerX = centerY;
+							    element.centerY = centerX;
+								//默认布局和实际默认布局对不上时的处理方案
+								if(element.layouts.length > 1){
+									let layout = element.layouts.find(it=>it.isDefault==true);
+									if(layout){
+										element.layoutId = layout.layoutId;
+									}
+								}
+							}
+							item.houseJson = JSON.stringify(spaceList);
+							console.log("户型详情列表: ", spaceList);
+						}
+					})
+					this.houseList = res.pageModel.resultSet || [];
+				}
+			},
+			//进入下一步
+			enterAction() {
+				let index = this.tabData.findIndex(it=>it.checkedIndex==-1);
+				if(index>-1){
+					Toast({
+						message: this.tabData[index].fatherContent + '选项不能为空',
+					});
+					return false;
+				}
+				if(!this.curHouseObj){
+					Toast({
+						message: '请选择喜欢的空间',
+					});
+					return false;
+				}
+				console.log("进入订制户型: ", this.curHouseObj);
+				setStorage('curHouseObj', this.curHouseObj);
+				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
+				let dataList = [
+					{
+						name:'户型偏好',
+						selectOptionName:this.houseList[this.selectIndex].houseType || '',
+						selectOptionImageUrl:'',
+					}
+				];
+				this.tabData.forEach(tab=>{
+					let _dt = {
+						name:tab.fatherContent,
+						selectOptionName:tab.options[tab.checkedIndex].content || '',
+						selectOptionImageUrl:tab.options[tab.checkedIndex].imageUrl || '',
+					}
+					dataList.push(_dt);
+				})
+				setStorage('secondData', dataList);//把第一步选择的数据存入本地缓存里面，方便后续使用
+				let data = {
+					houseId:this.houseId,
+				}
+				router.push({
+					name: "webgl_rxdz_test",
+					query:data
+				});
+			},
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_test_houseList.scss";
+</style>

src/pages/webgl_rxdz_test_look/webgl_rxdz_test_look.html

@@ -0,0 +1,17 @@
+<!-- 模型查看页面 -->
+<div class="main-view">
+	<mynavbar :barData='navbar'/>
+	<div id="mapDiv" ref="webgl"></div>
+	<canvas id="canvas_webgl" type="webgl" ref="glcanvas" width="100vw" height="100vh"></canvas>
+	<div v-show="showLables && gltf.text.length>0" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
+		:style="{'transform':gltf.transform}">
+		<span user-select="false">{{gltf.text}}</span>
+	</div>
+	<!-- 楼层 -->
+	<div class="floor-view" v-if="floorList&&floorList.length>1">
+		<div class="floor-item rows justify-center" :class="floorId==floor.layoutId?'active':''" 
+			v-for="(floor,index) in floorList" :key="index" @click="floorChange(floor)">
+			{{floor.houseFloor?floor.houseFloor+'F':''}}
+		</div>
+	</div>
+</div>

src/pages/webgl_rxdz_test_look/webgl_rxdz_test_look.scss

@@ -0,0 +1,60 @@
+.main-view{
+	overflow: hidden;
+	width: 100vw;
+	height:100vh;
+}
+#mapDiv{
+	overflow: hidden;
+	width: 100vw;
+	height:100vh;
+}
+canvas {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}
+.word-view{
+	position: absolute;  
+	left: 0;             
+	top: 0;
+	font-family: "Verdana";
+	font-weight: 400;
+	color: #1d1d1d;
+	user-select: none;   /* don't let the text get selected */
+	z-index: 12;
+	font-size:26px;
+	/* pointer-events:none; */
+	line-height: 40px;
+	/* width: 90px; */
+	height: 40px;
+	padding:0px 10px;
+	border-radius: 20px;
+	background: #fff;
+	text-align: center;
+}
+.floor-view{
+	position: absolute;
+	left:30px;
+	bottom:60px;
+	width: 72px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.4);
+	overflow: hidden;
+	z-index: 11;
+	font-size: 28px;
+}
+.floor-item{
+	height: 60px;
+	color: #fff;
+}
+.floor-item.active{
+	color: #faa040;
+	background: #fff;
+}

src/pages/webgl_rxdz_test_look/webgl_rxdz_test_look.vue

@@ -0,0 +1,700 @@
+<template src="./webgl_rxdz_test_look.html">
+
+</template>
+<script>
+	import * as THREE from 'three';
+	import Stats from 'three/addons/libs/stats.module.js';
+	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+	import spaceTypes from '@/static/spaceTypesIE.js';
+	import TWEEN from 'three/addons/libs/tween.module.js';
+
+	var requestId = "";
+    const util = require('@/utils/util.js');
+    const config = require('@/services/urlConfig.js');
+	import loadModel from '@/mixins/loadModel.js';
+	import wallMethod from '@/mixins/wallMethod.js';
+	import floorMethod from '@/mixins/floorMethod.js';
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+    // const app = getApp(); //获取应用实例
+    export default {
+		mixins:[loadModel,floorMethod,wallMethod,commonPageMethod],
+        /**
+         * 页面的初始数据
+         */
+        data() {
+            return {
+				pvCurPageName: "webgl_rxdz_test_look",
+				pvCurPageParams: null,
+				locusBehaviorName: "查看页面",
+                houseId: "",
+				pvId: 'p_2cmina_23080404',
+				navbar: {
+				    showCapsule: 1,
+				    title: '查看户型',
+				    titleColor: '#fff',
+				    navPadding: 0,
+				    navPaddingBg:'transparent',
+				    navBarColor: 'transparent',
+				    navBackColor: 'transparent',
+				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
+				    fromShare: false,
+				    fromProject: 0,
+				    shareToken: "",
+				    pageName: this.pvCurPageName,
+				},
+				canvas:null,
+                id:'',// 户型编号
+                spaceList:[], // 空间列表
+                gltfSpaces:[], // 场景中地板模型数组
+				spaceId:null,
+                wallIds:[], // 空间墙体id
+				wallList:[], // 墙体数据
+                gltfWalls:[], // 场景中墙体模型数组
+                loader:null,
+                scene:null,
+                // sky:null,
+                camera:null,
+                controls:null,
+				curHouseObj: null,
+				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
+				cameraStarPosition : { x:0, y:30, z:0}	,//摄像头初始位置
+				// cameraLastPosition: null,		//摄像头上一次移动到的位置
+				// controlLastPosition: null,		//观察点上一次移动到的位置
+				canvasHeight:430,	//canvas视图的高度-计算得出
+				chooseMesh:null,//标记鼠标拾取到的mesh
+				progress:1,	//进度条
+				myLoadingStatus:false,
+				repeatFlag:false,	//重复点击
+				instancedFloorMesh:null,
+				instancedMeshList: [],
+				lableItem:[],
+				showLables:false,
+				gltfSpaceRoofs:[], // 屋顶模型数组
+				floorList:[],
+				floorId:null,
+				curData:null,	//上一个页面传来的数据
+				curSpaceObj:null,	//当前应该定位到的空间
+				isIOS:false,
+            }
+        },
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
+        watch:{
+
+        },
+		beforeDestroy() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			setTimeout(() => {
+				if (this.renderer instanceof THREE.WebGLRenderer) {
+					// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+					let deleList = this.scene.children.filter(object=>{
+						if (object instanceof THREE.Mesh) {
+							return object
+						}
+					})
+					if(deleList && deleList.length>0){
+						this.scene.remove(...deleList);
+					}
+					this.scene.traverse(function(object) {
+						if (object instanceof THREE.Mesh) {
+							if(object.geometry && typeof(object.geometry.dispose)=='function'){
+								object.geometry.dispose();
+							}
+							if(object.material && typeof(object.material.dispose)=='function'){
+								object.material.dispose();
+							}
+							if(object.texture && typeof(object.texture.dispose)=='function'){
+								object.texture.dispose();
+							}
+						}
+					});
+					this.renderer.clear();
+					this.renderer.dispose();
+					this.renderer.forceContextLoss();
+					this.renderer.context = null;
+					this.renderer.domElement = null;
+					this.renderer = null;;
+					this.clearHandle()
+				}
+			}, 0)
+			this.gltfWalls = [];
+			this.gltfSpaces = [];
+			this.gltfSpaceRoofs = [];
+			this.instancedMeshList = [];
+			this.instancedSpaceMeshList = [];
+			this.lableItem = [];
+			this.gltfLayouts = [];
+			this.instancedFurList = [];
+			TWEEN && TWEEN.removeAll();//清除所有的tween;
+			console.warn("***destroyed-webgl_rxdz_test_look***")
+		},
+        async mounted(options) {
+			var that = this;
+
+            this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
+            this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+            this.id = this.$route.query.id?this.$route.query.id:'';
+			console.warn("***mounted-webgl_rxdz_test_look****",this.id,this.$route.query)
+			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+			if(this.id){
+				this.getIdData()
+			}else{
+				this.$store.state.loadingMsg = "没有数据~";
+			}
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if(window.innerWidth && window.screen.width){
+				screenWidth = Math.min(window.innerWidth,window.screen.width)
+			}
+			if(window.innerHeight && window.screen.height){
+				screenHeight = Math.min(window.innerHeight,window.screen.height)
+			}
+            let container = this.$refs.webgl;
+            let canvas3d = this.canvas = this.$refs.glcanvas;
+
+			let controls = null;
+			let camera = null, renderer = null, mixer = null;
+
+            let loader = this.loader = new GLTFLoader();
+            let scene = this.scene = new THREE.Scene();
+            // let raycaster = null;
+            // let mouse = new THREE.Vector2();
+            let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
+			let isUserContorl = false;//是否进入漫游状态
+
+			let stats;
+			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
+
+		
+			init();
+			this.$store.state.loadingMsg="加载中...1%";
+			this.progress = 1;
+			this.clearEvent = clearEvent;
+			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
+			this.updateLables = updateLables;
+			this.moveMeshCenterHandle = moveMeshCenterHandle;
+			this.cameraInit = cameraInit;
+			this.resetControl = resetControl;
+			function init() {
+
+                scene.background = new THREE.Color("#FFFFFF");
+
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera( 80, screenWidth / screenHeight, 0.1, 10000 );
+				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
+				scene.add(camera);
+                that.camera = camera;
+
+                // 环境光会均匀的照亮场景中的所有物体
+                const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3);
+                scene.add(ambientLight);
+                //平行光
+                const light = new THREE.DirectionalLight(0xFFF8E5, 3);
+                light.position.set(-3, 9, 3); //default; light shining from top
+                light.castShadow = true; // default false
+                // 默认情况下光投影相机区域是一个长宽高为10x10x500的长方体区域，光源投射方向为通过坐标原点
+                light.shadow.camera.left = -100; // default
+                light.shadow.camera.right  = 100; // default
+                light.shadow.camera.top  = 100; // default
+                light.shadow.camera.bottom  = -100; // default
+                
+                light.shadow.mapSize.width = 1024; // default
+                light.shadow.mapSize.height = 1024; // default
+                // light.shadow.camera.near = 0.1; // default
+                // light.shadow.camera.far = 500; // default
+                
+                // light.shadow.bias = -0.01;
+                // light.shadow.radius = 1;
+                // light.shadow.darkness = 1; // 设置阴影强度为0.5
+                scene.add(light);
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+                renderer = that.renderer = new THREE.WebGLRenderer({
+					canvas:canvas3d, 
+					alpha: true,
+				});
+				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
+                renderer.toneMapping = THREE.NoToneMapping;//色调映射
+                renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
+
+                renderer.setPixelRatio( window.devicePixelRatio );
+                renderer.setSize( screenWidth, screenHeight );
+                container.appendChild( renderer.domElement );
+				
+
+				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
+                
+				controls = new OrbitControls(camera, renderer.domElement);
+				controls.screenSpacePanning = false;
+				controls.enableDamping = true;
+				controls.minDistance = 1;
+				controls.maxDistance = 400;
+				controls.minPolarAngle = Math.PI / 8;// 默认0
+				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
+				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
+				controls.enableZoom = true;//启用摄像机的缩放
+				
+				// stats = new Stats();
+				// container.appendChild(stats.dom);
+				// stats.domElement.style.top = '100px';
+				// 监听
+                window.addEventListener( 'resize', onWindowResize );
+                // raycaster = new THREE.Raycaster();
+				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
+				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
+				renderer.domElement.addEventListener('touchend', onPointerUp, false);
+				render();//重启渲染
+				cameraInit();
+				controls.saveState();//保存当前控制器的状态
+            }
+			//初始化相机位置
+			function cameraInit(){
+				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
+			}
+			//初始状态
+			function resetControl(){
+				controls.reset();
+			}
+			function tweenCameraAnmaChange (value) {
+				tweenCameraAnma = value
+			}
+			//取消事件监听-避免二次进入时触发多次事件
+			function clearEvent(){
+				console.warn("**clearEvent****")
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
+			}
+			// 手指移动开始
+			function onPointerStart(event){
+				console.log('开始触摸事件：',that.overChange)
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+			}
+			//持续触摸中
+			function onPointerMove( event ) {
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+				that.showLables = false;
+			}
+			//触摸结束
+			function onPointerUp(event) {
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+				// enableRender();
+				if(event.touches.length==0){
+					that.showLables = true;
+					updateLables();
+				}
+			}
+			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
+			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
+				if(mesh){//如果传入了模型，则取模型
+					let spaceId = mesh.spaceId;//空间id
+					if(chooseMesh && spaceId == chooseMesh.spaceId){
+						console.warn("**moveMeshCenterHandle-重复选中了***")
+						return false;
+					}
+					chooseMesh = mesh;
+				}
+				if(!chooseMesh){
+					console.warn("**moveMeshCenterHandle-没有数据***")
+					return false;
+				}
+				that.showLables = false;//隐藏
+				controls.enable = false;//控制器不响应用户的操作
+				
+				// let object = chooseMesh;//当前选中的空间模型
+				// let spaceObj = object.userData;//获取空间模型的相关数据
+				
+				let spaceObj = chooseMesh;//获取空间模型的相关数据
+				let cameraNewPosition ={};
+				let targetNewPosition ={};
+				let oldUp = {};
+				let newUp = {};
+				if (isUserContorl === false) { // 非漫游状态
+					let _juli = camera.position.y * Math.tan(Math.PI / 8);
+					cameraNewPosition = {
+						x:spaceObj.centerX/100,
+						y:camera.position.y, 
+						z:-spaceObj.centerY/100 + _juli,
+					}
+					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为0
+					targetNewPosition = {
+						x:spaceObj.centerX/100,
+						y:0, 
+						z:-spaceObj.centerY/100,
+					}
+					oldUp = camera.up;//俯视状态
+					newUp = camera.up;
+					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
+					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
+				}
+				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,600);
+				setTimeout(()=>{
+					that.showLables = true;
+					updateLables();
+					controls.enable = true;//控制器响应用户的操作
+				},601);//动画结束后回复原始状态
+			}
+			
+			// oldP  相机原来的位置
+            // oldT  target原来的位置
+            // newP  相机新的位置
+            // newT  target新的位置
+            function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
+				if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
+					that.repeatFlag = false;//放开限制，可以再次点击
+					return false;
+				}
+				tweenCameraAnma = true;
+				var tween = new TWEEN.Tween({
+					x1: oldP.x, // 相机x
+					y1: oldP.y, // 相机y
+					z1: oldP.z, // 相机z
+					x2: oldT.x, // 控制点的中心点x
+					y2: oldT.y, // 控制点的中心点y
+					z2: oldT.z,	// 控制点的中心点z
+					x3: oldUp.x, // 控制点的中心点x
+					y3: oldUp.y, // 控制点的中心点y
+					z3: oldUp.z  // 控制点的中心点z
+				})
+				.to({
+			        x1: newP.x,
+					y1: newP.y,
+					z1: newP.z,
+					x2: newT.x,
+					y2: newT.y,
+					z2: newT.z,
+					x3: newUp.x, // up向量
+					y3: newUp.y, // 控制点的中心点y
+					z3: newUp.z  // 控制点的中心点z
+			    }, time)
+				.easing(TWEEN.Easing.Quadratic.InOut)
+				.onUpdate((object)=> {
+					camera.position.x = object.x1;
+					camera.position.y = object.y1;
+					camera.position.z = object.z1;
+					let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
+					camera.up.copy(newTarget);
+					camera.lookAt(object.x2,object.y2,object.z2);
+					// controls.target.x = object.x2;
+					// controls.target.y = object.y2;
+					// controls.target.z = object.z2;
+					// controls.update();
+					// console.warn("****onUpdate**",object.x1,object.y1,object.z1,object.x2,object.y2,object.z2)
+				}).onComplete(()=>{
+					controls.target.x = newT.x;
+					controls.target.y = newT.y;
+					controls.target.z = newT.z;
+					//修正最后的视角
+					let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
+					camera.up.copy(up);
+					camera.lookAt(controls.target.x,controls.target.y,controls.target.z);
+					tweenCameraAnma = false;
+					that.repeatFlag = false;//放开限制，可以再次点击
+				})
+				// 开始动画
+				tween.start();
+			}
+			function onWindowResize() {
+                camera.aspect = screenWidth / screenHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize( screenWidth, screenHeight );
+            }
+			//计算漫游时当前选中空间的观察点和摄像机的放置点位
+			//distance 表示要沿着视角移动的距离
+			function updateLables(){
+				if(!that.showLables){
+					return false;
+				}
+				that.lableItem.forEach(lable =>{
+					let item = that.gltfSpaces[lable.cubeIndex].instancedMeshIndexList[0];//获取地板模型的第一个geometry实例
+					let _index = item.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
+					let instancedMesh = that.instancedSpaceMeshList[_index];//获取具体的网格实例
+					let stratMatrix = new THREE.Matrix4();//定义一个四维矩阵
+					instancedMesh.getMatrixAt(item.instancedAtIndex,stratMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
+					let position = new THREE.Vector3();//当前几何体的位置参数
+					position.setFromMatrixPosition(stratMatrix);//从四维向量中提取位置信息
+					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
+					position.project(camera);
+					const x = (position.x *  .5 + .5) * screenWidth;
+					const y = (position.y * -.5 + .5) * screenHeight;
+					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
+				})
+			}
+            function render() {
+                TWEEN && TWEEN.update();
+                // stats.update();
+				//不处在动画过程中，则可以处理移动等动作
+				if(tweenCameraAnma==false){
+					controls.update();
+				}
+				renderer.render(scene, camera);//单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+            }
+		},
+
+		methods: {
+			clearHandle(){
+				this.clearEvent();
+			},
+			//楼层切换
+			floorChange(item){
+				if(this.floorId==item.layoutId){
+					return false;
+				}
+				this.floorId = item.layoutId;
+				
+				this.curHouseObj = this.curData.layoutStruct.find(it=>it.layoutId==item.layoutId);//更新当前具体的户型数据
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object=>{
+					if(object.userType=="mesh" || object.userType=="layoutMesh"){
+						return object
+					}
+				})
+				// console.warn("***deleList***",deleList)
+				if(deleList && deleList.length>0){
+					this.showLables = false;//隐藏lable
+					this.scene.remove(...deleList);
+				}
+				this.gltfWalls = [];
+				this.gltfSpaces = [];
+				this.instancedMeshList = [];
+				this.instancedSpaceMeshList = [];
+				this.lableItem = [];
+				this.gltfLayouts = [];
+				this.instancedFurList = [];
+				this.wallList = [];
+				//恢复初始视角
+				this.cameraInit();
+				this.resetControl();
+				setTimeout(()=>{
+					this.loadSpace();
+				}, 100);
+				// this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
+			},
+			async getIdData(){
+				let userId = this.userId || '';
+			    let params = {
+			        id: this.id,
+			        brandId: $config.brandId,
+					houseId:this.houseId,
+					// userId,
+					type:'QIANCE',
+			    };
+			    const res = await requestConfig('getCustomizedRecord', params);
+			    if (res.success ) {
+			        let single = res.list[0];
+					this.layoutStruct = JSON.parse(JSON.stringify(single));
+					this.setHouseDetail(this.layoutStruct)
+			    }
+			},
+			/**
+			 * 设置户型详情信息
+			 * @param {Object} data 户型详情
+			 */
+			setHouseDetail(data){
+				if(data && data.layoutStruct){
+					let curData = data;
+					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
+					// this.spaceId = this.curHouseObj.spaceId;
+					console.warn("***curHouseObj***",this.curHouseObj)
+					this.floorList = [];
+					curData.layoutStruct && curData.layoutStruct.forEach(item=>{
+						this.floorList.push({
+							houseFloor:item.floor,
+							layoutId:item.layoutId,
+						});
+					})
+					let select = this.floorList.find(it=>it.houseFloor==this.curHouseObj.floor);
+					this.floorId = select ? select.layoutId : this.floorList[0].layoutId;
+					this.curData = curData;
+					console.warn("***floorList-init***",this.floorList,select)
+					// 加载户型
+					this.loadSpace();
+				}else{
+					this.curHouseObj = {}
+				}
+			},
+			// 添加文字标签
+			addWordLabel(){
+				if(!this.gltfSpaces || this.gltfSpaces.length <= 0){
+					return false;
+				}
+				// 方案二
+				this.lableItem = [];
+				this.gltfSpaces.forEach((cube,index) =>{
+					// 给地板加上空间类型标注, 空间为链接空间的不显示
+					if(cube.spaceName && !cube.isSizeLock){
+						let name = spaceTypes[cube.spaceType - 1];
+						if(cube.spaceType==15){			//更改空间显示名称 X空间 类型 根据布局所属类型来显示
+							let layoutId = this.spaceList.find(it => it.spaceId == cube.spaceId).layoutId;
+							let layout = this.arrFrunList.find(it=>it.id == layoutId);
+							if(layout){
+								name = spaceTypes[layout.type - 1];
+							}
+						}
+						this.lableItem.push(
+							{
+								text:name,
+								spaceId:cube.spaceId,
+								transform:'',
+								cubeIndex:index,
+							}
+						)
+					}
+				})
+				this.showLables = true;
+				this.updateLables();//更新lable
+			}, 
+			//obj 物体对象，type 是否改变颜色
+			moveMeshCenter(obj,type){
+				console.warn("**moveMeshCenter***",obj)
+				if(obj && this.gltfSpaces && this.gltfSpaces.length>0){
+					this.moveMeshCenterHandle(obj,type);
+				}
+			},
+            // 绘制空间-即地板
+            async loadSpace(){
+				this.spaceList = [];
+				this.wallIds = [];
+				if(!this.curHouseObj){//减少重复请求
+					console.warn("***数据错误***")
+					return false
+				}
+                if(this.curHouseObj){
+                    const spaceDetail = this.curHouseObj;
+                    const spaceList = spaceDetail.houseJson.filter(it=>it.spaceId);
+                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
+                    for (let index = 0; index < spaceList.length; index++) {
+                        var element = spaceList[index];
+                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
+                        // element.centerX = element.centerY;
+                        // element.centerY = centerX;
+						// 计算观察点向量（相对中心点）
+						let _actorLoaction = element.actorLocation.split(',');//x y z
+						let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
+						let _z = (parseInt(_actorLoaction[0])) || element.centerY;//观察点 Z轴坐标
+						let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 5);//5是墙壁厚度的一半-单位cm
+						let _presentY = (_z - element.centerY)/((element.spaceHeight/2) - 5);
+						element.presentX = _presentX;//观察点跟空间中心原点的距离比例
+						element.presentY = _presentY;
+						element.wallMoveValue = "[0,0,0,0]"
+                        this.spaceList.push(element);
+                        this.wallIds.push(element.wallId);
+						if(element.wallList){
+							this.wallList.push(JSON.parse(element.wallList));
+						}
+						if(element.isSelected){ // 默认选中空间
+						    this.curSpaceObj = element;
+						}
+                    }
+					if(!this.curSpaceObj && this.spaceList.length > 0){
+					    this.curSpaceObj = this.spaceList[0];
+					}
+                }
+				if(this.curHouseObj.layoutArea<=100){//面积小于100平米，则摄像头靠近一点
+					this.cameraStarPosition.y = 25;
+				}else if(this.curHouseObj.layoutArea>100){
+					this.cameraStarPosition.y = 35;
+				}
+                console.log("该户型空间数据:", this.spaceList);
+				console.log("当前选中的空间:", this.curSpaceObj);
+				this.cameraInit();
+				this.loaderSpaceArr(this.spaceList);
+                // 获取墙体数据并且绘制墙体
+                this.getHouseTypeSpaceWalls();
+            },
+            // 获取墙体数据
+            async getHouseTypeSpaceWalls(){
+                // let data = {id:this.wallIds}
+                // const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+                // console.log("墙体数据:", res.list)
+                // let wallList = [];
+                // if(res.success){
+                //     wallList = this.wallList = res.list;
+                // }
+				let wallList = [];
+				if(this.wallList && this.wallList.length>0){
+					wallList = this.wallList;
+				}else{
+					let data = {id:this.wallIds}
+					const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+					console.log("墙体数据:", res.list)
+					if(res.success){
+					    wallList = this.wallList = res.list;
+					}
+				}
+                let wallArr = []
+                for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
+                    let element = JSON.parse(wallList[index].wallJson);
+					let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
+					this.computeWallHandleOld(space,element);//提前计算
+                    for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
+                        let wallData = element.wallData[i];
+						//对应方向的墙壁的墙体模型数据列表，每一面墙可能有多个模型
+                        for (let j = 0; j < wallData.wallModelData.length; j ++) {
+                            let wallModelData = wallData.wallModelData[j];
+                            wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
+                        }
+                    }
+                }
+                this.loadSpaceObjWalls(wallArr, wallList);
+				this.getOverallArrangementDetailsList(2);
+            },
+			// 加载单个空间墙体资源
+            async loadSpaceObjWalls(wallArr, wallList){
+                // 加载远程墙体模型资源
+				let startTime = new Date().getTime();
+                // console.log("wallArr:", wallArr)
+				let promise_list = [];
+				let realWallArr = this.preWallData(wallArr);
+				let arrLength = realWallArr.length;
+				realWallArr && realWallArr.forEach((item,index) => {
+					promise_list.push(
+						new Promise((resolve, reject) => {
+							this.loadWallModels(item, wallList, arrLength , resolve);
+						})
+					)
+				});
+				Promise.all(promise_list).then(()=>{
+					let endTime = new Date().getTime();
+					console.log("模型全部加载完成，时间：",endTime - startTime);
+					this.$nextTick(()=>{
+						this.progress = 100;
+						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						this.$store.state.loadingMsg="加载中..." + this.progress + '%';
+						this.$nextTick(()=>{
+							this.myLoadingStatus = false;
+							// this.$refs.myLoading.hideLoading();
+							setTimeout(()=>{
+								this.moveMeshCenter(this.curSpaceObj);
+								this.addWordLabel(); // 添加文字标签
+							}, 610);
+						})
+					})
+				})
+            },
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import "./webgl_rxdz_test_look.scss";
+</style>

src/pages/webgl_rxdz_test_roam/webgl_rxdz_test_roam.html

@@ -0,0 +1,28 @@
+<!--
+ * @Author: caodongdong caodongdoong@gmail.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: caodongdong caodongdoong@gmail.com
+ * @LastEditTime: 2023-06-30 16:20:04
+ * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<div class="main-view">
+	<mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" />
+	<!-- 主要操作视图 -->
+	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
+	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>
+	<div id="status" style="position:fixed;top:100px;left:30px;cursor:pointer;opacity:0.9;z-index:10000">
+		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
+		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
+	</div> -->
+	<div id="mapDiv" ref="webgl"></div>
+	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
+		 width="100vw" 
+		:style="{'height':canvasHeight+'px'}">
+	</canvas>
+	<!-- AI结果覆盖层 -->
+	<viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
+	  :spaceObj="curSpaceObj" :spaceList="spaceList" :layoutList="arrFrunList" ></viewMask>
+	<!-- 生成截屏的画布对象 -->
+	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px'}"></canvas>
+</div>

src/pages/webgl_rxdz_test_roam/webgl_rxdz_test_roam.scss

@@ -0,0 +1,33 @@
+.main-view{
+	width:100vw;
+	height:100%;
+	overflow: hidden;
+	position: relative;
+}
+canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;position: relative;top: 0px;}
+#mapDiv{
+	background-color: #fff;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	position: absolute;
+	left:0px;
+	top: -100vh;
+}
+.canvas-view{
+	position:relative;
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}

src/pages/webgl_rxdz_test_roam/webgl_rxdz_test_roam.vue

@@ -0,0 +1,945 @@
+<template src="./webgl_rxdz_test_roam.html"></template>
+<script>
+	import * as THREE from 'three';
+	import Stats from 'three/addons/libs/stats.module.js';
+	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+	
+	import TWEEN from 'three/addons/libs/tween.module.js';
+	import {getStorage} from '@/utils/localStorage';
+	var requestId = "";
+    const util = require('@/utils/util.js').default;
+	// import util from '@/utils/util.js';
+    // const config = require('@/services/urlConfig.js');
+    // import requestConfig from '@/static/lib/requestConfig.js';
+	import viewShell from'@/components/newQCCom/viewShell/viewShell.vue';
+	import viewMask from'@/components/newQCCom/viewMask/viewMask.vue';
+
+	// import { RGBELoader } from '@/webgl/jsm/loaders/RGBELoader.js';
+	import screenshot from '@/mixins/screenshot.js';
+	import floorMethod from '@/mixins/floorMethod.js';
+	import loadModel from '@/mixins/loadModel.js';
+	import wallMethod from '@/mixins/wallMethod.js';
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+    // const app = getApp(); //获取应用实例
+    export default {
+		components:{viewShell,viewMask},
+		mixins:[screenshot,loadModel,floorMethod,wallMethod,commonPageMethod],
+        /**
+         * 页面的初始数据
+         */
+        data() {
+            return {
+				pvCurPageName: "room_show",
+				locusBehaviorName: "房间展示",
+				pvCurPageParams: null,
+                houseId: "",
+				pvId: 'p_2cmina_23080402',
+				canvas:null,
+				navbar: {
+				    showCapsule: 1,
+				    title: '客厅',
+				    titleColor: '#000',
+				    navPadding: 0,
+				    navPaddingBg:'transparent',
+				    navBarColor: 'transparent',
+				    navBackColor: 'transparent',
+				    haveCallback: true, // 如果是 true 会接手 navbarBackClk
+				    fromShare: false,
+				    fromProject: 0,
+				    shareToken: "",
+				    pageName: this.pvCurPageName,
+				},
+                id:'',// 户型编号
+                spaceList:[], // 空间列表
+                gltfSpaces:[], // 场景中地板模型数组
+				gltfSpaceRoofs:[],
+                curSpaceObj:null, // 当前选中的空间
+                // curSpaceIndex:-1, // 当前选中的空间索引
+				spaceId:null,
+                wallIds:[], // 空间墙体id
+				// wallList:[], // 墙体数据
+                gltfWalls:[], // 场景中墙体模型数组
+                loader:null,
+                scene:null,
+                // sky:null,
+                camera:null,
+				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
+				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
+				cameraLastPosition: null,		//摄像头上一次移动到的位置
+				controlLastPosition: null,		//观察点上一次移动到的位置
+				canvasHeight:408,	//canvas视图的高度-计算得出
+				chooseMesh:null,//标记鼠标拾取到的mesh
+				shottingImg: [],
+				progress:1,	//进度条
+				myLoadingStatus:false,
+				// textGeoList:[],
+				repeatFlag:false,	//重复点击
+				// skyPlan: null, // 天空盒子
+				instancedMeshList: [],
+				screenshotResolve:null,
+				actors:[],
+				showDownView:true,//默认显示下载按钮
+				currentActor:null,
+				circleGroup:null,//圆形地标
+				isIOS:false,
+				defaulIndex:null,	//默认视角的序号
+				// aiImagesList:[
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM01.png",
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM02.png",
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM03.png",
+				// 	// "https://dm.static.elab-plus.com/miniProgram/plus_IM04.png",
+				// ]
+            }
+        },
+		beforeDestroy() {
+			cancelAnimationFrame(requestId, this.canvas)
+			this.worker && this.worker.terminate()
+			if (this.renderer instanceof THREE.WebGLRenderer) {
+				// 遍历场景中的所有子对象，找到类型为Mesh的对象并移除
+				let deleList = this.scene.children.filter(object=>{
+					if (object instanceof THREE.Mesh) {
+						return object
+					}
+				})
+				if(deleList && deleList.length>0){
+					this.scene.remove(...deleList);
+				}
+				this.scene.traverse(function(object) {
+					if (object instanceof THREE.Mesh) {
+						if(object.geometry && typeof(object.geometry.dispose)=='function'){
+							object.geometry.dispose();
+						}
+						if(object.material && typeof(object.material.dispose)=='function'){
+							object.material.dispose();
+						}
+						if(object.texture && typeof(object.texture.dispose)=='function'){
+							object.texture.dispose();
+						}
+					}
+				});
+				this.renderer.clear();
+				this.renderer.dispose();
+				this.renderer.forceContextLoss();
+				this.renderer.context = null;
+				this.renderer.domElement = null;
+				this.renderer = null;;
+				this.clearHandle()
+			}
+			TWEEN && TWEEN.removeAll();//清除所有的tween;
+			console.warn("***beforeDestroy-webgl_rxdz_roam***");
+		},
+        mounted(options) {
+			var that = this;
+			// alert("JavaScript 堆大小限制: "+performance.memory.jsHeapSizeLimit
+			// +"\n已使用的 JavaScript 堆大小: "+performance.memory.usedJSHeapSize
+			// +"\nJavaScript 堆的总大小: "+performance.memory.totalJSHeapSize);
+			console.warn("***webgl_rxdz_roam-options***",this.$route.query)
+			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+			if(this.isIOS){
+				this.curHouseObj = JSON.parse(getStorage('curHouseObj'));
+				this.wallList = JSON.parse(getStorage('wallList'));
+			}else{
+				this.curHouseObj = 	this.$store.state.curHouseObj;
+				this.wallList = 	this.$store.state.wallList;
+			}
+			// alert("***mounted-webgl_rxdz_roam***"+this.isIOS + this.curHouseObj)
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if(window.innerWidth && window.screen.width){
+				screenWidth = Math.min(window.innerWidth,window.screen.width)
+			}
+			if(window.innerHeight && window.screen.height){
+				screenHeight = Math.min(window.innerHeight,window.screen.height)
+			}
+			let unit = screenWidth / 750;//单位rpm 对应 px 的值
+			this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
+			this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
+			this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+			let container = this.$refs.webgl;
+            let canvas3d = this.canvas = this.$refs.glcanvas;
+			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
+			
+			let camera = null, renderer = null;
+			let needRender = false;	//是否需要渲染 false表示不需要渲染；true 表示需要渲染
+            let loader = this.loader = new GLTFLoader();
+            let scene = this.scene = new THREE.Scene();
+            let raycaster = null;
+            let mouse = new THREE.Vector2();
+            let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
+			let isUserContorl = true;//是否进入漫游状态-默认是
+			//漫游时变量
+			let onPointerDownMouseX = 0, onPointerDownMouseY = 0,
+			lon = 0;
+			let fingerCount = 0;	//触摸时的手指数目
+			let startTime = 0;	//非漫游时的移动变量
+			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
+			let controls = null,boundary=null;
+			let stats;
+			init();
+			// this.$refs.myLoading.showLoading("加载中...1%")
+			this.$store.state.loadingMsg="加载中...1%";
+			// this.myLoadingStatus = true;
+			this.progress = 1;
+			this.clearEvent = clearEvent;
+			this.attendEvent = attendEvent;
+			// this.meshRoam = meshRoam;
+			this.tweenCameraAnmaChange = tweenCameraAnmaChange;
+			this.switchActor = switchActor;
+			this.starRender = starRender;//对外暴露启动渲染的方法
+			this.stopRender = stopRender;//对外暴露停止渲染的方法
+			this.positionCamer = positionCamer;
+			if(this.curHouseObj && this.curHouseObj.id){
+				this.setHouseDetail(this.curHouseObj);
+			}
+			function init() {
+
+                scene.background = new THREE.Color("#FFFFFF");
+				// scene.environment = new THREE.Color("#F2F2F2");
+				// 创建一个HDR贴图加载器
+				// const rgbeloader = new RGBELoader();
+				// // 加载HDR贴图
+				// rgbeloader.load('https://dm.static.elab-plus.com/miniProgram/environment.hdr', (texture) => {
+				// 	// 将HDR贴图设置为场景的环境贴图
+				// 	texture.mapping = THREE.EquirectangularReflectionMapping;
+				// 	scene.environment = texture;
+				// })
+
+				// 创建相机位置
+				camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000 );
+				// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
+				// camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				scene.add(camera);
+                that.camera = camera;
+
+                // 环境光会均匀的照亮场景中的所有物体
+				const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
+				scene.add(ambientLight);
+				//平行光
+				const light = new THREE.DirectionalLight(0xFFF8E5, 2.5);
+				light.position.set(5, 7, 3); //default; light shining from top
+				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; // 影响阴影的清晰度
+				}
+				
+				scene.add(light);
+				
+				//antialias 这个值得设置为false，不然IOS上截图会失效
+                renderer = that.renderer = new THREE.WebGLRenderer( { 
+					canvas:canvas3d, 
+					alpha: true,
+					antialias:true,
+					preserveDrawingBuffer: true,
+				});
+				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
+				renderer.toneMapping = THREE.NoToneMapping;//色调映射
+				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
+
+                renderer.setPixelRatio(window.devicePixelRatio);
+                renderer.setSize(screenWidth, that.canvasHeight);
+                container.appendChild( renderer.domElement );
+				
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enableDamping = true;//启动缓动
+				controls.minDistance = 0.0001;
+				controls.maxDistance = 10;
+				controls.minPolarAngle = 0;// 默认0
+				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
+				// controls.target.set(  that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
+				controls.enableZoom = true;//启用摄像机的缩放
+				controls.enablePan = true;//禁用摄像机平移
+				controls.enableRotate = true;//启用摄像机水平或垂直旋转
+				// controls.zoomToCursor = true;
+				
+				// controls.target.copy(camera.position);
+				// controls.update();
+				// 监听相机移动事件-限制只能在当前空间范围内移动
+				controls.addEventListener('change', () => {
+					// 检查相机位置是否超出边界框
+					if (boundary && !boundary.containsPoint(camera.position)) {
+						let clampedPosition = new THREE.Vector3( );
+						boundary.clampPoint(camera.position,clampedPosition);
+						if(clampedPosition){
+							camera.position.copy(clampedPosition);
+							// controls.target.copy(clampedPosition);
+						}
+					}
+				});
+				// controls.target = new THREE.Vector3( );;
+				// camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
+                raycaster = new THREE.Raycaster();
+				// stats = new Stats();
+				// container.appendChild(stats.dom);
+				// stats.domElement.style.top = '100px';
+				attendEvent();//注册监听事件
+				starRender();	//启动渲染
+            }
+			function tweenCameraAnmaChange (value) {
+				tweenCameraAnma = value
+			}
+			function attendEvent () {
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchstart', onPointerStart, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchmove', onPointerMove, false);
+				renderer && renderer.domElement && renderer.domElement.addEventListener('touchend', onPointerUp, false);
+			}
+			//取消事件监听-避免二次进入时触发多次事件
+			function clearEvent(){
+				console.warn("**clearEvent****")
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer && renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
+			}
+			// 手指移动开始
+			function onPointerStart(event){
+				startTime = (new Date()).getTime();
+				fingerCount = event.touches.length;//手指个数
+				console.log('开始触摸事件：',lon,fingerCount,camera.position.y)
+				if (fingerCount === 1) {
+					// 只有一个手指时记录当前点的坐标作为平移起始点
+					onPointerDownMouseX = event.changedTouches[0].clientX;
+					onPointerDownMouseY = event.changedTouches[0].clientY;
+				}
+			}
+			//持续触摸中
+			function onPointerMove( event ) {
+				fingerCount = event.touches.length;//手指个数
+			}
+			//触摸结束
+			function onPointerUp(event) {
+				fingerCount = event.touches.length;//手指个数
+				console.warn("***触摸结束***",fingerCount,startTime)
+				if(fingerCount==0){
+					let now = new Date().getTime()
+					if (Math.abs(event.changedTouches[0].clientX - onPointerDownMouseX) < 10 
+					&& Math.abs(event.changedTouches[0].clientY - onPointerDownMouseY) < 10 
+					&& (now - startTime) < 300 ){
+						checkIntersection(event);
+					}
+				}
+			}
+			//射线检测handle
+			function checkIntersection(event) {
+			    let x = (event.changedTouches[0].clientX / screenWidth) * 2 - 1;
+			    let y = -(event.changedTouches[0].clientY / that.canvasHeight) * 2 + 1;
+			    mouse.x = x;
+			    mouse.y = y;
+			    //更新射线
+			    raycaster.setFromCamera(mouse, camera);
+			    let intersects = raycaster.intersectObjects(scene.children,true);
+				console.warn("***checkIntersection***",intersects.length)
+			    if (intersects.length > 0) {
+					//找到最近的那个网格模型物体
+					let mesh = intersects.find((it) => {
+						if(it.object && it.object.isMesh == true  
+							&& it.object.parent && it.object.parent.name == 'actor'
+							&& it.object.parent.visible == true){
+							return true;
+						}
+					});
+					
+					//拾取到了视角，就不继续拾取了
+					if(mesh){
+						moveActor(mesh.object.parent);
+						return false;
+					}
+					mesh = intersects.find((it) => {
+						if(it.object && it.object.isInstancedMesh
+							&& (it.object.name == '地板' || it.object.name == '花园') && it.object.visible == true){
+							return true;
+						}
+					});
+					//拾取到了地板
+					if(mesh){
+						let floor = mesh.object;
+						let index = mesh.instanceId;//射线相交是的实例序号
+						let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
+						if(floor.name == "花园"){//花园
+							return false;
+							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType==14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
+							spaceId = selectMesh.spaceId;
+						}else{//室内
+							// floor.name = "地板";
+							let selectMesh = that.gltfSpaces.find(it=>{return it.spaceType!=14 && it.instancedMeshIndexList[0].instancedAtIndex==index})
+							spaceId = selectMesh.spaceId;
+						}
+						// let spaceId = that.gltfSpaces[index].spaceId;//获取选中实例的空间id
+						console.warn("***checkIntersection-地板***",floor,index,spaceId,that.spaceId)
+						//当前拾取到的是本空间的底部-意味着用户点击了地板
+						if(floor && spaceId == that.spaceId){
+							moveCarmer(mesh.point);
+							return false;
+						}
+					}
+			    }
+			}
+			//自动切换视角
+			function switchActor (toIndex=null) {
+				if(!that.currentActor){
+					this.$message.warning("没有当前视角!");
+					return false;
+				}
+				if(!that.actors || that.actors.length==0){
+					this.$message.warning("没有视角!");
+					return false;
+				}
+				if(toIndex!=null){//存在要去往的视角
+					moveActor(that.actors[toIndex]);
+				}else{
+					let index = that.currentActor.userIndex;//当前视角的序号
+					let nextIndex = (index + 1) % that.actors.length;
+					//移动到对应的视角去
+					moveActor(that.actors[nextIndex]);
+					that.defaulIndex = nextIndex;//更新下默认视角
+				}
+			}
+			//移动到选中的位置-地板
+			function moveCarmer (point) {
+				//还在动画中，不能点击切换
+				if(tweenCameraAnma == true){
+					return false;
+				}
+				let _x =  point.x - camera.position.x;//x轴移动的距离
+				let _z =  point.z - camera.position.z;//z轴移动的距离
+				let cameraNewPosition = {x:camera.position.x + _x,y:1.5,z:camera.position.z + _z};
+				let targetNewPosition = {x:controls.target.x + _x,y:1.5,z:controls.target.z + _z};
+				let oldUp = {x:0,y:1,z:0};	
+				let newUp = {x:0,y:1,z:0};
+				moveTip(cameraNewPosition)
+				// console.warn("**moveCarmer***",lon,JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				setTimeout(()=> {
+					that.circleGroup.visible = false;
+				}, 2000);
+			}
+			//创建地标
+			function creatMoveTip(position){
+				if(!that.circleGroup){
+					that.circleGroup = new THREE.Group();
+					let geometry = new THREE.CircleGeometry( 0.2, 32 );
+					let material = new THREE.MeshBasicMaterial( { transparent: true } );
+					let circle = new THREE.Mesh( geometry, material );
+					circle.position.set(position.x,0.01,position.z);
+					circle.rotation.x = -Math.PI / 2;
+					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
+					// let circle2 = new THREE.Mesh( geometry1, material );
+					// circle2.position.set(position.x,0.01,position.z);
+					// 使用贴图
+					const textureLoader = new THREE.TextureLoader();
+					textureLoader.load('https://dm.static.elab-plus.com/miniProgram/circlemap1.png', function(texture) {
+						material.map = texture; // 将贴图应用于材质的map属性
+						material.needsUpdate = true; // 更新材质
+					});
+					that.circleGroup.add(circle);
+					scene.add(that.circleGroup);
+					that.circleGroup.visible = false;
+				}
+			}
+			//移动地标
+			function moveTip(position){
+				if(!that.circleGroup){
+					that.circleGroup = new THREE.Group();
+					let geometry = new THREE.CircleGeometry( 0.2, 32 );
+					let material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					let circle = new THREE.Mesh( geometry, material );
+					circle.position.set(position.x,0.01,position.z);
+					circle.rotation.x = -Math.PI / 2;
+					// let geometry1 = new THREE.CircleGeometry( 0.4, 32 );
+					// let circle2 = new THREE.Mesh( geometry1, material );
+					// circle2.position.set(position.x,0.01,position.z);
+					that.circleGroup.add(circle);
+					scene.add(that.circleGroup);
+				}else{
+					that.circleGroup.visible = true;
+					that.circleGroup.children[0].position.set(position.x,0.01,position.z);
+				}
+			}
+			//移动视角点位
+			function moveActor (obj) {
+				clearEvent();//注销事件监听
+				// console.warn("***moveActor***",obj)
+				that.currentActor = obj;//记录下当前的视角对象 mesh网格模型
+				let cameraNewPosition = obj.position;
+				let targetNewPosition = obj.targetNewPosition;
+				let oldUp = {x:0,y:1,z:0};	//俯视
+				let newUp = {x:0,y:1,z:0};	//正视
+				// moveTip(cameraNewPosition);
+				// console.warn("**moveActor***",JSON.stringify(cameraNewPosition),JSON.stringify(targetNewPosition))
+				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				lon = 0;
+				setTimeout(()=> {
+					attendEvent()
+					// that.circleGroup.visible = false;
+				}, 2000);
+			}
+			//初始化点位视角
+			function initActor(){
+				if(!chooseMesh){
+					console.error("[drawActor],没有选中的空间数据")
+					return false;
+				}
+				let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
+				if(!spaceObj.actors){
+					return false;
+				}
+				let defaulIndex = spaceObj.actors.findIndex(it=>it.isSelected==true);
+				if(defaulIndex == -1){
+					defaulIndex = 0;
+				}
+				that.defaulIndex = defaulIndex;//记录下默认视角
+				that.actors = [];
+				spaceObj.actors.forEach((actor,index)=>{
+					// let model = gltf.scene; // 获取模型
+					// let cloneModel = model.clone(true);//赋值模型，准备复用
+					// cloneModel.children.map((v,i)=>{
+					// 	if(v.material){
+					// 		v.material = model.children[i].material.clone()
+					// 	}
+					// })
+					// let cube = cloneModel;
+					let cube = {};
+					cube.name = "actor";
+					cube.userType = "mesh";
+					//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
+					let _actorLoaction = actor.actorLocation.split(',');//x y z
+					let _actorTransform = actor.actorTransform.split(',');//旋转角度，取第三个值
+					let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]));//将度转化为弧度。
+					let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
+					// if(parseInt(_actorLoaction[1])==0){//X轴
+					// 	_actorLoaction[1] = spaceObj.centerX;
+					// }
+					// if(parseInt(_actorLoaction[0])==0){//Y轴
+					// 	_actorLoaction[0] = spaceObj.centerY;
+					// }
+					let X_C = parseInt(_actorLoaction[0]);//X轴偏移量
+					let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
+					let px = spaceObj.centerX + X_C;
+					let py = -spaceObj.centerY + Y_C;//UE里面的centerY值跟Three.js Y轴相反；获得真实的坐标值
+					let position = {
+						x:(parseInt(px))/100,
+						y:1.5, 
+						z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
+					}
+					//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
+					let targetNewPosition = {
+						x:position.x + Math.sin(_hd),
+						y:1.5 + Math.tan(_hdY),
+						z:(position.z - Math.cos(_hd)),
+					}
+					cube.position = position;
+					cube.userIndex = index;
+					cube.actorEum = index;
+					cube.targetNewPosition = targetNewPosition;
+					// console.warn("*actors*",cube,defaulIndex)
+					that.actors.push(cube);//添加视角
+					if(index == defaulIndex){//隐藏当前视角
+						that.currentActor = cube;//记录下当前的视角对象 mesh网格模型
+						let param = {
+							type: 'CLK', //埋点类型
+							clkId: 'clk_2cmina_23080411', //点击ID
+							clkName: 'visualangle_clk', //点击前往的页面名称
+							clkParams: {
+								locusName: "预制视角",
+								type:that.actors[index].actorEum
+							}
+						};
+						util.trackRequest(param);
+					}
+				})
+			}
+			//计算当前选中空间的平视时的观察点和摄像机的放置点位
+			function roamPositionHandle(lon=''){
+				if(!chooseMesh){
+					console.error("[roamPositionHandle],没有选中的空间数据")
+					return false;
+				}
+				let spaceObj = chooseMesh;//获取选中的空间模型的相关数据
+				//获取视角
+				let defaultActor = null;
+				if(spaceObj.actors && spaceObj.actors.length>0){
+					defaultActor = spaceObj.actors.find(it=>it.isSelected==true);
+					if(!defaultActor){
+						defaultActor = spaceObj.actors[0];
+					}
+				}
+				let _actorLoaction = defaultActor.actorLocation.split(',');//x y z
+				let _actorTransform = defaultActor.actorTransform.split(',');//旋转角度，取第三个值
+				let _hd = THREE.MathUtils.degToRad(parseInt(_actorTransform[2]) + lon);//将度转化为弧度。
+				let _hdY = THREE.MathUtils.degToRad(parseInt(_actorTransform[1]));//Y轴方向上将度转化为弧度。
+				// if(parseInt(_actorLoaction[1])==0){//X轴
+				// 	_actorLoaction[1] = spaceObj.centerX;
+				// }
+				// if(parseInt(_actorLoaction[0])==0){//Y轴
+				// 	_actorLoaction[0] = spaceObj.centerY;
+				// }
+				let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
+				let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
+				let px = spaceObj.centerX + X_C;
+				let py = -spaceObj.centerY + Y_C;
+				//新的摄像机的位置-新的摄像机角度是倾斜角度，所以z值需要计算，高度设置为模型高度的2倍
+				let cameraNewPosition = {
+					x:(parseInt(px))/100,
+					y:1.5, 
+					z:(parseInt(py))/100,//模型Y轴坐标系正负值跟webglZ轴是相反的
+				}
+				if(cameraNewPosition){
+					let minX = 0,maxX = 0,minY = 0,maxY = 0;//0.1 是模型墙壁厚度
+					minX = (spaceObj.centerX - (spaceObj.spaceWidth/2))/100 + 0.1;
+					maxX = (spaceObj.centerX + (spaceObj.spaceWidth/2))/100 - 0.1;
+					maxY = ((-spaceObj.centerY + (spaceObj.spaceHeight/2))/100 - 0.1);
+					minY = ((-spaceObj.centerY - (spaceObj.spaceHeight/2))/100 + 0.1);
+					//新的坐标轴不在房间范围内，则不能移动
+					if(cameraNewPosition.x<minX || cameraNewPosition.x>maxX
+					||cameraNewPosition.z<minY || cameraNewPosition.z>maxY){//不在房间范围
+						let _x = ((spaceObj.spaceWidth/2) - 15)*defaultActor.presentX + spaceObj.centerX;
+						let _z = ((spaceObj.spaceHeight/2) - 15)*defaultActor.presentY + (-spaceObj.centerY);
+						cameraNewPosition.x = _x/100;
+						cameraNewPosition.z = _z/100;
+						console.warn("**roamPositionHandle-观察点不在空间范围-强制修正观察点位置****",JSON.stringify(cameraNewPosition))
+					}
+				}
+				//新的观察点的位置-取模型的中心点坐标，加上高度，由于模型都是贴地的，所以高度设置为1.5
+				let targetNewPosition = {
+					x:cameraNewPosition.x + Math.sin(_hd),
+					y:1.5 + Math.tan(_hdY),
+					z:(cameraNewPosition.z - Math.cos(_hd)),
+				}
+				let lookPosition = {
+					x:cameraNewPosition.x + (Math.sin(_hd)*0.01),
+					y:1.5 + Math.tan(_hdY),
+					z:(cameraNewPosition.z - (Math.cos(_hd))*0.01),
+				}
+				return {cameraNewPosition,targetNewPosition,lookPosition}
+			}
+			//直接定位到摄像头位置
+			function positionCamer(mesh=null,needAni=false){
+				if(mesh){//如果传入了模型，则取模型
+					chooseMesh = mesh;
+				}
+				if(!chooseMesh){
+					console.error("[positionCamer],没有选中的空间数据")
+					return false;
+				}
+				if(!chooseMesh.actors || chooseMesh.actors.length==0){
+					chooseMesh.actors = [{
+						actorLocation:chooseMesh.actorLocation,
+						actorTransform:chooseMesh.actorTransform,
+						isSelected:true,
+						presentX:chooseMesh.presentX,
+						presentY:chooseMesh.presentY,
+					}]
+				}
+				boundary = new THREE.Box3(
+					new THREE.Vector3(chooseMesh.centerX/100 - chooseMesh.spaceWidth/100/2 + 0.1, 0, -chooseMesh.centerY/100 - chooseMesh.spaceHeight/100/2 + 0.1), // 边界框的最小点
+					new THREE.Vector3(chooseMesh.centerX/100 + chooseMesh.spaceWidth/100/2 - 0.1, 2.7, -chooseMesh.centerY/100 + chooseMesh.spaceHeight/100/2 - 0.1) // 边界框的最大点
+				);
+				initActor();//初始化视角
+				let data = roamPositionHandle();
+				let cameraNewPosition = data.cameraNewPosition;
+				let targetNewPosition = data.targetNewPosition;
+				targetNewPosition.z = targetNewPosition.z + 0.5;//增加偏差，防止极点翻转问题？不知道为啥会有用
+				let lookPosition = data.lookPosition;
+				creatMoveTip(cameraNewPosition);//创建移动的地标
+				if(needAni){
+					let oldUp = {x:0,y:1,z:0};	//俯视
+					let newUp = {x:0,y:1,z:0};	//正视
+					tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,2000);
+				}else{
+					camera.position.set(cameraNewPosition.x, cameraNewPosition.y, cameraNewPosition.z);
+					controls.target.set(lookPosition.x,lookPosition.y,lookPosition.z);
+					// controls.target.set(cameraNewPosition.x,cameraNewPosition.y,cameraNewPosition.z);
+					// controls.target.copy(camera.position);
+					camera.lookAt(targetNewPosition.x,targetNewPosition.y,targetNewPosition.z);
+				}
+			}
+			// oldP  相机原来的位置
+            // oldT  target原来的位置
+            // newP  相机新的位置
+            // newT  target新的位置
+            function tweenCamera(oldP, oldT, newP, newT, oldUp, newUp, time=1000) {
+				if(JSON.stringify(oldP) == JSON.stringify(newP) && JSON.stringify(oldT) == JSON.stringify(newT)){
+					that.repeatFlag = false;//放开限制，可以再次点击
+					return false;
+				}
+				if (!chooseMesh) {
+					that.repeatFlag = false;//放开限制，可以再次点击
+					return false;
+				}
+				tweenCameraAnma = true;
+				var tween = new TWEEN.Tween({
+					x1: oldP.x, // 相机x
+					y1: oldP.y, // 相机y
+					z1: oldP.z, // 相机z
+					x2: oldT.x, // 控制点的中心点x
+					y2: oldT.y, // 控制点的中心点y
+					z2: oldT.z,	// 控制点的中心点z
+					x3: oldUp.x, // 控制点的中心点x
+					y3: oldUp.y, // 控制点的中心点y
+					z3: oldUp.z  // 控制点的中心点z
+				})
+				.to({
+			        x1: newP.x,
+					y1: newP.y,
+					z1: newP.z,
+					x2: newT.x,
+					y2: newT.y,
+					z2: newT.z,
+					x3: newUp.x, // up向量
+					y3: newUp.y, // 控制点的中心点y
+					z3: newUp.z  // 控制点的中心点z
+			    }, time)
+				.easing(TWEEN.Easing.Quadratic.InOut)
+				.onUpdate((object)=> {
+					camera.position.x = object.x1;
+					camera.position.y = object.y1;
+					camera.position.z = object.z1;
+					// let newTarget = new THREE.Vector3(object.x3,object.y3,object.z3);
+					// camera.up.copy(newTarget);
+					camera.lookAt(object.x2,object.y2,object.z2);
+					// controls.target.x = object.x2;
+					// controls.target.y = object.y2;
+					// controls.target.z = object.z2;
+					// controls.update();
+				}).onComplete(()=>{
+					controls.target.x = newT.x;
+					controls.target.y = newT.y;
+					controls.target.z = newT.z;
+					//修正最后的视角
+					// let up = new THREE.Vector3(newUp.x,newUp.y,newUp.z);
+					// camera.up.copy(up);
+					camera.lookAt(newT.x,newT.y,newT.z);
+					tweenCameraAnma = false;
+					that.repeatFlag = false;//放开限制，可以再次点击
+				})
+				// 开始动画
+				tween.start();
+			}
+
+			function stopRender () {
+				needRender = false;
+			}
+			function starRender () {
+				if(needRender==true){//如果已经在渲染中了，则不能再次开启，避免渲染过多
+					false;
+				}
+				needRender = true;
+				render();//开始渲染
+			}
+            function render() {
+				if(needRender==false){
+					return false;
+				}
+                TWEEN && TWEEN.update();
+				// stats.update();
+				renderer.render(scene, camera);//单次渲染
+				requestId = requestAnimationFrame(render, canvas3d);
+				if (that.screenshotResolve) {
+					stopRender();
+					that.screenshotResolve()
+					that.screenshotResolve = null;//释放Promise
+				}
+            }
+
+		},
+		// computed: {
+		// 	curHouseObj() {
+		// 		return this.$store.state.curHouseObj;
+		// 	},
+		// 	wallList() {
+		// 		return this.$store.state.wallList;
+		// 	},
+		// },
+		methods: {
+			navbarBackClk() {
+				if(!this.$refs.viewMask){
+					this.$router.go(-1);
+					return false
+				}
+				if (this.$refs.viewMask.showAIImage) {
+					this.$refs.viewMask.showOrHideWebGl();//隐藏显示的AI生图
+					// if(this.currentActor.userIndex!=this.defaulIndex){//当前不是默认视角了
+						this.switchActor(this.defaulIndex);//切换到默认视角
+					// }
+				} else {
+					this.$router.go(-1);
+				}
+			},
+			switchActor(){},
+			positionCamer(){},
+			clearHandle(){
+				this.clearEvent();
+			},
+			save(){
+				this.$refs.viewMask.save();//下载
+			},
+			/**
+			 * 设置户型详情信息
+			 * @param {Object} data 户型详情
+			 */
+			setHouseDetail(data){
+				if(data){
+					this.id = data.id;
+					this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+					console.warn("***curHouseObj***",data)
+					// 加载户型
+					this.loadSpace();
+				}else{
+					this.curHouseObj = {}
+				}
+			},
+            // 绘制空间-即地板
+            async loadSpace(){
+				this.spaceList = [];
+				this.wallIds = [];
+				if(!this.curHouseObj || !this.spaceId){//减少重复请求
+					alert("数据错误")
+					console.warn("***数据错误***")
+					return false
+				}
+                if(this.curHouseObj){
+                    const spaceDetail = this.curHouseObj;
+                    const spaceList = JSON.parse(spaceDetail.houseJson);
+                    // 交换centerX， centerY;上一页面已经处理过了，这里不在需要处理
+                    for (let index = 0; index < spaceList.length; index++) {
+                        var element = spaceList[index];
+                        // const centerX = JSON.parse(JSON.stringify(element.centerX))
+						if(!element.actors || element.actors.length==0){
+							element.actors = [{
+								actorLocation:element.actorLocation,
+								actorTransform:element.actorTransform,
+								isSelected:true,
+							}]
+						}
+						element.actors.forEach(actor=>{
+							let _actorLoaction = actor.actorLocation.split(',');//x y z
+							let X_C = parseInt(_actorLoaction[0]);//X轴偏移量-UE原因
+							let Y_C = -parseInt(_actorLoaction[1]);//Y轴偏移量-取反，UE里面的Y轴方向跟Three.js相反
+							let _x = element.centerX + X_C;
+							let _z = -element.centerY + Y_C;//centerY 要取反，因为UE里面是反向的
+							
+							// let _x = parseInt(_actorLoaction[1]) || element.centerX;//观察点 X轴坐标 
+							// let _z = parseInt(_actorLoaction[0]) || element.centerY;//观察点 Z轴坐标
+							let _presentX = (_x - element.centerX)/((element.spaceWidth/2) - 10);//10是墙壁厚度-单位cm
+							let _presentY = (_z + element.centerY)/((element.spaceHeight/2) - 10);
+							//注意如果一开始就设置大超过空间大小，则处理成贴近空间边界
+							actor.presentX = Math.abs(_presentX)>1 ? (_presentX>1?1:-1) : _presentX;//观察点跟空间中心原点的距离比例
+							actor.presentY = Math.abs(_presentY)>1 ? (_presentY>1?1:-1) : _presentY;
+						})
+						element.wallMoveValue = "[0,0,0,0]"
+                        this.spaceList.push(element);
+                        this.wallIds.push(element.wallId);
+
+                        if(element.spaceId == this.spaceId){ // 默认选中空间
+                            this.curSpaceObj = element;
+                        }
+                    }
+                    if(!this.curSpaceObj && this.spaceList.length > 0){
+                        this.curSpaceObj = this.spaceList[0];
+                    }
+                }
+				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
+				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				document.title = this.navbar.title;
+                console.log("该户型空间数据:", this.spaceList);
+                console.log("当前选中的空间:", this.curSpaceObj);
+				this.positionCamer(this.curSpaceObj);
+				this.loaderSpaceArr(this.spaceList);//绘制地板
+                // 获取墙体数据并且绘制墙体
+                this.getHouseTypeSpaceWalls();
+            },
+			changeSpace(spaceId){
+				console.warn("***changeSpace***",spaceId,this.spaceId)
+				if(spaceId == this.spaceId){
+					return false;
+				}
+				this.spaceId = spaceId;
+				this.curSpaceObj = this.spaceList.find(it=>it.spaceId == spaceId);
+				this.positionCamer(this.curSpaceObj,true);
+				let curSpaceArea = parseFloat((this.curSpaceObj.spaceWidth * this.curSpaceObj.spaceHeight) / 10000).toFixed(1);
+				this.navbar.title = this.curSpaceObj.spaceName + "  " + curSpaceArea + "㎡";
+				document.title = this.navbar.title;
+			},
+			// 获取墙体数据
+            async getHouseTypeSpaceWalls(){
+				let wallList = [];
+				if(this.wallList){
+					wallList = this.wallList;
+				}else{
+					let data = {id:this.wallIds}
+					const res = await requestConfig('getHouseTypeSpaceWalls', data, true);
+					// console.log("墙体数据:", res.list)
+					if(res.success){
+					    wallList = this.wallList = res.list;
+					}
+				}
+                let wallArr = []
+                for (let index = 0; index < wallList.length; index++) {//每个空间对应一个数据
+                    let element = JSON.parse(wallList[index].wallJson);
+					let space = this.spaceList.find(space=>space.spaceId==element.spaceId);
+					this.computeWallHandleOld(space,element);//提前计算
+                    for (let i = 0; i < element.wallData.length; i ++) {//对应空间里面的4个方向的墙壁数据
+                        let wallData = element.wallData[i];
+						//对应方向的墙壁的墙体模型数据列表，每一面墙可能有多个模型
+                        for (let j = 0; j < wallData.wallModelData.length; j ++) {
+                            let wallModelData = wallData.wallModelData[j];
+                            wallArr.push({spaceId:element.spaceId, wallModelData:wallModelData, wallDirection:wallData.wallDirection})
+                            // console.log("wallModelData", element,wallData.wallDirection, wallModelData.wallType );
+                        }
+                    }
+                }
+                this.loadSpaceObjWalls(wallArr, wallList);
+				this.getOverallArrangementDetailsList();//
+            },
+            // 加载单个空间墙体资源
+            async loadSpaceObjWalls(wallArr, wallList){
+                // 加载远程墙体模型资源
+				let startTime = new Date().getTime();
+                // console.log("wallArr:", wallArr)
+				let promise_list = [];
+				let realWallArr = this.preWallData(wallArr);
+				let arrLength = realWallArr.length;
+				realWallArr && realWallArr.forEach((item,index) => {
+					promise_list.push(
+						new Promise((resolve, reject) => {
+							this.loadWallModels(item, wallList, arrLength , resolve);
+						})
+					)
+				});
+				Promise.all(promise_list).then(()=>{
+					let endTime = new Date().getTime();
+					console.log("墙体模型全部加载完成，时间：",endTime - startTime);
+					// 设置空间数组的墙体信息
+					// this.setSpaceListWallInfo();
+					this.$nextTick(()=>{
+						// this.moveMeshCenter(this.curSpaceObj);
+						this.progress = 100;
+						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						this.$nextTick(()=>{
+							this.myLoadingStatus = false;
+							// this.$refs.myLoading.hideLoading();
+							// this.meshRoam(this.curSpaceObj);//开始漫游，必须先选中模型
+						})
+					})
+				})
+            },
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import "./webgl_rxdz_test_roam.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize.vue

@@ -461,7 +461,7 @@ export default {
 				id:this.id,
 			}
 			router.push({
-				name: "webgl_rxdz_look",
+				name: "webgl_rxdz_test_look",
 				query:data
 			});
 			let param = {

src/router/index.js

@@ -8,6 +8,7 @@ import webgl_rxdz from '@/pages/webgl_rxdz/webgl_rxdz.vue'
 import webgl_rxdz_roam from '@/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue'
 import webgl_rxdz_look from '@/pages/webgl_rxdz_look/webgl_rxdz_look.vue'
 import webgl_rxdz_customize from '@/pages/webgl_rxdz_customize/webgl_rxdz_customize'
+import webgl_rxdz_houseList from '@/pages/webgl_rxdz_houseList/webgl_rxdz_houseList';//空间偏好
 
 import webgl_rxdz_vr from '@/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue'
 import webgl_rxdz_720 from '@/pages/webgl_rxdz_720/webgl_rxdz_720.vue'
@@ -17,10 +18,12 @@ import webgl_rxdz_krpanoImg from '@/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpano
 import webgl_rxdz_krpano720 from '@/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720';//webgl_rxdz_krpano720
 import webgl_rxdz_krpanoclipImg from '@/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg';//webgl_rxdz_krpanoclipImg
 import webgl_rxdz_role from '@/pages/webgl_rxdz_role/webgl_rxdz_role';//角色偏好
-import webgl_rxdz_houseList from '@/pages/webgl_rxdz_houseList/webgl_rxdz_houseList';//空间偏好
+import webgl_rxdz_test_houseList from '@/pages/webgl_rxdz_test_houseList/webgl_rxdz_test_houseList';//空间偏好
 import webgl_rxdz_test from '@/pages/webgl_rxdz_test/webgl_rxdz_test';//前测-精细调整
-import webgl_rxdz_env from '@/pages/webgl_rxdz_env/webgl_rxdz_env';//前测-环境偏好
+import webgl_rxdz_test_env from '@/pages/webgl_rxdz_test_env/webgl_rxdz_test_env';//前测-环境偏好
+import webgl_rxdz_test_roam from '@/pages/webgl_rxdz_test_roam/webgl_rxdz_test_roam';//前测-环境偏好
 import webgl_rxdz_text_customize from '@/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize';//前测-结果查看
+import webgl_rxdz_test_look from '@/pages/webgl_rxdz_test_look/webgl_rxdz_test_look.vue';//前测查看具体户型
 
 Vue.use(Router)
 const router = new Router({
@@ -64,6 +67,14 @@ const router = new Router({
 				keepAlive:false
 			}
 		},
+		{
+			path: '/pages/webgl_rxdz_houseList',
+			name: 'webgl_rxdz_houseList',
+			component: webgl_rxdz_houseList,
+			meta:{
+				keepAlive:false
+			}
+		},
 		{
 			path: '/pages/mapComponent',
 			name: 'mapComponent',
@@ -137,9 +148,9 @@ const router = new Router({
 			}
 		},
 		{
-			path: '/pages/webgl_rxdz_houseList',
-			name: 'webgl_rxdz_houseList',
-			component: webgl_rxdz_houseList,
+			path: '/pages/webgl_rxdz_test_houseList',
+			name: 'webgl_rxdz_test_houseList',
+			component: webgl_rxdz_test_houseList,
 			meta:{
 				keepAlive:false
 			}
@@ -153,9 +164,9 @@ const router = new Router({
 			}
 		},
 		{
-			path: '/pages/webgl_rxdz_env',
-			name: 'webgl_rxdz_env',
-			component: webgl_rxdz_env,
+			path: '/pages/webgl_rxdz_test_env',
+			name: 'webgl_rxdz_test_env',
+			component: webgl_rxdz_test_env,
 			meta:{
 				keepAlive:false
 			}
@@ -167,7 +178,23 @@ const router = new Router({
 			meta:{
 				keepAlive:false
 			}
-		}
+		},
+		{
+			path: '/pages/webgl_rxdz_test_roam',
+			name: 'webgl_rxdz_test_roam',
+			component: webgl_rxdz_test_roam,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_test_look',
+			name: 'webgl_rxdz_test_look',
+			component: webgl_rxdz_test_look,
+			meta:{
+				keepAlive:false
+			}
+		},
     ],
 })
 // router.beforeRouteLeave = (to, from, next)=> {