调整layout速度慢问题

src/component/Detail/habit.vue

@@ -89,18 +89,19 @@
 			<div class="habit_System_Designer">
                 <a-slider id="system_silder"
                     v-model:value="workspaceItem.systemDesignerPercentage"
-                    @afterChange="systemDesigner"
+                    @afterChange="setSystemDesigner"
 					:tip-formatter="formatter"
+					:tooltipVisible="false"
 				>
                 </a-slider>
                 <div class="habit_System_Designer_text_max">
                     <div class="habit_System_Designer_text">
 						
-						{{ $t('Habit.System') }}<span>(100%)</span>
+						{{ $t('Habit.System') }}<span>({{systemDesigner.system}}%)</span>
 					</div>
                     <div class="habit_System_Designer_text">
 					
-						{{ $t('Habit.Designer') }}<span>(100%)</span>
+						{{ $t('Habit.Designer') }}<span>({{systemDesigner.designer}}%)</span>
 					</div>
                 </div>
             </div>
@@ -191,6 +192,10 @@ export default defineComponent({
 			mannequinType:'',
 			mannequinId:'',
 		})
+		let systemDesigner:any = ref({
+			system:0,
+			designer:0,
+		})
 		let mannequins:any = ref([{},{}])
 		let systemSeleves= ref(false);
 		let total= ref(0);
@@ -228,6 +233,7 @@ export default defineComponent({
 	return{
 			systemSeleves,
 			mannequins,
+			systemDesigner,
 			openType,
 			total,
 			driver__,
@@ -624,10 +630,12 @@ export default defineComponent({
 			}
 		},
 		//设置系统设计占比
-        systemDesigner(num: number) {
+        setSystemDesigner(num: number) {
 			this.workspaceItem.systemDesignerPercentage = num
         },
 		formatter(value: number) {
+			this.systemDesigner.system = 100 - value
+			this.systemDesigner.designer = value
 			let num = Math.abs((value-50)*2)
 			return `${num}%`;
 		},
@@ -908,7 +916,7 @@ export default defineComponent({
 			
         }
         .habit_System_Designer {
-			margin-top: calc(8rem*1.2);
+			// margin-top: calc(8rem*1.2);
             :deep(.ant-slider-track),
             :deep(.ant-slider-rail) {
 

src/component/HomePage/MoodboardUpload.vue

@@ -443,8 +443,9 @@ export default defineComponent({
 			}
 			
         },
-		layout(){
+		async layout(){
-			
+			if(this.loadingShow)return
+			this.loadingShow = true
 			this.store.commit("setDisposeMoodboard", []);
 			let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
 			this.layoutList = arr
@@ -457,29 +458,28 @@ export default defineComponent({
 			}
 			if(this.moodb_[arr.length-1].length != 1){
 				if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
+					this.loadingShow = false
 					this.layout()
 					return
 				}
 			}
-			if(this.loadingShow){
-				return
-			}
-			this.loadingShow = true
 			this.edieShow = true
 			if(this.moodb_[arr.length-1].length == 2){
 				this.moodb_className = this.moodb_[arr.length-1][0]
 			}else{
 				this.moodb_className = this.moodb_[arr.length-1][random]
 			}
+
 			this.layoutOpen = true
 			 //提交模板
 			// this.loadingShow = true
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
-			nextTick().then(async ()=>{
+			nextTick().then(()=>{
 				let layoutCentent = document.getElementById('modal_img')
-				let file = await domTurnImg(layoutCentent)
+				domTurnImg(layoutCentent).then((rv)=>{
+					let file = rv
 					let param = new FormData(); 
 					param.append('inPin','0')
 					param.append('level1Type','Moodboard')
@@ -502,6 +502,8 @@ export default defineComponent({
 						driverObj__.moveNext()
 					}
 				})
+				
+			})			    
 		},
 		setmoodbClass(val:any){
 			this.moodb_className = val

src/component/HomePage/SketchboardUpload.vue

@@ -1107,6 +1107,7 @@ export default defineComponent({
 					cursor: pointer;
 					&:hover .delete_like_file_block{
 						display: block;
+						opacity: 1;
 					}
 					img{
 						object-fit: cover;

src/component/HomePage/layout.vue

@@ -610,7 +610,8 @@ export default defineComponent({
 			})
 			nextTick().then(async ()=>{
 				let layoutCentent = document.getElementById('layoutCentent')
-				let file = await domTurnImg(layoutCentent)
+				domTurnImg(layoutCentent).then((rv)=>{
+					let file =rv
 					let param = new FormData(); 
 					param.append('inPin','0')
 					param.append('gender','')
@@ -631,6 +632,8 @@ export default defineComponent({
 					})
 				})
 				
+			})
+			
         },
 		beforeUpload(){
 			

src/component/HomePage/layoutMobile.vue

@@ -180,6 +180,28 @@ export default defineComponent({
         this.uploadUrl = getUploadUrl();
     },
 	directives:{
+		modelImg:{
+			mounted(el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight > parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			},
+			updated (el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight > parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			}
+		},
 		//操作移动
 		layout:{
 			mounted (el,layout:any,binding) {
@@ -541,28 +563,6 @@ export default defineComponent({
 				})
 			},
 		},
-		modelImg:{
-			// mounted(el) {
-			// 	let parentNode = el.parentNode
-			// 	if(parentNode.offsetHeight > parentNode.offsetWidth){
-			// 		el.style.height = 100+'%'
-			// 		el.style.width = 'auto'
-			// 	}else{
-			// 		el.style.width = 100+'%'
-			// 		el.style.height = 'auto'
-			// 	}
-			// },
-			// updated (el) {
-			// 	let parentNode = el.parentNode
-			// 	if(parentNode.offsetHeight > parentNode.offsetWidth){
-			// 		el.style.height = 100+'%'
-			// 		el.style.width = 'auto'
-			// 	}else{
-			// 		el.style.width = 100+'%'
-			// 		el.style.height = 'auto'
-			// 	}
-			// }
-		}
 	},
     methods: {
 		init(){
@@ -641,7 +641,8 @@ export default defineComponent({
 			})
 			nextTick().then(async ()=>{
 				let layoutCentent = document.getElementById('layoutCentent')
-				let file = await domTurnImg(layoutCentent)
+				domTurnImg(layoutCentent).then((rv)=>{
+					let file = rv
 					let param = new FormData(); 
 					param.append('inPin','0')
 					param.append('gender','')
@@ -661,7 +662,7 @@ export default defineComponent({
 						this.loadingShow = false
 					})
 				})
-			
+			})
         },
 		beforeUpload(){
 			
@@ -900,6 +901,8 @@ export default defineComponent({
 					// object-fit: cover;
 					// width: 100%;
 					// height: 100%;
+					height: 100%;
+					width: auto;
 					pointer-events: none;
 					float: left;
 					user-select:none;

src/tool/domTurnImg.js

@@ -1,45 +1,48 @@
 import html2canvas from "html2canvas";
 const getJpeg = dom =>{
 		return new Promise(resolve =>{
+			setTimeout(() => {
 				html2canvas(dom,{useCORS: true,}).then(canvas =>{
 					let base64 = canvas.toDataURL('image/jpeg',.9);
-			let quality = 0.9    // 压缩系数0-1之间
+					// let quality = 0.9    // 压缩系数0-1之间
 					let newImage = new Image()
 					newImage.src = base64
 					newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
-			let imgWidth,
+					// let imgWidth,
-			imgHeight
+					// imgHeight
-			let w = undefined
+					// let w = undefined
 					newImage.onload = function () {
-			w = this.width * 1
+					// w = this.width * 1
-			imgWidth = this.width
+					// imgWidth = this.width
-			imgHeight = this.height
+					// imgHeight = this.height
-			let canvas = document.createElement('canvas')
+					// let canvas = document.createElement('canvas')
-			let ctx = canvas.getContext('2d')
+					// let ctx = canvas.getContext('2d')
-			if (Math.max(imgWidth, imgHeight) > w) {
+					// if (Math.max(imgWidth, imgHeight) > w) {
-				if (imgWidth > imgHeight) {
+					// 	if (imgWidth > imgHeight) {
-				canvas.width = w
+					// 	canvas.width = w
-				canvas.height = w * (imgHeight / imgWidth)
+					// 	canvas.height = w * (imgHeight / imgWidth)
-				} else {
+					// 	} else {
-				canvas.height = w
+					// 	canvas.height = w
-				canvas.width = w * (imgWidth / imgHeight)
+					// 	canvas.width = w * (imgWidth / imgHeight)
-				}
+					// 	}
-			} else {
+					// } else {
-				canvas.width = imgWidth
+					// 	canvas.width = imgWidth
-				canvas.height = imgHeight
+					// 	canvas.height = imgHeight
-				quality = 0.6
+					// 	quality = 0.6
-			}
+					// }
-			ctx.clearRect(0, 0, canvas.width, canvas.height)
+					// ctx.clearRect(0, 0, canvas.width, canvas.height)
-			ctx.drawImage(this, 0, 0, canvas.width, canvas.height) //  // 这里面的 this 指向 newImage
+					// ctx.drawImage(this, 0, 0, canvas.width, canvas.height) //  // 这里面的 this 指向 newImage
-			let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
+					// let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
-			let fileData = dataURLtoFile(smallBase64);
+					let fileData = dataURLtoFile(base64);
 					let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名
 					// console.log(smallBase64);
 					// resolve(base64ToFile(fileOfBlob))
 					resolve(fileOfBlob)
 					}
 				})
+			}, 100);
 		})
+	
 }
 	//base64转成blob
 function dataURLtoFile(dataURI, type) {