details功能

src/component/Detail/editFrontBack.vue

@@ -97,9 +97,10 @@ export default defineComponent({
 				let img = new Image();
 				img.onload = async function(){
 					loadingShow.value = true
+					let scale = img.width/img.height
 					let height = canvasBox.offsetHeight;
 					canvasWH.value = height
-					canvasBox.style.width = height+'px'
+					canvasBox.style.width = height * scale+'px'
 					
 					let wScale = 1
 					let hScale = 1
@@ -122,16 +123,18 @@ export default defineComponent({
 					await frontBackCanvasObj.canvasInit(canvasBox,{
 						width:canvasWH.value * wScale,
 						height:canvasWH.value * hScale,
-					},data.undividedLayer)
+					},data.maskUrl,'',{})
+					// undividedLayer
 					canvas = frontBackCanvasObj.canvas
 
 					frontBackCanvasObj.setOperation('pencil')
 					pencilbtnStyle.value.background = rgba.value
-					console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
+					// console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
 					frontBackCanvasObj.setPencilWidth()
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'')
+					// await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'',{opacity: 0.5})
+
 					// await new Promise((resolve, reject) => {
 					// 	fabric.Image.fromURL(data.maskUrl, function(img) {
 					// 		// 设置背景图对象的宽度和高度与 canvas 相同
@@ -208,7 +211,6 @@ export default defineComponent({
 			}
 		}
 		let mouseup = (e)=>{
-			console.log(down);
 			if(down){
 				nextTick(()=>{
 					createSetTimeSubmit()
@@ -233,7 +235,6 @@ export default defineComponent({
 				height: Math.round(exportWH * ratio[1]),
 			}
 			segmentImage(mark,full,size).then((rv)=>{
-				// console.log(rv.targetFrontUrl,rv.targetBackUrl)
 				props.patchData.front[props.imgDomIndex].imageUrl = rv.targetFrontUrl
 				props.patchData.back[props.imgDomIndex].imageUrl = rv.targetBackUrl
 				props.patchData.front[props.imgDomIndex].maskUrl = data
@@ -284,7 +285,7 @@ export default defineComponent({
 	margin: 0 auto;
 	.editFrontBack_center_item{
 		// position: relative;
-		background: #fff;
+		background: #ffffff;
 		position: absolute;
 		
 		display: flex;
@@ -418,6 +419,9 @@ export default defineComponent({
 			justify-content: center;
 			width: 100%;
 			height: 100%;
+			z-index: 2;
+			pointer-events:none;
+			opacity: .5;
 			img{
 				height: 100%;
 				width: 100%;

src/component/DetailCopy/canvas/argument.vue

@@ -10,7 +10,7 @@
 		 </div> -->
 		 <div v-show="isEditFrontBack" class="frontBack">
 			<div class="label_item" @click.stop="setOperation('print')">
-				<div class="title">color</div>
+				<div class="title">Sharding</div>
 				<a-select
 					v-model:value="frontBackData"
 					:options="frontBackDataList"
@@ -35,18 +35,18 @@
 			</div>
 		 </div>
 		 <div v-show="!isEditFrontBack" class="sketch">
-			<div class="label_item" @click.stop="setOperation('print')">
+			<div class="label_item" @click.stop="setOperation('print')" v-show="isDashedShow">
 				<div class="title">print</div>
 				<div class="current"></div>
 				<div class="drop" v-show="operation == 'print'">
-					<selectList @selectImgItem="selectImgItem" type="print" :catecoryList="printCatecoryList"></selectList>
+					<selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print" :catecoryList="printCatecoryList"></selectList>
 				</div>
 			</div>
-			<div class="label_item" @click.stop="setOperation('element')">
+			<div class="label_item" @click.stop="setOperation('element')" v-show="isDashedShow">
 				<div class="title">element</div>
 				<div class="current"></div>
 				<div class="drop" v-show="operation == 'element'">
-					<selectList @selectImgItem="selectImgItem" type="element" :catecoryList="designElementsType"></selectList>
+					<selectList @selectImgItem="selectImgItem" level1Type="DesignElements" type="element" :catecoryList="designElementsType"></selectList>
 				</div>
 			</div>
 			<div class="label_item" v-show="
@@ -156,6 +156,9 @@
 				designElementsType:computed(()=>{
 					return store.state.UserHabit.designElementsType;
 				}),
+				isDashedShow:computed(()=>{
+					return canvasGeneral.dashed.isDashedShow;
+				}),
 				frontBackData:'#ff0000',
 				frontBackDataList:[
 					{
@@ -278,12 +281,15 @@
 			 font-size: 1.8rem;
 		 }
 		 :deep(.ant-select){
-			height: 3rem;
+
 			border-radius: 3rem;
 			.ant-select-selector{
 				height: 100%;
 				border-radius: 3rem;
 				border: 1px solid;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 				.ant-select-selection-item{
 					display: flex;
 					font-size: 2rem;

src/component/DetailCopy/canvas/index.vue

@@ -208,7 +208,8 @@ export default defineComponent({
 			}
 		}
 		.canvasContent{
-			height: 73rem;
+			height: 100%;
+			// height: 70rem;
 			width: 100%;
 			border: 2px solid #000;
 			border-radius: 3rem;

src/component/DetailCopy/designDetail.vue

@@ -47,7 +47,14 @@
 				</div>
 
 				<div class="item model">
-					<model ref="model" @canvasReload="canvasReload" @detailEdit="detailEdit" @addSketch="()=>isEditPattern.value=false"></model>
+					<model 
+						ref="model" 
+						@canvasReload="canvasReload" 
+						@detailEdit="detailEdit" 
+						@addSketch="()=>isEditPattern.value=false"
+						@revocation="revocation"
+						@oppositeRevocation="oppositeRevocation"
+					></model>
 					<div class="btn">
 						<div class="gallery_btn" @click="submit">Submit</div>
 						<div class="gallery_btn" @click="previwe">Preview</div>
@@ -57,7 +64,7 @@
 					<div class="submit">
 					</div>
 					<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
-						<detailRight></detailRight>
+						<detailRight ref="detailRight"></detailRight>
 					</div>
 					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
 						<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
@@ -104,6 +111,7 @@ export default defineComponent({
 		const detailDom = reactive({
 			model:null,
 			canvasBox,
+			detailRight,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -114,6 +122,8 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			designDetailShow:false,
 			loadingShow:false,
+			oppositeRevocationShow:-1,
+			revocationShow:-1,
 			isEditPattern:{
 				value:false,
 			},// 是否编辑图案
@@ -121,6 +131,8 @@ export default defineComponent({
 		})
 		provide('isEditPattern',detailData.isEditPattern)
 		const closeModal = ()=>{
+			sessionStorage.removeItem('oppositeRevocation')
+			sessionStorage.removeItem('revocation')
 			detailData.designDetailShow = false
 			emit('destroy')
 		}
@@ -157,7 +169,7 @@ export default defineComponent({
                     store.commit('DesignDetailCopy/setDesignDetail',rv)
 					// this.deleteShow = false
 
-					setRevocation(rv,'')
+					setRevocation()
                     detailData.loadingShow = false
 					// await this.setImgSize() 
                 }
@@ -172,8 +184,49 @@ export default defineComponent({
 			sessionStorage.removeItem('oppositeRevocation')
 			sessionStorage.removeItem('revocation')
 		}
-		const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销
+		//撤回
+		const setRevocation = ()=>{//设置撤销
+			let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
+			let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
+			// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
+				// sessionStorage.setItem('revocation', JSON.stringify([]));
+				// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+				revocation = []
+			}
+			revocation.push(itemDetail)
+			detailData.revocationShow = revocation?.length
+			detailData.oppositeRevocationShow = 0
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+		}
+		provide('setRevocation',setRevocation)
 
+		const revocation = ()=>{//撤回
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			if(detailData.revocationShow <= 1)return
+			oppositeRevocation.push(revocation[revocation.length-1])
+			detailData.oppositeRevocationShow = oppositeRevocation.length
+			revocation.splice(revocation.length-1,1)
+			detailData.revocationShow = revocation.length
+			store.commit("DesignDetailCopy/setDesignDetail", revocation[revocation.length-1]);
+			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			// clearSelect()
+		}
+		const oppositeRevocation = ()=>{//反撤回
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			if(!oppositeRevocation[oppositeRevocation.length-1])return
+			store.commit("DesignDetailCopy/setDesignDetail", oppositeRevocation[oppositeRevocation.length-1]);
+			revocation.push(oppositeRevocation[oppositeRevocation.length-1])
+			detailData.revocationShow = revocation.length
+			oppositeRevocation.splice(oppositeRevocation.length-1,1)
+			detailData.oppositeRevocationShow = oppositeRevocation.length
+			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			// this.clearSelect()
 		}
 		const setCurrentDetail = (str:string)=>{
 			store.commit('DesignDetailCopy/setCurrentDetailType',str)
@@ -182,10 +235,12 @@ export default defineComponent({
 			let clothesList:any = []
 			for(let i = 0;i<list.length;i++){
 			    let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
-				await (detailDom.canvasBox as any).privewDetail()
+				if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
+				if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 				let gradient = null
 				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
+				
 				let data:any = {
 					changed:false,
 					color:(newData && detailData.currentDetailType == 'color' && isCurrent)?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
@@ -193,16 +248,16 @@ export default defineComponent({
 					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
 					// maskMinioUrl:'',
 					// maskUrl:'',
-					maskUrl:list[i].maskUrl?list[i].maskUrl:null,
+					maskUrl:list[i].maskUrl,
 					offset,
 					partialDesign:list[i].partialDesign,
 					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
-					printObject:list[i].printObject?list[i].printObject:{prints:[]},
+					printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
 					priority,
 					scale,
 					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
 					sketchString:'',
-					trims:list[i].trims?list[i].trims:{prints:null},
+					trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?list[i].trims:{prints:[]},
 				}
 				if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
 					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
@@ -229,7 +284,11 @@ export default defineComponent({
 			}
 			detailData.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
-				store.commit('DesignDetailCopy/setPraeview',rv)
+				let value = {
+					currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
+					rv:rv
+				}
+				store.commit('DesignDetailCopy/setPraeview',value)
 				detailData.loadingShow = false
 			}).catch(res=>{ 
 				detailData.loadingShow = false
@@ -284,6 +343,8 @@ export default defineComponent({
 			detailData.childKey += 1
 		}
 		onBeforeUnmount(()=>{
+			sessionStorage.removeItem('oppositeRevocation')
+			sessionStorage.removeItem('revocation')
 			store.commit('DesignDetailCopy/clearDesignDetail')
 		})
         return{
@@ -294,6 +355,8 @@ export default defineComponent({
 			setCurrentDetail,
 			previwe,
 			submit,
+			revocation,
+			oppositeRevocation,
 			detailEdit,
 			canvasReload,
         }
@@ -402,6 +465,7 @@ export default defineComponent({
 				> .btn{
 					display: flex;
 					justify-content: center;
+					margin-left: 12rem;
 					> div{
 						margin-right: 2rem;
 					}

src/component/DetailCopy/detailLeft/colorBox/index.vue

@@ -30,7 +30,7 @@
     
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { defineComponent,computed,ref,watch,nextTick,toRefs, reactive, onMounted} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useStore } from "vuex";
@@ -52,6 +52,7 @@ export default defineComponent({
 			selectTitle:'current',
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			colorList:{
 				list:{},
 				index:-1,
@@ -83,7 +84,11 @@ export default defineComponent({
 				newVal.name = data.name
 				newVal.tcx = data.tcx
 				colorData.colorList.list[colorData.selectDetail.id][colorData.colorList.index] = newVal
-				store.commit('DesignDetailCopy/setNewDetail',newVal)
+				let value = {
+					data:newVal,
+					str:'color'
+				}
+				store.commit('DesignDetailCopy/setNewDetail',value)
 			}
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
@@ -138,8 +143,6 @@ export default defineComponent({
 						item = {}
 					}
 				}
-				console.log(12312);
-				
 				colorData.colorList.list[newVal].push(item)
 			}
 		},{immediate: true})
@@ -241,6 +244,7 @@ export default defineComponent({
 		height: 100%;
 		display: flex;
 		flex-direction: column;
+		overflow-y: auto;
 		> .detailText{
 			margin-bottom: 1rem;
 		}
@@ -281,6 +285,7 @@ export default defineComponent({
 			}
 		}
 		> .uploadImage{
+			flex-shrink: 0;
 			margin-bottom: 3rem;
 			border: 1px dashed transparent;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);

src/component/DetailCopy/detailLeft/element.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="element">
+		<div class="detailText">Current Element</div>
+		<div class="select_element">
+			<img :class="{active:elementList.length == 1}" v-for="item in elementList" @click="addElement(item)" :src="item.path" alt="">
+			<!-- <img :src="selectDetail.path" alt="">
+			{{ selectDetail }} -->
+			<div v-if="elementList.length == 0">
+				<i class="fi fi-rr-picture centent"></i>
+			</div>
+		</div>
+		<selectList @selectImgItem="selectImgItem" level1Type="DesignElements" type="element" :catecoryList="printCatecoryList"></selectList>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import selectList from './module/selectList.vue'
+export default defineComponent({
+    components:{
+		selectList,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle:'current',
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			printCatecoryList:computed(()=>{
+				return store.state.UserHabit.designElementsType
+			}),
+			elementList:[],
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
+		})
+		watch(()=>detailData?.selectDetail?.trims?.prints,(newVal,oldVal)=>{
+			if(!newVal)return
+			detailData.elementList = newVal.reduce((acc:any, curr:any) => {
+				if (!acc.some((item:any) => item.minIOPath === curr.minIOPath)) {
+					acc.push(curr);
+				}
+				return acc;
+			}, []);
+			
+		},{immediate: true})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		const openCurrent = ()=>{
+			detailData.selectTitle = 'current'
+		}
+		const openUpload = ()=>{
+			detailData.selectTitle = 'upload'
+		}
+		const openLibrary = ()=>{
+			detailData.selectTitle = 'library'
+			getDetailListDom.libraryList.init()
+		}
+		const addElement = (data:any)=>{
+			let value = {
+				designType:data.designType,
+				level2Type:data.level2Type,
+				minIOPath:data.minIOPath,
+				url:data.path,
+			}
+			store.commit('DesignDetailCopy/setCurrentPrintElement',value)
+		}
+		const selectImgItem = (data:any)=>{
+			let value = {
+				data,
+			}
+			if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
+				store.commit('DesignDetailCopy/setNewDetail',value)
+			}else{
+				store.commit('DesignDetailCopy/setCurrentPrintElement',data)
+			}
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+			openCurrent,
+			openUpload,
+			openLibrary,
+			selectImgItem,
+			addElement,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .element{
+		// width: 34rem;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .select_element{
+			width: 100%;
+			height: 23.5rem;
+			padding: 1rem;
+			text-align: center;
+			border-radius: .5rem;
+			// border: 1px dashed #202020;
+			border: 1px dashed transparent;
+        	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
+			margin-bottom: 3rem;
+			display: flex;
+			flex-wrap: wrap;
+			overflow: hidden;
+			justify-content: space-between;
+			overflow-y: auto;
+			justify-content: flex-start;
+			> img{
+				object-fit: contain;
+				height: 9rem;
+				width: 9rem;
+				overflow-y: auto;
+				margin-bottom: 1rem;
+				margin: 1rem;
+				cursor: pointer;
+			}
+			> .active{
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				margin-bottom: 0;
+			}
+			> div{
+				height: 100%;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> i{
+					font-size: 10rem;
+				}
+			}
+		}
+	}
+</style>

src/component/DetailCopy/detailLeft/index.vue

@@ -3,6 +3,7 @@
 		<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
 		<print v-show="currentDetailType == 'print'"></print>
 		<color v-show="currentDetailType == 'color'"></color>
+		<element v-show="currentDetailType == 'element'"></element>
 		<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
     </div>
 </template>
@@ -16,11 +17,12 @@ import { useI18n } from 'vue-i18n'
 import sketch from './sketch.vue'
 import print from './print.vue'
 import color from './colorBox/index.vue'
+import element from './element.vue'
 import addDetails from '@/component/Detail/addDetails.vue'
 
 export default defineComponent({
     components:{
-		sketch,print,color,addDetails
+		sketch,print,color,addDetails,element
     },
     setup(props,{emit}) {
         const store = useStore();

src/component/DetailCopy/detailLeft/module/libraryList.vue

@@ -57,6 +57,11 @@ export default defineComponent({
 			default:'' as any,
 			required:true
 		},
+		level1Type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
 	},
 	emits:['selectImgItem'],
     setup(props,{emit}) {
@@ -109,18 +114,9 @@ export default defineComponent({
             detailData.isShowLoading = true
 			let level2Type = ''
 			let workspace = store.state.Workspace.workspace
-			let type = props.type
 			// let type = store.state.DesignDetailCopy.currentDetailType
-			let leve1Type
-			if(type == 'sketch'){
-				leve1Type = 'Sketchboard'
-			}else if(type == 'print'){
-				leve1Type = 'Printboard'
-			}else if(type == 'element'){
-				leve1Type = 'DesignElements'
-			}
             let data = {
-                level1Type:leve1Type,
+                level1Type:props.level1Type,
                 // level2Type:'Pattern',
                 level2Type:detailData.designType,
 				modelSex:workspace?.sex,

src/component/DetailCopy/detailLeft/module/selectList.vue

@@ -26,13 +26,13 @@
 		</div>
 		<div class="print_content_list">
 			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
-				<currentList ref="currentList" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
+				<currentList ref="currentList" :level1Type="level1Type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
 			</div>
 			<div class="content_item" v-show="selectTitle == 'upload'">
-				<uploadList @selectImgItem="selectImgItem" :catecoryList="catecoryList"></uploadList>
+				<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
 			</div>
 			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList @selectImgItem="selectImgItem" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
+				<libraryList @selectImgItem="selectImgItem" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
 			</div>
 		</div>
     </div>
@@ -63,6 +63,11 @@ export default defineComponent({
 			default:'' as any,
 			required:true
 		},
+		level1Type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
 	},
 	emits:['selectImgItem'],
     setup(props,{emit}) {

src/component/DetailCopy/detailLeft/module/uploadList.vue

@@ -58,7 +58,12 @@ export default defineComponent({
 		    type:Object,
 			default:()=>[] as any,
 			required:true
-		}
+		},
+		level1Type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
 	},
 	emits:['selectImgItem'],
     setup(props,{emit}) {
@@ -69,12 +74,13 @@ export default defineComponent({
 			uploadList:[],
 			upload:{
                 isPin: 0,
-                level1Type: 'Sketchboard',
+                level1Type: props.level1Type,
 				gender:store.state.Workspace.workspace.sex,
                 timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 			},
 			token:getCookie("token"),
 			uploadUrl:getUploadUrl(),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -154,18 +160,6 @@ export default defineComponent({
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         }
-		onMounted(()=>{
-			let type = store.state.DesignDetailCopy.currentDetailType
-			let leve1Type:any
-			if(type == 'sketch'){
-				leve1Type = 'Sketchboard'
-			}else if(type == 'print'){
-				leve1Type = 'Printboard'
-			}else if(type == 'element'){
-				leve1Type = 'DesignElements'
-			}
-			detailData.upload.level1Type = leve1Type
-		})
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListData),

src/component/DetailCopy/detailLeft/print.vue

@@ -2,14 +2,14 @@
     <div class="print">
 		<div class="detailText">Current Print</div>
 		<div class="select_print">
-			<img :class="{active:printList.length == 1}" v-for="item in printList" :src="item.path" alt="">
+			<img :class="{active:printList.length == 1}" v-for="item in printList" @click="addElement(item)" :src="item.path" alt="">
 			<!-- <img :src="selectDetail.path" alt="">
 			{{ selectDetail }} -->
 			<div v-if="printList.length == 0">
 				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
-		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="printCatecoryList"></selectList>
+		<selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print" :catecoryList="printCatecoryList"></selectList>
     </div>
     
 </template>
@@ -40,12 +40,11 @@ export default defineComponent({
 		watch(()=>detailData?.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
 			if(!newVal)return
 			detailData.printList = newVal.reduce((acc:any, curr:any) => {
-				if (!acc.some((item:any) => item.id === curr.id)) {
+				if (!acc.some((item:any) => item.minIOPath === curr.minIOPath)) {
 					acc.push(curr);
 				}
 				return acc;
 			}, []);
-			
 		},{immediate: true})
 		const getDetailListData = reactive({
 			total:0,
@@ -65,8 +64,24 @@ export default defineComponent({
 			detailData.selectTitle = 'library'
 			getDetailListDom.libraryList.init()
 		}
+		const addElement = (data:any)=>{
+			let value = {
+				designType:data.designType,
+				level2Type:data.level2Type,
+				minIOPath:data.minIOPath,
+				url:data.path,
+			}
+			store.commit('DesignDetailCopy/setCurrentPrintElement',value)
+		}
 		const selectImgItem = (data:any)=>{
-			store.commit('DesignDetailCopy/setNewDetail',data)
+			let value = {
+				data,
+			}
+			if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
+				store.commit('DesignDetailCopy/setNewDetail',value)
+			}else{
+				store.commit('DesignDetailCopy/setCurrentPrintElement',data)
+			}
 		}
 		
         return{
@@ -78,6 +93,7 @@ export default defineComponent({
 			openUpload,
 			openLibrary,
 			selectImgItem,
+			addElement,
         }
     },
 
@@ -113,16 +129,20 @@ export default defineComponent({
 			overflow: hidden;
 			justify-content: space-between;
 			overflow-y: auto;
+			justify-content: flex-start;
 			> img{
 				object-fit: contain;
 				height: 9rem;
 				width: 9rem;
 				overflow-y: auto;
 				margin-bottom: 1rem;
+				margin: 1rem;
+				cursor: pointer;
 			}
 			> .active{
 				width: 100%;
 				height: 100%;
+				margin: 0;
 				margin-bottom: 0;
 			}
 			> div{

src/component/DetailCopy/detailLeft/sketch.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sketch">
-		<div class="detailText">Current Print</div>
+		<div class="detailText">Current Sketch</div>
 		<div class="select_sketch" v-if="selectDetail.id">
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
 			<img :src="selectDetail.sketchString || selectDetail.path" alt="">
@@ -11,7 +11,7 @@
 				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
-		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
+		<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
     </div>
 </template>
 <script lang="ts">
@@ -58,7 +58,10 @@ export default defineComponent({
 			getDetailListDom.libraryList.init()
 		}
 		const selectImgItem = (data:any)=>{
-			store.commit('DesignDetailCopy/setNewDetail',data)
+			let value = {
+				data,
+			}
+			store.commit('DesignDetailCopy/setNewDetail',value)
 		}
 		const openAddDetail = ()=>{
 			emit('addDetail')

src/component/DetailCopy/detailRight/editPrintElement.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="editPrintElement">
-		<div class="printOverallBtn">
+		<div class="printOverallBtn" v-if="type == 'print'">
 			<div class="overallSlogin">
 				<div
 					class="habit_Overal_Single_text"
@@ -28,14 +28,57 @@
 				</a-slider>
 			</div>
 		</div>
-		<div></div>
+		<div class="editPrintElementBox">
+			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
+			<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
+				<div class="designOpenrtion_imgMask">
+					<div class="designOpenrtion_print">
+						<div 
+							v-for="item,index in printStyleList[type][stateOverallSingle]" 
+							:key="item"
+							v-if="overallSingle"
+							:style="item?.pattern?.style" 
+							@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
+							class="modal_imgItem" 
+							ref="content" 
+							>
+							<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
+						</div>
+					</div>
+					<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg">
+					<div class="designOpenrtion_btn">
+						<ul v-if="overallSingle" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.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.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
+							<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
+							<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
+							<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
+							<li class="designOpenrtion_rotote" v-rotote.stop="[index,item?.transform,type]"></li>
+							<li class="designOpenrtion_delete" @click.stop="deletePrint">
+								<img src="../../../assets/images/homePage/cuowu.svg" alt="">
+							</li>
+						</ul>
+						<div v-show="!overallSingle"></div>
+						<ul v-if="!overallSingle && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
+							<i class="fi fi-rr-arrows animtion1"></i>
+							<i class="fi fi-rr-arrows animtion2"></i>
+							<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+			</div>
+		</div>
+		
     </div>
     
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive, onBeforeUnmount} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { useStore } from "vuex";
+import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
     components:{
     },
@@ -48,26 +91,508 @@ export default defineComponent({
     setup(props,{emit}) {
         const store = useStore();
 		const editPrintElementDom = reactive({
-
+			imgDom:null as any,
+			sketchImg:null as any,
 		})
 		const editPrintElementData = reactive({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
-			overallSingle:false,
+			currentPrintElement:computed(()=>store.state.DesignDetailCopy.currentPrintElement),
+			overallSingle:true,
 			systemDesignerPercentage:0,
+			printStyleList:{
+				print:{
+					single:[],
+					overall:[],
+				},
+				element:{
+					single:[],
+				}
+			} as any,
+			stateOverallSingle:'single',
+			type:props.type,
+			imgDomIndex:0,
+			direction:'',//判断点的那条边
+			printZIndex:2,//印花优先级
+			sketchWH:{
+				width:0,
+				height:0,
+				scale:0,
+			},
+			loadingShow:false,
 		})
-		const setOveralSingle = ()=>{}
+		
+		const setOveralSingle = ()=>{
+			if(!editPrintElementData.overallSingle){
+				editPrintElementData.stateOverallSingle = 'overall'
+			}else{
+				editPrintElementData.stateOverallSingle = 'single'
+			}
+		}
 		const formatter = (value:any)=>{
 			return `${value}%`;
 		}
+		const deletePrint = ()=>{
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
+		}
+		const setScaleLocation:any = (item:any)=>{
+		    return new Promise((resolve, reject) => {
+				// let location = [,]
+				let img = new Image
+				img.onload = ()=>{
+					let imgScale = img.width / img.height
+					let zoom = 2
+					let width = editPrintElementData.sketchWH.width / zoom
+					let height = width / editPrintElementData.sketchWH.height
+					
+					let scale = [width / editPrintElementData.sketchWH.width,height]
+
+					let sketchW = editPrintElementData.sketchWH.width * editPrintElementData.sketchWH.scale
+					let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale
+					let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
+					let y = sketchH / 2 -(sketchH * height/2)
+					if(!editPrintElementData.overallSingle){
+						x = sketchW / 2
+						y = sketchH / 2
+					}
+					let location = [x,y]
+					resolve({scale,location})
+				}
+				img.src = item.url
+			})
+		}
+		const addPrintELement = async (data:any)=>{
+			let {scale,location} = await setScaleLocation(data)
+			let item = {
+				angle:0,
+				designType:data.designType,
+				ifSingle:editPrintElementData.overallSingle,
+				level2Type:data.level2Type,
+				location,
+				minIOPath:data.minIOPath,
+				path:data.url,
+				priority:editPrintElementData.printZIndex,
+				scale,
+			}
+			getItemPosition(item)
+			store.commit('DesignDetailCopy/setCurrentPrintElement',null)
+		}
+		const previewDetailPrintData = ()=>{
+			let data:any = []
+			let index = 1
+			let setData = (item:any,index:number)=>{
+				let scale,location
+				let style = item.pattern.style
+				let sketchWH = editPrintElementData.sketchWH.scale
+				if(item.ifSingle){
+					scale = [style.width.replace(/px/g,'')/editPrintElementData.sketchWH.width,(style.height.replace(/px/g,'')/editPrintElementData.sketchWH.height)]
+					location = [style.left.replace(/px/g,'')*sketchWH,style.top.replace(/px/g,'')*sketchWH]
+				}else{
+					let x = Number(style.left.replace(/px/g,''))
+					let y = Number(style.top.replace(/px/g,''))
+					location = [(x*sketchWH) ,(y*sketchWH)]
+					scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
+					// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
+					// location = [item.pattern.style.left,item.pattern.style.top]
+				}
+				let value  ={
+					angle : item.pattern.transform.rotateZ,
+					// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
+					location : location,
+					priority:index,
+					scale: scale,
+					designType:item.designType,
+					level2Type:item.level2Type,
+					path:item.path,
+					minIOPath:item.minIOPath,
+					ifSingle:!!item.ifSingle,
+				}
+				return value
+			}
+			if(editPrintElementData.printStyleList[props.type].single.length>0){
+				sort(editPrintElementData.printStyleList[props.type].single)
+			}
+			editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
+				data.push(setData(item,index))
+				index++ 
+			})
+			editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
+				data.push(setData(item,index))
+				index++ 
+			})
+			let value = {
+				data,
+				str:props.type
+			}
+			store.commit('DesignDetailCopy/setNewDetail',value)
+		}
+		const sort = (list:any)=>{
+			list.sort((a:any,b:any)=>{
+			    var a_num = a.pattern.style.zIndex;
+				var b_num = b.pattern.style.zIndex;
+				return a_num - b_num;
+			})
+		}
+		const getPosition = ()=>{
+		    
+			// editPrintElementData.selectDetail.newDetail[props.type].push()
+		}
+		const getItemPosition = (item:any)=>{
+			let left,top
+			
+			if(item.ifSingle){
+				//single
+				left = item.location[0] / editPrintElementData.sketchWH.scale
+				top = item.location[1] / editPrintElementData.sketchWH.scale
+			}else{
+				//overall
+				editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
+				left = item.location[0] / editPrintElementData.sketchWH.scale
+				top = item.location[1] / editPrintElementData.sketchWH.scale
+				editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
+			}
+			let pattern = {
+				centers:{left:0,top:0},
+				style:{
+					// left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
+					// top:(boor?top:Math.trunc(Math.random()*y)+1)+"px",
+					left:left+'px',
+					top:top+'px',
+					right:"auto",
+					bottom:"auto",
+					width:editPrintElementData.sketchWH.width*item.scale[0]+'px',
+					height:editPrintElementData.sketchWH.height*item.scale[1]+'px',
+					zIndex:item.priority,
+						// zIndex:this.printZIndex++
+				},
+				transform:{
+					rotateZ:item.angle?item.angle:0
+				},
+				designOpenrtionBtn:false
+			}
+			editPrintElementData.printZIndex++
+			item.pattern = pattern
+			if(item.ifSingle){
+				editPrintElementData.printStyleList[props.type].single.push(item)
+			}else{
+				editPrintElementData.printStyleList[props.type].overall = []
+				editPrintElementData.printStyleList[props.type].overall.push(item)
+			}
+		}
+		const setPosition = ()=>{
+			nextTick(()=>{
+				let img = new Image
+				img.onload = ()=>{
+					let scale = img.width / editPrintElementDom.sketchImg.offsetWidth
+					editPrintElementData.sketchWH = {
+						width:editPrintElementDom.sketchImg.offsetWidth,
+						height:editPrintElementDom.sketchImg.offsetHeight,
+						scale,
+					}
+					if(!editPrintElementData.selectDetail.printObject.prints)return
+					let state = true
+					editPrintElementData.stateOverallSingle = 'single'
+					let arr:any = editPrintElementData.selectDetail.printObject.prints
+					console.log(props.type)
+					if(props.type == 'element'){
+						arr = editPrintElementData.selectDetail.printObject.trims
+					}
+					if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
+						arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
+					}
+					if(arr && arr.length > 0){
+						arr.forEach((item:any)=>{
+							if(!item.ifSingle){
+								editPrintElementData.stateOverallSingle = 'overall',
+								state = false
+							}
+							getItemPosition(item)
+						})
+					}
+					if(props.type == 'print'){
+						editPrintElementData.overallSingle = state
+					}
+				}
+				img.src = editPrintElementData.selectDetail.undividedLayer
+			})
+		}
+		watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
+			if(!newVal)return
+			editPrintElementData.printStyleList[props.type] = {
+				single:[],
+				overall:[],
+			}
+			setPosition()
+		},{immediate: true,})
+		watch(()=>editPrintElementData.currentPrintElement,(newVal)=>{
+			if(newVal){
+				addPrintELement(newVal)
+			}
+		})
+		//设置移动
+		const itemMoveMousedown = (index:number,event:any)=>{
+			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
+			editPrintElementData.imgDomIndex = index
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
+				v.pattern.designOpenrtionBtn = false
+			})
+			if(!editPrintElementData.overallSingle){
+				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
+			}else{
+				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
+			}
+			let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
+				scale:scale,
+				rotateZ:rotateZ?rotateZ:0,
+			}
+			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
+			let left = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.left.replace(/px/g,''))
+			let top = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.top.replace(/px/g,''))
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.left = imgDomWH.x+event.offsetX-left
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.top = imgDomWH.y+event.offsetY-top
+			// document.addEventListener("mouseup", this.mouseup);
+			// document.addEventListener("mousemove", this.moveMousemove);
+			document.addEventListener('mousemove', mouseMove);
+			document.addEventListener('touchmove', touchmove);
+			document.addEventListener('mouseup', mouseup);
+			document.addEventListener('touchend', mouseup);
+		}
+		//设置尺寸
+		const itemSizeMousedown = (direction:any,event:any)=>{
+			editPrintElementData.direction = direction
+			editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
+			let scale = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
+			let rotateZ = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.designOpenrtionBtn = true
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.transform = {
+				scale:scale,
+				rotateZ:rotateZ?rotateZ:0,
+			}
+			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
+			let li = (document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
+			if(editPrintElementData.direction == 'right' || editPrintElementData.direction == 'bottom'){
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX-li
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY-li
+			}else{
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+			}
+			
+			// document.addEventListener("mouseup", this.sizeMouseup);
+			// document.addEventListener("mousemove", this.sizeMousemove);
+			document.addEventListener('mousemove', sizeMouseMove);
+			document.addEventListener('touchmove', sizeTouchmove);
+			document.addEventListener('mouseup', sizeMouseup);
+			document.addEventListener('touchend', sizeMouseup);
+		}
+		const mouseMove = (event:any)=>{
+			let e = getMousePosition(event,false)
+			mouseMoveOperation(e)
+		}
+		const touchmove = (event:any)=>{
+			let e = getMousePosition(event,true)
+			mouseMoveOperation(e)
+		}
+		//鼠标移动
+		const mouseMoveOperation = (e:any)=>{
+			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
+			let parentNode:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
+			parentNode = parentNode.getBoundingClientRect()
+			let x:any = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)+'px'
+			let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
+			if(!editPrintElementData.overallSingle){
+				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
+					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
+				}
+				if(x.replace(/px/g,'') <= 0){
+					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 0+'px'
+				}
+				if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
+					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = parentNode.height - imgDomWH.height+'px'
+				}
+				if(y.replace(/px/g,'') <= 0){
+					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 0+'px'
+				}
+			}
+		
+		}
+		const sizeMouseMove = (event:any)=>{
+			let e = getMousePosition(event,false)
+			sizeMouseMoveOperation(e)
+		}
+		const sizeTouchmove = (event:any)=>{
+			let e = getMousePosition(event,true)
+			sizeMouseMoveOperation(e)
+		}
+		const sizeMouseMoveOperation = (e:any)=>{
+			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
+			let parentNode =editPrintElementDom.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let num = width/height
+			let num1 = height/width
+			let w,h
+			//判断移动四个边
+			if(editPrintElementData.direction == 'right'){
+				w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)
+				h = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
+				width = w+'px'
+				height = w*num1+'px'
+			}else if(editPrintElementData.direction == 'top'){
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 'auto'
+				// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.bottom = parentNode.offsetHeight -imgDomWH.height - editPrintElementDom.imgDom.offsetTop+'px'
+				w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
+				h = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top - e.clientY)
+				
+				height = h+'px'
+				width = h*num+'px'
+			}else if(editPrintElementData.direction == 'bottom'){
+				h = (e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)
+				height = h+'px'
+				width = h*num+'px'
+			}else if(editPrintElementData.direction == 'left'){
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
+				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.right = parentNode.offsetWidth -imgDomWH.width - editPrintElementDom.imgDom.offsetLeft+'px'
+				w = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left - e.clientX)
+				width = w+'px'
+				height = w*num1+'px'
+			}
+			//判断尺寸是否到边
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.width = width
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.height = height
+
+		}
+		//鼠标抬起
+		const sizeMouseup = (e:any)=>{
+			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style={
+				right:'auto',
+				left:editPrintElementDom.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:editPrintElementDom.imgDom.offsetTop+'px',
+				height:editPrintElementDom.imgDom.offsetHeight+'px',
+				width:editPrintElementDom.imgDom.offsetWidth+'px',
+				zIndex:editPrintElementData.printZIndex
+			}
+			// document.removeEventListener("mouseup", sizeMouseup);
+			// document.removeEventListener("mousemove", sizeMousemove);
+			document.removeEventListener('mousemove',sizeMouseMove)
+			document.removeEventListener('touchmove',sizeTouchmove)
+			document.removeEventListener('mouseup',sizeMouseup) 
+			document.removeEventListener('touchend',sizeMouseup)
+		}
+		const mouseup = (e:any)=>{
+
+			// document.removeEventListener("mouseup", mouseup);
+			// document.removeEventListener("mousemove", moveMousemove);
+			document.removeEventListener('mousemove',mouseMove)
+			document.removeEventListener('touchmove',touchmove)
+			document.removeEventListener('mouseup',mouseup) 
+			document.removeEventListener('touchend',mouseup)
+		}
+		onMounted(()=>{
+			console.log(123123)
+			if(props.type == 'element'){
+				editPrintElementData.stateOverallSingle = 'single'
+				editPrintElementData.overallSingle = true
+			}
+		})
+		onBeforeUnmount(()=>{
+			previewDetailPrintData()
+		})
         return{
+			getMousePosition,
 			...toRefs(editPrintElementDom),
 			...toRefs(editPrintElementData),
 			setOveralSingle,
 			formatter,
+			itemMoveMousedown,
+			itemSizeMousedown,
+			deletePrint,
+			previewDetailPrintData,
         }
     },
+	directives:{
+		//操作旋转
+		rotote:{
+			mounted(el,value:any){
+				console.log(value)
+				let mousedown = function(event:any){
+					let e = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
 
+				let touchstart = function(event:any){
+					let e = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation =  (e:any) => {
+				let elParent:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
+				let mouse = true;
+				let angle  = 0
+				let num = 1
+				let x = 0
+				let y = 0
+				num = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.scale
+				angle = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ
+				// 添加鼠标按下事件监听器
+				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
+				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+					mouse = true;
+					var info = el.getBoundingClientRect();
+					let eX = info.x + info.width / 2;
+					let eY = info.y + info.height / 2;
+					let mouseMove = function(event:any){
+						let e = getMousePosition(event,false)
+						mouseMoveOperation(e)
+					}
+					let touchmove = function(event:any){
+						let e = getMousePosition(event,true)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = (e:any) => {
+						if (mouse) {
+							let X = eX 
+							let Y = eY
+							let x = e.clientX - X
+							let y = Y - e.clientY
+							angle = Math.atan2(x,y)*(180 / Math.PI)
+							if(elParent){
+								elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
+							}
+							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
+						}
+					}
+					// 添加鼠标松开事件监听器
+					let mouseup = () => {
+						value.instance.printStyleList[value.value[2] ][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ = angle
+						mouse = false;
+						// document.removeEventListener('mouseup',mouseup)
+						// document.removeEventListener('mousemove',mousemove)
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+					}
+					// document.addEventListener('mouseup', 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)
+			}
+
+			},
+	},
 	provide() {
 		return {
 		}
@@ -86,25 +611,32 @@ export default defineComponent({
 		> .printOverallBtn{
 			display: flex;
 			> .overallSlogin{
+				align-items: center;
 				display: flex;
 			}
 			.habit_Overal_Single_text {
-					font-weight: 600;
-					color: rgba(0, 0, 0, 0.5);
-					&.active {
-						color: rgba(0, 0, 0, 0.7);
-						// font-weight: 900;
-						// transform: scale(1.2);
-					}
+				font-weight: 600;
+				color: rgba(0, 0, 0, 0.5);
+				font-size: 1.8rem;
+				margin: 0 1rem;
+				&.active {
+					color: rgba(0, 0, 0, 0.7);
+					// font-weight: 900;
+					// transform: scale(1.2);
 				}
+			}
 			.habit_System_Designer {
 				transform: scale(.8);
-				width: 100%;
+				align-items: center;
+				display: flex;
 				.ant-slider-track,
 				.ant-slider-rail {
 					background-color: #e1e1e1;
 					border-radius: calc(0.5rem*1.2);
 				}
+				:deep(.system_silder){
+					width: 20rem;
+				}
 				.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
 				.ant-slider-handle {
 					background-color: #2d2e76 !important;
@@ -114,12 +646,215 @@ export default defineComponent({
 					box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
 				}
 				.habit_System_Designer_text{
-					font-size: calc(1.6rem*1.2);
+					font-size: 1.8rem;
 					color: rgba(0, 0, 0, 0.7);
+					margin-right: 3rem;
 					font-weight: 600;
 				}
 			}
 		}
-		
+		> .editPrintElementBox{
+			flex: 1;
+			overflow: hidden;
+			position: relative;
+			> .mark_loading{
+				position: absolute;
+			}
+			> .designOpenrtion_centent{
+				margin: 0 auto;
+				overflow: hidden;
+				justify-content: space-between;
+				user-select:none;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				max-width: 100%;
+				max-height: 100%;
+				transform: translate(-50%,-50%);
+				display: flex;
+				justify-content: center;
+				width: 100%;
+				&.active{
+					flex-direction: row;
+				}
+				.designOpenrtion_imgMask{
+					width: auto;
+					height: auto;
+					position: relative;
+					>img{
+						z-index: 2;
+						position: relative;
+						height: 100%;
+						width: 100%;
+
+					}
+					.designOpenrtion_sketch_mask{
+						z-index: 2;
+						// z-index: 3;
+						position: absolute;
+						inset: 0;
+						width: 100%;
+					}
+					>div{
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						top: 0;
+					}
+				}
+				.designOpenrtion_print{
+					z-index: 3;
+					.modal_imgItem{
+						position: absolute;
+						overflow: hidden;
+						top: 0;
+						img{
+							width: 100%;
+							height: 100%;
+							float: left;
+							user-select:none;
+							-webkit-user-drag: none;
+						}
+					}
+				}
+				.designOpenrtion_btn{
+					z-index: 3;
+					>div{
+						width: 100%;
+						height: 100%;
+						border: 2px solid rgb(20, 188, 255);
+						position: absolute;
+					}
+					ul{
+						list-style: none;
+						// width: 100%;
+						// height: 100%;
+						position: absolute;
+						top: 0;
+						left: 0;
+						box-sizing: border-box;
+						border: 2px solid rgb(20, 188, 255);
+						padding: 0;
+						-webkit-user-drag: none;
+						user-select:none;
+						opacity: 0;
+						margin: 0;
+					
+						&.designOpenrtion_Mouoverall{
+							opacity: 1;
+							border: none;
+							width: calc(1.4rem*1.2);
+							height: calc(1.4rem*1.2);
+							z-index: 2;
+							i{
+								display: flex;
+								color: #14bcff;
+								justify-content: center;
+								cursor: pointer;
+							}
+							.animtion1{
+								animation: anim 4s 2s linear infinite;
+								// animation-delay: .5;
+							}
+							.animtion2{
+								animation: anim 4s linear infinite;
+								position: absolute;
+								top: 0;
+								left: 0;
+							}
+							@keyframes anim{
+								0% {
+									opacity: 1;
+									transform: scale(1);
+								}
+								100% {
+									opacity: 0;
+									transform: scale(3);
+								}
+							}
+
+						}
+						li{
+							cursor: pointer;
+							// border-radius: 50%;
+							width: calc(2rem*1.2);
+							height: calc(2rem*1.2);
+							background-color: rgb(20, 188, 255);
+							position: absolute;
+							pointer-events: none;
+						}
+						&.active{
+							opacity: 1;
+							li{
+								pointer-events: auto;
+							}
+						}
+						.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
+							left: 50%;
+							transform: translate(-50%,-50%) ;
+							cursor: n-resize;
+						}
+						.designOpenrtion_btn_top{
+							top: 0;
+						}
+						.designOpenrtion_btn_bottom{
+							top: 100%;
+						}
+						.designOpenrtion_btn_left,.designOpenrtion_btn_right{
+							top: 50%;
+							transform: translate(-50%,-50%) ;
+							cursor: e-resize;
+						}
+						.designOpenrtion_btn_left{
+							left: 0;
+						}
+						.designOpenrtion_btn_right{
+							left: 100%;
+						}
+						.designOpenrtion_rotote{
+							top: 50%;
+							left: 50%;
+							transform: translate(-50%,-50%);
+							width: 0;
+							height: 0;
+						}
+						.designOpenrtion_delete{
+							position: absolute;
+							top: 0;
+							right: 0;
+							width: 2.5rem;
+							background: none;
+							transform: translate(100%, -100%);
+							height: 2.5rem;
+							img{
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.designOpenrtion_rotote::after{
+							position: absolute;
+							content: "";
+							background-color: #14bcff;
+							width: calc(.2rem*1.2);
+							height: calc(3rem*1.2);
+							left: 50%;
+							bottom: 0;
+							transform: translateX(-50%);
+						}
+						.designOpenrtion_rotote::before{
+							position: absolute;
+							content: "";
+							background-color: #14bcff;
+							top: calc(50% - 3rem*1.2);
+							left: 50%;
+							transform: translate(-50%,-50%) ;
+							width: calc(1.5rem*1.2);
+							height: calc(1.5rem*1.2);
+							border-radius: 50%;
+						}
+					}
+				}
+			}
+		}
 	}
 </style>

src/component/DetailCopy/detailRight/index.vue

@@ -7,7 +7,8 @@
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
 		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
 		<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
-		<editPrintElement v-if="currentDetailType === 'print' || currentDetailType === 'element'" :type="currentDetailType"></editPrintElement>
+		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
+		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
     </div>
     
 </template>
@@ -26,11 +27,16 @@ export default defineComponent({
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
+			editPrintElement:null as any,
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 		})
+		const privewDetail = ()=>{
+			if(detailData.editPrintElement?.previewDetailPrintData)detailData.editPrintElement.previewDetailPrintData()
+		}
         return{
 			...toRefs(detailData),
+			privewDetail,
         }
     },
 

src/component/DetailCopy/detailRight/sketchType.vue

@@ -5,7 +5,6 @@
 			<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
 		</div>
     </div>
-    
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'

src/component/DetailCopy/model/index.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="modelindex">
 		<div class="modelindex_left">
-			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')"></modelNav>
+			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem"></modelNav>
 		</div>
 		<div class="modelindex_right">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
 				<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
 
-
+				<i v-show="true" class="icon iconfont icon-chehui" @click="revocation"></i>
+				<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 				<!-- 编辑 -->
 				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
 				<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
@@ -17,16 +18,15 @@
 
 				<!-- 层 -->
 				<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
-				<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
-				<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
+				
 			</div>
-			<position ref="position" :imgDesignImg=imgDesignImg></position>
+			<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
 		</div>
 		
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
@@ -38,16 +38,14 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
-	emits:['detailEdit','canvasReload','addSketch'],
+	emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
 			
 		})
+		const setRevocation:any = inject('setRevocation')
 		const getDetailListData = reactive({
-			total:0,
-			pageSize:10,
-			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			isEditPattern:inject('isEditPattern') as any,
 			imgDesignImg:false,
@@ -62,6 +60,17 @@ export default defineComponent({
 		const showDesignImgDetail = (str:any)=>{
 			emit('detailEdit',str)
 		}
+		const deleteItem = ()=>{
+			setRevocation()
+		}
+		const revocation = ()=>{//撤回
+			emit('revocation')
+			getDetailListDom.position.updataPosition()
+		}
+		const oppositeRevocation = ()=>{//反撤回
+			emit('oppositeRevocation')
+			getDetailListDom.position.updataPosition()
+		}
 	
 		//图片按下样子
 		const mousedownDesignImg = ()=>{
@@ -73,6 +82,9 @@ export default defineComponent({
 			...toRefs(getDetailListDom),
 			getSubmitData,
 			showDesignImgDetail,
+			revocation,
+			deleteItem,
+			oppositeRevocation,
 			mousedownDesignImg,
         }
     },
@@ -89,7 +101,7 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 		display: flex;
-		padding-top: 3rem;
+		// padding-top: 3rem;
 		flex: 1;
 		overflow: hidden;
 		.modelindex_right,.modelindex_left{
@@ -102,12 +114,14 @@ export default defineComponent({
 		> .modelindex_right{
 			flex: 1;
 			overflow: hidden;
+
 			> .detail_btn{
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
 				border-radius: 1rem;
 				padding: .7rem ;
+				flex-shrink: 0;
 				> i{
 					font-size: 2rem;
 					line-height: 4rem;

src/component/DetailCopy/model/modelNav.vue

@@ -22,7 +22,7 @@ export default defineComponent({
     components:{
 		position,
     },
-	emits:['canvasReload','addSketch'],
+	emits:['canvasReload','addSketch','deleteItem'],
     setup(props,{emit}) {
         const store = useStore();
 		const {t} = useI18n()
@@ -66,6 +66,7 @@ export default defineComponent({
 			detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
 			detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
 			detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
+			emit('deleteItem')
 		}
 		const addSketch = ()=>{
 			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')

src/component/DetailCopy/model/modelPosition.vue

@@ -37,6 +37,7 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import { getMousePosition } from "@/tool/mdEvent";
+import { Modal,message } from 'ant-design-vue';
 import newFollowVue from '@/component/Account/message/newFollow.vue';
 export default defineComponent({
     components:{
@@ -47,11 +48,15 @@ export default defineComponent({
 			type:Boolean,
 		}
 	},
+	emits:['canvasReload'],
     setup(props,{emit}) {
+		const {t} = useI18n()
         const store = useStore();
 		const detailData = reactive({
 			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			isEditPattern:inject('isEditPattern') as any
+
 		})
 		const selectItem = reactive({
 		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
@@ -183,7 +188,45 @@ export default defineComponent({
 			// 	this.designItemDetail.clothes[index].clothesOpenItem = true
 			// }
 		}
-		const itemMoveMousedown = (index:any,e:any)=>{
+		const itemMoveMousedown = async (index:any,e:any)=>{
+			let isOpen = false
+			let isModal = false
+			await new Promise((resolve, reject) => {
+				if(
+					detailData.isEditPattern.value && 
+					selectItem.selectDetail?.id && 
+					(detailData.frontBack.front[index].id != selectItem.selectDetail.id)
+				){
+					isModal = true
+					Modal.confirm({
+						title: t('collectionModal.jsContent2'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							resolve(true)
+							isOpen = true
+						},
+						onCancel(){
+							resolve(false)
+							isOpen = false
+						}
+					});
+				}else{
+					resolve(true)
+					isModal = false
+				}
+			}).then((rv)=>{
+			})
+			if(isOpen){
+				store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
+				emit('canvasReload')	
+				return 
+			}						
+			
+			if(isModal)return						
 			store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
 			selectItem.imgDomIndex = index
 			detailData.frontBack.front.forEach((v:any)=>{
@@ -273,6 +316,27 @@ export default defineComponent({
 			detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
 			clothesOpenActive(index)
 		}
+		const updataPosition = ()=>{
+			let url = detailData.frontBack?.body?.path
+			let sacle = 0
+			const img = new Image();
+				img.onload = () => {
+					let dom:any = document.querySelector('.molepositon .perview_img')
+					// resolve(img)
+					sacle = dom.parentNode.offsetWidth / img.width
+					detailData.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							item.style[key] = item.style[key]*sacle+'px'
+						}
+						for (const key in detailData.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
+						}
+					});
+				};
+				img.src = url;
+		}
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListDom),
@@ -283,6 +347,7 @@ export default defineComponent({
 			setpitch,
 			getSubmitData,
 			getMousePosition,
+			updataPosition,
         }
     },
 	directives:{
@@ -303,8 +368,6 @@ export default defineComponent({
 							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
 						}
 					});
-
-					console.log(el.parentNode.offsetWidth);
 				};
 				img.src = data.value;
 			}
@@ -320,7 +383,8 @@ export default defineComponent({
 <style lang="less" scoped>
     .molepositon{
 		width: 30rem;
-		height: 80rem;
+		height: 65rem;
+		// height: 80rem;
 		display: flex;
 		flex-direction: column;
 		// margin: auto 0;
@@ -337,11 +401,14 @@ export default defineComponent({
 			position: relative;
 			height: 100%;
 			// overflow: hidden;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			>img{
 				z-index: 2;
 				position: relative;
-				width: 100%;
-				// height: 100%;
+				// width: 100%;
+				height: 100%;
 				object-fit: contain;
 			}
 			>div{
@@ -350,6 +417,7 @@ export default defineComponent({
 			}
 			.detail_modal_item_front,.designOpenrtion_print{
 				z-index: 2;
+				height: 100%;
 				img{
 					width: 100%;
 					height: 100%;
@@ -369,6 +437,7 @@ export default defineComponent({
 			}
 			> .designOpenrtion_btn{
 				z-index: 99;
+				left: 0;
 				ul{
 					list-style: none;
 					// width: 100%;