265 lines
8.4 KiB
Vue
265 lines
8.4 KiB
Vue
<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"></seriesDesign>
|
|
<singleProductDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
|
|
<sketchDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
|
|
<productDrawingDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></productDrawingDesign>
|
|
<printingDesign3D v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printingDesign3D>
|
|
<printDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printDesign>
|
|
<div class="public">
|
|
<cloudUploading v-show="selectKey_ == 'yun'" v-if="selectObject.id" :workflowType="workflowType" ref="cloudUploading"></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,
|
|
},
|
|
emit:['projectComplete'],
|
|
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 == '')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]
|
|
|
|
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)=>{//选中设置数据
|
|
// setStoreData(value)//设置数据或者清除数据
|
|
if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
|
|
}
|
|
const setStoreData = async (data:any)=>{
|
|
let {value,select} = data
|
|
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
if (select) {
|
|
await setDesignData(value)
|
|
if(allBoardData.indexOf(value) != -1){
|
|
store.commit('setAllBoardData',value)
|
|
}else{
|
|
let data = {
|
|
data:'',
|
|
type:value
|
|
}
|
|
store.commit('setModularData',data)
|
|
}
|
|
}else{
|
|
if(allBoardData.indexOf(value) != -1){
|
|
store.commit('clearAllBoardData',value)
|
|
}else{
|
|
let data = {
|
|
data:null,
|
|
type:value
|
|
}
|
|
store.commit('setModularData',data)
|
|
}
|
|
}
|
|
|
|
}
|
|
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> |