aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接入画布

Browse Source
This commit is contained in:
X1627315083
2025-06-09 10:25:54 +08:00
parent 87a08f5f8f
commit c266967f16
157 changed files with 43833 additions and 1571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/component/home/design/editDesignType/index.vue
View File

@@ -24,8 +24,8 @@
<i class="fi fi-rr-down-to-line"></i>
</div>
</div>
<div class="scaleImage_content">
<div v-if="isProductimg" class="productImg_modal">
<div class="scaleImage_content" v-if="scaleImage">
<div class="productImg_modal">
<div class="productImg_left">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
@@ -94,13 +94,13 @@
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
<div v-show="!generateSuccess.productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
</div>
<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<div v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
<div v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
@@ -110,10 +110,10 @@
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<div class="loadBox" v-show="generateSuccess">
<div class="load" v-show="productimgIsProductimg">
<div class="load" v-show="generateSuccess.productimgIsProductimg">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<img v-show="!productimgIsProductimg" :src="generateSuccess?.url">
<img v-show="!generateSuccess.productimgIsProductimg" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url">
</div>
<div class="img_operate_block" v-if="isLike">
@@ -173,7 +173,7 @@ props:{
default:''
},
},
emits:['addGenerateImg'],
emits:['addGenerateImg','setGenerateAwait'],
setup(props:any,{emit}) {
const store = useStore();
let userDetail:any= computed(()=>{
@@ -181,8 +181,8 @@ setup(props:any,{emit}) {
})
let {t} = useI18n()
let productimg = reactive({
isGenerate:false,//判断是否进行generate
UpgradePlan:null,
isProductimg:false,
productimgSearchName:'',
productimgIsTextarea:false,
productimgRemProductimg:false,
@@ -242,34 +242,35 @@ setup(props:any,{emit}) {
projectId:productimg.selectObject.id,
imageStrength:(100 - imageStrength)/100,
}
// console.log(data)
// return
productimg.productimgIsProductimg = true
remPrductimgTime = setTimeout(()=>{
productimg.productimgRemProductimg = true
productimg.generateSuccess.productimgIsProductimg = true
productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
productimg.generateSuccess.productimgRemProductimg = true
},10000)
let url = Https.httpUrls.relight
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProduct
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
url = Https.httpUrls.poseTransform
}
isShowMark.value = true
productimg.generateSuccess.isShowMark = true
Https.axiosPost(url, data).then(
(rv) => {
isShowMark.value = false
productimg.generateSuccess.isShowMark = false
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
let arr:any = []
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
// productimg.generateList.unshift(...rv)
if(productimg.generateSuccess?.isIndex || productimg.generateSuccess?.isIndex == 0)emit('setGenerateAwait',{index:productimg.generateSuccess.isIndex,listType:productimg.generateSuccess.listType})
setPrductimg(arr)
productimg.isGenerate = true
}
).catch(res=>{
isShowMark.value = false
productimg.productimgIsProductimg = false
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.generateSuccess.isShowMark = false
productimg.generateSuccess.productimgIsProductimg = false
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgRemProductimg = false
if(res.errCode === 2){
Modal.confirm({
title: res.errMsg,
@@ -299,49 +300,66 @@ setup(props:any,{emit}) {
let url = Https.httpUrls.relightResult
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProductImageResult
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
url = Https.httpUrls.poseTransformResult
}
prductimgTime = setInterval(()=>{
productimg.generateSuccess.prductimgTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(url, data).then(
(rv) => {
state = true
if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
if(productimg.generateSuccess.productimgIsProductimg){//防止取消后有正在执行的获取状态
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
let isEnd = false
if(rv[0].status == 'Success'){
// let id = productimg.generateSuccess?.designItemId || rv[0].id
// rv[0].id = id
// let listType = productimg.generateSuccess.listType
productimg.generateSuccess = Object.assign(productimg.generateSuccess,rv[0])
rv[0].designOutfitUrl = rv[0].url
productimg.generateSuccess.newData = rv[0]
if(productimg.generateSuccess?.scaleImage){
setCove()
}
// productimg.generateSuccess.listType = listType
isEnd = true
clearInterval(remPrductimgTime)
clearInterval(productimg.generateSuccess.remPrductimgTime)
}else if(rv[0].status == 'Fail'){
isEnd = true
}
generateProceedList = data
if(isEnd){
store.state.store.dispatch('getCredits')
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.productimgIsProductimg = false
clearInterval(productimg.generateSuccess.prductimgTime)
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgRemProductimg = false
productimg.generateSuccess.productimgIsProductimg = false
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.remPrductimgTime
delete productimg.generateSuccess.prductimgTime
}
}
}
).catch(res=>{
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
clearInterval(productimg.generateSuccess.prductimgTime)
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgIsProductimg = false
productimg.generateSuccess.productimgRemProductimg= false
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.remPrductimgTime
delete productimg.generateSuccess.prductimgTime
});
},1000)
}
let removeProductimg = ()=>{
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
clearInterval(prductimgTime)
productimg.generateSuccess.productimgIsProductimg = false
productimg.generateSuccess.productimgRemProductimg= false
clearInterval(productimg.generateSuccess.prductimgTime)
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.prductimgTime
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
@@ -358,48 +376,22 @@ setup(props:any,{emit}) {
});
}
}
let submitBase64Data = async (rv:any)=>{
loadingShow.value = true
let isOverlay = false
await new Promise<void>((resolve, reject) => {
Modal.confirm({
title: t('scaleImage.overlayOrNot'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve()
isOverlay = true
},
onCancel(){
isOverlay = false
resolve()
}
});
})
let setCove = ()=>{
let data = {
"base64": rv,
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type,
"gender": props.sex,
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
"isOverride":isOverlay,
...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
oldId:productimg.generateSuccess.id,
status:productimg.generateSuccess.status,
listType:productimg.generateSuccess.listType,
isIndex:productimg.generateSuccess.isIndex
}
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
(rv) => {
rv.imgUrl = rv.url
rv.status = 'Success'
rv.category = scaleImageList.value[scaleImageIndex.value]?.category
rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
loadingShow.value = false
scaleImage.value = false
}
).catch(res=>{
loadingShow.value = false
});
emit('addGenerateImg',data)
delete productimg.generateSuccess.isShowMark
delete productimg.generateSuccess.listType
}
let setAdd = ()=>{
}
return {
t,
@@ -417,7 +409,8 @@ setup(props:any,{emit}) {
robotAssits,
getPrductimg,
removeProductimg,
submitBase64Data,
setCove,
setAdd,
};
},
data() {
@@ -445,24 +438,42 @@ mounted() {
},
methods: {
init(list:any,index:any,dialogueIndex:any,status:any,listType:string){
if(status == 'edit'){
if(status == 'add'){
this.generateSuccess = {
...list[index],
id:list[index].designItemId || list[index].id,
oldId:list[index].designItemId || list[index].id,
url:list[index].designOutfitUrl || list[index].url,
designItemId:list[index].designOutfitId,
listType,
}
if(list[index].imageStrength)this.productimgSimilarity = 100 - list[index].imageStrength * 100
if(list[index].imageStrength)list[index].brightenValue
if(list[index].imageStrength)list[index].direction
}else{
this.generateSuccess = {
listType,
}
this.generateSuccess = list[index]
this.generateSuccess.listType = listType
this.generateSuccess.isIndex = index
}
this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
this.generateSuccess.remPrductimgTime = this.generateSuccess.remPrductimgTime?this.generateSuccess.remPrductimgTime:null
this.generateSuccess.prductimgTime = this.generateSuccess.prductimgTime?this.generateSuccess.prductimgTime:null
this.scaleImage = true
// if(status == 'edit'){
// this.generateSuccess = {
// ...list[index],
// id:list[index].designItemId || list[index].id,
// oldId:list[index].designItemId || list[index].id,
// url:list[index].designOutfitUrl || list[index].url,
// designItemId:list[index].designOutfitId,
// listType,
// }
// if(list[index].imageStrength)this.productimgSimilarity = 100 - list[index].imageStrength * 100
// if(list[index].imageStrength)list[index].brightenValue
// if(list[index].imageStrength)list[index].direction
// }else{
// this.generateSuccess = {
// listType,
// }
// }
this.scaleImage = true
this.isGenerate = false
this.scaleImageList = list
// if(this.scaleImageList[index]?.resultType == 'ToProductImage')this.scaleImageList[index].sourceUrl = this.scaleImageList[index].imgUrl
this.scaleImageIndex = index
@@ -473,20 +484,20 @@ methods: {
async cancelDsign(){
document.removeEventListener('keydown',this.setKeydown)
let data = {
...JSON.parse(JSON.stringify(this.generateSuccess)),
}
let isIndex = -1
if(data?.oldId){
this.scaleImageList.forEach((rv:any,index:number)=>{
if(rv.designItemId == data?.oldId || rv.id == data?.oldId){
isIndex = index
}
})
}
// let data = {
// ...JSON.parse(JSON.stringify(this.generateSuccess)),
// }
// let isIndex = -1
// if(data?.oldId){
// this.scaleImageList.forEach((rv:any,index:number)=>{
// if(rv.designItemId == data?.oldId || rv.id == data?.oldId){
// isIndex = index
// }
// })
// }
data.isIndex = isIndex
if(isIndex != -1 && data.oldId){
// data.isIndex = isIndex
if(this.isGenerate && this.generateSuccess.id){
await new Promise((resolve,reject)=>{
let this_ = this
Modal.confirm({
@@ -497,25 +508,43 @@ methods: {
mask:false,
centered:true,
onOk() {
this_.$emit('addGenerateImg',data)
// this_.$emit('addGenerateImg',data)
//另存为操作
this_.generateSuccess.status = 'add'
if(this_.generateSuccess?.newData){
this_.setCove()
}
resolve('')
},
onCancel(){
//覆盖操作
this_.generateSuccess.status = 'cove'
if(this_.generateSuccess?.newData){
this_.setCove()
}
// if(!this_.generateSuccess?.newData?.id){
// this_.setCove()
// }else{
// }
resolve('')
}
});
})
}else{
this.$emit('addGenerateImg',data)
this.generateSuccess.status = 'add'
if(this.generateSuccess?.newData){
this.setCove()
}
}
this.generateSuccess.scaleImage = true
this.scaleImage = false
this.scaleImageIndex = 0
// this.scaleImageIndex = 0
this.isNext = false
this.generateSuccess = null
this.scaleImageList = []
// this.generateSuccess = null
// this.scaleImageList = []
},
lastStep(){
if(this.productimgIsProductimg) return
if(this.generateSuccess.productimgIsProductimg) return
if(this.isNext)return
let num = this.scaleImageIndex
if(this.scaleImageIndex <= 0){
@@ -525,7 +554,7 @@ methods: {
}
},
nextStep(){
if(this.productimgIsProductimg) return
if(this.generateSuccess.productimgIsProductimg) return
if(this.isNext)return
let num = this.scaleImageIndex
if(this.scaleImageIndex >= this.scaleImageList.length-1){
@@ -535,7 +564,7 @@ methods: {
}
},
download(){
let url = this.scaleImageList[this.scaleImageIndex].imgUrl || this.scaleImageList[this.scaleImageIndex]?.url
let url = this.scaleImageList[this.scaleImageIndex].url || this.scaleImageList[this.scaleImageIndex]?.designOutfitUrl
downloadIamge(url)
},
setScaleImageIndex(index:any){

243
src/component/home/design/index.vue
View File

@@ -49,30 +49,11 @@
</div>
</div>
<div class="right_top_right">
<div class="generalModel_state">
<div class="generalModel_state_item smail">
<span>Size :</span>
<a-select
v-model:value="widthValue"
show-search
size="large"
allowClear
style="width: 150px"
placeholder="Please select"
:options="widthList"
@change="setSystemDesigner(500)"
>
<!-- <template #option="{ value: val, label, icon }">
<span role="img" :aria-label="val">{{ icon }}</span>
{{ label }}
</template> -->
</a-select>
</div>
</div>
</div>
</div>
<div class="right_content_block_box">
<div class="right_content_block" @mouseenter="mouseenter($event,'like')">
<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
<div class="right_content_body">
@@ -82,24 +63,51 @@
{{ $t('HomeView.SelectedDesign') }}
</span>
</div>
<div class="generalModel_state">
<!-- <div class="generalModel_state_item smail" style="margin-right: 0;">
<span>Type :</span>
<a-select
v-model:value="widthValue.value"
size="large"
style="width: 15rem"
placeholder="Please select"
:options="widthList"
@change="upDataLikeListType(500)"
>
</a-select>
</div> -->
<div class="generalModel_state_item smail" style="margin-right: 0;">
<span>Size :</span>
<a-select
v-model:value="widthValue.value"
size="large"
style="width: 15rem"
placeholder="Please select"
:options="widthList"
@change="setSystemDesigner(500)"
>
</a-select>
</div>
</div>
</div>
<div class="right_content_img_block scroll_style active">
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId,'like')"
v-for="(design, index) in likeDesignCollectionList" :key="design.id || design.designItemId">
<div class="content_img_flex"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId || design.id,'like')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId || design.id,'like')"
@click="designDetail(
design,
index,
likeDesignCollectionList,
'like'
)">
<div class="content_img_flex">
<img class="content_img" :src="design.designOutfitUrl||design.url"
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
:key="design.designOutfitUrl" designType="like" :index="index"/>
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
</div>
<div class="btn">
<div class="btn" v-show="!design?.generateAwait">
<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
<div class="item" @click="dislikeDesignCollection(design,design.resultType,index)">
@@ -107,10 +115,10 @@
<div class="icon iconfont icon-jushoucanggift icon_like">
</div>
</div>
<!-- <div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
<div class="text">Transfer Pose</div>
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
</div> -->
</div>
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'Relight','add','like')">
<div class="text">Relight</div>
<i class="fi fi fi-br-keyboard-brightness"></i>
@@ -142,7 +150,7 @@
</div>
</div>
<div class="right_content_img_block scroll_style Guide_1_17" :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_item" ref="collItemDom" designType="dislike" :index="0">
<div class="right_content_img_item" ref="collItemDom" designType="disLike" :index="0">
<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
@@ -151,16 +159,17 @@
) in designCollectionList" :key="design?.designItemId" :style="collStyle">
<div class="content_img_flex"
:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId,'disLike')"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.designItemId || design.id,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design.designItemId || design.id,'disLike')"
@click="
designDetail(
design,
index,
designCollectionList,
'dislike'
'disLike'
)">
<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
</div>
<div class="btn">
<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
@@ -170,10 +179,10 @@
<div class="icon iconfont icon-jushoucang icon_like">
</div>
</div>
<!-- <div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
<div class="text">Transfer Pose</div>
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
</div> -->
</div>
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'Relight','add','disLike')">
<div class="text">Relight</div>
<i class="fi fi fi-br-keyboard-brightness"></i>
@@ -223,6 +232,7 @@
RelightDirection:RelightDirection,
RelightDirectionList:RelightDirectionList,
}"
@setGenerateAwait="setGenerateAwait"
:isProductimg="true"></editDesignType>
</div>
@@ -394,7 +404,10 @@ export default defineComponent({
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
const collItemSize = reactive({
widthValue:150,
widthValue:{
label:'Medium',
value:170,
},
collValue:6,
padding:60,
likeStyle:{
@@ -434,10 +447,10 @@ export default defineComponent({
collItemSize.collTime = setTimeout(()=>{
nextTick(()=>{
let parentWidth = likeItemDom.value.parentElement.offsetWidth
collItemSize.widthValue = collItemSize.widthValue == -1?100:collItemSize.widthValue
collItemSize.widthValue = collItemSize.widthValue > parentWidth?parentWidth:collItemSize.widthValue
collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue)
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue))
collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue.value))
let value = collItemSize.collValue
collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
@@ -455,7 +468,7 @@ export default defineComponent({
el: elArr[i],
sort: likeDesignCollectionList.value[i].sort - 1,
index: i,
userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId
userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
});
}
moveItem('like')
@@ -470,7 +483,7 @@ export default defineComponent({
el: elArr[index],
sort: designCollectionList.value.length - index - 1,
index: designCollectionList.value.length - index - 1,
userLikeSortId:item.designItemId
userLikeSortId:item.designItemId || item.id
});
})
}
@@ -540,10 +553,10 @@ export default defineComponent({
let arrData:any = []
if(!likeDesignCollectionList.value)return
likeDesignCollectionList.value.forEach((likeItem:any)=>{
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId || item.userLikeSortId == likeItem.id)[0]
likeItem.sort = item.sort + 1
let obj = {
id:likeItem.userLikeSortId,
id:likeItem.userLikeSortId || likeItem.id,
"sort": item.sort + 1,
"userLikeGroupId": likeItem.userLikeGroupId,
"userLikeId": likeItem.id
@@ -565,7 +578,7 @@ export default defineComponent({
let value = collItemSize.collValue
let width,height,num
if(str == 'like'){
num = value
num = value
width = collItemSize.itemStyle.width
height = collItemSize.itemStyle.height
}else{
@@ -573,7 +586,8 @@ export default defineComponent({
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
}
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
let padding = str == 'like'?collItemSize.padding/2:0
let moveIndex = Math.round((x-padding) / (width + 10)) + Math.round(y / (height + 10)) * num;
moveIndex = elList.length - 1 - moveIndex
moveIndex = moveIndex < 0 ? 0 : moveIndex;
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
@@ -602,7 +616,6 @@ export default defineComponent({
const setLikeDislLike = (str:string,value:any)=>{
posiitonData.value.likeSelectIndex = 0
nextTick(()=>{
console.log(posiitonData.value.likeElList)
if(str == 'like'){
let elArr = likeItemDom.value.children
posiitonData.value.likeElList.push({
@@ -611,14 +624,15 @@ export default defineComponent({
index: value.sort - 1,
userLikeSortId:value.userLikeSortId
});
let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
console.log(collItem)
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
posiitonData.value.generateElList.forEach((item:any)=>{
if(item.sort > collItem.sort){
item.sort-=1
}
})
let collItem = posiitonData.value.generateElList.filter((item:any)=>(item.userLikeSortId == value.designItemId || item.userLikeSortId == value.id))[0]
if(collItem){
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
posiitonData.value.generateElList.forEach((item:any)=>{
if(item.sort > collItem.sort){
item.sort-=1
}
})
}
}else if(str == 'disLike'){
let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
@@ -631,10 +645,11 @@ export default defineComponent({
el: elArr[elArr.length-1],
sort: posiitonData.value.generateElList.length,
index: posiitonData.value.generateElList.length,
userLikeSortId:value.designItemId
userLikeSortId:value.designItemId||value.id
});
setDesignItemStyle()
}
moveItem('like');
setSystemDesigner(100)
// moveItem('disLike');
})
}
@@ -643,19 +658,22 @@ export default defineComponent({
let elLikeList = posiitonData.value.likeElList
let generateElList = posiitonData.value.generateElList
let value = collItemSize.collValue
let width,height
let width:any,height:any
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
// let num = str == 'like'?value:3
for(let i = 0;i < elLikeList.length;i++){
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
for(let i = 0;i < generateElList.length;i++){
generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
}
nextTick(()=>{
for(let i = 0;i < elLikeList.length;i++){
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
for(let i = 0;i < generateElList.length;i++){
generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
}
})
}
const openCollection = (str:string)=>{
dataDom.collectionModal.init(str)
@@ -692,12 +710,12 @@ export default defineComponent({
designItemId:data.id,
// designItemId:data.elementId,
designOutfitId:'',
designOutfitUrl:data.url,
designOutfitUrl:data.designOutfitUrl,
sourceUrl:data.sourceUrl,
resultType:data.resultType,
elementId:data.elementId,
elementType:data.elementType,
sort:data.sort,
userGroupId:data.userGroupId || data.id,
}
let list = []
if(data.listType == 'disLike'){
@@ -705,17 +723,14 @@ export default defineComponent({
}else{
list = likeDesignCollectionList.value
}
if(data.isIndex == -1){
if(list[data.isIndex]?.generateAwait)list[data.isIndex].generateAwait = false;
if(data.status == 'add'){
if(data.listType == 'like'){
likeDesignCollection(obj,-1,data.resultType)
}else{
list.unshift(obj)
nextTick().then(()=>{
setDesignItemStyle()
moveItem('disLike')
})
}
}else{
}else if(data.status == 'cove'){
// collectionLikeUpdate
// Https
if(data.listType == 'like'){
@@ -735,6 +750,10 @@ export default defineComponent({
list[data.isIndex].designItemId = obj.designItemId
list[data.isIndex].sourceUrl = obj.sourceUrl
}
nextTick().then(()=>{
setDesignItemStyle()
setSystemDesigner(100)
})
}
const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
let url
@@ -762,6 +781,7 @@ export default defineComponent({
let value:any = {
...design,
sort:likeDesignCollectionList.value.length + 1,
userLikeGroupId:design.id,
}
design.groupDetailId = rv.groupDetailId;
store.commit(
@@ -778,6 +798,7 @@ export default defineComponent({
item.sort-=1
}
})
setLikeDislLike('disLike',design)
}
designData.likeLoading = false;
}
@@ -829,6 +850,19 @@ export default defineComponent({
designData.likeLoading = false;
});
}
const upDataLikeListType = ()=>{
}
const setGenerateAwait = (data:any)=>{
let list = []
if(data.listType == 'disLike'){
list = designCollectionList.value
}else{
list = likeDesignCollectionList.value
}
list[data.index].generateAwait = true;
}
return {
store,
...toRefs(editDesignType),
@@ -879,6 +913,8 @@ export default defineComponent({
openEditBtn,
addGenerateImg,
setNoDesignLike,
upDataLikeListType,
setGenerateAwait,
};
},
data() {
@@ -903,7 +939,10 @@ export default defineComponent({
num:0,
currentNum:0,
},//获取20次都为空的话就停止获取
observerData:{
time:false as any,
observer:null as any,
},
};
},
watch: {
@@ -925,15 +964,27 @@ export default defineComponent({
sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
if(this.$props.isState)this.sortDesignCollection()
window.removeEventListener('resize', this.setItemPosition)
// window.removeEventListener('resize', this.setItemPosition)
this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
},
async mounted() {
window.addEventListener('beforeunload', (event)=>{
this.store.commit("clearAllCollection");
});
window.addEventListener('resize', this.setItemPosition)
this.setSystemDesigner(0)
this.setDesignItemStyle()
// window.addEventListener('resize', this.setItemPosition)
this.$refs.rightContentBlockBox
this.observerData.observer = new ResizeObserver(entries => {
for (let entry of entries) {
clearTimeout(this.observerData.time)
this.observerData.time = setTimeout(()=>{
this.setSystemDesigner(0)
this.setDesignItemStyle()
},100)
// const { width } = entry.contentRect;
}
});
this.observerData.observer.observe(this.$refs.rightContentBlockBox);
},
directives:{
mousewheel:{
@@ -1322,7 +1373,6 @@ export default defineComponent({
groupDetailId: design.groupDetailId || design.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
};
console.log(type)
if(type != 'Design'){
this.setNoDesignLike(design,index,type,'disLike')
return
@@ -1551,7 +1601,7 @@ export default defineComponent({
//完成单个图片设计
finishRedesign(event: any) {
let { design, index, type } = event;
if (type === "dislike") {
if (type === "disLike") {
this.store.commit("setSingleDesignCollectionList", {
index: index,
design: design,
@@ -1571,7 +1621,7 @@ export default defineComponent({
setShowHide(str:string){
if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
if(str == 'domHidden')this.domHidden = !this.domHidden
this.setSystemDesigner(0)
// this.setSystemDesigner(0)
}
},
});
@@ -1622,7 +1672,7 @@ export default defineComponent({
.right_content_header {
display: flex;
justify-content: space-between;
height: 4.5rem;
height: 6.5rem;
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
@@ -1754,7 +1804,7 @@ export default defineComponent({
color: #fff;
flex-direction: column;
&.active{
right: 53rem;
right: 43rem;
transform: translate(0, -50%);
}
}
@@ -1812,7 +1862,8 @@ export default defineComponent({
margin-left: 2rem;
}
.right_content_body {
width: 55rem;
width: 45rem;
// width: 55rem;
.right_content_img_block{
.content_img_block{
@@ -1960,12 +2011,12 @@ export default defineComponent({
> .btnOpen{
position: absolute;
width: max-content;
left: 3rem;
top: 3rem;
left: 30px;
top: 30px;
transform: translateX(-100%);
background: #e4e4e7;
padding: 1.2rem;
border-radius: 1.2rem;
padding: 12px;
border-radius: 12px;
display: none;
z-index: 99;
&.active{
@@ -1974,16 +2025,16 @@ export default defineComponent({
> .item{
display: flex;
align-items: center;
margin-bottom: .8rem;
padding: .8rem;
border-radius: .8rem;
margin-bottom: 8px;
padding: 8px;
border-radius: 8px;
cursor: pointer;
&:last-child{
margin: 0;
}
> .text{
font-size: 1.2rem;
margin-right: 1rem;
font-size: 12px;
margin-right: 10px;
}
&:hover{
background: #efeff1;

2
src/component/home/design/mannequin/index.vue
View File

@@ -116,7 +116,7 @@ export default defineComponent({
let value = {
sex:data.selectObject.sex,
style:data.selectObject?.style?data.selectObject?.style:'',
ageGroup:store.state.Workspace.probjects.ageGroup,
ageGroup:data.selectObject.ageGroup,
}
Https.axiosGet(Https.httpUrls.getMannequins,{params:value}).then((rv: any) => {
if (rv) {