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-07-19 14:04:48 +08:00
parent 22ee9c6cf1
commit 4b694236ee
161 changed files with 2934 additions and 3979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/component/home/design/collection.vue
View File

@@ -135,7 +135,7 @@ export default defineComponent({
value[str] = data[str]
if(!value[str] || value[str]?.length == 0)return
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
if(rv?.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
})
})
}
@@ -224,10 +224,15 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.collectionModal{
:deep(.ant-modal-body){
padding-top: 10rem;
:deep(.collection){
> .ant-modal-content{
.ant-modal-body{
padding-top: 10rem;
}
}
}
.collection_title{
top: calc(4rem*1.2);
display: flex;

4
src/component/home/design/collection/ColorboardUpload.vue
View File

@@ -1341,7 +1341,7 @@ export default defineComponent({
border-radius: 50%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
border: solid 2px #000;
display: flex;
align-items: center;
justify-content: center;
@@ -1359,7 +1359,7 @@ export default defineComponent({
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
background: #000;
}
}
}

7
src/component/home/design/collection/PrintboardUpload.vue
View File

@@ -148,11 +148,11 @@
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
<i v-if="item.pin" class="fi fi-rr-check"></i>
<i v-else class="fi noCheck"></i>
<span>PIN</span>
<span>{{ $t('PrintboardUpload.PIN') }}</span>
</label>
</div>
<div class="moreBox" @click.stop>
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
<more level1Type="Printboard" :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
@@ -839,7 +839,8 @@ export default defineComponent({
}
}
.modal_layout{
padding-bottom: 4.8rem;
padding-bottom: 2.8rem;
// padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);

8
src/component/home/design/collection/SketchboardUpload.vue
View File

@@ -90,6 +90,7 @@
:data="{
...upload,
gender:workspace.sex,
ageGroup:workspace.ageGroup,
}"
:multiple="!driver__.driver"
:before-upload="beforeUpload"
@@ -168,11 +169,11 @@
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
<i v-if="item.pin" class="fi fi-rr-check"></i>
<i v-else class="fi noCheck"></i>
<span>PIN</span>
<span>{{ $t('PrintboardUpload.PIN') }}</span>
</label>
</div>
<div class="moreBox" @click.stop>
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
<more level1Type="Sketchboard" :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
@@ -783,7 +784,8 @@ export default defineComponent({
}
}
.modal_layout{
padding-bottom: 4.8rem;
// padding-bottom: 4.8rem;
padding-bottom: 2.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);

16
src/component/home/design/collection/more.vue
View File

@@ -20,6 +20,7 @@
</div>
</div>
</div>
<modalCanvas ref="modalCanvas" @setSloganData="saveBase64Img"></modalCanvas>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -29,14 +30,17 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";
import modalCanvas from "@/component/modules/generalModalCanvas.vue";
export default defineComponent({
components:{
modalCanvas,
},
props:{
moreList:{type:Array,default:()=>[]},
item:{type:Object,default:()=>{}},
index:{type:Number,default:0},
level1Type:{type:String,default:''},
},
emits:['deleteFile','scaleImage'],
setup(props,{emit}) {
@@ -46,6 +50,7 @@ export default defineComponent({
})
const dataDom = reactive({
modalCanvas:null as any
})
const openList = ()=>{
data.show = true
@@ -59,20 +64,25 @@ export default defineComponent({
if(str == 'delete'){
emit("deleteFile",props.item);
}else if(str == 'edit'){
emit("scaleImage",props.index);
console.log(props.item)
dataDom.modalCanvas.init(props.item,'')
}else if(str == 'down'){
console.log(props.item);
downloadIamge(props.item.url)
downloadIamge(props.item.url || props.item.imgUrl)
}else if(str == 'enlargement'){
emit("scaleImage",props.index);
}
setShow()
}
const saveBase64Img = (rv)=>{
console.log(rv)
}
return{
...toRefs(dataDom),
...toRefs(data),
openList,
setMore,
saveBase64Img,
}
},

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

@@ -1,6 +1,6 @@
<template>
<a-modal
class="scaleImage_modal generalModel"
class="editDesignType_modal generalModel"
v-model:visible="scaleImage"
:footer="null"
width="78%"
@@ -26,7 +26,7 @@
</div>
<div class="scaleImage_content" v-if="scaleImage">
<div class="productImg_modal">
<div class="productImg_left">
<div class="productImg_left generalModel_state">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
@@ -34,27 +34,28 @@
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.SelectionFunction')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity ">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity ">
<a-slider class="system_silder"
v-model:value="productimgSimilarity"
:tooltipVisible="false"
:step="5"
:max="70"
@afterChange="()=>{}"
>
</a-slider>
<input type="number" readonly v-model="productimgSimilarity">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgSimilarity">
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
@@ -68,31 +69,37 @@
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
</div>
<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
<div class="input_box">
<div class="input_box_btnBox">
<input
<div class="input_box_btnBox" style="height: auto;">
<!-- <input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
<textarea
ref="textarea"
class="textarea "
:placeholder="$t('Generate.inputContent1')"
@input="ifMaximumLength"
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value == 'flux'">
<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
</div>
<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
<div class="head">
<div class="text">Choose pose</div>
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
</div>
<div class="imgBox" v-mousewheel>
<div class="item" v-for="item,index in poseList" @click="setSelectPose(item,index)">
@@ -110,29 +117,29 @@
</div>
</div>
<div class="generage_btn_box" style="margin-left: auto;">
<div class="generage_btn started_btn" v-show="!generateSuccess.productimgIsProductimg">
<div class="generage_btn started_btn" v-show="!productimgIsProductimg">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
<div class="generage_btn started_btn" v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg">
<div class="generage_btn started_btn" v-show="productimgIsProductimg && !productimgRemProductimg">
<i class="fi fi-br-loading" ></i>
</div>
<div class="generage_btn started_btn" v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg">
<div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
{{$t('Generate.Close')}}
</div>
</div>
<!-- <div class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!generateSuccess.productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
</div>
<div v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
@@ -140,27 +147,26 @@
</div>
</div>
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl || generateSuccess?.productImage">
<div class="loadBox" v-show="generateSuccess">
<div class="load" v-show="generateSuccess.productimgIsProductimg">
<img v-if="isComparison" :src="selectGenerate?.sourceUrl || selectGenerate?.productImage">
<div class="loadBox" v-show="selectGenerate">
<div class="load" v-show="productimgIsProductimg">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<div class="imgBox" v-show="!generateSuccess.productimgIsProductimg">
<img v-show="scaleImageList[scaleImageIndex]?.resultType !='PoseTransfer'" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url" alt="">
<div class="imgBox" v-show="!productimgIsProductimg">
<img v-show="selectGenerate?.resultType !='PoseTransfer'" :src="generateCourse?.url || selectGenerate?.url" alt="">
<img
v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'"
:src="generateSuccess.newData?.firstFrameUrl || generateSuccess.firstFrameUrl"
v-show="selectGenerate?.resultType == 'PoseTransfer'"
:src="generateCourse?.firstFrameUrl || selectGenerate?.firstFrameUrl"
alt=""
@mouseenter.stop="gifPlay($event,generateSuccess.newData || generateSuccess)"
@mouseleave.stop="gifPause($event,generateSuccess.newData || generateSuccess)"
@mouseenter.stop="gifPlay($event,generateCourse || selectGenerate)"
@mouseleave.stop="gifPause($event,generateCourse || selectGenerate)"
>
</div>
</div>
<div class="img_operate_block" v-if="isLike">
<!-- <div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
</div>
</div> -->
</div>
</div>
<!-- <div class="scaleImage_nav">
@@ -214,7 +220,7 @@ props:{
default:''
},
},
emits:['addGenerateImg','setGenerateAwait'],
emits:['addGenerateImg','upDataDesignLikeList'],
setup(props:any,{emit}) {
const store = useStore();
let userDetail:any= computed(()=>{
@@ -224,6 +230,7 @@ setup(props:any,{emit}) {
let productimg = reactive({
isGenerate:false,//判断是否进行generate
UpgradePlan:null,
textarea:null as any,
productimgSearchName:'',
productimgIsTextarea:false,
productimgRemProductimg:false,
@@ -234,9 +241,16 @@ setup(props:any,{emit}) {
productimgRelightDirection:props.productData.RelightDirection,
productimgRelightDirectionList:props.productData.RelightDirectionList,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
generateSuccess:null as any,//生成成功后返回的数据
likeDesignCollectionList:computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
}),
selectGenerate:null as any,//生成成功后返回的数据
poseList:[],
selectPose:null as any,
openType:'',
scaleImageIndex: 0,
scaleImageList:[],
generateCourse:null as any,
})
let speed = reactive({
speedList:[
@@ -289,37 +303,39 @@ setup(props:any,{emit}) {
speed.speedState = false
}
let scaleImage: any = ref(false);
let isShowMark = ref(false)
let loadingShow = ref(false)
let isComparison = ref(false)
const visible = ref<boolean>(false);
const setVisible = (value:any): void => {
visible.value = value;
};
let scaleImageList:any = ref([
])
let scaleImageMask:any = ref(false)
let scaleImageIndex:any = ref(0)
let isLike:any = ref(true)
let robotAssits:any = ref(0)
//procuctimg
let remPrductimgTime:any = null
let prductimgTime:any = null
const getData = ()=>{
let obj = null as any
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
console.log(productimg.scaleImageList[productimg.scaleImageIndex])
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
obj = {
elementId:scaleImageList.value[scaleImageIndex.value].designOutfitId||scaleImageList.value[scaleImageIndex.value].elementId,
elementId:productimg.scaleImageList[productimg.scaleImageIndex].designOutfitId||productimg.scaleImageList[productimg.scaleImageIndex].elementId,
elementType:'DesignOutfit',
parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
}
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'Relight'){
obj = {
elementId:scaleImageList.value[scaleImageIndex.value].designItemId || scaleImageList.value[scaleImageIndex.value].id,
elementType:'ToProductImage',
if(productimg.scaleImageList[productimg.scaleImageIndex]?.relationType == "Design"){
delete obj.userLikeSortId
}
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'Relight'){
obj = {
elementId:productimg.scaleImageList[productimg.scaleImageIndex].designItemId || productimg.scaleImageList[productimg.scaleImageIndex].id || productimg.scaleImageList[productimg.scaleImageIndex],
elementType:'ToProductImage',
parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
}
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
}
return obj
@@ -328,11 +344,15 @@ setup(props:any,{emit}) {
return {
poseId:productimg.selectPose,
projectId:productimg.selectObject.id,
productImage:getMinioUrl(scaleImageList.value[scaleImageIndex.value].sourceUrl),
productImage:getMinioUrl(productimg.scaleImageList[productimg.scaleImageIndex].sourceUrl),
modelName:speed.speedData.value,
parentId:productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
userLikeSortId:productimg.openType == 'add'?(productimg.selectGenerate.userLikeSortId || null):null,
isDefaultLike:true,//表示是否生成就like
}
}
let getPrductimg = ()=>{
let getPrductimg = async ()=>{
let obj = getData()
let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
let data:any ={
@@ -343,44 +363,72 @@ setup(props:any,{emit}) {
brightenValue:productimg.productimgBrightenValue,
projectId:productimg.selectObject.id,
imageStrength:(100 - imageStrength)/100,
ageGroup:productimg.selectObject.ageGroup
ageGroup:productimg.selectObject.ageGroup,
isDefaultLike:true,//表示是否生成就like
}
// return
productimg.generateSuccess.productimgIsProductimg = true
// productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
// productimg.generateSuccess.productimgRemProductimg = true
// remPrductimgTime = setTimeout(()=>{
// productimg.productimgRemProductimg = true
// },10000)
let url = Https.httpUrls.relight
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProduct
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
url = Https.httpUrls.poseTransform
await new Promise((res,reject)=>{
Modal.confirm({
title: t('poseTransfer.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
res('')
},
cancel(){
reject()
}
});
}).then(()=>{
}).catch(()=>{
return
})
data = getPoseTransformData()
}
productimg.productimgIsProductimg = true
// setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}])
// return
productimg.generateSuccess.isShowMark = true
Https.axiosPost(url, data).then(
(rv) => {
productimg.generateSuccess.productimgRemProductimg = true
productimg.generateSuccess.isShowMark = false
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
productimg.productimgRemProductimg = true
productimg.scaleImageList[productimg.scaleImageIndex].imgUrl = '/image/loading.gif'
let arr:any = []
if(scaleImageList.value[scaleImageIndex.value]?.resultType != 'PoseTransfer'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
arr.push(rv.taskId)
}else{
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
}else{
arr.push(rv)
}
productimg.generateCourse = {
...rv[0],
parentId:productimg.selectGenerate?.parentId || productimg.selectGenerate.userLikeGroupId,
sourceUrl:productimg.selectGenerate?.sourceUrl || productimg.selectGenerate?.productImage,
status:null,
resultType:productimg.selectGenerate?.resultType,
}
setPrductimg(arr)
productimg.isGenerate = true
}
).catch(res=>{
productimg.generateSuccess.isShowMark = false
productimg.generateSuccess.productimgIsProductimg = false
clearInterval(productimg.generateSuccess.remPrductimgTime)
productimg.generateSuccess.productimgRemProductimg = false
productimg.productimgIsProductimg = false
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
if(res.errCode === 2){
Modal.confirm({
title: res.errMsg,
@@ -408,92 +456,63 @@ setup(props:any,{emit}) {
let dataNum = dataList.length
let state = true
let url = Https.httpUrls.relightResult
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
url = Https.httpUrls.toProductImageResult
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
}else if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
url = Https.httpUrls.poseTransformResult
data = {
taskId:dataList[0],
}
data = dataList
}
// url = Https.httpUrls.poseTransformResult
// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
productimg.generateSuccess.prductimgTime = setInterval(()=>{
prductimgTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(url, data).then(
(rv) => {
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
rv = [rv]
}
state = true
if(productimg.generateSuccess.productimgIsProductimg){//防止取消后有正在执行的获取状态
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
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
rv[0].sourceUrl = productimg.generateSuccess.sourceUrl
rv[0].designOutfitUrl = rv[0].url
productimg.generateSuccess.newData = rv[0]
console.log(productimg.generateSuccess.newData)
if(!scaleImage.value){
productimg.generateSuccess.status = 'add'
setCove()
}
// productimg.generateSuccess.listType = listType
productimg.generateCourse.url = rv[0].url
productimg.generateCourse.designOutfitUrl = rv[0].url
isEnd = true
clearInterval(productimg.generateSuccess.remPrductimgTime)
clearInterval(remPrductimgTime)
}else if(rv[0].status == 'Fail'){
message.info(t('ProductImg.jsContent3'))
isEnd = true
productimg.generateCourse = null
}
generateProceedList = data
if(!scaleImage.value){
let awaitData = {awaitId:productimg.generateSuccess.awaitId,parentId:productimg.generateSuccess.parentId,listType:productimg.generateSuccess.listType,taskId:generateProceedList[0]}
emit('setGenerateAwait',awaitData)
}
if(isEnd){
store.state.store.dispatch('getCredits')
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
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.productimgIsProductimg = false
}
}
}
).catch(res=>{
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
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
});
},scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'?20000:1000)
},productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'?20000:1000)
}
let removeProductimg = ()=>{
productimg.generateSuccess.productimgIsProductimg = false
productimg.generateSuccess.productimgRemProductimg= false
clearInterval(productimg.generateSuccess.prductimgTime)
delete productimg.generateSuccess.productimgIsProductimg
delete productimg.generateSuccess.productimgRemProductimg
delete productimg.generateSuccess.prductimgTime
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
clearInterval(prductimgTime)
productimg.generateCourse = null
if(generateProceedList){
// let str = generateProceedList.length > 1?generateProceedList.join(',')
let data = {
uniqueId:generateProceedList,
userId:userDetail.value.userId,
type:scaleImageList.value[scaleImageIndex.value]?.resultType
type:productimg.scaleImageList[productimg.scaleImageIndex]?.resultType
}
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
// data = {
// uniqueId:data.waitList,
// userId:store.state.UserHabit.userDetail.userId,
@@ -509,23 +528,52 @@ setup(props:any,{emit}) {
});
}
}
let setCove = ()=>{
let data = {
...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
sourceUrl:productimg.generateSuccess.newData.sourceUrl || scaleImageList.value[scaleImageIndex.value].sourceUrl,
oldId:productimg.generateSuccess.id,
awaitId:productimg.generateSuccess.awaitId,
status:productimg.generateSuccess.status,
listType:productimg.generateSuccess.listType,
isIndex:productimg.generateSuccess.isIndex,
userLikeSortId:productimg.generateSuccess.userLikeSortId,
parentId:productimg.generateSuccess.parentId
let init = async (list:any,index:any,dialogueIndex:any,status:any,listType:string)=>{
scaleImage.value = true
productimg.openType = status
if(status == 'add'){
productimg.selectGenerate = {
...list[index],
listType,
}
// productimgRemProductimg:false,
// productimgIsProductimg:false,
delete productimg.selectGenerate.url
}else{
productimg.selectGenerate = {
...list[index],
}
productimg.selectGenerate.listType = listType
productimg.selectGenerate.isIndex = index
if(!list[index]?.id &&( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType == 'PoseTransfer' && !list[index].url))){
productimg.productimgIsProductimg = true
productimg.productimgRemProductimg = true
setPrductimg([list[index].taskId])
}
}
productimg.selectGenerate.parentId = list[index].parentId || list[index].userLikeSortId
if(productimg.productimgSearchName){
await nextTick()
ifMaximumLength()
}
emit('addGenerateImg',data)
delete productimg.generateSuccess.isShowMark
delete productimg.generateSuccess.listType
if(productimg.poseList.length == 0 && list[index].resultType == 'PoseTransfer'){
getPoseList()
}
productimg.isGenerate = false
productimg.scaleImageList = list
if(productimg.scaleImageList[index].resultType == "PoseTransfer"){
speed.speedList = speed.speedTypeList.poseTransfer
}
if(productimg.scaleImageList[index].resultType == "Relight"){
speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
}else if(productimg.scaleImageList[index].resultType != "PoseTransfer"){
speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
}
speed.speedData = JSON.parse(JSON.stringify(speed.speedList[0]))
productimg.scaleImageIndex = index
if(dialogueIndex)robotAssits.value = dialogueIndex
}
const getPoseList = ()=>{
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
@@ -547,6 +595,68 @@ setup(props:any,{emit}) {
productimg.poseList[index].isChecked = true
productimg.selectPose = item.id
}
const cancelDsign = async ()=>{
if(productimg.isGenerate){
if(productimg.productimgIsProductimg){
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
productimg.productimgIsProductimg = false
}
productimg.generateCourse.oldData = {
// id:productimg.selectGenerate.id,
}
if(productimg.selectGenerate.resultType == "Design"){
productimg.generateCourse.oldData.resultType = productimg.selectGenerate.resultType
// productimg.generateCourse.parentId = productimg.selectGenerate.userLikeSortId
// let index = productimg.likeDesignCollectionList.findIndex((item:any)=>(item.userLikeSortId == productimg.selectGenerate.userLikeSortId && item.resultType == "Design"))
// if(!productimg.likeDesignCollectionList[index]?.childList)productimg.likeDesignCollectionList[index].childList = []
// if(productimg.openType == 'add')productimg.likeDesignCollectionList[index]?.childList.push(productimg.generateCourse)
}else{
// productimg.generateCourse.parentId = productimg.selectGenerate.parentId
// let index = productimg.likeDesignCollectionList.findIndex((item:any)=>(item.userLikeSortId == productimg.selectGenerate.parentId && item.resultType == "Design"))
// if(!productimg.likeDesignCollectionList[index]?.childList){
// productimg.likeDesignCollectionList[index].childList = []
// }
// if(productimg.openType == 'add'){
// productimg.likeDesignCollectionList[index]?.childList.push(productimg.generateCourse)
// }else{
// let childIndex = productimg.likeDesignCollectionList[index].childList.findIndex((item:any)=>(item.id == productimg.selectGenerate.id))
// productimg.likeDesignCollectionList[index].childList[childIndex] = productimg.generateCourse
// }
}
let emitData = {
status:productimg.openType,
generateCourse:[{
...productimg.generateCourse,
}]
}
emit('upDataDesignLikeList',emitData)
}
productimg.openType = ''
scaleImage.value = false
}
const ifMaximumLength = async ()=>{
await nextTick()
let textarea = productimg.textarea;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
onBeforeUnmount(()=>{
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
})
return {
t,
...toRefs(productimg),
@@ -554,24 +664,25 @@ setup(props:any,{emit}) {
openSpeed,
setSpeed,
scaleImage,
isShowMark,
loadingShow,
isComparison,
visible,
setVisible,
scaleImageList,
scaleImageMask,
scaleImageIndex,
isLike,
robotAssits,
getPrductimg,
removeProductimg,
setCove,
getPoseList,
gifPlay,
gifPause,
setSelectPose,
generateProceedList,
init,
cancelDsign,
prductimgTime,
remPrductimgTime,
ifMaximumLength,
};
},
data() {
@@ -598,162 +709,17 @@ directives:{
mounted() {
},
methods: {
init(list:any,index:any,dialogueIndex:any,status:any,listType:string){
if(status == 'add'){
this.generateSuccess = {
listType,
}
}else{
this.generateSuccess = list[index]
this.generateSuccess.listType = listType
this.generateSuccess.isIndex = index
}
// this.
this.generateSuccess.awaitId = list[index].id
this.generateSuccess.userLikeSortId = list[index].userLikeSortId
this.generateSuccess.parentId = list[index].parentId || list[index].userLikeSortId
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(this.poseList.length == 0 && list[index].resultType == 'PoseTransfer'){
this.getPoseList()
}
// 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 == "PoseTransfer"){
this.speedList = this.speedTypeList.poseTransfer
}else{
this.speedList = this.speedTypeList.toPorductImg
}
if(this.scaleImageList[index].resultType == "Relight"){
this.speedData = JSON.parse(JSON.stringify(this.speedList[1]))
}else{
this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
}
// if(this.scaleImageList[index]?.resultType == 'ToProductImage')this.scaleImageList[index].sourceUrl = this.scaleImageList[index].imgUrl
this.scaleImageIndex = index
if(dialogueIndex)this.robotAssits = dialogueIndex
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
document.addEventListener('keydown',this.setKeydown)
},
async cancelDsign(){
document.removeEventListener('keydown',this.setKeydown)
if(this.generateSuccess.productimgIsProductimg){
let awaitData = {awaitId:this.generateSuccess.awaitId,parentId:this.generateSuccess.parentId,listType:this.generateSuccess.listType,taskId:this.generateProceedList[0]}
this.$emit('setGenerateAwait',awaitData)
}
// 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(this.isGenerate && this.generateSuccess.id){
await new Promise((resolve,reject)=>{
let this_ = this
Modal.confirm({
title: this.t('scaleImage.cover'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
// 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.generateSuccess.status = 'add'
if(this.generateSuccess?.newData){
this.setCove()
}
}
this.scaleImage = false
// this.scaleImageIndex = 0
this.isNext = false
// this.generateSuccess = null
// this.scaleImageList = []
},
lastStep(){
if(this.generateSuccess.productimgIsProductimg) return
if(this.isNext)return
let num = this.scaleImageIndex
if(this.scaleImageIndex <= 0){
}else{
num -=1
this.setImageIndex(num)
}
},
nextStep(){
if(this.generateSuccess.productimgIsProductimg) return
if(this.isNext)return
let num = this.scaleImageIndex
if(this.scaleImageIndex >= this.scaleImageList.length-1){
}else{
num += 1
this.setImageIndex(num)
}
},
download(){
let url
if(this.generateSuccess?.resultType == 'PoseTransfer' || this.generateSuccess?.newData?.resultType == 'PoseTransfer'){
url = this.generateSuccess?.videoUrl
if(this.generateSuccess?.newData?.videoUrl){
url = this.generateSuccess.newData.videoUrl
if(this.selectGenerate?.resultType == 'PoseTransfer' || this.generateCourse?.resultType == 'PoseTransfer'){
url = this.selectGenerate?.videoUrl
if(this.generateCourse?.videoUrl){
url = this.generateCourse.videoUrl
}
downloadVideoWithFetch(url)
}else{
url = this.generateSuccess?.newData?.designOutfitUrl || this.generateSuccess?.designOutfitUrl || this.generateSuccess?.url
url = this.generateCourse?.url || this.selectGenerate?.designOutfitUrl || this.selectGenerate?.url
downloadIamge(url)
}
},
@@ -797,51 +763,43 @@ methods: {
parent.likeFile(item,str)
}
},
setKeydown(event:any){
if(event.keyCode == 37){
this.lastStep()
}else if(event.keyCode == 39){
this.nextStep()
}
},
},
});
</script>
<style>
.scaleImage_modal{
.editDesignType_modal{
overflow: visible !important;
}
</style>
<style lang="less">
.scaleImage_modal {
<style lang="less" >
.editDesignType_modal {
.ant-modal-body {
display: flex;
flex-direction: column;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
}
}
.scaleImage_content{
display: flex;
justify-content: center;
// margin-top: calc(5rem*1.2);
// height: 75%;
height: 100%;
position: relative;
width: 100%;
.productImg_modal{
position: relative;
left: 0;
z-index: 9;
flex: 1;
overflow: hidden;
.productImg_left{
width: 24rem;
display: flex;
height: 100%;
flex-direction: column;
width: 100%;
align-items: stretch;
flex-wrap: nowrap;
.input_box_btnBox{
width: 100%;
}
@@ -856,6 +814,79 @@ overflow: visible !important;
justify-content: space-around;
margin-top: 0;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 1rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
:deep(.generalMenu_printModel){
margin: 0;
width: 100%;
> div,> ul{
width: 100%;
}
}
.productImg_content_item_title_menubtn{
font-size: 1.6rem;
font-weight: 500;
}
}
&.productImg_content_item_title_similarity{
// margin-bottom: 8rem;
}
}
.productImg_content_item_Direction{
padding-bottom: 1rem;
margin-right: 0;
margin-bottom: 1rem;
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
font-size: 1.6rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
&:first-child{
margin-right: 0;
}
}
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
height: 4.8rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
&:first-child{
margin-right: 0;
}
}
}
.transferPose{
display: flex;
flex-direction: column;
@@ -943,8 +974,9 @@ overflow: visible !important;
}
.scaleImage_content_imgBox{
position: relative;
// max-width: 70rem;
width: 100%;
width: auto;
// min-width: 70%;
width: 76%;
text-align: center;
justify-content: center;
> .loadBox{

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

@@ -4,8 +4,8 @@
<div class="page_content_body">
<div class="designPage_body">
<div class="designPage_left" ref="hidden">
<div class="designPage_left_content" :class="{'active':(domHidden)}">
<div class="designPage_left" :class="{'active':(domHidden)}" ref="hidden">
<div class="designPage_left_content">
<!-- 有图状态 start-->
<div class="home_left_info">
@@ -38,12 +38,12 @@
</div>
<div class="generage_btn_box white">
<div class="generage_btn started_btn" style="margin-left: 2rem;">
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;font-weight: 900">
{{ $t('Header.Tools') }}
</div>
<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
<div v-for="item in speedList" v-show="(item.value != 'poseTransfer' || selectProbject.type != 'singleProductDesign')" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
</div>
@@ -72,7 +72,7 @@
{{ $t('HomeView.SelectedDesign') }}
</span>
</div>
<div class="generalModel_state" v-show="likeDesignTools">
<div class="generalModel_state">
<div>
<selectMenu
:selectList="resultTypeList"
@@ -90,7 +90,7 @@
v-model:select="resultType"
>
<template v-slot:btnText>
Classify
{{ $t('Header.Filter') }}
</template>
</selectMenu>
</div>
@@ -98,11 +98,11 @@
<selectMenu
:selectList="[
{
label:'Unfold',
label:$t('Header.expand'),
value:true,
},
{
label:'Merge',
label:$t('Header.collapse'),
value:false,
},
]"
@@ -168,13 +168,13 @@
'like'
)">
<img class="content_img"
v-if="design?.resultType == 'PoseTransfer'"
v-if="design?.resultType == 'PoseTransfer' && design?.firstFrameUrl"
:src="design?.firstFrameUrl" alt=""
@mouseenter.stop="gifPlay($event,design)"
@mouseleave.stop="gifPause($event,design)" >
<!-- <div :style="{'background-image': `url(${design?.designOutfitUrl||design?.url})`}" class="content_img" v-if="design?.designOutfitUrl||design?.url" :key="design?.designOutfitUrl" designType="like" :index="index"></div> -->
<img class="content_img" v-if="design?.designOutfitUrl||design?.url" :src="design?.designOutfitUrl||design?.url"
:key="design?.designOutfitUrl" designType="like" :index="index"/>
:key="design?.status" designType="like" :index="index"/>
<a-spin v-show="!design?.designOutfitUrl && !design?.url && !design?.firstFrameUrl" size="large"></a-spin>
<!-- <div class="content_img_block_child" @click.stop>
@@ -215,7 +215,7 @@
<div class="designPage_left_bottom left" @click="setShowHide('domHidden')" >
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
</div>
<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionList.length > 0">
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
</div>
</div>
@@ -280,19 +280,24 @@
<div class="text">{{$t('Header.toolsToProduct')}}</div>
<i class="fi fi fi-ss-box-open"></i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
<div class="item" v-show="(selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight')" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
<div class="text">{{$t('Header.toolsRelight')}}</div>
<i class="fi fi fi-br-keyboard-brightness"></i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
<div class="item" v-show="(selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight') && (selectProbject.type != 'singleProductDesign')" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
<div class="text">{{$t('Header.toolsToTransferPose')}}</div>
<i class="fi fi fi-rr-play-alt"></i>
</div>
<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
<div class="item" v-show="selectEditBtn?.resultType != 'Design'" @click="setNoDesignLike(selectEditBtn,selectEditBtnIndex,selectEditBtn?.resultType,'disLike')">
<div class="text">{{$t('Header.Delete')}}</div>
<i class="fi fi-rr-trash icon_delete">
</i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
<div class="text">{{$t('Header.onLiked')}}</div>
<i class="icon iconfont icon-jushoucang icon_like">
</i>
</div>
</div>
<collectionModal ref="collectionModal"></collectionModal>
@@ -308,20 +313,20 @@
<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
<editDesignType ref="editDesignType"
@addGenerateImg="addGenerateImg"
@setGenerateAwait="generateLoad"
@upDataDesignLikeList="generateLoad"
:productData="{
upload:upload,
RelightDirection:RelightDirection,
RelightDirectionList:RelightDirectionList,
}"
:isProductimg="true"></editDesignType>
<designTools ref="designTools" @editToolsSuccess="editToolsSuccess"></designTools>
<designTools ref="designTools" :source="'design'" @editToolsSuccess="generateLoad"></designTools>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
import { defineComponent, h, ref, computed, toRefs, createVNode,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import generalCanvas from "@/component/modules/generalCanvas.vue";
@@ -344,6 +349,7 @@ import { removeClass } from "element-plus/es/utils";
import collectionModal from './collection.vue'
import designTools from './tools.vue'
import selectMenu from '@/component/modules/selectMenu.vue'
import { forEach } from "jszip";
export default defineComponent({
name: "homePage",
@@ -368,6 +374,9 @@ export default defineComponent({
const {t} = useI18n()
const store = useStore();
const editDesignType = reactive({
selectProbject:computed(()=>{
return store.state.Workspace.probjects
}),
upload:{id:store.state.Workspace.probjects.id},
RelightDirectionList:[
{
@@ -463,12 +472,12 @@ export default defineComponent({
label:computed(()=>t('Header.toolsToProduct')),
value:'toProduct',
},{
label:computed(()=>t('Header.toolsToTransferPose')),
value:'poseTransfer',
},{
label:computed(()=>t('Header.toolsRelight')),
value:'relight',
},{
label:computed(()=>t('Header.toolsToTransferPose')),
value:'poseTransfer',
},
],
speedState:false,
@@ -496,12 +505,6 @@ export default defineComponent({
const openCanvas = ()=>{
dataDom.designTools.init('editCanvas')
}
const editToolsSuccess = ()=>{
nextTick().then(()=>{
designData.isUnfold = true
uploadLikeDom()
})
}
const designData = reactive({
openEditBtnId:-1,
selectEditBtn:null as any,
@@ -674,8 +677,10 @@ export default defineComponent({
store.commit("cancelDeleteDesignCollectionList",index);
}
const designMousedown = (e:any,design:any,str:string)=>{
if(design.resultType != 'Design' || designData.isUnfold)return
if(str != 'like' && showDesignMark.value) return
if(str != 'disLike'){
if(design.resultType != 'Design' || designData.isUnfold)return
if(str != 'like' && showDesignMark.value) return
}
let Id = design.userLikeSortId || design.id
let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
let item:any = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
@@ -786,17 +791,17 @@ export default defineComponent({
}
}
const setLikeDislLike = (str:string,value:any)=>{
designData.selectLikeDesign = []
posiitonData.value.likeSelectIndex = 0
nextTick(()=>{
if(str == 'like'){
designData.selectLikeDesign = []
let elArr = likeItemDom.value.children
posiitonData.value.likeElList.push({
el: elArr[0],
sort: value.sort - 1,
index: value.sort - 1,
userLikeSortId:value.userLikeSortId
});
// posiitonData.value.likeElList.push({
// el: elArr[0],
// sort: value.sort - 1,
// index: value.sort - 1,
// userLikeSortId:value.userLikeSortId
// });
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)
@@ -808,12 +813,12 @@ export default defineComponent({
}
}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)
posiitonData.value.likeElList.forEach((item:any)=>{
if(item.sort > value.sort - 1){
item.sort-=1
}
})
// posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
// posiitonData.value.likeElList.forEach((item:any)=>{
// if(item.sort > value.sort - 1){
// item.sort-=1
// }
// })
posiitonData.value.generateElList.push({
el: elArr[elArr.length-1],
sort: posiitonData.value.generateElList.length,
@@ -821,8 +826,10 @@ export default defineComponent({
userLikeSortId:value.designItemId||value.id
});
}
setDesignItemStyle()
setSystemDesigner(100)
setDesignItemStyle()
uploadLikeDom()
// moveItem('disLike');
})
}
@@ -878,6 +885,7 @@ export default defineComponent({
}
let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
arr = JSON.parse(JSON.stringify(arr))
store.commit('setOpenChatStatus',false)
let item = arr[index]
if(status == 'add'){
item.sourceUrl = item.designOutfitUrl || item.url
@@ -887,89 +895,28 @@ export default defineComponent({
arr[index].resultType = type
// dataDom.editDesignType.isProductimg = isLike
dataDom.editDesignType.isProductimg = true
clearInterval(prductimgTime.ToProductImage)
clearInterval(prductimgTime.PoseTransfer)
clearInterval(prductimgTime.Relight)
dataDom.editDesignType.init(arr,index,null,status,listType)
dataDom.editDesignType.isLike = false
dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
dataDom.editDesignType.isComparison = true
}
const addGenerateImg = (data:any)=>{
const addGenerateImg = async (data:any)=>{
if(!data.id)return
let obj = {
id:data.id,
designItemId:data.id,
// designItemId:data.elementId,
designOutfitId:'',
designOutfitUrl:data.designOutfitUrl,
sourceUrl:data.sourceUrl,
resultType:data.resultType,
elementId:data.elementId,
elementType:data.elementType,
userGroupId:data.userGroupId || data.id,
firstFrameUrl:data.firstFrameUrl,
gifUrl:data.gifUrl,
awaitId:data.awaitId,
taskId:data.taskId,
parentId:data.parentId || data.userLikeSortId,
videoUrl:data?.videoUrl,
}
let list = []
if(data.listType == 'disLike'){
list = designCollectionList.value
}else{
list = likeDesignCollectionList.value
}
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)
}
}else if(data.status == 'cove'){
// collectionLikeUpdate
// Https
if(data.listType == 'like'){
let value = {
"oldRelationId": data.oldId,
"relationId": data.id,
"relationType": data.resultType,
}
Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
if(rv){
}
})
}
list.forEach((item)=>{
if(data.parentId == item.userLikeSortId){
item.childList.forEach((childItem)=>{
if(childItem.id == data.awaitId){
childItem.designOutfitUrl = obj.designOutfitUrl
childItem.resultType = obj.resultType
childItem.id = obj.id
childItem.designItemId = obj.designItemId
childItem.sourceUrl = obj.sourceUrl
}
})
}
})
nextTick().then(()=>{
uploadLikeDom()
})
}
// nextTick().then(()=>{
// // setDesignItemStyle()
// // setSystemDesigner(100)
// uploadLikeDom()
// })
await nextTick().then(()=>{
designData.isUnfold = true
uploadLikeDom()
})
upDataSuccess(data)
}
const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
let url
let data = {
toProductImageResultId:[(design.designItemId || design.id)],
projectId: store.state.Workspace.probjects.id,
collectionSortParentId:designData?.selectDesign?.parentId || design.parentId,
collectionSortParentId:designData?.selectDesign?.parentId || design?.parentId,
} as any
let params = {} as any
if(type == 'ToProductImage' || type == 'Relight'){
@@ -1004,41 +951,43 @@ export default defineComponent({
}
designData.likeLoading = true;
Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
(rv) => {
if(str == 'like'){
// likeDesignCollectionList.value.forEach((item)=>{
// if(item.userLikeSortId == designData.selectDesign.userLikeSortId){
// // if(item?.childList.)
// item.unshift(data)
// }
// })
// if(){
// }else{
// }
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
if(!item?.childList)item.childList = []
// if(item?.childList)
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === design?.taskId);
if (removeIndex !== -1) {
item.childList[removeIndex] = design
}else{
item.childList.push(design)
async (rv) => {
await new Promise((resolve, reject) => {
if(str == 'like'){
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
if(!item?.childList)item.childList = []
// if(item?.childList)
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === design?.taskId);
if (removeIndex !== -1) {
item.childList[removeIndex] = design
}else{
item.childList.push(design)
}
}
}
})
}else{
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
item.childList = item.childList.filter((childItem:any)=>{
return childItem.id != design.id
})
}
})
}
})
}else{
console.log(design)
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
item.childList.forEach((childItem:any)=>{
if(childItem.sort > design.oldSort){
console.log(childItem)
childItem.sort -= 1
}
})
item.childList = item.childList.filter((childItem:any)=>{
return childItem.id != design.id
})
console.log(item)
}
})
}
resolve('')
})
nextTick().then(()=>{
console.log(111)
designData.isUnfold = true
uploadLikeDom()
})
@@ -1073,76 +1022,175 @@ export default defineComponent({
designData.likeLoading = false;
});
}
let likeDesignCollection = (design:any,index:any,type:any) => {
if (designData.likeLoading) {
return;
}
if(type != 'Design'){
setNoDesignLike(design,index,type,'like')
return
}
let data = {
designItemId: design.designItemId,
userGroupId: store.state.HomeStoreModule.userGroupId,
projectId: store.state.Workspace.probjects.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
};
designData.likeLoading = true;
Https.axiosPost(Https.httpUrls.designLike, data)
.then((rv: any) => {
if (rv) {
let value:any = {
...design,
id:rv.userLikeId,
groupDetailId:rv.userLikeId,
userLikeSortId:rv.userLikeSortId,
userLikeGroupId:rv.userGroupId,
sort:rv.sort,
}
store.commit("setUserGroupId", rv.userGroupId);
design.groupDetailId = rv.groupDetailId;
store.commit(
"addLikeDesignCollectionList",
value
);
setLikeDislLike('like',value)
if(index != -1)store.commit("deleteDesignCollectionList", index);
}
designData.likeLoading = false;
})
.catch((rv) => {
designData.likeLoading = false;
});
}
const upDataLikeListType = ()=>{
}
const generateLoad = (data:any)=>{
if(!data.taskId)return
let list = []
if(data.listType == 'disLike'){
list = designCollectionList.value
}else{
// list = designData.selectLikeDesign
list = likeDesignCollectionList.value
const upDataSuccess = (element)=>{
console.log(JSON.parse(JSON.stringify(likeDesignCollectionList.value)))
if(designData.isUnfold){
designData.selectLikeDesign.forEach((item:any,index:any) => {
if(element.taskId == item.taskId){
designData.selectLikeDesign[index].url = element.url
designData.selectLikeDesign[index].status = element.status
designData.selectLikeDesign[index].elementType = element.elementType
designData.selectLikeDesign[index].elementId = element.elementId
designData.selectLikeDesign[index].id = element.id
}
});
}
list.forEach((item)=>{
if(data.parentId == item.userLikeSortId){
const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === data?.taskId);
if(removeIndex == -1){
item.childList.push(data)
likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
if(likeItem?.childList?.length > 0){
likeItem.childList.forEach((childItem:any,index:any)=>{
if(childItem.taskId == element.taskId){
console.log(childItem)
likeItem.childList[index].url = element.url
likeItem.childList[index].status = element.status
likeItem.childList[index].elementType = element.elementType
likeItem.childList[index].elementId = element.elementId
likeItem.childList[index].id = element.id
console.log(likeItem.childList)
}
})
}
})
nextTick(()=>{
setSystemDesigner(0)
})
}
const upDataSort = (generateCourseItem:any,likeIndex:number)=>{
let list = likeDesignCollectionList.value
if(list[likeIndex].childList.length == 0)return
list[likeIndex].childList.forEach((likeItem:any,index:any)=>{
console.log(likeItem)
if(likeItem.sort >= generateCourseItem.sort){
likeItem.sort += 1
}
})
}
const generateLoad = async (data:any)=>{
// return
clearInterval(prductimgTime.ToProductImage)
clearInterval(prductimgTime.PoseTransfer)
clearInterval(prductimgTime.Relight)
let list = likeDesignCollectionList.value
data.generateCourse.forEach((generateCourseItem:any)=>{
let oldData = generateCourseItem.oldData
if(oldData?.resultType == "Design"){
let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId && item.resultType == "Design"))
if(!list[index]?.childList)list[index].childList = []
if(data.status == 'add'){
generateCourseItem.sort = list[index]?.childList.length + 1
upDataSort(generateCourseItem,index)
list[index]?.childList.push(generateCourseItem)
}
}else{
console.log(generateCourseItem)
let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
if(!list[index]?.childList){
list[index].childList = []
}
if(data.status == 'add'){
upDataSort(generateCourseItem,index)
list[index]?.childList.push(generateCourseItem)
}else{
let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem.id))
list[index].childList[childIndex] = generateCourseItem
}
}
})
nextTick().then(()=>{
await nextTick().then(()=>{
designData.isUnfold = true
uploadLikeDom()
})
// list[data.index].generateAwait = true;
let toProductImage = []
let poseTransfer = []
let relight = []
list.forEach((item:any)=>{
if(!item?.childList)item.childList = []
item.childList.forEach((childItem:any)=>{
if(childItem.resultType == 'PoseTransfer'){
if(!childItem.status && !childItem?.firstFrameUrl){
poseTransfer.push(childItem.taskId)
}
}else if(childItem.resultType == 'ToProductImage'){
if(!childItem.status && (!childItem?.url || !childItem?.designOutfitUrl)){
toProductImage.push(childItem.taskId)
}
}else if(childItem.resultType == 'Relight'){
if(!childItem.status && (!childItem?.url || !childItem?.designOutfitUrl)){
relight.push(childItem.taskId)
}
}
})
})
setPrductimg(toProductImage,'ToProductImage')
setPrductimg(poseTransfer,'PoseTransfer')
setPrductimg(relight,'Relight')
}
let prductimgTime = {
ToProductImage:null,
PoseTransfer:null,
Relight:null,
}
const setFail = (list:any)=>{
list.forEach((listItem)=>{
if(designData.isUnfold){
let index = designData.selectLikeDesign.findIndex((item:any)=>{return item.taskId == listItem})
designData.selectLikeDesign.splice(index,1)
}
likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
if(likeItem?.childList?.length > 0){
let index = likeItem.childList.findIndex((item:any)=>{return item.taskId == listItem})
likeItem.childList.splice(index,1)
}
})
})
nextTick().then(()=>{
uploadLikeDom()
})
}
let setPrductimg = (dataList:any,type:string)=>{
if(dataList.length == 0)return
let data = dataList
let state = true
let url = Https.httpUrls.relightResult
if(type == 'ToProductImage'){
url = Https.httpUrls.toProductImageResult
}else if(type == 'PoseTransfer'){
url = Https.httpUrls.poseTransformResult
}
// url = Https.httpUrls.poseTransformResult
// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
prductimgTime[type] = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(url, data).then(
(rv) => {
if(type == 'PoseTransfer'){
rv = [rv]
}
state = true
rv.forEach((element:any) => {
if(element?.status == 'Success'){
// setFail([element.taskId])
upDataSuccess(element)
data = data.filter((item:any) => item !== element.taskId);
}else if(element?.status == 'Fail' || element?.status == 'Invalid'){
data = data.filter((item:any) => item !== element.taskId);
setFail([element.taskId])
message.info(t('Generate.everyTimeEffectPoor'));
}
});
if(data.length == 0){
store.state.store.dispatch('getCredits')
clearInterval(prductimgTime[type])
}
}
).catch(res=>{
clearInterval(prductimgTime[type])
setFail(data)
});
},type == 'PoseTransfer'?20000:3000)
}
const gifPlay = (e:any,item:any)=>{
e.target.src = item.gif || item.gifUrl//使用gif图片
@@ -1172,7 +1220,10 @@ export default defineComponent({
item.oldSort = item.sort
if(item?.childList?.length > 0){
item.childList.forEach((childItem:any,childIndex:number)=>{
childItem.sort = childIndex + item.sort + childLength
childItem.oldSort = childItem.sort
console.log(childItem.sort,childLength,index)
childItem.sort = childItem.sort + childLength + index
// childItem.sort = childIndex + item.sort + childLength
designData.selectLikeDesign.push(childItem)
})
childLength = item.childList.length + childLength
@@ -1193,6 +1244,7 @@ export default defineComponent({
const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
parents.map((parent:any) => {
parent.sort = parent.oldSort||parent.sort
delete parent.oldSort
return {
...parent,
childList: designData.selectLikeDesign.filter((item:any) =>
@@ -1207,6 +1259,13 @@ export default defineComponent({
})
}
const changeResultType = ()=>{
if(designData.resultType == 'Design'){
designData.isUnfold = false
setUnfold()
}else{
designData.isUnfold = true
// setUnfold()
}
if(designData.resultType != 'All'){
if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
if(designData.resultType == 'Product'){
@@ -1263,7 +1322,6 @@ export default defineComponent({
setSpeed,
openEditTools,
openCanvas,
editToolsSuccess,
uploadLikeDom,
likeItemDom,
@@ -1284,7 +1342,6 @@ export default defineComponent({
openCollection,
setEditDesignType,
openEditBtn,
addGenerateImg,
setNoDesignLike,
upDataLikeListType,
generateLoad,
@@ -1294,6 +1351,7 @@ export default defineComponent({
endHover,
setUnfold,
changeResultType,
addGenerateImg,
};
},
data() {
@@ -1785,7 +1843,27 @@ export default defineComponent({
},
//不喜欢设计
dislikeDesignCollection(design:any,type:string, index: any) {
async dislikeDesignCollection(design:any,type:string) {
if(design?.childList?.length > 0){
await new Promise((resolve, reject) => {
Modal.confirm({
title: this.t('LibraryPage.jsContent11'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
zIndex:99999,
centered:true,
onOk() {
resolve('')
},
onCancel(){
return
}
});
})
}
let data = {
designId: design.designId || this.designId,
designPythonOutfitId:design.designOutfitId,
@@ -1793,10 +1871,6 @@ export default defineComponent({
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
projectId:this.store.state.Workspace.probjects.id,
};
if(type != 'Design'){
this.setNoDesignLike(design,index,type,'disLike')
return
}
if (this.disLikeLoading) {
return;
}
@@ -1804,17 +1878,27 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.designDislike, data)
.then((rv: any) => {
if (rv) {
// this.store.commit("addDesignCollectionList", [design]);
this.likeDesignCollectionList.forEach((item:any)=>{
if(item.sort > design.sort){
this.recycleDomHidden = true
this.store.commit("addDesignCollectionList", [design]);
let index = -1
this.likeDesignCollectionList.forEach((item:any,likeIndex:number)=>{
if(item.id == design.id){
design.childList = []
index = likeIndex
}
if((item?.oldSort || item.sort) > (design?.oldSort || design.sort)){
item.sort-=1
}
})
this.store.commit(
"deleteLikeDesignCollectionList",
index
);
this.setLikeDislLike('disLike',design)
this.likeDesignCollectionList.splice(index,1)
// this.store.commit(
// "deleteLikeDesignCollectionList",
// index
// );
design.childList = []
nextTick(()=>{
this.setLikeDislLike('disLike',design)
})
}
this.disLikeLoading = false;
})
@@ -1997,6 +2081,7 @@ export default defineComponent({
) {
// if()
if(this.isMove)return
this.store.commit('setOpenChatStatus',false)
if(design.resultType != "Design"){
this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
return
@@ -2123,29 +2208,29 @@ export default defineComponent({
width: 100%;
height: 100%;
display: flex;
// padding-left: 0.7rem;
box-sizing: border-box;
// overflow: hidden;
.designPage_left {
// width: 44.4rem;
width: 33%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
position: relative;
// overflow: hidden;
.designPage_left_content {
height: 100%;
width: 50rem;
// width: 55rem;
overflow: hidden;
// transition: all .3s;
padding-right: 1.2rem;
&.active{
&.active{
width: 0;
.designPage_left_content{
padding-right: 0;
width: 0;
}
}
.designPage_left_content {
height: 100%;
// width: 50rem;
width: 100%;
overflow: hidden;
padding-right: 1.2rem;
.home_left_info {
height: 100%;
display: flex;
@@ -2273,8 +2358,9 @@ export default defineComponent({
flex: 1;
display: flex;
position: relative;
width: 0;
flex-direction: column;
// min-width: 40%;
width: 50%;
&.recycleBin{
flex: none;
margin-left: 0;
@@ -2283,9 +2369,10 @@ export default defineComponent({
&.recycleBinShow{
width: auto;
margin-left: 2rem;
width: calc(50% - 2rem);
}
.right_content_body {
width: 55rem;
width: 100%;
// width: 55rem;
.right_content_img_block{
@@ -2413,11 +2500,11 @@ export default defineComponent({
top: 0rem;
> .childItem{
> .content_img_flex{
object-fit: contain;
border: 2px solid #00000070;
}
position: relative !important;
>img{
}
}
}
@@ -2431,20 +2518,21 @@ export default defineComponent({
border: 2px solid #000;
}
&.PoseTransfer{
border: 2px solid #f0d9d0;
border: 2px solid #c7c7c7;
}
&.ToProductImage{
border: 2px solid #ccece5;
border: 2px solid #c7c7c7;
}
&.Relight{
border: 2px solid #ccece5;
border: 2px solid #c7c7c7;
}
}
}
.content_img {
height: 100%;
// object-fit: contain;
object-fit: cover;
width: 100%;
object-fit: contain;
// object-fit: cover;
}
.btn{
@@ -2454,6 +2542,10 @@ export default defineComponent({
position: absolute;
flex-direction: column;
align-items: center;
@media (min-width: 1024px) {
top: 1.5rem;
right: 1.5rem;
}
> i{
cursor: pointer;
width: 3rem;
@@ -2464,6 +2556,9 @@ export default defineComponent({
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
color: #fff;
font-size: 1.7rem;
@media (min-width: 1024px) {
font-size: 2rem;
}
}
.icon_like,.icon_delete {

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

@@ -5,7 +5,7 @@
<!-- <div class="text">Style：</div>
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
<div class="text" v-show="systemUser">Style：</div>
<div class="text" v-show="systemUser">{{ $t('Model.Style：') }}</div>
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
<a-select
@@ -27,7 +27,7 @@
</div>
</div>
<div class="selectModel">
Current Model :
{{ $t('Model.CurrentModel') }} :
<div class="item" v-for="item ,index in selectObject.model" @click="deleteSelectModel(index)">
<img :src="item.url" alt="">
<span class="icon iconfont icon-shanchu"></span>
@@ -154,8 +154,8 @@ export default defineComponent({
if(list.length <= 3){
let model = {
id:item.id,
url:item.presignedUrl,
type:data.systemUser?'System':'Library',
url:item.presignedUrl || item.url,
type:item.type?item.type:data.systemUser?'System':'Library',
}
list.push(model)
}else{

85
src/component/home/design/tools.vue
View File

@@ -34,6 +34,7 @@
:isDesignPage="true"
@setLike="designLike"
class="toProduct"
:source="source"
:isState="openType =='toProduct'"
v-if="openType == 'toProduct'"
></toProductRelight>
@@ -42,10 +43,11 @@
:isDesignPage="true"
@setLike="designLike"
class="relight"
:source="source"
:isState="openType =='relight'"
v-if="openType == 'relight'"
></toProductRelight>
<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
<poseTransfer v-if="openType == 'poseTransfer'" :source="source" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
<div v-if="openType == 'editCanvas'" class="canvasBox" :class="{editCanvas:openType == 'editCanvas'}">
<div class="canvas" ref="canvasBox">
<editCanvas @changeCanvas="changeCanvas" ref="editCanvas">
@@ -56,12 +58,13 @@
</div>
<div class="btn">
<div class="gallery_btn" @click="saveCanvas">Save</div>
<div class="gallery_btn">Share</div>
<div class="gallery_btn" @click="share">Share</div>
<div class="gallery_btn" @click="exportElement">Export</div>
</div>
</div>
</div>
</div>
<publish ref="publish" @clearPublish="clearPublish"></publish>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -78,12 +81,17 @@ import poseTransfer from '../tools/poseTransfer/index.vue'
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
import JSZip, { forEach } from "jszip";
import publish from "@/component/WorksPage/publish.vue";
export default defineComponent({
components:{
toProductRelight,poseTransfer,editCanvas,ExistsImageList
toProductRelight,poseTransfer,editCanvas,ExistsImageList,publish
},
props:{
source:{
type:String,
default:'',
},
},
emits:['editToolsSuccess'],
setup(props,{emit}) {
@@ -103,8 +111,10 @@ export default defineComponent({
relight:null as any,
poseTransfer:null as any,
editCanvas:null as any,
publish:null as any,
}) as any
const init = (value:any,list:any)=>{
store.commit('toolsClear')
data.designTools = true
data.openType = value
if(value == 'editCanvas'){
@@ -114,31 +124,74 @@ export default defineComponent({
data.likeDesignList = list
nextTick(()=>{
let fileList = [] as any
let likeList = [] as any
if(value == 'toProduct'){
list.forEach((item:any) => {
item.type = 'DesignOutfit'
fileList.push(item)
item.childList.forEach((child:any) => {
if(child.resultType == 'ToProductImage'){
likeList.push(child)
}
});
});
}else if(value == 'relight' || value == 'poseTransfer'){
console.log(list)
list.forEach((item:any) => {
if(item.childList){
item.childList.forEach((child:any) => {
if(child.resultType == 'ToProductImage' || child.resultType == 'Relight'){
fileList.push(child)
}
console.log(fileList)
if(child.resultType == 'Relight' && value == 'relight'){
likeList.push(child)
}else if(child.resultType == 'PoseTransfer' && value == 'poseTransfer'){
likeList.push(child)
}
console.log(likeList)
});
}
});
}
console.log(fileList)
let likeData = {
likedList: likeList,
str:'add',
index:-1,
}
if(data.openType == 'toProduct'){
store.commit("setToProductImage", likeData);
}else if(data.openType == 'relight'){
store.commit("setRelightList", likeData);
}else if(data.openType == 'poseTransfer'){
console.log(likeData)
store.commit("setPoseTransfer", likeData);
}
dataDom[value].openSetData(fileList)
})
}
let cleardata = async ()=>{
let list = []
if(data.openType == 'toProduct'){
list = store.state.HomeStoreModule.toProductImageList.likedList
}else if(data.openType == 'relight'){
list = store.state.HomeStoreModule.relightList.likedList
}else if(data.openType == 'poseTransfer'){
list = store.state.HomeStoreModule.poseTransfer.likedList
}
let generateCourse = list.filter((item)=>item.oldSort)
generateCourse = generateCourse.map(item => {
return item.oldSort ? { ...item, sort: item.oldSort } : item;
});
let emitData = {
status:'add',
generateCourse:generateCourse,
}
emit('editToolsSuccess',emitData)
data.openType = ''
data.likeDesignList = []
data.designTools = false
store.commit('toolsClear')
}
const designLike = ()=>{
@@ -147,7 +200,9 @@ export default defineComponent({
//画布相关
const getSelectCanvasImg = ()=>{
data.canvasSelectList = []
let allCollection = store.state.UploadFilesModule.allBoardData
console.log(allCollection)
let allCollectionStr = [
{value:'disposeMoodboard',name:'Entirety Moodboard'},
{value:'moodboardFiles',name:'Moodboard'},
@@ -208,7 +263,6 @@ export default defineComponent({
}
const saveCanvas = ()=>{
let canvasJSON = dataDom.editCanvas.getJSON()
console.log(JSON.parse(canvasJSON))
if(!canvasJSON)return
let blob = new Blob([canvasJSON], { type: "application/json" });
let formData = new FormData();
@@ -229,7 +283,7 @@ export default defineComponent({
console.log(data.canvasDetailData)
let img = [] as any;
if(data.canvasDetailData.commandManager.undoStack.length > 0){
await dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv:any)=>{
await dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false}).then((rv:any)=>{
var imageDataURL = rv
img.push({
imgUrl: imageDataURL,
@@ -239,7 +293,6 @@ export default defineComponent({
}
for(let i = 0; i < data.canvasSelectList.length;i++){
let item = data.canvasSelectList[i]
console.log(item)
item.imgList.forEach((imgItem:any,index:any)=>{
let nameTail = imgItem.url?.split(".").pop().split("?").shift();
img.push({
@@ -308,6 +361,20 @@ export default defineComponent({
};
const changeCanvas = (value:any)=>{
data.canvasDetailData = value
}
const share = async ()=>{
var imageDataURL = '';
await dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false}).then((rv:any)=>{
imageDataURL = rv
})
let value = {
imgUrl:imageDataURL,
userlikeGroupId:1111,
}
dataDom.publish.init(value)
}
const clearPublish = ()=>{
}
return{
...toRefs(dataDom),
@@ -319,6 +386,8 @@ export default defineComponent({
saveCanvas,
exportElement,
changeCanvas,
share,
clearPublish,
}
},
provide() {