优化

src/components/contrastImg/contrastImg.html

@@ -0,0 +1,24 @@
+<div :style="cStyle" class="containView" @click="clickHandle">
+    <!-- @touchmove.stop.prevent="clear" -->
+    <!-- 原图加载 :class="{swiperAni:needAni}" -->
+    <div class="clip-view" :style="{'clip':'rect(0, auto, auto,'+ translateX +'px)'}">
+        <img :src="leftSrc" class="self" :mode="mode"></img>
+    </div>
+    <!-- 切换按钮 -->
+    <div class="compareBtn" v-if="leftSrc && type=='1' && leftSrc!=rightSrc" @click.stop="compareAction">
+        <img class="icon"
+               src="https://dm.static.elab-plus.com/aiBeauty/aiBeauty2/icon_compare.png" mode="aspectFit">
+        </img>
+    </div>
+    <!-- 拖拽线-->
+    <div class="move-view" v-if="showSwiper">
+        <div class="line-view" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @touchend.stop="touchend"
+             :style="{'transform':'translateX(' + translateX + 'px)'}">
+            <div class="line"></div>
+            <img class="block-view" src="https://dm.static.elab-plus.com/miniProgram/move-icon.png"
+                   mode="aspectFit"></img>
+        </div>
+    </div>
+    <!-- 模板图 -->
+    <!-- <image :src="rightSrc" class="templateImg" :mode="mode"/> -->
+</div>

src/components/contrastImg/contrastImg.scss

@@ -0,0 +1,94 @@
+
+.self {
+	width: 100%;
+	height: 100%;
+}
+
+
+.containView {
+	position: relative;
+	font-size: 0rpx;
+	width: 100%;
+	height: 100%;
+    top: 0px;
+    left:0px;
+	.clip-view{
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		width: 100%;
+		height: 100%;
+		will-change: clip;
+		user-select: none;
+	}
+}
+
+.compareBtn {
+	bottom: 15px;
+	right: 15px;
+	z-index: 30;
+	position: absolute;
+	width: 36px;
+	height: 36px;
+	background-color: rgba($color: #000000, $alpha: 0.5);
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.icon {
+		width: 20.8px;
+		height: 22px;
+	}
+}
+
+.move-view{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	z-index: 29;
+	background-color: transparent;
+	.line-view{
+		position: absolute;
+		top: 0rpx;
+		// left: calc(50% - 86rpx);
+		left: -43px;
+		// transform: translateX(-50%);
+		width:86px;
+		height:100%;
+		background-color: transparent;
+		.line{
+			position: absolute;
+			width:1px;
+			top: 0px;
+			left: 50%;
+			transform: translateX(-50%);
+			height:100%;
+			background-color: #fff;
+		}
+		.block-view{
+			position: absolute;
+			width:86px;
+			height:86px;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%,-50%);
+		}
+	}
+}
+.swiperAni{
+	// transition:transform 0.5s;
+	transition:clip 0.5s;
+}
+.templateImg{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	z-index: -1;
+	transform:translateX(0px);
+	background: linear-gradient(180.00deg, #d9d9d9 0%, #f4f4f4 100%);
+}

src/components/contrastImg/contrastImg.vue

@@ -0,0 +1,189 @@
+<template src="./contrastImg.html">
+
+</template>
+<script>
+    export default {
+        name: "contrastImg",
+        props: {
+            leftSrc: {
+                type: String,
+                default: '',
+            },
+            rightSrc: {
+                type: String,
+                default: '',
+            },
+            cStyle: {
+                type: String,
+                default: '',
+            },
+            mode: {
+                type: String,
+                default: 'aspectFill',
+            },
+            type: {
+                type: String,
+                default: '1',
+            },
+            modelType: {
+                type: String,
+                default: '1',
+            }
+        },
+        data() {
+            return {
+                loaded: false,
+                loadNum: 1, //尝试加载次数
+                thumbLoaded: false,
+                newUrl: '',
+                // typeCompressString:"imageMogr2/auto-orient/thumbnail/200x200/blur/1x0/quality/75",
+                typeString: "imageMogr2/auto-orient/format/webp/blur/1x0/quality/75",
+                showSwiper: false, //是否显示切换视图状态,默认不显示
+                unit: 1,
+                translateX: 0, //原图左右移动距离
+                startX: 0,
+                lastX: 0, //上一次的距离
+                needAni: false, //回弹动画是否需要
+                width: window.innerWidth,
+            }
+        },
+        mounted() { //生命周期不要更换,此处逻辑必须是创建时处理
+            this.newUrl = this.webpImage(this.rightSrc);
+            // var str = "width: 688rpx;height: 340rpx;";
+            let startWidth = window.innerWidth;
+            var match = this.cStyle.match(/width:\s*(\d+px)/);
+            if (match) {
+                this.width = parseFloat(match[1])
+            } else {
+                console.log("未找到匹配的width属性值");
+                this.width = startWidth;
+            }
+            // this.translateX = this.width;
+            if (this.type == '2') { //直接进入拉伸状态
+                this.translateX = this.width / 2;
+                this.showSwiper = true;
+            }
+        },
+        methods: {
+            touchstart(e) {
+                this.lastX = e.changedTouches[0].clientX;
+                this.startX = e.changedTouches[0].clientX;
+                // let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+                // if(currPage && currPage.hasOwnProperty('contrastAutoPlay')){
+                //   currPage.contrastAutoPlay = false;
+                // }
+            },
+            touchmove(e) {
+                let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标
+                let moveX = (touchMoveX - this.lastX) * this.unit; //相对于上一次偏移的距离-转为rpx单位
+                this.translateX = Number(this.translateX) + moveX;
+                if (this.translateX < 0) {
+                    this.translateX = 0;
+                } else if (this.translateX > this.width) {
+                    this.translateX = this.width;
+                }
+                this.lastX = touchMoveX;
+            },
+            touchend(e) {
+                // let touchMoveX = e.changedTouches[0].clientX; //滑动变化坐标
+                // if(touchMoveX == this.startX){//释放时的坐标和开始时一致，表示点击行为
+                // 	console.warn("***clickHandle***")
+                // 	this.$emit('clickHandle');
+                // }
+                // let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
+                // if(currPage && currPage.hasOwnProperty('contrastAutoPlay')){
+                //   currPage.contrastAutoPlay = true;
+                // }
+            },
+            catchTouchMove: function() {
+                return false;
+            },
+            clear(e) {
+                // TODO nvue 取消冒泡
+                e.stopPropagation()
+            },
+            clickHandle(e) {
+                this.$emit('clickHandle');
+                // let leftDistance = 0; // 获取组件距离屏幕左边的距离
+                // 获取当前点击的组件信息
+                // const query = uni.createSelectorQuery().in(this);
+                // query.select('.containView').boundingClientRect(data => {
+                //     if (data) {
+                //         leftDistance = data.left; // 获取组件距离屏幕左边的距离-单位px
+                //         console.log('组件距离屏幕左边的距离：', leftDistance);
+                //         console.warn("***clickHandle***",e,this.translateX,leftDistance)
+                //         let pointX = e.detail.x - leftDistance;
+                //         let position = "left";
+                //         if(pointX < (this.translateX/2)){//点击的是左边
+                //           position = "left";
+                //         }else{//点击的是右边
+                //           position = "right"; 
+                //         }
+                //         this.$emit('clickHandle',{position});
+                //     }
+                // }).exec();
+
+            },
+            compareAction() {
+                this.showSwiper = !this.showSwiper;
+                if (this.showSwiper) { //显示
+                    this.needAni = true;
+                    this.$nextTick(() => {
+                        this.translateX = this.width / 2;
+                    })
+                    // 动画结束后，清除动画的class，确保不影响滑动效果
+                    setTimeout(() => {
+                        this.needAni = false;
+                    }, 510);
+                } else {
+                    this.needAni = true;
+                    this.$nextTick(() => {
+                        this.translateX = 0;
+                    })
+                    // 动画结束后，清除动画的class，确保不影响滑动效果
+                    setTimeout(() => {
+                        this.needAni = false;
+                    }, 510);
+                }
+                this.$emit('compareAction', this.showSwiper)
+            },
+            // 获取无损压缩图-webp格式
+            webpImage(url) {
+                let result = url;
+                if (result.indexOf('https://elab-marketing-web.oss') != -1) {
+                    this.typeString = "x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";
+                } else if (result.indexOf('https://dm.static') != -1) {
+                    this.typeString = "imageMogr2/auto-orient/format/webp/blur/1x0/quality/75";
+                }
+                if (result) {
+                    if (this.typeString) {
+                        if (result.indexOf('?') > -1) {
+                            return result + "&" + this.typeString;
+                        } else {
+                            return result + "?" + this.typeString;
+                        }
+                    } else {
+                        return result
+                    }
+                } else {
+                    return ""
+                }
+            },
+            //加载失败,重复三次
+            errorLoad(e) {
+                this.loadNum++;
+                if (this.loadNum > 3) {
+                    return false;
+                }
+                console.log(e);
+                let random = Math.random();
+                this.error = true;
+                // this.src = this.src + (this.src.indexOf('?') > -1 ? '&' + random : '?' + random);
+                console.warn("***errorLoad***", this.src);
+            },
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import "./contrastImg.scss";
+</style>

src/components/newBottomCom/viewMask/viewMask.vue

@@ -590,6 +590,7 @@
 						clkName: 'AIcreate_clk', //点击前往的页面名称
 						clkParams: {
 							locusName: "AI生成",
+                            locusValue:shottingImg,
 							userparamter:{
 								shottingImg:this.shottingImg,
 								style:this.styleList[this.curStyleIndex].styleName
@@ -604,6 +605,7 @@
 						clkName: 'continueAIcreate_clk', //点击前往的页面名称
 						clkParams: {
 							locusName: "继续生成",
+                            locusValue:shottingImg,
 							userparamter:{
 								shottingImg:this.shottingImg,
 								style:this.styleList[this.curStyleIndex].styleName
@@ -1044,6 +1046,16 @@
 						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
 					}, 1000);
 				}
+                let param = {
+                    type: 'CLK', //埋点类型
+                    clkId: 'clk_2cmina_2025052301', //点击ID
+                    clkName: 'ai_picture_result', //点击前往的页面名称
+                    behaviorName:"图片生成结果",
+                    clkParams: {
+                        locusValue: resultImg
+                    }
+                };
+                util.trackRequest(param);
 			},
 			//空间数据整理
 			spaceAIHandle(){

src/components/newQCCom/viewMask/viewMask.html

@@ -2,20 +2,37 @@
 <div class="mask-view" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
 	<!-- AI图片-轮播图 -->
 	<el-carousel v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper" 
-	:autoplay="false" :loop="false" ref="carousel" indicator-position="none"
-	 @change="swiperChangeImg" :initial-index="currentIndex" :indicator-dots="false">
+	:autoplay="false" :loop="false" ref="carousel" indicator-position="none" arrow="always"
+    :interval="interval" :duration="duration"
+	@change="swiperChangeImg" :initial-index="currentIndex">
 		<el-carousel-item v-for="(item,index1) in aiImagesList" :key="index1" >
-			<!-- <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image> -->
-			<el-image 
-				@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
-				@click="previewAction"
-			    style="width:100%;height:100%;cursor:none;"
-			    :src="item.image"
-				fit='cover'
-			    >
-			</el-image>
+            <!-- <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width:100%;height:100%;object-fit: cover;" mode="aspectFill" :src="item.image"></image> -->
+            <!-- <el-image 
+            	@touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend"
+            	@click="previewAction"
+                style="width:100%;height:100%;cursor:none;"
+                :src="item.image"
+            	fit='cover'
+                >
+            </el-image> -->
+            <div @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width: 100%;height:100%">
+               <contrastImg c-style="width:100%;height:100%;overflow: hidden;" type="2" :leftSrc="item.image"></contrastImg> 
+            </div>
+            
 		</el-carousel-item>
 	</el-carousel>
+    <!-- <mt-swipe v-if="aiImagesList && aiImagesList.length>0" v-show="showAIImage" class="swiper"
+     :continuous="false" ref="carousel" :showIndicators="false" 
+    :speed="duration" :auto="0"
+    @change="swiperChangeImg" :defaultIndex="currentIndex">
+    	<mt-swipe-item v-for="(item,index1) in aiImagesList" :key="index1" >
+    		
+            <div @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" style="width: 100%;height:100%">
+               <contrastImg c-style="width:100%;height:100%;overflow: hidden;" type="2" :leftSrc="item.image"></contrastImg> 
+            </div>
+            
+    	</mt-swipe-item>
+    </mt-swipe> -->
 	<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>

src/components/newQCCom/viewMask/viewMask.vue

@@ -12,10 +12,12 @@
 		setStorage,
 		getStorage,
 	} from '@/utils/localStorage';
+    import contrastImg from'@/components/contrastImg/contrastImg.vue';
 	// import requestConfig from '@/static/lib/requestConfig';
 	// const app = getApp(); //获取应用实例
 	export default {
 		mixins: [touchHandle],
+        components:{contrastImg},
 		data: function() {
 			return {
 				currentIndex:0,	//当前看到的图片序号
@@ -169,6 +171,8 @@
 				curSpaceId:'',
                 queryObj:null,
                 form:null,
+                interval:3000,
+                duration:500,
 			}
 		},
 		props:{
@@ -319,6 +323,20 @@
 			//切换空间
 			changeSpace(item){
 				this.$parent.changeSpace(item.spaceId);
+                //已经生成的AI图片中找到切换到的空间
+                let _spaceIndex = this.aiImagesList.findIndex(it=>it.spaceId==item.spaceId);
+                this.showAIImage = false;//隐藏
+                console.warn("***changeSpace123***",_spaceIndex);//
+                if(_spaceIndex != -1){//存在，则显示AI图
+                    // this.currentIndex = _spaceIndex;
+                    setTimeout(()=>{
+                        this.showAIImage = true;
+                        this.$refs.carousel.setActiveItem(_spaceIndex);//切换到具体的一张
+                        this.$forceUpdate();
+                    },2000)
+                }else{
+                    this.showAIImage = false;//没有，则隐藏
+                }
 				let param = {
 					type: 'CLK', //埋点类型
 					clkId: 'clk_2cmina_23080417', //点击ID
@@ -548,7 +566,8 @@
 				// const spaceName = this.spaceTypes[this.spaceObj.spaceType - 1].title;
 				let res = await requestConfig("getHardboundEffects", {
 					// "houseId": this.$route.query.houseId || this.$store.state.houseId,
-					"spaceType": this.spaceObj.layoutSpaceType || this.spaceObj.spaceType,
+					// "spaceType": this.spaceObj.layoutSpaceType || this.spaceObj.spaceType,
+					"spaceType": 2,
 					"spaceName": this.spaceObj.layoutSpaceName || this.spaceObj.spaceName,
 				});
 				this.styleList = [];
@@ -619,6 +638,7 @@
 						clkName: 'AIcreate_clk', //点击前往的页面名称
 						clkParams: {
 							locusName: "AI生成",
+                            locusValue:shottingImg,
 							userparamter:{
 								shottingImg:this.shottingImg,
 								style:this.styleList[this.curStyleIndex].styleName
@@ -633,6 +653,7 @@
 						clkName: 'continueAIcreate_clk', //点击前往的页面名称
 						clkParams: {
 							locusName: "继续生成",
+                            locusValue:shottingImg,
 							userparamter:{
 								shottingImg:this.shottingImg,
 								style:this.styleList[this.curStyleIndex].styleName
@@ -754,6 +775,7 @@
 				this.curSpaceId = this.spaceObj.spaceId;//生成时的空间id
 				let result = await this.prevHandle(parmas);
 				console.warn("***prevHandle***",result)
+                // result = "https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1748419217691.png"
 				if(result && result.length>0){
 					this.randomHandle(result)
 					return false;
@@ -1063,7 +1085,9 @@
 					spaceId:this.curSpaceId,//记录下当前生成的AI图是哪个空间的，因为会切换空间
 				}
 				this.aiImagesList.push(_data);
-				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
+                this.$nextTick(()=>{
+                    this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
+                })
 				if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
 					this.$parent.clearHandle();
 				}
@@ -1073,6 +1097,16 @@
 						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
 					}, 1000);
 				}
+                let param = {
+                    type: 'CLK', //埋点类型
+                    clkId: 'clk_2cmina_2025052301', //点击ID
+                    clkName: 'ai_picture_result', //点击前往的页面名称
+                    behaviorName:"图片生成结果",
+                    clkParams: {
+                        locusValue: resultImg
+                    }
+                };
+                util.trackRequest(param);
 			},
 			//空间数据整理
 			spaceAIHandle(){

src/pages/webgl_rxdz_test/webgl_rxdz_test.html

@@ -35,6 +35,9 @@
 		<!-- 更改功能按钮 -->
 		<!-- <div class="change-view rows justify-center" @click="enterPlot(gltf)" v-if="selectSpace && selectSpace.spaceId==gltf.spaceId">更改功能</div> -->
 	</div>
+    <!-- <contrastImg c-style="width: 100%;height: 500px;overflow: hidden;position: absolute;"
+        mode="aspectFill"  type="2" leftSrc="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1748401728858.png"
+        ></contrastImg> -->
 	<!-- <div id="labels"></div> -->
 	<!-- 左侧操作区域 -->
 	<!-- <left-operate-comp @operateHandle="operateHandle"></left-operate-comp> -->

src/pages/webgl_rxdz_test/webgl_rxdz_test.vue

@@ -25,6 +25,7 @@
 	import loadModel from '@/mixins/loadModel.js';
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
 	import viewShell from'@/components/newQCCom/viewShell/viewShell.vue';
+	// import contrastImg from'@/components/contrastImg/contrastImg.vue';
 	export default {
 		name:"webgl_rxdz",
 		components:{viewShell},