h5-webgl-program/src/components/newBottomCom/viewCareful/viewCareful.vue

<template src="./viewCareful.html">

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