detail更新

public/js/fabric.brushes.js

@@ -176,7 +176,10 @@ fabric.BaseBrush.prototype.convertToImg = function() {
 		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
 		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
 		'scaleX':1/pixelRatio/this.canvas.getZoom(),
-		'scaleY':1/pixelRatio/this.canvas.getZoom()
+		'scaleY':1/pixelRatio/this.canvas.getZoom(),
+		custom:{
+			type:'pencil'
+		}
 	}).setCoords();
 	this.canvas.add(img).clearContext(this.canvas.contextTop);
 	this.canvas.clearContext(this.canvas.contextTop);

src/assets/style/style.css

@@ -887,10 +887,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel.fullScreen {
   max-width: 100%;
 }
-.generalModel.fullScreen .ant-modal-content {
+.generalModel.fullScreen > .ant-modal-content {
   border-radius: 0rem;
 }
-.generalModel.fullScreen .ant-modal-body {
+.generalModel.fullScreen > .ant-modal-body {
   padding: 2.5rem 3rem;
 }
 .generalModel .ant-modal-content {

src/assets/style/style.less

@@ -960,10 +960,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	height: calc(65rem*1.2);
 	&.fullScreen{
 		max-width: 100%;
-		.ant-modal-content{
+		> .ant-modal-content{
 			border-radius: 0rem;
 		}
-		.ant-modal-body{
+		> .ant-modal-body{
 			padding: 2.5rem 3rem;
 		}
 	}

src/component/Canvas/argument.vue

@@ -167,6 +167,7 @@
 		}
 		input{
 			height: 100%;
+			width: 12rem;
 		}
 		&.wH input{
 			width: 5rem;

src/component/Canvas/index.vue

@@ -52,7 +52,7 @@ export default defineComponent({
 		let liquefactionData = ref()
 		let groupDashed = ref(null)//用来判断是否需要对group添加img
 		let canvasType = 'export'
-		let canvasObj = reactive(canvasGeneral)
+		let canvasObj = reactive(new canvasGeneral())
 		provide('canvasType',canvasType)
 		provide('canvasObj',canvasObj)
 		provide('isShowMark',isShowMark)

src/component/Detail/addDetails.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="addDetailsModal" ref="addDetailsModal"></div>
+	<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
     <a-modal
         class="addDetails_modal generalModel"
         v-model:visible="addDetails"
@@ -49,7 +49,7 @@ export default defineComponent({
         let addDetails = ref(false);
 		let init = (data,index)=>{
 			addDetails.value = true
-			addDetail.imgUrl = data.path
+			addDetail.imgUrl = data.sketchString || data.path
         }
 		let submitBase64Data = (data)=>{
 			emit('setSloganData',data)
@@ -77,6 +77,10 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
+.addDetailsModal{
+	width: 0;
+	height: 0;
+}
 .addDetails_modal {
     .closeIcon {
         z-index: 2;

src/component/Detail/editFrontBack.vue

@@ -1,50 +1,51 @@
 <template>
 	<div class="editFrontBack_center">
-		<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
+		<!-- <div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
-			<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
-				<div>新增</div>
-			</div> -->
 			<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 			<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-			<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
 			<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
-			<!-- <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> -->
 			<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(255,0,0)')}" title="front">front</div>
 			<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(0,255,0)')}" title="back">back</div>
 			<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</div>
 			<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
-			<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
+		</div> -->
-		</div>
 		<div class="exportCanvasBox_center_box">
 			<div class="exportCanvasBox_center">
 				<div class="editFrontBack_bgImg" v-show="loadingShow">
 					<img :src="imgData?.undividedLayer" alt="">
 				</div>
+				<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
+
 			</div>
-			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
+			<!-- <div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div> -->
+<!-- 
+			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
+			{{frontBackCanvasObj.pencilbtnStyle}} -->
 		</div>
 	</div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, inject, onMounted, nextTick, toRefs, onBeforeUnmount, watch, computed } from "vue";
 import { formatTime,segmentImage } from "@/tool/util";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { getMousePosition } from "@/tool/mdEvent";
+import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import canvasGeneral from "@/tool/canvasGeneral";
 export default defineComponent({
     components: {
     },
 	// emits: ['setSloganData'],
 	props:['patchData','imgDomIndex'],
     setup(props,{emit}) {
+        const store = useStore();
         let presentState = ref('paypal');
         let loadingShow = ref(false);
         let { t } = useI18n();
-        let canvas = reactive({});
+        // let canvas = new frontBackCanvasObjCopy();
+        let canvas = null;
+		let frontBackCanvasObj = inject('frontBackCanvasObj')
 		let ratio = [1,1]
 		let exportWH = 0
-		let imgDomIndex = 0
 		let imgData = ref()
 		let pencilbtnStyle = ref({
 			background:'',
@@ -54,17 +55,20 @@ export default defineComponent({
 			left:0+'px',
 			top:0+'px',
 		})
+		let selectDetail = computed(()=>store.state.DesignDetailCopy.selectDetail)
+
 		// let a = computed(()=>{
 		// 	console.log(123);
 		// 	return props.patchData
 		// })
-		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
+		watch(()=>pencilbtnStyle.value.background,(newVal)=>{
-			if(newVal == -1) return
+			frontBackCanvasObj.brushwork.color = newVal
-			imgDomIndex = newVal
+			frontBackCanvasObj.setPencilColor()
+		})
+		onMounted(()=>{
 			props.patchData.front.imageUrl=  ''
 			clearTimeout(setTimeSubmit)
-			
+			// init(props.patchData.front[props.imgDomIndex],'')
-			init(props.patchData.front[newVal],'')
 		})
 		let canvasBtn = reactive({
 			canvasState:'move',
@@ -76,11 +80,10 @@ export default defineComponent({
 		})
 		let canvasWH = ref(0);
 		
-		let exportUrl = ''
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
-		let canvasState = ref()//存放canvas操作
+
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+		let down = false
 		let init = (data,index)=>{
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -89,8 +92,6 @@ export default defineComponent({
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
 				let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
-				document.addEventListener("keydown", canvasKeyDown);
-				document.addEventListener("keyup", canvasKeyUp);
 				document.removeEventListener('mousemove', mouseMove);
 				document.removeEventListener('touchmove', touchmove);
 				let img = new Image();
@@ -114,70 +115,39 @@ export default defineComponent({
 					editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
 					editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
 					ratio = [wScale,hScale]
-					canvas = canvasGeneral.canvasInit(canvasBox,{
+					// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
+					// 	width:canvasWH.value * wScale,
+					// 	height:canvasWH.value * hScale,
+					// })
+					await frontBackCanvasObj.canvasInit(canvasBox,{
 						width:canvasWH.value * wScale,
 						height:canvasWH.value * hScale,
-					})
+					},data.undividedLayer)
+					canvas = frontBackCanvasObj.canvas
+
+					frontBackCanvasObj.setOperation('pencil')
 					pencilbtnStyle.value.background = rgba.value
+					console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
+					frontBackCanvasObj.setPencilWidth()
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					exportUrl = data.maskUrl
+					await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'')
-					// canvas.on('mouse:wheel', opt => {
+					// await new Promise((resolve, reject) => {
-					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
+					// 	fabric.Image.fromURL(data.maskUrl, function(img) {
-					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
+					// 		// 设置背景图对象的宽度和高度与 canvas 相同
-					// 	zoom *= 0.999 ** delta
+					// 		canvas.add(img)
-					// 	if (zoom > 20) zoom = 20
+					// 		resolve('')
-					// 	if (zoom < 0.01) zoom = 0.01
+					// 	},{ crossOrigin: "Anonymous" });
-					// 	// console.log(zoom);
-					// 	canvas.zoomToPoint(
-					// 		{ // 关键点
-					// 		x: opt.e.offsetX,
-					// 		y: opt.e.offsetY
-					// 		},
-					// 		zoom
-					// 	)
-					// 	opt.e.preventDefault()
-					// 	opt.e.stopPropagation()
 					// })
-					await new Promise((resolve, reject) => {
-						fabric.Image.fromURL(data.maskUrl, function(img) {
-							// 设置背景图对象的宽度和高度与 canvas 相同
-							img.scaleToWidth(canvas.width);
-							img.scaleToHeight(canvas.height);;
-							img.set({
-								// width: canvas.width,
-								// height: canvas.height,
-								// scaleX:2,
-								// scaleY:1,
-								scaleX: canvas.width / img.width,
-								scaleY: canvas.height / img.height
-							});
-							// 将背景图添加到 canvas 的底层
-							// canvas.add(img);
-							canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-							if(!fabric.Object.prototype.controls.deleteControl){
-								JSSetRemoveImage(deleteObj)
-							}else{
-								fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-							}
-							setPencilWidth()
-							updateCanvasState()
-							resolve('')
-						},{ crossOrigin: "Anonymous" });
-					})
 					
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
-							updateCanvasState('mouseUp')
-						}
-					});
 					
 					//画布上移动
 					// canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.on('mouse:up', (event)=> {
+						updateCanvasState('mouseUp')
+					});
 					document.addEventListener('mousemove', mouseMove);
 					document.addEventListener('touchmove', touchmove);
-					setOperation('pencil')
 					createSetTimeSubmit()
 					img.remove()
 				}
@@ -185,128 +155,15 @@ export default defineComponent({
 				
 			})
         }
-		let canvasKeyDown = (event) => {
+		const setBackground = (value)=>{
-			if(keyDown.indexOf(event.key)>-1){
+			if(value == 'background'){
+				frontBackCanvasObj.setOperation('eraser')
 			}else{
-				keyDown.push(event.code)
+				frontBackCanvasObj.setOperation('pencil')
-				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
+				frontBackCanvasObj.brushwork.color = value
-					historyState('reverse')
+				frontBackCanvasObj.pencilColor()
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
-				}
 			}
 		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-				
-			}
-		let setClone = ()=>{
-			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
-			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
-			if(oldCanvasDom)oldCanvasDom.remove()
-			if(oldCanvasDom1)oldCanvasDom1.remove()
-			loadingShow.value = false
-		}
-		let clearCanvas = ()=>{
-			document.removeEventListener("keydown", canvasKeyDown);
-			document.removeEventListener("keyup", canvasKeyUp);
-		}
-		let rgba = ref('rgb(255,0,0)')
-		let mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setCanvasMove(e)
-		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setCanvasMove(e)
-		}
-		let setCanvasMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setOperation = (str)=>{
-			if(!canvas)return
-			canvasBtn.canvasState = str
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				// rgba.value = 'rgb(255,255,255)'
-				pencilbtnStyle.value.display = `block`
-			}
-		}
-		let setOperationColor = (color)=>{
-			pencilbtnStyle.value.background = color
-			rgba.value = color
-			canvas.freeDrawingBrush.color = color
-			setOperation('pencil')
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setPencil = ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-			canvas.freeDrawingBrush.color = rgba.value
-			pencilbtnStyle.value.background = rgba.value
-			canvas.freeDrawingBrush.isEraser = false
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			pencilbtnStyle.value.background = `rgb(255,255,255)`
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-		}
-		let deleteObj = ()=> {
-			// if(!canvas.getActiveObjects()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOutWidth
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOutWidth)
-			setTimeOutWidth = setTimeout(()=>{
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
-				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-
-			},300)
-		}
-		let setTimeSubmit = null
-		let createSetTimeSubmit = ()=>{
-			setSubmit()
-		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				// editFrontBackPencilbtn.value.style.display = 'none'
@@ -316,103 +173,92 @@ export default defineComponent({
 					createSetTimeSubmit()
 				},1000)
 			}
-			const canvasAsJson = JSON.stringify(canvas.toJSON());
+		}
-			normalCanvasState.value.push(canvasAsJson);
+		let setClone = ()=>{
+			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
+			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
+			if(oldCanvasDom)oldCanvasDom.remove()
+			if(oldCanvasDom1)oldCanvasDom1.remove()
+			loadingShow.value = false
+		}
+		let rgba = ref('#ff0000')
+		let mouseMove = (event)=>{
+			let e = getMousePosition(event,false)
+			setCanvasMove(e)
+		}
+		let touchmove = (event)=>{
+			let e = getMousePosition(event,true)
+			setCanvasMove(e)
+		}
+		let setCanvasMove = (event)=>{
+			if(canvas.isDrawingMode && canvas){
+				canvas.setCursor('none');
+			}
+			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
+			if(!canvasCenterBox)return
+			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
+			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
+			pencilbtnStyle.value.left = parentX + "px"
+			pencilbtnStyle.value.top =  parentY+'px'
+		}
+		let mousedown = (e)=>{
+			if(e.target instanceof HTMLCanvasElement){
+				down = true
+			}
+		}
+		let mouseup = (e)=>{
+			console.log(down);
+			if(down){
+				nextTick(()=>{
+					createSetTimeSubmit()
+				})
+			}
+			down = false
+		}	
+		let setTimeSubmit = null
+		let createSetTimeSubmit = ()=>{
+			setSubmit()
 		}
 		//撤回
-		let historyState = (str)=> {
+		
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
+		let setSubmit = async ()=>{
-				let obj = reverseCanvasState.value.pop()
+			// let data = await frontBackCanvasObj.allExport()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+			let data = await frontBackCanvasObj.detailSubmit()
-				canvasState.value = obj 
+			// props.props.patchData.front[imgDomIndex].imageUrl = data
-				normalCanvasState.value.push(obj);
+			let mark = data
-			}else if(str == '' && normalCanvasState.value.length > 1){
+			let full = props.patchData.front[props.imgDomIndex].undividedLayer
-				let obj = normalCanvasState.value.pop()
+			let size = {
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				width: Math.round(exportWH * ratio[0]),
-				reverseCanvasState.value.push(obj);
+				height: Math.round(exportWH * ratio[1]),
-			}else{
-				return
 			}
-			canvas.loadFromJSON(canvasState.value, () => {
+			segmentImage(mark,full,size).then((rv)=>{
-				createSetTimeSubmit()
+				// 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
-		let setSubmit = ()=>{
+				store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:data})
-			var allObjects = canvas.getObjects('path');
-			var canvasDom = document.createElement("canvas");
-			let exportCanvas = new fabric.Canvas(canvasDom, {
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-				isDrawingMode: false, // 开启绘图模式
-			});
-			canvas.backgroundImage.clone((back)=>{
-				back.scaleToWidth(exportCanvas.width);
-				back.scaleToHeight(exportCanvas.height);
-				back.set({
-					scaleX: exportCanvas.width / back.width,
-					scaleY: exportCanvas.height / back.height
-				})
-				let scale = exportCanvas.height/canvas.height
-				exportCanvas.backgroundImage = back
-				allObjects.forEach((item,index)=>{
-					// let obj = fabric.util.object.clone(item);
-					if(item.type == 'circle')return
-					let obj 
-					item.clone((cloned)=>{
-						obj = cloned
-					})
-					obj.set(
-						{
-							scaleX:(item.scaleX?item.scaleX:1)*scale,
-							scaleY:(item.scaleY?item.scaleY:1)*scale,
-							left:item.left*scale,
-							top:item.top*scale,
-						}
-					)
-					exportCanvas.add(obj)
-					
-				})
-				let data = exportCanvas.toDataURL('png')
-				cancelDsign()
-				clearCanvas()
-				// props.props.patchData.front[imgDomIndex].imageUrl = data
-				let mark = data
-				let full = props.patchData.front[imgDomIndex].undividedLayer
-				let size = {
-					width: Math.round(exportWH * ratio[0]),
-					height: Math.round(exportWH * ratio[1]),
-				}
-				segmentImage(mark,full,size).then((rv)=>{
-					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
-					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
-					props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
-					props.patchData.front[imgDomIndex].maskUrl = data
-				})
-				return
 			})
 		}
-		let cancelDsign = ()=>{
+		onBeforeUnmount(()=>{
-			
+			frontBackCanvasObj.canvasClear()
-			document.removeEventListener('keydown',canvasKeyDown);
+			document.removeEventListener('mousemove', mouseMove);
-			document.removeEventListener('keyup', canvasKeyUp);
+			document.removeEventListener('touchmove', touchmove);
-		}
+			document.removeEventListener('mousedown', mousedown);
+			document.removeEventListener('mouseup', mouseup);
+		})
         return {
+			frontBackCanvasObj,
             presentState,
 			loadingShow,
 			imgData,
 			pencilbtnStyle,
             t,
 			...toRefs(canvasBtn),
-			rgba,
+			setBackground,
 			init,
-			setOperation,
-			setOperationColor,
-			setPencilWidth,
-			historyState,
 			setSubmit,
 			setClone,
-			cancelDsign,
         };
     },
     data() {
@@ -529,13 +375,13 @@ export default defineComponent({
 		}
 	}
 	.exportCanvasBox_center_box{
-		padding: 3rem;
 		height: 100%;
 		flex: 1;
 		position: relative;
 		overflow: hidden;
 		width: 100%;
 		background: #e6e6e6;
+		cursor: auto;
 		&:hover{
 			cursor: none;
 		}
@@ -554,12 +400,12 @@ export default defineComponent({
 		height: 100%;
 		position: relative;
 		// overflow: scroll;
-		
+		cursor: none;
 		:deep(.canvas-container){
 			left: 50%;
 			top: 50%;
 			transform: translate(-50%,-50%);
-			opacity: .5;
+			// opacity: .5;
 			// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
 		}
 		.editFrontBack_bgImg{

src/component/DetailCopy/canvas/argument.vue

@@ -1,81 +1,124 @@
 <template>
 	<div class="canvasArgument">
-		 <div class="label_item wH">
+		 <!-- <div class="label_item wH">
 			 <div class="title">{{ $t('exportModel.Width') }}</div>
 			 <input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
 		 </div>
 		 <div class="label_item wH">
 			 <div class="title">{{ $t('exportModel.Height') }}</div>
 			 <input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
+		 </div> -->
+		 <div v-show="isEditFrontBack" class="frontBack">
+			<div class="label_item" @click.stop="setOperation('print')">
+				<div class="title">color</div>
+				<a-select
+					v-model:value="frontBackData"
+					:options="frontBackDataList"
+					size="large"
+					:fieldNames="{ label: 'name', value: 'value' }"
+					style="width:12rem;"
+					@change="changeFrontBackData"
+				>
+					<template #suffixIcon
+						><span
+							class="icon iconfont icon-xiala"
+							style="color: #343579"
+						></span
+					></template>
+				</a-select>
+			</div>
+			<div class="label_item">
+				<div class="titile">{{ $t('exportModel.Size') }}:</div>
+				<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
+
+				<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
+			</div>
 		 </div>
-		 <div class="label_item" v-show="
+		 <div v-show="!isEditFrontBack" class="sketch">
-			 canvasGeneral.operation != 'movePosition' && 
+			<div class="label_item" @click.stop="setOperation('print')">
-			 canvasGeneral.operation != 'move' && 
+				<div class="title">print</div>
-			 canvasGeneral.operation != 'eraser' && 
+				<div class="current"></div>
-			 canvasGeneral.operation != 'texture' && 
+				<div class="drop" v-show="operation == 'print'">
-			 canvasGeneral.operation != 'zoomIn'  && 
+					<selectList @selectImgItem="selectImgItem" type="print" :catecoryList="printCatecoryList"></selectList>
-			 canvasGeneral.operation != 'zoomOut' && 
+				</div>
-			 canvasGeneral.operation != 'dashedPencil' && 
+			</div>
-			 canvasGeneral.operation != 'dashed'">
+			<div class="label_item" @click.stop="setOperation('element')">
-			 <div class="title">{{ $t('exportModel.Color') }}</div>
+				<div class="title">element</div>
-			 <input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
+				<div class="current"></div>
-			 <span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
+				<div class="drop" v-show="operation == 'element'">
-			 <div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
+					<selectList @selectImgItem="selectImgItem" type="element" :catecoryList="designElementsType"></selectList>
-				 <div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
+				</div>
-			 </div>
+			</div>
-		 </div>
+			<div class="label_item" v-show="
-		 <div class="label_item" v-show="
+				canvasGeneral.operation != 'movePosition' && 
-			 canvasGeneral.operation != 'movePosition' && 
+				canvasGeneral.operation != 'move' && 
-			 canvasGeneral.operation != 'move' && 
+				canvasGeneral.operation != 'eraser' && 
-			 canvasGeneral.brushwork.value != 'RibbonBrush' && 
+				canvasGeneral.operation != 'texture' && 
-			 canvasGeneral.brushwork.value != 'LongfurBrush'&& 
+				canvasGeneral.operation != 'zoomIn'  && 
-			 canvasGeneral.operation != 'zoomIn'  &&
+				canvasGeneral.operation != 'zoomOut' && 
-			 canvasGeneral.operation != 'zoomOut' && 
+				canvasGeneral.operation != 'dashedPencil' && 
-			 canvasGeneral.operation != 'dashedPencil' && 
+				canvasGeneral.operation != 'dashed'">
-			 canvasGeneral.operation != 'dashed'">
+				<div class="title">{{ $t('exportModel.Color') }}</div>
-			 <div >{{ $t('exportModel.Size') }}:</div>
+				<input style="width: 7rem;" type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
-			 <input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
+				<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
-		 </div>
+				<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
-		 <div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
+					<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
-			 <div >{{ $t('exportModel.Brushwork') }}:</div>
+				</div>
-			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
+			</div>
-				 style="width: 12rem "
+			<div class="label_item" v-show="
-				 @change="canvasGeneral.brushworkChange"
+				canvasGeneral.operation != 'movePosition' && 
-				 >
+				canvasGeneral.operation != 'move' && 
-				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
+				canvasGeneral.brushwork.value != 'RibbonBrush' && 
-					 <img style="width: 100%;" :src="item.url" alt="">
+				canvasGeneral.brushwork.value != 'LongfurBrush'&& 
-				 </a-select-option>
+				canvasGeneral.operation != 'zoomIn'  &&
-			 </a-select>
+				canvasGeneral.operation != 'zoomOut' && 
-		 </div>
+				canvasGeneral.operation != 'dashedPencil' && 
-		 <div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
+				canvasGeneral.operation != 'dashed'">
-			 <div >{{ $t('exportModel.Texture') }}:</div>
+				<div class="title">{{ $t('exportModel.Size') }}:</div>
-			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
+				<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
-				 style="width: 12rem "
+			</div>
-				 @change="canvasGeneral.textureValueChange"
+			<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
-				 >
+				<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
-				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
+				<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
-					 <img :src="item.url" alt="">
+					style="width: 12rem "
-				 </a-select-option>
+					@change="canvasGeneral.brushworkChange"
-			 </a-select>
+					>
-		 </div>
+					<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
-		 <div class="label_item" v-show="
+						<img style="width: 100%;" :src="item.url" alt="">
-			 canvasGeneral.operation != 'pencil' && 
+					</a-select-option>
-			 canvasGeneral.operation != 'eraser'&&
+				</a-select>
-			 canvasGeneral.operation != 'movePosition' && 
+			</div>
-			 canvasGeneral.operation != 'move'&&
+			<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
-			 canvasGeneral.operation != 'text'&&
+				<div class="title">{{ $t('exportModel.Texture') }}:</div>
-			 canvasGeneral.operation != 'texture'&&
+				<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
-			 canvasGeneral.operation != ''&& 
+					style="width: 12rem "
-			 canvasGeneral.operation != 'zoomIn'  && 
+					@change="canvasGeneral.textureValueChange"
-			 canvasGeneral.operation != 'zoomOut' && 
+					>
-			 canvasGeneral.operation != 'dashedPencil' && 
+					<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
-			 canvasGeneral.operation != 'dashed'">
+						<img :src="item.url" alt="">
-			 <div >{{ $t('exportModel.FillBack') }}:</div>
+					</a-select-option>
-			 <div class="leftAlign">
+				</a-select>
-				 <i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+			</div>
-				 <i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+			<div class="label_item" v-show="
-			 </div>
+				canvasGeneral.operation != 'pencil' && 
+				canvasGeneral.operation != 'eraser'&&
+				canvasGeneral.operation != 'movePosition' && 
+				canvasGeneral.operation != 'move'&&
+				canvasGeneral.operation != 'text'&&
+				canvasGeneral.operation != 'texture'&&
+				canvasGeneral.operation != ''&& 
+				canvasGeneral.operation != 'zoomIn'  && 
+				canvasGeneral.operation != 'zoomOut' && 
+				canvasGeneral.operation != 'dashedPencil' && 
+				canvasGeneral.operation != 'dashed'">
+				<div class="title">{{ $t('exportModel.FillBack') }}:</div>
+				<div class="leftAlign">
+					<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+					<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+				</div>
+			</div>
 		 </div>
+		
 		 <!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
 			 <div >{{ $t('exportModel.Layer') }}:</div>
 			 <div class="leftAlign">
@@ -85,32 +128,55 @@
 				 <i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
 			 </div>
 		 </div> -->
-		 <div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
-			 <div>Font Family</div>
-			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
-				 style="flex: 1;width: 15rem;"
-				 @change="canvasGeneral.setFontFamily"
-				 :style="{'font-family':canvasGeneral.fontFamily}"
-				 >
-				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-					 {{item.name}}
-				 </a-select-option>
-			 </a-select>
-		 </div>
 	 </div>
  </template>
  
  <script lang="ts">
-	 import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	 import { defineComponent,ref,reactive,computed,toRefs,inject, watch, nextTick} from 'vue'
+	 import library from '../detailLeft/module/libraryList.vue'
+	 import upload from '../detailLeft/module/uploadList.vue'
+	 import selectList from '../detailLeft/module/selectList.vue'
+
+	import { useStore } from "vuex";
 	 export default defineComponent({
-		 components:{},
+		 components:{selectList},
-		 setup(){
+		props: ['isEditFrontBack'],
+		emits: ['setFrontBackColor'],
+		 setup(props,{emit}){
+	        const store = useStore();
 			 let testModal = ref(true)
 			 let canvasGeneral:any = inject('canvasObj')
+			 let frontBackCanvas:any = inject('frontBackCanvasObj')
 			 const data = reactive({
 				 colorHistoryList:[],
 				 operation:'',
+				 printCatecoryList:computed(()=>{
+					return store.state.UserHabit.printType
+				}),
+				designElementsType:computed(()=>{
+					return store.state.UserHabit.designElementsType;
+				}),
+				frontBackData:'#ff0000',
+				frontBackDataList:[
+					{
+						name:'正面',
+						value:'#ff0000'
+					},{
+						name:'反面',
+						value:'#00ff00'
+					},{
+						name:'背景',
+						value:'background'
+					},
+				]
 			 })
+			 watch(()=>props.isEditFrontBack,(newVal)=>{
+				if(newVal){
+					nextTick(()=>{
+						data.frontBackData = '#ff0000'
+					})
+				}
+			})
 			 const setOperation = (str:any)=>{
 				 data.operation = str
 			 }
@@ -121,12 +187,22 @@
 			 const closeModal = ()=>{
 				 document.removeEventListener('click',setOper)
 			 }
+			 const selectImgItem = (data:any)=>{
+				data.minioUrl = data.url
+				canvasGeneral.addPartImg(data,'print')
+			}
+			const changeFrontBackData = (value:any)=>{
+				emit('setFrontBackColor',value)
+			}
 			 return {
 				 canvasGeneral,
+				 frontBackCanvas,
 				 ...toRefs(data),
 				 testModal,
 				 setOperation,
 				 closeModal,
+				 selectImgItem,
+				 changeFrontBackData,
 			 }
 		 }
 	 });
@@ -134,9 +210,11 @@
  
  <style lang='less' scoped>
  .canvasArgument{
-	 display: flex;
-	 flex-wrap: wrap;
 	 height: 100%;
+	 >div{
+		display: flex;
+		flex-wrap: wrap;
+	 }
 	 .label_item{
 		 margin-right: 2rem;
 		 position: relative;
@@ -145,6 +223,24 @@
 		 .leftAlign{
 			 display: flex;
 		 }
+		 > .current{
+			border-radius: 3rem;
+			height: 3rem;
+			width: 7rem;
+			border: 1px solid #000;
+		 }
+		 > .drop{
+			position: absolute;
+			z-index: 22;
+			top: 4rem;
+			background: #fff;
+			border: 1px solid #000;
+			border-radius: 2rem;
+			padding: 2.4rem;
+			width: 40rem;
+			height: 50rem;
+			display: flex;
+		}
 		 .labelHover_show{
 			 position: absolute;
 			 width: 100%;
@@ -166,22 +262,48 @@
 			 }
 		 }
 		 input{
-			 height: 100%;
+			height: 100%;
+			border-radius: 3rem;
+			width: 12rem;
+			background: #fff;
+			height: 3rem;
+			border: 1px solid #000;
 		 }
 		 &.wH input{
 			 width: 5rem;
 		 }
 		 .title{
 			 margin-right: 1rem;
+			 font-weight: 600;
+			 font-size: 1.8rem;
 		 }
-		 .icon-xiala{
+		 :deep(.ant-select){
+			height: 3rem;
+			border-radius: 3rem;
+			.ant-select-selector{
+				height: 100%;
+				border-radius: 3rem;
+				border: 1px solid;
+				.ant-select-selection-item{
+					display: flex;
+					font-size: 2rem;
+					line-height: 3rem;
+				}
+			}
+		 }
+		 
+	 }
+	 &.sketch{
+		.icon-xiala{
 			 cursor: pointer;
 			 transform: rotate(0deg);
 			 height: 4rem;
 			 width: 4rem;
 			 transition: all .3s;
-			 line-height: 4rem;
+			 line-height: 1;
 			 text-align: center;
+			 display: flex;
+			align-items: center;
 			 &.active{
 				 transform: rotate(180deg);
 			 }

src/component/DetailCopy/canvas/canvasContent.vue

@@ -1,12 +1,8 @@
 <template>
 	<div class="canvasContent_box">
 		<div class="canvasContent" ref="canvasScaleDom">
-			<div v-if="isPresuppose" class="generalCanvas_center presuppose">
+			<div class="generalCanvas_center canvas" ref="canvasDom">
-				<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark"></div>
-				<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
-				<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
-			</div>
-			<div v-else class="generalCanvas_center canvas" ref="canvasDom">
 				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
 			</div>
 		</div>
@@ -14,30 +10,54 @@
 </template>
 
 <script lang="ts">
-	import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, onBeforeUnmount} from 'vue'
 	import { Modal,message } from 'ant-design-vue';
 	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useStore } from "vuex";
 	import { useI18n } from 'vue-i18n'
 	export default defineComponent({
 		component:{},
 		setup(){
-			let {t} = useI18n()
+        const store = useStore();
+		let {t} = useI18n()
 			let canvasType = inject('canvasType')
 			let canvasGeneral:any = inject('canvasObj')
 			const data:any = reactive({
 				canvasScaleDom:null,
 				canvasDom:null,
-				isPresuppose:false,
 				isShowMark:false,
 				pencilbtnStyle:{},
+				selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+
 				
 			})
 			const createCanvas = (canvasSize:any)=>{
-				data.isPresuppose = false
+				nextTick(async ()=>{
-				nextTick(()=>{
+					let img = data.selectDetail.undividedLayer
-					canvasGeneral.canvasInit(data.canvasDom,canvasSize)
+					let WH = {
-					console.log(canvasGeneral);
+						width:data.canvasDom.offsetWidth,
+						height:data.canvasDom.offsetHeight,
+					}
+					let image = new Image()
+					image.onload = async ()=>{
+						let wScale = 1
+						let hScale = 1
+						wScale = image.width/image.height
 
+						// if(image.width>image.height){
+						// 	hScale = image.height/image.width
+						// }else{
+						// 	wScale = mnnmmmimage.width/image.height
+						// }
+						let size = {
+							width:WH.height*wScale,
+							height:WH.height*hScale,
+						}
+						let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
+						await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
+					}
+					image.src = img
+					// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
 				})
 			}
 			const openMode = (data:any)=>{
@@ -60,53 +80,15 @@
 				yes()
 				
 			}
-			// canvasGeneral.openMode.fun = openMode
-			const setPresuppose = (presuppose:any)=>{
-				let canvasDomSize = {
-					width:data.canvasScaleDom.offsetWidth,
-					height:data.canvasScaleDom.offsetHeight,
-				}
-				let width,height
-				let scale = [0,0]
-				if(presuppose == '16/9'){
-					// scale[0] = 16
-					// scale[1] = 9
-					width = 1600
-					height = 900
-				}else if(presuppose == '1/1'){
-					// scale[0] = 1
-					// scale[1] = 1
-					width = 1000
-					height = 1000
-				}else if(presuppose == '9/16'){
-				    // scale[0] = 9
-					// scale[1] = 16
-					width = 900
-					height = 1600
-				}
-				// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
-				// if(mbHeight < canvasDomSize.height){
-				// 	width = canvasDomSize.width
-				// 	height = mbHeight
-				// }else{
-				// 	width = canvasDomSize.height / scale[1] * scale[0]
-				// 	height = canvasDomSize.height
-				// }
-				let canvasSize = {width,height}
-				createCanvas(canvasSize)
-			}
 			onMounted(()=>{
-				if(canvasType == 'export'){
+				createCanvas({})
-					data.isPresuppose = true
+			})
-				}else{
+			onBeforeUnmount(()=>{
-					createCanvas({})
+				canvasGeneral.canvasClear()
-				}
-				
 			})
 			return {
 				canvasGeneral,
 				...toRefs(data),
-				setPresuppose,
 			}
 		}
 	});
@@ -132,39 +114,6 @@
 	overflow: hidden;
 	&.canvas{
 	}
-	&.presuppose{
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		> div{
-			border: 1rem solid #6b6b6b;
-			color: #6b6b6b;
-			display: flex;
-			margin-right: 2rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 3rem;
-			font-weight: 900;
-			cursor: pointer;
-			border-radius: 4px;
-			&:last-child{
-				margin-right: 0;
-			}
-			&.presuppose16-9{
-				height: calc(30rem / 16 * 9);
-				width: 30rem;
-			}
-			&.presuppose1-1{
-				height: 30rem;
-				width: 30rem;
-			}
-			&.presuppose9-16{
-				height: 30rem;
-				width: calc(30rem / 16 * 9);
-			}
-		}
-	}
 	.editFrontBack_pencilbtn{
 		position: absolute;
 		z-index: 1;

src/component/DetailCopy/canvas/index.vue

@@ -4,13 +4,36 @@
 		<!-- :class="[driver__.driver?'hideEvents':'']" -->
 		 <div class="canvasContent">
 			<div class="argument-box">
-				<argument ref="argument" v-if="canvasObj.canvas"></argument>
+				<argument 
+					ref="argument" 
+					class="argument" 
+					v-if="canvasObj.id || frontBackCanvasObj.id" 
+					@toolLiquefaction="toolLiquefaction" 
+					@setFrontBackColor="setFrontBackColor"
+					:isEditFrontBack="isEditFrontBack">
+				</argument>
 			</div>
-			<div class="canvas">
+			<div class="content-bottom">
-				<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+				<div class="tool-box">
-				<div class="canvas">
+					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
-					<canvasContent ref="canvasContent"></canvasContent>
 				</div>
+				<div class="contet">
+					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
+						<canvasContent ref="canvasContent"></canvasContent>
+					</div>
+					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
+						<editFrontBack 
+							:patchData="frontBack" 
+							:imgDomIndex="imgDomIndex" 
+							
+							ref="editFrontBack">
+						</editFrontBack>
+					</div>
+				</div>
+				
+				<!-- <div class="Finish">
+					<div class="gallery_btn" @click="privewDetail">Finish</div>
+				</div> -->
 			</div>
 		 </div>
 		
@@ -21,12 +44,14 @@
     
 </template>
 <script lang="ts">
-import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
+import editFrontBack from '@/component/Detail/editFrontBack.vue'
+
 
 import canvasGeneral from "@/tool/canvasGeneralCopy";
 import argument from './argument.vue'
@@ -35,36 +60,84 @@ import tool from "./tool.vue"
 
 export default defineComponent({
     components:{
-		tool,argument,canvasContent,
+		tool,argument,canvasContent,editFrontBack
     },
     setup(props,{emit}) {
         const store = useStore();
+        const {t} = useI18n();
       
 		const detailDom = reactive({
-			model:null
+			editFrontBack:null as any,
+			model:null,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
 		const detailData = reactive({
-			canvasObj:canvasGeneral,
+			canvasObj:new canvasGeneral('aa'),
-
+			frontBackCanvasObj:new canvasGeneral('vv'),
-
+			isShowMark:false,
-			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			liquefactionData:null as any,
-			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			liquefaction:null as any,
-			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			canvasType:'export',
-			designDetailShow:false,
+			imgDomIndex:-1,
-			loadingShow:false,
+			isEditFrontBack:false,
-			isEditPattern:{
+		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
-				value:false,
+			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
-			},// 是否编辑图案
 		})
- 	
+		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
+			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+		},{immediate: true})
+		provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
+		provide('canvasObj',detailData.canvasObj)
+		provide('isShowMark',detailData.isShowMark)
+		provide('canvasType',detailData.canvasType)
+
+		const setLiquefaction = async ()=>{//进入液化页面
+			detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
+				if(data?.img){
+					detailData.liquefactionData = data
+					detailData.liquefaction.init(data.img)
+				}else {
+					message.info(t('exportModel.jsContent6'))
+					return null;
+				}
+			})
+		}
+		const toolLiquefaction = ()=>{//工具点击按钮
+			setLiquefaction()
+		}
+		const editFront = ()=>{//编辑前后片
+			detailData.isEditFrontBack = !detailData.isEditFrontBack
+			if(detailData.isEditFrontBack){
+				nextTick(()=>{
+			    	detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
+					//关闭开启键盘事件
+				    detailData.canvasObj.currentOperation = false
+				    detailData.frontBackCanvasObj.currentOperation = true
+				})
+			}else{
+				detailData.canvasObj.currentOperation = true
+				detailData.frontBackCanvasObj.currentOperation = false
+			}
+		}
+		const privewDetail = async ()=>{
+			let data = await detailData.canvasObj.detailSubmit()
+			detailData.selectDetail.partialDesign.partialDesignBase64 = data
+		}
+		const setFrontBackColor = (data:any)=>{
+			detailDom.editFrontBack.setBackground(data)
+		}
 		onBeforeUnmount(()=>{
+			privewDetail()
 		})
         return{
 			...toRefs(detailDom),
 			...toRefs(detailData),
+			toolLiquefaction,
+			editFront,
+			privewDetail,
+			setFrontBackColor,
         }
     },
 	provide() {
@@ -83,9 +156,29 @@ export default defineComponent({
 		// top: -100%;
 		display: flex;
 		align-items: center;
+		.tool-box{
+			width: 4rem;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+		.Finish{
+			margin-top: auto;
+			> .gallery_btn{
+				cursor: pointer;
+			}
+		}
+		.argument-box{
+			height: 4rem;
+			width: 100%;
+			margin-bottom: 3rem;
+			margin-left: 4rem;
+		}
 		.argument-box,
-		.canvas,
+		.content-bottom,
 		.detail-box{
+			
 			:deep(i){
 				font-size: 2.5rem;
 				cursor: pointer;
@@ -107,6 +200,11 @@ export default defineComponent({
 				&.icon-xialaActive{
 					transform: rotate(90deg);
 				}
+				&.eventNone{
+					cursor: no-drop;	
+					border: none;
+					opacity: .5;
+				}
 			}
 		}
 		.canvasContent{
@@ -115,6 +213,28 @@ export default defineComponent({
 			border: 2px solid #000;
 			border-radius: 3rem;
 			padding: 4rem;
+			display: flex;
+			flex-direction: column;
+		}
+		.content-bottom{
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			> .contet{
+				flex: 1;
+				overflow: hidden;
+				position: relative;
+				.canvas,.editFrontBack{
+					width: 100%;
+					height: 100%;
+				}
+				.editFrontBack{
+					z-index: 2;
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			}
 		}
 		
 	}

src/component/DetailCopy/canvas/tool.vue

@@ -1,32 +1,36 @@
 <template>
    <div class="canvasTool">
+		
 		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
+		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil',eventNone:isEditFrontBack}"></i>
-		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
+		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture',eventNone:isEditFrontBack}"></i>
-		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
+		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move',eventNone:isEditFrontBack}"></i>
-		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
+		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition',eventNone:isEditFrontBack}"></i>
-		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
+		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser',eventNone:isEditFrontBack}"></i>
-		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
+		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed',eventNone:isEditFrontBack}"></i>
-		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
+		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil',eventNone:isEditFrontBack}"></i>
-		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
+		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn',eventNone:isEditFrontBack}"></i>
-		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
+		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut',eventNone:isEditFrontBack}"></i>
-		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
+		<!-- <div v-show="isEditFrontBack">
-		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
+			<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
-		<div class="label_item uploadImage">
+			<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+		</div> -->
+		<i @click="setEditFront" :class="{active:isEditFrontBack || false}" class="fi fi-sr-layers"></i>
+		
+		<!-- <i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i> -->
+
+		<!-- <div class="label_item uploadImage">
 			<i class="icon fi fi-br-upload" ></i>
 			<input type="file" @change="uploadImage">
-		</div>
+		</div> -->
-		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
+		<!-- <i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
 		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
 		<div class="btnModal" v-show="isMove" :style="moveStyle">
-			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
 			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
-			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
-			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
 			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
 			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
-		</div>
+		</div> -->
 	</div>
 </template>
 
@@ -36,16 +40,18 @@ import {base64ToFile} from '@/tool/util'
 import { Https } from "@/tool/https";
 	export default defineComponent({
 		component:{},
-		emits:['toolLiquefaction'],
+		emits:['toolLiquefaction','editFront'],
+		props: ['isEditFrontBack'],
 		setup(props,{emit}){
 			let canvasGeneral:any = inject('canvasObj')
 			let isShowMark:any = inject('isShowMark')
 			const data:any = reactive({
 				isMove:false,
 				moveStyle:{},
+				isShowMark,
 			})
 			const uploadImage = (event:any)=>{
-				isShowMark.value = true
+				data.isShowMark = true
 				const file = event.target.files[0];
 				let input = event.target
 				setOperation('movePosition')
@@ -58,7 +64,7 @@ import { Https } from "@/tool/https";
 						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
 						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
 							rv.imgUrl = rv.minioUrl
-							isShowMark.value = false
+							data.isShowMark = false
 							canvasGeneral.addImage(rv)
 						})
 						input.value = ''
@@ -70,6 +76,7 @@ import { Https } from "@/tool/https";
 				canvasGeneral.historyState(str)
 			}
 			const setOperation = (str:any)=>{
+				if(props.isEditFrontBack)return
 				canvasGeneral.setOperation(str)
 			}
 			const openMore = (e:any)=>{
@@ -94,6 +101,10 @@ import { Https } from "@/tool/https";
 			const closeModal = ()=>{
 				document.removeEventListener('click',setMore)
 			}
+			const setEditFront = ()=>{
+				emit('editFront')
+				// setOperation('movePosition')
+			}
 			return {
 				canvasGeneral,
 				...toRefs(data),
@@ -103,6 +114,7 @@ import { Https } from "@/tool/https";
 				openMore,
 				closeModal,
 				setLiquefaction,
+				setEditFront,
 			}
 		}
 	});
@@ -123,7 +135,6 @@ import { Https } from "@/tool/https";
 	&.leftAlign{
 		justify-content: flex-start;
 	}
-	
 	.uploadImage{
 		width: 3rem;
 		height: 3rem;

src/component/DetailCopy/designDetail.vue

@@ -42,11 +42,12 @@
 					</div>
 				</div>
 				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
-					<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
+					<detailLeft v-if="currentDetailType"></detailLeft>
+					<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
 				</div>
 
 				<div class="item model">
-					<model ref="model" @detailEdit="detailEdit"></model>
+					<model ref="model" @canvasReload="canvasReload" @detailEdit="detailEdit" @addSketch="()=>isEditPattern.value=false"></model>
 					<div class="btn">
 						<div class="gallery_btn" @click="submit">Submit</div>
 						<div class="gallery_btn" @click="previwe">Preview</div>
@@ -55,11 +56,11 @@
 				<div class="item detailRight">
 					<div class="submit">
 					</div>
-					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && !isEditPattern.value">
+					<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
 						<detailRight></detailRight>
 					</div>
 					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
-						<canvasBox></canvasBox>
+						<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -101,7 +102,8 @@ export default defineComponent({
         const store = useStore();
       
 		const detailDom = reactive({
-			model:null
+			model:null,
+			canvasBox,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -115,6 +117,7 @@ export default defineComponent({
 			isEditPattern:{
 				value:false,
 			},// 是否编辑图案
+			childKey:0,
 		})
 		provide('isEditPattern',detailData.isEditPattern)
 		const closeModal = ()=>{
@@ -179,6 +182,7 @@ 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()
 				let gradient = null
 				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
@@ -189,14 +193,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,
 					offset,
+					partialDesign:list[i].partialDesign,
 					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
-					printObject:list[i].printObject,
+					printObject: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,
+					trims:list[i].trims?list[i].trims:{prints:null},
 				}
 				if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
 					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
@@ -209,6 +215,7 @@ export default defineComponent({
 		}
 		const getSubmitData = async (str:string)=>{
 			let workspace = store.state.Workspace.workspace
+			if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
 			let clothes:any = await setClothes([detailData.selectDetail])
 			let data = {
 				designItemId:detailData.designDetail.designItemId,
@@ -269,13 +276,13 @@ export default defineComponent({
 			store.dispatch('DesignDetailCopy/setSubmit',data)
 		}
 		const detailEdit = (str:any)=>{
-			console.log(str);
 			if(str == 'edit'){
 				detailData.isEditPattern.value = !detailData.isEditPattern.value 
-				console.log(detailData.isEditPattern);
-				
 			}
 		}
+		const canvasReload = ()=>{
+			detailData.childKey += 1
+		}
 		onBeforeUnmount(()=>{
 			store.commit('DesignDetailCopy/clearDesignDetail')
 		})
@@ -288,6 +295,7 @@ export default defineComponent({
 			previwe,
 			submit,
 			detailEdit,
+			canvasReload,
         }
     },
 	provide() {
@@ -348,9 +356,9 @@ export default defineComponent({
 		transform: translate(-50%,-50%);
 		z-index: 2;
 		:deep(.ant-modal-wrap){
-			position: absolute;
+			// position: absolute;
-			top: 0;
+			// top: 0;
-			left: 0;
+			// left: 0;
 		}
 		.content{
 			display: flex;

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

@@ -87,11 +87,13 @@ export default defineComponent({
 			}
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
+			if(!newVal)return
 			if(!colorData.colorList?.list?.[newVal]){
 				colorData.colorList.list[newVal] = []
 			}else{
 				return
 			}
+			
 			let isNoSelect = false
 			let isOneChecked = false
 			for (let index = 0; index < 9; index++) {
@@ -100,9 +102,9 @@ export default defineComponent({
 				item = colorData.allBoardData.colorBoards[index]
 				if(
 					colorData.allBoardData.colorBoards?.[index] &&
-					colorData.selectDetail.color.rgba.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
+					colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
-					colorData.selectDetail.color.rgba.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
+					colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
-					colorData.selectDetail.color.rgba.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
+					colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
 					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
 				){
 					if(!isOneChecked){
@@ -136,15 +138,15 @@ export default defineComponent({
 						item = {}
 					}
 				}
+				console.log(12312);
+				
 				colorData.colorList.list[newVal].push(item)
 			}
-			
 		},{immediate: true})
 		const selectImgItem = ()=>{
 
 		}
 		const getColorName = (color:any)=>{
-			
 			let rgb:any = [color.r, color.g, color.b];
 			let hsv = rgbToHsv(rgb);
 			let data = [{
@@ -163,8 +165,6 @@ export default defineComponent({
 						resolve({name:'--',tcx:'--'})
 					});
 			})
-			
-			
 		}
 		const selectUplpadColor = (item:any)=>{
 			colorData.selectColor = JSON.parse(JSON.stringify(item))

src/component/DetailCopy/detailLeft/index.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="detailLeft">
-		<sketch v-show="currentDetailType == 'sketch'"></sketch>
+		<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
 		<print v-show="currentDetailType == 'print'"></print>
 		<color v-show="currentDetailType == 'color'"></color>
+		<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
     </div>
-    
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -16,10 +16,11 @@ import { useI18n } from 'vue-i18n'
 import sketch from './sketch.vue'
 import print from './print.vue'
 import color from './colorBox/index.vue'
+import addDetails from '@/component/Detail/addDetails.vue'
 
 export default defineComponent({
     components:{
-		sketch,print,color
+		sketch,print,color,addDetails
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -34,15 +35,22 @@ export default defineComponent({
 			currentPage:1,
 		})
 		const getDetailListDom = reactive({
-			libraryList:null as any,
+			addDetails:null as any,
 		})
-		
+		const addDetail = () =>{
+			let addDetails:any = getDetailListDom.addDetails
+			addDetails.init(detailData.selectDetail,'')
+		}
+		const setSloganData = (data:any)=>{
+			detailData.selectDetail.sketchString = data
+		}
 		
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListData),
 			...toRefs(getDetailListDom),
-			
+			addDetail,
+			setSloganData,
         }
     },
 

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

@@ -31,6 +31,7 @@ export default defineComponent({
 			required:true
 		}
 	},
+	emits:['selectImgItem'],
     setup(props,{emit}) {
 		const {t} = useI18n();
         const store = useStore();
@@ -50,11 +51,11 @@ export default defineComponent({
 		})
 		const selectImgItem = (file:any)=>{
 			if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
-			store.commit('DesignDetailCopy/setNewDetail',file.resData)
+			// store.commit('DesignDetailCopy/setNewDetail',file.resData)
+			emit('selectImgItem',file)
 		}
 	
 		onMounted(()=>{
-			console.log(detailData.allBoardData);
 			detailData.currentList = {
 				sketch:detailData.allBoardData.sketchboardFiles,
 				print:detailData.allBoardData.printboardFiles,

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

@@ -51,8 +51,14 @@ export default defineComponent({
 		    type:Object,
 			default:()=>[] as any,
 			required:true
-		}
+		},
+		type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
 	},
+	emits:['selectImgItem'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -84,7 +90,8 @@ export default defineComponent({
 		}
 		const selectImgItem = (file:any)=>{
 			let randomNum = Math.floor(100 + Math.random() * 900);
-			let type = store.state.DesignDetailCopy.currentDetailType
+			let type = props.type
+			// let type = store.state.DesignDetailCopy.currentDetailType
 			let id = file.id
 			if(type == 'sketch'){
 				id = Number(file.id + (randomNum + ''))
@@ -95,13 +102,15 @@ export default defineComponent({
 			}
 			let data = JSON.parse(JSON.stringify(file))
 			data.id = id
-			store.commit('DesignDetailCopy/setNewDetail',data)
+			emit('selectImgItem',data)
+			// store.commit('DesignDetailCopy/setNewDetail',data)
 		}
 		const getLibraryList = ()=>{
             detailData.isShowLoading = true
 			let level2Type = ''
 			let workspace = store.state.Workspace.workspace
-			let type = store.state.DesignDetailCopy.currentDetailType
+			let type = props.type
+			// let type = store.state.DesignDetailCopy.currentDetailType
 			let leve1Type
 			if(type == 'sketch'){
 				leve1Type = 'Sketchboard'
@@ -246,6 +255,7 @@ export default defineComponent({
 			> .material_content_list_loding{
 				width: 100%;
 				height: calc((34rem - 2rem) / 2);
+				overflow: hidden;
 			}
 		}
 	}

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

@@ -0,0 +1,158 @@
+<template>
+    <div class="selectList">
+		<div class="switch_type_list">
+			<div
+				v-if="type != 'element'"
+				@click.stop="openCurrent()"
+				class="switch_type_item"
+				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+			</div>
+			<div
+				@click.stop="openUpload()"
+				class="switch_type_item"
+				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+			</div>
+			<div
+				@click.stop="openLibrary()"
+				class="switch_type_item"
+				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+			</div>
+		</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>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'upload'">
+				<uploadList @selectImgItem="selectImgItem" :catecoryList="catecoryList"></uploadList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'library'">
+				<libraryList @selectImgItem="selectImgItem" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
+			</div>
+		</div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './libraryList.vue'
+import uploadList from './uploadList.vue'
+import currentList from './currentList.vue'
+export default defineComponent({
+    components:{
+		currentList,
+		libraryList,
+		uploadList,
+    },
+	props:{
+		catecoryList:{
+			type:Array,
+			default:()=>[]
+		},
+		type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
+	},
+	emits:['selectImgItem'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle: props.type == 'element'?'upload':'current',
+			printList:[]
+		})
+		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 selectImgItem = (data:any)=>{
+			emit('selectImgItem',data)
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListDom),
+
+			openCurrent,
+			openUpload,
+			openLibrary,
+			selectImgItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .selectList{
+		// width: 34rem;
+		flex: 1;
+		overflow: hidden;
+		width: 100%;
+		height: auto;
+		display: flex;
+		flex-direction: column;
+		> .switch_type_list{
+			display: flex;
+			margin-bottom: 2.5rem;
+			> .switch_type_item:last-child{
+				margin-right: 0;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+				margin-right: 6.5rem;
+			}
+			> .switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: calc(.4rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -.5rem;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+			> .select_swtich {
+				color: #000;
+				font-weight: 600;
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .print_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+				margin-top: 1rem;
+			}
+		}
+	}
+</style>

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

@@ -60,6 +60,7 @@ export default defineComponent({
 			required:true
 		}
 	},
+	emits:['selectImgItem'],
     setup(props,{emit}) {
 		const {t} = useI18n();
         const store = useStore();
@@ -82,7 +83,8 @@ export default defineComponent({
 		})
 		const selectImgItem = (file:any)=>{
 			// let data = JSON.parse(JSON.stringify(file))
-			store.commit('DesignDetailCopy/setNewDetail',file)
+			// store.commit('DesignDetailCopy/setNewDetail',file)
+			emit('selectImgItem',file)
 		}
 		const upFileUploadChange = (data:any)=>{
             let file = data.file;

src/component/DetailCopy/detailLeft/print.vue

@@ -9,40 +9,7 @@
 				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
-		<div class="switch_type_list">
+		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="printCatecoryList"></selectList>
-			<div
-				@click.stop="openCurrent()"
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
-			</div>
-		</div>
-		<div class="print_content_list">
-			<div class="content_item" v-show="selectTitle == 'current'">
-				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'upload'">
-				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
-			</div>
-		</div>
     </div>
     
 </template>
@@ -54,26 +21,24 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 // import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import libraryList from './module/libraryList.vue'
+import selectList from './module/selectList.vue'
-import uploadList from './module/uploadList.vue'
-import currentList from './module/currentList.vue'
 export default defineComponent({
     components:{
-		currentList,
+		selectList,
-		libraryList,
-		uploadList,
     },
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
 			selectTitle:'current',
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
-			sketchCatecoryList:computed(()=>{
+			printCatecoryList:computed(()=>{
 				return store.state.UserHabit.printType
 			}),
-			printList:[]
+			printList:[],
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})
-		watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
+		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)) {
 					acc.push(curr);
@@ -100,8 +65,8 @@ export default defineComponent({
 			detailData.selectTitle = 'library'
 			getDetailListDom.libraryList.init()
 		}
-		const selectImgItem = ()=>{
+		const selectImgItem = (data:any)=>{
-
+			store.commit('DesignDetailCopy/setNewDetail',data)
 		}
 		
         return{
@@ -171,45 +136,5 @@ export default defineComponent({
 				}
 			}
 		}
-		> .switch_type_list{
-			display: flex;
-			margin-bottom: 2.5rem;
-			> .switch_type_item:last-child{
-				margin-right: 0;
-			}
-			> .switch_type_item{
-				position: relative;
-				cursor: pointer;
-				margin-right: 6.5rem;
-			}
-			> .switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.4rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: -.5rem;
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-			> .select_swtich {
-				color: #000;
-				font-weight: 600;
-				transform: scale(1.15);
-			}
-			> .select_swtich::before {
-				width: 100%;
-			}
-		}
-		> .print_content_list{
-			flex: 1;
-			overflow: hidden;
-			> .content_item{
-				height: 100%;
-				margin-top: 1rem;
-			}
-		}
 	}
 </style>

src/component/DetailCopy/detailLeft/sketch.vue

@@ -1,45 +1,18 @@
 <template>
     <div class="sketch">
 		<div class="detailText">Current Print</div>
-		<div class="select_sketch">
+		<div class="select_sketch" v-if="selectDetail.id">
-			<img :src="selectDetail.path" alt="">
+			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
+			<img :src="selectDetail.sketchString || selectDetail.path" alt="">
+			<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
 		</div>
-		<div class="switch_type_list">
+		<div class="select_sketch" v-else>
-			<div
+			<div>
-				@click.stop="openCurrent()"
+				<i class="fi fi-rr-picture centent"></i>
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
-			</div>
-		</div>
-		<div class="sketch_content_list">
-			<div class="content_item" v-show="selectTitle == 'current'">
-				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'upload'">
-				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
 			</div>
 		</div>
+		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
     </div>
-    
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -49,15 +22,13 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 // import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import libraryList from './module/libraryList.vue'
+import selectList from './module/selectList.vue'
-import uploadList from './module/uploadList.vue'
+
-import currentList from './module/currentList.vue'
 export default defineComponent({
     components:{
-		currentList,
+		selectList,
-		libraryList,
-		uploadList,
     },
+	emit:['addDetail'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -65,7 +36,8 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			sketchCatecoryList:computed(()=>{
 				return store.state.Workspace.workspacePosition
-			})
+			}),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -85,10 +57,12 @@ export default defineComponent({
 			detailData.selectTitle = 'library'
 			getDetailListDom.libraryList.init()
 		}
-		const selectImgItem = ()=>{
+		const selectImgItem = (data:any)=>{
-
+			store.commit('DesignDetailCopy/setNewDetail',data)
+		}
+		const openAddDetail = ()=>{
+			emit('addDetail')
 		}
-		
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListData),
@@ -98,6 +72,7 @@ export default defineComponent({
 			openUpload,
 			openLibrary,
 			selectImgItem,
+			openAddDetail,
         }
     },
 
@@ -126,6 +101,7 @@ export default defineComponent({
 			border-radius: .5rem;
 			// border: 1px dashed #202020;
 			border: 1px dashed transparent;
+			position: relative;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
 			margin-bottom: 3rem;
 			> img{
@@ -133,6 +109,24 @@ export default defineComponent({
 				height: 100%;
 				object-fit: contain;
 			}
+			> i{
+				position: absolute;
+				left: auto;
+				right: 1rem;
+				top: 2rem;
+				font-size: 2rem;
+				cursor: pointer;
+			}
+			> div{
+				height: 100%;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> i{
+					font-size: 10rem;
+				}
+			}
 		}
 		> .switch_type_list{
 			display: flex;
@@ -160,7 +154,6 @@ export default defineComponent({
 			> .select_swtich {
 				color: #000;
 				font-weight: 600;
-				transform: scale(1.15);
 			}
 			> .select_swtich::before {
 				width: 100%;

src/component/DetailCopy/detailRight/editPrintElement.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="editPrintElement">
+		<div class="printOverallBtn">
+			<div class="overallSlogin">
+				<div
+					class="habit_Overal_Single_text"
+					:class="{ active: !overallSingle }"
+				>
+					{{ $t('DesignPrintOperation.Overall') }}
+				</div>
+				<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
+				<div
+					class="habit_Overal_Single_text"
+					:class="{ active: overallSingle }"
+				>
+					{{ $t('DesignPrintOperation.Single') }}
+				</div>
+			</div>
+			<div v-show="!overallSingle" class="habit_System_Designer">
+				<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
+				<a-slider id="system_silder"
+					class="system_silder"
+					:min="20"
+					:max="1000"
+					v-model:value="systemDesignerPercentage"
+					:tip-formatter="formatter"
+				>
+				</a-slider>
+			</div>
+		</div>
+		<div></div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { useStore } from "vuex";
+export default defineComponent({
+    components:{
+    },
+	props: {
+		type: {
+		    type: String,
+			default: 'print',
+		}
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		const editPrintElementDom = reactive({
+
+		})
+		const editPrintElementData = reactive({
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			overallSingle:false,
+			systemDesignerPercentage:0,
+		})
+		const setOveralSingle = ()=>{}
+		const formatter = (value:any)=>{
+			return `${value}%`;
+		}
+        return{
+			...toRefs(editPrintElementDom),
+			...toRefs(editPrintElementData),
+			setOveralSingle,
+			formatter,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .editPrintElement{
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex: 1;
+		overflow: hidden;
+		flex-direction: column;
+		> .printOverallBtn{
+			display: flex;
+			> .overallSlogin{
+				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);
+					}
+				}
+			.habit_System_Designer {
+				transform: scale(.8);
+				width: 100%;
+				.ant-slider-track,
+				.ant-slider-rail {
+					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{
+					font-size: calc(1.6rem*1.2);
+					color: rgba(0, 0, 0, 0.7);
+					font-weight: 600;
+				}
+			}
+		}
+		
+	}
+</style>

src/component/DetailCopy/detailRight/index.vue

@@ -5,8 +5,9 @@
 			<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
 		</div> -->
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
-		<printType v-if="currentDetailType === 'print'"></printType>
+		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
-		<elementType v-if="currentDetailType === 'element'"></elementType>
+		<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
+		<editPrintElement v-if="currentDetailType === 'print' || currentDetailType === 'element'" :type="currentDetailType"></editPrintElement>
     </div>
     
 </template>
@@ -16,10 +17,11 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
 import { useStore } from "vuex";
 import sketchType from './sketchType.vue'
 import printType from './printType.vue'
+import editPrintElement from './editPrintElement.vue'
 import elementType from './elementType.vue'
 export default defineComponent({
     components:{
-		sketchType,printType,elementType
+		sketchType,printType,elementType,editPrintElement
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -89,7 +91,6 @@ export default defineComponent({
 			> .select_swtich {
 				color: #000;
 				font-weight: 600;
-				transform: scale(1.15);
 			}
 			> .select_swtich::before {
 				width: 100%;

src/component/DetailCopy/model/index.vue

@@ -1,14 +1,17 @@
 <template>
     <div class="modelindex">
 		<div class="modelindex_left">
-			<modelNav></modelNav>
+			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')"></modelNav>
 		</div>
 		<div class="modelindex_right">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
-				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i>
+				<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
+
+
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></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>
 				<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 				<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
 
@@ -17,7 +20,7 @@
 				<!-- <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"></position>
+			<position ref="position" :imgDesignImg=imgDesignImg></position>
 		</div>
 		
     </div>
@@ -35,7 +38,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
-	emits:['detailEdit'],
+	emits:['detailEdit','canvasReload','addSketch'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -46,7 +49,8 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
-			isEditPattern:inject('isEditPattern') as any
+			isEditPattern:inject('isEditPattern') as any,
+			imgDesignImg:false,
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
@@ -58,8 +62,10 @@ export default defineComponent({
 		const showDesignImgDetail = (str:any)=>{
 			emit('detailEdit',str)
 		}
-		const deleteNav = ()=>{
+	
-
+		//图片按下样子
+		const mousedownDesignImg = ()=>{
+			getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
 		}
         return{
 			...toRefs(detailData),
@@ -67,7 +73,7 @@ export default defineComponent({
 			...toRefs(getDetailListDom),
 			getSubmitData,
 			showDesignImgDetail,
-			deleteNav,
+			mousedownDesignImg,
         }
     },
 

src/component/DetailCopy/model/modelNav.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="modelNav">
-		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+		<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			<img :src="item.path" alt="">
 		</div>
-		<div class="modelNav_item add" @click="">
+		<div v-if="currentDetailType == 'sketch' || currentDetailType == ''" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
 			+
 		</div>
     </div>
@@ -21,13 +22,15 @@ export default defineComponent({
     components:{
 		position,
     },
+	emits:['canvasReload','addSketch'],
     setup(props,{emit}) {
         const store = useStore();
 		const {t} = useI18n()
 		const detailData = reactive({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
-			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			frontBack:{} as any,
 			isEditPattern:inject('isEditPattern') as any
 		})
@@ -46,6 +49,7 @@ export default defineComponent({
 						centered:true,
 						onOk() {
 							resolve(true)
+							emit('canvasReload')
 						},
 						onCancel(){
 							resolve(false)
@@ -58,12 +62,24 @@ export default defineComponent({
 				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
 			})
 		}
+		const deleteDetailItem = (id:number)=>{
+			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)
+		}
+		const addSketch = ()=>{
+			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
+			store.commit('DesignDetailCopy/addDesignColthes')
+			emit('addSketch')
+		}
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1
 		// })
         return{
 			...toRefs(detailData),
 			selectDetailItem,
+			deleteDetailItem,
+			addSketch,
         }
     },
 
@@ -84,6 +100,20 @@ export default defineComponent({
 			border: 2px solid #B4B4B4;
 			margin-bottom: 1.5rem;
 			cursor: pointer;
+			position: relative;
+			&:hover{
+				> i{
+					display: block;
+				}
+			}
+			> i{
+				display: none;
+				position: absolute;
+				right: 1rem;
+				top: 1rem;
+				cursor: pointer;
+				font-size: 2rem;
+			}
 			&:last-child{
 			    margin-bottom: 0;
 			}

src/component/DetailCopy/model/modelPosition.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="molepositon">
+    <div class="molepositon" :class="{active:!imgDesignImg}">
 		<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.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="">
@@ -21,6 +21,13 @@
 			<img src="" alt="">
 		</div>
     </div>
+	<div class="molepositon" :class="{active:imgDesignImg}">
+		<div class="designOpenrtion_imgMask">
+			<div class="detail_modal_item_front">
+				<img :src="designDetail.designItemUrl" alt="">
+			</div>
+		</div>
+	</div>
 </template>
 <script lang="ts">
 import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -34,6 +41,12 @@ import newFollowVue from '@/component/Account/message/newFollow.vue';
 export default defineComponent({
     components:{
     },
+	props:{
+	    imgDesignImg:{
+            default:false,
+			type:Boolean,
+		}
+	},
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -211,23 +224,27 @@ export default defineComponent({
 				item.priority = num++
 			})
 			let data:any = {
-				scale:[],
+				scale:null,
-				offset:[],
+				offset:null,
-				priority:-1,
+				priority:'',
 				maskUrl:'',
 				maskMinioUrl:'',
 			}
+			let state = false
 			for (let index = 0; index < arr.length; index++) {
 				if(value.id == arr[index].id){
+					state = true
 					let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
 					let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
 					let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
 					let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
+					
 					// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
 					data.scale = [scaleWidth,scaleHeight]
 					let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
 					let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
-					data.offset = [left,top]
+					data.offset = [left?left:0,top?top:0]
+					// data.offset = [left?left:0,top?top:0]
 					data.maskUrl = arr[index].maskUrl
 					data.maskMinioUrl = arr[index].maskMinioUrl
 					// data.priority = arr[index].style.zIndex
@@ -237,7 +254,11 @@ export default defineComponent({
 					break
 				}
 			}
-			
+			if(!state){
+				data.scale = [1,1]
+				data.offset = [0,0]
+				data.priority = 10+arr.length
+			}
 			return data
 		}
 		const deleteNav = ()=>{
@@ -304,6 +325,12 @@ export default defineComponent({
 		flex-direction: column;
 		// margin: auto 0;
 		padding-top: 3rem;
+		position: relative;
+		display: none;
+		&.active{
+			display: block;
+			z-index: 2;
+		}
 		> .designOpenrtion_imgMask{
 			width: auto;
 			height: auto;
@@ -341,7 +368,7 @@ export default defineComponent({
 				z-index: 1 !important;
 			}
 			> .designOpenrtion_btn{
-				z-index: 9999;
+				z-index: 99;
 				ul{
 					list-style: none;
 					// width: 100%;

src/store/Detail/designDetailCopy.ts

@@ -34,6 +34,8 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			let back:any = []
 			// let printZIndex = 
 			data.clothes.forEach((v:any,index:any)=>{
+				// if(!v?.partialDesignDTO){
+				// }
 				for (let i = v.layersObject.length-1; i >= 0; i--) {
 					v.layersObject[i].style = {
 						top:v.layersObject[i].position?.[0],
@@ -67,6 +69,17 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			state.frontBack.back = back
             state.designDetail = data
         },
+		updataDetailItem(state,data){
+			state.designDetail.clothes.forEach((item:any) => {
+				if(item.id == state.selectDetail.id){
+					console.log(data);
+					
+					for (const key in data) {
+						item[key] = data[key]
+					}
+				}
+			});
+		},
 		clearDesignDetail(state){
 			state.designDetail = null
 			state.designPreviewData = {}
@@ -103,20 +116,21 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			}
 		},
 		setCurrentDetailType(state,data){
-			if(state.selectDetail && state.selectDetail.id)state.currentDetailType = data
+			if(state.selectDetail && state.selectDetail.id){
+				state.currentDetailType = data
+			}else if(state.selectDetail && data == 'sketch'){
+				state.currentDetailType = data
+			}
 		},
         setDesignColthes(state,data){
 			if(!state.currentDetailType)state.currentDetailType = 'sketch'
-			if(state.selectDetail && state.selectDetail.id == data){
-				return
-			}
 			//切换选择
 			// state.currentDetailType = ''
             // state.designDetail.clothes[data.index] = data.clothes
 			state.designDetail.clothes.forEach((item:any) => {
 				if(item.id == data){
 					state.selectDetail = item
-					state.frontBack.front.forEach((v:any)=>{
+					state.frontBack.front.forEach((v:any,index:any)=>{
 						v.designOpenrtionBtn = false
 						if(v.id == data){
 							v.designOpenrtionBtn = true
@@ -125,10 +139,91 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 				}
 			});
         },
-		setPraeview(state,data){//preview
+		addDesignColthes(state){
-			data.clothes.forEach((item:any) => {
+			let data = {
-				if(!item.id)return
+				changed:null,
-				let id_ = state.selectDetail.id
+				color:{rgba:{
+					r:255,
+					g:255,
+					b:255,
+				}},
+				designType:null,
+				gradient:null,
+				id:null,
+				partialDesign:{
+					layers:[],
+					partialDesignPath:'',
+					partialDesignMinioPath:'',
+					partialDesignBase64:''
+				},
+				layersObject:null,
+				newDetail:{},
+				level1Type:'Sketchboard',
+				minIOPath:null,
+				path:null,
+				printObject:null,
+				trims:null,
+				type:null,
+				undividedLayer:null,
+			}
+			if(!state.currentDetailType)state.currentDetailType = 'sketch'
+			state.designDetail.clothes.forEach((item:any) => {
+				state.frontBack.front.forEach((v:any,index:any)=>{
+					v.designOpenrtionBtn = false
+				})
+			});
+			state.selectDetail = data
+		},
+		async setPraeview(state,data){//preview
+			for (let j = 0; j < data.clothes.length; j++) {
+				const item = data.clothes[j];
+				if(!item.id)continue
+				if(item.id == state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id == item.id){
+
+				}
+				let id_ = state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id
+				let el:any = document.querySelector('.molepositon .perview_img')
+				await new Promise((resolve, reject) => {
+					const img = new Image();
+					img.src = state.frontBack.body.path;
+					img.onload = () => {
+						let scale:any = el.parentNode.offsetWidth / img.width;
+						if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
+							state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})	
+							state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})	
+						}
+						state.frontBack.front.forEach((v:any,index:any)=>{
+							if(v.id == id_){
+								for (let i = item.layersObject.length-1; i >= 0; i--) {
+									item.layersObject[i].style = {
+										top:item.layersObject[i].position?.[0] * scale + 'px',
+										left:item.layersObject[i].position?.[1] * scale + 'px',
+										width:item.layersObject[i].imageSize?.[0] * scale + 'px',
+										height:item.layersObject[i].imageSize?.[1] * scale + 'px',
+										zIndex:v?.style?.zIndex?v.style.zIndex:state.frontBack.front.length
+									}
+									item.layersObject[i].centers={
+										left:0,
+										top:0,
+									}
+									item.layersObject[i].designOpenrtionBtn = false
+									if(item.layersObject[i].imageCategory.indexOf("back") == -1){
+										state.frontBack.front[index] = item.layersObject[i]
+										// state.frontBack.front[index].style.zIndex = v.priority
+										state.frontBack.front[index].id = item.id
+										state.frontBack.front[index].undividedLayer = item.undividedLayer
+									}else{
+										state.frontBack.back[index] = item.layersObject[i]
+										// state.frontBack.back[index].style.zIndex = v.priority
+										state.frontBack.back[index].id = item.id
+										state.frontBack.back[index].undividedLayer = item.undividedLayer
+									}
+								}
+							}
+						})
+						resolve('')
+					};
+				})
 			    state.selectDetail.change = item.change
 				if(state.selectDetail?.newDetail?.color){
 					state.selectDetail.color = state.selectDetail?.newDetail?.color
@@ -136,9 +231,7 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 				}
 				state.selectDetail.designType = item.designType
 				state.selectDetail.gradient = item.gradient
-				state.selectDetail.id = item.id
 				state.selectDetail.layersObject = item.layersObject
-				state.selectDetail.newDetail[state.currentDetailType] = null
 				state.selectDetail.path = item.path
 				state.selectDetail.minIOPath = item.minIOPath
 				state.selectDetail.scale = [1,1]
@@ -146,54 +239,20 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 				state.selectDetail.printObject = item.printObject
 				state.selectDetail.type = item.type
 				state.selectDetail.undividedLayer = item.undividedLayer
-				// if(state.currentDetailType == 'sketch'){//如果是sketch更新front和back
+				if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
-					let el:any = document.querySelector('.molepositon .perview_img')
+					state.designDetail.clothes.push(state.selectDetail)
-					const img = new Image();
+				}
-					img.onload = () => {
+				state.selectDetail.id = item.id
-						let scale:any = el.parentNode.offsetWidth / img.width
+				if(state.selectDetail.newDetail?.[state.currentDetailType])state.selectDetail.newDetail[state.currentDetailType] = null
-						state.frontBack.front.forEach((v:any,index:any)=>{
+			}
-						if(v.id == id_){
-							for (let i = item.layersObject.length-1; i >= 0; i--) {
-								item.layersObject[i].style = {
-									top:item.layersObject[i].position?.[0] * scale + 'px',
-									left:item.layersObject[i].position?.[1] * scale + 'px',
-									width:item.layersObject[i].imageSize?.[0] * scale + 'px',
-									height:item.layersObject[i].imageSize?.[1] * scale + 'px',
-									zIndex:v.style.zIndex
-								}
-								item.layersObject[i].centers={
-									left:0,
-									top:0,
-								}
-								item.layersObject[i].designOpenrtionBtn = false
-								if(item.layersObject[i].imageCategory.indexOf("back") == -1){
-									state.frontBack.front[index] = item.layersObject[i]
-									// state.frontBack.front[index].style.zIndex = v.priority
-									state.frontBack.front[index].id = item.id
-									state.frontBack.front[index].undividedLayer = item.undividedLayer
-								}else{
-									state.frontBack.back[index] = item.layersObject[i]
-									// state.frontBack.back[index].style.zIndex = v.priority
-									state.frontBack.back[index].id = item.id
-									state.frontBack.back[index].undividedLayer = item.undividedLayer
-								}
-							}
-						}
-					})
-					};
-					img.src = state.frontBack.body.path;
-					
-				// }
-			})
-			
 		},
+		
 		// setDesignItemOthers(state,data){
         //     state.designDetail.others[data.index] = data.others
         // },
     },
     actions:{
 		async setSubmit({ commit },str) {
-				console.log(str);
 				
 			//   setTimeout(() => {
 			// 	const message = 'Hello from Vuex';

src/views/HomeMain.vue

@@ -92,7 +92,7 @@
 					<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                 </div>
-				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser != 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
+				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
 				<div v-else style="width: 30rem;"></div>
             </div>
 			<navRouter :routerList="navRouterList"></navRouter>