迁移

src/App.vue

@@ -41,7 +41,11 @@
 					this.accountHandle()
 				}
 			})
-			this.accountHandle(true)
+			this.accountHandle(true);
+			let userId = this.$route.query.userId?this.$route.query.userId:'';
+			if(userId){//如果存在用户id
+				this.$store.dispatch('setUserId', userId);
+			}
 		},
 		watch: {
 			loading: {

src/assets/common.css

@@ -836,22 +836,6 @@ div {
     line-height: 32px;
 }
 
-.popper-class-12 .el-slider__runway{
-    height: 4px;
-    background-color: rgba(255,255,255,0.4);
-}
-
-.popper-class-12 .el-slider__bar{
-    height: 4px;
-    background-color: rgb(251, 231, 166);
-}
-
-.popper-class-12 .el-slider__button {
-    width: 12px;
-    height: 12px;
-    border: none;
-}
-
 .align-start{
     align-items: flex-start;
 }

src/components/newBottomCom/viewCareful/viewCareful.html

@@ -17,7 +17,7 @@
 					</div>
 					<div class="item-slider">
 						<el-slider style="margin:20rem 16rem" :disabled="overChange" v-model="carefulItem.area"
-							@change="sliderChange($event,carefulItem)" :step="0.1"
+							@change="sliderChange($event,index)" :step="0.1" :show-tooltip="false"
 							:min='carefulItem.minArea' :max='carefulItem.maxArea' ></el-slider>
 					</div>
 				</div>

src/components/newBottomCom/viewCareful/viewCareful.vue

@@ -1,175 +1,178 @@
-<template src="./viewCareful.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 bgLoading from "@/components/bgLoading/bgLoading.vue"
-	// import { nextTick } from "vue";
-	// const app = getApp(); //获取应用实例
-	export default {
-		data: function() {
-			return {
-				selectItem:null,
-				carefulList:[],
-				value1:1,
-			}
-		},
-		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();
-						}
-					}
-				},
-			},
-		},
-		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 = [];
-				const spaceDetail = this.curHouseObj;
-				const spaceList = JSON.parse(spaceDetail.houseJson);
-				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')){
-						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;
-					// console.warn("***carefulList-change1***", item,item.spaceType)
-					if(text && !item.isSizeLock){//楼梯不显示
-						let data = {
-							spaceId:item.spaceId,
-							index:this.carefulList.length,
-							name:text,
-							area:parseFloat(curSpaceArea),
-							percent:null,
-							minArea:parseFloat(minArea),	//最小面积
-							maxArea:parseFloat(maxArea),	//最大面积
-						}
-						this.carefulList.push(data)
-					}
-				})
-				
-				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("***viewCareful-change***", this.carefulList)
-			},
-			sliderChanging(e,item) {
-				// const wallValue = e.detail.value;
-				// item.percent = 60;
-				// console.warn("***sliderChanging***",item)
-				// this.curWallMoveValue = Math.abs(this.curWallValue - wallValue);
-			},
-			sliderChange(e,item) {
-				let value = e.detail?e.detail.value:e;
-				console.log("滑块值：", value);
-				if(this.overChange){
-					uni.showToast({
-						title: '请慢一点!',
-						icon: 'none',
-						duration: 2000
-					})
-					return false;
-				}
-				let _area = value - parseFloat(item.area);
-				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: "精细调整放大",
-					}
-				};
-				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;
-				// 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(spaceId){
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				this.$parent.$parent.goRoam1(spaceId);
-			},
-			callBack(type){
-				console.warn("***callBack***",type)
-				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-				// if(type==false){
-				// 	this.carefulList = [];
				// 	this.$nextTick(()=>{
				// 		this.initData();
				// 	})
-				// }
-				this.carefulList = [];
-				this.$nextTick(()=>{
-					this.initData();
-				})
-				this.$parent.$parent.callBackFun = null;
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-    @import "./viewCareful.scss";
-	/* @import "@/common/css/common.css"; */
-</style>
+<template src="./viewCareful.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 bgLoading from "@/components/bgLoading/bgLoading.vue"
+	// import { nextTick } from "vue";
+	// const app = getApp(); //获取应用实例
+	export default {
+		data: function() {
+			return {
+				selectItem:null,
+				carefulList:[],
+				lastCareList:[],//上一次的滑块值
+			}
+		},
+		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();
+						}
+					}
+				},
+			},
+		},
+		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);
+				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')){
+						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;
+					// console.warn("***carefulList-change1***", item,item.spaceType)
+					if(text && !item.isSizeLock){//楼梯不显示
+						let data = {
+							spaceId:item.spaceId,
+							index:this.carefulList.length,
+							name:text,
+							area:parseFloat(curSpaceArea),
+							percent:null,
+							minArea:parseFloat(minArea),	//最小面积
+							maxArea:parseFloat(maxArea),	//最大面积
+						}
+						this.carefulList.push(data);
+						this.lastCareList.push({
+							spaceId:item.spaceId,
+							index:this.carefulList.length,
+							area:parseFloat(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("***viewCareful-change***", this.carefulList)
+			},
+			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){
+					uni.showToast({
+						title: '请慢一点!',
+						icon: 'none',
+						duration: 2000
+					})
+					return false;
+				}
+				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: "精细调整放大",
+					}
+				};
+				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;
+				// 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(spaceId){
+				// var currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+				this.$parent.$parent.goRoam1(spaceId);
+			},
+			callBack(type){
+				console.warn("***callBack***",type)
+				this.$parent.$parent.callBackFun = null;//注销父页面的通知回调函数
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+    @import "./viewCareful.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/components/newBottomCom/viewMask/viewMask.html

@@ -1,14 +1,13 @@
 <!-- 覆盖层操作视图 -->
 <div class="mask-view" @touchmove.stop.prevent="catchTapEvent" @click.stop="catchTapEvent">
 	<!-- AI图片-轮播图 -->
-	<swiper v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper" :autoplay="false" :circular="false"
-	 @change="swiperChangeImg"  :current="currentIndex" :indicator-dots="false">
-		<block v-for="(item,index1) in aiImagesList" :key="index1" >
-			<swiper-item >
-				<img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;" mode="aspectFill" :src="item.image"></image>
-			</swiper-item>
-		</block>
-	</swiper>
+	<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%;" mode="aspectFill" :src="item.image"></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>
@@ -29,11 +28,11 @@
 	<!-- 右侧按钮 -->
 	<div class="btn-view columns" v-if="aiImagesList && aiImagesList.length>0">
 		<!-- 下载 -->
-		<div class="compareBtn btn1" @click.self="save" v-if="showAIImage">
+		<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" @click.self="showOrHideWebGl">
+		<div class="compareBtn" @click.stop="showOrHideWebGl">
 			<img class="compareIcon" src="https://dm.static.elab-plus.com/miniProgram/space1/compareAI_btn.png" mode="widthFix" />
 		</div>
 	</div>
@@ -72,4 +71,8 @@
 			</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/newBottomCom/viewMask/viewMask.scss

@@ -20,6 +20,9 @@
 	z-index: 12;
 	pointer-events: auto;
 }
+/deep/.el-carousel__container{
+	height:calc(100vh - 408rem);
+}
 .change-angle{
 	position: absolute;
 	width: 72rem;
@@ -132,7 +135,7 @@
 		.styleItem {
 			position: absolute;
 			width: 144rem;
-			height: 100%;
+			// height: 100%;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
@@ -292,4 +295,29 @@
 		height: 40rem;
 	}
 
+}
+.loadData{
+    min-width:110px;
+    height:110px;
+    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;
+    img{
+        width:90px;
+		margin-top: 10px;
+    }
+    .loadingMsg{
+        color: rgba(255, 255, 255, 0.83);
+        margin: 10px;
+		margin-top: 0px;
+    }
 }

src/components/newBottomCom/viewMask/viewMask.vue

@@ -3,7 +3,7 @@
 </template>
 <script>
 	const util = require('@/utils/util.js').default;
-	const config = require('@/services/urlConfig.js');
+	// const config = require('@/services/url$config.js');
 	import touchHandle from '@/mixins/touchHandle.js';
 	// import requestConfig from '@/static/lib/requestConfig';
 	// const app = getApp(); //获取应用实例
@@ -104,6 +104,8 @@
 						englishRemark: "room",
 					},
 				],
+				// myloading:false,
+				// loadingMsg:'',
 			}
 		},
 		props:{
@@ -142,12 +144,20 @@
 			console.warn("***beforeDestroy***");//更新到页面上的数据
 			this.clearInterval();
 		},
+		computed: {
+			aiData() {
+				return this.$store.state.aiData;
+			},
+			curHouseObj() {
+				return this.$store.state.curHouseObj;
+			},
+		},
 		methods:{
 			swiperChangeImg(e){
 			    console.log(e);
-				this.currentIndex = e.detail.current;
+				this.currentIndex = e.detail?e.detail.current:e;
 				this.checked = this.aiImagesList[this.currentIndex].checked;
-				console.warn("***changeAIImg***",this.checked);//更新到页面上的数据
+				console.warn("***swiperChangeImg***",this.checked);//更新到页面上的数据
 			},
 			//视角切换
 			switchActor(){
@@ -196,12 +206,7 @@
 				var _resultImg = this.aiImagesList[this.currentIndex].image;
 			    //正在选择照片，不能生效
 			    if (!_resultImg || _resultImg.length==0) {
-					// uni.showToast({
-					//     title: "请选中图片后再试!",
-					//     icon: 'none',
-					//     duration: 1500,
-					// })
-					this.$store.state.loadingMsg="请选中图片后再试";
+					this.showToast("请选中图片后再试！");
 			        return false;
 			    }
 			    let that = this;
@@ -214,28 +219,7 @@
 			        },
 			    }
 			    util.trackRequest(para);
-			    uni.getSetting({
-			        success: (response) => {
-			            console.log("***rtcroomCom.onLoad***getSetting", response)
-			            // 没有授权
-			            if (!response.authSetting['scope.writePhotosAlbum']) {
-			                console.warn("***scope.writePhotosAlbum-false***")
-			                uni.authorize({
-			                    scope: 'scope.writePhotosAlbum',
-			                    success() {
-			                        that.saveImageHandle(_resultImg);
-			                    },
-			                    fail(res) {
-			                        console.log("***scope.writePhotosAlbum***")
-			                        uni.hideLoading();
-			                    }
-			                })
-			            } else {
-			                console.log("***scope.writePhotosAlbum-ok***")
-			                that.saveImageHandle(_resultImg);
-			            }
-			        }
-			    })
+			    that.saveImageHandle(_resultImg);
 			},
 			saveImageHandle(_resultImg){
 				let param = {
@@ -253,16 +237,10 @@
 				    uni.saveImageToPhotosAlbum({
 				        filePath: _resultImg,
 				        success(result) {
-				            // uni.hideLoading();
-				            // uni.showToast({
-				            //     title: "保存成功！",
-				            //     icon: 'success',
-				            //     duration: 1500,
-				            // })
-							this.$store.state.loadingMsg="保存成功！";
+				            this.showToast("保存成功！");
 				        },
 				        fail(err) {
-				            uni.hideLoading();
+				            // uni.hideLoading();
 				        }
 				    })
 				} else { //表示该图是网络图片，需要先下载才能保存
@@ -273,21 +251,15 @@
 				            uni.saveImageToPhotosAlbum({
 				                filePath: res.tempFilePath,
 				                success(result) {
-				                    // uni.hideLoading();
-				                    // uni.showToast({
-				                    //     title: "保存成功！",
-				                    //     icon: 'success',
-				                    //     duration: 1500,
-				                    // })
-									this.$store.state.loadingMsg="保存成功！";
+									this.showToast("保存成功！");
 				                },
 				                fail(err) {
-				                    uni.hideLoading();
+				                    // uni.hideLoading();
 				                }
 				            })
 				        },
 				        fail(err) {
-				            uni.hideLoading();
+				            // uni.hideLoading();
 				        }
 				    });
 				}
@@ -295,12 +267,12 @@
 		
 			//选项变更
 			changeAIImg() {
-				let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
+				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
 				this.checked = !this.checked;//变更选项
 				this.aiImagesList[this.currentIndex].checked = this.checked;
-				console.warn("***changeAIImg***",this.checked)
-				if(lastPage){//给上一个页面回传生成的数据
-					let space = lastPage.postAIData.find(it=>{
+				console.warn("***changeAIImg***",this.checked,this.aiData)
+				if(this.aiData){//给上一个页面回传生成的数据
+					let space = this.aiData.find(it=>{
 						return it.spaceId == this.spaceObj.spaceId
 					})
 					if(space){
@@ -321,8 +293,18 @@
 					util.trackRequest(param);
 				}
 			},
+			rightScroll(){//右滑
+				if(this.currentIndex <= (this.aiImagesList.length - 1) && this.currentIndex > 0){
+					// this.currentIndex --;
+					this.$refs.carousel.prev();
+				}
+			},
 			leftScroll(){//继续生成
 				if(this.currentIndex != this.aiImagesList.length - 1){
+					if(this.currentIndex<this.aiImagesList.length - 1){
+						// this.currentIndex ++;
+						this.$refs.carousel.next();
+					}
 					return false;
 				}
 				console.log("***leftScroll***",this.currentIndex,this.aiImagesList.length)
@@ -359,6 +341,7 @@
 					clearInterval(this.img2imgTimer);
 					this.img2imgTimer = null;
 					this.random = 1;
+					// this.myloading = false;
 				}
 			},
 			//风格选择
@@ -396,23 +379,28 @@
 			
 				this.clearInterval();
 				if(!this.showAIImage){
-					// uni.showLoading({
-					// 	title: "设计中...",
-					// });
+					// this.myloading = true;
+					// this.loadingMsg = "设计中...";
+					this.$store.state.loading = true;
 					this.$store.state.loadingMsg="设计中...";
 				}
 				
 				// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
 				// this.startServer();
-				// if(type==1){//AI生成时，重新截图，继续生成时，不重新截图
-					this.$emit('hideOrShowActor','hide');//隐藏所有视角
-					let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
-					// let shottingImg = await this.$parent.shottingAction(2);//开始截图-返回的是base64
-					// shottingImg += "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//压缩图片
-					// this.shottingImg = shottingImg;
+				this.$emit('hideOrShowActor','hide');//隐藏所有视角
+				// let base64 = await this.$parent.shottingAction(2);//开始截图-返回的是base64
+				let shottingImg = await this.$parent.shottingAction();//开始截图-返回的是图片地址
+				if(!shottingImg){
+					this.showToast("渲染失败，请重试");
 					this.$emit('hideOrShowActor','show');//显示选中的视角
-				// }
-				this.changeImg2Base64(base64, false);
+					return false;
+				}
+				// ?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg //阿里OSS
+				// "?imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";//七牛云压缩图片
+				shottingImg += "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//压缩图片
+				this.shottingImg = shottingImg;
+				this.$emit('hideOrShowActor','show');//显示选中的视角
+				this.changeImg2Base64(this.shottingImg, false);
 				console.warn("***shottingImg***",this.shottingImg)
 				if(type==1){
 					let param = {
@@ -444,14 +432,41 @@
 					util.trackRequest(param);
 				}
 			},
-			changeImg2Base64(Base64Url, isRepeat) {
+			image2Base64(imgUrl) {//导入的图片路径
+				var toBase64= new Promise(function(resolve, reject){
+				    window.URL = window.URL || window.webkitURL;
+				    var xhr = new XMLHttpRequest();
+				    xhr.open("get", imgUrl, true);
+				    // 至关重要
+				    xhr.responseType = "blob";//文件流
+				    xhr.onload = function (res) {
+				        if (res.currentTarget.status == 200) {
+				            //得到一个blob对象
+				            var blob = res.currentTarget.response;
+				            // 至关重要
+				            let oFileReader = new FileReader();
+				            oFileReader.onloadend = function (e) {
+					            let base64 = e.target.result;//base64
+					            resolve(base64)
+				            };
+				            oFileReader.readAsDataURL(blob);
+				        }
+			        }
+				    xhr.send();
+			    });
+				return toBase64;
+			},
+			changeImg2Base64(url, isRepeat) {
 				var self = this;
 				if(isRepeat && self.inputBase64Url){//重复使用
 					self.startServer();
 				}else{
-					self.inputBase64Url = Base64Url;
-					console.log("生成inputBase64Url");
-					self.startServer();
+					// self.inputBase64Url = Base64Url;
+					// console.log("生成inputBase64Url");
+					this.image2Base64(url).then(base64 => {
+						self.inputBase64Url = base64;
+						self.startServer();
+					})
 					// uni.request({
 					// 	url: url,
 					// 	method: "GET",
@@ -485,8 +500,8 @@
 				}
 				let res1 = await requestConfig("AIuploadImgControlNet", data);
 				if(!res1 || !res1.single){
+					this.showToast("渲染失败，请重试");
 					this.aiFlag = false;
-					this.$store.state.loadingMsg="渲染失败，请重试";
 					this.aiImage = "";
 					return false;
 				}
@@ -502,8 +517,8 @@
 				
 				let res2 = await requestConfig("AIuploadImgControlNet", data);
 				if(!res2 || !res2.success){
+					this.showToast("渲染失败，请重试");
 					this.aiFlag = false;
-					this.$store.state.loadingMsg="渲染失败，请重试";
 					this.aiImage = "";
 					return false;
 				}
@@ -515,7 +530,7 @@
 					negativePrompt: noPromot,
 					prompt: prompt,
 					"batchSize": 1,
-					brandId: config.brandId,
+					brandId: $config.brandId,
 					height: this.imageHeight,
 					width: this.imageWidth,
 					"moduleType": "simple_and_quiet",
@@ -535,13 +550,7 @@
 				let that = this;
 				if (res.success && res.single) {
 					if(typeof(res.single)=="object"){
-						// uni.showToast({
-						// 	icon: "none",
-						// 	title: `${
-						// 		res.single.queueCount | 0
-						// 	}人排队中，预计等待${Math.round(Math.random() * 20)}秒`,
-						// });
-						this.$store.state.loadingMsg=`${res.single.queueCount | 0 }人排队中，预计等待${Math.round(Math.random() * 20)}秒`;
+						this.showToast(`${res.single.queueCount | 0}人排队中，预计等待${Math.round(Math.random() * 20)}秒`)
 						this.aiImage = "";
 						this.aiFlag = false;
 						this.clearInterval();
@@ -558,12 +567,8 @@
 					}
 				}else{
 					this.aiFlag = false;
-					// uni.showToast({
-					// 	icon: "none",
-					// 	title: "渲染失败，请重试",
-					// });
-					this.$store.state.loadingMsg="渲染失败，请重试";
 					this.aiImage = "";
+					this.showToast("渲染失败，请重试")
 				}
 			},
 			// 轮询获取图片结果
@@ -572,12 +577,12 @@
 					id: this.taskId,
 				};
 				let res = await requestConfig("generateProcess", parmas);
-				let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
+				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
 				// console.warn("图生图轮询结果：", res);
 				if (res.success && res.single) {
 					if (res.single.inQueue == false) {
 						if (res.single.urls) {
-							uni.hideLoading();
+							// uni.hideLoading();
 							this.aiFlag = false;
 							this.random = 100;
 							console.warn("图生图轮询结束: ", res);
@@ -594,9 +599,11 @@
 							if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
 								this.$parent.clearHandle();
 							}
-							if(lastPage && lastPage.postAIData){//给上一个页面回传生成的数据
-								let space = lastPage.postAIData.find(it=>{
-									return it.houseFloor == lastPage.curHouseFloor && it.spaceId == this.spaceObj.spaceId
+							// this.aiData;
+							let cpAiData = JSON.parse(JSON.stringify(this.aiData)) || []
+							if(cpAiData){//给上一个页面回传生成的数据
+								let space = cpAiData.find(it=>{
+									return it.houseFloor == this.curHouseObj.houseFloor && it.spaceId == this.spaceObj.spaceId
 								})
 								if(space){
 									let data ={
@@ -607,7 +614,7 @@
 									space.aiImagesList.push(data);
 								}else{//不存在则构建数据
 									let data = {
-										houseFloor:lastPage.curHouseFloor,//当前的楼层
+										houseFloor:this.curHouseObj.houseFloor,//当前的楼层
 										spaceId:this.spaceObj.spaceId,
 										aiImagesList:[
 											{
@@ -617,19 +624,15 @@
 											}
 										]
 									}
-									lastPage.postAIData.push(data)
+									cpAiData.push(data)
 								}
+								this.$store.dispatch('setAiData', cpAiData)
 							}
 							this.clearInterval();
 						} else {
 							if (!res.success) {
-								// uni.hideLoading();
+								this.showToast("渲染失败，请重试")
 								this.aiFlag = false;
-								// uni.showToast({
-								// 	icon: "none",
-								// 	title: "渲染失败，请重试",
-								// });
-								this.$store.state.loadingMsg="渲染失败，请重试";
 								this.aiImage = "";
 								this.clearInterval();
 							}else {
@@ -638,25 +641,28 @@
 									this.random = 99;
 								}
 								if(!this.showAIImage){
-									// uni.showLoading({
-									// 	icon: 'loading',
-									// 	title: '生成中…' + this.random + '%'
-									// })
 									this.$store.state.loadingMsg='生成中…' + this.random + '%';
+									// this.loadingMsg = '生成中…' + this.random + '%';
 								}else{
-									uni.hideLoading();
+									// this.myloading = false;
 								}
 							}
 						}
 					} else {
-						this.$store.state.loadingMsg=`${res.single.queueCount | 0}人排队中，预计等待${Math.round(Math.random() * 20)}秒`;
+						this.showToast(`${res.single.queueCount | 0}人排队中，预计等待${Math.round(Math.random() * 20)}秒`)
 						this.aiImage = "";
 						this.aiFlag = false;
 						this.clearInterval();
 					}
 				}
 			},
-			
+			showToast(title){
+				this.$store.state.loading = true;
+				this.$store.state.loadingMsg = title || "";
+				setTimeout(()=>{
+					this.$store.state.loading = false;
+				}, 1500);
+			}
 		}
 	}
 </script>

src/components/newBottomCom/viewShell/viewShell.html

@@ -1,5 +1,5 @@
 <!-- 弹出层的壳子 -->
-<div class="shell-view" :class="pageType==2?'shell-view2':''" :style="{'height':shellHeight}" @touchmove.stop="catchTouchMove">
+<div class="shell-view" :class="pageType==2?'shell-view2':''" :style="{'height':shellHeight}">
 	<!-- 楼层 -->
 	<div class="floor-view" v-if="pageType==1 && floorList&&floorList.length>1" :style="{'top':'calc( -' + floorList.length*60 + 'rem - 30rem)'}">
 		<div class="floor-item rows justify-center" :class="floorId==floor.id?'active':''" 

src/mixins/cropper.js

@@ -1,604 +0,0 @@
-// import { Toast } from "mint-ui";
-    import {adverMaterielServer} from '@/services'
-    var qiniu = require('qiniu-js');
-export default {
-    data() {
-        return {
-            callback: null,
-            // cropperFlag:true,
-            isDisable: false,
-        }
-    },
-    methods: {
-        // preview 预览图片
-        preview(type) {
-            var test = window.open('about:blank')
-            test.document.body.innerHTML = '图片生成中..'
-            if (type === 'blob') {
-                this.$refs.cropper.getCropBlob((data) => {
-                    test.location.href = window.URL.createObjectURL(data)
-                })
-            } else {
-                this.$refs.cropper.getCropData((data) => {
-                    test.location.href = data
-                })
-            }
-        },
-        uploadImgFunc(e, option, form, callback) {
-            // this.currentOption
-            // 对象合并
-            Object.assign(this.currentOption, option);
-            this.currentOption.form = form;
-            this.callback = callback;
-            // this.currentOption.Item = obj;
-            //上传图片
-            var file = e.target.files[0];
-            const isLt2M = file.size / 1024 / 1024 < this.limit;
-
-            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
-                this.$message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            if (!isLt2M) {
-                // this.$message.error('上传图片大小不能超过 ' + this.limit + 'MB!');
-                this.$message.warning('上传图片大小不能超过 ' + this.limit + 'MB!');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            this.currentOption.fileName = file.name;
-            var reader = new FileReader()
-            reader.onload = (e) => {
-                let data
-                if (typeof e.target.result === 'object') {
-                    // 把Array Buffer转化为blob 如果是base64不需要
-                    data = window.URL.createObjectURL(new Blob([e.target.result]))
-                } else {
-                    data = e.target.result
-                }
-                this.currentOption.img = data;
-                this.showCropper = true;
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-            }
-            // 转化为base64
-            // reader.readAsDataURL(file)
-            // 转化为blob
-            reader.readAsArrayBuffer(file)
-        },
-        uploadImgObj(e, option, form, obj, flag) {
-            // this.currentOption
-            // 对象合并
-            if (e.target.dataset.common == 1) {
-                this.commonFlag = true;
-            }
-            console.log("1%%%$$^*&*", this.currentOption, option)
-            Object.assign(this.currentOption, option);
-            this.currentOption.form = form;
-            this.currentOption.Item = obj;
-            console.log("2%%%$$^*&*", this.currentOption, option)
-            //上传图片
-            var file = e.target.files[0];
-            const fileSize = file.size / 1024 / 1024;
-            if (this.gifLimit && fileSize > this.gifLimit && !file.type.includes('mp4')) {
-                this.$message.warning('上传gif图片大小不能超过 ' + this.gifLimit + 'MB!');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            const isLt2M = file.size / 1024 / 1024 < this.limit;
-            if(obj == 'uploadSwipVideo'){
-                if (!/\.(MP4|mp4)$/.test(e.target.value)) {
-                    this.$message.warning('文件片类型必须是MP4');
-                    var videoForm = document.getElementById(form); //获取表单对象
-                    videoForm && videoForm.reset(); // 重置表单
-                    return false
-                }
-            }
-            else if (obj == 'includeVideo') { //可以上传视频
-                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG|MP4|mp4)$/.test(e.target.value)) {
-                    this.$message.warning('文件片类型必须是.gif,jpeg,jpg,png,bmp,MP4中的一种');
-                    var videoForm = document.getElementById(form); //获取表单对象
-                    videoForm && videoForm.reset(); // 重置表单
-                    return false
-                }
-
-            } else {
-                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
-                    this.$message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
-                    var videoForm = document.getElementById(form); //获取表单对象
-                    videoForm && videoForm.reset(); // 重置表单
-                    return false
-                }
-            }
-            if (!isLt2M && !file.type.includes('gif') && !file.type.includes('mp4')) {
-                // this.$message.error('上传图片大小不能超过 ' + this.limit + 'MB!');
-                this.$message.warning('上传图片大小不能超过 ' + this.limit + 'MB!');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            if (fileSize > 1000 && file.type.includes('mp4')) {
-                // this.$message.error('上传图片大小不能超过 ' + this.limit + 'MB!');
-                this.$message.warning('上传视频大小不能超过 ' + 10 + 'MB!');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            if ((file.type === 'image/gif' || obj == 'includeVideo' || obj == 'isOriginal' || this.operateKey ==
-                    'videoCoverUrl' || flag == 'isOriginUpload') && this.uploadMaterielFile && typeof this.uploadMaterielFile ==
-                "function") {
-                console.log('gif图,进入非剪裁')
-                var item = {};
-                item.file = file;
-                this.uploadMaterielFile(item, form, file.type.includes('mp4') ? 'video' : 'gif'); //正常上传图片
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-                return false;
-            } else {
-                console.log('进入非剪裁')
-                var item = {};
-                item.file = file;
-                this.uploadMaterielFile(item, form, file.type.includes('mp4') ? 'video' : 'gif'); //正常上传图片
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-                return false;
-            }
-            // console.log('进入剪裁')
-            // this.currentOption.fileName = file.name;
-            // var reader = new FileReader()
-            // reader.onload = (e) => {
-            //     let data
-            //     if (typeof e.target.result === 'object') {
-            //         // 把Array Buffer转化为blob 如果是base64不需要
-            //         data = window.URL.createObjectURL(new Blob([e.target.result]))
-            //     } else {
-            //         data = e.target.result
-            //     }
-            //     this.currentOption.img = data;
-            //     this.showCropper = true;
-            // }
-            // reader.readAsArrayBuffer(file)
-        },
-        uploadImg(e, option, form, staticLimit, gifLimit, obj) {
-
-            var file = e.target.files[0];
-            if (form === 'tdForm' && e.target.value.includes('gif')) {
-                this.$message.warning('图片类型不能为gif格式');
-                return false
-            }
-            if (form === 'tdForm' && file.size / 1024 / 1024 > 2) {
-                this.$message.warning('图片大小不能超过2M！');
-                return false
-            }
-            console.log("***uploadImg***");
-            var _limit = staticLimit ? staticLimit : this.limit;
-            var _giflimit = gifLimit ? gifLimit : 5; //Gif 图片的限制是5MB，产品确认的
-            const isLt2M = file.size / 1024 / 1024 < _limit;
-            const isLtGIF = file.size / 1024 / 1024 < _giflimit;
-            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG|pdf)$/.test(e.target.value)) {
-                this.$message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            if (file.type === 'image/gif') {
-                if (!isLtGIF) {
-                    this.$message.warning('上传图片大小不能超过' + _giflimit + 'MB！');
-                    var videoForm = document.getElementById(form); //获取表单对象
-                    videoForm && videoForm.reset(); // 重置表单
-                    return false
-                }
-            } else if (!isLt2M) {
-                this.$message.warning('上传图片大小不能超过 ' + _limit + 'MB!');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            Object.assign(this.currentOption, option);
-
-            // 如果是gif图片则调用正常上传不启用裁剪过程
-            if ((file.type === 'image/gif' || obj == 'isOriginal') && this.uploadMaterielFile && typeof this.uploadMaterielFile == "function") {
-                var item = {};
-                item.file = file;
-                this.uploadMaterielFile(item, form); //正常上传图片
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-                return false;
-            }
-            // Object.assign(this.currentOption, option);
-            this.currentOption.form = form;
-            this.currentOption.fileName = file.name;
-            var reader = new FileReader()
-            reader.onload = (e) => {
-                let data
-                if (typeof e.target.result === 'object') {
-                    // 把Array Buffer转化为blob 如果是base64不需要
-                    data = window.URL.createObjectURL(new Blob([e.target.result]))
-                } else {
-                    data = e.target.result
-                }
-                this.currentOption.img = data;
-                this.showCropper = true;
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-            }
-            // 转化为base64
-            // reader.readAsDataURL(file)
-            // 转化为blob
-            reader.readAsArrayBuffer(file)
-        },
-        uploadImgXMB(e, option, form, limit, obj) {
-            console.log("***uploadImg***");
-            var file = e.target.files[0];
-            var _limit = limit || 2;
-            const isLt2M = file.size / 1024 / 1024 < _limit;
-            const isLtGIF = file.size / 1024 / 1024 < _limit; //Gif 图片的限制是5MB，产品确认的
-            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
-                this.$message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            if (file.type === 'image/gif') {
-                if (!isLtGIF) {
-                    this.$message.warning('上传图片大小不能超过' + _limit + 'MB！');
-                    var videoForm = document.getElementById(form); //获取表单对象
-                    videoForm && videoForm.reset(); // 重置表单
-                    return false
-                }
-            } else if (!isLt2M) {
-                this.$message.warning('上传图片大小不能超过 ' + _limit + 'MB!');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            Object.assign(this.currentOption, option);
-            // 如果是gif图片则调用正常上传不启用裁剪过程
-            if ((file.type === 'image/gif' || obj == 'isOriginal') && this.uploadMaterielFile && typeof this.uploadMaterielFile == "function") {
-                var item = {};
-                item.file = file;
-                this.uploadMaterielFile(item, form); //正常上传图片
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-                return false;
-            }
-            // Object.assign(this.currentOption, option);
-            this.currentOption.form = form;
-            this.currentOption.fileName = file.name;
-            var reader = new FileReader()
-            reader.onload = (e) => {
-                let data
-                if (typeof e.target.result === 'object') {
-                    // 把Array Buffer转化为blob 如果是base64不需要
-                    data = window.URL.createObjectURL(new Blob([e.target.result]))
-                } else {
-                    data = e.target.result
-                }
-                this.currentOption.img = data;
-                this.showCropper = true;
-                setTimeout(()=>{
-                    cropperFlag = true; //重置状态，使得可以重新上传
-                },1000)
-            }
-            // 转化为base64
-            // reader.readAsDataURL(file)
-            // 转化为blob
-            reader.readAsArrayBuffer(file)
-        },
-        // 上传原图：obj 是 包含图片的对象，property 是obj 对象里面图片地址对应的属性key
-        async uploadObjImageFile(e, form, obj,  property) {
-            var self = this;
-            var file = e.target.files[0];
-            const isLt2M = file.size / 1024 / 1024 < this.limit;
-            const isLtVideo = file.size / 1024 / 1024 < this.videolimit; //视频 的限制是5MB
-            const isLtGIF = file.size / 1024 / 1024 < this.gifLimit; //Gif 图片的限制是5MB，产品确认的
-            if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG|mp4)$/.test(e.target.value)) {
-                this.$message.warning('类型必须是.gif,jpeg,jpg,png,mp4中的一种');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false
-            }
-            if (file.type === 'video/mp4') {
-                if (!isLtVideo) {
-                    this.$message.warning('上传文件大小不能超过' + this.videolimit + 'MB！');
-                    var videoForm = document.getElementById(form); //获取表单对象
-                    videoForm && videoForm.reset(); // 重置表单
-                    return false
-                }
-            }
-            else{
-                if (file.type === 'image/gif') {
-                    if (!isLtGIF) {
-                        this.$message.warning('上传图片大小不能超过' + this.gifLimit + 'MB！');
-                        var videoForm = document.getElementById(form); //获取表单对象
-                        videoForm && videoForm.reset(); // 重置表单
-                        return false
-                    }
-                } else if (!isLt2M) {
-                    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;
-            }
-            self.$store.state.loading = true;
-
-            var formData = new FormData();
-            formData.append("file", file);
-            let res = await requestConfig('aliyunOpenapiUploadOss', formData, false);
-            if (res.success) {
-                var imgUrl = res.single || ''
-                obj[property] = imgUrl;
-            }
-            self.$store.state.loading = false;
-            var videoForm = document.getElementById(form); //获取表单对象
-            videoForm && videoForm.reset(); // 重置表单
-        },
-        cropperUpload(type, callback) {
-            var file = "";
-            var self = this;
-            this.isDisable = true;
-            console.log("cropperFlag1:", cropperFlag);
-            if (cropperFlag == false) {
-                return false;
-            }
-            cropperFlag = false;
-            console.log("cropperFlag2:", cropperFlag);
-            // if(this.cropperFlag == true){
-            //     return this.$message.warning("请等待上传完毕,不要重复点击");
-            // }
-            // this.cropperFlag = true;
-            try {
-                if (type === 'blob') {
-                    self.$refs.cropper.getCropBlob((data) => {
-                        file = window.URL.createObjectURL(data)
-                        // console.log("***uploadProjectFile***", type, file)
-                        if (!self.callback) {
-                            self.callback = callback;
-                        }
-
-                        typeof self.callback == "function" && self.callback(file); // 执行回调函数
-                        // cropperFlag = true;
-                        self.isDisable = false;
-                    })
-                } else {
-                    self.$refs.cropper.getCropData((data) => {
-                        file = data
-                        // console.log("***uploadProjectFile***", type, file)
-                        // this.uploadProjectFile(file)
-                        if (!self.callback) {
-                            self.callback = callback;
-                        }
-
-                        typeof self.callback == "function" && self.callback(file); // 执行回调函数
-                        // cropperFlag = true;
-                        self.isDisable = false;
-                    })
-                }
-            } catch (e) {
-                this.$message.error(e.message);
-                cropperFlag = true;
-            }
-        },
-        // 关闭弹层
-        cropoerCancel(option, callback) {
-            var videoForm = document.getElementById(option.form); //获取表单对象
-            videoForm.reset(); // 重置表单
-            this.showCropper = false;
-            option.img = "";
-            callback && typeof callback == "function" && callback();
-        },
-        rotateLeft() {
-            this.$refs.cropper.rotateLeft()
-        },
-        rotateRight() {
-            this.$refs.cropper.rotateRight()
-        },
-        next(res) {},
-        // 上传七牛云发生错误
-        error(res) {
-            this.$message.error('上传失败' + res.message);
-        },
-        async uploadMaterielFile(item, form, type) {
-            if (item.file.name.length > 100) {
-                this.$message.warning('文件名过长，请不要超过100个字符');
-                var videoForm = document.getElementById(form); //获取表单对象
-                videoForm && videoForm.reset(); // 重置表单
-                return false;
-            }
-            var self = this;
-            console.log(item);
-
-            var formData = new FormData();
-            formData.append("file", item.file);
-            let imgUrl = ''
-            let res = await requestConfig('aliyunOpenapiUploadOss', formData, false);
-            if (res.success) {
-                 imgUrl = res.single || ''
-                if (self.currentOption.Item === 'iconItem') {
-                    self.area.areaTitleObj.iconStyle['background-image'] = 'url(' + imgUrl + ')'
-                } else if (self.currentOption.Item === 'uploadSwipImg') {//轮播组件的图片
-                    self.area.imagesList[self.moduleCurrentEditIndex].imageUrl = imgUrl
-                } else if (self.currentOption.Item === 'uploadSwipVideo') {//轮播组件的视频
-                    self.area.imagesList[self.moduleCurrentEditIndex].videoUrl = imgUrl
-                } else if (self.currentOption.Item === 'uploadSwipImg4') {
-                    self.area.moduleLeftList[self.moduleCurrentEditIndex].moduleStyle.imageUrl = imgUrl
-                } else if (self.currentOption.Item === 'uploadDoubleRightImg') {
-                    self.area.moduleRightList[self.moduleCurrentEditIndex].moduleStyle.imageUrl = imgUrl
-                } else if (self.currentOption.Item === 'uploadMsgIconImg') {//统一标题icon图片
-                    self.area.unifyTitleObj.iconStyle['background-image'] = 'url(' + imgUrl + ')'
-                } else if (self.currentOption.Item === 'uploadProjectIconImg') { //项目位置
-                    self.area.projectSet.iconStyle['background-image'] = 'url(' + imgUrl + ')'
-                } else if(self.currentOption.Item==='uploadTitleIconImg'){
-                    self.area.areaTitleObj.iconStyle['background-image'] = 'url('+imgUrl+')'
-                } else if (self.currentOption.Item === 'moduleTitleObjIconItem') {
-                    self.moduleView.titleObj.iconStyle['background-image'] = 'url(' + imgUrl + ')'
-                } else if (self.currentOption.Item === 'moduleTitleObjunIconItem') {
-                    self.moduleView.titleObj.iconStyle['unbackground-image'] = 'url(' + imgUrl + ')'
-                } else if (self.currentOption.Item === 'moduleIconItem') {
-                    self.moduleView.iconStyle['background-image'] = 'url(' + imgUrl + ')'
-                } else if (self.currentOption.Item === 'moduleunIconItem') {
-                    self.moduleView.iconStyle['unbackground-image'] = 'url(' + imgUrl + ')'
-                } else if (self.currentOption.Item === 'afterImageUrl') {
-                    self.moduleView.moduleStyle.afterImageUrl = imgUrl;
-                } else if (self.currentOption.Item === 'overImageUrl') {
-                    self.moduleView.moduleStyle.overImageUrl = imgUrl;
-                } else if (self.currentOption.Item === 'areaIconImageUrl') {//关闭icon配置
-                    self.area.iconStyle['background-image'] = 'url('+imgUrl+')'
-                } else if(self.currentOption.Item==='areaImageUrl'){//区域背景图
-                    self.area.areaStyle['background-image'] = 'url('+imgUrl+')'
-                } else if (self.currentOption.Item === 'includeVideo') {
-                    if (type == 'video') {
-                        self.moduleView.moduleStyle.videoUrl = imgUrl
-                    } else {
-                        self.moduleView.moduleStyle.imageUrl = imgUrl
-                    }
-                } else {
-                    console.log(self.moduleView.moduleStyle)
-                    self.moduleView.moduleStyle.imageUrl = imgUrl
-                }
-                self.$message.success('上传成功');
-            }
-            if (this.area.diyArea) {
-                this.$nextTick(() => {
-                    this.$store.state.loading = true;
-                    setTimeout(() => {
-                        let img = document.createElement("img");
-                        img.src = imgUrl;
-                        img.onload = () => {
-                            console.log("图片加载完成----", self.uploadImgs, "当前索引---", self.moduleCurrentEditIndex);
-                            if (self.uploadImgs.includes(self.moduleCurrentEditIndex)) {//当前图片已经上传
-                                self.usedIMGWidth -= self.getNum(self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.width);
-                                self.uploadImgs.splice(self.uploadImgs.indexOf(self.moduleCurrentEditIndex), 1);
-                            }
-                            let imageCount = self.uploadImgs.length;
-                            console.log("图片加载完成", imageCount);
-                            if (imageCount < self.area.moduleList.length) {
-                                if (self.area.moduleList.length === 1) {
-                                    if (img.width <= 50) {
-                                        this.area.moduleList[0].moduleStyle.width = 50 + 'px';
-                                        this.area.moduleList[0].moduleStyle.height = (parseInt(img.height * 50 / img.width)) + 'px'
-                                        this.area.areaStyle.height = (parseInt(img.height * 50 / img.width)) + 'px';
-                                    } else if (img.width > 50 && img.width <= 750) {
-                                        this.area.moduleList[0].moduleStyle.width = parseInt(img.width) + 'px';
-                                        this.area.moduleList[0].moduleStyle.height = parseInt(img.height) + 'px';
-                                        this.area.areaStyle.height = parseInt(img.height) + 'px';
-                                    } else {
-                                        this.area.moduleList[0].moduleStyle.width = 750 + 'px';
-                                        this.area.moduleList[0].moduleStyle.height = parseInt(img.height * 750 / img.width) + 'px';
-                                        this.area.areaStyle.height = parseInt(img.height * 750 / img.width) + 'px';
-                                    }
-                                } else {
-                                    let currentMaxWidth = 750 - self.usedIMGWidth - (self.area.moduleList.length - imageCount - 1) * 50;
-                                    console.log("上传图片的参数-22", "当前剩余宽度:  " + currentMaxWidth + "  宽度: " + img.width, "  高度: " + img.height, "  索引:  " + this.moduleCurrentEditIndex);
-                                    if (img.width >= currentMaxWidth) {
-                                        self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.width = currentMaxWidth + 'px';
-                                        self.usedIMGWidth += currentMaxWidth;
-                                        self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.height = (parseInt(img.height * currentMaxWidth / img.width)) + 'px';
-                                    } else {
-                                        if (img.width <= 50) {
-                                            self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.width = 50 + 'px';
-                                            self.usedIMGWidth += 50;
-                                            console.log("宽度不够最大的，小于50，-一个", self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle);
-                                            self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.height = (parseInt(img.height * 50 / img.width)) + 'px';
-                                        } else {
-                                            self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.width = parseInt(img.width) + 'px';
-                                            self.usedIMGWidth += parseInt(img.width);
-                                            console.log("宽度不够最大的，大于50，-", self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle);
-                                            self.area.moduleList[self.moduleCurrentEditIndex].moduleStyle.height = parseInt(img.height) + 'px';
-                                        }
-
-                                    }
-                                    self.area.areaStyle.height = "auto";
-                                }
-                            }
-                            this.$store.state.loading = false;
-                            if (!self.uploadImgs.includes(self.moduleCurrentEditIndex)) { //已上传中没有
-                                self.uploadImgs.push(self.moduleCurrentEditIndex); //存储已经上传的图片位置
-                            }
-                            self.area.uploadImgPositions = self.uploadImgs;
-                            self.area.usedIMGWidth = self.usedIMGWidth;
-
-                        }
-                    }, 1000)
-                })
-            }
-            var videoForm = document.getElementById(this.currentOption.form); //获取表单对象
-            videoForm && videoForm.reset();// 重置表单
-        },
-        async uploadFile(file) {
-            let data = {
-                "base64Str": file,
-            };
-            let result = await adverMaterielServer.uploadBase64(data);
-            console.log(result, 'gggggg')
-            if (result && result.data.success) {
-                if (this.currentOption.Item === 'iconItem') {
-                    this.area.areaTitleObj.iconStyle['background-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'uploadSwipImg') {
-                    this.area.imagesList[this.moduleCurrentEditIndex].imageUrl = result.data.single.filePath
-                } else if (this.currentOption.Item === 'uploadSwipImg4') {
-                    this.area.moduleLeftList[this.moduleCurrentEditIndex].moduleStyle.imageUrl = result.data.single.filePath
-                } else if (this.currentOption.Item === 'uploadDoubleRightImg') {
-                    this.area.moduleRightList[this.moduleCurrentEditIndex].moduleStyle.imageUrl = result.data.single.filePath
-                } else if (this.currentOption.Item === 'uploadMsgIconImg') {//统一标题icon图片
-                    this.area.unifyTitleObj.iconStyle['background-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'uploadProjectIconImg') {
-                    this.area.projectSet.iconStyle['background-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'uploadTitleIconImg') {
-                    this.area.areaTitleObj.iconStyle['background-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'moduleTitleObjIconItem') {
-                    this.moduleView.titleObj.iconStyle['background-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'moduleTitleObjunIconItem') {
-                    this.moduleView.titleObj.iconStyle['unbackground-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'moduleIconItem') {
-                    this.moduleView.iconStyle['background-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'moduleunIconItem') {
-                    this.moduleView.iconStyle['unbackground-image'] = 'url(' + result.data.single.filePath + ')'
-                } else if (this.currentOption.Item === 'uploadModuleImage1Form') {
-                    this.moduleView.imageStyle.imageUrl = result.data.single.filePath
-                } else if (this.currentOption.Item === 'afterImageUrl') {
-                    this.moduleView.moduleStyle.afterImageUrl = result.data.single.filePath
-                } else if (this.currentOption.Item === 'overImageUrl') {
-                    this.moduleView.moduleStyle.overImageUrl = result.data.single.filePath
-                } else {
-                    console.log(this.moduleView)
-                    this.moduleView.moduleStyle.imageUrl = result.data.single.filePath
-                }
-                if (this.area.diyArea) {
-                    let img = document.createElement("img");
-                    img.src = result.data.single.filePath;
-                    img.onload = () => {
-                        this.area.areaStyle.height = (parseInt(img.height * 750 / img.width)) + 'px'
-                        this.area.moduleList[0].moduleStyle.height = (parseInt(img.height * 750 / img.width)) + 'px'
-                    }
-                }
-                this.showCropper = false;
-                var videoForm = document.getElementById(this.currentOption.form); //获取表单对象
-                videoForm && videoForm.reset();// 重置表单
-            } else {
-                this.$message.error('图片上传失败');
-                this.showCropper = false;
-                this.currentOption.img = "";
-                var videoForm = document.getElementById(this.currentOption.form); //获取表单对象
-                videoForm && videoForm.reset();// 重置表单
-            }
-            cropperFlag = true; //重置状态，使得可以重新上传
-        },
-    }
-}

src/mixins/floorMethod.js

@@ -3,7 +3,7 @@
 // const config = require('@/services/urlConfig.js');
 // import requestConfig from '@/services/requestConfig.js';
 import * as THREE from 'three';
-import { TWEEN } from 'three/addons/libs/tween.module.js';
+import TWEEN from 'three/addons/libs/tween.module.js';
 let glbWidth = 300;//空间地板模型的真实尺寸
 let glbHeight = 300;
 export default {

src/mixins/loadModel.js

@@ -621,8 +621,7 @@ export default {
 				}
 	
 			}
-			// console.log("模型计算位置--", positionX, positionY)
-			console.log("模型计算位置", cubeInfo, centerX, centerY, spaceWidth, spaceHeight, modelWidth, modelHeight, spaceId, scaleX, scaleY, positionX, positionY)
+			// console.log("模型计算位置", cubeInfo, centerX, centerY, spaceWidth, spaceHeight, modelWidth, modelHeight, spaceId, scaleX, scaleY, positionX, positionY)
 			let oldPosition = new THREE.Vector3();//当前几何体的位置参数
 			oldPosition.copy(cube.position);
 			cube.position.x = positionX / 100;

src/mixins/screenshot.js

@@ -1,7 +1,5 @@
 // const util = require('@/static/utils/util.js');
 const config = require('@/services/urlConfig.js');
-// import requestConfig from '@/services/requestConfig.js';
-// import { GLTFLoader } from '@/webgl/jsm/loaders/GLTFLoader.js';
 export default {
 	data() {
 		return {
@@ -10,9 +8,6 @@ export default {
 	},
 	watch: {},
 	onReady() {
-		// wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec((res) => {
-		//     this.canvas2d = res[0].node
-		// })
 	},
 	methods: {
 		//触发主页面的截屏动作
@@ -118,6 +113,7 @@ export default {
 						}else{
 							this.uploadFile(imgBase64,resolve)
 						}
+						// this.uploadFile(imgBase64,resolve)
 					}					
 				})
 			})

src/mixins/touchHandle.js

@@ -49,11 +49,11 @@ export default {
         		
         	}else{//左右滑动
 				if (startX > touchMoveX && (startX - touchMoveX)>50) { //左滑
-					console.warn("***touchend***",startX - touchMoveX);
+					console.warn("***touchend-左滑***",startX - touchMoveX);
 					this.leftScroll && this.leftScroll()
 				}
 				if(touchMoveX > startX && (touchMoveX - startX)>50){//右滑
-					console.warn("***touchend***",touchMoveX - startX);
+					console.warn("***touchend-右滑***",touchMoveX - startX);
 					this.rightScroll && this.rightScroll()
 				}
         	}

src/pages/mainView/mainView.scss

@@ -41,14 +41,6 @@ canvas:focus {
 }
 canvas { width:100vw; height:calc(100vh - 200rem);z-index: 10; }
 
-page {
-    -webkit-user-select: none;
-    user-select: none;
-    width: 100%;
-	height:100vh;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
 #canvas_webgl{
 	/* background: url(resources/images/daikanyama.jpg) no-repeat center center; */
 	/* background:#6d0909;

src/pages/mainView/mainView.vue

@@ -140,7 +140,7 @@
 				console.log("当前墙体值变化", newVal, oldVal);
 			}
 		},
-		onUnload() {
+		destroyed() {
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
 			setTimeout(() => {
@@ -201,6 +201,8 @@
 			this.gradientResize = gradientResize;
 			this.moveMeshCenterHandle = moveMeshCenterHandle;
 			this.starRender = starRender;//对外暴露启动渲染的方法
+			this.cameraInit = cameraInit;
+			this.resetControl = resetControl;
 			function init() {
 
                 scene.background = new THREE.Color("#FFFFFF");
@@ -211,7 +213,6 @@
 				// let aspect = window.innerWidth /  that.canvasHeight;
 				// camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1,1000);
 				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
-				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
 				scene.add(camera);
                 that.camera = camera;
 				// 辅助方格
@@ -262,15 +263,23 @@
 				
 				// that.controls = controls;
 				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
-				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
                 // 监听
                 // renderer.domElement.addEventListener('resize', onWindowResize );
 				stats = new Stats();
 				container.appendChild( stats.dom );
 				attendEvent();	//注册监听事件
 				starRender();	//启动渲染
-				// 监听
-				window.addEventListener( 'resize', onWindowResize );
+				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 onWindowResize() {
 			    camera.aspect = window.innerWidth / that.canvasHeight;
@@ -279,6 +288,7 @@
 				console.warn("****onWindowResize**")
 			}
 			function attendEvent () {
+				window.addEventListener('resize', onWindowResize);
 				renderer.domElement.addEventListener('touchstart', onPointerStart, false);
 				renderer.domElement.addEventListener('touchmove', onPointerMove, false);
 				renderer.domElement.addEventListener('touchend', onPointerUp, false);
@@ -292,9 +302,9 @@
 			//取消事件监听-避免二次进入时触发多次事件
 			function clearEvent(){
 				console.warn("**clearEvent****")
-				renderer.domElement.removeEventListener('touchstart', onPointerStart);
-				renderer.domElement.removeEventListener('touchmove', onPointerMove );
-				renderer.domElement.removeEventListener('touchend', onPointerUp );
+				renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
 			}
 			// 手指移动开始
 			function onPointerStart(event){
@@ -308,7 +318,7 @@
 				if(that.overChange){//形变中，不能相应用户操作
 					return false;
 				}
-				// that.showLables = false;
+				that.showLables = false;
 			}
 			//触摸结束
 			function onPointerUp(event) {
@@ -317,6 +327,8 @@
 				}
 				// enableRender();
 				if(event.touches.length==0){
+					that.showLables = true;
+					updateLables();
 				}
 			}
 			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
@@ -333,8 +345,8 @@
 					console.warn("**moveMeshCenterHandle-没有数据***")
 					return false;
 				}
-				// that.showLables = false;//隐藏
-				controls.enable = false;//控制器不响应用户的操作
+				that.showLables = false;//隐藏
+				// controls.enable = false;//控制器不响应用户的操作
 			
 				let spaceObj = chooseMesh;//获取空间模型的相关数据
 				let cameraNewPosition ={};
@@ -363,6 +375,7 @@
 				tweenCamera(camera.position,controls.target,cameraNewPosition,targetNewPosition,oldUp,newUp,600);
 				setTimeout(()=>{
 					that.showLables = true;
+					updateLables();
 				},601);//动画结束后回复原始状态
 			}
 			
@@ -470,7 +483,8 @@
 					camera.updateProjectionMatrix();
 					renderer.setSize( window.innerWidth, that.canvasHeight );
 					tweenCameraAnma = false;
-
+					that.showLables = true;
+					updateLables();//更新lable
 				});
 				// 开始动画
 				tween.start();
@@ -518,7 +532,7 @@
 				//不处在动画过程中，则可以处理移动等动作
 				if(tweenCameraAnma==false){
 					controls.update();
-					updateLables();//更新lable
+					// updateLables();//更新lable
 				}
 				requestId = requestAnimationFrame(render, canvas3d);
 				renderer.render(scene, camera);//单次渲染
@@ -1529,10 +1543,8 @@
 				this.instancedFurList = [];
 				this.wallList = [];
 				//恢复初始视角
-				this.camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
-				// this.controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
-				this.camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
-				
+				this.cameraInit();
+				this.resetControl();
 				setTimeout(()=>{
 					that.loadSpace();
 				}, 100);
@@ -1697,7 +1709,7 @@
 					}
 				})
 				this.showLables = true;
-				// this.updateLables();//更新lable
+				this.updateLables();//更新lable
 			}, 
 			// 获取墙体数据
             async getHouseTypeSpaceWalls(){
@@ -2247,7 +2259,7 @@
 
 					// 是否有墙
 					const index = this.gltfWalls.findIndex(item=>{
-						console.log("墙面模型", item)
+						// console.log("墙面模型", item)
 						return spaceObj.spaceId == item.spaceId && item.wallDirection == direction;
 					})
 
@@ -2324,7 +2336,7 @@
 
 
 					const index = this.gltfWalls.findIndex(item=>{
-						console.log("墙面模型", item)
+						// console.log("墙面模型", item)
 						return spaceObj.spaceId == item.spaceId && item.wallDirection == direction;
 					})
 

src/pages/webgl_rxdz/webgl_rxdz.html

@@ -0,0 +1,27 @@
+<!-- <div class="mainView" v-if="showMainView">
+
+	<mapComponent></mapComponent>
+
+	<router-view></router-view>
+</div> -->
+<div class="map" style="position: absolute;width: 100%;height: 100vh;z-index: 1;">
+	<!-- 提交按钮 -->
+	<div class="submit-btn" @click="submitHouse">提交</div>
+	
+    <div id="mapDiv" ref="webgl"></div>
+	<canvas id="glcanvas" width="100vw" height="100vh" ref="glcanvas"
+	 :style="{'height':canvasHeight+'px'}">
+		你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
+	</canvas>
+	<!-- 主要操作视图 -->
+	<viewShell pageType="1" :overChange="overChange" :houseList="houseList" :houseObj="curHouseObj" :curHouseType="curHouseType" @curSpaceChange="curSpaceChange" @curHouseTypeChange="curHouseTypeChange" @curHouseFloorChange="curHouseFloorChange"></viewShell>
+	
+	<div v-show="showLables && gltf.text.length>0" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
+	:style="{'transform':gltf.transform}" @click="goRoam(gltf)">
+		<div v-if="styleType==2" user-select="false" :class="['number-view ',(index+1)>9?'number-more':'',currentChangeSpaceId==gltf.spaceId?' active':'']">{{gltf.spaceIndex+1}}</div>
+		<div v-else user-select="false" class="word" :class="currentChangeSpaceId==gltf.spaceId?'active':''">{{gltf.text}}></div>
+	</div>
+	<!-- <div id="labels"></div> -->
+	<!-- 左侧操作区域 -->
+	<!-- <left-operate-comp @operateHandle="operateHandle"></left-operate-comp> -->
+</div>

src/pages/webgl_rxdz/webgl_rxdz.scss

@@ -0,0 +1,191 @@
+#mapDiv{
+    width: 100%;
+    height: 100vh;
+    background-color: #fff;
+}
+.map {
+  position: relative;  /* 作为子元素的相对定位元素 */
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#labels {
+  position: absolute;  /* 把Label定位在容器内 */
+  left: 0;             /* 默认定位在左上角 */
+  top: 0;
+  color: white;
+}
+#labels>div {
+  position: absolute;  /* 让我们的容器决定尺寸 */
+  left: 0;             /* 默认定位在左上角 */
+  top: 0;
+  cursor: pointer;     /* 当悬浮时，变为一个小手 */
+  font-size:12px;
+  user-select: none;   /* 不允许文字被选中 */
+  white-space: nowrap;
+  text-shadow:         
+    -1px -1px 0 #000,
+    0   -1px 0 #000,
+    1px -1px 0 #000,
+    1px  0   0 #000,
+    1px  1px 0 #000,
+    0    1px 0 #000,
+    -1px  1px 0 #000,
+    -1px  0   0 #000;
+}
+#labels>div:hover {
+  color: red;
+}
+canvas:focus {
+  outline:none;
+}
+canvas { width:100vw; height:calc(100vh - 200rem);z-index: 10; }
+
+#canvas_webgl{
+	/* background: url(resources/images/daikanyama.jpg) no-repeat center center; */
+	/* background:#6d0909;
+	background-size: cover; */
+	/* transition: height 1s; */
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	position: absolute;
+	left:0rem;
+}
+.tran{
+	transition-timing-function: linear;
+	transition: height 1s;
+}
+.voice-mask{
+	position: fixed;
+	left:0rem;
+	top:0rem;
+	width: 100vw;
+	height:100vh;
+	z-index: 11;
+	background: rgba(0, 0, 0, 0.5);
+}
+// .btn{
+// 	position:absolute;
+// 	width:300rem;
+// 	height:132rem;
+// 	bottom:60rem;
+// 	right:30rem;
+// 	border-radius: 10rem;
+// 	opacity:1;
+// 	z-index:10000;
+// 	color:red;
+// 	display: flex;
+// 	flex-direction:row;
+// 	align-items:center;
+// 	justify-content:center;
+// 	background-color: rgba(155, 155, 155, 0.6);
+// }
+
+// .changeSizebtn {
+// 	position:absolute;
+// 	width:300rem;
+// 	height:132rem;
+// 	bottom:60rem;
+// 	left:30rem;
+// 	border-radius: 10rem;
+// 	opacity:1;
+// 	z-index:10000;
+// 	color:red;
+// 	display: flex;
+// 	flex-direction:row;
+// 	align-items:center;
+// 	justify-content:center;
+// 	background-color: rgba(155, 155, 155, 0.6);
+// }
+.canvas-view{
+	position:relative;
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}
+.word-view{
+	position: absolute; 
+	left: 0;            
+	top: 0;
+	user-select: none;  
+	z-index: 12;
+	text-align: center;
+	border-radius: 5rem;
+}
+.word{
+	font-family: "Verdana";
+	font-weight: 400;
+	height: 40rem;
+	line-height: 40rem;
+	padding:0rem 10rem;
+	border-radius: 20rem;
+	background: #fff;
+	font-size:26rem;
+	color: #1d1d1d;
+}
+.number-view{
+	width: 30rem;
+	height: 30rem;
+	line-height: 30rem;
+	background: #fff;
+	color: #121212;
+	font-weight: 700;
+	font-size: 28rem;
+	font-family: "DIN Alternate Bold";
+	border-radius: 30rem;
+}
+.number-more{
+	width: 40rem;
+	height: 40rem;
+	line-height: 40rem;
+	border-radius: 30rem;
+}
+.active{
+	background: #faad5c;
+	color: #fff;
+}
+.submit-btn{
+	position: absolute;
+	top:60rem;
+	right:20rem;
+	width: 140rem;
+	height: 64rem;
+	border-radius: 32rem;
+	backdrop-filter: blur(40rem);
+	background-color: rgba(255, 156, 56, 1);
+	font-family: "Verdana Bold";
+	font-weight: 700;
+	font-size: 28rem;
+	color: #fff;
+	text-align:center;
+	line-height:64rem;
+	z-index: 11;
+}
+.submit-btn1{
+	left:20rem;
+}
+.voice-view{
+	width: 614rem;
+	height: 312rem;
+	border-radius: 40rem;
+	background: #fff;
+	box-shadow: 0 -6rem 12rem #0000001f;
+	position: absolute;
+	left:50%;
+	top:50%;
+	transform: translate(-50%,-50%);
+	text-align:center;
+}
+.voice-tips{
+	font-size: 28rem;
+	color: rgba(36, 36, 36, 0.51);
+	margin-top:12rem;
+}
+.voice-gif{
+	width: 100%;
+	margin-top:56rem;
+}

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.html

@@ -6,41 +6,40 @@
         <!-- 图片区域 -->
         <div class="picArea">
             <div class="master-pic">
-				<swiper :autoplay="false" :circular="false" :duration="500" 
-					:indicator-dots="false"
+				<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
 					@change="swiperChangeImg" class="master-pic-swiper" 
 					:current="currImgIdx" >
-                    <swiper-item v-for="(img,s) in hardboundEffect" :key="s" :item-id="s" class="master-pic-img">
-                        <img class="master-pic-img" :src="img" mode="aspectFill"></image>
+                    <el-carousel-item v-for="(img,s) in hardboundEffect" :key="s" :item-id="s" class="master-pic-img">
+                        <img class="master-pic-img" :src="img" mode="aspectFill" />
 						<div class="lookHouseView rows justify-center" v-if="tabIndex==0 && (!shareUserId || shareUserId==userId)" @click="toMode">
 							<img class="icon-ai" src="https://dm.static.elab-plus.com/miniProgram/iconfont/icon-ai.png" mode="widthFix"/>
 							查看户型
 						</div>
                         <!-- <c-img class="master-pic-img" :style="'background-color:#fff'" :src="img" mode="aspectFill"></c-img> -->
-                    </swiper-item>
-                </swiper>
+                    </el-carousel-item>
+                </el-carousel>
 				<div class="indicator-view rows" v-if="hardboundEffect && hardboundEffect.length > 1">
 					<div class="indicator-item" :class="{'active': currImgIdx == idx}" 
 					v-for="(item, idx) in hardboundEffect" :key="idx"></div>
 				</div>
             </div>
-            <scroll-view class="tabList rows flex-start" :enable-flex="true" scroll-x :enhanced="true" :show-scrollbar="false">
+            <div class="tabList rows flex-start">
 				<div @click="changeTab(index)" class="tab-item columns" :class="{'tabActive': tabIndex == index}" 
 					v-for="(tab,index) in tabData" :key="index" >
-					<img class="tab-img" :src="tab.imgUrl" mode="aspectFill"></image>
+					<img class="tab-img" :src="tab.imgUrl" mode="aspectFill" />
 					<div class="tab-info rows rows-between">
 						<div class="eslipe">{{tab.name || '-'}}</div>
 						<div class="eslipe" v-if="tab.area">{{tab.area || '-'}}㎡</div>
 					</div>
 				</div>
-            </scroll-view>
+            </div>
         </div>
         <!-- 提交信息区域 -->
-        <div class="booking-info" :style="{'color':tabIndex==0?'#000':'#fff'}">
+        <div class="booking-info" :style="{'color':tabIndex==0?'#000':'#fff'}" v-if="layoutStruct">
 			<div class="left-line line"></div>
 			<div class="right-line line"></div>
             <div class="writingBox rows">
-                <img class="writing-img" :src="layoutStruct.houseImg || plotHeadDeafultImg"></image>
+                <img class="writing-img" :src="layoutStruct.houseImg || plotHeadDeafultImg" />
                 <div class="wiriting-right" >
                     <div class="font40 wiriting-text">{{shareUserId&&shareUserId!=userId?'':'我的'}}私人定制</div>
                     <div class="font52 wiriting-text">{{layoutStruct.houseName || ''}}</div>
@@ -79,7 +78,7 @@
 				    加企微 · 定制服务
 				</div>
 				<div class="bottom-btn btn-share rows justify-center" @click="optionChange(true)">
-					<i class="iconfont icon-Shared" style="color: #ffffff;font-size:32rpx;margin-right:20rpx;"></i>
+					<i class="iconfont icon-Shared" style="color: #ffffff;font-size:32rem;margin-right:20rem;"></i>
 				    立即分享
 				</div>
 			</div>
@@ -95,9 +94,9 @@
 	<!-- 添加企微弹出层 -->
     <!-- <div class="f-popup-bom-container" @click.stop.prevent="showPopup=false" v-show="showPopup">
 		<div class="f-popup-view">
-            <img class="closeIcon" @click="showPopup = false;" src="https://dm.static.elab-plus.com/mini-program/closeIcon.png" mode="widthFix"></image>
+            <img class="closeIcon" @click="showPopup = false;" src="https://dm.static.elab-plus.com/mini-program/closeIcon.png" mode="widthFix" />
 			<scroll-view scroll-y="true" class="f-popup-bom" @click.stop.prevent="catchEvent" :enhanced="true" :show-scrollbar="false">
-                <img mode="widthFix" :show-menu-by-longpress="true" class="qrCode" :src="enterpriseWechat"></image>
+                <img mode="widthFix" :show-menu-by-longpress="true" class="qrCode" :src="enterpriseWechat" />
             </scroll-view>
 		</div>
 	</div> -->

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.scss

@@ -4,31 +4,35 @@ page {
 }
 
 .font40{
-    font-size: 40rpx;
+    font-size: 40rem;
     // color: #fff;
 }
 .font52{
-    font-size: 52rpx;
+    font-size: 52rem;
 	font-weight: 700;
 }
 .pointerEvents{
     pointer-events: none;
 }
+/deep/.el-carousel__container{
+	height: 100%!important;
+}
 .contentBox{
     
 	position: relative;
     width: 100vw;
     overflow: hidden;
     box-sizing: border-box;
+	
     .picArea{
         position: relative;
 		width: 100%;
-		height:1100rpx;
+		height:1100rem;
         .master-pic{
             position: relative;
 			width: 100%;
-			height:930rpx;
-            // padding: 10rpx;
+			height:930rem;
+            // padding: 10rem;
             box-sizing: border-box;
             // background-color: #171717;
 			.master-pic-swiper{
@@ -39,44 +43,45 @@ page {
                 width: 100%;
                 height: 100%;
                 display: block;
+				object-fit: cover;
             }
 			.lookHouseView{
 				position: absolute;
-				left:276rpx;
-				bottom:138rpx;
-				width: 200rpx;
-				height: 76rpx;
-				border-radius: 38rpx;
+				left:276rem;
+				bottom:138rem;
+				width: 200rem;
+				height: 76rem;
+				border-radius: 38rem;
 				background: rgba(0, 0, 0, 0.4);
 				font-family: "Verdana";
 				font-weight: 400;
-				font-size: 28rpx;
+				font-size: 28rem;
 				color: #fff;
 				.icon-ai{
-					width:46rpx;
-					height:46rpx;
-					margin-right:10rpx;
+					width:46rem;
+					height:46rem;
+					margin-right:10rem;
 				}
 			}
 
 			.indicator-view{
 				position: absolute;
 				z-index: 12;
-				bottom: 100rpx;
+				bottom: 100rem;
 				left:50%;
 				transform: translateX(-50%);
 				.indicator-item{
-					width: 12rpx;
-					height: 12rpx;
+					width: 12rem;
+					height: 12rem;
 					background: #fff;
 					opacity: 0.52;
-					margin-right:6rpx;
+					margin-right:6rem;
 					border-radius: 50%;
 					&.active{
 						opacity:1;
 					}
 					&:last-child{
-						margin-right:0rpx;
+						margin-right:0rem;
 					}
 				}
 			}
@@ -85,43 +90,47 @@ page {
     .tabList{
 		position: absolute;
 		width: 100%;
-		height:246rpx;
-		bottom:0rpx;
+		height:246rem;
+		bottom:0rem;
+		overflow-x: auto;
+		overflow-y: hidden;
+		z-index: 2;
         .tab-item{
-			width:196rpx;
-            margin-right: 20rpx;
+			width:196rem;
+            margin-right: 20rem;
             font-family: "Verdana";
             font-weight: 400;
-            font-size: 24rpx;
+            font-size: 24rem;
             color: #1d1d1d;
 			text-align:center;
-			padding:2rpx;
-			// border:solid 2rpx #65574933;
-			// box-shadow: 0 4rpx 40rpx #65574933;
+			padding:2rem;
+			// border:solid 2rem #65574933;
+			// box-shadow: 0 4rem 40rem #65574933;
 			background: #ededed;
-			filter: drop-shadow(0 4rpx 40rpx #65574933);
+			filter: drop-shadow(0 4rem 40rem #65574933);
 			box-sizing: border-box;
             &.tabActive{
                 position: relative;
                 font-weight: 700;
                 color: #4d463f;
-				// border:solid 2rpx #65574933;
+				// border:solid 2rem #65574933;
 				background: rgba(254, 176, 102, 0.5);
-				filter: drop-shadow(0 4rpx 40rpx #65574933);
+				filter: drop-shadow(0 4rem 40rem #65574933);
             }
 			&:first-child{
-			    margin-left: 30rpx;;
+			    margin-left: 30rem;;
 			}
             &:last-child{
-                margin-right: 30rpx;
+                margin-right: 30rem;
             }
 			.tab-img{
-				width: 192rpx;
-				height: 200rpx;
+				width: 192rem;
+				height: 200rem;
+				object-fit: cover;
 			}
 			.tab-info{
 				width:100%;
-				padding:6rpx 10rpx;
+				padding:6rem 10rem;
 				box-sizing: border-box;
 			}
         }
@@ -129,34 +138,34 @@ page {
     .textAbout{
         font-family: "DIN Alternate Bold";
         font-weight: 700;
-        font-size: 20rpx;
+        font-size: 20rem;
         // color: rgba(255, 255, 255, 0.3);
 		opacity: 0.3;
-		margin-left:10rpx;
+		margin-left:10rem;
     }
     .booking-info{
-        margin-left: 30rpx;
-        margin-right: 30rpx;
-        margin-top: 130rpx;
-        margin-bottom: 15rpx;
+        margin-left: 30rem;
+        margin-right: 30rem;
+        margin-top: 130rem;
+        margin-bottom: 15rem;
         position: relative;
-        border: 2rpx solid rgba(255, 255, 255, 0.5);
+        border: 2rem solid rgba(255, 255, 255, 0.5);
 		border-top:none;
-        padding: 90rpx 60rpx 20rpx;
+        padding: 90rem 60rem 20rem;
 		box-sizing: border-box;
 		color: #fff;
 		.line{
 			position: absolute;
-			top:0rpx;
-			width: 100rpx;
-			height:2rpx;
+			top:0rem;
+			width: 100rem;
+			height:2rem;
 			background-color: rgba(255, 255, 255, 0.5);
 		}
 		.left-line{
-			left:0rpx;
+			left:0rem;
 		}
 		.right-line{
-			right:0rpx;
+			right:0rem;
 		}
         // .booking-info-bg{
         //     position: absolute;
@@ -166,17 +175,17 @@ page {
         //     height: unset;
         // }
         .writingBox{
-			padding:0rpx 10rpx;
-            // width: 440rpx;
+			padding:0rem 10rem;
+            // width: 440rem;
             width: max-content;
-            height: 120rpx;
+            height: 120rem;
             position: absolute;
-            // margin-top: -45rpx;
+            // margin-top: -45rem;
             // font-family: "STFangsong";
             font-weight: 400;
             
             // color: #fff;
-            top: -60rpx;
+            top: -60rem;
             box-sizing: border-box;
             left: 50%;
             transform: translate(-50%,0);
@@ -185,26 +194,26 @@ page {
 			// backdrop-filter: blur(20px);
             
             .writing-img{
-                width: 120rpx;
-                height: 120rpx;
-                min-width: 120rpx;
-                filter: drop-shadow(0 3rpx 4rpx #00000029); 
+                width: 120rem;
+                height: 120rem;
+                min-width: 120rem;
+                filter: drop-shadow(0 3rem 4rem #00000029); 
                 box-sizing: border-box;
                 border-radius: 50%;
-                border: 6rpx solid #F5F5F5;
-				margin-right:30rpx;
+                border: 6rem solid #F5F5F5;
+				margin-right:30rem;
             }
             .wiriting-right{
                 // text-align: right;
-                padding-right: 20rpx;
+                padding-right: 20rem;
                 .wiriting-text{
-                    // height: 60rpx;
+                    // height: 60rem;
                 }
             }
             
         }
         .info-bar{
-            // padding: 80rpx 50rpx 140rpx;
+            // padding: 80rem 50rem 140rem;
             display: flex;
             flex-wrap: wrap;
             
@@ -212,8 +221,8 @@ page {
                 // color: #fff;
                 width: 33.33%;
                 
-                margin-bottom: 40rpx;
-                padding-left: 10rpx;
+                margin-bottom: 40rem;
+                padding-left: 10rem;
                 box-sizing: border-box;
                 // &:nth-child(3n-1){
                 //     width: 39.66%;
@@ -229,13 +238,13 @@ page {
             .info-item-label{
                 font-family: "Verdana";
                 font-weight: 400;
-                font-size: 28rpx;
-                margin-bottom: 8rpx;
+                font-size: 28rem;
+                margin-bottom: 8rem;
             }
             .info-item-value{
                 font-family: "DIN Alternate Bold";
                 font-weight: bold;
-                font-size: 34rpx;
+                font-size: 34rem;
                 white-space: nowrap;
             }
         }
@@ -243,12 +252,12 @@ page {
 }
 .swiper-img-gs-mh {
 	width: 100vw;
-	// height: 1102rpx;
-	height: 1327rpx;
+	// height: 1102rem;
+	height: 1327rem;
 	opacity: 0.85;
 	position: absolute;
 	left: 0;
-	top:930rpx;
+	top:930rem;
 	
 	z-index: -1;
 	overflow: hidden;
@@ -263,49 +272,49 @@ page {
 .bottom-view{
     position: relative;
     width: 100%;
-	padding-top:128rpx;
-	padding-bottom:300rpx;
+	padding-top:128rem;
+	padding-bottom:300rem;
     box-sizing: border-box;
     .bottom-title{
 		font-family: "DIN Alternate Bold";
 		font-weight: 700;
-		font-size: 28rpx;
+		font-size: 28rem;
 		text-align: center;
 		color: #fff;
-		text-shadow: 0 0 8rpx rgba(0, 0, 0, 0.17);
+		text-shadow: 0 0 8rem rgba(0, 0, 0, 0.17);
 	}
 	.bottom-tips{
 		font-family: "Verdana";
 		font-weight: 400;
-		font-size: 28rpx;
-		line-height: 48rpx;
+		font-size: 28rem;
+		line-height: 48rem;
 		text-align: center;
-		margin-top:8rpx;
-		margin-bottom:40rpx;
+		margin-top:8rem;
+		margin-bottom:40rem;
 		opacity: 0.6;
 	}
     .bottom-btn{
-        width: 290rpx;
-        height: 80rpx;
-        border-radius: 40rpx;
+        width: 290rem;
+        height: 80rem;
+        border-radius: 40rem;
 		font-family: "DIN Alternate Bold";
 		font-weight: 700;
-		font-size: 28rpx;
+		font-size: 28rem;
         .bottom-subtitle{
             font-family: "DIN Alternate Bold";
             font-weight: bold;
-            font-size: 30rpx;
+            font-size: 30rem;
             white-space: nowrap;
         }
     }
 	.btn-qw{
 		background: rgba(246, 165, 83, 0.2);
 		color: #f6a553;
-		margin-right:30rpx;
+		margin-right:30rem;
 	}
     .btn-share{
         background: #f6a553;
-        box-shadow: 0 6rpx 20rpx rgba(208, 193, 168, 0.31);
+        box-shadow: 0 6rem 20rem rgba(208, 193, 168, 0.31);
 		color: #fff;
     }
 }

src/pages/webgl_rxdz_customize/webgl_rxdz_customize.vue

@@ -2,8 +2,9 @@
 </template>
 
 <script>
-const util = require('@/utils/util.js');
-const config = require('@/services/urlConfig.js');
+    const util = require('@/utils/util.js').default;
+	const config = require('@/services/urlConfig.js');
+	import router from "@/router";
 // const app = getApp(); //获取应用实例
 // import requestConfig from '@/static/lib/requestConfig.js';
 // import commonPageMethod from '@/common/commonPageMethod.js';
@@ -38,11 +39,10 @@ export default {
             houseId: config.houseIdHs,
 
             shareUserId: null, // 分享者ID
-            id: '64def992f65c6237103869a5',//方案库id
+            id: '6523d91af65c626211ee21c8',//方案库id
 
             currImgIdx:0,
             tabIndex: 0,
-            userId: '',
             // featureImgList: [],
             hardboundEffect: [],//当前swiper数据列表对象
             form: {},
@@ -57,32 +57,12 @@ export default {
     /**
      * 生命周期函数--监听页面加载
      */
-    async onLoad(options) {
-        await this.loadPromise;//等待解析分享者参数结束
+    mounted(options) {
         console.log("***onLoad-webgl_rxdz_customize***", options)
         const that = this;
-        if (options.scene) { //二维码进来
-            const data = JSON.parse(app.globalData.exchangedFromChannel);
-            if (data.houseId) {
-                that.houseId = data.houseId || this.houseId;
-            }
-            if (data.attrs.id) {
-                that.id = data.attrs.id;
-            }
-			if(data.attrs.shareUserId){
-			    this.shareUserId = data.attrs.shareUserId;
-			}
-        }else{
-            if(options.shareUserId){
-                this.shareUserId = options.shareUserId;
-            }
-            if(options.id){
-                this.id = options.id
-            }
-            if(options.houseId){
-                this.houseId = options.houseId
-            }
-        }
+        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:'6523d91af65c626211ee21c8';
 		if(!this.id){
 			uni.showToast({
 				icon: "none",
@@ -93,78 +73,23 @@ export default {
 			this.getIdData();
 		}
     },
+	computed: {
+		userId() {
+			return this.$store.state.userId;
+		},
+	},
 
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady: function () {
-		// #ifdef MP-WEIXIN
-		wx.showShareMenu({
-		    menus: ['shareAppMessage', 'shareTimeline']
-		});
-		// #endif
-    },
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-        app.login(async ()=>{
-            let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
-            if (this.houseId || app.globalData.houseId || (currPage ? currPage.houseId : '')) {
-                this.houseId = this.houseId || app.globalData.houseId || (currPage ? currPage.houseId : '');
-            }
-            if (this.userId || app.globalData.single && app.globalData.single.id) {
-                this.userId = this.userId || app.globalData.single && app.globalData.single.id
-            }
-        });
-    },
     methods: {
-		//返回处理-不同的小程序这里很可能不一样，需要注意
-		navbarBackClk() {
-            //上一个页面
-			let lastPage = getCurrentPages()[getCurrentPages().length-2] ? getCurrentPages()[getCurrentPages().length-2].$vm : null;
-			let _pvLastPagePath = lastPage ? (lastPage.route || lastPage.__route__) : '';//上一页面路径
-            //存在上一个页面，则返回上一页
-            if(_pvLastPagePath){
-				uni.navigateBack()
-            } else {
-				if(this.houseId){
-					//返回首页
-					uni.reLaunch({
-						url: '/pages/index/index',
-						success: function() {},
-						fail: function(res) {
-							console.log(res)
-						},
-					})
-				}else{
-					uni.reLaunch({
-						url: '/pages/index/index',
-						success: function() {},
-						fail: function(res) {
-							console.log(res)
-						},
-					})
-				}
-				let param = {
-					type: 'CLK', //埋点类型
-					clkId: 'clk_2cmina_23080424', //点击ID
-					clkName: 'homepage_clk', //点击前往的页面名称
-					clkParams: {
-						locusName: "返回项目首页",
-					}
-				};
-				util.trackRequest(param);
-            }
-		},
-        swiperChangeImg(e){
+		swiperChangeImg(e){
             console.log("***swiperChangeImg***",e);
-			this.currImgIdx = e.detail.current;
+			this.currImgIdx = e.detail ? e.detail.current : e;
 			this.gsImage =  this.hardboundEffect[this.currImgIdx];//获取高斯模糊的图片
         },
-        
+        navigateFuc(){
+			
+		},
         async getIdData(){
-			let userId = (app.globalData.single && app.globalData.single.id) ? app.globalData.single.id : '';
+			let userId = this.userId || '';
             let params = {
                 id: this.id,
                 brandId: config.brandId,
@@ -238,18 +163,26 @@ export default {
         },
         
         toMode(){
-            uni.navigateTo({
-                url: '/webgl/pages/webgl_rxdz_look/webgl_rxdz_look?houseId='+this.houseId,
-				success: (res)=> {
-					// 通过eventChannel向被打开页面传送数据
-					res.eventChannel.emit('acceptDataFromOpenerPage', {
-						layoutStruct:this.layoutStruct,
-					})
-				},
-				fail: function(res) {
-				    console.log(res)
-				},
-            })
+			// uni.navigateTo({
+			// 	url: '/webgl/pages/webgl_rxdz_look/webgl_rxdz_look?houseId='+this.houseId,
+			// 	success: (res)=> {
+			// 		// 通过eventChannel向被打开页面传送数据
+			// 		res.eventChannel.emit('acceptDataFromOpenerPage', {
+			// 			layoutStruct:this.layoutStruct,
+			// 		})
+			// 	},
+			// 	fail: function(res) {
+			// 		console.log(res)
+			// 	},
+			// })
+			let data = {
+				houseId:this.houseId,
+				id:this.id,
+			}
+			router.push({
+				name: "webgl_rxdz_look",
+				query:data
+			});
 			let param = {
 				type: 'CLK', //埋点类型
 				clkId: 'clk_2cmina_23080420', //点击ID

src/pages/webgl_rxdz_look/webgl_rxdz_look.html

@@ -1,17 +1,10 @@
-
-<div>
-	<!-- <mynavbar :barData='navbar'/> -->
-	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading> -->
-	<canvas id="canvas_webgl" type="webgl"
-		:disable-scroll="true"
-		@touchstart.prevent="webgl_touch"
-		@touchmove.prevent="webgl_touch"
-		@touchend.prevent="webgl_touch"
-		@touchcancel.prevent="webgl_touch">
-	</canvas>
+<!-- 模型查看页面 -->
+<div class="main-view">
+	<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}">
-		<text user-select="false">{{gltf.text}}</text>
+		:style="{'transform':gltf.transform}">
+		<span user-select="false">{{gltf.text}}</span>
 	</div>
 	<!-- 楼层 -->
 	<div class="floor-view" v-if="floorList&&floorList.length>1">
@@ -20,5 +13,4 @@
 			{{floor.houseFloor?floor.houseFloor+'F':''}}
 		</div>
 	</div>
-
 </div>

src/pages/webgl_rxdz_look/webgl_rxdz_look.css

@@ -1,6 +1,5 @@
-canvas { width:100vw; height:100vh;z-index: 10; }
 
-page {
+canvas {
     -webkit-user-select: none;
     user-select: none;
     width: 100%;
@@ -18,37 +17,36 @@ page {
 	width:100vw;
 }
 .word-view{
-	position: absolute;  /* let us position them inside the container
-	left: 0;             /* make their default position the top left of the container */
+	position: absolute;  
+	left: 0;             
 	top: 0;
-	/* cursor: pointer; */
 	font-family: "Verdana";
 	font-weight: 400;
 	color: #1d1d1d;
 	user-select: none;   /* don't let the text get selected */
 	z-index: 12;
-	font-size:26rpx;
+	font-size:26rem;
 	/* pointer-events:none; */
-	line-height: 40rpx;
-	/* width: 90rpx; */
-	height: 40rpx;
-	padding:0rpx 10rpx;
-	border-radius: 20rpx;
+	line-height: 40rem;
+	/* width: 90rem; */
+	height: 40rem;
+	padding:0rem 10rem;
+	border-radius: 20rem;
 	background: #fff;
 	text-align: center;
 }
 .floor-view{
 	position: absolute;
-	left:30rpx;
-	bottom:60rpx;
-	width: 72rpx;
-	border-radius: 12rpx;
+	left:30rem;
+	bottom:60rem;
+	width: 72rem;
+	border-radius: 12rem;
 	background: rgba(0, 0, 0, 0.4);
 	overflow: hidden;
 	z-index: 11;
 }
 .floor-item{
-	height: 60rpx;
+	height: 60rem;
 	color: #fff;
 }
 .floor-item.active{

src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -4,7 +4,7 @@
 <script>
 	import * as THREE from 'three';
 	import Stats from 'three/addons/libs/stats.module.js';
-	// import { OrbitControls } from 'three/addons/controls/OrbitControls.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';
@@ -12,7 +12,6 @@
 	var requestId = "";
     const util = require('@/utils/util.js');
     const config = require('@/services/urlConfig.js');
-    // import requestConfig from '@/static/lib/requestConfig.js';
 	import loadModel from '@/mixins/loadModel.js';
 	import wallMethod from '@/mixins/wallMethod.js';
 	import floorMethod from '@/mixins/floorMethod.js';
@@ -76,10 +75,15 @@
 				curSpaceObj:null,	//当前应该定位到的空间
             }
         },
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
         watch:{
 
         },
-		onUnload() {
+		destroyed() {
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
 			setTimeout(() => {
@@ -99,19 +103,24 @@
 			this.gltfLayouts = [];
 			this.instancedFurList = [];
 			TWEEN && TWEEN.removeAll();//清除所有的tween;
+			console.warn("***destroyed-webgl_rxdz_look***")
 		},
-        async onLoad(options) {
-			uni.hideShareMenu && uni.hideShareMenu();
+        async mounted(options) {
 			var that = this;
-			let unit = app.globalData.systemInfo.screenWidth / 750;//单位rpx 对应 px 的值
-			that.canvasHeight = window.innerHeight;
-			
-            const canvas3d = this.canvas = await document.createElementAsync("canvas","webgl")
-			//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
-			let curent = getCurrentPages()[getCurrentPages().length - 1];
-			let currUniPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
-			curent = Object.assign(curent,currUniPage);
-			let container = null, clock = null, controls = {target:{}};
+
+            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_look****",this.id,this.$route.query)
+			if(this.id){
+				this.getIdData()
+			}else{
+				this.$store.state.loadingMsg = "没有数据~";
+			}
+            let container = this.$refs.webgl;
+            let canvas3d = this.canvas = this.$refs.glcanvas;
+
+			let clock = null, controls = {target:{}};
 			let camera = null, renderer = null, mixer = null;
 
             let loader = this.loader = new GLTFLoader();
@@ -120,49 +129,28 @@
             // let mouse = new THREE.Vector2();
             let chooseMesh = this.chooseMesh;//标记鼠标拾取到的mesh
 			let isUserContorl = false;//是否进入漫游状态
-			let scaleCameraStarPY = 0;
-
-			let TouchContact = 0;	//滑动时上一次的手指数目
-			let fingerCount = 0;	//触摸时的手指数目
-			let touchStart = {		//
-				clientX: 0,
-				clientY: 0,
-				distance:0,
-			};
-			let  startTime = 0, cameraPositionY = 0;	//非漫游时的移动变量
 
+			let stats;
 			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
 
-			
-			let spherical = new THREE.Spherical();
-			let sphericalDelta = new THREE.Spherical();
-			// let panOffset = new THREE.Vector3();
-			let quat = null;
-			let quatInverse = null;//倒置的
-			let rotateStart = new THREE.Vector2();
-			let rotateEnd = new THREE.Vector2();
-			let rotateDelta = new THREE.Vector2();
-			let minPolarAngle = 0;// 默认0
-			let maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到撒旦视角。
-
+		
 			init();
-			this.$refs.myLoading.showLoading("加载中...1%")
-			this.myLoadingStatus = true;
+			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() {
-				container = document.getElementById( 'container' );
 
                 scene.background = new THREE.Color("#F2F2F2");
                 scene.environment = new THREE.Color("#F2F2F2");
 
 				// 创建相机位置
-				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / that.canvasHeight, 0.1, 10000 );
-				// camera.up.set(0, 0, -1);//俯视状态，将相机的up向量设置为z轴负方向
-				camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
+				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 10000 );
+				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
 				scene.add(camera);
                 that.camera = camera;
                 // 时间
@@ -181,9 +169,12 @@
                 light.position.set(-14.8, 9.188, -7.448); //default; light shining from top
                 scene.add(light);
 				//antialias 这个值得设置为false，不然IOS上截图会失效
-                renderer = that.renderer = new THREE.WebGLRenderer( { canvas:canvas3d, alpha: true,
+                renderer = that.renderer = new THREE.WebGLRenderer({
+					canvas:canvas3d, 
+					alpha: true,
 					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
-					preserveDrawingBuffer: true, } );
+					preserveDrawingBuffer: true,
+				});
                 renderer.outputEncoding = THREE.sRGBEncoding;
                 renderer.outputColorSpace = THREE.SRGBColorSpace;
                 // renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
@@ -191,153 +182,77 @@
                 renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
 
                 renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth, that.canvasHeight );
+                renderer.setSize( window.innerWidth, window.innerHeight );
                 container.appendChild( renderer.domElement );
 				
 
-				controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
-				that.controls = controls;
-				camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
-                // 监听
-                // window.addEventListener( 'resize', onWindowResize );
+				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
+                
+				controls = new OrbitControls(camera, renderer.domElement);
+				controls.screenSpacePanning = true;
+				controls.enableDamping = true;
+				controls.minDistance = 1;
+				controls.maxDistance = 400;
+				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;//启用摄像机的缩放
+				
+				stats = new Stats();
+				container.appendChild( stats.dom );
+				// 监听
+                window.addEventListener( 'resize', onWindowResize );
                 // raycaster = new THREE.Raycaster();
-				document.addEventListener('touchstart', onPointerStart, false);
-				document.addEventListener('touchmove', onPointerMove, false);
-				document.addEventListener('touchend', onPointerUp, false);
+				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****")
-				document.removeEventListener('touchstart', onPointerStart);
-				document.removeEventListener('touchmove', onPointerMove );
-				document.removeEventListener('touchend', onPointerUp );
-			}
-			function rotateLeft( angle ) {
-				sphericalDelta.theta -= angle;
-			}
-			
-			function rotateUp( angle ) {
-				sphericalDelta.phi -= angle;
-			}
-			//更新球坐标 这里的up向量影响到了水平滑动的效果，需要仔细研究
-			function update() {
-				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
-				const offset = new THREE.Vector3();
-				quat = new THREE.Quaternion().setFromUnitVectors( camera.up, new THREE.Vector3( 0, 1, 0 ) );
-				quatInverse = quat.clone().invert();//翻转该四元数
-				const position = camera.position;
-				// console.warn("***camera-info0***",JSON.stringify(camera.up),JSON.stringify(camera.position),JSON.stringify(quat))
-				offset.copy( position ).sub( controls.target );
-				// rotate offset to "y-axis-is-up" space
-				offset.applyQuaternion( quat );
-				// 设置球坐标的radius、phi和theta值
-				spherical.setFromVector3( offset );// 以上是构建当前状态下的摄像机和观测点之间的球坐标
-				spherical.theta += sphericalDelta.theta;
-				if(camera.isPerspectiveCamera){//透视相机
-					spherical.phi += sphericalDelta.phi;
-					// restrict phi to be between desired limits
-					spherical.phi = Math.max( minPolarAngle, Math.min( maxPolarAngle, spherical.phi ) );
-				}
-				spherical.makeSafe();
-				// spherical.radius *= 1;
-				// restrict radius to be between desired limits
-				// spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-				// controls.target.add( panOffset );
-				//以上是根据条件更新球坐标的值，然后从球坐标当中获取位置等信息
-				offset.setFromSpherical( spherical );
-				offset.applyQuaternion( quatInverse );
-				position.copy( controls.target ).add( offset );
-				camera.lookAt( controls.target );
-			
-				sphericalDelta.set( 0, 0, 0 );
-			};
-			//更新初始点
-			function touchOne(touches,event) {
-				// 只有一个手指时记录当前点的坐标作为平移起始点
-				if (isUserContorl === false) {// 非漫游状态
-					rotateStart.set( event.clientX, event.clientY );
-				}
+				renderer.domElement && renderer.domElement.removeEventListener('touchstart', onPointerStart);
+				renderer.domElement && renderer.domElement.removeEventListener('touchmove', onPointerMove );
+				renderer.domElement && renderer.domElement.removeEventListener('touchend', onPointerUp );
 			}
 			// 手指移动开始
 			function onPointerStart(event){
-				startTime = (new Date()).getTime();
-				fingerCount = event.touches.length;//手指个数
-				console.log('开始触摸事件：',fingerCount,tweenCameraAnma,isUserContorl,camera.position.y,event,event.touches)
-				if (fingerCount === 1) {
-					// 只有一个手指时记录当前点的坐标作为平移起始点
-					if (isUserContorl === false) {//非漫游模式
-						touchOne(event.touches[0],event);
-					}
-				} else {
-					// 有两个手指时记录两个点的距离和中点作为缩放起始点
-					let xMove = event.touches[1].clientX - event.touches[0].clientX;
-					let yMove = event.touches[1].clientY - event.touches[0].clientY;
-					//计算开始触发两个手指坐标的距离
-					let distance = Math.sqrt(xMove * xMove + yMove * yMove);
-					touchStart.distance = distance;
-					scaleCameraStarPY = camera.position.y;
+				console.log('开始触摸事件：',that.overChange)
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
 				}
 			}
 			//持续触摸中
 			function onPointerMove( event ) {
-				fingerCount = event.touches.length;//手指个数
-				that.showLables = false;
-				if(fingerCount==1){
-					// 当触屏，两个手指变成一个手指；此时缩放动作结束,滑动图片开始
-					if (TouchContact == 2) {//上一次滑动的触摸点个数
-					    console.warn('两个手指变成一个手指');
-					    touchOne(event.touches[0],event);
-					}else{
-						if (isUserContorl === false) {// 非漫游状态
-							rotateEnd.set( event.clientX, event.clientY );
-							rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( 1 );
-							const element = renderer.domElement;
-							rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-							rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-							rotateStart.copy( rotateEnd );
-							update();
-						}
-					}
-				} else if (fingerCount === 2) {
-					// console.warn(fingerCount,"***onPointerMove-lon***",lon)
-					//双手指运动 x移动后的坐标和y移动后的坐标
-					let xMove = event.touches[1].clientX - event.touches[0].clientX;
-					let yMove = event.touches[1].clientY - event.touches[0].clientY;
-					//双手指运动新的 ditance
-					let distance = Math.sqrt(xMove * xMove + yMove * yMove);
-					//计算移动的过程中实际移动了多少的距离
-					let distanceDiff = distance - touchStart.distance;
-					// 双手滑动得距离
-					cameraPositionY =  0.1 * distanceDiff;
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
 				}
-				TouchContact = fingerCount;
+				that.showLables = false;
 			}
 			//触摸结束
 			function onPointerUp(event) {
-				fingerCount = event.touches.length;//手指个数
-				// console.warn(fingerCount,"***onPointerUp***",startTime)
-				if(fingerCount==0){
-					let now = new Date().getTime()
-					if (Math.abs(event.clientX - rotateStart.x) < 10 
-					&& Math.abs(event.clientY - rotateStart.y) < 10 
-					&& (now - startTime) < 300 ){
-						// 点击事件-先注释
-						// checkIntersection(event);
-					}else{
-						if (isUserContorl === false) {// 非漫游状态
-						}
-					}
+				if(that.overChange){//形变中，不能相应用户操作
+					return false;
+				}
+				// enableRender();
+				if(event.touches.length==0){
 					that.showLables = true;
 					updateLables();
 				}
-				else if(fingerCount==1){//双指情况下,松开一指
-					console.warn(fingerCount,"***onPointerUp***",cameraPositionY)
-					cameraPositionY = 0;
-				}
 			}
 			//把摄像机移动的选中模型的正上方，观察点也变更为模型中心点，同时选中模型
 			function moveMeshCenterHandle(mesh = null,noChangeColor = true){
@@ -377,7 +292,7 @@
 						z:-spaceObj.centerY/100,
 					}
 					oldUp = camera.up;//俯视状态
-					newUp = camera.up
+					newUp = camera.up;
 					// that.cameraLastPosition = cameraNewPosition;//记录下上一次摄像头位置
 					// that.controlLastPosition = targetNewPosition;//记录下上一次观察点位置
 				}
@@ -387,7 +302,7 @@
 				setTimeout(()=>{
 					that.showLables = true;
 					updateLables();
-					controls.enable = true;//控制器不响应用户的操作
+					controls.enable = true;//控制器响应用户的操作
 				},601);//动画结束后回复原始状态
 			}
 			
@@ -451,9 +366,9 @@
 				tween.start();
 			}
 			function onWindowResize() {
-                camera.aspect = window.innerWidth / that.canvasHeight;
+                camera.aspect = window.innerWidth / window.innerHeight;
                 camera.updateProjectionMatrix();
-                renderer.setSize( window.innerWidth, that.canvasHeight );
+                renderer.setSize( window.innerWidth, window.innerHeight );
             }
 			//计算漫游时当前选中空间的观察点和摄像机的放置点位
 			//distance 表示要沿着视角移动的距离
@@ -472,42 +387,20 @@
 					// console.warn("***updateLables***",item.instancedAtIndex,JSON.stringify(position));
 					position.project(camera);
 					const x = (position.x *  .5 + .5) * window.innerWidth;
-					const y = (position.y * -.5 + .5) * that.canvasHeight;
+					const y = (position.y * -.5 + .5) * window.innerHeight;
 					lable.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
 				})
 			}
             function render() {
                 TWEEN && TWEEN.update();
-                if (mixer) {
-					let delta = clock.getDelta();
-                    mixer.update(delta);
-                }
+                stats.update();
 				//不处在动画过程中，则可以处理移动等动作
 				if(tweenCameraAnma==false){
-					if (isUserContorl === false ) { // 非漫游
-						if(fingerCount==2){//双指情况下
-							console.warn("***camera.isPerspectiveCamera***",scaleCameraStarPY,cameraPositionY,JSON.stringify(camera.position))
-							let _cha = scaleCameraStarPY - cameraPositionY;
-							if(_cha < 1.2){
-								_cha = 1.2;
-							}
-							if(camera.position.y!=_cha){//不等才更新camera.position
-								camera.position.set(camera.position.x, _cha, camera.position.z);
-							}
-						}
-					}
+					controls.update();
 				}
 				renderer.render(scene, camera);//单次渲染
 				requestId = requestAnimationFrame(render, canvas3d);
             }
-			
-			const eventChannel = this.getOpenerEventChannel();
-			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
-			eventChannel && eventChannel.hasOwnProperty('on') && eventChannel.on('acceptDataFromOpenerPage', (data) => {
-				console.log('监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据',data)
-				this.setHouseDetail(data)
-			})
-			
 		},
 
 		methods: {
@@ -542,22 +435,35 @@
 				this.instancedFurList = [];
 				this.wallList = [];
 				//恢复初始视角
-				this.camera.position.set(this.cameraStarPosition.x, this.cameraStarPosition.y, this.cameraStarPosition.z);
-				this.controls.target = new THREE.Vector3( this.controlStarPosition.x, this.controlStarPosition.y, this.controlStarPosition.z );;
-				this.camera.lookAt(this.controlStarPosition.x,this.controlStarPosition.y,this.controlStarPosition.z);
-				
+				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,
+			    };
+			    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.layoutStruct;
+					let curData = data;
 					this.curHouseObj = curData.layoutStruct.find(it=>it.floor==curData.curFloor);;
 					// this.spaceId = this.curHouseObj.spaceId;
 					console.warn("***curHouseObj***",this.curHouseObj)
@@ -590,7 +496,6 @@
 					if(cube.spaceName && !cube.isSizeLock){
 						this.lableItem.push(
 							{
-								// text:this.spaceTypes[cube.spaceType - 1],
 								text:cube.spaceName,
 								spaceId:cube.spaceId,
 								transform:'',
@@ -602,20 +507,6 @@
 				this.showLables = true;
 				this.updateLables();//更新lable
 			}, 
-			/**
-			 * 返回列表页
-			 */
-			backHouseList(){
-				uni.navigateBack();
-			},
-            webgl_touch(e) {
-                const web_e = Event.fix(e)
-                window.dispatchEvent(web_e)
-				let web_e2 = Object.assign(e,web_e)
-                document.dispatchEvent(web_e2)
-                this.canvas.dispatchEvent(web_e)
-				
-            },
 			//obj 物体对象，type 是否改变颜色
 			moveMeshCenter(obj,type){
 				console.warn("**moveMeshCenter***",obj)
@@ -678,18 +569,18 @@
                 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.computeWallHandle(space,element);//提前计算
+					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.loadSpaceObjWalls(wallArr, wallList);
+				this.getOverallArrangementDetailsList(2);
             },
 			// 加载单个空间墙体资源
             async loadSpaceObjWalls(wallArr, wallList){
@@ -712,22 +603,21 @@
 					this.$nextTick(()=>{
 						this.moveMeshCenter(this.curSpaceObj);
 						this.progress = 100;
-						this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						// this.$refs.myLoading.showLoading("加载中..." + this.progress + '%')
+						this.$store.state.loadingMsg="加载中..." + this.progress + '%';
 						this.$nextTick(()=>{
 							this.myLoadingStatus = false;
-							this.$refs.myLoading.hideLoading();
+							// this.$refs.myLoading.hideLoading();
 							setTimeout(()=>{
 								this.addWordLabel(); // 添加文字标签
 							}, 610);
 						})
-						// this.getOverallArrangementDetailsList();
 					})
 				})
             },
         }
     }
 </script>
-<style lang="css" scoped>
-    @import "./webgl_rxdz_look.css";
-	/* @import "@/common/css/common.css"; */
+<style lang="scss" scoped>
+    @import "./webgl_rxdz_look.scss";
 </style>

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.html

@@ -6,7 +6,7 @@
  * @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>
+<div class="main-view">
 	<!-- <mynavbar :barData='navbar'/> -->
 	<!-- 主要操作视图 -->
 	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->

src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -12,7 +12,7 @@
 	var requestId = "";
     const util = require('@/utils/util.js').default;
 	// import util from '@/utils/util.js';
-    const config = require('@/services/urlConfig.js');
+    // const config = require('@/services/urlConfig.js');
     // import requestConfig from '@/static/lib/requestConfig.js';
 	import viewShell from'@/components/newBottomCom/viewShell/viewShell.vue';
 	import viewMask from'@/components/newBottomCom/viewMask/viewMask.vue';
@@ -93,10 +93,10 @@
 				// ]
             }
         },
-		onUnload() {
+		destroyed() {
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
-			setTimeout(() => {
+			// setTimeout(() => {
 				if (this.renderer instanceof THREE.WebGLRenderer) {
 					this.renderer.dispose()
 					this.renderer.forceContextLoss()
@@ -106,7 +106,7 @@
 					this.clearHandle()
 				}
 				TWEEN && TWEEN.removeAll();//清除所有的tween;
-			}, 0)
+			// }, 0)
 		},
         mounted(options) {
 			var that = this;
@@ -138,7 +138,8 @@
 			let stats;
 			init();
 			// this.$refs.myLoading.showLoading("加载中...1%")
-			this.myLoadingStatus = true;
+			this.$store.state.loadingMsg="加载中...1%";
+			// this.myLoadingStatus = true;
 			this.progress = 1;
 			this.clearEvent = clearEvent;
 			this.attendEvent = attendEvent;
@@ -921,7 +922,7 @@
         }
     }
 </script>
-<style lang="css" scoped>
-    @import "./webgl_rxdz_roam.css";
+<style lang="scss" scoped>
+    @import "./webgl_rxdz_roam.scss";
 	/* @import "@/common/css/common.css"; */
 </style>

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 
 // import Login from '@/pages/loginView/loginView.vue'
 import mainView from '@/pages/mainView/mainView.vue'
+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'
@@ -14,13 +15,18 @@ const router = new Router({
         // 页面初始化
         {
             path: '/',
-            redirect: '/pages/mainView'
+            redirect: '/pages/webgl_rxdz'
         },
         {
             path: '/pages/mainView',
             name: 'mainView',
             component: mainView
         },
+		{
+		    path: '/pages/webgl_rxdz',
+		    name: 'webgl_rxdz',
+		    component: webgl_rxdz
+		},
         {
             path: '/pages/webgl_rxdz_roam',
             name: 'webgl_rxdz_roam',

src/services/request.js

@@ -12,7 +12,11 @@ axios.interceptors.request.use(function(config) {
 	if(config.noLoading){
 		store.dispatch('setLoading',false);//不显示loading态
 	}
-	requestCount++;//请求数+1
+	if(!config.url.includes('aiGenerateImg/getResult') &&
+	!config.url.includes('aiGenerateImg/uploadImgControlNet') &&
+	!config.url.includes('aiGenerateImg/img2Img')){
+		requestCount++;//请求数+1
+	}
 	if (config.url.includes('http')) {
 		return config;
 	} else {
@@ -36,7 +40,11 @@ axios.interceptors.request.use(function(config) {
 });
 
 axios.interceptors.response.use(function(response) {
-	requestCount = requestCount - 1;
+	if(!response.config.url.includes('aiGenerateImg/getResult') &&
+	!response.config.url.includes('aiGenerateImg/uploadImgControlNet') &&
+	!response.config.url.includes('aiGenerateImg/img2Img')){
+		requestCount = requestCount - 1;
+	}
 	if (requestCount < 1) {
 		store.state.loading = false;//不显示loading状态
 	}
@@ -44,7 +52,11 @@ axios.interceptors.response.use(function(response) {
 	return result;
 }, function(error) {
 	console.log("***error***", error, requestCount)
-	requestCount = requestCount - 1;
+	if(	!error.config.url.includes('aiGenerateImg/getResult') &&
+		!error.config.url.includes('aiGenerateImg/uploadImgControlNet') &&
+		!error.config.url.includes('aiGenerateImg/img2Img')){
+		requestCount = requestCount - 1;
+	}
 	if (requestCount < 1) {
 		store.state.loading = false;//不显示loading状态
 	}

src/services/requestConfig.js

@@ -25,12 +25,16 @@ const endpoints = {
 	// generateProcess: "elab-marketing-content/aiBeautyFamily/generateProcess",
 	getUploadToken: "elab-marketing-file/upload/getUploadToken",
 	findSpatialInfoList: "elab-marketing-file/flexible_customization/findSpatialInfoList",
-	
+	// AI生成界面
 	AIuploadImgControlNet: 'elab-marketing-content/aiGenerateImg/uploadImgControlNet', //ControlNet图片上传
 	saveCustomizedRecord: 'elab-marketing-file/space_vary/saveCustomizedRecord', //用户AI信息上传
 	getCustomizedRecord: 'elab-marketing-file/space_vary/getCustomizedRecord', //获取用户定制记录
 	deleteCustomizedRecord: 'elab-marketing-file/space_vary/deleteCustomizedRecord', //删除用户定制记录
 	chineseToPinyin: 'elab-marketing-file/tools/chineseToPinyin', //汉字转拼音
+	generateTaskImgToImgForAliyun: 'elab-marketing-content/aiGenerateImg/img2Img', // 生成识别任务-阿里云(图生图)
+	generateTaskWordToImgForAliyun: 'elab-marketing-content/aiGenerateImg/addTaskWithWord2Img', // 生成识别任务-阿里云(文生图)
+	generateProcess: 'elab-marketing-content/aiGenerateImg/getResult', // 获取任务进度-阿里云
+	shareDetail: '/elab-marketing-content/aiDreamHouse/V3.0/shareDetail', // 分享查看
 };
 window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post') => {
 	if (!endpoints.hasOwnProperty(endpoint)) {
@@ -59,13 +63,15 @@ window.requestConfig = async(endpoint, options, isHideLoading = false, preventDo
     requestOptions.url = requestOptions.path;
     // var t = Math.round(new Date());
     // requestOptions.time = t;
-
     if (!requestOptions.url.includes('/elab-marketing-user/aysn/task/byone') &&
         !requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/saleTarget/add') &&
         !requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/customer/coverPopulation') &&
         !requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/customer/intention') &&
         !requestOptions.url.includes('elab-marketing-analyse/urbanCockpit/sky_eye_marketing/getAdCreativeDraftCheckResult') &&
-        !requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/getCompareMapTotalPopulation')
+        !requestOptions.url.includes('elab-marketing-analyse/heavenlyEye/getCompareMapTotalPopulation') &&
+        !requestOptions.url.includes('aiGenerateImg/uploadImgControlNet') &&
+        !requestOptions.url.includes('aiGenerateImg/img2Img') &&
+        !requestOptions.url.includes('aiGenerateImg/getResult')
     ) {
         store.state.loading = true; //显示loading态
     }

src/services/urlConfig.js

@@ -1,7 +1,8 @@
-module.exports = function(env) {
+var config = function(env) {
     let WEB_CONF = {}
     if (env === 'test') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
             uploadUrl: 'http://101.132.138.87:5555', //文件上传
@@ -25,6 +26,7 @@ module.exports = function(env) {
         }
     } else if (env === 'test2') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
             uploadUrl: 'http://106.14.187.241:5555', //文件上传
@@ -48,6 +50,7 @@ module.exports = function(env) {
         }
     } else if (env === 'test3') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
             uploadUrl: 'http://106.14.187.241:5555', //文件上传
@@ -71,6 +74,7 @@ module.exports = function(env) {
         }
     } else if (env === 'test4') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'https://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
             uploadUrl: 'http://106.14.187.241:5555', //文件上传
@@ -94,6 +98,7 @@ module.exports = function(env) {
         }
     } else if (env === 'dev') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'http://h5test.elab-plus.com/',
             zipUrl: 'http://139.196.5.59:5307',
             uploadUrl: 'http://192.168.50.104:5555', //文件上传
@@ -117,6 +122,7 @@ module.exports = function(env) {
         }
     } else if (env === 'uat') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'https://mng-uat.elaber.cn/',
             uploadUrl: 'https://api-uat.elaber.cn', //文件上传地址
             api_url: 'https://api-uat.elaber.cn/', //堡垒 接口地址https://dm.static.elab-plus.com/Kq3t1c3IDV.txt
@@ -139,6 +145,7 @@ module.exports = function(env) {
         }
     } else if (env === 'uat3') {
         WEB_CONF = {
+			brandId: 94,
             miniAppUrl: 'https://mng-uat3.elaber.cn/',
             uploadUrl: 'https://api-uat3.elaber.cn', //文件上传地址
             api_url: 'https://api-uat3.elaber.cn/', //堡垒 接口地址https://dm.static.elab-plus.com/Kq3t1c3IDV.txt
@@ -161,6 +168,7 @@ module.exports = function(env) {
         }
     } else if (env === 'production') {
         WEB_CONF = {
+			brandId: 110,
             miniAppUrl: 'https://dm-mng.elab-plus.com.cn/',
             uploadUrl: 'https://dm-api.elab-plus.cn', //文件上传
             api_url: 'https://dm-api.elab-plus.cn/', //接口地址
@@ -184,3 +192,4 @@ module.exports = function(env) {
     }
     return WEB_CONF
 }
+module.exports = config;

src/store/actions.js

@@ -19,6 +19,16 @@ const actions = {
 	}, obj) {
 		commit('SET_CURHOUSEOBJ', obj)
 	},
+	setUserId({
+		commit
+	}, userId) {
+		commit('SET_USERID', userId)
+	},
+	setAiData({
+		commit
+	}, aiData) {
+		commit('SET_AIDATA', aiData)
+	},
 	// setCityListData({
 	// 	commit
 	// }, cityListData) {

src/store/mutations.js

@@ -11,5 +11,11 @@ const mutations = {
 	SET_CURHOUSEOBJ(state, obj) {
 		state.curHouseObj = obj
 	},
+	SET_USERID(state, userId) {
+		state.userId = userId
+	},
+	SET_AIDATA(state, aiData) {
+		state.aiData = aiData
+	},
 }
 export default mutations;

src/store/state.js

@@ -3,6 +3,8 @@ const state = {
 	currentProject: null,
 	loadingMsg:"",
 	account:null,	//账号
+	userId:'',	//用户id-小程序当中提供的
 	curHouseObj:null,
+	aiData:null,	//AI生成的数据
 }
 export default state

src/utils/common.js

@@ -21,7 +21,6 @@ const common = {
         window.poiOperate && window.poiOperate.clearPoiLayer();           //poi图层
         window.trafficOperate && window.trafficOperate.clearTrafficLayer();//交通路网图层
         window.massPointOperate && window.massPointOperate.clearMassLayer();//mass点位图层
-				this.cancelPois();
     },
 	hexToRgba(hex, opacity) {
 	    if (!hex||!opacity){

src/utils/util.js

@@ -1,4 +1,5 @@
 import { getStorage } from '@/utils/localStorage';
+window.sessionTime = new Date();
 var util = {
     reformParam(methodName,para) {
         var parameter = {}
@@ -109,6 +110,20 @@ var util = {
 		});
 		return obj;
 	},
+	formatTime(date) {
+		var year = date.getFullYear()
+		var month = date.getMonth() + 1
+		var day = date.getDate()
+		var hour = date.getHours()
+		var minute = date.getMinutes()
+		var second = date.getSeconds()
+		return [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(
+			':')
+	},
+	formatNumber(n) {
+		n = n.toString()
+		return n[1] ? n : '0' + n
+	},
 	trackRequest(para, app = null ) {
 	    if ((para.type && para.type.includes('Error'))) {
 	        //所有报错埋点以及曝光埋点不再发送至服务器
@@ -194,6 +209,7 @@ var util = {
 		return session;
 	},
 };
-
+window.from_session = util.getUrlParams(location.href).session || '';
+window.from_cookie = util.getUrlParams(location.href).cookie || '';
 export default util;
 // module.exports = util;