调整library的generate生成交互

This commit is contained in:
X1627315083
2024-04-25 17:16:16 +08:00
parent 9f02f1245e
commit 2c08adbfbe
2 changed files with 44 additions and 32 deletions

View File

@@ -674,7 +674,7 @@ export default defineComponent({
} }
if(generateType == 'image'){ if(generateType == 'image'){
if(generage?.collectionElementid){ if(generage?.collectionElementid){
data.text = '' data.text = generage.printModel.value
}else{ }else{
message.info( message.info(

View File

@@ -213,7 +213,12 @@
@keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'" @keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'"
:placeholder="$t('LibraryPage.inputContent2')" :placeholder="$t('LibraryPage.inputContent2')"
v-model="captionGeneration"> v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('LibraryPage.Generate') }}</div> <div class="generage_btn started_btn" @click.stop="getgenerate">
<!-- <div v-show="!isGenerate">{{ $t('LibraryPage.Generate') }}</div> -->
<i class="fi fi-br-loading"></i>
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
</div>
<span ref="inputShowText"></span> <span ref="inputShowText"></span>
</div> </div>
</div> </div>
@@ -278,12 +283,12 @@
</div> </div>
<div class="content_body_table scroll_style"> <div class="content_body_table scroll_style">
<div class="content_img_item" v-for="(img,index) in generateList" :key="img.id"> <div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id">
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']"> <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
<img v-show="img.status != 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> <img v-show="img.status != 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt="">
<img v-show="img.status == 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" :src="img.imgUrl"> <img v-show="img.status == 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" :src="img.imgUrl">
<div class="img_item_hover"> <div v-show="img.status == 'Success'" class="img_item_hover">
<div class="img_operate_content"> <div class="img_operate_content">
<div class="img_operate_block"> <div class="img_operate_block">
<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i> <i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
@@ -296,17 +301,13 @@
</div> </div>
</div> </div>
</div> </div>
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="generateList" :item="img"></sketchCategory> <sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
</div> </div>
<div class="content_img_name"></div> <div class="content_img_name"></div>
</div> </div>
<div class="no_data_block" v-show="!generateList.length && !isShowMark"> <div class="no_data_block" v-show="!generateList[selectCode].length && !isShowMark">
<img src="@/assets/images/homePage/null_img.png"> <img src="@/assets/images/homePage/null_img.png">
</div> </div>
</div>
<div class="table_pagination" v-show="generateList.length">
</div> </div>
</div> </div>
</div> </div>
@@ -415,8 +416,12 @@ export default defineComponent({
let generateCheckbox:any = ref() let generateCheckbox:any = ref()
let captionGeneration:any = ref() let captionGeneration:any = ref()
let inputTime = ref() let inputTime = ref()
let generateList:any = ref([ let generateList:any = ref({
]) Sketchboard:[],
Moodboard:[],
Printboard:[]
})
let selectGenerateList:any = ref([]) let selectGenerateList:any = ref([])
let printModel = ref({ let printModel = ref({
num:1, num:1,
@@ -628,7 +633,11 @@ export default defineComponent({
this.uploadGenerate = 'Upload' this.uploadGenerate = 'Upload'
this.captionGeneration = '' this.captionGeneration = ''
this.selectGenerateList = [] this.selectGenerateList = []
this.generateList = [] // this.generateList = {
// 'Sketchboard':[],
// 'Moodboard':[],
// 'Printboard':[]
// }
this.inputShow = false this.inputShow = false
} }
this.upload.level1Type = menu.code this.upload.level1Type = menu.code
@@ -1054,7 +1063,7 @@ export default defineComponent({
// ); // );
// return // return
// } // }
if(this.isShowMark){ if(this.isGenerate){
return return
} }
let arr = ["Painting Style","Illustration Style","Real Style"] let arr = ["Painting Style","Illustration Style","Real Style"]
@@ -1078,7 +1087,7 @@ export default defineComponent({
} }
if(generateType == 'image'){ if(generateType == 'image'){
if(generageImg?.id){ if(generageImg?.id){
data.text = '' data.text = arr[this.printModel.num-1]
}else{ }else{
message.info( message.info(
this.t('LibraryPage.jsContent9') this.t('LibraryPage.jsContent9')
@@ -1129,7 +1138,7 @@ export default defineComponent({
return return
} }
} }
this.isShowMark = true // this.isShowMark = true
this.isGenerate = true this.isGenerate = true
Https.axiosPost(Https.httpUrls.generatePrepare, data).then( Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => { (rv) => {
@@ -1147,7 +1156,7 @@ export default defineComponent({
}else if(rv.leftUsageCount == 0){ }else if(rv.leftUsageCount == 0){
message.warning(this.t('Generate.jsContent9',{str:str})); message.warning(this.t('Generate.jsContent9',{str:str}));
this.isGenerate = false this.isGenerate = false
this.isShowMark = false // this.isShowMark = false
return return
} }
} }
@@ -1155,7 +1164,7 @@ export default defineComponent({
let arr:any = {} let arr:any = {}
arr.taskId = item arr.taskId = item
arr.status = 'execution' arr.status = 'execution'
this.generateList.unshift(arr) this.generateList[this.selectCode].unshift(arr)
}); });
this.setGenerate() this.setGenerate()
this.remGenerateTime = setTimeout(()=>{ this.remGenerateTime = setTimeout(()=>{
@@ -1163,23 +1172,23 @@ export default defineComponent({
},10000) },10000)
} }
).catch(res=>{ ).catch(res=>{
this.isShowMark = false // this.isShowMark = false
this.isGenerate = false this.isGenerate = false
}); });
}, },
setGenerate(){ setGenerate(){
this.generateTime = setInterval(()=>{ this.generateTime = setInterval(()=>{
let data = this.generateList.filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId); let data = this.generateList[this.selectCode].filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
Https.axiosPost(Https.httpUrls.generateResult, data).then( Https.axiosPost(Https.httpUrls.generateResult, data).then(
(rv) => { (rv) => {
if(this.isShowMark){//防止取消后有正在执行的获取状态 if(this.isGenerate){//防止取消后有正在执行的获取状态
let arr:any = [] let arr:any = []
arr = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid') arr = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => { rv.forEach((element:any) => {
this.generateList.forEach((item:any,index:any) => { this.generateList[this.selectCode].forEach((item:any,index:any) => {
if(item.taskId == element.taskId && element.status == 'Success'){ if(item.taskId == element.taskId && element.status == 'Success'){
element.imgUrl = element.url element.imgUrl = element.url
this.generateList[index] = element this.generateList[this.selectCode][index] = element
if(element.category){ if(element.category){
this.disignTypeList.forEach((itemCategory:any) => { this.disignTypeList.forEach((itemCategory:any) => {
if(itemCategory.value == element.category){ if(itemCategory.value == element.category){
@@ -1196,28 +1205,28 @@ export default defineComponent({
message.info(this.t('Generate.effectPoor')); message.info(this.t('Generate.effectPoor'));
} }
if(arr.length == 0){ if(arr.length == 0){
this.generateList = this.generateList.filter((item:any)=>item.status == 'Success') this.generateList[this.selectCode] = this.generateList[this.selectCode].filter((item:any)=>item.status == 'Success')
clearInterval(this.generateTime) clearInterval(this.generateTime)
clearInterval(this.remGenerateTime) clearInterval(this.remGenerateTime)
this.isShowMark = false // this.isShowMark = false
this.remGenerate = false this.remGenerate = false
this.isGenerate = false this.isGenerate = false
} }
} }
} }
).catch(res=>{ ).catch(res=>{
this.generateList = this.generateList.filter((item:any)=>item.status == 'Success') this.generateList[this.selectCode] = this.generateList[this.selectCode].filter((item:any)=>item.status == 'Success')
clearInterval(this.generateTime) clearInterval(this.generateTime)
clearInterval(this.remGenerateTime) clearInterval(this.remGenerateTime)
this.isShowMark = false // this.isShowMark = false
this.isGenerate = false this.isGenerate = false
}); });
},1000) },1000)
}, },
removeGenerate(){ removeGenerate(){
let arr = this.generateList.filter((item:any)=>item.status != 'Success') let arr = this.generateList[this.selectCode].filter((item:any)=>item.status != 'Success')
this.generateList = this.generateList.filter((item:any)=>item.status == 'Success') this.generateList[this.selectCode] = this.generateList[this.selectCode].filter((item:any)=>item.status == 'Success')
this.isShowMark = false // this.isShowMark = false
this.isGenerate = false this.isGenerate = false
this.remGenerate = false this.remGenerate = false
clearInterval(this.generateTime) clearInterval(this.generateTime)
@@ -1315,7 +1324,7 @@ export default defineComponent({
scaleImage(index:any){ scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage let scaleImage:any = this.$refs.scaleImage
scaleImage.scaleImageMask = true scaleImage.scaleImageMask = true
scaleImage.init(this.generateList,index) scaleImage.init(this.generateList[this.selectCode],index)
}, },
} }
}) })
@@ -1635,7 +1644,10 @@ export default defineComponent({
cursor: no-drop; cursor: no-drop;
} }
} }
.fi-br-loading{
animation: whirl 1s infinite linear;
}
.generage_btn{ .generage_btn{
margin: 0 3rem; margin: 0 3rem;
} }