338 lines
10 KiB
Vue
338 lines
10 KiB
Vue
<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> |