修改library里面的sketch的generate

2024-10-18 11:36:19 +08:00
parent f606a192d1
commit c14e72efb2
7 changed files with 168 additions and 76 deletions
--- a/src/component/Canvas/index.vue
+++ b/src/component/Canvas/index.vue
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -543,6 +543,9 @@ export default defineComponent({
                    width: canvasWH.value.width,
                    height: canvasWH.value.height,
                    isDrawingMode: false, // 开启绘图模式
+					selectionFullyContained: true,
+					selectionKey:'ctrlKey',
+					includeDefaultValues: false,//尚未测试 精简导出JSON
                });
 				canvasOnDrop()//开启鼠标到画布事件
 				if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
--- a/src/component/HomePage/generalMenu.vue
+++ b/src/component/HomePage/generalMenu.vue
@@ -5,11 +5,11 @@
 				<template #content>
 					<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
 				</template>
-				<span v-if="item.label">{{ item.label }}</span>
+				<span v-if="item?.label">{{ item?.label }}</span>
 				<span v-else>{{ item.name }}</span>
 			</a-popover>
 			<div v-else>
-				<span v-if="item.label">{{ item.label }}</span>
+				<span v-if="item?.label">{{ item?.label }}</span>
 				<span v-else>{{ item.name }}</span>
 			</div>
 		</div>
@@ -41,12 +41,11 @@
 						<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>

 					</template>
-
-					<span v-if="item.label">{{ item.label }}</span>
+					<span v-if="item?.label">{{ item?.label }}</span>
 					<span v-else>{{ item.name }}</span>
 				</a-popover>
 				<div v-else>
-					<span v-if="item.label">{{ item.label }}</span>
+					<span v-if="item?.label">{{ item?.label }}</span>
 					<span v-else>{{ item.name }}</span>
 				</div>
 			</li>
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -454,6 +454,8 @@ export default defineComponent({
 						}
 					});
 				})
+			}else{
+				this.scaleImageIndex = index
 			}
 		},
 		LikeFile(item:any,str:string){
--- a/src/tool/canvasGeneral.js
+++ b/src/tool/canvasGeneral.js
@@ -82,6 +82,9 @@ class myCanvas {
 			width: val.width?val.width:this.canvasDomParent.getBoundingClientRect().width,
 			height: val.height?val.height:this.canvasDomParent.getBoundingClientRect().height,
 			isDrawingMode: val.isDrawingMode, // 开启绘图模式
+			selectionFullyContained: true,
+			selectionKey:'ctrlKey',
+			includeDefaultValues: false,//尚未测试 精简导出JSON
 		});

 		if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -197,7 +197,6 @@ export default defineComponent({
 		payOrder,
 		TaskPage,
 		navRouter,
-		navRouter,
    },
 	setup(){
        const store = useStore();
@@ -612,8 +611,6 @@ export default defineComponent({
 						this.store.commit('clearAllData')
 						// window.location.reload()
 						window.location.href = '/home';
-						// window.location.reload()
-						window.location.href = '/home';
                    }
 				}
 			})
@@ -640,11 +637,11 @@ export default defineComponent({
 .homeMain_max{
 	position: relative;
 	display: flex;
-	height: 100%;
+	height: 100vh;
 	flex-direction: column;
 	.homeMain_content_body{
 		flex: 1;
-		height: calc(100% - 7rem);
+		height: calc(100vh - 7rem);
 	}
 }
 .homeMain_heade {
--- a/src/views/HomeView/library.vue
+++ b/src/views/HomeView/library.vue
@@ -69,7 +69,7 @@
                                    </a-select>
 									<a-select
                                        ref="select"
-										v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
+										v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard'"
                                        v-model:value="designType"
                                        :options="designTypeList[selectCode]"
                                        @change="handleChange"
@@ -195,17 +195,18 @@
 							<div class="right_content_body" v-show="uploadGenerate !='Upload'">
 								<div class="content_body_header content_body_header_generate">
 									<div class="content_body_header_right"></div>
-									<div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
+									<!-- <div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
 										<div @click.stop="PrintModel">{{ printModel.name }}</div>
 										<ul v-show="printModel.optype">
 											<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
 											<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
 											<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
 										</ul>
-									</div>
+									</div> -->
+									<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
 									<div class="input_border">
 										<div class="input_box" :class="{active:inputShow}">
-											<div class="input_box_btnBox">
+											<div class="input_box_btnBox"  v-if="scene?.value != 'extract'">
 												<div class="upload_item" v-show="selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
 													<div
 														class="upload_file_item"
@@ -266,6 +267,53 @@
 												<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
 												<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
 											</div>
+											<div class="input_box_btnBox" v-else>
+												<div class="upload_item">
+													<div
+														class="upload_file_item"
+														v-for="(file, index) in selectGenerateList"
+														:key="file"
+													>
+														<div
+															class="upload_file_item_content"
+															v-show="file?.status === 'uploading'"
+														>
+															<a-spin :indicator="indicator" tip="Uploading..." />
+														</div>
+														<div
+															class="upload_file_item_content"
+															v-show="file?.status === 'done' || file?.base64"
+														>
+															<img :src="file?.imgUrl" class="upload_img" />
+															<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
+																<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
+															</div>
+														</div>
+													</div>
+												</div>
+												<i class="fi fi-br-upload" style="margin-left: 2rem;"  v-show="selectGenerateList.length == 0" :title="$t('Generate.uploadproduct')">
+													<a-upload
+														class="search_upImg"
+														:capture="null"
+														:action="uploadUrl + '/api/element/upload'"
+														list-type="picture-card"
+														:data="{
+															...upload,
+														}"
+														:maxCount='1'
+														:headers="{ Authorization: token }"
+														v-model:file-list="selectGenerateList"
+														:before-upload="beforeUpload"
+														accept=".jpg,.png,.jpeg,.bmp"
+														@change="generateFileUploadChange"
+													>
+													</a-upload>
+												</i>
+												<div :title="$t('Generate.style')">
+													<generalMenu v-if="printModelList" class="printModel" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
+												</div>
+											</div>
+
 											<textarea 
 												v-show="isTextarea "
 												class="search_textarea "  
@@ -335,7 +383,7 @@
            </div>
        </div>
 		<searchLabel ref="searchLabel"></searchLabel>
-		<scaleImage ref="scaleImage"></scaleImage>
+		<scaleImage ref="scaleImage" :isCanvas="selectCode == 'Sketchboard'"></scaleImage>
        <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
        <ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
 		<setLabel ref="setLabel"></setLabel>
@@ -372,6 +420,7 @@ import { useI18n } from "vue-i18n";
 import { ElCascader } from 'element-plus'
 import { remove } from "jszip";
 import createSlogan from "@/component/HomePage/createSlogan.vue";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
 export default defineComponent({
    components: {
        // HeaderComponent,
@@ -384,6 +433,7 @@ export default defineComponent({
 		scaleImage,
 		sketchCategory,
 		createSlogan,
+		generalMenu,
    },
 	props:{
 		getLangIsShowMark:{
@@ -415,7 +465,8 @@ export default defineComponent({
 			value:''
 		})
        let sex:any = ref('')
-		const sexList:any = computed(()=>store.state.UserHabit.sex.value)
+		// const sexList:any = []
+		let sexList:any = computed(()=>store.state.UserHabit.sex.value)
 		const printType = computed(() => {
 			return store.state.UserHabit.printType;
 		});
@@ -521,10 +572,9 @@ export default defineComponent({
 		})
 		let generateLevel2:any = {}
 		let isSloganHint:any = ref('')
-		
+		let printModelList:any = ref([])
 		let getSex = () =>{
 			sex.value = store.state.UserHabit.sex.value[0].value
-			sexList.value = store.state.UserHabit.sex.value
 			getPosition()
 		}
 		let getPosition = ()=>{
@@ -618,6 +668,7 @@ export default defineComponent({
 			searchPictureSeed,
 			sexList,
 			sex,
+			positionType,
 			designTypeList,
            designType,
            imgList,
@@ -659,6 +710,7 @@ export default defineComponent({
 			getPosition,
 			getLibraryList,
 			getClass,
+			printModelList,
        }
    },
 	data(this_) {
@@ -769,26 +821,56 @@ export default defineComponent({
 					}else{
 						this.designType = ''
 					}
-					if(this.selectCode == 'DesignElements')this.uploadGenerate = 'Upload'
-					if(this.selectCode == 'Printboard')this.uploadGenerate = 'Upload'
-					if(this.selectCode == 'Models')this.uploadGenerate = 'Upload'
 					if(this.selectCode != 'DesignElements'){
 						this.getClass()
 					}
 					if(this.selectCode == 'Sketchboard' || this.selectCode == 'Models')this.getSex()
-					
-
-					this.getLibraryList('')
+					if(this.selectCode == 'Sketchboard'){
+						this.positionType = computed(() => {
+							return this.store.state.UserHabit.Position;
+						});
+						this.printModelList = JSON.parse(JSON.stringify(this.store.state.UserHabit.SketchStyle))
+						let imgList = ['/image/sketch/sketch-fine.jpg','/image/sketch/sketch-medium.jpg','/image/sketch/sketch-thick.jpg']
+						this.printModelList.forEach((item:any,index:number)=>{
+							item.img = imgList[index]
+						})
+					}
+					if(this.selectCode == 'Printboard'){
+						this.printModelList = [
+							{
+								num:'',
+								optype:false,
+								value:'Painting Style',
+								label:this.t('Generate.Model1')
+							},{
+								num:'',
+								optype:false,
+								value:'Illustration Style',
+								label:this.t('Generate.Model2')
+							},{
+								num:'',
+								optype:false,
+								value:'Real Style',
+								label:this.t('Generate.Model3')
+							},
+						]
+					}
+					if(this.printModelList[0])this.printModel = this.printModelList[0]
 					this.captionGeneration = ''
 					this.selectGenerateList = []
 					this.inputShow = false
+					this.uploadGenerateOpen('Upload')
 				}
 				this.upload.level1Type = menu.code
            }
        },

 		async sexChange(){
-			await this.getPosition()
+			if(this.uploadGenerate == 'Generate' && this.selectCode == 'Sketchboard'){
+			}else{
+				// this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
+				await this.getPosition()
+			}
 			if(this.uploadGenerate == 'Generate')return
            this.currentPage = 1
            this.getLibraryList('')
@@ -874,16 +956,21 @@ export default defineComponent({
 			// 		this.scene = this.designTypeList[this.selectCode][0]
 			// 	}
 			// }
+			if(this.selectCode == 'Sketchboard' && str == 'Generate'){
+				this.designTypeList.Sketchboard = computed(()=>{
+					return this.store.state.UserHabit.SketchGenerateType
+				})
+			}else if(this.selectCode == 'Sketchboard'){
+				this.designTypeList.Sketchboard = computed(() => {
+					return this.store.state.UserHabit.Position;
+				});
+			}
 			if(this.designTypeList[this.selectCode][0]){
 				this.scene = this.designTypeList[this.selectCode][0]
 				this.designType = this.designTypeList[this.selectCode][0].value
 			}
-
-			
-			if(this.uploadGenerate == 'Generate'){
-				if(str != 'Generate'){
-                    this.getLibraryList('')
-				}
+			if(str != 'Generate'){
+				this.getLibraryList('')
 			}
 			this.uploadGenerate = str
 		},
@@ -1237,14 +1324,49 @@ export default defineComponent({
 			this.printModel.optype = false
 			document.removeEventListener('click',this.removePrintModel)
 		},
-		setprintModel(num:any){
-			this.printModel = {
-				num : num,
-				optype:false,
-				name:this.t('LibraryPage.Model'+num)
+		setprintModel(item:any){
+			this.printModel = item
+			// this.printModel = {
+			// 	num : num,
+			// 	optype:false,
+			// 	name:this.t('LibraryPage.Model'+num)
+			// }
+		},
+		imageToSketch(){
+			if((!this.printModel?.id && !this.printModel?.value) || !this.selectGenerateList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
+			this.isShowMark = true
+			let data = {
+				"elementId": this.selectGenerateList[0].id,
+				gender:this.workspace.sexEnum.value,
+				"style": this.printModel.value,
+				"styleImageId": this.printModel.id?this.printModel.id:''
 			}
+			Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
+				if(rv){
+					this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
+						if(itemCategory.value == rv.category){
+							rv.categoryValue = itemCategory?.value
+							rv.category = itemCategory?.name
+						}
+					});
+					this.generateList[this.selectCode].push({
+						imgUrl:rv.url,
+						categoryValue:rv.categoryValue,
+						category:rv.category,
+						id:rv.id,
+						status:'Success',
+					})
+					this.isShowMark = false
+				}
+			}).catch(()=>{
+				this.isShowMark = false
+			})
 		},
 		getgenerate(){
+			if(this.scene?.value == 'extract'){
+				this.imageToSketch()
+				return
+			}
 			this.isInputFocus = false
 			this.isTextarea = false
 			let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
@@ -1509,6 +1631,11 @@ export default defineComponent({
                box-sizing: border-box;
                display: flex;
 				padding-top: 2rem;
+				.printModel{
+					font-size: 1.4rem;
+					font-weight: 500;
+					margin-right: 2rem;
+				}
                .library_body_left{
                    // width: 27.5rem;
 					width: 36.5rem;
@@ -1789,46 +1916,7 @@ export default defineComponent({
 										}
 									}
 									
-									.printModel{
-										font-size: 1.4rem;
-										font-weight: 500;
-										margin-right: 2rem;
-										>div{
-											width: 13rem;
-											// display: flex;
-											display: block;
-											border-radius: 1rem;
-											margin: 0;
-											border: 2px solid;
-											cursor: pointer;
-											white-space: nowrap; 
-											overflow: hidden;
-											text-overflow: ellipsis;
-											padding: 0 1rem;
-											text-align: center;
-										}
-										ul{
-											position: absolute;
-											width: 13rem;
-											text-align: center;
-											margin-top: .3rem;
-											border-radius: 1rem;
-											overflow: hidden;
-											z-index: 3;
-											li{
-												background: #c5c4c8;
-												line-height: 2;
-												cursor: pointer;
-												white-space: nowrap; 
-												overflow: hidden;
-												text-overflow: ellipsis;
-												padding: 0 1rem;
-												&.printModel_item:hover{
-													background: #949396;
-												}
-											}
-										}
-										}
+									
 								}
 								
                            }