修改library里面的sketch的generate

This commit is contained in:
X1627315083
2024-10-18 11:36:19 +08:00
parent f606a192d1
commit c14e72efb2
7 changed files with 168 additions and 76 deletions

View File

View File

@@ -543,6 +543,9 @@ export default defineComponent({
width: canvasWH.value.width, width: canvasWH.value.width,
height: canvasWH.value.height, height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式 isDrawingMode: false, // 开启绘图模式
selectionFullyContained: true,
selectionKey:'ctrlKey',
includeDefaultValues: false,//尚未测试 精简导出JSON
}); });
canvasOnDrop()//开启鼠标到画布事件 canvasOnDrop()//开启鼠标到画布事件
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除 if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除

View File

@@ -5,11 +5,11 @@
<template #content> <template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt=""> <img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
</template> </template>
<span v-if="item.label">{{ item.label }}</span> <span v-if="item?.label">{{ item?.label }}</span>
<span v-else>{{ item.name }}</span> <span v-else>{{ item.name }}</span>
</a-popover> </a-popover>
<div v-else> <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> <span v-else>{{ item.name }}</span>
</div> </div>
</div> </div>
@@ -41,12 +41,11 @@
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span> <span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
</template> </template>
<span v-if="item?.label">{{ item?.label }}</span>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span> <span v-else>{{ item.name }}</span>
</a-popover> </a-popover>
<div v-else> <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> <span v-else>{{ item.name }}</span>
</div> </div>
</li> </li>

View File

@@ -454,6 +454,8 @@ export default defineComponent({
} }
}); });
}) })
}else{
this.scaleImageIndex = index
} }
}, },
LikeFile(item:any,str:string){ LikeFile(item:any,str:string){

View File

@@ -82,6 +82,9 @@ class myCanvas {
width: val.width?val.width:this.canvasDomParent.getBoundingClientRect().width, width: val.width?val.width:this.canvasDomParent.getBoundingClientRect().width,
height: val.height?val.height:this.canvasDomParent.getBoundingClientRect().height, height: val.height?val.height:this.canvasDomParent.getBoundingClientRect().height,
isDrawingMode: val.isDrawingMode, // 开启绘图模式 isDrawingMode: val.isDrawingMode, // 开启绘图模式
selectionFullyContained: true,
selectionKey:'ctrlKey',
includeDefaultValues: false,//尚未测试 精简导出JSON
}); });
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除 if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除

View File

@@ -197,7 +197,6 @@ export default defineComponent({
payOrder, payOrder,
TaskPage, TaskPage,
navRouter, navRouter,
navRouter,
}, },
setup(){ setup(){
const store = useStore(); const store = useStore();
@@ -612,8 +611,6 @@ export default defineComponent({
this.store.commit('clearAllData') this.store.commit('clearAllData')
// window.location.reload() // window.location.reload()
window.location.href = '/home'; window.location.href = '/home';
// window.location.reload()
window.location.href = '/home';
} }
} }
}) })
@@ -640,11 +637,11 @@ export default defineComponent({
.homeMain_max{ .homeMain_max{
position: relative; position: relative;
display: flex; display: flex;
height: 100%; height: 100vh;
flex-direction: column; flex-direction: column;
.homeMain_content_body{ .homeMain_content_body{
flex: 1; flex: 1;
height: calc(100% - 7rem); height: calc(100vh - 7rem);
} }
} }
.homeMain_heade { .homeMain_heade {

View File

@@ -69,7 +69,7 @@
</a-select> </a-select>
<a-select <a-select
ref="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" v-model:value="designType"
:options="designTypeList[selectCode]" :options="designTypeList[selectCode]"
@change="handleChange" @change="handleChange"
@@ -195,17 +195,18 @@
<div class="right_content_body" v-show="uploadGenerate !='Upload'"> <div class="right_content_body" v-show="uploadGenerate !='Upload'">
<div class="content_body_header content_body_header_generate"> <div class="content_body_header content_body_header_generate">
<div class="content_body_header_right"></div> <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> <div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype"> <ul v-show="printModel.optype">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li> <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(2)">{{ $t('LibraryPage.Model2') }}</li>
<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li> <li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
</ul> </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_border">
<div class="input_box" :class="{active:inputShow}"> <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_item" v-show="selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
<div <div
class="upload_file_item" 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-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> <i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
</div> </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 <textarea
v-show="isTextarea " v-show="isTextarea "
class="search_textarea " class="search_textarea "
@@ -335,7 +383,7 @@
</div> </div>
</div> </div>
<searchLabel ref="searchLabel"></searchLabel> <searchLabel ref="searchLabel"></searchLabel>
<scaleImage ref="scaleImage"></scaleImage> <scaleImage ref="scaleImage" :isCanvas="selectCode == 'Sketchboard'"></scaleImage>
<ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement> <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
<ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile> <ModelPlacementMobile ref="ModelPlacementMobile" @submitModelPlacement="getLibraryList"></ModelPlacementMobile>
<setLabel ref="setLabel"></setLabel> <setLabel ref="setLabel"></setLabel>
@@ -372,6 +420,7 @@ import { useI18n } from "vue-i18n";
import { ElCascader } from 'element-plus' import { ElCascader } from 'element-plus'
import { remove } from "jszip"; import { remove } from "jszip";
import createSlogan from "@/component/HomePage/createSlogan.vue"; import createSlogan from "@/component/HomePage/createSlogan.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
// HeaderComponent, // HeaderComponent,
@@ -384,6 +433,7 @@ export default defineComponent({
scaleImage, scaleImage,
sketchCategory, sketchCategory,
createSlogan, createSlogan,
generalMenu,
}, },
props:{ props:{
getLangIsShowMark:{ getLangIsShowMark:{
@@ -415,7 +465,8 @@ export default defineComponent({
value:'' value:''
}) })
let sex:any = ref('') 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(() => { const printType = computed(() => {
return store.state.UserHabit.printType; return store.state.UserHabit.printType;
}); });
@@ -521,10 +572,9 @@ export default defineComponent({
}) })
let generateLevel2:any = {} let generateLevel2:any = {}
let isSloganHint:any = ref('') let isSloganHint:any = ref('')
let printModelList:any = ref([])
let getSex = () =>{ let getSex = () =>{
sex.value = store.state.UserHabit.sex.value[0].value sex.value = store.state.UserHabit.sex.value[0].value
sexList.value = store.state.UserHabit.sex.value
getPosition() getPosition()
} }
let getPosition = ()=>{ let getPosition = ()=>{
@@ -618,6 +668,7 @@ export default defineComponent({
searchPictureSeed, searchPictureSeed,
sexList, sexList,
sex, sex,
positionType,
designTypeList, designTypeList,
designType, designType,
imgList, imgList,
@@ -659,6 +710,7 @@ export default defineComponent({
getPosition, getPosition,
getLibraryList, getLibraryList,
getClass, getClass,
printModelList,
} }
}, },
data(this_) { data(this_) {
@@ -769,26 +821,56 @@ export default defineComponent({
}else{ }else{
this.designType = '' 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'){ if(this.selectCode != 'DesignElements'){
this.getClass() this.getClass()
} }
if(this.selectCode == 'Sketchboard' || this.selectCode == 'Models')this.getSex() if(this.selectCode == 'Sketchboard' || this.selectCode == 'Models')this.getSex()
if(this.selectCode == 'Sketchboard'){
this.positionType = computed(() => {
this.getLibraryList('') 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.captionGeneration = ''
this.selectGenerateList = [] this.selectGenerateList = []
this.inputShow = false this.inputShow = false
this.uploadGenerateOpen('Upload')
} }
this.upload.level1Type = menu.code this.upload.level1Type = menu.code
} }
}, },
async sexChange(){ async sexChange(){
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() await this.getPosition()
}
if(this.uploadGenerate == 'Generate')return if(this.uploadGenerate == 'Generate')return
this.currentPage = 1 this.currentPage = 1
this.getLibraryList('') this.getLibraryList('')
@@ -874,17 +956,22 @@ export default defineComponent({
// this.scene = this.designTypeList[this.selectCode][0] // 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]){ if(this.designTypeList[this.selectCode][0]){
this.scene = this.designTypeList[this.selectCode][0] this.scene = this.designTypeList[this.selectCode][0]
this.designType = this.designTypeList[this.selectCode][0].value this.designType = this.designTypeList[this.selectCode][0].value
} }
if(this.uploadGenerate == 'Generate'){
if(str != 'Generate'){ if(str != 'Generate'){
this.getLibraryList('') this.getLibraryList('')
} }
}
this.uploadGenerate = str this.uploadGenerate = str
}, },
//删除单个图片 //删除单个图片
@@ -1237,14 +1324,49 @@ export default defineComponent({
this.printModel.optype = false this.printModel.optype = false
document.removeEventListener('click',this.removePrintModel) document.removeEventListener('click',this.removePrintModel)
}, },
setprintModel(num:any){ setprintModel(item:any){
this.printModel = { this.printModel = item
num : num, // this.printModel = {
optype:false, // num : num,
name:this.t('LibraryPage.Model'+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(){ getgenerate(){
if(this.scene?.value == 'extract'){
this.imageToSketch()
return
}
this.isInputFocus = false this.isInputFocus = false
this.isTextarea = false this.isTextarea = false
let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode)) let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
@@ -1509,6 +1631,11 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding-top: 2rem; padding-top: 2rem;
.printModel{
font-size: 1.4rem;
font-weight: 500;
margin-right: 2rem;
}
.library_body_left{ .library_body_left{
// width: 27.5rem; // width: 27.5rem;
width: 36.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;
}
}
}
}
} }
} }