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-18 11:05:23 +08:00
parent 903c0ebdf5
commit 9c7fae36eb
118 changed files with 23633 additions and 8201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/component/home/batchGeneration/createCloud.vue
View File

@@ -24,7 +24,7 @@
</div>
</div>
<div class="modal_title_text">
<div>Create Cloud Generation Tasks</div>
<div>Create Batch Generation Tasks</div>
</div>
<div class="allUserPoeration_center admin_page">
<div class="admin_state_item">
@@ -52,12 +52,24 @@
placeholder="Please select"
:options="objectList"
@search="getHistoryProjectList"
@change="changeProject"
>
<template #option="{ value: val, label, icon,updateTime }">
<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
</template>
</a-select>
</div>
<div class="admin_state_item">
<span>Name <span>*</span></span>
<input
v-model="porjectName"
:placeholder="placeholder"
@focus="focus"
@blur="blur"
type="text"
style="width: 200px"
/>
</div>
<div class="admin_state_item" v-show="buildType">
<span>Quantity <span>*</span></span>
<input
@@ -72,14 +84,17 @@
<div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item ">
<span>{{$t('ProductImg.Similarity')}}</span>
<div class="sliderAndImput" style="width: 200px">
<a-slider class="system_silder"
<!-- <a-slider class="system_silder"
v-model:value="similarity"
range
:step="5"
>
</a-slider>
<!-- <input type="number" readonly v-model="similarity"> -->
</a-slider> -->
<div style="display: flex;">
<input type="number" readonly v-model="similarity[0]">
<div style="margin: 0 1rem;">-</div>
<input type="number" readonly v-model="similarity[1]">
</div>
</div>
</div>
<div v-show="buildType == 'RELIGHT'" class="admin_state_item ">
@@ -117,12 +132,18 @@
</div>
</div> -->
<div class="productImg_content_item_imgBox generalScroll upload_item" v-if="buildType && buildType != 'SERIES_DESIGN' && buildType != 'SINGLE_DESIGN'" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item in uploadElement" :key="item">
<div
class="imgBox"
@click="()=>item.isChecked = !item.isChecked"
>
<img :class="[item?.isChecked?'active':'']" :src="item?.url" class="upload_img"/>
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
</div>
<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" style="display: flex;align-items: center;">
<a-spin size="large" />
</div>
<div
class="imgBox"
@@ -217,9 +238,10 @@ export default defineComponent({
exhibitionImgList:[],//选择的图片
projectData:null,//批量id
objectList:[],
porjectName:'',//任务名字
//toProduct
generateText:'',//输入的内容
similarity:[30,60],
similarity:[20,40],
brightenValue:1,//亮度
relightDirection:'Right Light',//打光方向
relightDirectionList:[
@@ -238,13 +260,43 @@ export default defineComponent({
}
],
fileList:[],
uploadElement:[],
placeholder:'',
})
const getUploadElement = ()=>{
operations.loadingShow = true
let value = {
id:operationsData.projectData,
moduleList:['uploadElement']
}
operationsData.placeholder = 'Batch_' + setPlaceholder()
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
operationsData.uploadElement = rv.uploadElement
operations.loadingShow = false
}).catch((err)=>{
operations.loadingShow = false
})
}
let init = (projectData,buildType)=>{
operations.operationsModal = true
if(projectData?.id)operationsData.projectData = {label:projectData.name,value:projectData.id}
clearData()
if(projectData?.id){
operationsData.projectData = {label:projectData.name,value:projectData.id}
getUploadElement()
}
if(buildType.value)operationsData.buildType = buildType
}
const clearData = ()=>{
operationsData.porjectName = ''
operationsData.generateText = ''
operationsData.similarity = [20,40]
operationsData.brightenValue = 1
operationsData.fileList = []
operationsData.uploadElement = []
}
const changeProject = ()=>{
getUploadElement()
}
const changeBuildType = ()=>{
// operationsData.exhibitionImgList = []
operationsData.projectData = null
@@ -255,15 +307,20 @@ export default defineComponent({
})
getHistoryProjectList()
}
const getGenerateCloudImgList = ()=>{
const getGenerateCloudImgList = (type)=>{
let list = []
if(operationsData.buildType == 'SINGLE_DESIGN'|| operationsData.buildType == 'SERIES_DESIGN')return list
let selectList = operationsData.fileList.filter((item)=>item.isChecked)
if(type == 'SINGLE_DESIGN'|| type == 'SERIES_DESIGN')return list
let selectList = []
let fileList = operationsData.fileList.filter((item)=>item.isChecked)
let uploadElement = operationsData.uploadElement.filter((item)=>item.isChecked)
if(fileList)selectList.push(...fileList)
if(uploadElement)selectList.push(...uploadElement)
selectList.forEach((item)=>{
let obj = {
}
if(operationsData.buildType == 'POSE_TRANSFER'){
if(type == 'POSE_TRANSFER'){
obj = {
poseId:1,
productImage:getMinioUrl(item.imgUrl)
@@ -271,7 +328,7 @@ export default defineComponent({
}else{
obj = {
elementId:item.id,
elementType:item.type
elementType:item.type||'ProductElement'
}
}
list.push(obj)
@@ -337,10 +394,11 @@ export default defineComponent({
"buildType": buildTypeCorresponding[operationsData.buildType],
nums: operationsData.numberOfImages,
projectId: operationsData.projectData,
name:operationsData.porjectName || operationsData.projectData,
//productimg
toProductImage:{
prompt:operationsData.generateText,//输入的内容
toProductImageVOList:(operationsData.buildType == 'TO_PRODUCT_IMAGE' || operationsData.buildType == 'RELIGHT')?getGenerateCloudImgList():[],//选择的图片
toProductImageVOList:getGenerateCloudImgList(operationsData.buildType),//选择的图片
// toProductImageVOList:getPorductImg(),//选择的图片
projectId: operationsData.projectData,
direction:operationsData.relightDirection,//打光方向
@@ -351,7 +409,7 @@ export default defineComponent({
},
//poseTransform
// poseTransform:getPoseTransformData(),
poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList():[],
poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList('POSE_TRANSFER'):[],
private: operationsData.projectData,
ToProductImageDTO: operationsData.projectData,
}
@@ -375,7 +433,7 @@ export default defineComponent({
// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
}
if(operationsData.buildType == 'DESIGN' && !operationsData.projectData)return message.warning('Please select a project')
if(!data.buildType || !data.nums || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
if(!data.buildType || !data.nums || !data.name || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
operations.loadingShow = true
Https.axiosPost(Https.httpUrls.designCloud, data).then(
(rv) => {
@@ -458,11 +516,25 @@ export default defineComponent({
bor = false
}
}
const setPlaceholder = ()=>{
if(!operationsData.projectData)return ''
let index = operationsData.objectList.findIndex(item => item.id === operationsData.projectData)
return operationsData.objectList[index].name
}
const focus = ()=>{
if(operationsData.porjectName)return
operationsData.porjectName = operationsData.placeholder
}
const blur = ()=>{
if(operationsData.porjectName != operationsData.placeholder)return
operationsData.porjectName = ''
}
return {
...toRefs(operations),
...toRefs(operationsData),
cancelDsign,
init,
changeProject,
focus,
blur,
setOk,
@@ -658,13 +730,17 @@ export default defineComponent({
// border-radius: 1.6rem;
flex: 1;
}
> input{
border-radius: 1.6rem;
width: 4rem;
margin-left: 1rem;
height: 100%;
border-radius: 1rem;
>div{
input{
border-radius: 1.6rem;
width: 5rem;
padding: 4px 11px 4px;
margin-left: 1rem;
height: 100%;
text-align: center;
}
}
}
}
}

102
src/component/home/batchGeneration/index.vue
View File

@@ -47,17 +47,35 @@
<div class="content">
<tr v-for="(row, index) in contentList" :key="index">
<td v-for="header in cloudTiltleList" :key="header.value">
<span v-show="header.value != 'operation'">
<div v-if="header.value != 'operation' && header.value != 'name'">
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
</div>
<div v-if="header.value == 'name'">
<div v-if="row.id == renameId" class="rename">
<input type="text" v-model="renameText">
<i class="fi fi-br-check" @click="submitRename(row)"></i>
</div>
<div v-else>
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
</div>
</div>
<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="setRename(row)">
Rename
</span>
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="detailIamge(row)">
Review
</span>
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="deleteRom(row)">
Delete
</span>
</td>
</tr>
</div>
<a-pagination style="text-align: center;" @change="pagination" v-model:current="currentPage" :total="total" show-less-items />
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
</div>
</template>
@@ -159,6 +177,9 @@ export default defineComponent({
},
cloudTiltleList:[
{
name:'Task Name',
value:'name',
},{
name:'Task type',
value:'buildType',
fun:(value:any)=>{
@@ -213,6 +234,9 @@ export default defineComponent({
] as any,
objectList:[],
isGetContentList:false as any,
renameId:-1 as any,
renameText:'',
loadingShow:false,
})
const dataDom = reactive({
createCloud,
@@ -259,7 +283,13 @@ export default defineComponent({
store.commit('setCloudList',{str:'relight',list:rv.relight})
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
}else if(item.buildType == 'poseTransfer'){
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
let list = {
list:rv.poseTransfer,
str:'add',
index:-1,
}
store.commit("setPoseTransfer", list);
// store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
}
// if(rv.design && rv.design.length > 0){
@@ -281,6 +311,7 @@ export default defineComponent({
}
const pagination = ()=>{
data.isGetContentList = true
data.renameId = -1
getContentList()
}
let time = null as any
@@ -290,7 +321,7 @@ export default defineComponent({
let value = {
page:data.currentPage,
size:data.pageSize,
projectId: data.projectData?.value,
projectId: data.projectData?.value?data.projectData?.value:'',
}
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
data.contentList = rv.content
@@ -342,6 +373,40 @@ export default defineComponent({
const handleChange = (event:any,value:any)=>{
data.createData = value
}
const setRename = (item:any)=>{
data.renameId = item.id
data.renameText = item.name
}
const submitRename = (item:any)=>{
data.renameId = -1
data.loadingShow = true
let value = {
id:item.id,
name:data.renameText,
}
Https.axiosPost(Https.httpUrls.cloudTaskNameUpdate,value).then((rv)=>{
data.loadingShow = false
data.renameText = ''
data.isGetContentList = true
getContentList()
}).catch((err)=>{
data.loadingShow = false
})
}
const deleteRom = (item:any)=>{
let value = {
id:item.id
}
Https.axiosPost(Https.httpUrls.cloudTaskDelete,value).then((rv)=>{
data.loadingShow = false
data.isGetContentList = true
getContentList()
}).catch((err)=>{
data.loadingShow = false
})
}
onBeforeUnmount(()=>{
data.isGetContentList = false
})
@@ -366,6 +431,9 @@ export default defineComponent({
handleChange,
getHistoryProjectList,
pagination,
setRename,
submitRename,
deleteRom,
}
},
provide() {
@@ -452,7 +520,31 @@ export default defineComponent({
text-align: center;
width: calc(100% / 4);
line-height: 4.6rem;
font-size: 2.2rem;
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
.rename{
display: flex;
align-items: center;
input{
height: 100%;
padding: .8rem;
width: 12rem;
}
> i{
margin-left: 1rem;
cursor: pointer;
width: 3rem;
height: 3rem;
background: #000;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 2rem;
}
}
}
}
}

18
src/component/home/chat/index.vue
View File

@@ -80,6 +80,7 @@ import { useStore } from "vuex";
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useRouter,useRoute } from 'vue-router'
export default defineComponent({
components:{
},
@@ -88,6 +89,7 @@ export default defineComponent({
emits:['chatChange'],
setup(props,{emit}) {
const store = useStore();
const route = useRoute()
const data = reactive({
chatContent:'',
openChat:true,
@@ -107,6 +109,7 @@ export default defineComponent({
watch(()=>data.selectObject.id,(newValue,oldValue)=>{
if(newValue && (data.selectObject.httpType == 'SERIES_DESIGN' || data.selectObject.httpType == 'SINGLE_DESIGN')){
data.chatList = []
if(route.query?.create)return
nextTick(()=>{
getChatHistory(newValue)
})
@@ -146,7 +149,7 @@ export default defineComponent({
// data.chatList[data.chatList.length-1].content.message+=JSON.parse(event.data).content
// }
const container = dataDom.chatBox;
container.scrollTop = container.scrollHeight;
if(container?.scrollHeight)container.scrollTop = container.scrollHeight;
const eventData = JSON.parse(event.data)
if(eventData.type == 'text'){
@@ -155,6 +158,11 @@ export default defineComponent({
data.chatList[data.chatList.length-1].content.think+=eventData.content
}else if(eventData.type == "tools_response"){
let nameList = ['moodboard','printboard','sketchboard','generate_color_code']
let nameData = {
moodboard:'moodBoard',
printboard:'printBoard',
sketchboard:'sketchBoard',
} as any
let getData = ''
if(nameList.indexOf(eventData.tools_name) > -1){
if(data.chatList[data.chatList.length - 1].content.message)data.chatList.push({content:{message:''},role:'system'})
@@ -163,16 +171,14 @@ export default defineComponent({
getData = 'colorboard'
}else{
data.chatList[data.chatList.length-1].content.img = JSON.parse(JSON.parse(event.data).content).receiveCollectionElementList
getData = eventData.tools_name
getData = nameData[eventData.tools_name]
}
data.chatList.push({content:{message:''},role:'system'})
}else{
}else if(eventData.tools_name == 'design_control_signal'){
emit('chatChange',{type:eventData.tools_name,design:true})
}
emit('chatChange',{type:eventData.type,module:getData})
}else if(eventData.type == "design_control_signal"){
emit('chatChange',{type:eventData.type,design:true})
}
//emit('chatChange',{type:JSON.parse(event.data).status})
};

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

@@ -11,7 +11,7 @@
:closable="false"
:mask="true"
:keyboard="false"
:destroyOnClose="true"
:destroyOnClose="false"
:zIndex="1000"
>
<div class="generalModel_btn">
@@ -23,18 +23,33 @@
</svg>
</div>
</div>
<div class="collection_title">
<div class="collection_title_text">
<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
<div v-show="collectionStep === 4">{{ $t('collectionModal.Mannquinboard') }}</div>
<div v-show="collectionStep === 5">{{ $t('collectionModal.Sketchboard') }}</div>
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
<!-- <div class="collection_title_text_intro" v-show="collectionStep === 1">{{ $t('collectionModal.MoodCollection') }}</div>
<div class="collection_title_text_intro" v-show="collectionStep === 2">{{ $t('collectionModal.PrinCollection') }}</div>
<div class="collection_title_text_intro" v-show="collectionStep === 3">{{ $t('collectionModal.ColorCollection') }}</div>
<div class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div>
<div class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div> -->
</div>
</div>
<div class="designOpenrtion_content">
<!-- <div class="modal_title_text">
<div>Setting</div>
</div> -->
<div class="collectionBox">
<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard' || collectionStep == 4"></SketchboardUpload>
<mannequin ref="mannequin" v-if="openType == 'mannequin' || collectionStep == 5"></mannequin>
<MoodboardUpload ref="moodBoard" v-show="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
<PrintboardUpload ref="printBoard" v-show="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
<mannequin ref="mannequin" v-show="openType == 'mannequin' || collectionStep == 4"></mannequin>
<SketchboardUpload ref="sketchBoard" v-show="openType == 'sketchBoard' || collectionStep == 5"></SketchboardUpload>
</div>
<div class="collection_page">
<div class="collection_page" v-show="isNext">
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
@@ -47,11 +62,12 @@
</a-modal>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,ref,provide,nextTick,inject,toRefs, reactive, onBeforeMount} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { init } from 'echarts/core';
import MoodboardUpload from './collection/MoodboardUpload.vue';
import PrintboardUpload from './collection/PrintboardUpload.vue';
@@ -64,6 +80,10 @@ export default defineComponent({
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
},
props:{
isNext:{
type:Boolean,
default:true,
},
},
emits:['getHistory'],
setup(props,{emit}) {
@@ -74,6 +94,8 @@ export default defineComponent({
openType:'',
collectionStep:1,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
createProbject:inject('createProbject') as any
})
let driver__:any = computed(()=>{
return store.state.Guide.guide
@@ -83,8 +105,8 @@ export default defineComponent({
moodBoard:null as any,
printBoard:null as any,
colorBoard:null as any,
sketchBoard:null as any,
mannequin:null as any,
sketchBoard:null as any,
}) as any
const init = (value:any)=>{
data.habitSetStyle = true
@@ -95,14 +117,16 @@ export default defineComponent({
dataDom[value].openSetData()
})
}
let cleardata = ()=>{
let cleardata = async ()=>{
data.habitSetStyle = false
if(data.collectionStep == 3)await getPantongName()
data.collectionStep = 1
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
saveProject(data.openType)
}
const saveProject = (str:any)=>{
const saveProject = async (str:any)=>{
if(str == 'design')return
if(!data.selectObject.id && data.createProbject)await data.createProbject()
let value:any = {
projectId:data.selectObject.id,
}
@@ -114,11 +138,49 @@ export default defineComponent({
})
})
}
let lastStep = ()=>{
let getPantongName = ()=>{
let colorBoards = store.state.UploadFilesModule.colorBoards;
if(!colorBoards || colorBoards?.length == 0) return
data.isShowMark = true
let value: any = [];
for (let v of colorBoards) {
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
let hsv = rgbToHsv(color);
v.hsv = hsv[0] + hsv[1] + hsv[2];
value.push({
h: hsv[0],
s: hsv[1],
v: hsv[2],
});
}
return new Promise((resolve: any, reject: any) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
.then((rv: any) => {
if (rv) {
rv.forEach((ele: any, index: number) => {
colorBoards[index].id = ele.id;
colorBoards[index].tcx = ele.tcx;
colorBoards[index].name = ele.name;
});
store.commit("setColorboardList", colorBoards);
resolve();
}
data.isShowMark = false
})
.catch((res) => {
reject();
data.isShowMark = false
});
});
}
let lastStep = async ()=>{
if(data.collectionStep == 3)await getPantongName()
data.collectionStep = data.collectionStep - 1
setOpenSetData()
}
let nextStep = ()=>{
let nextStep = async ()=>{
if(data.collectionStep == 3)await getPantongName()
data.collectionStep = data.collectionStep + 1
setOpenSetData()
}
@@ -150,6 +212,42 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.collectionModal{
:deep(.ant-modal-body){
padding-top: 10rem;
}
.collection_title{
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 999;
align-items: center;
width: calc(35rem*1.2);
justify-content: space-between;
.collection_progress{
width: calc(8rem*1.2);
height: calc(8rem*1.2);
>div{
width: 100% !important;
height: 100% !important;
:deep(.ant-progress-inner){
width: 100% !important;
height: 100% !important;
}
}
}
.collection_title_text{
// margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
:deep(.designOpenrtion_content){
display: flex;
flex-direction: column;

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

@@ -560,7 +560,7 @@ export default defineComponent({
level2Type:'',
designType:'',
}
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) || []
let arr = this.store.state.UploadFilesModule.allBoardData.printboardFiles?JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) : []
let setboard = {
generate:[] as any,
material:[] as any,

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

@@ -31,6 +31,12 @@
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>Selection Function</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>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
@@ -44,23 +50,16 @@
</a-slider>
<input type="number" readonly v-model="productimgSimilarity">
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<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'" class="productImg_content_item_Direction">
<!-- <a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
>
</a-slider> -->
<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>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<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>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="productimgBrightenValue"
:tooltipVisible="false"
@@ -109,7 +108,7 @@
<div class="generage_btn_box" style="margin-left: auto;">
<div class="generage_btn started_btn" v-show="!generateSuccess.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 == 'PoseTransfer'" :class="{active:speedState}" @click.stop="openSpeed"></div>
<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="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
@@ -237,19 +236,37 @@ setup(props:any,{emit}) {
})
let speed = reactive({
speedList:[
{
title:'Generate high-quality images',
label:'High',
value:'',
},{
title:'Generate using Wanxiang',
label:'WX',
value:'wx',
},
],
] as any,
speedTypeList:{
poseTransfer:[
{
title:'Generate high-quality images',
label:'High',
value:'',
},{
title:'Generate using Wanxiang',
label:'WX',
value:'wx',
},
],
toPorductImg:[
{
title:'Generate with high quality',
label:'High',
relightLabel:'Relight',
value:'',
},{
title:'',
label:'FLUX',
relightLabel:'Edit',
value:'flux',
},
]
},
speedState:false,
speedData:{
title:'Generate high-quality images',
relightLabel:'Relight',
label:'High',
value:'',
},
@@ -264,6 +281,7 @@ setup(props:any,{emit}) {
}
const setSpeed = (item:any)=>{
speed.speedData = item
speed.speedState = false
}
let scaleImage: any = ref(false);
let isShowMark = ref(false)
@@ -316,15 +334,17 @@ setup(props:any,{emit}) {
direction:productimg.productimgRelightDirection,
prompt:productimg.productimgSearchName,
toProductImageVOList:[obj],
modelName:speed.speedData.value,
brightenValue:productimg.productimgBrightenValue,
projectId:productimg.selectObject.id,
imageStrength:(100 - imageStrength)/100,
ageGroup:productimg.selectObject.ageGroup
}
// return
productimg.generateSuccess.productimgIsProductimg = true
productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
productimg.generateSuccess.productimgRemProductimg = true
},10000)
// 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
@@ -337,6 +357,7 @@ setup(props:any,{emit}) {
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'
let arr:any = []
@@ -484,7 +505,8 @@ setup(props:any,{emit}) {
oldId:productimg.generateSuccess.id,
status:productimg.generateSuccess.status,
listType:productimg.generateSuccess.listType,
isIndex:productimg.generateSuccess.isIndex
isIndex:productimg.generateSuccess.isIndex,
userLikeSortId:productimg.generateSuccess.userLikeSortId
}
emit('addGenerateImg',data)
@@ -565,7 +587,8 @@ methods: {
this.generateSuccess.isIndex = index
}
// this.
this.generateSuccess.userLikeSortId = list[index].userLikeSortId
this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
@@ -595,6 +618,12 @@ methods: {
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
}
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

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

@@ -54,8 +54,6 @@
</div>
<div class="right_content_block_box">
<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
<div class="right_content_body">
<div class="right_content_header">
<div class="content_header_left">
@@ -63,19 +61,23 @@
{{ $t('HomeView.SelectedDesign') }}
</span>
</div>
<div class="generalModel_state">
<!-- <div class="generalModel_state_item smail" style="margin-right: 0;">
<div class="generalModel_state" v-show="domHidden || !recycleDomHidden">
<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
<span>Type :</span>
<a-select
v-model:value="widthValue.value"
v-model:value="resultType"
size="large"
style="width: 15rem"
placeholder="Please select"
:options="widthList"
@change="upDataLikeListType(500)"
:options="resultTypeList"
@change="changeResultType"
>
</a-select>
</div> -->
</div>
<div @click="setUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
<span>Unfold :</span>
<a-switch v-model:checked="isUnfold" @change="setUnfold" />
</div>
<div class="generalModel_state_item smail" style="margin-right: 0;">
<span>Size :</span>
<a-select
@@ -92,15 +94,19 @@
</div>
<div class="right_content_img_block scroll_style active">
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
<!-- likeDesignCollectionList -->
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
v-for="(design, index) in likeDesignCollectionList" :key="design.id || design.designItemId">
v-for="(design, index) in selectLikeDesign" :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')"
:class="[design.resultType]"
@mouseenter="startHover(getMousePosition($event,false),design)"
@mouseleave="endHover(getMousePosition($event,false),design)"
@mousedown.stop="designMousedown(getMousePosition($event,false),design,'like')"
@touchstart.passive="designMousedown(getMousePosition($event,true),design,'like')"
@click="designDetail(
design,
index,
likeDesignCollectionList,
selectLikeDesign,
'like'
)">
<img class="content_img"
@@ -111,33 +117,36 @@
<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" 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)">
<div class="text">On Like</div>
<div class="icon iconfont icon-jushoucanggift icon_like">
<!-- <div class="content_img_block_child" @click.stop>
<div class="content_img_block content_img_GetWidth active childItem"
:style="likeStyle"
v-for="childItem,childIndex in design.childList"
>
<div class="content_img_flex">
<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
</div>
<div class="btn" v-show="!childItem?.generateAwait">
<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
</div>
</div>
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'PoseTransfer','add','like')">
<div class="text">Transfer Pose</div>
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
<div class="content_img_block content_img_GetWidth active childItem"
:style="likeStyle"
v-for="childItem,childIndex in design.childList"
>
<div class="content_img_flex">
<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
</div>
<div class="btn" v-show="!childItem?.generateAwait">
<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
</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>
</div>
<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(likeDesignCollectionList,index,'ToProductImage','add','like')">
<div class="text">To Product Image</div>
<i class="fi fi fi-ss-box-open"></i>
</div>
<!-- <div class="item" @click="setDeleteDesign(design,index)">
<div class="text">Delete</div>
<i class="fi fi-rr-trash icon_delete">
</i>
</div> -->
</div>
</div> -->
</div>
<div class="btn" v-show="!design?.generateAwait">
<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
</div>
</div>
@@ -182,31 +191,10 @@
<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>
<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
<div class="item" @click="likeDesignCollection(design,index,design.resultType)">
<div class="text">Like</div>
<div class="icon iconfont icon-jushoucang icon_like">
</div>
</div>
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'PoseTransfer','add','disLike')">
<div class="text">Transfer Pose</div>
<div class="icon iconfont icon-jushoucanggift icon_like"></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>
</div>
<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(designCollectionList,index,'ToProductImage','add','disLike')">
<div class="text">To Product Image</div>
<i class="fi fi fi-ss-box-open"></i>
</div>
<div class="item" @click="setDeleteDesign(design,index)">
<div class="text">Delete</div>
<i class="fi fi-rr-trash icon_delete">
</i>
</div>
<div class="icon iconfont icon-jushoucang icon_like" @click="likeDesignCollection(design,index,design.resultType)">
</div>
<i class="fi fi-rr-trash icon_delete" @click="setDeleteDesign(design,index)">
</i>
</div>
</div>
@@ -219,11 +207,29 @@
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div ref="designBtn" class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
<div class="text">Delete</div>
<i class="fi fi-rr-trash icon_delete">
</i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
<div class="text">Transfer Pose</div>
<i class="fi fi fi-rr-play-alt"></i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
<div class="text">Relight</div>
<i class="fi fi fi-br-keyboard-brightness"></i>
</div>
<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
<div class="text">To Product Image</div>
<i class="fi fi fi-ss-box-open"></i>
</div>
</div>
<collectionModal ref="collectionModal"></collectionModal>
<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
<!-- 导出缩略图的蒙层 start-->
@@ -249,7 +255,7 @@
</template>
<script lang="ts">
import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef} from "vue";
import { defineComponent, h, ref, computed, toRefs, inject,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";
@@ -376,9 +382,12 @@ export default defineComponent({
const dataDom = reactive({
collectionModal:null as any,
editDesignType:null as any,
designBtn:null as any,
})
const designData = reactive({
openEditBtnId:-1,
selectEditBtn:null as any,
selectEditBtnIndex:-1,
likeLoading: false, //喜欢防抖
widthList:[
{
@@ -392,6 +401,39 @@ export default defineComponent({
value:400,
}
],
selectDesign:null as any,//当前选择的design
isUnfold:false,
selectLikeDesign:[] as any,
//类型
resultTypeList:[
{
label:'All',
value:'All',
},{
label:'Design',
value:'Design',
},{
label:'Product',
value:'Product',
},
// ,{
// label:'To Product Image',
// value:'ToProductImage',
// },{
// label:'Relight',
// value:'Relight',
// },
{
label:'Pose Transfer',
value:'PoseTransfer',
},
],
resultType:'All',
oldSelectLikeDesign:null as any
})
watch(()=>likeDesignCollectionList.value.length,(val)=>{
if(val>0)uploadLikeDom()
})
provide('exportNav',exportNav)
let isShowOperate = ref(false)
@@ -476,9 +518,11 @@ export default defineComponent({
for(let i = 0;i < elArr.length;i++){
posiitonData.value.likeElList.push({
el: elArr[i],
sort: likeDesignCollectionList.value[i].sort - 1,
sort: designData.selectLikeDesign[i].sort - 1,
// sort: likeDesignCollectionList.value[i].sort - 1,
index: i,
userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
userLikeSortId:designData.selectLikeDesign[i].userLikeSortId || designData.selectLikeDesign[i].id
// userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
});
}
moveItem('like')
@@ -513,8 +557,10 @@ export default defineComponent({
const cancelDeleteDesign = (index:any)=>{
store.commit("cancelDeleteDesignCollectionList",index);
}
const designMousedown = (e:any,Id:number,str:string)=>{
const designMousedown = (e:any,design:any,str:string)=>{
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]
item.el.style.zIndex = 2;
@@ -624,6 +670,7 @@ export default defineComponent({
}
}
const setLikeDislLike = (str:string,value:any)=>{
designData.selectLikeDesign = []
posiitonData.value.likeSelectIndex = 0
nextTick(()=>{
if(str == 'like'){
@@ -688,8 +735,24 @@ export default defineComponent({
const openCollection = (str:string)=>{
dataDom.collectionModal.init(str)
}
const openEditBtn = (id:number)=>{
designData.openEditBtnId = id
const openEditBtn = (design:any,index:number,event:any)=>{
if(designData.selectLikeDesign[index].resultType != 'Design'){
designData.selectDesign = designData.selectLikeDesign.filter((item:any)=>(item.resultType == 'Design' && item.userLikeSortId == designData.selectLikeDesign[index].parentId))[0]
}else{
designData.selectDesign = designData.selectLikeDesign[index]
}
designData.openEditBtnId = design.designItemId||design.id
designData.selectEditBtn = design
designData.selectEditBtnIndex = index
let width = event.target.offsetWidth
let height = event.target.offsetHeight
let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect()
let x = event.clientX - parentRect.x - event.offsetX + width
let y = event.clientY - parentRect.y - event.offsetY + height
dataDom.designBtn.style.left = x+'px'
dataDom.designBtn.style.top = y+'px'
let removeEditBtnId = ()=>{
designData.openEditBtnId = -1
document.removeEventListener('click',removeEditBtnId)
@@ -714,7 +777,6 @@ export default defineComponent({
dataDom.editDesignType.isComparison = true
}
const addGenerateImg = (data:any)=>{
console.log(data)
if(!data.id)return
let obj = {
id:data.id,
@@ -729,6 +791,7 @@ export default defineComponent({
userGroupId:data.userGroupId || data.id,
firstFrameUrl:data.firstFrameUrl,
gifUrl:data.gifUrl,
userLikeSortId:data.userLikeSortId,
}
let list = []
if(data.listType == 'disLike'){
@@ -763,16 +826,18 @@ export default defineComponent({
list[data.isIndex].designItemId = obj.designItemId
list[data.isIndex].sourceUrl = obj.sourceUrl
}
nextTick().then(()=>{
setDesignItemStyle()
setSystemDesigner(100)
})
// nextTick().then(()=>{
// // setDesignItemStyle()
// // setSystemDesigner(100)
// uploadLikeDom()
// })
}
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?.userLikeSortId || design.parentId,
} as any
let params = {} as any
if(type == 'ToProductImage' || type == 'Relight'){
@@ -788,12 +853,14 @@ export default defineComponent({
likeOrDislike:'like',
transformedId:design.id,
projectId:store.state.Workspace.probjects.id,
collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
}
}else{
params = {
likeOrDislike:'dislike',
transformedId:design.id,
projectId:store.state.Workspace.probjects.id,
collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
}
}
}else{
@@ -807,28 +874,48 @@ export default defineComponent({
Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
(rv) => {
if(str == 'like'){
let value:any = {
...design,
sort:likeDesignCollectionList.value.length + 1,
userLikeGroupId:design.id,
}
design.groupDetailId = rv.groupDetailId;
store.commit(
"addLikeDesignCollectionList",
value
);
setLikeDislLike('like',value)
if(index != -1)store.commit("deleteDesignCollectionList", index);
}else{
if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
store.commit("addDesignCollectionList", [design]);
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.sort > design.sort){
item.sort-=1
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
item.childList.push(design)
}
})
}else{
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
item.childList = item.childList.filter((item:any)=>{
return item.id != design.id
})
}
})
setLikeDislLike('disLike',design)
}
nextTick().then(()=>{
uploadLikeDom()
})
//一下代码是生成的design时候也可以toproduct
// if(str == 'like'){
// let value:any = {
// ...design,
// sort:likeDesignCollectionList.value.length + 1,
// userLikeGroupId:design.id,
// }
// design.groupDetailId = rv.groupDetailId;
// store.commit(
// "addLikeDesignCollectionList",
// value
// );
// setLikeDislLike('like',value)
// if(index != -1)store.commit("deleteDesignCollectionList", index);
// }else{
// if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
// store.commit("addDesignCollectionList", [design]);
// likeDesignCollectionList.value.forEach((item:any)=>{
// if(item.sort > design.sort){
// item.sort-=1
// }
// })
// }
designData.likeLoading = false;
}
).catch(res=>{
@@ -898,6 +985,81 @@ export default defineComponent({
const gifPause = (e:any,item:any)=>{
e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
}
const startHover = (e:any,item:any)=>{
}
const endHover = (e:any,item:any)=>{
}
const setUnfold = ()=>{
designData.isUnfold = !designData.isUnfold
if(!designData.isUnfold){
designData.selectLikeDesign = designData.oldSelectLikeDesign || []
}
uploadLikeDom()
}
const uploadLikeDom = ()=>{
if(designData.isUnfold){
// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
designData.selectLikeDesign = []
likeDesignCollectionList.value.sort((a:any,b:any)=>{return a.sort - b.sort})
let childLength = 0
likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
let item = JSON.parse(JSON.stringify(likeItem))
item.oldSort = item.sort
if(item?.childList?.length > 0){
item.childList.forEach((childItem:any,childIndex:number)=>{
childItem.sort = childIndex + item.sort + childLength
designData.selectLikeDesign.push(childItem)
})
childLength = item.childList.length + childLength
}
item.sort = childLength + item.sort
designData.selectLikeDesign.push(item)
})
designData.oldSelectLikeDesign = []
designData.resultType = 'All'
}else{
if(designData.selectLikeDesign.length == 0){
designData.selectLikeDesign = likeDesignCollectionList.value
return
}
const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
parents.map((parent:any) => {
parent.sort = parent.oldSort||parent.sort
return {
...parent,
childList: designData.selectLikeDesign.filter((item:any) =>
item.parentId === parent.userLikeSortId && item.resultType !== 'Design'
)
};
});
designData.selectLikeDesign = parents
}
nextTick(()=>{
setSystemDesigner(0)
})
}
const changeResultType = ()=>{
if(designData.resultType != 'All'){
if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
if(designData.resultType == 'Product'){
designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
}else{
designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => item.resultType === designData.resultType);
}
designData.selectLikeDesign.forEach((item:any,index:number) => {
item.sort = index + 1
})
}else{
designData.selectLikeDesign = designData.oldSelectLikeDesign
designData.selectLikeDesign.forEach((item:any,index:number) => {
item.sort = index + 1
})
}
nextTick(()=>{
setSystemDesigner(0)
})
}
return {
store,
...toRefs(editDesignType),
@@ -952,6 +1114,10 @@ export default defineComponent({
setGenerateAwait,
gifPlay,
gifPause,
startHover,
endHover,
setUnfold,
changeResultType,
};
},
data() {
@@ -1249,6 +1415,7 @@ export default defineComponent({
marketingSketchFiles,
moodboardPosition,
} = this.store.state.UploadFilesModule.allBoardData;
console.log(JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData)))
this.randomNum()
let modelList = [] as any;
let workspace:any = this.store.state.Workspace.probjects
@@ -1427,21 +1594,17 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.designDislike, data)
.then((rv: any) => {
if (rv) {
this.store.commit("addDesignCollectionList", [design]);
this.store.commit(
"deleteLikeDesignCollectionList",
index
);
// this.store.commit("addDesignCollectionList", [design]);
this.likeDesignCollectionList.forEach((item:any)=>{
if(item.sort > design.sort){
item.sort-=1
}
})
this.store.commit(
"deleteLikeDesignCollectionList",
index
);
this.setLikeDislLike('disLike',design)
// if (!this.likeDesignCollectionList.length) {
// this.store.commit("deleteUserGroupId");
// }
}
this.disLikeLoading = false;
})
@@ -1768,6 +1931,7 @@ export default defineComponent({
}
}
}
.designPage_body {
width: 100%;
height: 100%;
@@ -1913,6 +2077,8 @@ export default defineComponent({
.content_img_block{
width: 16rem;
height: 23rem;
position: relative;
}
}
}
@@ -2006,7 +2172,8 @@ export default defineComponent({
align-items: center;
justify-content: center;
position: absolute;
transition: top,left .3s;
transition: top,left .5s;
// transition: top,left .3s;
&:hover .btn{
display: flex;
}
@@ -2020,13 +2187,43 @@ export default defineComponent({
border: 2px solid #E0E0E0;
overflow: hidden;
background: #fff;
.content_img_block_child{
position: absolute;
border-radius: 2rem;
border: 2px solid #00000070;
background: #fff;
display: flex;
left: -43%;
transform: translateX(69%);
top: 0rem;
> .childItem{
> .content_img_flex{
border: 2px solid #00000070;
}
position: relative !important;
>img{
}
}
}
}
&.active{
.icon_like,.icon_delete{
display: block;
}
.content_img_flex {
border: 2px solid #000;
&.Design{
border: 2px solid #000;
}
&.PoseTransfer{
border: 2px solid #f0d9d0;
}
&.ToProductImage{
border: 2px solid #ccece5;
}
&.Relight{
border: 2px solid #ccece5;
}
}
}
.content_img {
@@ -2050,39 +2247,7 @@ export default defineComponent({
align-items: center;
justify-content: center;
}
> .btnOpen{
position: absolute;
width: max-content;
left: 30px;
top: 30px;
transform: translateX(-100%);
background: #e4e4e7;
padding: 12px;
border-radius: 12px;
display: none;
z-index: 99;
&.active{
display: block;
}
> .item{
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 8px;
border-radius: 8px;
cursor: pointer;
&:last-child{
margin: 0;
}
> .text{
font-size: 12px;
margin-right: 10px;
}
&:hover{
background: #efeff1;
}
}
}
.icon_like,.icon_delete {
font-size: 1.4rem;
cursor: pointer;
@@ -2106,7 +2271,7 @@ export default defineComponent({
}
}
}
.page_content_bg {
position: absolute;
width: 100%;
@@ -2130,5 +2295,38 @@ export default defineComponent({
text-align: center;
}
}
.btnOpen{
position: absolute;
width: max-content;
left: 30px;
top: 30px;
transform: translateX(-100%);
background: #e4e4e7;
padding: 12px;
border-radius: 12px;
display: none;
z-index: 999;
&.active{
display: block;
}
> .item{
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 8px;
border-radius: 8px;
cursor: pointer;
&:last-child{
margin: 0;
}
> .text{
font-size: 12px;
margin-right: 10px;
}
&:hover{
background: #efeff1;
}
}
}
}
</style>

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

@@ -328,7 +328,8 @@ export default defineComponent({
flex-direction: column;
align-items: center;
> .top,> .model{
width: 130rem;
width: 100%;
// width: 130rem;
}
> .top{
display: flex;

190
src/component/home/index.vue
View File

@@ -32,7 +32,7 @@ export default defineComponent({
components:{
design,newPorject,chat
},
emits:['setTask','newProject'],
emits:['setTask','setNewProject'],
setup(props,{emit}) {
const store = useStore();
const route = useRoute()
@@ -98,6 +98,11 @@ export default defineComponent({
store.commit("setAllBoardDataChoose",{});
store.commit("clearShowSketchboard",{});
store.commit("clearAllCollection");
store.commit("clearAllCloudList");
let arr = ['moodBoard','printBoard','sketchBoard','colorBoard']
arr.forEach((item:any)=>{
store.commit("clearAllBoardData",item);
})
}
const getWorks = (id:any)=>{
let value:any = {
@@ -214,69 +219,81 @@ export default defineComponent({
// })
// }
const getCollection = (type:string,module:any)=>{
let moduleList = [] as any
if(type == 'design'){
moduleList = ["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','mannequin']
}else{
moduleList = ["printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin',"patternMaking3D",'deReconstruction']
}
if(module)moduleList = [module]
let value:any = {
"id":data.selectObject.id,
"moduleList":moduleList,
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)//设置历史数据
if(rv.mannequin.length>0){
let arr = [] as any
rv.mannequin.forEach((item:any)=>{
arr.push({
url:item.url,
id:item.mannequinRelationId,
type:item.mannequinRelationType,
collectionElementId:item.collectionId
})
})
store.commit('setProbject',{model:arr})
}
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
if(module){
let canvasData = ['canvas','deReconstruction']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];
await getCanvasData(item)
}
}
// await setitemData(allBoardData)
//还有一个canvas
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
allBoardData.forEach((item)=>{
let value = {
type:item,
objectName:data.selectObject.type,
}
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
if(arr.indexOf(item) != -1){
// store.dispatch('setAllBoardData',value)
}else{
store.dispatch('setModularData',value)
}
})
data.isShowMark = false
data.dataLoad = false
return new Promise((resolve, reject) => {
let moduleList = [] as any
if(type == 'design'){
nextTick(()=>{
dataDom.design.openSetData()
})
moduleList = ["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','mannequin']
}else{
moduleList = ["printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin',"patternMaking3D",'deReconstruction','uploadElement']
}
}).catch(()=>{
data.isShowMark = false
data.dataLoad = false
if(module)moduleList = [module]
let value:any = {
"id":data.selectObject.id,
"moduleList":moduleList,
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
if(rv.uploadElement){//toproduct、relight、poseTransfer
let uploadElementData = {
str:'add',
list:rv.uploadElement,
}
store.commit('setUploadElement',uploadElementData)
}
historyChooseData(rv)//设置历史数据
if(rv.mannequin.length>0){
let arr = [] as any
rv.mannequin.forEach((item:any)=>{
arr.push({
url:item.url,
id:item.mannequinRelationId,
type:item.mannequinRelationType,
collectionElementId:item.collectionId
})
})
store.commit('setProbject',{model:arr})
}
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
if(module){
let canvasData = ['canvas','deReconstruction']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];
await getCanvasData(item)
}
}
// await setitemData(allBoardData)
//还有一个canvas
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
allBoardData.forEach((item)=>{
let value = {
type:item,
objectName:data.selectObject.type,
}
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
if(arr.indexOf(item) != -1){
// store.dispatch('setAllBoardData',value)
}else{
store.dispatch('setModularData',value)
}
})
data.isShowMark = false
data.dataLoad = false
if(type == 'design'){
nextTick(()=>{
dataDom.design.openSetData()
})
}
resolve('')
}).catch(()=>{
data.isShowMark = false
data.dataLoad = false
resolve('')
})
})
}
const getCanvasData = (str:any)=>{
return new Promise((resolve, reject) => {
@@ -312,7 +329,7 @@ export default defineComponent({
),
generatePrintFiles: [],
colorBoards: dealViewChooseColor(
dataValue.colorBoard
dataValue.colorBoard
),
sketchboardFiles: dealViewChooseData(
dataValue.sketchBoard,"Sketchboard"
@@ -320,7 +337,7 @@ export default defineComponent({
};
if(dataValue.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", dataValue.moodBoard.moodTemplateId);
store.commit("setAllBoardDataChoose", collectionData);
store.commit("setShowSketchboard", dataValue.sketchBoards);
if(dataValue.sketchBoards)store.commit("setShowSketchboard", dataValue.sketchBoards);
let likeDesignCollectionList:any = []
if(dataValue.design?.userLikeDetails){
dataValue.design?.userLikeDetails.map(
@@ -355,7 +372,8 @@ export default defineComponent({
}
if(dataValue.poseTransfer){
let value = {
list: dataValue.poseTransfer,
list:dataValue.poseTransfer.list,
likedList:dataValue.poseTransfer.likedList,
str:'add',
index:-1,
}
@@ -363,6 +381,7 @@ export default defineComponent({
}
if(dataValue.patternMaking3D){
let patternMaking3DData = {
collectionElementId:dataValue.patternMaking3D.collectionElementId,
threeDSimpleId:dataValue.patternMaking3D.threeDSimpleId,
url:dataValue.patternMaking3D.printMinioUrl,
printMinioUrl:getMinioUrl(dataValue.patternMaking3D.printMinioUrl),
@@ -428,16 +447,53 @@ export default defineComponent({
});
return colorList;
}
let queue = [] as any
let start = false
const chatChange = (value:any)=>{
if(value.type == 'design_control_signal' && dataDom.design){
dataDom.design.designNewCollection()
queue.push(
{
type:'design',
fun:dataDom.design.designNewCollection,
}
)
// dataDom.design.designNewCollection()
}else{
getCollection('design',value.module)
queue.push(
{
type:'promise',
fun:getCollection,
module:value.module,
str:'design'
}
)
// getCollection('design',value.module)
}
if(!start){
startQueue()
}
}
const startQueue = async ()=>{
start = true
if(queue[0].type){
if(queue[0].type == 'promise'){
await queue[0].fun(queue[0].str,queue[0].module)
}else{
await queue[0].fun()
}
queue.splice(0,1)
}
if(queue.length>0){
startQueue()
}else{
start = false
}
}
const newProject = (value:any)=>{
settingGetHistory()
router.push(`home?history=${value.id}`)
emit('setNewProject')
router.push(`home?history=${value.id}&create=true`)
data.chatData = value
}

87
src/component/home/tools/patternMaking3D/index.vue
View File

@@ -37,7 +37,15 @@
</div>
</div>
<div class="list printList" v-show="libraryOrModel == 'print'">
<selectPrint ref="selectPrint" @setPrint="setPrint"></selectPrint>
<!-- <selectPrint ref="selectPrint" @setPrint="setPrint"></selectPrint> -->
<div v-for="item in allBoardData.printboardFiles" class="item" :class="{active:item.id == patternMaking3D.collectionElementId}" @click="setSelectPrint(item)">
<img :src="item.imgUrl" alt="">
</div>
<div class="item add">
<div class="icon" @click="openSetPrint">
<i class="fi fi-br-plus"></i>
</div>
</div>
</div>
</div>
<div class="model" v-show="selectModel.id != -1">
@@ -54,7 +62,7 @@
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
</div>
<threeBox v-if="imgOrThree" @saveProject="saveProject" ref="threeBox"></threeBox>
<threeBox v-if="imgOrThree" @threeSaveProject="saveProject" ref="threeBox"></threeBox>
</div>
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
@@ -74,7 +82,7 @@
<div class="download">
<download ref="download"></download>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<collection ref="collection" :isNext="false"></collection>
</div>
</template>
<script lang="ts">
@@ -87,10 +95,10 @@ import threeBox from "./three.vue"
import download from "./download.vue"
import {getMinioUrl} from '@/tool/util'
import scaleImage from "@/component/HomePage/scaleImage.vue";
import selectPrint from './selectPrint.vue'
import collection from '@/component/home/design/collection.vue'
export default defineComponent({
components:{
threeBox,download,scaleImage,selectPrint
threeBox,download,scaleImage,collection
},
props:{
},
@@ -105,8 +113,10 @@ export default defineComponent({
// return store.state.UserHabit.printType
// }),
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
patternMaking3D:computed(()=>store.state.HomeStoreModule.patternMaking3D),//选择的项目
modelList:[] as any,
sex:'Female',
allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
sexList:computed(()=>store.state.UserHabit.sex.value),
isShowMark:false,
isNoData:false,
@@ -118,13 +128,16 @@ export default defineComponent({
maskShow:false,
libraryOrModel:'model'
})
watch(()=>data.patternMaking3D.threeDSimpleId,(newValue,oldValue)=>{
if(newValue)openSetData()
})
const sexChange = ()=>{
data.modelList = []
data.currentPage = 0,
data.isNoData = false
data.isShowMark = false
}
const createProbject:any = inject('createProbject')
const createProbject:any = inject('createProbject') as any
const setSelectModel = async (item:any)=>{
if(!data.selectObject.id)await createProbject()
data.isShowMark = true
@@ -141,7 +154,7 @@ export default defineComponent({
// dataDom.threeBox.openSetData()
// }
let stateData = {
threeDSimpleId:item.id
threeDSimpleId:item.threeDSimpleId
}
store.commit('setPatternMaking3D',stateData)
saveProject()
@@ -149,10 +162,22 @@ export default defineComponent({
data.isShowMark = false
})
}
const setSelectPrint = async (item:any)=>{
if(!data.selectObject.id)await createProbject()
let patternMaking3DData = {
collectionElementId:item.id,
url:item.imgUrl,
printMinioUrl:getMinioUrl(item.imgUrl),
};
store.commit('setPatternMaking3D',patternMaking3DData)
if(!dataDom.threeBox)dataDom.threeBox.addMaterial({url:item.imgUrl})
saveProject()
}
const dataDom = reactive({
threeBox:null as any,
download:null as any,
scaleImage:null as any,
collection:null as any,
})
const openSetData = ()=>{
nextTick(()=>{
@@ -240,16 +265,18 @@ export default defineComponent({
})
})
},2000)
}
onMounted(()=>{
openSetData()
})
const openSetPrint = ()=>{
dataDom.collection.init('printBoard')
}
return{
...toRefs(dataDom),
...toRefs(data),
sexChange,
setSelectModel,
setSelectPrint,
openSetData,
getModelList,
setImgOrThree,
@@ -257,6 +284,8 @@ export default defineComponent({
setLibraryOrModel,
openScaleImage,
setPrint,
openSetPrint,
saveProject,
}
},
directives:{
@@ -374,6 +403,46 @@ export default defineComponent({
border: 2px solid #000;
}
}
&.printList{
>.item{
width: calc(100% / 4 - 1rem);
margin:.5rem;
aspect-ratio: 1 / 1;
&.active{
opacity: .7;
transform: scale(.9);
// border: 2px solid #000;
// border-radius: 2rem;
// overflow: hidden;
}
> img{
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
&.add{
display: flex;
justify-content: center;
align-items: center;
>.icon{
border: calc(0.3rem*1.2) solid #000;
border-radius: calc(1rem*1.2);
width: 6rem;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
i{
font-weight: 600;
font-size: 2rem;
display: flex;
}
}
}
}
}
}
}
> .model ,> .flatPatterm{

700
src/component/home/tools/patternMaking3D/selectPrint.vue
View File

@@ -1,700 +0,0 @@
<template>
<div class="printboard_upload_modal">
<div class="printboard_left_upload">
<div class="left_upload_header">
<div class="upload_header_item">
<div class="switch_type_list">
<div
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
</div>
<div
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
</div>
<div
class="switch_type_item Guide_1_2_1"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span> </div>
<ul v-show="openMenu">
<li
v-for="item,index in printCatecoryList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
</div>
</div>
<div v-show="openClick == 1" class="printboard_body">
<div class="upload_img_body">
<div class="upload_item">
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_img_block">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
<a-spin :indicator="indicator" tip="Uploading..."/>
</div>
<div class="upload_file_item_content" v-show="file?.status === 'done'" @click="setSetchboardGenerate(file.resData)">
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
<div class="delete_like_file_block" @click.stop="deleteFile(file)">
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
</div>
<!-- <div class="pin_block" v-show="file?.status === 'done'">
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div> -->
</div>
<div class="upload_file_item upload_component" v-show="printboardList.length < 16">
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:before-upload="beforeUpload"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="fileList"
:customRequest="function(){}"
:maxCount="16 - printboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
v-show="printboardList.length < 16"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
</div>
<Material v-show="openClick == 2"
ref="Material"
msg="Printboard"
@setLibrary = setSetchboardGenerate
@confirmSelect="confirmSelect"
:disignTypeList="printCatecoryList"
></Material>
<Generate v-show="openClick == 3" ref="Generate" @setLibrary = setSetchboardGenerate :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
</div>
<!-- 取消请求 -->
<scaleImage ref="scaleImage"></scaleImage>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
</div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
import {useStore} from 'vuex'
import { Https } from "@/tool/https";
import { Modal,message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import axios from 'axios'
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
export default defineComponent({
components:{
Cropper,
Material,
Generate,
scaleImage,
generalMenu,
sketchCategory,
},
emits: ['setPrint'],
setup(){
let store:any =useStore()
let fileList:any = ref([]),//选中的文件id数据
printImgList:any = ref([]), //print的印花图片
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
let openClick: any = ref(1);
let {t} = useI18n()
let isTest = ref()
let userInfo:any = {}
let workspace:any = ref({})
let scene = ref({
name:'Pattern',
value:'Pattern'
})
let openMenu = ref(false)
let printCatecoryList:any = computed(()=>{
return store.state.UserHabit.printType
})
return {
fileList,
printImgList,
moodBoards,
openClick,
t,
isTest,
userInfo,
workspace,
scene,
openMenu,
printCatecoryList,
}
},
computed:{
},
watch:{
},
data(){
return {
swtich_type:'upload',
indicator : h(LoadingOutlined, {
style: {
fontSize: '2.4rem*1.2)',
},
spin: true,
}),
upload:{
isPin:0,
gender:'',
level1Type:'Printboard',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:'',
uploadUrl:'',
store:useStore(),
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
currentFileNum:0, //当前上传的文件数
isUpload:false,
printboardList:computed(()=>{
return useStore().state.UploadFilesModule.printboard
}),
isTextarea:false,
isInputFocus:false,
isUseGenerate:true
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.token = getCookie('token') || ''
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl()
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
methods:{
setSetchboardGenerate(item:any){
this.$emit('setPrint',item)
},
open(num: Number) {
this.openClick = num;
let material:any = this.$refs.Material
if(num == 2){
material.init('Printboard')
}
if(num == 3){
this.scene = this.printCatecoryList[0]
}
},
fileUploadChange(data:any){
let file = data.file
// let res = JSON.parse(data?.xhr?.response);
file.id_ = GO.id++
file.type_ = {
type1:'upload',
type2:'Printboard'
};
file.pin = false;
// file.id = res.data.id?res.data.id:""
let Cropper:any = this.$refs.Cropper
if(this.currentFileNum === 1){
var reader = new FileReader();
reader.onload = (e:any) => {
let data_new;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data_new = e.target.result;
}
Cropper.getOptionImg(data_new)
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file.originFileObj);
this.cropperFileData = file
Cropper.changeShowModal(true)
}else{
this.customRequest(file)
}
},
beforeUpload(file:any,fileList:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(this.t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('PrintboardUpload.jsContent2'));
}
if(isJpgOrPng && isLt2M){
this.currentFileNum = fileList.length
}else{
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
},
deleteFile(item:any){
// this.fileList.splice(item, 1)
// this.store.commit('setPrintboardFile',this.fileList)
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.printboardFiles
let moodboard
this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setPrintboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Printboard",
level2Type: item.categoryValue,
gender:this.workspace.sexEnum.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
customRequest(data:any){
let new_data = {
...this.upload,
file:data.originFileObj
}
let fileUid = data.uid
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
if (rv) {
for(let file of this.fileList){
if(fileUid === file.uid){
file.status = 'done'
file.imgUrl = rv.url
file.pin = false
file.id = rv.id
file.category = this.printCatecoryList[0].name
file.categoryValue = this.printCatecoryList[0].value
file.resData = rv
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.store.commit('setPrintboardFile',fileList)
}
}
).catch((res)=>{
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(fileUid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
});
},
closeCropper(type:any){
if(this.isUpload){
return
}
if(type == 'error'){
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(this.cropperFileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
}
let Cropper:any = this.$refs.Cropper
Cropper.closeCropper()
},
deletUploadFile(){
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(this.cropperFileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
},
handleCropperSuccess(event:any){
let {file, fileData} =event
let new_data = {
...this.upload,
file:file
}
if(this.isUpload){
return
}
this.isUpload = true
const hide = message.loading('loading', 0);
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
for(let file of this.fileList){
if(fileData.uid === file.uid){
file.status = 'done'
file.imgUrl = rv.url
file.id = rv.id
file.resData = rv
file.category = this.printCatecoryList[0].name
file.categoryValue = this.printCatecoryList[0].value
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.isUpload = false
this.closeCropper('success')
this.cropperFileData = {name:'',uid:''}
// this.store.commit('setPrintboardFile',fileList)
hide()
}
).catch(res=>{
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(fileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
this.cropperFileData = {name:'',uid:''}
this.isUpload = false
this.closeCropper('error')
hide()
});
},
recollection(){
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.printCatecoryList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.name
v.categoryValue=item.value
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
this.store.commit("setPrintboardMaterialFiles", setboard.material);
this.store.commit("setPrintboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
this.store.commit('setPrintboardFile',this.fileList)
// this.store.commit('setGeneratePrintFile',this.printImgList)
},
confirmSelect(event:any){
for(let item of event){
let data = {
imgUrl:item.url,
resData:item,
pin:false,
id:item.id,
status:'done',
}
if(this.fileList.length == 15){
message.warning(this.t('PrintboardUpload.jsContent3'))
break
}
this.fileList.push(data)
}
this.store.commit('setPrintboardFile',this.fileList)
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.printboardList,index)
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
}
})
</script>
<style lang="less" scoped>
.printboard_upload_modal{
// padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
height: 100%;
display: flex;
.printboard_left_upload{
display: flex;
flex-direction: column;
width: 100%;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
z-index: 11;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-top: auto;
position: relative;
margin-left: 2rem;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 14rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.printboard_body{
display: flex;
flex-direction: column;
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
&.printboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body{
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
text-align: center;
img{
width: auto;
object-fit: cover;
height: 100%;
max-width: 100%;
}
.upload_file_img_block{
height: 100%;
}
&.upload_component{
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
width: auto;
max-width: 100%;
object-fit: cover;
}
&:hover .delete_like_file_block{
display: block;
}
}
}
}
}
}
</style>

16
src/component/home/tools/patternMaking3D/three.vue
View File

@@ -63,7 +63,7 @@ export default defineComponent({
},
props:{
},
emits:['saveProject'],
emits:['threeSaveProject'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
@@ -265,8 +265,6 @@ export default defineComponent({
texture.anisotropy = 32; // 提高纹理清晰度
data.group?.traverse((child:any) => {
if (child.isMesh) {
// console.log(child.name)
// 5. 创建新材质（根据需求选择材质类型）
const textureWidth = texture.image.width;
const textureHeight = texture.image.height;
const box = new THREE.Box3().setFromObject(child);
@@ -278,9 +276,6 @@ export default defineComponent({
if(patternMaking3D.x)data.repeat.x = patternMaking3D.x
if(patternMaking3D.y)data.repeat.y = patternMaking3D.y
// texture.repeat.set(1, 1); // 纹理重复次数
texture.repeat.set(2 - data.repeat.x, 2 - data.repeat.y); // 纹理重复次数
const newMaterial = new THREE.MeshStandardMaterial({
map: texture, // 基础颜色贴图
roughness: 0.7, // 表面粗糙度 (0-1)
@@ -338,7 +333,6 @@ export default defineComponent({
y:data.repeat.y,
}
store.commit('setPatternMaking3D',value)
})
}
const addModel = async (url:any)=>{
@@ -421,23 +415,23 @@ export default defineComponent({
await setModel(modeUrl)
let patternMaking3D = store.state.HomeStoreModule.patternMaking3D
if(patternMaking3D.url)await addMaterial({url:patternMaking3D.url})
changeRepeat(null)
data.load.state = false
}
const changeRepeat = (e:any)=>{
if(data.isLock)data.repeat.x = e
if(data.isLock)data.repeat.y = e
if(data.isLock && e)data.repeat.x = e
if(data.isLock && e)data.repeat.y = e
clearTimeout(dataTime.updataRepeat)
dataTime.updataRepeat = setTimeout(()=>{
data.repeat.x = data.repeat.x == 6 ? 5.999 : data.repeat.x
data.repeat.y = data.repeat.y == 6 ? 5.999 : data.repeat.y
data.textureLoader.repeat.set(6 - data.repeat.x,6 - data.repeat.y); // 纹理重复次数
let value = {
x:data.repeat.x,
y:data.repeat.y,
}
store.commit('setPatternMaking3D',value)
emit('saveProject')
emit('threeSaveProject')
},1000)
}
const setLock = ()=>{

153
src/component/home/tools/poseTransfer/index.vue
View File

@@ -10,13 +10,23 @@
<div class="text">Choose design to transfer</div>
</div>
<div class="imgBox" v-mousewheel>
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div> -->
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
<a-spin size="large" />
</div>
<img v-show="item.status != 'uploading'" :src="item.imgUrl || item.url" alt="">
<div v-show="item.status != 'uploading'" class="btnBox">
<div :class="{active:item.isChecked}">
<i class="fi fi-br-check"></i>
</div>
<div @click.stop="setUploadDelete(item,index)">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
<div class="upload_item item">
<div class="upload_file_item">
@@ -43,7 +53,6 @@
</a-upload>
</div>
</div>
</div>
</div>
<div class="poses">
@@ -107,7 +116,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { defineComponent,computed,ref,inject,nextTick,watch,createVNode,toRefs, reactive, onMounted} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -144,8 +153,8 @@ export default defineComponent({
projectId:computed(()=>store.state.Workspace.probjects.id)
},
waitList:[],
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
noLikeList:[ ],
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer.likedList),
noLikeList:computed(()=>store.state.HomeStoreModule.poseTransfer.list),
isGenerate:false,//判断是否正在进行generate
remGenerate:false,
removeGenerate:false,
@@ -153,6 +162,16 @@ export default defineComponent({
poseList:[],
selectPose:null as any,
})
watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
data.fileList = store.state.HomeStoreModule.uploadElement
})
watch(()=>store.state.HomeStoreModule.poseTransfer.list.length,(newVal,oldVal)=>{
let list = store.state.HomeStoreModule.poseTransfer.list
data.isGenerate = true
data.remGenerate = true
let taskIdList = list.filter((item:any)=>!item.id)
if(taskIdList.length > 0)setGenerate(taskIdList[0].taskId)
})
let speed = reactive({
speedList:[
{
@@ -180,6 +199,10 @@ export default defineComponent({
scaleVideo:null as any,
})
const selectImgItem = (item:any,)=>{
if(item.isChecked){
item.isChecked = !item.isChecked
return
}
data.selectImg = item
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
@@ -194,18 +217,17 @@ export default defineComponent({
if(data.poseList.length == 0){
getPoseList()
}
setCloudImg()
}
const setCloudImg = ()=>{
let arr = store.state.UploadFilesModule.cloudList
let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
list.forEach((item:any)=>{
item.url = item.firstFrameUrl
data.noLikeList.unshift(item)
})
store.commit('clearCloudList','poseTransfer')
// setCloudImg()
}
// const setCloudImg = ()=>{
// let arr = store.state.UploadFilesModule.cloudList
// let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
// list.forEach((item:any)=>{
// item.url = item.firstFrameUrl
// data.noLikeList.unshift(item)
// })
// store.commit('clearCloudList','poseTransfer')
// }
const gifPlay = (e:any,item:any)=>{
e.target.src = item.gif//使用gif图片
}
@@ -234,9 +256,8 @@ export default defineComponent({
if(data.isGenerate)return
data.isGenerate = true
data.remGenerateTime = setTimeout(()=>{
data.remGenerate = true
},10000)
// data.remGenerateTime = setTimeout(()=>{
// },10000)
let value = {
poseId:data.selectPose,
projectId:store.state.Workspace.probjects.id,
@@ -244,6 +265,7 @@ export default defineComponent({
modelName:speed.speedData.value,
}
Https.axiosPost(Https.httpUrls.poseTransform,value).then((rv)=>{
data.remGenerate = true
data.noLikeList.unshift({taskId:rv})
setGenerate(rv)
}).catch((res:any)=>{
@@ -254,6 +276,7 @@ export default defineComponent({
}
const setGenerate = (dataList:any)=>{
let list:any = dataList
data.waitList = list
let dataNum = dataList.length
let state = true
data.generateTime = setInterval(()=>{
@@ -271,30 +294,24 @@ export default defineComponent({
element.url = element.firstFrameUrl
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
data.noLikeList[index] = element
console.log(list)
list = ''
// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
store.dispatch('getCredits')
}else if(element.status == 'Fail'){
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
data.noLikeList.splice(index,1)
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
data.remGenerate = false
data.isGenerate = false
store.dispatch('getCredits')
}
});
data.waitList = list
if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
message.info(t('Generate.effectPoor'));
}else{
}
// this.store.dispatch('getCredits')
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
data.remGenerate = false
data.isGenerate = false
}
}
}
).catch(res=>{
data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === list);
data.noLikeList.splice(index,1)
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
data.isGenerate = false
@@ -417,7 +434,7 @@ export default defineComponent({
(rv) => {
if(str == 'like'){
let value = {
list:[item],
likedList:[item],
str:'add',
index:-1,
}
@@ -425,7 +442,7 @@ export default defineComponent({
data.noLikeList.splice(index,1)
}else{
let value = {
list:[item],
likedList:[item],
str:'splice',
index:index,
}
@@ -455,6 +472,19 @@ export default defineComponent({
}
const setSpeed = (item:any)=>{
speed.speedData = item
speed.speedState = false
}
const setUploadDelete = (item:any,index:any)=>{
let value = {
id:item.id
}
Https.axiosPost(Https.httpUrls.toProductImageElementDelete,{},{params:value}).then((rv)=>{
let storeData = {
str:'delete',
index,
}
store.commit('setUploadElement',storeData)
})
}
return{
...toRefs(speed),
@@ -476,6 +506,7 @@ export default defineComponent({
selectPose,
openSpeed,
setSpeed,
setUploadDelete,
}
},
directives:{
@@ -512,6 +543,7 @@ export default defineComponent({
flex-direction: column;
align-items: center;
padding-right: 3.8rem;
width: 39rem;
&.active{
width: 0;
overflow: hidden;
@@ -562,14 +594,13 @@ export default defineComponent({
}
}
> .configuratioBox > .configuratio{
width: 31.8rem;
width: 100%;
padding-bottom: 1rem;
> .title{
// font-size: 2.6rem;
}
> .content{
// margin-top: 4rem;
margin-top: 1.8rem;
> .selectImg,> .poses{
display: flex;
flex-direction: column;
@@ -602,6 +633,40 @@ export default defineComponent({
top: 2rem;
right: 2rem;
}
> .btnBox{
position: absolute;
right: 1rem;
top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> div{
width: 2rem;
height: 2rem;
display: flex;
border: 1px solid;
align-items: center;
border-radius: .5rem;
justify-content: center;
cursor: pointer;
margin-bottom: 1rem;
> i{
display: flex;
}
>.fi-br-check{
color: #fff;
display: none;
}
&.active{
background: #000;
> i{
display: flex;
color: #fff;
}
}
}
}
> img{
width: 100%;
object-fit: contain;
@@ -627,8 +692,6 @@ export default defineComponent({
}
}
> .likeBox ,> .noLikeBox{
margin-top: 1.8rem;
flex: 1;
position: relative;
> .element{

617
src/component/home/tools/toProduct/index.vue
View File

@@ -10,56 +10,57 @@
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
</div> -->
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[item?.isChecked?'active':'']">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
<div class="selectImg">
<div class="head">
<div class="text">{{$t('ProductImg.SelectCollection')}}</div>
</div>
<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList[productimgMenu.value]" :key="file">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="imgBox"
v-show="file?.status === 'done'"
>
<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
</div>
</div>
<div class="upload_file_item upload_component">
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
<a-upload
:action="uploadUrl + '/api/history/toProductImageElementUpload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList[productimgMenu.value]"
:multiple="true"
:maxCount="8"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
<div class="imgBox" v-mousewheel>
<!-- <div class="item" :class="[item?.isChecked?'active':'']" v-for="item in selectList[productimgMenu.value]" @click="setGenerate(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div> -->
<div class="item" :class="[item?.isChecked?'active':'']" v-for="item,index in fileList[productimgMenu.value]" @click="setGenerate(item)">
<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
<a-spin size="large" />
</div>
</a-upload>
<img v-show="item.status != 'uploading'" :src="item.imgUrl || item.url" alt="">
<div v-show="item.status != 'uploading'" class="btnBox">
<div :class="{active:item.isChecked}">
<i class="fi fi-br-check"></i>
</div>
<div @click.stop="setUploadDelete(item,index)">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
<!-- <a-checkbox v-model:checked="item.isChecked"></a-checkbox> -->
</div>
<div class="upload_item item">
<div class="upload_file_item">
<a-upload
:action="uploadUrl + '/api/history/toProductImageElementUpload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList[productimgMenu.value]"
:multiple="true"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
@@ -74,15 +75,21 @@
<input type="number" readonly v-model="similarity">
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
<span>Selection Function</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
<div v-show="productimgMenu.value == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
@@ -114,8 +121,12 @@
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="generage_btn_box ">
<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
<div v-show="!isProductimg" class="generage_btn started_btn">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg"></i>
<div v-show="productimgMenu.value != 'Relight'" 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" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
@@ -135,32 +146,8 @@
{{ $t('ProductImg.SelectedDesign') }}
</span>
</div>
<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
<!-- <div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
</div>
<div class="productImg_right_item_imgBox" v-else>
<img :src="item.url" alt="">
<div class="productImg_right_item_iconRight">
<div class="productImg_right_item_like" @click.stop="likeFile(item,'like',index)">
<i class="fi fi-rr-heart"></i>
</div>
</div>
<div class="productImg_right_item_iconLeft" >
<div class="productImg_right_item_scale" @click.stop="setScaleImage(generateList,index,true)">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div v-show="item.resultType != 'Relight'" class="productImg_right_item_men" @click.stop="setMenuShow(item)">
<i class="fi fi-rr-circle-ellipsis"></i>
<ul v-show="item.menuShow">
<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
</ul>
</div>
</div>
</div> -->
<div class="content">
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
<generalDrag ref="generalDragLeft" :type="productimgMenu.value" @setBtn="selectSetBtn" :isDelete="false" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
</div>
<!-- </div> -->
@@ -180,30 +167,8 @@
</span>
</div>
<div class="content">
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
<generalDrag ref="generalDragRight" :type="productimgMenu.value" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
</div>
<!-- <div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div> -->
<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
<img :src="item.url" alt="">
<div class="productImg_right_item_iconRight">
<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
<i class="fi fi-sr-heart"></i>
</div>
</div>
<div class="productImg_right_item_iconLeft">
<div class="productImg_right_item_scale" @click.stop="setScaleImage(likeList[productimgMenu.value],index,false)">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu" :title="$t('ProductImg.moreTitle')" @click.stop="setMenuShow(item)">
<i class="fi fi-rr-circle-ellipsis"></i>
<ul v-show="item.menuShow">
<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
</ul>
</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -223,7 +188,7 @@
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, inject} from "vue";
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, inject, onMounted} from "vue";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
@@ -238,7 +203,7 @@ import generalMenu from "@/component/HomePage/generalMenu.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
import generalDrag from '@/component/modules/generalDrag.vue';
import { List } from "echarts";
import { useRouter,useRoute } from 'vue-router'
export default defineComponent({
components:{
@@ -252,10 +217,13 @@ export default defineComponent({
return store.state.UserHabit.userDetail
})
const {t} = useI18n()
const upload:any = ref({})
const upload:any = ref({
projectId:computed(()=>store.state.Workspace.probjects.id)
})
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
const route = useRoute()
const createProbject:any = inject('createProbject')
let productImgData:any = reactive({
isShowMark:false,
@@ -279,7 +247,43 @@ export default defineComponent({
button:{
left:false,
right:false,
}
},
})
let speed = reactive({
speedList:[
{
title:'Generate with high quality',
label:'High',
relightLabel:'Relight',
value:'',
},{
title:'',
label:'FLUX',
relightLabel:'Edit',
value:'flux',
},
],
speedState:false,
speedData:{
title:'Generate with high quality',
relightLabel:'Relight',
label:'High',
value:'',
},
})
//watch立即执行一次
// watch(()=>productImgData.selectObject.id,(newVal,oldVal)=>{
// createProbject.generateList = []
// },{immediate: true })
watch(() => route.query.id,
(query:any, oldQuery:any) => {
if(oldQuery && query != oldQuery){
productImgData.generateList = []
}
},
);
watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
})
const productImgDom = reactive({
generalDragLeft:null as any,
@@ -326,13 +330,10 @@ export default defineComponent({
}else if(props.productimgMenu.value == 'Relight'){
selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
}
upload.value = {
projectId:productImgData.selectObject.id
}
userlikeGroupId = selectDesignList.value.userlikeGroupId
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
productImgDom.generalDragLeft.setItemPosition()
setCloudImg()
}
const setCloudImg = ()=>{
@@ -430,6 +431,18 @@ export default defineComponent({
let setGenerate = (item:any)=>{
item.isChecked = !item.isChecked
}
const setUploadDelete = (item:any,index:any)=>{
let value = {
id:item.id
}
Https.axiosPost(Https.httpUrls.toProductImageElementDelete,{},{params:value}).then((rv)=>{
let storeData = {
str:'delete',
index,
}
store.commit('setUploadElement',storeData)
})
}
let likeFile = (item:any,str:any,index:any) =>{
let url
let data = {
@@ -492,7 +505,7 @@ export default defineComponent({
productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
if(item.isChecked){
obj.elementId = item.id
obj.elementType = item.type
obj.elementType = item.type || 'ProductElement'
selectArr.push(JSON.parse(JSON.stringify(obj)))
}
})
@@ -521,14 +534,15 @@ export default defineComponent({
toProductImageVOList:selectArr,
// userLikeGroupId:upload.value.userlikeGroupId,
projectId:productImgData.selectObject.id,
modelName:speed.speedData.value,
direction:RelightDirection.value,
brightenValue:productImgData.brightenValue,
imageStrength:(100 - imageStrength)/100,
}
productImgData.isProductimg = true
remPrductimgTime = setTimeout(()=>{
productImgData.remProductimg = true
},10000)
// remPrductimgTime = setTimeout(()=>{
// productImgData.remProductimg = true
// },10000)
let url = Https.httpUrls.toProduct
if(props.productimgMenu.value == 'Relight'){
url = Https.httpUrls.relight
@@ -536,12 +550,12 @@ export default defineComponent({
productImgData.isShowMark = true
Https.axiosPost(url, data).then(
(rv) => {
productImgData.remProductimg = true
productImgData.isShowMark = false
let arr:any = []
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
productImgData.generateList.unshift(...rv)
setPrductimg(arr)
}
@@ -699,6 +713,8 @@ export default defineComponent({
const setLikeZoom = (item:any,str:string,index:number,list:List) =>{
if(str == 'zoom'){
setScaleImage(list,index,true)
}else if(str == 'copy'){
setCopy(item)
}else{
likeFile(item,str,index)
}
@@ -707,13 +723,12 @@ export default defineComponent({
productImgData.likeList[props.productimgMenu.value].forEach((item:any,index:number)=>{
if(item.id == id){
let selectStr = ''
str == 'zoom'?selectStr = 'zoom':selectStr ='noLike'
setLikeZoom(item,selectStr,index,productImgData.likeList[props.productimgMenu.value])
str == 'like'?(str = 'noLike'):str
setLikeZoom(item,str,index,productImgData.likeList[props.productimgMenu.value])
}
})
}
const generateSetBtn = (id:any,str:string)=>{
console.log(str)
if(str == 'delete'){
productImgData.generateList = productImgData.generateList.filter((v:any) => v.id != id);
}else{
@@ -721,12 +736,21 @@ export default defineComponent({
if(item.id == id){
let selectStr = ''
str == 'zoom'?selectStr = 'zoom':selectStr ='like'
setLikeZoom(item,selectStr,index,productImgData.generateList)
setLikeZoom(item,str,index,productImgData.generateList)
}
})
}
}
const setCopy = (item:any)=>{
let value = {
id:item.id
}
Https.axiosPost(Https.httpUrls.convertRelightElement,{},{params:value}).then((rv)=>{
if(!productImgData.fileList[props.productimgMenu.value]?.length)productImgData.fileList[props.productimgMenu.value] = []
productImgData.fileList[props.productimgMenu.value].unshift(rv)
})
}
const setItemPosition = ()=>{
productImgDom.generalDragLeft.setItemPosition()
productImgDom.generalDragRight.setItemPosition()
@@ -749,94 +773,109 @@ export default defineComponent({
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
const openSpeed = ()=>{
speed.speedState = !speed.speedState
if(speed.speedState){
document.addEventListener('click',openSpeed)
}else{
document.removeEventListener('click',openSpeed)
}
}
const setSpeed = (item:any)=>{
speed.speedData = item
speed.speedState = false
}
return {
upload,
driver__,
openSetData,
...toRefs(productImgData),
...toRefs(productImgDom),
...toRefs(speed),
productimgMenuList,
RelightDirectionList,
RelightDirection,
RelightDirectionList,
RelightDirection,
selectList,
setproduct,
fileUploadChange,
beforeUpload,
deleteFile,
setGenerate,
likeFile,
getPrductimg,
removeProductimg,
scaleImage,
setScaleImage,
setMenu,
setMenuShow,
setSimilarity,
setTask,
selectSetBtn,
generateSetBtn,
setItemPosition,
setSize,
ifMaximumLength,
};
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
selectList,
setproduct,
fileUploadChange,
beforeUpload,
deleteFile,
setGenerate,
setUploadDelete,
likeFile,
getPrductimg,
removeProductimg,
scaleImage,
setScaleImage,
setMenu,
setMenuShow,
setSimilarity,
setTask,
selectSetBtn,
generateSetBtn,
setItemPosition,
setSize,
ifMaximumLength,
openSpeed,
setSpeed,
};
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
spin: true,
}),
// moodTemplateId: "", //模板id
token: "",
uploadUrl: "",
};
},
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.productImg = false
// // this.productImgList = []
// // this.productImgIndex = 0
// },
// download(){
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.productImgIndex = index
// // console.log(this.productImgIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
// moodTemplateId: "", //模板id
token: "",
uploadUrl: "",
};
},
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.productImg = false
// // this.productImgList = []
// // this.productImgIndex = 0
// },
// download(){
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.productImgIndex = index
// // console.log(this.productImgIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
@@ -890,59 +929,145 @@ methods: {
.productImg_content_item_intro{
font-size: 1.4rem;
}
.productImg_content_item_imgBox{
display: flex;
overflow-x: auto;
width: auto;
margin-bottom: 2rem;
align-items: center;
flex-wrap: nowrap;
.content_item_imgBox_itemImg{
display: flex;
margin-right: 1rem;
position: relative;
height: 36rem;
max-height: 100%;
position: relative;
img{
height: 100%;
width: 100%;
cursor: pointer;
object-fit: contain;
opacity: .5;
&.active{
opacity: 1;
}
}
.ant-checkbox-wrapper{
position: absolute;
right: 0;
top: 0;
}
&.content_item_imgBox_itemImg:hover{
.content_item_imgBox_itemImg_delete{
display: block;
cursor: pointer;
}
}
.content_item_imgBox_itemImg_delete{
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
}
// .productImg_content_item_imgBox{
// display: flex;
// overflow-x: auto;
// width: auto;
// margin-bottom: 2rem;
// align-items: center;
// flex-wrap: nowrap;
// .content_item_imgBox_itemImg{
// display: flex;
// margin-right: 1rem;
// position: relative;
// height: 36rem;
// max-height: 100%;
// position: relative;
// img{
// height: 100%;
// width: 100%;
// cursor: pointer;
// object-fit: contain;
// opacity: .5;
// &.active{
// opacity: 1;
// }
// }
// .ant-checkbox-wrapper{
// position: absolute;
// right: 0;
// top: 0;
// }
// &.content_item_imgBox_itemImg:hover{
// .content_item_imgBox_itemImg_delete{
// display: block;
// cursor: pointer;
// }
// }
// .content_item_imgBox_itemImg_delete{
// display: none;
// width: 100%;
// height: 100%;
// background: rgba(0,0,0,.2);
// position: absolute;
// i{
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translate(-50%,-50%);
// color: #fff;
// }
// }
// }
// .content_item_imgBox_itemImg:last-child{
// margin-right: 0;
// }
// }
.selectImg{
display: flex;
flex-direction: column;
> .imgBox{
flex: 1;
max-height: 45rem;
margin-top: 2rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
overflow: hidden;
overflow-x: auto;
// &.active
> .item{
margin-right: 1rem;
width: calc(100% / 2 - .5rem);
cursor: pointer;
overflow: hidden;
display: flex;
justify-content: center;
flex-shrink: 0;
height: 25rem;
position: relative;
// &.active{
// border: 2px solid;
// }
:deep(.ant-checkbox-wrapper){
position: absolute;
top: 2rem;
right: 2rem;
}
> .btnBox{
position: absolute;
right: 1rem;
top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> div{
width: 2rem;
height: 2rem;
display: flex;
border: 1px solid;
align-items: center;
border-radius: .5rem;
justify-content: center;
cursor: pointer;
margin-bottom: 1rem;
> i{
display: flex;
}
>.fi-br-check{
color: #fff;
display: none;
}
&.active{
background: #000;
> i{
display: flex;
color: #fff;
}
}
}
}
> img{
width: 100%;
object-fit: contain;
}
}
> .upload_item{
border: none;
}
}
.content_item_imgBox_itemImg:last-child{
margin-right: 0;
> .head{
color: #000;
font-weight: 600;
> .text{
display: inline-block;
font-size: 1.6rem;
}
}
}
.productImg_left,.productImg_right{