fix

2024-09-06 13:48:16 +08:00
parent 4301c4051a
commit 4e2d3d672c
7 changed files with 388 additions and 156 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -152,8 +152,8 @@

                <div class="design_detail_perview_content" >
                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
-					<setDesignItem v-if="!moible" ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
-					<setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile>
+					<setDesignItem ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
+					<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
                </div>

            </div>
@@ -179,7 +179,6 @@ import { Modal,message } from 'ant-design-vue';
 import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
-import GO from '@/tool/GO';
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import { useI18n } from 'vue-i18n'
 import addDetails from '@/component/Detail/addDetails.vue'
@@ -463,7 +462,8 @@ export default defineComponent({
 					DesignDetailAlter.terminate()
 					// this.designItemDetail = {}
 					this.frontBack = {}
-					let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+					let setDesignItem:any = this.$refs.setDesignItem
+					// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
 					setDesignItem.clear()
 				}
                
@@ -471,7 +471,7 @@ export default defineComponent({
            }else{
                this.designShowPrview = 1;
 				this.frontBack = {}
-				let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+				let setDesignItem:any = this.$refs.setDesignItem
 				setDesignItem.clear()
 				// this.designItemDetailUrl = {}
            }
@@ -794,7 +794,7 @@ export default defineComponent({
 			return data
 		},
 		async setSubmit(str:any){
-			let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+			let setDesignItem:any = this.$refs.setDesignItem
 			let data = this.setSubmitItem(str,true)
            this.loadingShow = true
 			await setDesignItem.setPreview(data)
@@ -895,7 +895,7 @@ export default defineComponent({
        showDesignImgDetail(num:any){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			this.designShowPrview = num
-			let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+			let setDesignItem:any = this.$refs.setDesignItem
 			if(this.designShowPrview == 3){
 				setDesignItem.setImgSize()
 			}else if(this.designShowPrview == 2){
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -19,19 +19,19 @@
 					@click="setpitch(item,index)" ref="content" >
 					<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false"> 
 				</div> -->
-				<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
+				<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
 					<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
 				</div>
 				<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
-				<div class="detail_modal_item_front" v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)"  :style="item.style">
+				<div class="detail_modal_item_front" v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
 					<img :src="item.imageUrl" alt="">
 				</div>
 				<div class="designOpenrtion_btn">
-					<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
-						<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
-						<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
-						<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
-						<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
+					<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
+						<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('top',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('left',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('right',getMousePosition($event,true))"></li>
 						<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
 					</ul>
 				</div>
@@ -54,7 +54,7 @@ import { useStore } from "vuex";
 // import { Modal,message } from 'ant-design-vue';
 import { Https } from "@/tool/https";
 import editFrontBack from '@/component/Detail/editFrontBack.vue'
-
+import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
    // props: ["frontBack"],
 	emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
@@ -108,6 +108,7 @@ export default defineComponent({
 			setRevocation,
 			frontBackOld,
 			editFrontBack,
+			getMousePosition,
        };
    },
    data() {
@@ -273,8 +274,12 @@ export default defineComponent({
 			let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
 			this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
 			this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
-			document.addEventListener("mouseup", this.mouseup);
-			document.addEventListener("mousemove", this.moveMousemove);
+			// document.addEventListener("mouseup", this.mouseup);
+			// document.addEventListener("mousemove", this.moveMousemove);
+			document.addEventListener('mousemove', this.mouseMove);
+			document.addEventListener('touchmove', this.touchmove);
+			document.addEventListener('mouseup', this.mouseup);
+			document.addEventListener('touchend', this.mouseup);
 		},
 		//设置尺寸
 		itemSizeMousedown(direction,event){
@@ -291,15 +296,25 @@ export default defineComponent({
 				this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
 			}
 			
-			document.addEventListener("mouseup", this.sizeMouseup);
-			document.addEventListener("mousemove", this.sizeMousemove);
+			document.addEventListener('mousemove', this.sizeMouseMove);
+			document.addEventListener('touchmove', this.sizeTouchmove);
+			document.addEventListener('mouseup', this.sizeMouseup);
+			document.addEventListener('touchend', this.sizeMouseup);
+		},
+		mouseMove(event){
+			let e = getMousePosition(event,false)
+			this.mouseMoveOperation(e)
+		},
+		touchmove(event){
+			let e = getMousePosition(event,true)
+			this.mouseMoveOperation(e)
 		},
 		//鼠标移动
-		moveMousemove(e) {
+		mouseMoveOperation(e) {
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
-			let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
-			let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
+			let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
+			let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
 			this.frontBack.front[this.imgDomIndex].style.left = x
 			this.frontBack.front[this.imgDomIndex].style.top = y
 			// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
@@ -315,8 +330,15 @@ export default defineComponent({
 			// 	this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
 			// }
 		},
-
-		sizeMousemove(e) {
+		sizeMouseMove(event){
+			let e = getMousePosition(event,false)
+			this.sizeMouseMoveOperation(e)
+		},
+		sizeTouchmove(event){
+			let e = getMousePosition(event,true)
+			this.sizeMouseMoveOperation(e)
+		},
+		sizeMouseMoveOperation(e) {
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode =this.imgDom.parentNode
 			let width = imgDomWH.width
@@ -325,8 +347,8 @@ export default defineComponent({
 			let num = height/width
 			//判断移动四个边
 			if(this.direction == 'right'){
-				w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
-				h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
+				w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
+				h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
 				width = w+'px'
 				// height = w*num+'px'
 			}else if(this.direction == 'top'){
@@ -334,20 +356,20 @@ export default defineComponent({
 				this.frontBack.front[this.imgDomIndex].style.top = 'auto'
 				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
 				this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
-				h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
+				w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
+				h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
 				
 				height = h+'px'
 				// width = h*num+'px'
 			}else if(this.direction == 'bottom'){
 				num = width/height
-				h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
+				h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
 				height = h+'px'
 				// width = h*num+'px'
 			}else if(this.direction == 'left'){
 				this.frontBack.front[this.imgDomIndex].style.left = 'auto'
 				this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
-				w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
+				w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
 				
 				width = w+'px'
 				// height = w*num+'px'
@@ -369,13 +391,19 @@ export default defineComponent({
 				zIndex:this.printZIndex
 			}
 			this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
-			document.removeEventListener("mouseup", this.sizeMouseup);
-			document.removeEventListener("mousemove", this.sizeMousemove);
+			document.removeEventListener('mousemove',this.sizeMouseMove)
+			document.removeEventListener('touchmove',this.sizeTouchmove)
+			document.removeEventListener('mouseup',this.sizeMouseup) 
+			document.removeEventListener('touchend',this.sizeMouseup) 
 		},
 		mouseup(e) {

-			document.removeEventListener("mouseup", this.mouseup);
-			document.removeEventListener("mousemove", this.moveMousemove);
+			// document.removeEventListener("mouseup", this.mouseup);
+			// document.removeEventListener("mousemove", this.moveMousemove);
+			document.removeEventListener('mousemove',this.mouseMove)
+			document.removeEventListener('touchmove',this.touchmove)
+			document.removeEventListener('mouseup',this.mouseup) 
+			document.removeEventListener('touchend',this.mouseup) 
 		},
 		clearModal(){
 			this.printZIndex = 2//点击图片z-index
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -430,11 +430,16 @@ export default defineComponent({

        async changeTemplateModal() {
 			if(this.modalImg[0]?.id){
-				let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
-				// layout.init('moodboard')
+				// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
+				let layout:any = this.$refs.layout
 				if(this.layoutList.length <= 0){
 					await this.layout()
 				}
+				if(window.screen.width<1300){
+					layout.isMobile = true
+				}else{
+					layout.isMobile = false
+				}
 				// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
 				// this.layoutList = arr
 				layout.init()
@@ -505,6 +510,8 @@ export default defineComponent({
 								angleBLStyle:[],
 								class:this.moodb_className,
 							}
+							console.log(123123213);
+							
 							this.store.commit("setDisposeMoodboardPosition", obj);
 							this.loadingShow = false
 						}
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -24,13 +24,13 @@
 					</div>
 				</div>
 				<div class="layout_nav">
-					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)">
+					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.stop="setpitch(item,index)">
 						<img :src="item.imgUrl">
 					</div>
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg> 
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
+						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
 						<div>
 							
 						</div>
@@ -39,7 +39,7 @@
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
 							<li class="layout_btn_left" v-compile.stop="'left'"></li>
 							<li class="layout_btn_right" v-compile.stop="'right'"></li>
-							<li class="layout_rotote" v-rotote.stop></li>
+							<li class="layout_rotote" v-rotote.stop='item'></li>
 							<li class="layout_translate" v-translate.stop></li>
 							<!-- <li class="layout_translate" v-translate.stop></li> -->
 							<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
@@ -73,6 +73,16 @@
 						</div>
 					</div>
 				</div>
+				<div class="layout_right" v-show="isMobile">
+					<div class="layout_right_text">
+						{{ $t('DesignPrintOperation.Scale') }}
+					</div>
+					<a-slider
+						v-model:value="moodItemScale"
+						@change="setMoodItemScale"
+					>
+					</a-slider>
+				</div>
 				<!-- <div class="layout_right">
 					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
 						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
@@ -118,7 +128,7 @@ import { Https } from "@/tool/https";
 import { getCookie } from "@/tool/cookie";
 import domTurnImg from '@/tool/domTurnImg'
 import { getUploadUrl } from "@/tool/util";
-
+import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
 	props:["moodb_className",'flex_direction'],
 	components: {
@@ -136,10 +146,12 @@ export default defineComponent({
 		let styleObj = computed(()=>{
 			return store.state.UploadFilesModule.disposeMoodboardPostition
 		})
+		let moodItemScale = ref(0)
 		let domObj = {
 			dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
 			domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
 		}
+		let isMobile = ref(false)
        return {
            layout,
            templateFileList,
@@ -148,8 +160,10 @@ export default defineComponent({
 			layoutList,
 			content,
 			loadingShow,
+			moodItemScale,
 			styleObj,
 			domObj,
+			isMobile,
        };
    },
    data() {
@@ -157,17 +171,13 @@ export default defineComponent({
            // moodTemplateId: "", //模板id
            store: useStore(),

-			// layoutList:computed(()=>{
-			// 	return [...(useStore().state.UploadFilesModule.moodboardFiles),
-			// 	...(useStore().state.UploadFilesModule.generateFiles),
-			// 	...(useStore().state.UploadFilesModule.MaterialFiles)]
-			// }),
 			moodb : moodb.moodb_,
 			moodbList:{},
 			moodbClassName:[],
 			setabsolute:false,
 			token: "",
            uploadUrl: "",
+			moodIndex:0,
 			upload: {
                isPin: 0,
 				gender:'',
@@ -186,30 +196,17 @@ export default defineComponent({
 		layout:{
 			mounted (el,layout:any,binding) {
 				
-				let mousedown = function(e: MouseEvent){
-					e.stopPropagation()
-					let event:any = {
-						offsetX:e.offsetX,
-						offsetY:e.offsetY,
-						clientX:e.clientX,
-						clientY:e.clientY,
-					}
-					operation(event)
+				let mousedown = function(event: MouseEvent){
+					let e:any = getMousePosition(event,false)
+					mouseDownOperation(e)
 				}

-				let touchstart = function(e: any){
-					e.stopPropagation()
-					const touch = e.changedTouches[0];
-					let event:any = {
-						offsetX:touch.clientX - e.target.getBoundingClientRect().left,
-						offsetY: touch.clientY - e.target.getBoundingClientRect().top,
-						clientX:touch.clientX,
-						clientY:touch.clientY,
-					}
-					operation(event)
+				let touchstart = function(event: any){
+					let e:any = getMousePosition(event,true)
+					mouseDownOperation(e)
 				}

-				let operation = function(e: MouseEvent){
+				let mouseDownOperation = function(e: MouseEvent){
 					el.parentElement.children.forEach((v:any) => {
 						v.style.left = v.offsetLeft+'px'
 						v.style.top = v.offsetTop+'px'
@@ -226,20 +223,15 @@ export default defineComponent({
 					let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
 					let domY = e.clientY - e.offsetY - Number(top)
 					let mouse = true
-					let mouseMove = function(e:MouseEvent){
-						domOperation(e)
+					let mouseMove = function(event:MouseEvent){
+						let e:any = getMousePosition(event,false)
+						mouseMoveOperation(e)
 					}
-					let touchmove = function(e:any){
-						const touch = e.changedTouches[0];
-						let event:any = {
-							offsetX:touch.clientX - e.target.getBoundingClientRect().left,
-							offsetY: touch.clientY - e.target.getBoundingClientRect().top,
-							clientX:touch.clientX,
-							clientY:touch.clientY,
-						}
-						domOperation(event)
+					let touchmove = function(event:any){
+						let e:any = getMousePosition(event,true)
+						mouseMoveOperation(e)
 					}
-					let domOperation = (e:any)=>{
+					let mouseMoveOperation = (e:any)=>{
 						if(mouse){
 							el.style.left = e.clientX-mouseX - domX+'px'
 							el.style.top = e.clientY-mouseY - domY+'px'
@@ -282,8 +274,15 @@ export default defineComponent({
 		//操作大小
 		compile:{
 			mounted (el,compile) {
-				el.addEventListener('mousedown',(e: MouseEvent)=>{
-					e.stopPropagation()
+				let mousedown = (event:any)=>{
+					let e:any = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+				let touchstart = (event:any)=>{
+					let e:any = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation = (e: MouseEvent)=>{
 					let elParent = el.parentNode.parentNode
 					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
 						v.style.left = v.offsetLeft+'px'
@@ -307,27 +306,34 @@ export default defineComponent({
 					let gpsXY:any
 					let parent:any
 					if(compile.value == 'left' || compile.value == 'right'){
-						gpsXY = e.x
+						gpsXY = e.clientX
 						parent = elParent.offsetWidth
 					}else{
 						parent = elParent.offsetHeight
-						gpsXY = e.y
+						gpsXY = e.clientY
 					}
 					let mouse = true
-					document.onmousemove = function(e:MouseEvent){
+					let mouseMove = function(event:MouseEvent){
+						let e:any = getMousePosition(event,false)
+						mouseMoveOperation(e)
+					}
+					let touchmove = function(event:any){
+						let e:any = getMousePosition(event,true)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = function(e:MouseEvent){
 						if(mouse){
 							if(compile.value == 'left'){
-								elParent.style.width = parent + gpsXY - e.x + 'px' 
+								elParent.style.width = parent + gpsXY - e.clientX + 'px' 
 							}else if(compile.value == 'right'){
-								elParent.style.width = parent + e.x - gpsXY + 'px' 
+								elParent.style.width = parent + e.clientX - gpsXY + 'px' 
 							}else if(compile.value == 'top'){
-								elParent.style.height = parent + gpsXY - e.y + 'px' 
+								elParent.style.height = parent + gpsXY - e.clientY + 'px' 
 							}else if(compile.value == 'bottom'){
-								elParent.style.height = parent + e.y - gpsXY + 'px' 
+								elParent.style.height = parent + e.clientY - gpsXY + 'px' 

 							}
 						
-						
 							if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
 								elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
 							}
@@ -343,61 +349,93 @@ export default defineComponent({
 							}
 						}
 					}
-					document.onmouseup = function(){
+				
+					let mouseup = function(){
 						mouse = false
-						document.onmousemove = ()=>{}
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+						//移动端
 					}
-				})
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
+				}
+				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
 			}
 		},
 		//操作旋转
 		rotote:{
-			mounted(el){
+			mounted(el,item){
 				let mouse = true;
 				let angle :any = 0
 				let num:any
 				let x = 0
 				let y = 0
 				let elParent = el.parentNode.parentNode
-				if(document.defaultView){
-					let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
-					num = Number(transform[3])
+				
+				let mousedown = function(event: MouseEvent){
+					let e:any = getMousePosition(event,false)
+					mouseDownOperation(e)
 				}
-				// 添加鼠标按下事件监听器
-				let mousedown =  (e:MouseEvent) => {
-					e.stopPropagation()
+
+				let touchstart = function(event: any){
+					let e:any = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation = (e:any) => {
 					mouse = true;
-					// let eX = (e.pageX - el.offsetLeft)  + el.offsetLeft
-					// let eY = elParent.offsetTop + el.offsetTop
 					var info = el.getBoundingClientRect();
 					let eX = info.x + info.width / 2;
 					let eY = info.y + info.height / 2;
-					
-					document.addEventListener('mousemove', (e:MouseEvent) => {
-					if (mouse) {
-						let X = eX 
-						let Y = eY
-						let x:any = e.clientX - X
-						let y:any = Y - e.clientY
-						angle = Math.atan2(x,y)*(180 / Math.PI)
-						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
-						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
+					let mouseMove = function(event:MouseEvent){
+						let e:any = getMousePosition(event,false)
+						mouseMoveOperation(e)
 					}
-					});
+					let touchmove = function(event:any){
+						let e:any = getMousePosition(event,true)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = (e:MouseEvent) => {
+						if (mouse) {
+							let X = eX 
+							let Y = eY
+							let x:any = e.clientX - X
+							let y:any = Y - e.clientY
+							angle = Math.atan2(x,y)*(180 / Math.PI)
+							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+							el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
+						}
+					};

 					// 添加鼠标松开事件监听器
-					document.addEventListener('mouseup',mouseup );
+					let mouseup = function(){
+						mouse = false
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+						//移动端
+					}
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
 				}
-				let mouseup = () => {
-					mouse = false;
-					// el.removeEventListener('mousedown',mousedown)
-					document.removeEventListener('mouseup',mouseup)
-				}
-				el.addEventListener('mousedown',mousedown);
+				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
+				
 				//缩放
 				let timeSwitch = true
 				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
 					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
+						if(document.defaultView){
+							let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
+							num = Number(transform[3])
+						}
 						if(timeSwitch){
 							if(angle == 0){
 								function getRotationAngle(transformDom:any) {
@@ -436,10 +474,11 @@ export default defineComponent({
 							setTimeout(() => {
 								timeSwitch = true
 							}, 100);
+							let instance:any = item.instance
+							instance.moodItemScale = num * 100
+							item.value.zoom = num
 							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
 						}
-						
-						
 					});
 				});
 			}
@@ -448,9 +487,16 @@ export default defineComponent({
 		angle:{
 			mounted(el,angle){
 				let mouse = false;
-				el.addEventListener('mousedown', (e:MouseEvent) => {
-					e.stopPropagation()
-					
+				let mousedown = function(event: MouseEvent){
+					let e:any = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+
+				let touchstart = function(event: any){
+					let e:any = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation = (e:MouseEvent) => {
 					el.parentNode.children.forEach((v:any) =>{
 						v.classList.add('eventNode')
 					})
@@ -459,7 +505,15 @@ export default defineComponent({
 					let eX:any
 					let eY:any
 					let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
-					let mouseMove = (e:MouseEvent)=>{
+					let mouseMove = function(event:MouseEvent){
+						let e:any = getMousePosition(event,false)
+						mouseMoveOperation(e)
+					}
+					let touchmove = function(event:any){
+						let e:any = getMousePosition(event,true,el.parentNode)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = (e:MouseEvent)=>{
 						if (mouse) {
 							if(angle.value == 'right'){
 								eX = elParent.offsetWidth - e.offsetX
@@ -474,7 +528,7 @@ export default defineComponent({
 								eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
 								eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
 							}
-							let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
+							let mouseSide = Math.sqrt(eX*eX + eY *eY)/2
 							// el.style.left = e.offsetX /2 +'px'
 							// el.style.top = e.offsetY /2+'px'
 							if(100 - 100 * mouseSide/elParentSide <= 50){
@@ -523,28 +577,40 @@ export default defineComponent({
 								}
 							}
 						}
-						// 添加鼠标松开事件监听器
-						document.addEventListener('mouseup', mouseup);
-					
 					}
-					let mouseup = () => {
-						mouse = false;
-						el.parentNode.removeEventListener('mousemove',mouseMove)
+					let mouseup = function(){
+						mouse = false
 						el.parentNode.children.forEach((v:any) =>{
 							v.classList.remove('eventNode')
 						})
-						document.removeEventListener('mouseup', mouseup);
+						el.parentNode.removeEventListener('mousemove',mouseMove)
+						el.parentNode.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+						//移动端
 					}
 					el.parentNode.addEventListener('mousemove', mouseMove);
-					
-				})
+					el.parentNode.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
+				}
+				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
 			}
 		},
 		//移动图片
 		translate:{
 			mounted (el,layout:any,binding) {
-				el.addEventListener('mousedown',(e: MouseEvent)=>{
-					e.stopPropagation()
+				let mousedown = function(event: MouseEvent){
+					let e:any = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+
+				let touchstart = function(event: any){
+					let e:any = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation = (e: MouseEvent)=>{
 					let elParent = el.parentNode.parentNode
 					el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
 					el.style.top =  (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
@@ -555,10 +621,18 @@ export default defineComponent({
 					let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
 					let domY = e.clientY - e.offsetY - el.offsetTop
 					let mouse = true
-					document.onmousemove = function(e:MouseEvent){
+					let mouseMove = function(event:MouseEvent){
+						let e:any = getMousePosition(event,false)
+						mouseMoveOperation(e)
+					}
+					let touchmove = function(event:any){
+						let e:any = getMousePosition(event,true)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = function(e:MouseEvent){
 						if(mouse){
-							let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
-							let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
+							let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
+							let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
 							el.style.left = left
 							el.style.top = top;
 							el.previousSibling.style.top = top
@@ -594,11 +668,21 @@ export default defineComponent({
 							}
 						}
 					}
-					document.onmouseup = function(){
+					let mouseup = function(){
 						mouse = false
-						document.onmousemove = ()=>{}
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+						//移动端
 					}
-				})
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
+				}
+				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
 			},
 		},
 		modelImg:{
@@ -634,9 +718,10 @@ export default defineComponent({
 				v.setPitch = false
 			})
 			this.layoutList = parentList
-			
 			this.moodbList = this.moodb[parentList.length-1]
-			this.moodbClassName = this.styleObj.class
+			this.moodbClassName = this.styleObj.class?this.styleObj.class:[]
+			this.moodItemScale = this.layoutList[0].zoom*100
+
 			this.initDomStyle()
 			
 		},
@@ -644,6 +729,11 @@ export default defineComponent({
 			this.layout = false
 		},
 		setpitch(item:any,index:any){
+			if(!item.zoom){
+				item.zoom = 1
+			}
+			this.moodIndex = index
+			this.moodItemScale = (item.zoom?item.zoom:1)*100
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
@@ -653,6 +743,11 @@ export default defineComponent({
 				
 			}
 		},
+		setMoodItemScale(value:any){
+			if(value > 2){
+				this.layoutList[this.moodIndex].zoom = value/100
+			}
+		},
 		setmoodb(item:any){
 			this.moodbClassName = item
 			this.$emit('setmoodbClass',this.moodbClassName)
@@ -1045,6 +1140,65 @@ export default defineComponent({
 				}
 			}
 		}
+		.layout_right{
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			right: calc(5rem*1.2);
+			// background-color: #000;
+			width: 8%;
+			height: 50%;
+			&.layout_left::-webkit-scrollbar {
+                display: none;
+            }
+			.layout_left_text{
+				font-size: var(--aida-fsize1-6);
+				margin-bottom: calc(1rem*1.2);
+				color: #000;
+			}
+			.layout_left_items{
+				width: 100%;
+				height: calc(6rem*1.2);
+				display: flex;
+				align-content: space-between;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				flex-direction: column;
+				margin-bottom: calc(2rem*1.2);
+                cursor: pointer;
+				.layout_left_item{
+					box-sizing: border-box;
+					border: 1px solid #000;
+				}
+			}
+			.ant-slider{
+				margin: 0;
+				margin-top: calc(2rem*1.2);
+				padding: 0 calc(1rem*1.2);
+				.ant-slider-track,
+				.ant-slider-rail {
+					height: calc(.6rem*1.2);
+					background-color: #e1e1e1;
+					border-radius: calc(0.5rem*1.2);
+				}
+				.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
+				.ant-slider-handle {
+					background-color: #2d2e76 !important;
+					border: none !important;
+				}
+				.ant-slider-handle:hover {
+					box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
+				}
+			
+				.habit_System_Designer_text_max {
+					display: flex;
+					justify-content: space-between;
+					.habit_System_Designer_text {
+					}
+				}
+			}
+			
+		}
        .submit_button {
            margin: calc(2rem*1.2) auto 0;
 			position: relative;
--- a/src/tool/mdEvent.js
+++ b/src/tool/mdEvent.js
@@ -0,0 +1,28 @@
+const getMousePosition = (e,bor,dom) => {
+	e.stopPropagation()
+	if(bor){
+		const touch = e.changedTouches[0];
+		event = {
+			offsetX:touch.clientX - e.target.getBoundingClientRect().left,
+			offsetY: touch.clientY - e.target.getBoundingClientRect().top,
+			clientX:touch.clientX,
+			clientY:touch.clientY,
+		}
+		if(dom){
+			event.offsetX = touch.clientX - dom.getBoundingClientRect().left
+			event.offsetY = touch.clientY - dom.getBoundingClientRect().top
+		}
+	}else{
+		event = {
+			offsetX:e.offsetX,
+			offsetY:e.offsetY,
+			clientX:e.clientX,
+			clientY:e.clientY,
+		}
+	}
+	return event
+}
+
+export {
+	getMousePosition,
+}
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -451,6 +451,8 @@ function segmentImage(markerImage,fullImage,size){
 		marker.onload = () => {
 			ctx1.drawImage(marker,0,0 ,size.width, size.height);
 			full.onload = () => {
+			console.log(full.height,size,full.width);
+
 				ctx2.drawImage(full,0,0, size.width, size.height);
 				segmentImageItem();
 			};
@@ -466,16 +468,16 @@ function segmentImage(markerImage,fullImage,size){
 			const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色

 			const threshold = 100; // 颜色匹配的容差
-
 			// const isColorMatch = (r, g, b, color) => 
 			// 	(Math.abs(r - color.r) < threshold) || (Math.abs(0 - color.r) < threshold) &&
 			// 	(Math.abs(g - color.g) < threshold) || (Math.abs(0 - color.g) < threshold) &&
 			// 	(Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold)

 			const isColorMatch = (r, g, b, color) => 
-				(Math.abs(r - color.r) < threshold || Math.abs(0 - color.r) < threshold) &&
-				(Math.abs(g - color.g) < threshold || Math.abs(0 - color.g) < threshold) &&
-				(Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
+				((color.r >= color.g) && r >= g) ||
+				((color.r < color.g) && r < g)
+
+				// (Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)

 			const output1 = ctx3.createImageData(size.width, size.height);
 			const output2 = ctx3.createImageData(size.width, size.height);
@@ -483,26 +485,33 @@ function segmentImage(markerImage,fullImage,size){
 				const r = markerData.data[i];
 				const g = markerData.data[i + 1];
 				const b = markerData.data[i + 2];
-
-				if (isColorMatch(r, g, b, color1)) {
+				let a = markerData.data[i + 3];
+				a>1?a = 255:0
+				if (r>=g && a>1) {
 					// 将完整图像中对应的像素复制到第一个输出图像
 					output1.data[i] = fullData.data[i];
 					output1.data[i + 1] = fullData.data[i + 1];
 					output1.data[i + 2] = fullData.data[i + 2];
 					output1.data[i + 3] = fullData.data[i + 3];
-					
+					// output1.data[i] = 158;
+					// output1.data[i + 1] = 51;
+					// output1.data[i + 2] = 0;
+					// output1.data[i + 3] = 255;
 					// 第二个图像的像素置为透明
 					output2.data[i] = 0;
 					output2.data[i + 1] = 0;
 					output2.data[i + 2] = 0;
 					output2.data[i + 3] = 0;
-				} else if (isColorMatch(r, g, b, color2)) {
+				} else if (r<g && a>1) {
 					// 将完整图像中对应的像素复制到第二个输出图像
 					output2.data[i] = fullData.data[i];
 					output2.data[i + 1] = fullData.data[i + 1];
 					output2.data[i + 2] = fullData.data[i + 2];
 					output2.data[i + 3] = fullData.data[i + 3];
-
+					// output2.data[i] = 158;
+					// output2.data[i + 1] = 51;
+					// output2.data[i + 2] = 0;
+					// output2.data[i + 3] = 255;
 					// 第一个图像的像素置为透明
 					output1.data[i] = 0;
 					output1.data[i + 1] = 0;
@@ -527,11 +536,16 @@ function segmentImage(markerImage,fullImage,size){
 				canvas.height = size.height;
 				const ctx = canvas.getContext('2d');
 				ctx.putImageData(imageData, 0, 0);
-				return canvas.toDataURL('image/png');
+				let data = canvas.toDataURL('image/png')
+				canvas.remove()
+				return data;
 			};
 			targetBackUrl =createImageURL(output2)
 			targetFrontUrl =createImageURL(output1)
 			resolve({targetFrontUrl, targetBackUrl})
+			markerCanvas.remove()
+			fullCanvas.remove()
+			nullCanvas.remove()
 		}
 	})
 }
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -124,7 +124,7 @@
 					<i class="fi fi-rs-notebook"></i>
 					<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
 				</div>
-				<router-link class="select_item" :to="`/administrator`">
+				<router-link class="select_item" v-if="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0"  :to="`/administrator`">
 					<span class="icon iconfont icon-yonghu"></span>
 					<span class="select_item_des">Administrator</span>
 				</router-link>
@@ -261,7 +261,7 @@ export default defineComponent({
 			})
 		}
 		
-		MyWs.linkWs("ws://"+MyWs.messageUrl,'message')
+		MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
 		let getWsMessage = (data)=>{
 			store.commit('setMessageSystem',...data)
 		}
@@ -375,6 +375,7 @@ export default defineComponent({
 		}
 	},
    mounted() {
+		console.log(this.store);
        let isTest = getCookie('isTest')//获取是否是试用用户
        this.isTest =JSON.parse(isTest)
        let isMurmur = getCookie('isMurmur')//获取是否是试用用户