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

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{