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

调整部分bug

Browse Source
This commit is contained in:
X1627315083
2025-05-28 10:28:07 +08:00
parent 608a4dec89
commit 9fc2bcaedf
78 changed files with 2034 additions and 10193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Account/frontPage/bindPage.vue
View File

@@ -139,7 +139,7 @@ export default defineComponent({
}
onMounted(async ()=>{
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
let GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
if(!window.isAddGmail){
if(!existingScript){

32
src/component/Administrator/organization/add.vue
View File

@@ -82,11 +82,9 @@ export default defineComponent({
operationsModal:false,
operationsEdit:false,
loadingShow:false,
title:''
})
let operationsData = reactive({
title:'',
name:'',
type:'Enterprise',
systemUser:'Enterprise',
})
let state = ref([
{
@@ -104,38 +102,37 @@ export default defineComponent({
operations.title = funStr
if(funStr == 'Add') operations.operationsEdit = false
if(funStr == 'Edit'){
operationsData.name=data.name
operationsData.type=data.type
operations.systemUser=data.type
operations.name=data.name
}
}
let setAddData = ()=>{
return {
"name": operationsData.name,
"type": operationsData.type,
"type": operations.systemUser,
name:operations.name,
}
}
let setEditData = ()=>{
return {
"name": operationsData.country,
"type": operationsData.credits,
"type": operations.systemUser,
name:operations.name,
}
}
let cancelDsign = ()=>{
operationsData.name=''
operationsData.type='Enterprise'
operations.value='Enterprise'
operations.operationsModal = false
operations.operationsEdit = false
}
let setOk = ()=>{
let data
if(operations.title == 'Add'){
data = setAddData()
if(!data.name)return message.warning('Please check the input box marked with *')
Https.axiosPost(Https.httpUrls.addOrganization, data).then(
Https.axiosGet(Https.httpUrls.addOrganization, {params:data}).then(
(rv) => {
if (rv) {
cancelDsign()
emit('searchHistoryList')
}
cancelDsign()
emit('searchHistoryList')
}
);
}
@@ -143,7 +140,6 @@ export default defineComponent({
}
return {
...toRefs(operations),
...toRefs(operationsData),
state,
cancelDsign,
init,

32
src/component/Administrator/organization/organization.vue
View File

@@ -104,39 +104,37 @@ export default defineComponent({
const columns: any = computed(() => {
return [
{
title: "City",
title: "Id",
align: "center",
dataIndex: "city",
key: "city",
dataIndex: "id",
key: "id",
width:150,
ellipsis:true
},
{
title: "Country",
title: "Name",
align: "center",
dataIndex: "country",
key: "country",
dataIndex: "name",
key: "name",
width:150,
ellipsis:true
},
{
{
title: "Create Time",
align: "center",
dataIndex: "createTime",
key: "createTime",
width:150,
ellipsis:true,
ellipsis:true
},
{
title: "Status",
title: "Type",
align: "center",
dataIndex: "status",
key: "status",
fixed: "right",
dataIndex: "type",
key: "type",
width:150,
Operations: true,
ellipsis:true,
}
},
];
});
//改变页码
@@ -158,9 +156,9 @@ export default defineComponent({
(rv: any) => {
if (rv) {
console.log(rv)
// this.dataList = rv
filter.dataList = rv.content;
filterData.total = rv.total;
filter.dataList = rv
// filter.dataList = rv.content;
// filterData.total = rv.total;
filter.tableLoading = false;
// this.workspaceItem.position = this.singleTypeList[0].label

8
src/component/DetailCopy/designDetail.vue
View File

@@ -39,6 +39,10 @@
<img src="@/assets/images/icon/details_elements.png" alt="">
<div class="detailText">Elements</div>
</div>
<div class="nav_item" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
<img src="@/assets/images/icon/details_model.svg" alt="">
<div class="detailText">Model</div>
</div>
</div>
</div>
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
@@ -293,6 +297,7 @@ export default defineComponent({
let workspace = store.state.Workspace.probjects
if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
let clothes:any = await setClothes([detailData.selectDetail])
console.log(detailData.designDetail)
let data = {
designItemId:detailData.designDetail.designItemId,
designSingleItemDTOList:clothes,
@@ -537,12 +542,13 @@ export default defineComponent({
> .gallery_btn{
width: 6rem;
height: 6rem;
margin-top: 2rem;
border-radius: 50%;
}
}
> .nav_list{
margin-top: 2.7rem;
height: 38rem;
// height: 38rem;
width: 9rem;
background: #f4f4f4;
border-radius: 1.4rem;

4
src/component/DetailCopy/detailLeft/index.vue
View File

@@ -4,6 +4,7 @@
<print v-show="currentDetailType == 'print'"></print>
<color v-if="currentDetailType == 'color'"></color>
<element v-show="currentDetailType == 'element'"></element>
<models v-show="currentDetailType == 'models'"></models>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>
</template>
@@ -18,11 +19,12 @@ import sketch from './sketch.vue'
import print from './print.vue'
import color from './colorBox/index.vue'
import element from './element.vue'
import models from './models.vue'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
components:{
sketch,print,color,addDetails,element
sketch,print,color,addDetails,element,models
},
setup(props,{emit}) {
const store = useStore();

171
src/component/DetailCopy/detailLeft/models.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<div class="sketch">
<div class="detailText">Current Model</div>
<div class="select_sketch">
<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
<img :src="frontBack.body.path || selectDetail.path" alt="">
</div>
<selectList @selectImgItem="selectImgItem" :isUpload="false" level1Type="Models" type="models" :catecoryList="sketchCatecoryList"></selectList>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import selectList from './module/selectList.vue'
export default defineComponent({
components:{
selectList,
},
emit:['addDetail'],
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle:'current',
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
sketchCatecoryList:computed(()=>{
return store.state.UserHabit.sex.value
}),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
})
const getDetailListDom = reactive({
libraryList:null as any,
})
const openCurrent = ()=>{
detailData.selectTitle = 'current'
}
const openUpload = ()=>{
detailData.selectTitle = 'upload'
}
const openLibrary = ()=>{
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = (data:any)=>{
data.url = data.presignedUrl
let value = {
data,
}
store.commit('DesignDetailCopy/setNewDetail',value)
}
const openAddDetail = ()=>{
emit('addDetail')
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
...toRefs(getDetailListDom),
openCurrent,
openUpload,
openLibrary,
selectImgItem,
openAddDetail,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.sketch{
// width: 34rem;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
> .detailText{
margin-bottom: 1rem;
}
> .select_sketch{
width: 100%;
height: 23.5rem;
padding: 1rem 0;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
> i{
position: absolute;
left: auto;
right: 1rem;
top: 2rem;
font-size: 2rem;
cursor: pointer;
}
> div{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
> i{
font-size: 10rem;
}
}
}
> .switch_type_list{
display: flex;
margin-bottom: 2.5rem;
> .switch_type_item:last-child{
margin-right: 0;
}
> .switch_type_item{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .select_swtich {
color: #000;
font-weight: 600;
}
> .select_swtich::before {
width: 100%;
}
}
> .sketch_content_list{
flex: 1;
overflow: hidden;
> .content_item{
height: 100%;
margin-top: 1rem;
}
}
}
</style>

132
src/component/DetailCopy/detailLeft/module/libraryList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="libraryList">
<div class="generalModel_state" v-if="type != 'element'">
<div class="generalModel_state_item" style="width: 40%;">
<div class="generalModel_state_item" v-if="level1Type != 'Models'" style="width: 40%;">
<a-select
v-model:value="designType"
:options="designTypeList"
@@ -18,7 +18,76 @@
></template>
</a-select>
</div>
<div class="generalModel_state_item" style="width: 35%;">
<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="margin-bottom: 1rem;" :style="{'width':mannequinData.system == 'system'?'48%':'100%'}">
<a-select
v-model:value="mannequinData.system"
:options="systemList"
@change="handleChange"
style="width:100%"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item" v-if="level1Type == 'Models'" v-show="mannequinData.system == 'system'" style="width: 48%; margin-bottom: 1rem;">
<!-- {{ mannequinStyle }} -->
<a-select
v-model:value="mannequinData.style"
:options="mannequinStyle"
@change="handleChange"
style="width:100%"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="width: 39%;">
<a-select
v-model:value="mannequinData.ageGroup"
:options="ageGroupList"
@change="handleChange"
style="width:100%"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="width: 39%;">
<a-select
v-model:value="mannequinData.sex"
:options="sexList"
@change="handleChange"
style="width:100%"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item" style="width: 35%;" v-if="level1Type != 'Models'">
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
</div>
<div class="generalModel_state_item" style="width: auto;">
@@ -29,8 +98,8 @@
<div class="libraryList_box">
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
<img v-lazy="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
<sketchCategory v-if="level1Type != 'Models'" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
</div>
</div>
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
@@ -84,6 +153,19 @@ export default defineComponent({
designType:'',
searchPictureName:'',
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
mannequinData:{
sex:'Female',
style:'',
system:'system',
ageGroup:'Adult',
systemList:[],
libraryList:[],
},
systemList:[{name:'System',value:'system',},{name:'Library',value:'library',}],//系统
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//风格列表
sexList:computed(()=>store.state.UserHabit.sex.value),//风格列表
ageGroupList:computed(()=>store.state.UserHabit.ageGroup),//风格列表
})
const getDetailListData = reactive({
total:0,
@@ -126,7 +208,44 @@ export default defineComponent({
// store.commit('DesignDetailCopy/setNewDetail',data)
}
const getLibraryList = ()=>{
detailData.isShowLoading = true
if(props.type == 'models'){
getModelList()
}else{
getList()
}
}
const getModelList = ()=>{
detailData.isShowLoading = true
let value = {
sex:detailData.mannequinData.sex,
style:detailData.mannequinData?.style,
ageGroup:store.state.Workspace.probjects.ageGroup,
}
Https.axiosGet(Https.httpUrls.getMannequins,{params:value}).then((rv: any) => {
if (rv) {
rv.forEach((item:any) => {
if(item.type == 'System'){
detailData.mannequinData.systemList = item.modelList
}else{
detailData.mannequinData.libraryList = item.modelList
}
});
setMannequinList()
}
detailData.isShowLoading = false
}).catch((res)=>{
detailData.isShowLoading = false
});
}
const setMannequinList = ()=>{
if(detailData.mannequinData.system == 'system'){
detailData.libraryList = detailData.mannequinData.systemList
}else{
detailData.libraryList = detailData.mannequinData.libraryList
}
}
const getList = ()=>{
detailData.isShowLoading = true
let level2Type = ''
let workspace = store.state.Workspace.probjects
// let type = store.state.DesignDetailCopy.currentDetailType
@@ -159,14 +278,13 @@ export default defineComponent({
).catch((res)=>{
detailData.isShowLoading = false
});
}
}
const handleChange = ()=>{
getDetailListData.currentPage = 1
detailData.libraryList = []
getLibraryList()
}
onMounted(()=>{
// getLibraryList()
})
return{
...toRefs(detailData),

6
src/component/DetailCopy/detailLeft/module/selectList.vue
View File

@@ -9,6 +9,7 @@
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
</div>
<div
v-if="isUpload"
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
@@ -85,6 +86,11 @@ export default defineComponent({
default:'' as any,
required:true
},
isUpload:{
type:Boolean,
default:true,
required:false
}
},
emits:['selectImgItem'],
setup(props,{emit}) {

4
src/component/DetailCopy/detailRight/index.vue
View File

@@ -9,6 +9,7 @@
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
</div>
</template>
@@ -20,9 +21,10 @@ import sketchType from './sketchType.vue'
import printType from './printType.vue'
import editPrintElement from './editPrintElement.vue'
import elementType from './elementType.vue'
import modelsType from './modelsType.vue'
export default defineComponent({
components:{
sketchType,printType,elementType,editPrintElement
sketchType,printType,elementType,editPrintElement,modelsType
},
setup(props,{emit}) {
const store = useStore();

60
src/component/DetailCopy/detailRight/modelsType.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
<div class="detailText">New Model</div>
<div class="sketchContent">
<img :src="selectDetail.newDetail?.[currentDetailType].url" alt="">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
})
const getDetailListData = reactive({
})
const getDetailListDom = reactive({
})
return{
...toRefs(detailData),
...toRefs(getDetailListData),
...toRefs(getDetailListDom),
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.sketchType{
margin: auto 0;
width: 100%;
> .detailText{
margin-bottom: 1rem;
}
> .sketchContent{
> img{
width: 100%;
object-fit: contain;
max-height: 60rem;
}
}
}
</style>

8
src/component/DetailCopy/model/index.vue
View File

@@ -164,18 +164,20 @@ export default defineComponent({
border-radius: 1rem;
padding: .7rem ;
flex-shrink: 0;
flex: 1;
overflow: hidden;
max-height: 4rem;
// max-height: 4rem;
> i{
font-size: 2rem;
cursor: pointer;
padding: 1.5rem;
// padding: 1.5rem;
display: flex;
align-items: center;
border-radius: .6rem;
overflow: hidden;
transition: all .3s;
width: 4rem;
height: 4rem;
justify-content: center;
}
> i:hover{
background: #000000;

35
src/component/HomePage/NewCollectionReview.vue
View File

@@ -17,7 +17,7 @@
</div>
</div>
<div class="img_block_item" v-else>
<div class="title" v-if="allBoardData?.moodboardFiles?.length>0">
<div class="title">
<div>Moodboard</div>
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
</div>
@@ -28,7 +28,7 @@
</div>
</div>
<div class="img_block_item" v-if="allBoardData?.printboardFiles?.length>0 || allBoardData?.generatePrintFiles?.length>0">
<div class="img_block_item">
<div class="title">
<div>Printboard</div>
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
@@ -45,7 +45,7 @@
</div>
</div>
<div class="img_block_item" v-if="allBoardData?.colorBoards?.length>0">
<div class="img_block_item">
<div class="title">
<div>Colorboard</div>
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
@@ -59,6 +59,17 @@
</div>
</div>
</div>
<div class="img_block_item mannquin">
<div class="title">
<div>Mannequin</div>
<i class="fi fi-rr-edit" @click="openCollection('mannequin')"></i>
</div>
<div class="mannquin_img_item" v-for="(model) in probjects?.model" :key="model">
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="model?.url">
</div>
</div>
</div>
<!--
<div class="img_block_item img_block_item_sketch">
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
@@ -68,7 +79,7 @@
</div>
</div> -->
<div class="img_block_item img_block_item_sketch">
<div class="title" v-if="allBoardData?.sketch">
<div class="title" style="width: 100%;">
<div>Sketchboard</div>
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
</div>
@@ -103,12 +114,15 @@ export default defineComponent({
return store.state.UploadFilesModule.showSketchboard})
let allBoardData:any = computed(()=>{
return store.state.UploadFilesModule.allBoardData})
let probjects:any = computed(()=>{
return store.state.Workspace.probjects})
const openCollection = (str:any)=>{
emit('openCollection',str)
}
return {
store,
allBoardData,
probjects,
sketch,
sketchList,
openCollection,
@@ -269,6 +283,9 @@ export default defineComponent({
}
}
}
&.mannquin{
}
.sketch_img_item{
display: inline-block;
@@ -282,6 +299,12 @@ export default defineComponent({
height: 6.8rem;
display: inline-block;
vertical-align: top;
}
.mannquin_img_item{
width: 6.8rem;
height: 15rem;
display: inline-block;
vertical-align: top;
}
.color_item{
display: inline-block;
@@ -291,7 +314,7 @@ export default defineComponent({
margin-right: 4%;
margin-bottom: 0.5rem;
width: 21%;
&:nth-child(4n){
&:nth-child(5n){
margin-right: 0;
}
}
@@ -346,7 +369,7 @@ export default defineComponent({
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
>div{
> .lager_img_item{
width: 30%;
margin-left: 2rem;
height: auto;

341
src/component/HomePage/index/index.vue
View File

@@ -1,341 +0,0 @@
<template>
<div class="start">
<div class="createProject" v-if="!selectObject?.type">
<div v-if="state == 1" class="createProjectBtn">
<div @click="createProject" class="gallery_btn gallery_btn_radius">New Project</div>
<div @click="getHistoryProject" class="gallery_btn white gallery_btn_radius">Resume Project</div>
</div>
<div v-else-if="state == 2" class="selectProjectBtn">
<div style="width: 100%; margin: 2rem; display:flex;align-items: center;">
<i @click="()=>state = 1" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>Please choose your workflow</div>
<div class="porjectBox">
<div class="selectProjectBtn_title" v-for="item in opjectList" :key="item.value" @click="selectProject(item)">{{item.title}}</div>
</div>
</div>
</div>
<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType" :workflowTitle="opjectList.filter((item)=>item.value == selectObject.type)[0].title"></workflow>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<affiche ref="affiche"></affiche>
<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
You can use these features only after becoming a regular user~
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,onMounted,nextTick,onBeforeUnmount,toRefs, reactive,watch} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import {useRoute} from 'vue-router'
import { useI18n } from 'vue-i18n'
import workflow from './workflow/index.vue'
// import workspace from './model/workspace.vue'
import { Https } from "@/tool/https";
import router from '@/router';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import {projectList} from '@/tool/listData'
import affiche from "@/component/HomePage/affiche.vue";
export default defineComponent({
components:{
workflow,affiche
},
setup(props,{emit}) {
const store = useStore();
const route = useRoute()
const {t} = useI18n()
const data = reactive({
state:1,//状态 1:创建项目 2:选择项目
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
userDetail:computed(()=>{
return store.state.UserHabit.userDetail
}),
opjectList:[
{
title:'Series Design',
value:'seriesDesign',
httpValue:'SERIES_DESIGN',
},{
title:'Single Product Design',
value:'singleProductDesign',
httpValue:'SINGLE_DESIGN',
},{
title:'Sketch Design',
value:'sketchDesign',
httpValue:'SKETCH_COLLAGE_PROCESS',
},{
title:'Print Design',
value:'printDesign',
httpValue:'PRINT_DESIGN',
},{
title:'Product Design',
value:'productDrawingDesign',
httpValue:'FINISHED_PRODUCT',
},{
title:'3D Pattern Making',
value:'printingDesign3D',
httpValue:'THREE_D_PLATE_MAKING',
},
],//项目列表
isShowMark:false,
})
const dataDom = reactive({
affiche:null as any,
workflow:null as any
})
const createProject =()=>{
data.state = 2
createData()
}
const createData = ()=>{
store.commit("clearAllData");
store.commit("clearAllCollection");
store.commit("setAllBoardDataChoose",{});
store.commit("clearShowSketchboard",{});
store.commit("clearAllCollection");
}
const selectProject =(item:any)=>{
let data = {
type:item.value,
httpType:item.httpValue,//项目类型
}
store.commit('setProbject',data)
let list:any = projectList
store.commit('setProjectList',list[item.value])
}
const getHistoryProject = ()=>{
router.push('/home/history')
}
const getHistory = ()=>{
let value = {
id:Number(route.params.id),
}
if(!route.params.id)return
createData()
Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
setProjectData(rv)
})
}
// watch(()=>data.opjectList.type,(newVal,oldVal)=>{
// console.log(newVal,oldVal);
// })
const getWorks = ()=>{
let data:any = {
"accountId": 0,
"collectionId": 0,
"coverId": 0,
"createDate": "",
id:Number(route.params.id),
"isDeleted": 0,
"portfolioDes": "",
"portfolioName": "",
"portfolioType": "",
"status": 0,
"updateDate": "",
"userLikeGroupId":''
}
Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
(rv: any) => {
setProjectData(rv)
// this.setPortfolio(rv.portfolioDTO)
// this.store.commit("setUserGroupId", rv.userGroupId);
// this.dealHistoryChooseData(rv, type);
}
).catch((res)=>{
});
}
const setProjectData = (rv:any)=>{
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
//取出数组对象某个值
let storeData = {
name:rv.name,
id:rv.id,
type:type?.value,
httpType:rv.process,//项目类型
ageGroup:rv.workspaceVO.ageGroup,
style:rv.workspaceVO.style,
styleId:rv.workspaceVO.styleId,
styleName:rv.workspaceVO.styleName,
sex:rv.workspaceVO.sex,
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
position:{
label:rv.workspaceVO.positionEnum.value,
value:rv.workspaceVO.positionEnum.name
},
positionList:[],
publishData:{
id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
},
model:{}
}
let model:any = {}
let position = []
if(data.selectObject.sex == "Female"){
// if(rv.workspaceVO.sex == "Female"){
model = {
id:rv.workspaceVO.mannequinFemaleId,
type:rv.workspaceVO.mannequinFemaleType,
url:rv.workspaceVO.femalePresignedUrl,
}
position = store.state.UserHabit.FemalePosition
}else{
model = {
id:rv.workspaceVO.mannequinMaleId,
type:rv.workspaceVO.mannequinMaleType,
url:rv.workspaceVO.malePresignedUrl,
}
position = store.state.UserHabit.MalePosition
}
storeData.model = model
data.selectObject.positionList = position
storeData.positionList = position
store.commit('setProbject',storeData)
let list:any = projectList
store.commit('setProjectList',list[type.value])
nextTick(()=>{
dataDom.workflow.isUpdataPorject = true
})
}
onMounted(async ()=>{
let test:any = getCookie('isTest')
let isTest =JSON.parse(test)
//判断账号剩余时间是否太短
let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
// if(!data.userDetail.isBeginner || data.userDetail.systemUser == 0)return
if(!isModalOne){//判断是否是试用用户
// if(!isTest && !isModalOne){//判断是否是试用用户
await new Promise(async (resolve) => {
if(isTest){
// openGuide()
resolve('')
}else{
await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
if (rv) {
let dateNow = Date.now()
let date:any = new Date(dateNow)
let rvDate:any = new Date(rv);
let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
if(days < 5){
setTimeout(() => {
let text = {
str:`${t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${t('HomeView.jsContent8')}</a>`,
title:`${t('HomeView.jsContent7')}`,
}
dataDom.affiche.init(text)
}, 500);
}else{
// openGuide()
}
resolve('')
}else{
// openGuide()
resolve('')
}
})
}
})
}else if(!isModalOne && isTest){
}else{
// openGuide()
}
if(route.params.type == 'Works'){
getWorks()
}else{
getHistory()
}
})
onBeforeUnmount(()=>{
// data.selectObject = null
// store.commit('createProbject')
})
return{
...toRefs(dataDom),
...toRefs(data),
createProject,
selectProject,
getHistoryProject,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.start{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.userSystem{
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index:2;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 600;
font-size: 4rem;
}
> .createProject{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
> .createProjectBtn,> .selectProjectBtn{
display: flex;
}
> .createProjectBtn{
> div{
margin: 1rem;
width: 19rem;
}
}
> .selectProjectBtn{
flex-direction: column;
> .porjectBox{
display: flex;
> .selectProjectBtn_title{
padding: 2rem;
width: 21rem;
height: 26rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2rem;
border: 1px solid #000;
text-align: center;
background: #f6f6f6;
color: #000;
transition: all .3s;
font-size: 2rem;
font-weight: 600;
margin: 0 2rem;
&:hover{
background: #000;
color: #fff;
}
}
}
}
}
}
</style>

1468
src/component/HomePage/index/model/collection/ColorboardUpload.vue
View File

File diff suppressed because it is too large Load Diff

742
src/component/HomePage/index/model/collection/MoodboardUpload.vue
View File

@@ -1,742 +0,0 @@
<template>
<div class="collection_modal_item">
<div class="modal_left" >
<div class="switch_type_list" >
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Generate') }}</span>
</div>
</div>
<div v-show="openClick == 1" class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
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>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div
class="delete_file_block"
@click="deleteFile(file)"
>
{{ $t('MoodboardUpload.Delete') }}
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length < 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length < 8"
>
<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 class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
</div>
<!-- <div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span
>Maximum 10 images can be uploaded, Maximum 2M per
image</span
>
</div> -->
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Moodboard"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Moodboard"
></Generate>
</div>
<div class="modal_right" v-show="moodboarList.length >= 1 || edieShow">
<div class="modal_layout" >
<div class="modal_text">
<div>
{{ $t('MoodboardUpload.Thumbnail') }}
</div>
<div v-show="moodboarList.length > 1" class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
</div>
<div class="modal_img" >
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div>
<div class="modal_accomplish" v-show="modalImg[0]?.id || loadingShow">
<div class="modal_text">
<div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div>
<div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl" v-modelImg>
</div>
</div>
<div v-else class="modal_img">
<img :src="modalImg[0].imgUrl">
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</div>
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl,isMoible } from "@/tool/util";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout },
setup() {
const store = useStore()
let lessenList: any = ref([]);
let fileList: any = ref([]);
let showFileList: any = ref([]);
let templateModal: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let moodb_className:any = ref([]);
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false)
let loadingShow = ref(false)
let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard
})
let uploading:any = ref([])
let edieShow:any = ref()
let {t} = useI18n()
return {
fileList,
showFileList,
lessenList,
templateModal,
templateFileList,
openClick,
moodb_className,
flex_direction,
layoutList,
layoutOpen,
loadingShow,
modalImg,
uploading,
edieShow,
t,
};
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
moodTemplateId: "", //模板id
store: useStore(),
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return useStore().state.UploadFilesModule.moodboard
}),
};
},
// watcheffect(){
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
// (v: any) => v.checked == true
// );
// this.store.commit("setMoodboardFile", breviaryList);
// console.log(22);
// },
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
},
methods: {
open(num: Number) {
this.openClick = num;
if(num ==2 ){
let material:any = this.$refs.Material
material.init('Moodboard')
}else if (num == 3){
}
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.id_ = GO.id++
file.id = res.data.id
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
let arr = this.store.state.UploadFilesModule.moodboard
if(arr.length >= 8){
message.info(this.t('MoodboardUpload.jsContent1'))
}else{
this.store.commit("setMoodboardFile", fileList);
}
}else{
bor = false
}
// this.showFileList = this.fileList
} else if (file.status === "error") {
bor = false
}
if(!bor){
let res:any = JSON.parse(file.xhr.response);
let index = -1;
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
message.warning(res.errMsg);
}
},
beforeUpload(file: 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('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('MoodboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
let moodboard
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setMoodboardFile", this.fileList);
}
if(this.store.state.UploadFilesModule.moodboard.length == 0){
this.store.commit("clearMoodTemplateId");
this.layoutList = []
this.edieShow = false
}
},
openSetData() {
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
) || [];
let disposeMoodboard = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
);
let moodboardPosition = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardPosition
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
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("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
this.fileList = setboard.moodboard
},
async changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
if(!styleObj.domStyle)await this.layout()
//
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
}
if(window.screen.width<1300){
layout.isMobile = true
}else{
layout.isMobile = false
}
layout.init()
}else{
message.info(this.t('MoodboardUpload.jsContent5'))
}
},
async layout(){
if(this.loadingShow)return
await new Promise((resolve, reject) => {
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
this.layout()
return resolve('')
}
}
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
let obj = {
imgStyle:[],
domStyle:[],
borStyle:[],
rototeStyle:[],
translateStyle:[],
angleTRStyle:[],
angleTLStyle:[],
angleBRStyle:[],
angleBLStyle:[],
class:this.moodb_className,
}
this.store.commit("setDisposeMoodboardPosition", obj);
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
resolve('')
}
).catch(rv=>{
this.loadingShow = false
})
})
})
})
},
setmoodbClass(val:any){
this.moodb_className = val
}
},
});
</script>
<style lang="less" scoped>
.collection_modal_item {
// padding: 1.5rem 2.6rem 4rem;
height: 100%;
flex: 1;
display: flex;
justify-content: space-between;
.modal_left,.modal_right{
background: #f7f8fa;
border-radius: 3rem;
padding: 2rem 3rem;
}
.modal_left {
width: 71rem;
display: flex;
flex-direction: column;
flex-shrink: 0;
margin-right: 2rem;
// width: 50rem*1.2);
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.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);
}
}
}
.moodboard_body {
padding-top: calc(2.5rem*1.2);
flex: 1;
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: 100%;
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
display: flex;
min-width: calc(57rem*1.2);
flex-direction: column;
overflow: hidden;
.modal_layout,.modal_accomplish{
.modal_text{
font-size:var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
text-align: center;
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
overflow: hidden;
img{
width: auto;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.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;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex: 1;
flex-direction: column;
.modal_text{
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img_max{
// width: calc(57rem*1.2);
// height: calc(35rem*1.2);
width: 100%;
aspect-ratio: 1.62 / 1;
position: relative;
.mark_loading{
position: absolute;
}
}
.modal_img{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
position: relative;
>img{
// height: 100%;
width: 100%;
max-height: 100%;
object-fit: contain;
}
&.active{
flex-direction: row;
}
.modal_imgItem{
position: relative;
overflow: hidden;
text-align: center;
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
}
}
}
}
</style>

1000
src/component/HomePage/index/model/collection/PrintboardUpload.vue
View File

File diff suppressed because it is too large Load Diff

962
src/component/HomePage/index/model/collection/SketchboardUpload.vue
View File

@@ -1,962 +0,0 @@
<template>
<div class="sketchboard_upload_modal">
<div class="modal_left">
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_9"
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
>
<span>{{ $t('SketchboardUpload.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 sketchStyleList"
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 v-show="openClick == 1" class="sketchboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
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>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
<div
class="delete_like_file_block"
@click.stop="deleteFile(file)"
>
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
<!-- <div
class="pin_block"
v-show="file?.status === 'done'"
>
<a-checkbox v-model:checked="file.pin"
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
>
</div> -->
</div>
<div
class="upload_file_item upload_component"
v-show="sketchboardList.length < 20"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:data="{
...upload,
gender:workspace.sex,
}"
:multiple="!driver__.driver"
:before-upload="beforeUpload"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
:maxCount="20 - sketchboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show="sketchboardList.length < 20"
>
<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 class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
</div>
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Sketchboard"
@confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
@setLibrary = setSetchboardGenerate
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Sketchboard"
:scene="scene"
:gender="workspace.sex"
:sketchCatecoryList="sketchCatecoryList"
></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<!-- <div class="modal_img modal_img_x" v-mousewheel>
<div class="mousewheel">
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div> -->
</div>
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- 在sketch 和print暂时关闭like -->
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div> -->
<div class="pin_block">
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
<i v-if="item.pin" class="fi fi-rr-check"></i>
<i v-else class="fi noCheck"></i>
<span>PIN</span>
</label>
</div>
<div class="moreBox" @click.stop>
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload, Modal } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import more from './more.vue'
export default defineComponent({
components: { Material, Generate,scaleImage,sketchCategory,more },
setup() {
let fileList: any = ref([
]);
let openClick: any = ref(1);
let store:any =useStore()
let sketchCatecoryList:any = computed(()=>{
return store.state.Workspace.probjects.positionList
})
let sketchCatecoryAllList:any = computed(()=>{
return store.state.Workspace.workspaceAllPosition
})
let workspace:any = computed(()=>{
return store.state.Workspace.probjects
})
let sketchboardList:any = computed(()=>{
return store.state.UploadFilesModule.sketchboard
})
let {t} = useI18n()
let driver__:any = inject('driver__')
let isTest = ref()
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
})
let openMenu = ref(false)
let sketchStyleList:any = computed(()=>{
return store.state.UserHabit.SketchGenerateType
})
let scene = ref({
name: t('SketchboardUpload.GenerateSketch'),
value:'generate'
})
return {
fileList,
openClick,
store,
sketchCatecoryList,
sketchCatecoryAllList,
workspace,
sketchboardList,
t,
driver__,
isTest,
useGenerate,
scene,
openMenu,
sketchStyleList,
};
},
data() {
return {
swtich_type: "upload",
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: "Sketchboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
isTextarea:false,
isInputFocus:false,
};
},
computed: {
getSketchLabel(value) {
return (value: any) => {
let lable = "";
for (let item of this.sketchCatecoryList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
},
directives:{
mousewheel:{
mounted (el) {
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
let dom:any = document.getElementsByClassName('modal_img_x')
let mouseover = ()=>{
// bodyDom.classList.add('active')
}
let mouseleave = ()=>{
// bodyDom.classList.remove('active')
}
dom.forEach((item:any) => {
item.addEventListener('mouseover',mouseover)
item.addEventListener('mouseleave',mouseleave)
});
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},true)
}
}
},
watch:{
sketchboardList:{
handler(newVal:any,oldVal:any){
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
if(this.driver__.driver){
// driverObj__.moveTo(22)
}
}
}
},
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 15 && newVal.index <= 16){
if(this.driver__.driver){
// driverObj__.moveTo(15)
}
}else{
}
}
}
},
mounted() {
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
}else{
Generate.searchPictureName = ''
}
},
methods: {
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
this.useGenerate.level2Type = item.level2Type
this.useGenerate.designType = item.designType
let Material:any = this.$refs.Material
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
if (num == 2) {
let material: any = this.$refs.Material;
material.init("Sketchboard");
} else if (num == 3) {
// let Generate:any = this.$refs.Generate
// Generate.init('generate')
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.sketchboardList,index)
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
let category:any={
value:'',
name:'',
}
this.sketchCatecoryList.forEach((item:any) => {
if(item.value == res.data.level2Type){
category.value = item?.value
category.name = item?.name
}
});
file.imgUrl = res.data.url;
file.resData = res.data;
// file.pin = false;
//category用来数据处理
file.categoryValue = category?.value;
file.category = category?.name;
file.categoryShow = false;
file.id_ = GO.id++
file.id = res.data.id
file.type_ = {
type1:'upload',
type2:'Sketchboard'
};
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
this.store.commit("setSketchboardFile", fileList);
}else{
bor = false
}
} else if (file.status === "error") {
bor = false
}
if(!bor){
let index = -1;
let res:any = JSON.parse(file.xhr.response);
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
message.warning(res.errMsg);
}
},
beforeUpload(file: 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('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('SketchboardUpload.jsContent3'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
let moodboard
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setSketchboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Sketchboard",
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
gender:this.workspace.sex,
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=>{
});
}
},
openSetData() {
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
}
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.sketchboardFiles
)
) || [];
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.sketchCatecoryAllList.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("setSketchboardGenerateFiles", setboard.generate);
this.store.commit("setSketchboardMaterialFiles", setboard.material);
this.store.commit("setSketchboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
},
confirmSelect(event: any) {
for (let item of event) {
let data = {
imgUrl: item.url,
resData: item,
pin: false,
status: "done",
category: item.level2Type || "Outwear",
categoryShow: false,
};
if (this.fileList.length == 15) {
message.warning(
this.t('SketchboardUpload.jsContent4')
);
break;
}
this.fileList.push(data);
}
this.store.commit("setSketchboardFile", this.fileList);
},
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>
.sketchboard_upload_modal {
height: 100%;
width: 100%;
display: flex;
.modal_left,.modal_right{
background: #f7f8fa;
border-radius: 3rem;
padding: 2rem 3rem;
}
.modal_left {
width: 71rem;
margin-right: 2rem;
display: flex;
flex-direction: column;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.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-left: 2rem;
margin-top: auto;
position: relative;
>div{
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 18rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.sketchboard_body {
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_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 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(25% - 2rem);
aspect-ratio: 1 / 1;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
img{
width: 100%;
height: 100%;
}
&.upload_component {
border: none;
}
.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%;
max-width: 100%;
}
&:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
}
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
// overflow-x: hidden;
display: flex;
flex-direction: row;
overflow-y: hidden;
&.modal_img::-webkit-scrollbar {
display: none;
}
.mousewheel{
display: flex;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
text-align: center;
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
img{
// width: 100%;
width: auto;
height: 100%;
object-fit: contain;
}
.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;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
overflow-x: hidden;
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mark_loading{
position: absolute;
z-index: 99;
}
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: calc(2rem*1.2);
padding-block:calc(2rem*1.2);
}
.input_box{
z-index: 1;
input{
&.forbidden{
cursor:not-allowed;
}
}
}
.modal_img{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
position: relative;
.modal_imgItem{
margin: 1rem;
margin-bottom: 5rem;
display: inline-block;
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: calc(33.33% - 2rem);
aspect-ratio: 1 / 1;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
text-align: center;
.moreBox{
position: absolute;
right: 1rem;
top: 1rem;
// opacity: 0;
width: 3.5rem;
height: 3.5rem;
transition: all 0.3s ease-in-out;
}
&.modal_imgItem:nth-child(even) {
margin-right: 0;
}
&:hover .delete_like_file_block{
display: block;
opacity: 1;
}
img{
object-fit: contain;
width: 100%;
height: 100%;
}
.pin_block{
position: absolute;
left: 1rem;
top: 1rem;
width: 8rem;
height: 3.5rem;
border-radius: 3rem;
background: rgba(0,0,0,.7);
color: #fff;
>label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-right: 1rem;
padding-left: .2rem;
}
i{
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: #000;
&.noCheck{
background: inherit;
border: 2px solid #fff;
}
}
span{
font-size: 1.8rem;
font-weight: 600;
}
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
// img {
// }
.operate_file_block{
pointer-events:none
}
.pin_block{
pointer-events:none
}
.delete_like_file_block{
pointer-events:none
}
}
}
}
}
}
}
</style>

128
src/component/HomePage/index/model/collection/more.vue
View File

@@ -1,128 +0,0 @@
<template>
<div class="more">
<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
<div class="more_box" v-show="show">
<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
<i class="fi fi-rr-edit"></i>
<div class="text">{{ $t('more.edit') }}</div>
</div>
<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
<i class="fi fi-bs-expand-arrows-alt"></i>
<div class="text">{{ $t('more.enlargement') }}</div>
</div>
<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
<i class="fi fi-br-download"></i>
<div class="text">{{ $t('more.down') }}</div>
</div>
<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
<span class="icon iconfont icon-shanchu operate_icon"></span>
<div class="text">{{ $t('more.delete') }}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";
export default defineComponent({
components:{
},
props:{
moreList:{type:Array,default:()=>[]},
item:{type:Object,default:()=>{}},
index:{type:Number,default:0},
},
emits:['deleteFile','scaleImage'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
show:false
})
const dataDom = reactive({
})
const openList = ()=>{
data.show = true
document.addEventListener('click',setShow)
}
const setShow = ()=>{
data.show = false
document.removeEventListener('click',setShow)
}
const setMore = (str:any)=>{
if(str == 'delete'){
emit("deleteFile",props.item);
}else if(str == 'edit'){
emit("scaleImage",props.index);
}else if(str == 'down'){
console.log(props.item);
downloadIamge(props.item.url)
}else if(str == 'enlargement'){
emit("scaleImage",props.index);
}
setShow()
}
return{
...toRefs(dataDom),
...toRefs(data),
openList,
setMore,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.more{
position: relative;
width: 100%;
height: 100%;
> .fi{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.7);
color: #fff;
border-radius: .6rem;
}
> .more_box{
position: absolute;
background: rgba(0,0,0,.7);
right: 0;
margin-top: .5rem;
color: #fff;
border-radius: .6rem;
padding: 1rem 0;
font-size: 1.4rem;
// width: 12rem;
text-align: left;
> .item{
display: flex;
align-items: center;
padding: 1rem 1.3rem;
> i,> span{
margin-right: 1rem;
}
> .text{
white-space: nowrap;
}
&:hover{
background: rgba(0,0,0,.3);
}
}
}
}
</style>

1877
src/component/HomePage/index/model/design/index.vue
View File

File diff suppressed because it is too large Load Diff

238
src/component/HomePage/index/workflow/content/index.vue
View File

@@ -1,238 +0,0 @@
<template>
<div class="contentBox" :class="{active:(selectKey_ == 'design' || selectKey_ == 'toProduct' || selectKey_ == 'relight' || selectKey_ == 'poseTransfer')}">
<seriesDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></seriesDesign>
<singleProductDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></singleProductDesign>
<sketchDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></sketchDesign>
<productDrawingDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></productDrawingDesign>
<printingDesign3D v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></printingDesign3D>
<printDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></printDesign>
<div class="public">
<cloudUploading v-show="selectKey_ == 'yun'" v-if="selectObject.id" :workflowType="workflowType" ref="cloudUploading" @retrieve="(value:any)=>$emit('retrieve',value)"></cloudUploading>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,watch,nextTick,provide,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import workspace from '../../workflow/workspace.vue'
import seriesDesign from './seriesDesign.vue'
import printDesign from './printDesign.vue'
import singleProductDesign from './singleProductDesign.vue'
import sketchDesign from './sketchDesign.vue'
import productDrawingDesign from './productDrawingDesign.vue'
import printingDesign3D from './printingDesign3D.vue'
import cloudUploading from '../../model/cloudUploading/index.vue'
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D,
cloudUploading
},
props:{
selectKey_:String,
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
emit:['projectComplete','retrieve'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
navListData:computed(()=>store.state.Workspace.projectList),
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
userDetail:computed(()=>{
return store.state.UserHabit.userDetail
}),
})
const dataDom:any = reactive({
seriesDesign:null as any,
singleProductDesign:null as any,
printDesign:null as any,
sketchDesign:null as any,
productDrawingDesign:null as any,
printingDesign3D:null as any,
})
//处理design数据
const setDesignData = (str:any)=>{
// if (str in dataDom) {
if(str == 'workspace' || str == 'yun' || str == '')return
return new Promise(async (resolve,reject)=>{
if(str == "colorBoard")await setColor()
// if(str == "sketchBoard")await setSketch()
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
let value = {
type:str,
objectName:data.selectObject.type,
}
if(allBoardData.indexOf(str) != -1){
await store.dispatch('setAllBoardData',value)
}else{
let value = {
type:str,
objectName:data.selectObject.type,
}
store.dispatch('setModularData',value)
}
saveProject(str)
resolve('')
})
// } else {
// return
// }
}
const saveCanvas = (value:any,str:any)=>{
let json = dataDom[data.selectObject.type][str].getCanvasData()
let blob = new Blob([JSON.stringify(json)], { type: "application/json" });
let formData = new FormData();
// let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
formData.append("file", blob, "data.json");
formData.append('module', str);
formData.append('projectId', value.projectId);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
// message.success(t('exportModel.jsContent7'))
})
}
const saveProject = (str:any)=>{
if(str == 'design')return
let value:any = {
projectId:data.selectObject.id,
}
if(str == 'deReconstruction' || str == 'canvas'){
saveCanvas(value,str)
return
}
store.dispatch('getProjectData',str).then((data)=>{
// if(!data[str])return
value[str] = data[str]
console.log(value,132)
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
})
})
}
const setSketch = ()=>{
}
const setColor = ()=>{
return new Promise((resolve,reject)=>{
let colorBoards = store.state.UploadFilesModule.colorBoards;
if(colorBoards.length == 0)return resolve('')
let data: 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];
data.push({
h: hsv[0],
s: hsv[1],
v: hsv[2],
});
}
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.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('');
}
})
.catch((res) => {
reject();
});
})
}
const setModule = (value:any)=>{//选中设置数据
if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
}
const unfold = ()=>{
dataDom[data.selectObject.type].unfold()
}
watch(()=>props.selectKey_,async (newVal,oldVal)=>{
if((!!newVal && !!oldVal) || (!newVal && !!oldVal)){
setDesignData(oldVal)
}
// if(newVal == '' && oldVal != ''){
// //选择数据
// if(data.navListData.value[index]?.select){
// setDesignData(oldVal)
// }
// }
})
return{
...toRefs(dataDom),
...toRefs(data),
setModule,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.contentBox{
display: flex;
width: 100%;
height: 100%;
// overflow: hidden;
height: calc(100% - 5rem);
// &.active{
// overflow: initial;
// }
> .public{
flex: 1;
}
> .contentBox{
position: relative;
flex: 1;
overflow-x: initial;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

217
src/component/HomePage/index/workflow/content/printDesign.vue
View File

@@ -1,217 +0,0 @@
<template>
<div class="seriesDesign">
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
PrintboardUpload,canvasUpload,workspace
},
props:{
selectKey_:{
type:String,
default:''
},
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
emits:['projectComplete'],
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
workspaceBack:inject('setBack') as any,
})
const dataDom:any = reactive({
printBoard:null as any,
canvas:null as any,
})
const open = (str:any)=>{
nextTick(()=>{
if(dataDom[str]?.openSetData){
dataDom[str].openSetData()
}
})
}
const setitemData = (arr:any)=>{
return new Promise((resolve,reject)=>{
nextTick(()=>{
arr.forEach((rv:any)=>{
let arr = ['design','patternMaking3D']
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
dataDom[rv].openSetData()
})
resolve('')
})
})
}
const unfold = ()=>{
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
}
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["printBoard", ]
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)
let allBoardData = ['printBoard']
let canvasData = ['canvas']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];
await getCanvasData(item)
}
await setitemData(allBoardData)
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)
}
})
})
}
const getCanvasData = (str:any)=>{
return new Promise((resolve, reject) => {
let value = {
module:str,
projectId:data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.exportSearch, value)
.then((rv) => {
store.commit("setCanvasData", {type:str,file:rv});
resolve('')
})
.catch((rv) => {
resolve(null)
});
})
}
const historyChooseData = (data:any)=>{
let collectionData = {
printboardFiles: dealViewChooseData(
data.printBoard,"Printboard"
),
generatePrintFiles: [],
};
store.commit("setAllBoardDataChoose", collectionData);
}
//统一处理选择组的渲染数据
const dealViewChooseData = (data: any,str:string)=> {
if (!data) {
return [];
}
let filesList = data.map((v: any) => {
let newData: any = {
imgUrl: v.url?v.url:v.designOutfitUrl,
id: v.id,
status: "done",
resData: v,
type_:{
type1:'material',
type2:v.level1Type
}
};
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
newData.categoryValue = v.level2Type;
newData.level2Type = v.level2Type;
}
if (v.level1Type === "Printboard") {
newData.pin = v.isPin;
newData.level2Type = v.level2Type;
newData.categoryValue = v.level2Type;
}
return newData;
});
return filesList;
}
onMounted(()=>{
nextTick(()=>{
getCollection()
})
})
return{
...toRefs(dataDom),
...toRefs(data),
open,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.seriesDesign{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

200
src/component/HomePage/index/workflow/content/printingDesign3D.vue
View File

@@ -1,200 +0,0 @@
<template>
<div class="seriesDesign">
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
<!-- <canvasUpload></canvasUpload> -->
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import patternMaking3D from '../../model/patternMaking3D/index.vue'
import canvasUpload from "@/component/Canvas/test.vue";
import workspace from '../../workflow/workspace.vue'
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
patternMaking3D,canvasUpload,workspace,PrintboardUpload
},
props:{
selectKey_:{
type:String,
default:''
},
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
workspaceBack:inject('setBack') as any,
})
const dataDom:any = reactive({
printBoard:null as any,
patternMaking3D:null as any,
})
const open = (str:any)=>{
nextTick(()=>{
if(dataDom[str]?.openSetData){
dataDom[str].openSetData()
}
})
}
const setitemData = (arr:any)=>{
return new Promise((resolve,reject)=>{
nextTick(()=>{
arr.forEach((rv:any)=>{
let arr = ['design','patternMaking3D']
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
dataDom[rv].openSetData()
})
resolve('')
})
})
}
const unfold = ()=>{
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
}
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["patternMaking3D", 'printBoard']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)
let allBoardData = ['patternMaking3D','printBoard']
await setitemData(allBoardData)
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)
}
})
})
}
const historyChooseData = (value:any)=>{
let collectionData = {
printboardFiles: dealViewChooseData(
value.printBoard,"Printboard"
),
generatePrintFiles: [],
};
store.commit("setAllBoardDataChoose", collectionData);
let patternMaking3DData = {
threeDsimpleId:value.patternMaking3D.threeDSimpleId,
collectionElementId:value.patternMaking3D.collectionElementId,
printMinioUrl:value.patternMaking3D.printMinioUrl,
x:value.patternMaking3D.x,
y:value.patternMaking3D.y,
};
store.commit('setPatternMaking3D',patternMaking3DData)
}
const dealViewChooseData = (data: any,str:string)=> {
if (!data) {
return [];
}
let filesList = data.map((v: any) => {
let newData: any = {
imgUrl: v.url?v.url:v.designOutfitUrl,
id: v.id,
status: "done",
resData: v,
type_:{
type1:'material',
type2:v.level1Type
}
};
if (v.level1Type === "Printboard") {
newData.pin = v.isPin;
newData.level2Type = v.level2Type;
newData.categoryValue = v.level2Type;
}
return newData;
});
return filesList;
}
onMounted(()=>{
nextTick(()=>{
getCollection()
})
})
return{
...toRefs(dataDom),
...toRefs(data),
open,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.seriesDesign{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

215
src/component/HomePage/index/workflow/content/productDrawingDesign.vue
View File

@@ -1,215 +0,0 @@
<template>
<div class="seriesDesign">
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<toProduct ref="toProduct"
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
class="toProduct"
:isState="selectKey_ =='toProduct'"
v-show="selectKey_ == 'toProduct'"
></toProduct>
<toProduct ref="relight"
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
class="relight"
:isState="selectKey_ =='relight'"
v-show="selectKey_ == 'relight'"
></toProduct>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import toProduct from '../../model/toProduct/index.vue'
import poseTransfer from '../../model/poseTransfer/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,toProduct,canvasUpload,poseTransfer
},
props:{
selectKey_:{
type:String,
default:''
},
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
workspaceBack:inject('setBack') as any,
})
const dataDom:any = reactive({
toProduct:null as any,
relight:null as any,
poseTransfer:null as any,
canvas:null as any,
})
const open = (str:any)=>{
console.log(str)
nextTick(()=>{
if(dataDom[str]?.openSetData){
dataDom[str].openSetData()
}
})
}
const setitemData = (arr:any)=>{
return new Promise((resolve,reject)=>{
nextTick(()=>{
arr.forEach((rv:any)=>{
let arr = ['design','patternMaking3D']
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
dataDom[rv].openSetData()
})
resolve('')
})
})
}
const unfold = ()=>{
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
}
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":['toProduct','relight','poseTransfer']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)//设置历史数据
let allBoardData = ['toProduct','relight','poseTransfer']
let canvasData = ['canvas']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];
await getCanvasData(item)
}
await setitemData(allBoardData)
//还有一个canvas
allBoardData.forEach((item)=>{
let value = {
type:item,
objectName:data.selectObject.type,
}
store.dispatch('setModularData',value)
})
})
}
const getCanvasData = (str:any)=>{
return new Promise((resolve, reject) => {
let value = {
module:str,
projectId:data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.exportSearch, value)
.then((rv) => {
store.commit("setCanvasData", {type:str,file:rv});
resolve('')
})
.catch((rv) => {
resolve(null)
});
})
}
const historyChooseData = (data:any)=>{
if(data.toProduct){
let value = {
list: data.toProduct,
str:'add',
index:-1,
}
store.commit("setToProductImage", value);
}
if(data.relight){
let value = {
list: data.relight,
str:'add',
index:-1,
}
store.commit("setRelightList", value);
}
if(data.poseTransfer){
let value = {
list: data.poseTransfer,
str:'add',
index:-1,
}
store.commit("setPoseTransfer", value);
}
}
onMounted(()=>{
nextTick(()=>{
getCollection()
})
})
return{
...toRefs(dataDom),
...toRefs(data),
open,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.seriesDesign{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

338
src/component/HomePage/index/workflow/content/seriesDesign.vue
View File

@@ -1,338 +0,0 @@
<template>
<div class="seriesDesign">
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
<toProduct ref="toProduct"
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
class="toProduct"
:isState="selectKey_ =='toProduct'"
v-show="selectKey_ == 'toProduct'"
></toProduct>
<toProduct ref="relight"
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
class="relight"
:isState="selectKey_ =='relight'"
v-show="selectKey_ == 'relight'"
></toProduct>
<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import design from '../../model/design/index.vue'
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import mannequin from '../../model/mannequin/index.vue'
import toProduct from '../../model/toProduct/index.vue'
import poseTransfer from '../../model/poseTransfer/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,toProduct,canvasUpload,poseTransfer
},
props:{
selectKey_:{
type:String,
default:''
},
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
emits:['projectComplete'],
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
workspaceBack:inject('setBack') as any,
})
const dataDom:any = reactive({
moodBoard:null as any,
printBoard:null as any,
colorBoard:null as any,
sketchBoard:null as any,
mannequin:null as any,
toProduct:null as any,
design:null as any,
relight:null as any,
poseTransfer:null as any,
canvas:null as any,
})
const open = (str:any,button:any)=>{
console.log(button)
nextTick(()=>{
if(dataDom[str]?.openSetData){
dataDom[str].openSetData(button)
}
})
}
const setitemData = (arr:any)=>{
return new Promise((resolve,reject)=>{
nextTick(()=>{
arr.forEach((rv:any)=>{
let arr = ['design','patternMaking3D']
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
dataDom[rv].openSetData()
})
resolve('')
})
})
}
const unfold = ()=>{
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
}
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)//设置历史数据
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
let canvasData = ['canvas']
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)
}
})
})
}
const getCanvasData = (str:any)=>{
return new Promise((resolve, reject) => {
let value = {
module:str,
projectId:data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.exportSearch, value)
.then((rv) => {
store.commit("setCanvasData", {type:str,file:rv});
resolve('')
})
.catch((rv) => {
resolve(null)
});
})
}
const historyChooseData = (data:any)=>{
let collectionData = {
disposeMoodboard: data.moodBoard?.moodTemplateId?[{
id:data.moodBoard.moodTemplateId,
imgUrl:data.moodBoard.moodTemplateUrl,
resData:{
name:data.moodBoard.moodTemplateName,
}
}]:[],
moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
moodboardFiles: dealViewChooseData(
data.moodBoard?.moodBoards,"Moodboard"
),
printboardFiles: dealViewChooseData(
data.printBoard,"Printboard"
),
generatePrintFiles: [],
colorBoards: dealViewChooseColor(
data.colorBoard
),
sketchboardFiles: dealViewChooseData(
data.sketchBoard,"Sketchboard"
),
};
if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
store.commit("setAllBoardDataChoose", collectionData);
// store.commit('clearShowSketchboard')
store.commit("setShowSketchboard", data.sketchBoards);
let likeDesignCollectionList:any = []
if(data.design?.userLikeDetails){
data.design?.userLikeDetails.map(
(v: any) => {
let data = {
...v,
groupDetailId: v.id,
designItemUrl: v.designOutfitUrl,
designItemId: v.designItemId,
};
return data;
}
);
}
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
store.commit("setUserGroupId", data.design.userGroupId);
if(data.toProduct){
let value = {
list: data.toProduct,
str:'add',
index:-1,
}
store.commit("setToProductImage", value);
}
if(data.relight){
let value = {
list: data.relight,
str:'add',
index:-1,
}
store.commit("setRelightList", value);
}
if(data.poseTransfer){
let value = {
list: data.poseTransfer,
str:'add',
index:-1,
}
store.commit("setPoseTransfer", value);
}
}
//统一处理选择组的渲染数据
const dealViewChooseData = (data: any,str:string)=> {
if (!data) {
return [];
}
let filesList = data.map((v: any) => {
let newData: any = {
imgUrl: v.url?v.url:v.designOutfitUrl,
id: v.id,
status: "done",
resData: v,
type_:{
type1:'material',
type2:v.level1Type
}
};
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
newData.categoryValue = v.level2Type;
newData.level2Type = v.level2Type;
}
if (v.level1Type === "Printboard") {
newData.pin = v.isPin;
newData.level2Type = v.level2Type;
newData.categoryValue = v.level2Type;
}
return newData;
});
return filesList;
}
//统一处理选择组的渲染数据
const dealViewChooseColor = (data: any)=>{
let colorList = data.map((v: any) => {
let rgbValue = v.rgbValue.split(" ");
let newData: any = {
id: v.id,
name: v.name,
tcx: v.tcx || "",
rgbValue: {
r: rgbValue[0],
g: rgbValue[1],
b: rgbValue[2],
a: 1,
},
};
if(v.gradient){
newData.gradient = v.gradient;
}else{
delete newData.gradient;
}
return newData;
});
console.log(colorList)
return colorList;
}
onMounted(()=>{
nextTick(()=>{
getCollection()
})
})
return{
...toRefs(dataDom),
...toRefs(data),
open,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.seriesDesign{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

321
src/component/HomePage/index/workflow/content/singleProductDesign.vue
View File

@@ -1,321 +0,0 @@
<template>
<div class="seriesDesign">
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
<toProduct ref="toProduct"
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
class="toProduct"
:isState="selectKey_ =='toProduct'"
v-show="selectKey_ == 'toProduct'"
></toProduct>
<toProduct ref="relight"
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
class="relight"
:isState="selectKey_ =='relight'"
v-show="selectKey_ == 'relight'"
></toProduct>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import design from '../../model/design/index.vue'
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import toProduct from '../../model/toProduct/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,toProduct,canvasUpload,
},
props:{
selectKey_:{
type:String,
default:''
},
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
workspaceBack:inject('setBack') as any,
})
const dataDom:any = reactive({
moodBoard:null as any,
printBoard:null as any,
colorBoard:null as any,
sketchBoard:null as any,
toProduct:null as any,
design:null as any,
relight:null as any,
canvas:null as any,
})
const open = (str:any)=>{
nextTick(()=>{
if(dataDom[str]?.openSetData){
dataDom[str].openSetData()
}
})
}
const setitemData = (arr:any)=>{
return new Promise((resolve,reject)=>{
nextTick(()=>{
arr.forEach((rv:any)=>{
let arr = ['design','patternMaking3D']
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
dataDom[rv].openSetData()
})
resolve('')
})
})
}
const unfold = ()=>{
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
}
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight']
let canvasData = ['canvas']
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)
}
})
})
}
const getCanvasData = (str:any)=>{
return new Promise((resolve, reject) => {
let value = {
module:str,
projectId:data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.exportSearch, value)
.then((rv) => {
store.commit("setCanvasData", {type:str,file:rv});
resolve('')
})
.catch((rv) => {
resolve(null)
});
})
}
const historyChooseData = (data:any)=>{
let collectionData = {
disposeMoodboard: data.moodBoard?.moodTemplateId?[{
id:data.moodBoard.moodTemplateId,
imgUrl:data.moodBoard.moodTemplateUrl,
resData:{
name:data.moodBoard.moodTemplateName,
}
}]:[],
moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
moodboardFiles: dealViewChooseData(
data.moodBoard?.moodBoards,"Moodboard"
),
printboardFiles: dealViewChooseData(
data.printBoard,"Printboard"
),
generatePrintFiles: [],
colorBoards: dealViewChooseColor(
data.colorBoard
),
sketchboardFiles: dealViewChooseData(
data.sketchBoard,"Sketchboard"
),
};
if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
store.commit("setAllBoardDataChoose", collectionData);
// store.commit('clearShowSketchboard')
store.commit("setShowSketchboard", data.sketchBoards);
let likeDesignCollectionList:any = []
if(data.design?.userLikeDetails){
data.design?.userLikeDetails.map(
(v: any) => {
let data = {
...v,
groupDetailId: v.id,
designItemUrl: v.designOutfitUrl,
designItemId: v.designItemId,
};
return data;
}
);
}
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
store.commit("setUserGroupId", data.design.userGroupId);
if(data.toProduct){
let value = {
list: data.toProduct,
str:'add',
index:-1,
}
store.commit("setToProductImage", value);
}
if(data.relight){
let value = {
list: data.relight,
str:'add',
index:-1,
}
store.commit("setRelightList", value);
}
}
//统一处理选择组的渲染数据
const dealViewChooseData = (data: any,str:string)=> {
if (!data) {
return [];
}
let filesList = data.map((v: any) => {
let newData: any = {
imgUrl: v.url?v.url:v.designOutfitUrl,
id: v.id,
status: "done",
resData: v,
type_:{
type1:'material',
type2:v.level1Type
}
};
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
newData.categoryValue = v.level2Type;
newData.level2Type = v.level2Type;
}
if (v.level1Type === "Printboard") {
newData.pin = v.isPin;
newData.level2Type = v.level2Type;
newData.categoryValue = v.level2Type;
}
return newData;
});
return filesList;
}
//统一处理选择组的渲染数据
const dealViewChooseColor = (data: any)=>{
let colorList = data.map((v: any) => {
let rgbValue = v.rgbValue.split(" ");
let newData: any = {
id: v.id,
name: v.name,
tcx: v.tcx || "",
rgbValue: {
r: rgbValue[0],
g: rgbValue[1],
b: rgbValue[2],
a: 1,
},
};
if(v.gradient){
newData.gradient = v.gradient;
}else{
delete newData.gradient;
}
return newData;
});
return colorList;
}
onMounted(()=>{
nextTick(()=>{
getCollection()
})
})
return{
...toRefs(dataDom),
...toRefs(data),
open,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.seriesDesign{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

228
src/component/HomePage/index/workflow/content/sketchDesign.vue
View File

@@ -1,228 +0,0 @@
<template>
<div class="seriesDesign">
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import deReconstruction from '../../model/deReconstruction/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import mannequin from '../../model/mannequin/index.vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
},
props:{
selectKey_:{
type:String,
default:''
},
workflowType:String,
httpWorkflowType:String,
workflowTitle:String,
},
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
workspaceBack:inject('setBack') as any,
})
const dataDom:any = reactive({
sketchBoard:null as any,
deReconstruction:null as any,
canvas:null as any,
mannequin:null as any,
})
const open = (str:any)=>{
nextTick(()=>{
if(dataDom[str]?.openSetData){
dataDom[str].openSetData(str)
}
})
}
const setitemData = (arr:any)=>{
return new Promise((resolve,reject)=>{
nextTick(()=>{
arr.forEach((rv:any)=>{
if(rv == 'design' || rv == 'deReconstruction' || rv == 'canvas' || !dataDom[rv])return
dataDom[rv].openSetData()
})
resolve('')
})
})
}
const unfold = ()=>{
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
}
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["sketchBoard",'deReconstruction','mannequin']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
let canvasData = ['deReconstruction','canvas']
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)
}
})
})
}
const getCanvasData = (str:any)=>{
return new Promise((resolve, reject) => {
let value = {
module:str,
projectId:data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.exportSearch, value)
.then((rv) => {
store.commit("setCanvasData", {type:str,file:rv});
resolve('')
})
.catch((rv) => {
resolve(null)
});
})
}
const historyChooseData = (data:any)=>{
let collectionData = {
sketchboardFiles: dealViewChooseData(
data.sketchBoard,"Sketchboard"
),
};
store.commit("setAllBoardDataChoose", collectionData);
if(data.deReconstruction){
data.deReconstruction.url = data.deReconstruction.collageSketchUrl
data.deReconstruction.isLike = data.deReconstruction.liked
let value = {
list: [data.deReconstruction],
str:'add',
index:-1,
}
store.commit("setDeReconstruction", value);
}
}
//统一处理选择组的渲染数据
const dealViewChooseData = (data: any,str:string)=> {
if (!data) {
return [];
}
let filesList = data.map((v: any) => {
let newData: any = {
imgUrl: v.url?v.url:v.designOutfitUrl,
id: v.id,
status: "done",
resData: v,
type_:{
type1:'material',
type2:v.level1Type
}
};
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
newData.categoryValue = v.level2Type;
newData.level2Type = v.level2Type;
}
return newData;
});
return filesList;
}
onMounted(()=>{
nextTick(()=>{
getCollection()
})
})
return{
...toRefs(dataDom),
...toRefs(data),
open,
unfold,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.seriesDesign{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
background: #ff6666;
display: flex;
flex-direction: column;
> *{
width: 100%;
height: 100%;
overflow: hidden;
}
> .back{
width: auto;
height: auto;
cursor: pointer;
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
</style>

269
src/component/HomePage/index/workflow/index.vue
View File

@@ -1,269 +0,0 @@
<template>
<div class="workflowBox">
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
<navList ref="navList" :workflowType="workflowType" @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
<div class="homeContent" ref="parent">
<navListBox
@setSelectKey=setSelectKey
:navListData="navListData"
:selectKey="selectKey"
:workflowType="workflowType"
v-model:isShowMark="isShowMark"
></navListBox>
</div>
<div class="content">
<div class="back">
<div class="title">
<div v-show="navListData?.find((item:any) => item.value === selectKey_)?.name">
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
</div>
<div v-show="!navListData?.find((item:any) => item.value === selectKey_)?.name ">
<i class="fi fi-rr-cloud-upload-alt"></i>
Cloud Generation Tasks
</div>
</div>
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
</div>
<content ref="content" @retrieve="retrieve" :selectKey_="selectKey_" @projectComplete="setBack()" :workflowType="workflowType" :workflowTitle="workflowTitle" :httpWorkflowType="httpWorkflowType"></content>
</div>
</div>
</div>
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
<workspace :firstTime="true" :workflowType="workflowType" @setProject="setProject" :workflowTitle="workflowTitle" :httpWorkflowType="httpWorkflowType"></workspace>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import content from './content/index.vue'
import workspace from './workspace.vue'
import navList from './nav.vue'
import navListBox from './navBox.vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
content,navList,navListBox,workspace
},
//props
props:{
workflowType:{
type:String,
},
workflowTitle:{
type:String,
default:''
},
httpWorkflowType:{
type:String,
default:''
}
},
emits:['goHome'],
setup(props,{emit}) {
const store = useStore();
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
selectKey:'',
selectKey_:'',
isShowMark:false,
isUpdataPorject:false as any,
adminData:{
position:'',
dom:null as any,
parentDom:null as any,
},
navListData:computed(()=>{
return store.state.Workspace.projectList
}),
})
const setIsShowMark = (boolean:boolean)=>{
data.isShowMark = boolean
}
provide('setIsShowMark',setIsShowMark)
const dataTime = reactive({
selectTime:null as any,
})
const dataDom = reactive({
parent:null as any,
content:null as any,
navList:null as any
})
const setBack = ()=>{
data.selectKey = ''
updataPage()
}
provide('setBack',setBack)
const setProject = (value:any)=>{
// data.isUpdataPorject = data
if(value == 'set'){
data.isUpdataPorject = true
}else{
data.isUpdataPorject = false
}
}
const setSelectKey = async (value:any)=>{
let {str,dom,position} = value
data.adminData.dom = dom
data.adminData.parentDom = value?.parentDom
data.adminData.position = position
data.selectKey = str
updataPage()
if(value.str)dataDom.content.setModule(value)
}
const updataPage = ()=>{
let {dom,position} = data.adminData
let contentDom:any = document.querySelectorAll('.workflow .content')[0]
clearTimeout(dataTime.selectTime)
let {top,left,width,height} = dom.getBoundingClientRect()
let parentPosition = dataDom.parent.getBoundingClientRect()
let parentTop = parentPosition?.top
let parentLeft = parentPosition?.left
if(data.selectKey_ && data.selectKey == ''){
// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
let y = top - parentTop + height / 2
let x = left - parentLeft + width / 2
if(position == 'nav'){
x = 0
y = dom.offsetTop + dom.offsetHeight / 2
}
contentDom.style.transformOrigin = `${x}px ${y}px`
gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
dataTime.selectTime = setTimeout(() => {
data.selectKey_ = data.selectKey
}, 500);
}else{
data.selectKey_ = data.selectKey
nextTick(()=>{
// let index = data.navListData.findIndex((item:any) => item.value === str);
let y = top - parentTop + height / 2
let x = left - parentLeft + width / 2
if(position == 'nav'){
x = 0
y = dom.offsetTop + dom.offsetHeight / 2
}
// dataDom.content.open({selectKey:data.selectKey_,workflowType:props.workflowType})
contentDom.style.transformOrigin = `${x}px ${y}px`
gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
})
}
}
const goHome = ()=>{
emit("goHome");
}
const unfold = ()=>{
dataDom.content.unfold()
}
const retrieve = (str:any)=>{
console.log(str)
dataDom.navList.uploadSelectKey(str)
}
return{
...toRefs(dataDom),
...toRefs(data),
setBack,
setProject,
setSelectKey,
unfold,
goHome,
retrieve,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.workflowBox{
display: flex;
width: 100%;
height: 100%;
> .workflow{
display: flex;
width: 100%;
height: 100%;
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
> .content,
>.homeContent{
width: 100%;
height: 100%;
padding: 4rem;
padding-top: 3rem;
// padding: 3rem;
}
> .content{
position: absolute;
top: 0;
left: 0;
transform: scale(0);
// background: #ff6666;
background: #fff;
display: flex;
flex-direction: column;
> *{
// width: 100%;
// height: 100%;
}
> .back{
width: auto;
height: auto;
display: flex;
padding-bottom: 1rem;
> .title{
font-size: 2.5rem;
font-weight: 600;
display: flex;
align-items: center;
> div{
display: flex;
align-items: center;
i{
font-size: 2rem;
display: flex;
margin-right: 1rem;
}
}
}
> .text{
cursor: pointer;
margin-left: auto;
i{
font-size: 3rem;
display: flex;
}
}
}
}
> .homeContent{
// background: #91ff66;
position: absolute;
}
}
}
}
</style>

173
src/component/HomePage/index/workflow/nav.vue
View File

@@ -1,173 +0,0 @@
<template>
<div class="homeNav" :class="{active:isUnfold}">
<div class="navList unfold" @click="setUnfold" :title="'Expand the sidebar'" :class="{active:isUnfold}">
<!-- <i class="fi fi-rr-window-maximize"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd"></path>
</svg>
<span v-show="isUnfold">Module</span>
</div>
<div class="border"></div>
<div class="navList unfold" @click="goHome">
<i class="fi fi-sr-home"></i>
<span v-show="isUnfold">Home</span>
</div>
<div class="navList" :class="{active:selectKey == 'workspace'}" @click="setNav('workspace', $event.target)">
<i class="fi fi-rr-settings-sliders"></i>
<span v-show="isUnfold">Settings</span>
</div>
<div class="border"></div>
<div class="navList list" :class="[selectKey == item.value?'active':'',navListData.some((navListItem:any) => navListItem.value === item.value)?'exist':'',item.value]" v-for="item in navList" :key="item.value" @click="setNav(item.value, $event.target)">
<i :class="item.icon"></i>
<span v-show="isUnfold">{{ item.name }}</span>
</div>
<div class="border" style="margin-top: auto;" ></div>
<div class="navList list exist" v-show="['seriesDesign', 'singleProductDesign', 'productDrawingDesign'].includes(workflowType)" @click="setNav('yun', $event.target)">
<i class="fi fi-rr-cloud-upload-alt"></i>
<span v-show="isUnfold">云生成</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,watch,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import {projectList} from '@/tool/listData'
export default defineComponent({
components:{
},
props:{
selectKey:{type:String,default:''},
workflowType:{type:String,default:''},
navListData:{type:Array,default:()=>[]},
},
emits:['setSelectKey','unfold','goHome'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
isUnfold:false,
navList:[] as any,
})
const dataDom = reactive({
})
const setNav = (str:any,target:any)=>{
let data = {
str:str == props.selectKey?'':str,
dom:target,
posiiton:'nav',
}
emit("setSelectKey", data);
// emit("update:selectKey", str);
}
watch(()=>props.navListData,(newVal:any)=>{
let list:any = projectList.all
const combined = [...newVal, ...list];
const seen = new Set();
data.navList = combined.filter((item:any) => {
if (seen.has(item.value)) {
return false; // 如果value已经出现过，跳过当前对象
} else {
seen.add(item.value); // 如果value没有出现过，保留当前对象
return true;
}
});
})
const setUnfold = ()=>{
data.isUnfold = !data.isUnfold
emit("unfold");
}
const goHome = ()=>{
store.commit('createProbject')
emit("goHome");
}
const uploadSelectKey = (str:any)=>{
let dom = document.querySelector(`.homeNav .${str}`)
setNav(str,dom)
}
return{
...toRefs(dataDom),
...toRefs(data),
setNav,
setUnfold,
goHome,
projectList,
uploadSelectKey,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.homeNav{
padding: 5rem 0rem;
padding-bottom: 2.5rem;
background: #f7f8fa;
transition: all .3s;
width: 7rem;
overflow: hidden;
display: flex;
flex-direction: column;
&.active{
width: 25rem;
}
> div{
display: flex;
cursor: pointer;
border-radius: 1rem;
margin: 0 1rem;
&.list{
color: #bfbfbf;
pointer-events: none;
}
&.active{
background: #ebebeb;
}
&.unfold{
&.active{
border: 1px solid #000000;
}
}
&.list{
&.exist{
color: #000000;
pointer-events: auto;
}
}
> i,> svg{
font-size: 2rem;
margin-right: 1rem;
display: flex;
width: 5rem;
height: 5rem;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
> svg{
padding: 1rem;
}
> span{
font-size: 1.8rem;
line-height: 5rem;
white-space: nowrap;
}
}
.border{
border-bottom: 1px solid #D9D9D9;
margin: 1rem 0;
}
}
</style>

231
src/component/HomePage/index/workflow/navBox.vue
View File

@@ -1,231 +0,0 @@
<template>
<div class="homeNavBox">
<div class="navList">
<img :class="workflowType" v-if="workflowType == 'seriesDesign'" src="@/assets/images/homePage/seriesDesign.png" alt="">
<img :class="workflowType" v-if="workflowType == 'singleProductDesign'" src="@/assets/images/homePage/singleProductDesign.png" alt="">
<img :class="workflowType" v-if="workflowType == 'printDesign'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
<img :class="workflowType" v-if="workflowType == 'productDrawingDesign'" src="@/assets/images/homePage/productDrawingDesign.png" alt="">
<img :class="workflowType" v-if="workflowType == 'printingDesign3D'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
<img :class="workflowType" v-if="workflowType == 'sketchDesign'" src="@/assets/images/homePage/sketchDesign.png" alt="">
<div class="navListItem"
v-for="item in navListData" :key="item.value"
:class="[
(item?.select || (selectObject.model.id > -1 && item.value == 'mannequin'))?'active':'',
`item${item.task}`,
workflowType,
]"
@click.stop="setNav(item.value,$event)" >
<!-- @click.stop="setSelect(item)" -->
<div class="background"></div>
<div class="text">
<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
</div>
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
props:{
selectKey:{type:String,default:''},
isShowMark:{type:Boolean,default:false},
workflowType:{type:String,default:''},
},
emits:['setSelectKey','setModule'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
navListData:computed(()=>store.state.Workspace.projectList),
})
const dataTime = reactive({
clickTime:null as any,
})
const dataDom = reactive({
navList:null as any
})
const setNav = async (str:any,event:any,button:string)=>{
clearTimeout(dataTime.clickTime)
let data = {
str:str == props.selectKey?'':str,
dom:event.target,
posiiton:'navBox',
button,
}
emit("setSelectKey", data);
// emit("update:selectKey", str);
}
const setSelect = (item:any)=>{
clearTimeout(dataTime.clickTime)
dataTime.clickTime = setTimeout(async ()=>{//防止双击和单机都执行的问题
if (item.select) {
let data = {
select:false,
value:item.value
}
emit('setModule',data)
item.select = false
}else{
let data = {
select:true,
value:item.value
}
emit('setModule',data)
item.select = true
}
},200)
}
return{
...toRefs(dataDom),
...toRefs(data),
setNav,
setSelect,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.homeNavBox{
width: 100%;
height: 100%;
position: relative;
> .navList{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
img{
&.seriesDesign{width: 98rem;height: 58rem;}
&.singleProductDesign{width: 98rem;height: 43rem;}
&.printDesign{width: 8rem;height: 1.3rem;}
&.printingDesign3D{width: 8rem;height: 1.3rem;}
&.productDrawingDesign{width: 38rem;height: 23rem;}
&.sketchDesign{width: 38rem;height: 23rem;}
}
> .navListItem{
width: 22rem;
height: 10rem;
border-radius: 2rem;
border: 2px solid #000;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
overflow: hidden;
cursor: pointer;
padding: 2rem;
&.seriesDesign{
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 9rem;left: -22rem;}
&.item1-3{top: 23rem;left: -22rem;}
&.item1-4{top: 37rem;left: -22rem;}
&.item1-5{top: 51rem;left: -22rem;}
&.item2-1{top: 23rem;left: 8rem;}
&.item3-1{top: 23rem;left: 38rem;}
&.item4-1{top: 12rem;left: 68rem;}
&.item4-2{top: 34rem;left: 68rem;}
&.item5-1{top: 23rem;left: 98rem;}
}
&.singleProductDesign{
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 9rem;left: -22rem;}
&.item1-3{top: 23rem;left: -22rem;}
&.item1-4{top: 37rem;left: -22rem;}
&.item1-5{top: 51rem;left: -22rem;}
&.item2-1{top: 16.5rem;left: 8rem;}
&.item3-1{top: 16.5rem;left: 38rem;}
&.item4-1{top: 16.5rem;left: 68rem;}
&.item5-1{top: 16.5rem;left: 98rem;}
}
&.printDesign,&.printingDesign3D{
&.item1-1{top: -3rem;left: -22rem;}
&.item2-1{top: -3rem;left: 8rem;}
}
&.productDrawingDesign{
&.item1-1{top: 6.5rem;left: -22rem;}
&.item2-1{top: -4rem;left: 8rem;}
&.item2-2{top: 17rem;left: 8rem;}
&.item3-1{top: 6.5rem;left: 38rem;}
}
&.sketchDesign{
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 18rem;left: -22rem;}
&.item2-1{top: 6.5rem;left: 8rem;}
&.item3-1{top: 6.5rem;left: 38rem;}
}
.background{
// background: #e8e8e8;
background: #e8e8e8;
transition: all .3s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text{
position: relative;
display: flex;
align-items: center;
> i{
font-size: 2rem;
margin-right: 1rem;
display: flex;
&.active{
box-shadow: #000 0px 0px 10px;
border-radius: 1rem;
padding: .5rem;
}
}
}
> .designIcon{
opacity: 1;
position: absolute;
bottom: 1rem;
right: 1rem;
cursor: pointer;
box-shadow: #000 0px 0px 2px;
border-radius: 1rem;
> i{
display: flex;
padding: .5rem;
font-size: 2rem;
}
}
&.active{
border: 3px solid #000;
.background{
opacity: .5;
}
}
&:hover{
border: 3px solid #000;
.background{
opacity: .5;
}
}
}
}
}
</style>

371
src/component/HomePage/index/workflow/workspace.vue
View File

@@ -1,371 +0,0 @@
<template>
<div class="workspace">
<div class="workspaceBox">
<div class="title marginBottom" style=" display:flex;align-items: center;">
<i v-if="firstTime" @click="setBack" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>
Project setting <div v-show="workflowTitle" style="font-size: 1.4rem;margin-top: auto;">({{ workflowTitle }})</div>
</div>
<div class="projectName marginBottom" v-if="show.title">
<div class="text">Project name: <span style="color: red;">*</span></div>
<div class="input">
<input type="text" v-model="selectObject.name">
<!-- <i class="fi fi-rr-edit"></i> -->
</div>
</div>
<div class="gender marginBottom" v-if="show.age">
<div class="text">Role</div>
<div class="radio">
<label>
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
<span>Adult</span>
</label>
<label>
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
<span>Child</span>
</label>
</div>
</div>
<div class="gender marginBottom">
<div class="text">Gender：</div>
<div class="radio">
<label>
<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
<span>Female</span>
</label>
<label>
<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
<span>Male</span>
</label>
</div>
</div>
<div class="style marginBottom" v-if="show.style">
<div class="text">Style：</div>
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
</div>
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
<a-slider class="system_silder"
v-model:value="selectObject.systemDesignerPercentage"
:tip-formatter="formatter"
:tooltipVisible="false"
>
</a-slider>
<div class="text">
<div class="left">
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
</div>
<div class="right">
{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
</div>
</div>
</div>
<div class="position marginBottom" style="display: flex; align-items: center;justify-content: space-between;" v-show="show.position">
<div class="text">
Category:
</div>
<generalMenu style="width:80%" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
</div>
<div class="complete">
<div class="gallery_btn" @click="complete">Complete</div>
</div>
</div>
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,watch,nextTick,onBeforeUnmount,toRefs, reactive, onMounted, inject} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import workspace from './model/workspace.vue'
import router from '@/router';
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { Https } from '@/tool/https';
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
import { id } from 'element-plus/es/locale';
import { message } from 'ant-design-vue';
import {projectList} from '@/tool/listData'
export default defineComponent({
components:{
habitSetStyle,generalMenu
},
props:{
workflowType:{
type:String,
default:''
},
httpWorkflowType:{
type:String,
default:''
},
workflowTitle:{
type:String,
default:''
},
firstTime:{
type:Boolean,
default:false
}
},
emits:['setProject'],
setup(props,{emit}) {
const { t } = useI18n();
const store = useStore();
const data = reactive({
selectObject_:computed(()=>store.state.Workspace.probjects),//选择的项目
selectObject:{} as any,
femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
show:{
title:true,
gender:false,
style:false,
age:false,
systemDesigner:false,
position:false,
},
systemDesigner:{
system:0,
designer:0,
},
setIsShowMark:inject('setIsShowMark') as any,
})
watch(()=>data.selectObject_,(newVal)=>{
data.selectObject = JSON.parse(JSON.stringify(newVal))
})
const dataDom = reactive({
habitSetStyle:null as any,
})
const setStyle = ()=>{
dataDom.habitSetStyle.init(data.selectObject);
}
const setWorkspaceStyle = (value:any)=>{
data.selectObject.styleName = value.name
data.selectObject.style = value.value
data.selectObject.styleId = value.id
// store.commit('setProbject',data)
}
const setprintModel = (value:any)=>{
data.selectObject.position = value
}
const formatter = (value: number)=>{
data.systemDesigner.system = 100 - value
data.systemDesigner.designer = value
let num = Math.abs((value-50)*2)
return `${num}%`;
}
const complete = ()=>{
if(!data.selectObject.name){
message.info(t('PrintboardUpload.jsContent7'))
return
}
let value = {
name:data.selectObject.name,
process:props.httpWorkflowType,
styleId:data.show.style?data.selectObject.styleId:null,
id:data.selectObject.id,
workspace:{
sex:data.selectObject.sex,
// sex:data.show.gender?data.selectObject.sex:null,
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
position:data.show.position?data.selectObject.position.value:'Overall',
ageGroup:data.show.style?data.selectObject.ageGroup:null,
// position:data.selectObject,
} as any,
}
Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
if(rv){
data.selectObject.id = rv.id
let model:any = {}
let position = []
if(data.selectObject.sex == "Female"){
// if(rv.workspaceVO.sex == "Female"){
model = {
id:rv.workspaceVO.mannequinFemaleId,
type:rv.workspaceVO.mannequinFemaleType,
url:rv.workspaceVO.femalePresignedUrl,
}
position = store.state.UserHabit.FemalePosition
}else{
model = {
id:rv.workspaceVO.mannequinMaleId,
type:rv.workspaceVO.mannequinMaleType,
url:rv.workspaceVO.malePresignedUrl,
}
position = store.state.UserHabit.MalePosition
}
// model.url = rv.workspaceVO.malePresignedUrl
data.selectObject.model = model
data.selectObject.positionList = position
store.commit('setProbject',data.selectObject)
emit('setProject','set')
}
})
}
const openSetData = ()=>{
}
const setBack = ()=>{
let data = {
type:'',
httpType:'',//项目类型
}
store.commit('setProbject',data)
store.commit('setProjectList',[])
}
onMounted(()=>{
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
data.show.age = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'sketchDesign')
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
data.show.position = (props.workflowType == 'singleProductDesign')
if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
data.setIsShowMark(true)
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
(rv) => {
data.setIsShowMark(false)
rv.forEach((item:any) => {
let name = item.value
item.value = item.name
item.name = name
});
data.selectObject.style = rv[0].value
data.selectObject.styleName = rv[0].name
data.selectObject.styleId = rv[0].id
store.commit('setMannequinStyle',rv)
}
).catch(res=>{
data.setIsShowMark(false)
});
}
})
watch(()=>data.selectObject.sex,(newVal)=>{
if(newVal == 'Male'){
data.selectObject.positionList = data.malePosition
}else{
data.selectObject.positionList = data.femalePosition
}
data.selectObject.position = data.selectObject.positionList[0]
})
return{
projectList,
...toRefs(dataDom),
...toRefs(data),
setStyle,
setWorkspaceStyle,
setprintModel,
formatter,
complete,
openSetData,
setBack,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.workspace{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 1.8rem;
> .workspaceBox{
width: 55rem;
padding: 0 5rem;
> .marginBottom{
margin-bottom: 3rem;
}
> .title{
font-size: 2.7rem;
> span{
color: #999999;
font-size: 1.4rem;
}
}
> .projectName{
> .text{
margin-bottom: 2rem;
}
> .input{
padding: 1rem 2rem;
// padding: 2rem 2.7rem;
font-size: 1.6rem;
border-radius: 1.6rem;
border: 2px solid #D0D0D0;
display: flex;
> input{
flex: 1;
border: none;
}
> i{
display: flex;
color: #999999;
align-items: center;
font-size: 2.4rem;
}
}
}
> .gender{
display: flex;
> .text{
width: 8rem;
}
> .radio{
display: flex;
margin-left: 4.5rem;
> label{
display: flex;
margin-right: 4rem;
>input{
margin-right: 1.5rem;
}
}
}
}
> .style{
display: flex;
align-items: center;
justify-content: space-between;
}
> .systemDesigner{
> .text{
display: flex;
justify-content: space-between;
}
}
> .position{
:deep(.generalMenu_printModel){
position: relative;
margin: 0;
> div,> ul{
width: 100%;
border-radius: 1.6rem;
border: 2px solid #D0D0D0;
}
}
}
> .complete{
width: 100%;
text-align: right;
> div{
}
}
}
}
</style>

2
src/component/LibraryPage/searchLabel.vue
View File

@@ -277,7 +277,7 @@ export default defineComponent({
let bor = false
if(this.newPicName && this.selectCode == 'History'){//多选修改名字
await Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
await Https.axiosPost(Https.httpUrls.classificationSaveOrUpdate, data).then(
(rv: any) => {
bor = true
}

2
src/component/LibraryPage/setLabel.vue
View File

@@ -268,7 +268,7 @@ export default defineComponent({
}
data.classificationName = val.classificationName
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
Https.axiosPost(Https.httpUrls.classificationSaveOrUpdate, data).then(
(rv: any) => {
this.getClass()
}

2
src/component/LoginPage/googleLogin.vue
View File

@@ -33,7 +33,7 @@
scriptSrc:'https://accounts.google.com/gsi/client',
script:null
})
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
let GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
// 使用谷歌登录的api
const createGmailLogin = async ()=>{

0
src/component/HomePage/index/model/cloudUploading/createCloud.vue → src/component/home/batchGeneration/createCloud.vue
View File

362
src/component/home/batchGeneration/index.vue Normal file
View File

@@ -0,0 +1,362 @@
<template>
<div class="uploading">
<div class="title">
<div class="list">
<div
class="titleItem active"
>
<span class="detailText">All</span>
</div>
</div>
{{ selectObject.id }}123
<div class="searchObject generalModel_state">
<div class="generalModel_state_item smail">
<span>Project :</span>
<a-select
v-model:value="changeEvent"
show-search
allowClear
style="width: 150px"
placeholder="Please select"
:options="objectList"
@change="handleChange"
></a-select>
</div>
</div>
<div class="createCloud" v-show="selectObject.id">
<div class="gallery_btn" @click="createClound">Create</div>
</div>
</div>
<div class="contentList">
<div class="title">
<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
{{ item.name }}
</div>
</div>
<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'">
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
</span>
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
Review
</span>
</td>
</tr>
</div>
<a-pagination style="text-align: center;" v-model:current="currentPage" :total="total" show-less-items />
</div>
<createCloud ref="createCloud" :cloudList="generateList[workflowType]" @getContentList="submitGetContentList"></createCloud>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import createCloud from "./createCloud.vue";
import { da } from 'element-plus/es/locale';
export default defineComponent({
components:{
createCloud,
},
props:{
workflowType:{
type:String,
default:'' as any,
required:true
}
},
emits:['retrieve'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
pageType:'list',
pageSize:10,
currentPage:1,
total:0,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
generateList:{
seriesDesign:[
{
label:'Design',
value:'design',
consumption:0,
},{
label:'To Product Image',
value:'toProductImage',
consumption:5,
},{
label:'Relight',
value:'relight',
consumption:5,
},{
label:'Transfer Pose',
value:'poseTransfer',
consumption:10,
},
],
singleProductDesign:[
{
label:'Design',
value:'design',
consumption:0,
},{
label:'To Product Image',
value:'toProductImage',
consumption:5,
},
],
// printDesign:[
// {
// label:'1',
// value:100,
// }
// ],
productDrawingDesign:[
{
label:'To Product Image',
value:'toProductImage',
consumption:5,
},{
label:'Relight',
value:'relight',
consumption:5,
},{
label:'Transfer Pose',
value:'poseTransfer',
consumption:10,
},
],
// printingDesign3D:[
// {
// label:'1',
// value:100,
// }
// ],
// sketchDesign:[]
},
cloudTiltleList:[
{
name:'Task type',
value:'buildType',
fun:(value:any)=>{
let str = ''
if(value == 'design')str = 'Design'
if(value == 'toProductImage')str = 'To Product Image'
if(value == 'relight')str = 'Relight'
if(value == 'poseTransfer')str = 'Transfer Pose'
return str
}
},{
name:'Quantity generated',
value:'nums',
},{
name:'Creation time',
value:'updateTime',
fun:(value:any)=>{
if(!value)return
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
}
},{
name:'Start time',
value:'updateTime',
fun:(value:any)=>{
//没开始内容为 -
if(!value)return
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
}
},{
name:'End time',
value:'updateTime',
fun:(value:any)=>{
if(!value)return
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
}
},{
name:'Status',
value:'process',
fun:(value:any)=>{
if(value == '100.00%'){
return 'Completed'
}else{
return value
}
}
},{
name:'Operation',
value:'operation',
},
] as any,
contentList:[
] as any,
isGetContentList:false as any,
})
const dataDom = reactive({
createCloud,
})
const createClound = ()=>{
data.isGetContentList = false
dataDom.createCloud.init()
}
const detailIamge = (item:any)=>{
//去除里面的T2025-04-17T13:45:43
if(item.process == '100.00%' || item.status == 1){
let value = {
taskId:item.taskId,
page:1,
size:10,
buildType:item.buildType,
}
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
console.log(rv)
if(rv.design && rv.design.length > 0){
store.commit('addDesignCollectionList',rv.design)
emit('retrieve','design')
}else if(rv.toProductImage && rv.toProductImage.length > 0){
store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
emit('retrieve','toProduct')
}else if(rv.relight && rv.relight.length > 0){
store.commit('setCloudList',{str:'relight',list:rv.relight})
emit('retrieve','relight')
}else if(rv.poseTransfer && rv.poseTransfer.length > 0){
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
emit('retrieve','poseTransfer')
}
data.isGetContentList = false
})
}
}
const getContentList = ()=>{
if(data.isGetContentList){
let value = {
page:data.currentPage,
size:data.pageSize,
projectId: data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
data.contentList = rv.content
data.total = rv.total
let arr = rv.content
let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
if(!result)data.isGetContentList = false
setTimeout(()=>{
getContentList()
},1500)
})
}
}
const submitGetContentList = ()=>{
data.isGetContentList = true
getContentList()
}
onBeforeUnmount(()=>{
data.isGetContentList = false
})
onMounted(()=>{
data.isGetContentList = true
getContentList()
})
return{
...toRefs(dataDom),
...toRefs(data),
createClound,
detailIamge,
getContentList,
submitGetContentList,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.uploading{
width: 100%;
height: 100%;
position: relative;
padding-top: 3rem;
display: flex;
flex-direction: column;
> .title{
width: 100%;
display: flex;
> .list{
display: flex;
margin-bottom: 2.5rem;
> .titleItem:last-child{
margin-right: 0;
}
> .titleItem{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .titleItem::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .active {
color: #000;
font-weight: 600;
}
> .active::before {
width: 100%;
}
}
> .createCloud{
margin-left: auto;
}
> .searchObject{
margin-left: auto;
}
}
> .contentList{
flex: 1;
overflow: hidden;
padding-top: 2.5rem;
display: flex;
flex-direction: column;
> .content tr , > .title{
display: flex;
justify-content: space-between;
padding: 0 1.2rem;
}
> .title{
background: #F7F7F7;
> .titleItem{
line-height: 4.6rem;
font-size: 2rem;
color: #666666;
width: calc(100% / 4);
text-align: center;
}
}
.content{
flex: 1;
overflow: hidden;
> tr{
> td{
text-align: center;
width: calc(100% / 4);
line-height: 4.6rem;
font-size: 2.2rem;
}
}
}
}
}
</style>

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

@@ -54,9 +54,9 @@
<i class="fi fi-rs-paperclip-vertical">
<input type="file" @change="handleFileUpload($event)">
</i>
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
</div>
<div class="sendBox">
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
<div class="maxNum">{{ chatContent?.length }}/10000</div>
<div class="send" :class="{active:chatContent?.length>0}" @click="sendChat">
<i class="fi fi-ss-paper-plane-top"></i>
@@ -525,6 +525,21 @@ export default defineComponent({
}
}
}
> .enableThinking{
width: 10rem;
padding: .2rem .4rem;
text-align: center;
font-size: 1.4rem;
border: 1px solid #000;
border-radius: .4rem;
cursor: pointer;
margin-left: 1rem;
&.active{
background: #000;
color: #fff;
}
}
}
i{
font-size: 2rem;
@@ -547,21 +562,7 @@ export default defineComponent({
> .sendBox{
display: flex;
align-items: center;
> .enableThinking{
width: 10rem;
padding: .2rem .4rem;
text-align: center;
font-size: 1.4rem;
border: 1px solid #000;
border-radius: .4rem;
cursor: pointer;
margin-right: 1rem;
&.active{
background: #000;
color: #fff;
}
}
> .maxNum{
font-size: 1.2rem;
margin-right: .8rem;

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

@@ -32,6 +32,7 @@
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
<mannequin ref="mannequin" v-if="openType == 'mannequin'"></mannequin>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
@@ -50,10 +51,11 @@ import MoodboardUpload from './collection/MoodboardUpload.vue';
import PrintboardUpload from './collection/PrintboardUpload.vue';
import ColorboardUpload from './collection/ColorboardUpload.vue';
import SketchboardUpload from './collection/SketchboardUpload.vue';
import mannequin from './mannequin/index.vue';
export default defineComponent({
components:{
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
},
props:{
},
@@ -64,6 +66,7 @@ export default defineComponent({
habitSetStyle:false,
isShowMark:false,
openType:'',
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
})
let driver__:any = computed(()=>{
return store.state.Guide.guide
@@ -74,6 +77,7 @@ export default defineComponent({
printBoard:null as any,
colorBoard:null as any,
sketchBoard:null as any,
mannequin:null as any,
}) as any
const init = (value:any)=>{
data.habitSetStyle = true
@@ -85,8 +89,21 @@ export default defineComponent({
let cleardata = ()=>{
data.habitSetStyle = false
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
saveProject(data.openType)
}
const saveProject = (str:any)=>{
if(str == 'design')return
let value:any = {
projectId:data.selectObject.id,
}
store.dispatch('getProjectData',str).then((data)=>{
if(!data[str])return
value[str] = data[str]
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
})
})
}
return{
...toRefs(dataDom),
...toRefs(data),
@@ -107,6 +124,7 @@ export default defineComponent({
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
.collectionBox{
width: 100%;
height: 100%;

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

@@ -887,7 +887,16 @@ export default defineComponent({
moodboardPosition,
} = this.store.state.UploadFilesModule.allBoardData;
this.randomNum()
let workspace = this.store.state.Workspace.probjects
let modelList = [] as any;
let workspace:any = this.store.state.Workspace.probjects
workspace.model.forEach((item:any)=>{
let obj = {
id:item.id,
type:item.type,
collectionElementId:item.collectionElementId
}
modelList.push(obj)
})
let data: any = {
colorBoards: this.getColorBoard(colorBoards),
// marketingSketchs: this.getBoardId(marketingSketchFiles),
@@ -898,9 +907,10 @@ export default defineComponent({
switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
// templateId: 3377,
templateId: workspace.model.id,
modelType:workspace.model.type,
templateId: '',
// templateId: workspace.model.id,
mannequins: modelList,
modelType:'',
modelSex:workspace?.sex,
moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,

21
src/component/HomePage/index/model/mannequin/edit.vue → src/component/home/design/mannequin/edit.vue
View File

@@ -1,11 +1,9 @@
<template>
<div ref="placementModal" v-if="placementShow">
<a-modal class="generalModel "
:class="{fullScreen:!isPop}"
v-model:visible="placementShow"
:footer="null"
:width="isPop?'150rem':'100%'"
:height="isPop?'90rem':'100%'"
width="75%"
:get-container="() => $refs.placementModal"
:maskClosable="false"
:mask="mannEditMask"
@@ -1153,12 +1151,12 @@ export default defineComponent({
padding: 4rem 5rem;
margin-bottom: 0;
.generalModel_btn {
.generalModel_closeIcon{
transform: translate(-100%, 100%);
svg{
color: #000;
}
}
// .generalModel_closeIcon{
// transform: translate(-100%, 100%);
// svg{
// color: #000;
// }
// }
}
}
}
@@ -1413,8 +1411,9 @@ export default defineComponent({
position: relative;
// height: 57.6rem;
// width: 40.8rem;
height: 68rem;
width: 47rem;
// height: 68rem;
height: calc(100% - 6rem);
aspect-ratio: 1 / 1.446;
margin: 0 auto;
.img_content_block{

110
src/component/HomePage/index/model/mannequin/index.vue → src/component/home/design/mannequin/index.vue
View File

@@ -26,6 +26,13 @@
</div>
</div>
</div>
<div class="selectModel">
Current Model :
<div class="item" v-for="item ,index in selectObject.model" @click="deleteSelectModel(index)">
<img :src="item.url" alt="">
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
<div class="right">
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
@@ -33,7 +40,7 @@
</div>
</div>
<div class="model" v-mousewheel>
<div class="item" v-for="item,index in modelList" :key="item.id" :class="[item.id == selectObject.model.id?'active':'',!systemUser?'library':'']" @click="setSelectKey(item)">
<div class="item" v-for="item,index in modelList" :key="item.id" :class="[!!selectObject.model.find(objectItem => objectItem.id === item.id)?'active':'',!systemUser?'library':'']" @click="setSelectKey(item)">
<img :src="item.presignedUrl" alt="">
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
@@ -56,8 +63,8 @@
</div>
</div>
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
<edit ref="edit" :ageGroup="selectObject.ageGroup" @submit="getModel"></edit>
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
</div>
</template>
<script lang="ts">
@@ -66,7 +73,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
import habitSetStyle from "@/component/modules/habitSetStyle.vue";
import edit from './edit.vue';
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { Item } from 'ant-design-vue/lib/menu';
@@ -91,11 +98,11 @@ export default defineComponent({
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
if(newValue != oldValue){
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
data.mannequinStyleList.unshift({
name:'All',
value:'',
id:'',
})
// data.mannequinStyleList.unshift({
// name:'All',
// value:'',
// id:'',
// })
}
},{immediate:true})
watch(()=>data.selectObject.sex,(newVal)=>{
@@ -130,14 +137,39 @@ export default defineComponent({
})
}
const setSelectKey = (item:any)=>{
let value = {
model:{
id:item.id,
url:item.presignedUrl,
type:data.systemUser?'System':'Library',
let list = store.state.Workspace.probjects.model
let index = -1
list.forEach((val:any,listIndex:any)=>{
if(val.id == item.id){
index = listIndex
}
})
if(index != -1){
if(list.length > 1){
list.splice(index,1)
}else{
message.info(t('LibraryPage.jsContent13'))//至少选择一个
}
}else if(index == -1){
if(list.length <= 3){
let model = {
id:item.id,
url:item.presignedUrl,
type:data.systemUser?'System':'Library',
}
list.push(model)
}else{
message.info(t('LibraryPage.jsContent13'))//最多选择四个
}
}
store.commit('setProbject',value)
}
const deleteSelectModel = (index:number)=>{
let list = store.state.Workspace.probjects.model
if(list.length > 1){
list.splice(index,1)
}else{
message.info(t('LibraryPage.jsContent13'))//最多选择四个
}
}
const setSystemUser = ()=>{
data.systemUser = !data.systemUser
@@ -190,6 +222,11 @@ export default defineComponent({
}
const deleteSinglePic = (item:any,index:number)=>{
let list = store.state.Workspace.probjects.model
if(!!list.find((objectItem:any) => objectItem.id === item.id)){
message.info(t('LibraryPage.jsContent12'));
return
}
Modal.confirm({
title: t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
@@ -244,6 +281,7 @@ export default defineComponent({
...toRefs(dataDom),
...toRefs(data),
setSelectKey,
deleteSelectModel,
setSystemUser,
setStyle,
setWorkspaceStyle,
@@ -296,11 +334,44 @@ export default defineComponent({
display: flex;
justify-content: space-between;
margin: 4rem 0 3rem;
> .left,> .right{
> .left,> .right,> .selectModel{
display: flex;
align-items: center;
justify-content: space-between;
}
> .selectModel{
> .item{
height: 6rem;
width: 6rem;
margin: 0 .2rem;
position: relative;
>img{
height: 100%;
width: 100%;
object-fit: contain;
}
> span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
color: #fff;
cursor: pointer;
display: none;
}
&:hover{
> span{
display: flex;
}
}
}
margin-left: auto;
}
> .right{
> .switch{
margin: 0 2rem;
@@ -315,13 +386,14 @@ export default defineComponent({
}
}
> .model{
height: 70rem;
// height: 70rem;
width: auto;
max-width: 130rem;
display: flex;
flex-direction: row;
overflow-y: auto;
max-height: calc(100% - 20rem);
overflow-y: hidden;
// max-height: calc(100% - 20rem);
height: 100%;
position: relative;
> .item{
width: 25rem;
@@ -384,7 +456,7 @@ export default defineComponent({
}
> .uploadBox{
padding: 0 2rem;
right: 0;
right: -1px;
position: sticky;
flex-shrink: 0;
background: #fff;

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

@@ -133,6 +133,10 @@ export default defineComponent({
styleId:rv.workspaceVO.styleId,
styleName:rv.workspaceVO.styleName,
sex:rv.workspaceVO.sex,
userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
userBrandDnaName:rv.workspaceVO.userBrandDnaName,
brandPercentage:rv.workspaceVO.brandPercentage,
userBrandDna:rv.workspaceVO.userBrandDna,
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
position:{
label:rv.workspaceVO.positionEnum.value,
@@ -145,26 +149,15 @@ export default defineComponent({
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
},
model:{}
model:[]
}
let model:any = {}
let position = []
if(storeData.sex == "Female"){
model = {
id:rv.workspaceVO.mannequinFemaleId,
type:rv.workspaceVO.mannequinFemaleType,
url:rv.workspaceVO.femalePresignedUrl,
}
position = store.state.UserHabit.FemalePosition
}else{
model = {
id:rv.workspaceVO.mannequinMaleId,
type:rv.workspaceVO.mannequinMaleType,
url:rv.workspaceVO.malePresignedUrl,
}
position = store.state.UserHabit.MalePosition
}
storeData.model = model
// storeData.model = model
data.selectObject.positionList = position
storeData.positionList = position
store.commit('setProbject',storeData)
@@ -178,7 +171,6 @@ export default defineComponent({
}
const setChatData = ()=>{
if(!data.chatData)return
console.log(dataDom.chatDom?.enableThinking,data.chatData)
nextTick(()=>{
dataDom.chatDom.enableThinking = data.chatData.enableThinking
dataDom.chatDom.filList = data.chatData.filList
@@ -208,6 +200,18 @@ export default defineComponent({
}
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']
let canvasData = ['canvas']

48
src/component/home/newProject/index.vue
View File

@@ -30,9 +30,9 @@
<i class="fi fi-rs-paperclip-vertical">
<input type="file" @change="handleFileUpload($event)">
</i>
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
</div>
<div class="sendBox">
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
<div class="maxNum">{{ chatContent.length }}/10000</div>
<div class="send" @click="sendChat">
<i class="fi fi-ss-paper-plane-top"></i>
@@ -246,22 +246,31 @@ export default defineComponent({
position: relative;
> .contentBox{
width: 100%;
height: calc(100% - 7.8rem);
height: calc(100% - 3.9rem);
// height: calc(100% - 7.8rem);
display: flex;
align-items: center;
justify-content: center;
> .content{
// background: red;
width: 88rem;
// height: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
> .title{
font-size: 2rem;
font-weight: 600;
text-align: center;
}
> .workspaceBox{
flex: 1;
border-radius: 2.4rem;
padding: 1.2rem;
border: 1px solid #0000001a;
:deep(.workspace){
border: 1px solid #0000001a;
padding: 0;
height: auto;
}
}
> .selectFlow{
@@ -379,6 +388,21 @@ export default defineComponent({
}
}
}
> .enableThinking{
width: 10rem;
padding: .2rem .4rem;
margin-left: 1rem;
text-align: center;
font-size: 1.4rem;
border: 1px solid #000;
border-radius: .4rem;
cursor: pointer;
&.active{
background: #000;
color: #fff;
}
}
}
i{
font-size: 2rem;
@@ -401,21 +425,7 @@ export default defineComponent({
> .sendBox{
display: flex;
align-items: center;
> .enableThinking{
width: 10rem;
padding: .2rem .4rem;
text-align: center;
font-size: 1.4rem;
border: 1px solid #000;
border-radius: .4rem;
cursor: pointer;
margin-right: 1rem;
&.active{
background: #000;
color: #fff;
}
}
> .maxNum{
font-size: 1.2rem;
margin-right: .8rem;

19
src/component/home/newProject/setting.vue
View File

@@ -97,6 +97,10 @@ export default defineComponent({
styleId:rv.workspaceVO.styleId,
styleName:rv.workspaceVO.styleName,
sex:rv.workspaceVO.sex,
userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
userBrandDnaName:rv.workspaceVO.userBrandDnaName,
brandPercentage:rv.workspaceVO.brandPercentage,
userBrandDna:rv.workspaceVO.userBrandDna,
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
position:{
label:rv.workspaceVO.positionEnum.value,
@@ -109,26 +113,15 @@ export default defineComponent({
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
},
model:{}
model:[]
}
let model:any = {}
let position = []
if(storeData.sex == "Female"){
model = {
id:rv.workspaceVO.mannequinFemaleId,
type:rv.workspaceVO.mannequinFemaleType,
url:rv.workspaceVO.femalePresignedUrl,
}
position = store.state.UserHabit.FemalePosition
}else{
model = {
id:rv.workspaceVO.mannequinMaleId,
type:rv.workspaceVO.mannequinMaleType,
url:rv.workspaceVO.malePresignedUrl,
}
position = store.state.UserHabit.MalePosition
}
storeData.model = model
// storeData.model = model
storeData.positionList = position
dataDom.workspace.init(storeData)
}

96
src/component/home/newProject/workspace.vue
View File

@@ -38,6 +38,28 @@
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
</div>
<div class="style marginBottom brand">
<div class="text">Bran DNA</div>
<div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg"></div>
<!-- <div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg">{{ selectObject.userBrandDnaName }}</div> -->
<div class="gallery_btn" style="line-height: 5rem;" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
</div>
<div class="systemDesigner marginBottom" v-if="selectObject.userBrandDna">
<a-slider class="system_silder"
v-model:value="selectObject.brandPercentage"
:tip-formatter="formatterBrandDNA"
:tooltipVisible="false"
>
</a-slider>
<div class="text">
<div class="left">
Bran DNA<span>({{systemBrandDNA.system}}%)</span>
</div>
<div class="right">
System<span>({{systemBrandDNA.brandDNA}}%)</span>
</div>
</div>
</div>
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
<a-slider class="system_silder"
v-model:value="selectObject.systemDesignerPercentage"
@@ -66,6 +88,7 @@
</div>
</div>
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
<setBrandDNA ref="brandDNA" @setWorkspaceBrandDNA="setWorkspaceBrandDNA"></setBrandDNA>
</div>
</template>
<script lang="ts">
@@ -75,7 +98,8 @@ import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import workspace from './model/workspace.vue'
import router from '@/router';
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
import habitSetStyle from "@/component/modules/habitSetStyle.vue";
import setBrandDNA from "@/component/modules/setBrandDNA.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { Https } from '@/tool/https';
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
@@ -84,7 +108,7 @@ import { message } from 'ant-design-vue';
import {projectList} from '@/tool/listData'
export default defineComponent({
components:{
habitSetStyle,generalMenu
habitSetStyle,generalMenu,setBrandDNA
},
props:{
workflowType:{
@@ -126,6 +150,10 @@ export default defineComponent({
system:0,
designer:0,
},
systemBrandDNA:{
system:0,
brandDNA:0,
},
setIsShowMark:inject('setIsShowMark') as any,
})
// watch(()=>data.selectObject_,(newVal)=>{
@@ -136,16 +164,25 @@ export default defineComponent({
}
const dataDom = reactive({
habitSetStyle:null as any,
brandDNA:null as any,
})
const setStyle = ()=>{
dataDom.habitSetStyle.init(data.selectObject);
}
const setBrandDNA = ()=>{
dataDom.brandDNA.init(data.selectObject);
}
const setWorkspaceStyle = (value:any)=>{
data.selectObject.styleName = value.name
data.selectObject.style = value.value
data.selectObject.styleId = value.id
// store.commit('setProbject',data)
}
const setWorkspaceBrandDNA = (value:any)=>{
data.selectObject.userBrandDnaName = value.name
data.selectObject.userBrandDna = value.id
data.selectObject.userBrandDnaImg = value.img
}
const setprintModel = (value:any)=>{
data.selectObject.position = value
}
@@ -155,6 +192,12 @@ export default defineComponent({
let num = Math.abs((value-50)*2)
return `${num}%`;
}
const formatterBrandDNA = (value: number)=>{
data.systemBrandDNA.system = 100 - value
data.systemBrandDNA.brandDNA = value
let num = Math.abs((value-50)*2)
return `${num}%`;
}
const complete = ()=>{
if(!data.selectObject.name){
message.info(t('PrintboardUpload.jsContent7'))
@@ -171,11 +214,13 @@ export default defineComponent({
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
position:data.show.position?data.selectObject.position.value:'Overall',
ageGroup:data.show.style?data.selectObject.ageGroup:null,
userBrandDna:data.selectObject.userBrandDna,
brandPercentage:data.selectObject.brandPercentage,
// position:data.selectObject,
} as any,
}
Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate,value).then((rv)=>{
if(rv){
data.selectObject.id = rv.id
let model:any = {}
@@ -208,32 +253,13 @@ export default defineComponent({
}
onMounted(()=>{
store.commit('createProbject')
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
// data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
// data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
// data.show.age = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'sketchDesign')
// data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
// data.show.position = (props.workflowType == 'singleProductDesign')
if(!data.mannequinStyle){
data.setIsShowMark(true)
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
(rv) => {
data.setIsShowMark(false)
rv.forEach((item:any) => {
let name = item.value
item.value = item.name
item.name = name
});
data.selectObject.style = rv[0].value
data.selectObject.styleName = rv[0].name
data.selectObject.styleId = rv[0].id
store.commit('setMannequinStyle',rv)
}
).catch(res=>{
data.setIsShowMark(false)
});
}
data.selectObject.style = store.state.UserHabit.mannequinStyle[0].value
data.selectObject.styleName = store.state.UserHabit.mannequinStyle[0].name
data.selectObject.styleId = store.state.UserHabit.mannequinStyle[0].id
})
onBeforeUnmount(()=>{
})
watch(()=>data.selectObject.sex,(newVal)=>{
if(newVal == 'Male'){
@@ -249,9 +275,12 @@ export default defineComponent({
...toRefs(data),
init,
setStyle,
setBrandDNA,
setWorkspaceStyle,
setWorkspaceBrandDNA,
setprintModel,
formatter,
formatterBrandDNA,
complete,
openSetData,
}
@@ -275,7 +304,6 @@ export default defineComponent({
font-weight: 600;
font-size: 1.8rem;
padding: 1.2rem;
border-radius: 2.4rem;
> .workspaceBox{
width: 55rem;
padding: 0 5rem;
@@ -289,6 +317,15 @@ export default defineComponent({
margin-bottom: 3rem;
// width: 44%;
}
> .brand{
> .text{
> img{
width: 10rem;
height: 6rem;
object-fit: contain;
}
}
}
> .title{
font-size: 2.7rem;
> span{
@@ -342,6 +379,7 @@ export default defineComponent({
}
}
}
> .style{
display: flex;
align-items: center;

437
src/component/home/tools/cloudUploading/createCloud.vue Normal file
View File

@@ -0,0 +1,437 @@
<template>
<div class="createCloud" ref="createCloud"></div>
<a-modal
class="createCloud_modal generalModel"
v-model:visible="operationsModal"
:footer="null"
:get-container="() => $refs.createCloud"
width="50%"
:height="'77rem'"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
wrapClassName="#app"
:keyboard="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
</div>
<div class="modal_title_text">
<div>Create Cloud Generation Tasks</div>
</div>
<div class="allUserPoeration_center admin_page">
<div class="admin_state_item">
<span>Task type <span>*</span></span>
<a-select
v-model:value="buildType"
allowClear
style="width: 200px"
placeholder="Please select"
:options="cloudList"
@change="changeBuildType"
></a-select>
</div>
<div class="admin_state_item" v-show="buildType">
<span>Quantity <span>*</span></span>
<input
v-model="numberOfImages"
placeholder="Please enter number"
type="text"
style="width: 200px"
@input="changeNumberOfImages"
/>
</div>
<!-- toProductimg -->
<div v-show="buildType == 'toProductImage'" class="admin_state_item ">
<span>{{$t('ProductImg.Similarity')}}</span>
<div class="sliderAndImput" style="width: 200px">
<a-slider class="system_silder"
v-model:value="similarity"
:tooltipVisible="false"
:step="5"
>
</a-slider>
<input type="number" readonly v-model="similarity">
</div>
</div>
<div v-show="buildType == 'relight'" class="admin_state_item ">
<span>{{$t('ProductImg.RelightDirection')}}</span>
<a-select style="width: 200px" v-model:value="relightDirection" :options="relightDirectionList"></a-select>
</div>
<div v-show="buildType == 'relight'" class="admin_state_item ">
<span>{{$t('ProductImg.Highlight')}}</span>
<div class="sliderAndImput" style="width: 200px">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
:max="3"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
</div>
</div>
<div v-show="buildType == 'toProductImage' || buildType == 'relight'" class="admin_state_item">
<span>Keyword</span>
<input
v-model="generateText"
:placeholder="$t('Generate.inputContent1')"
type="text"
style="width: 200px"
/>
</div>
<div class="selectImgList generalScroll" v-mousewheel v-show="exhibitionImgList.length>0">
<div v-for="item in exhibitionImgList" class="item">
<img :src="item.designOutfitUrl||item.url" alt="">
</div>
</div>
<!-- <div class="admin_state_item" style="width: 100%;">
<span style="margin: 0;">Generation time：19min</span>
</div> -->
<div v-show="buildType" class="admin_state_item" style="width: 100%;">
<span style="margin: 0;">Cost credit：{{credits * numberOfImages}}</span>
</div>
</div>
<div class="allUserPoeration_btn admin_page">
<!-- <div class="admin_search_item" @click="cancelDsign">
Close
</div> -->
<div class="admin_search_item" @click="setOk">
OK
</div>
</div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template>
<script>
import { defineComponent, computed, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util";
import dayjs, { Dayjs } from 'dayjs';
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import {getMinioUrl} from '@/tool/util'
const md5 = require("md5");
export default defineComponent({
components: {
},
props:{
cloudList:{
type:Array,
default:[]
}
},
emits: ['getContentList'],
setup(props,{emit}) {
const store = useStore();
let operations = reactive({
operationsModal:false,
loadingShow:false,
})
let operationsData = reactive({
buildType:'',
numberOfImages:'',
credits:0,
exhibitionImgList:[],//选择的图片
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
//toProduct
generateText:'',//输入的内容
similarity:30,
brightenValue:1,//亮度
relightDirection:'Right Light',//打光方向
relightDirectionList:[
{
value:'Right Light',
label:useI18n().t('ProductImg.RightLight')
},{
value:'Left Light',
label:useI18n().t('ProductImg.LeftLight')
},{
value:'Top Light',
label:useI18n().t('ProductImg.TopLight')
},{
value:'Bottom Light',
label:useI18n().t('ProductImg.BottomLight')
}
]
})
let init = ()=>{
operations.operationsModal = true
}
const changeBuildType = ()=>{
if(operationsData.buildType == 'design'){
operationsData.exhibitionImgList = []
}else if(operationsData.buildType == 'toProductImage'){
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.design.likeData
}else if(operationsData.buildType == 'relight'){
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
}else if(operationsData.buildType == 'poseTransfer'){
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
}
props.cloudList.forEach((item)=>{
if(item.value == operationsData.buildType){
operationsData.credits = item.consumption
}
})
}
let getPorductImg = ()=>{
let modularData = store.state.UploadFilesModule.modularData
let list = []
if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
let productOrRelight = []
if(operationsData.buildType == 'toProductImage')productOrRelight = modularData.design.likeData
if(operationsData.buildType == 'relight')productOrRelight = modularData.toProduct
productOrRelight.forEach((item)=>{
if(!item.id)return
let obj = {
"createTime": "",
"elementId": 0,
"elementType": "",
"id": 0,
"isLike": 0,
"taskId": "",
"toProductImageRecordId": 0,
"url": "",
}
obj.elementId = item.designOutfitId
obj.elementType = 'DesignOutfit'
if(operationsData.buildType == 'relight'){
obj.elementId = item.id
obj.elementType = 'ToProductImage'
}
list.push(obj)
})
}
return list
}
const getImageStrength = () => {
let imageStrength = operationsData.similarity == 100? 95 :operationsData.similarity
return imageStrength;
};
const getPoseTransformData = ()=>{
let list = []
let toProduct = store.state.UploadFilesModule.modularData.toProduct
toProduct.forEach((item)=>{
let obj = {
poseId:1,
productImage:getMinioUrl(item.url)
}
list.push(obj)
})
return list
}
let setAddData = ()=>{
return {
"buildType": operationsData.buildType,
nums: operationsData.numberOfImages,
projectId: operationsData.selectObject.id,
//productimg
toProductImage:{
prompt:operationsData.generateText,//输入的内容
toProductImageVOList:getPorductImg(),//选择的图片
projectId: operationsData.selectObject.id,
direction:operationsData.relightDirection,//打光方向
brightenValue:operationsData.brightenValue,
imageStrength:(100 - getImageStrength())/100,
},
//poseTransform
poseTransform:getPoseTransformData(),
private: operationsData.selectObject.id,
ToProductImageDTO: operationsData.selectObject.id,
}
}
let cancelDsign = ()=>{
operationsData.buildType=''
operationsData.numberOfImages=''
operations.operationsModal = false
}
let setOk = ()=>{
let data
data = setAddData()
if(operationsData.buildType == 'toProductImage'){
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
}else if(operationsData.buildType == 'relight'){
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
}else if(operationsData.buildType == 'poseTransfer'){
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(!data.buildType || !data.nums)return message.warning('Please check the input box marked with *')
operations.loadingShow = true
Https.axiosPost(Https.httpUrls.designCloud, data).then(
(rv) => {
if (rv) {
operations.loadingShow = false
cancelDsign()
emit('getContentList')
}
}).catch((error) => {
operations.loadingShow = false
})
}
const changeNumberOfImages = ()=>{
if(operationsData.buildType =='relight' || operationsData.buildType == 'poseTransfer'){
if(operationsData.exhibitionImgList.length < Number(operationsData.numberOfImages)){
operationsData.numberOfImages = operationsData.exhibitionImgList.length
}
}
}
return {
...toRefs(operations),
...toRefs(operationsData),
cancelDsign,
init,
focus,
blur,
setOk,
changeBuildType,
changeNumberOfImages,
};
},
data() {
return {
};
},
mounted() {},
methods: {
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('mouseenter', (e)=> {
if(el.scrollWidth > el.clientWidth){
el.parentElement.style.overflowY = 'hidden';
}
});
// 鼠标移出事件
el.addEventListener('mouseleave', ()=> {
el.parentElement.style.overflowY = 'auto';
});
el.addEventListener('wheel',(e)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
});
</script>
<style lang="less" scoped>
:deep(.ant-modal-mask){
background: rgba(0, 0, 0, 0.2);
}
:deep(.createCloud_modal){
.ant-modal-body{
display: flex;
flex-direction: column;
}
}
</style>
<style lang="less" scoped>
.createCloud_modal {
.closeIcon {
z-index: 2;
}
.allUserPoeration_btn{
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item{
margin-bottom: 0;
}
}
.allUserPoeration_center{
flex: 1;
overflow-y: auto;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
padding: 0 2rem;
> .selectImgList{
width: 100%;
display: flex;
overflow-x: auto;
align-items: center;
flex-wrap: nowrap;
height: 20rem;
margin: 2rem 0;
> .item{
height: 100%;
margin-right: 1rem;
&:last-child{
margin-right: 0;
}
> img{
height: 100%;
}
}
//
}
> .admin_state_item{
width: auto;
// width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
> span{
text-align: left;
margin: 0;
margin-bottom: 1.5rem;
font-weight: 600;
}
:deep(> .ant-select > .ant-select-selector){
border-radius: 1.6rem;
}
> input{
border-radius: 1.6rem;
}
>.sliderAndImput{
display: flex;
align-items: center;
flex: 1;
:deep(> .ant-slider){
// border-radius: 1.6rem;
flex: 1;
}
> input{
border-radius: 1.6rem;
width: 4rem;
margin-left: 1rem;
height: 100%;
border-radius: 1rem;
}
}
}
}
}
</style>

0
src/component/HomePage/index/model/cloudUploading/index.vue → src/component/home/tools/cloudUploading/index.vue
View File

0
src/component/HomePage/index/model/deReconstruction/canvas/argument.vue → src/component/home/tools/deReconstruction/canvas/argument.vue
View File

0
src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue → src/component/home/tools/deReconstruction/canvas/canvasContent.vue
View File

0
src/component/HomePage/index/model/deReconstruction/canvas/detail.vue → src/component/home/tools/deReconstruction/canvas/detail.vue
View File

0
src/component/HomePage/index/model/deReconstruction/canvas/index.vue → src/component/home/tools/deReconstruction/canvas/index.vue
View File

0
src/component/HomePage/index/model/deReconstruction/canvas/tool.vue → src/component/home/tools/deReconstruction/canvas/tool.vue
View File

0
src/component/HomePage/index/model/deReconstruction/index.vue → src/component/home/tools/deReconstruction/index.vue
View File

0
src/component/HomePage/index/model/patternMaking3D/download.vue → src/component/home/tools/patternMaking3D/download.vue
View File

0
src/component/HomePage/index/model/patternMaking3D/index.vue → src/component/home/tools/patternMaking3D/index.vue
View File

0
src/component/HomePage/index/model/patternMaking3D/three.vue → src/component/home/tools/patternMaking3D/three.vue
View File

0
src/component/HomePage/index/model/poseTransfer/index.vue → src/component/home/tools/poseTransfer/index.vue
View File

0
src/component/HomePage/index/model/toProduct/index.vue → src/component/home/tools/toProduct/index.vue
View File

0
src/component/Detail/habitSetStyle.vue → src/component/modules/habitSetStyle.vue
View File

293
src/component/modules/setBrandDNA.vue Normal file
View File

@@ -0,0 +1,293 @@
<template>
<a-modal
class="setBrandDNA_modal generalModel"
v-model:visible="setBrandDNA"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="setBrandDNA_content">
<div class="modal_title_text">
<div>{{ $t('Habit.Style') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="setBrandDNA_content_bottom">
<div class="content_bottom_item" v-for="item in styleList">
<div class="content_bottom_item_border" :class="{active:item.id == selectStyle.id}" @click="setItemSelect(item)">
{{ item.brandName}}
</div>
</div>
<div v-show="!isNoData" class="material_content_list_loding">
<span class="page_loading" v-show="!isShowLoading"></span>
<span v-show="isShowLoading">
<a-spin size="large" />
</span>
</div>
<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
</div>
<div class="setBrandDNA_ok">
<div class="started_btn" @click="setClear()">
{{ $t('Habit.Clear') }}
</div>
<div class="started_btn" @click="setOk()">
OK
</div>
</div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,onMounted,reactive,triggerRef, nextTick} from "vue";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
export default defineComponent({
emits:['setWorkspaceBrandDNA'],
props:{
},
setup(props,{emit}) {
let setBrandDNA: any = ref(false);//弹窗
let setBrandDNAMask:any = ref(false)//弹窗遮罩
let oldDataId = ''
let setBrandDNAData:any = reactive({
styleList:[],
selectStyle:{
name:'',
id:'',
},
isNoData:false,
isShowLoading:false,
isNull:false,
page:1,
size:10,
observer:null,
})
const {t} = useI18n()
let getStyleList = ()=>{
let data = {
page:setBrandDNAData.page,
size:setBrandDNAData.size,
}
setBrandDNAData.isShowLoading = true
Https.axiosPost( Https.httpUrls.brandDNAPage, data).then(
(rv) => {
if(data.page == 1 && rv.content.length == 0){
setBrandDNAData.isNull = true
}else{
setBrandDNAData.isNull = false
}
if (rv.content.length > 0) {
setBrandDNAData.isNull = false
setBrandDNAData.styleList.push(...rv.content)
} else {
setBrandDNAData.isNoData = true
}
setBrandDNAData.isShowLoading = false
}
).catch(res=>{
setBrandDNAData.isShowMark = false
if(data.page == 1){
setBrandDNAData.isNull = true
}
setBrandDNAData.isNoData = true
});
}
let setPorfolioDom = ()=>{
setBrandDNAData.observer = new IntersectionObserver(
(entries, observer) => {
// 如果不是相交，则直接返回
if (!entries[0].intersectionRatio) return;
getStyleList()
console.log(123)
setBrandDNAData.page += 1
},
);
}
let init = (data:any)=>{
setBrandDNA.value = true
oldDataId = data.userBrandDna
setBrandDNAData.selectStyle.id = data.userBrandDna
nextTick(()=>{
let imgParent:any = document.querySelector('.setBrandDNA_modal .material_content_list_loding .page_loading')
setBrandDNAData.observer.observe(imgParent)
})
}
let setCover = (item:any)=>{
setBrandDNAData.subPublishDate.coverId = item.designOutfitId
setBrandDNAData.selectDate.url = item.url
}
let cleardata = ()=>{
setBrandDNA.value = false
setBrandDNAData.observer.disconnect();
}
let cancelDsign = ()=>{
cleardata()
}
let setOk= ()=>{
let data = {
id:setBrandDNAData.selectStyle.id,
name:setBrandDNAData.selectStyle.name,
img:setBrandDNAData.selectStyle.img,
isRevampModel:false,
}
if(oldDataId == data.id){
cleardata()
}else{
emit('setWorkspaceBrandDNA',data)
cleardata()
}
}
let setClear = ()=>{
setBrandDNAData.selectStyle.id = ''
setBrandDNAData.selectStyle.name = ''
setBrandDNAData.selectStyle.img = ''
}
let setItemSelect = (item:any)=>{
setBrandDNAData.selectStyle.id = item.id
setBrandDNAData.selectStyle.name = item.brandName
setBrandDNAData.selectStyle.img = item.minioUrl
}
onMounted(()=>{
setBrandDNAData.isShowLoading = false
setBrandDNAData.isNoData = false
setPorfolioDom()
})
return {
setBrandDNA,
setBrandDNAMask,
...toRefs(setBrandDNAData),
init,
setCover,
cancelDsign,
setItemSelect,
setOk,
setClear,
};
},
data() {
return {
// moodTemplateId: "", //模板id
};
},
directives:{
},
mounted() {
},
methods: {
},
});
</script>
<style lang="less">
.setBrandDNA_modal {
&.generalModel{
.ant-modal-body {
}
}
.setBrandDNA_content{
display: flex;
flex-direction: column;
height: 100%;
.setBrandDNA_content_bottom{
--border-color: #c4c4c4;
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
> .material_content_list_loding{
text-align: center;
height: 50px;
width: 100%;
.page_loading{
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
}
img{
height: calc(10rem*1.2);
}
}
.content_bottom_item{
width: calc((100% / 4) - (.8 * 1rem));
// width: calc(100% / 4);
// padding: 0 1rem;
border-radius: 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
height: 10rem;
background: #f3f3f3;
position: relative;
cursor: pointer;
.content_bottom_item_border {
position: absolute;
inset: .2rem;
background: #f3f3f3;
border-radius: 2rem;
color: #595959;
font-weight: 600;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
}
.content_bottom_item:nth-child(4n){
margin-right: 0rem;
}
.content_bottom_item::before {
content: '';
position: absolute;
width: calc(100% + .2rem);
height: calc(100% + .2rem);
top: 50%;
left: 50%;
border-radius: 2rem;
transform: translate(-50%, -50%);
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
}
.content_bottom_item .active{
background: #000;
color: #fff;
}
}
.setBrandDNA_ok{
width: 60%;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around;
>div{
width: 40%;
}
}
}
}
</style>

11
src/component/toolsPage/index.vue
View File

@@ -27,13 +27,10 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router';
import MoodboardUpload from '@/component/HomePage/index/model/collection/MoodboardUpload.vue';
import PrintboardUpload from '@/component/HomePage/index/model/collection/PrintboardUpload.vue';
import ColorboardUpload from '@/component/HomePage/index/model/collection/ColorboardUpload.vue';
import toProduct from '@/component/HomePage/index/model/toProduct/index.vue';
import poseTransfer from '@/component/HomePage/index/model/poseTransfer/index.vue';
import deReconstruction from '@/component/HomePage/index/model/deReconstruction/index.vue';
import patternMaking3D from '@/component/HomePage/index/model/patternMaking3D/index.vue';
import toProduct from '@/component/home/tools/toProduct/index.vue';
import poseTransfer from '@/component/home/tools/poseTransfer/index.vue';
import deReconstruction from '@/component/home/tools/deReconstruction/index.vue';
import patternMaking3D from '@/component/home/tools/patternMaking3D/index.vue';
import canvasUpload from "@/component/Canvas/index.vue";
export default defineComponent({