Просмотр исходного кода

调整定制-支持楼层,从1层开始

zjs_project недель назад: 3
Родитель
Сommit
b292b76d57

+ 4 - 4
src/components/newQCCom/viewShell/viewShell.html

@@ -1,12 +1,12 @@
 <!-- 弹出层的壳子 -->
 <div class="shell-view" :class="(styleType==2 || styleType==3)?'shell-view2':''">
 	<!-- 楼层 -->
-	<!-- <div class="floor-view" v-if="pageType==1 && floorList&&floorList.length>1">
-		<div class="floor-item rows justify-center" :class="floorId==floor.id?'active':''" 
-			v-for="(floor,index) in floorList" :key="index" @click="floorChange(floor)">
+	<div class="floor-view" v-if="floorList&&floorList.length>1">
+		<div class="floor-item rows justify-center" :class="floorIndex==index?'active':''" 
+			v-for="(floor,index) in floorList" :key="index" @click="floorChange(index)">
 			{{floor.houseFloor?floor.houseFloor+'F':''}}
 		</div>
-	</div> -->
+	</div>
 	<!-- 提示 -->
 	<!-- <div class="tips-view">
 		{{pageType==1?'点击进入空间':'单击圆点切换视角'}}

+ 37 - 29
src/components/newQCCom/viewShell/viewShell.vue

@@ -20,15 +20,15 @@
 	export default {
 		data: function() {
 			return {
-				floorList:[
-					{
-						text:'1F',
-					},
-					{
-						text:'2F',
-					}
-				],
-				floorId:0,//楼层选中的id
+				// floorList:[
+				// 	{
+				// 		text:'1F',
+				// 	},
+				// 	{
+				// 		text:'2F',
+				// 	}
+				// ],
+				floorIndex:0,//楼层选中的id
 				shellHeight:'200px',
 				isShare: false,
 				shareVideoItem:null,
@@ -49,6 +49,10 @@
 				type: [String, Number],
 				default: 1,
 			},
+            floorList: {//当前组件所在的页面类型-决定了使用哪些子组件和样式
+            	type: Array,
+            	default: [],
+            },
 			// curHouseType: {//当前选中的户型类型
 			// 	type: [String, Number],
 			// 	default: '',
@@ -160,26 +164,30 @@
 				this.showSignscoll = true;
 			},
 			//楼层切换
-			// floorChange(item){
-			// 	if(this.floorId==item.id){
-			// 		return false;
-			// 	}
-			// 	if(this.$parent.loadLayFlag){//加载家具模型中
-			// 		this.$message("加载模型中,请稍后再试");
-			// 		return false
-			// 	}
-			// 	this.floorId = item.id;
-			// 	let param = {
-			// 		type: 'CLK', //埋点类型
-			// 		clkId: 'clk_2cmina_23080410', //点击ID
-			// 		clkName: 'floorswitching_clk', //点击前往的页面名称
-			// 		clkParams: {
-			// 			locusName: "楼层切换",
-			// 		}
-			// 	};
-			// 	util.trackRequest(param);
-			// 	this.$emit("curHouseFloorChange", item);//通知页面,户型楼层发生了变更
-			// },
+			floorChange(index){
+				if(this.floorIndex==index){
+					return false;
+				}
+				if(this.$parent.overChange){//空间正在调整
+					this.$message("空间正在调整,请稍后再试");
+					return false
+				}
+                if(this.$parent.loadLayFlag){//加载家具模型中
+                	this.$message("加载模型中,请稍后再试");
+                	return false
+                }
+				this.floorIndex = index;
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_23080410', //点击ID
+					clkName: 'floorswitching_clk', //点击前往的页面名称
+					clkParams: {
+						locusName: "楼层切换",
+					}
+				};
+				util.trackRequest(param);
+				this.$emit("curHouseFloorChange", this.floorList[index]);//通知页面,户型楼层发生了变更
+			},
 			//种子户型变更-户型大类变更
 			// seedChange(item){
 			// 	console.warn("***seedChange***",item)

+ 1 - 1
src/mixins/loadModel.js

@@ -103,7 +103,7 @@ export default {
 			// this.setSpaceListWallInfo();
 			this.type = type;//加载类型,1空间加载 2 全局精简加载
 			let arr = this.spaceList.map(it => it.layoutId).filter(it => it != 0);
-            // let arr = [554]
+            // let arr = [468]
 			let parmas = {
 				ids: arr,
 			};

+ 2 - 2
src/pages/webgl_rxdz_test/webgl_rxdz_test.html

@@ -25,8 +25,8 @@
 		你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
 	</canvas>
 	<!-- 主要操作视图 -->
-	<viewShell ref="viewShell" pageType="1" :overChange="overChange" :houseObj="curHouseObj" 
-	@curSpaceChange="curSpaceChange"></viewShell>
+	<viewShell ref="viewShell" pageType="1" :overChange="overChange" :houseObj="curHouseObj" :floorList="floorList"
+	@curSpaceChange="curSpaceChange" @curHouseFloorChange="curHouseFloorChange"></viewShell>
 	<!-- @click="goRoam(gltf)" -->
 	<div v-show="showLables && gltf.text.length>0 && gltf.transform" v-for="(gltf,index) in lableItem" :key="index" class="word-view"
 	:style="{'transform':gltf.transform}" >

+ 77 - 34
src/pages/webgl_rxdz_test/webgl_rxdz_test.vue

@@ -135,6 +135,7 @@
 				layoutArea:0,	//总面积
 				selectSpace:null,//
 				changeStatus:false,
+                floorList:[],
                 // selectIndex:'',
 			}
 		},
@@ -748,12 +749,14 @@
                     pageNo: 1,
                     pageSize: 2000,
                 };
+                
                 if(location.href.indexOf("//dm-mng.elab-plus.cn/screen/space-customiz") != -1){//生产环境
-                    parmas.ids = this.ueId ? [this.ueId] : [245];
+                    parmas.ids = this.ueId ? this.ueId.split(',') : [245];
                 }else{
-                    parmas.ids = this.ueId ? [this.ueId] : [286];
+                    parmas.ids = this.ueId ? this.ueId.split(',') : [286];
                 }
                 let res = await requestConfig("findHouseTypeSpaceListByIds", parmas);
+                this.floorList = [];
                 if (res.success && res.list) {
                     let list = res.list || [];
                     list && list.forEach((item, index) => {
@@ -777,13 +780,83 @@
                                 }
                             }
                             item.houseJson = JSON.stringify(spaceList);
+                            this.floorList.push({
+                                id:item.id,
+                                houseFloor:(index+1),
+                            })
                             console.log("户型详情列表: ", spaceList);
                         }
                     })
-                    this.curHouseObj = res.list[0];
+                    this.houseList = list;
+                    this.curHouseObj = list[0];
                     setStorage('curHouseObj', this.curHouseObj);
                     this.houseInit();
                 }
+            },
+            //当前户型初始化
+            houseInit(item){
+            	this.gltfWalls = [];
+            	this.gltfSpaces = [];
+            	this.gltfSpaceRoofs = [];
+            	this.instancedMeshList = [];
+            	this.instancedSpaceMeshList = [];
+            	this.lableItem = [];
+            	this.gltfLayouts = [];
+            	this.instancedFurList = [];
+            	this.wallList = [];
+            	this.changeArea = 0;
+            	// this.cameraInit();
+            	this.resetControl();
+            	setTimeout(()=>{
+            		this.loadSpace();
+            	}, 100);
+            	console.warn("***curHouseObj***",this.curHouseObj,this.aiData)
+            	// this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡";
+            	this.navbar.title = "空间定制";
+            	document.title = this.navbar.title;
+            	this.sumArea = this.curHouseObj.houseArea;
+            	this.fixedArea = this.curHouseObj.houseArea;
+            	this.curHouseName = this.curHouseObj.name;
+            	if(this.curHouseObj.houseArea<=100){//面积小于100平米,则摄像头靠近一点
+            		this.cameraStarPosition.y = 20;
+            	}else if(this.curHouseObj.houseArea>100){
+            		this.cameraStarPosition.y = 30;
+            	}
+            	this.cameraInit();
+            },
+            //户型楼层发生了变更
+            curHouseFloorChange(item){
+                let that = this;
+                if(!item || !item.id){
+                    return false;
+                }
+                let _curHouseObj = this.houseList.find(it=>it.id==item.id);
+                if(!_curHouseObj){
+                    console.warn("***curHouseFloorChange-nodeta***",this.houseList,item)
+                    return false
+                }
+            	// 遍历场景中的所有子对象,找到类型为Mesh的对象并移除
+            	let deleList = that.scene && that.scene.children.filter(object=>{
+            		if(object.userType=="mesh" || object.userType=="layoutMesh"){
+            			return object
+            		}
+            	})
+            	// console.warn("***deleList***",deleList)
+            	if(deleList && deleList.length>0){
+            		that.showLables = false;//隐藏lable
+            		that.scene.remove(...deleList);
+            	}
+            	
+                
+                this.curHouseObj = _curHouseObj;
+                setStorage('curHouseObj', this.curHouseObj);
+                this.houseInit();
+            	//恢复初始视角
+            	// this.cameraInit();
+            	// this.resetControl();
+            	console.warn("***curHouseFloorChange***",this.curHouseObj,item)
+            	// this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡";
+            	
             },
 			voiceMaskChange(voiceMask){
 				this.voiceMaskShow = voiceMask;
@@ -1711,37 +1784,7 @@
 				this.currentChangeSpaceId = null;//变化结束后
 				console.warn("***curLayoutStruct-updataPageData***",this.changeArea,this.sumArea,this.curHouseFloor,this.curHouseObj)
 			},
-			//当前户型初始化
-			houseInit(item){
-				this.gltfWalls = [];
-				this.gltfSpaces = [];
-				this.gltfSpaceRoofs = [];
-				this.instancedMeshList = [];
-				this.instancedSpaceMeshList = [];
-				this.lableItem = [];
-				this.gltfLayouts = [];
-				this.instancedFurList = [];
-				this.wallList = [];
-				this.changeArea = 0;
-				// this.cameraInit();
-				this.resetControl();
-				setTimeout(()=>{
-					this.loadSpace();
-				}, 100);
-				console.warn("***curHouseObj***",this.curHouseObj,this.aiData)
-				// this.navbar.title = this.curHouseObj.name + "  " + this.curHouseObj.houseArea + "㎡";
-				this.navbar.title = "空间定制";
-				document.title = this.navbar.title;
-				this.sumArea = this.curHouseObj.houseArea;
-				this.fixedArea = this.curHouseObj.houseArea;
-				this.curHouseName = this.curHouseObj.name;
-				if(this.curHouseObj.houseArea<=100){//面积小于100平米,则摄像头靠近一点
-					this.cameraStarPosition.y = 20;
-				}else if(this.curHouseObj.houseArea>100){
-					this.cameraStarPosition.y = 30;
-				}
-				this.cameraInit();
-			},
+			
 			
 			onMouseMove(e){
 				return false;