fix
This commit is contained in:
X1627315083
@@ -194,7 +194,7 @@
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
|
||||
<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :sex="workspace.sex"></scaleImage>
|
||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
||||
</div>
|
||||
@@ -252,7 +252,9 @@ export default defineComponent({
|
||||
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
|
||||
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
|
||||
// let sketchCatecoryList:any = ref([])
|
||||
let workspace:any = ref({})
|
||||
let workspace:any = computed(()=>{
|
||||
return store.state.Workspace.probjects
|
||||
})
|
||||
let isGenerate = ref(false)//判断是否正在进行generate
|
||||
let inputShow = ref(false)//表示是否出现红框
|
||||
let inputTime = ref()
|
||||
@@ -355,7 +357,6 @@ export default defineComponent({
|
||||
type1: "generate",
|
||||
type2: prop.msg,
|
||||
},
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
@@ -372,9 +373,6 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspaceCom = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
// if()
|
||||
if(this.type_.type2 == 'Printboard'){
|
||||
this.printModelList = [
|
||||
@@ -421,10 +419,6 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
},
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
this.upload.gender = newVal?.sexEnum?.value
|
||||
},
|
||||
scene:{
|
||||
handler(newVal,oldVal){
|
||||
if(this.type_.type2 == 'Printboard' && newVal.value == 'Slogan'){
|
||||
@@ -504,7 +498,7 @@ export default defineComponent({
|
||||
this.loadingShow = true
|
||||
let data = {
|
||||
"elementId": this.sketchboardList[0].id,
|
||||
gender:this.workspace.sexEnum.value,
|
||||
gender:this.workspace.sex,
|
||||
"style": this.printModel.value,
|
||||
"styleImageId": this.printModel?.id?this.printModel?.id:''
|
||||
}
|
||||
@@ -597,7 +591,7 @@ export default defineComponent({
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:this.speedData.value,//为1就是Print
|
||||
isTestUser:this.driver__.driver?false:this.isTest,
|
||||
gender:this.workspace.sexEnum.value,
|
||||
gender:this.workspace.sex,
|
||||
sloganBase64:base64,
|
||||
}
|
||||
this.generateLevel2Type = data.level2Type
|
||||
@@ -652,7 +646,7 @@ export default defineComponent({
|
||||
let dataNum = dataList.length
|
||||
let state = true
|
||||
this.generateTime = setInterval(()=>{
|
||||
if(!this.isGenerate || !this.remGenerate)return
|
||||
if(!this.isGenerate || this.remGenerate)return
|
||||
if(!state)return
|
||||
state = false
|
||||
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
||||
@@ -875,7 +869,7 @@ export default defineComponent({
|
||||
generateDetailId:item.id,
|
||||
level1Type:this.type_.type2,
|
||||
level2Type: level2Type,
|
||||
gender:this.workspace.sexEnum.value,
|
||||
gender:this.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
@@ -928,7 +922,7 @@ export default defineComponent({
|
||||
if(e.clipboardData.files[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('gender',this.upload.gender)
|
||||
param.append('gender',this.workspace.sex)
|
||||
param.append('level1Type',this.upload.level1Type)
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',e.clipboardData.files[0]);
|
||||
|
||||
@@ -29,9 +29,11 @@
|
||||
|
||||
</div>
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList('')">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
<div class="content_search_block generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList('')">
|
||||
<div class="gallery_btn" @click.stop="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,7 +52,7 @@
|
||||
<div v-show="!load.isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!isShowLoading" v-observe></span>
|
||||
<span v-show="isShowLoading">
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
|
||||
@@ -367,8 +369,8 @@ export default defineComponent({
|
||||
//选择所有的图片
|
||||
async getLibraryList(str:any){
|
||||
if(this.load.isShowMark && !this.load.isNoData)return
|
||||
let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
|
||||
if(this.searchPictureName != this.isOldSearchPictureName || this.workspace?.sexEnum?.value != workspace.sexEnum.value){
|
||||
let probjects = JSON.parse(JSON.stringify(this.store.state.Workspace.probjects))
|
||||
if(this.searchPictureName != this.isOldSearchPictureName || this.workspace.sex != probjects.sex){
|
||||
this.imgList = []
|
||||
this.currentPage = 1
|
||||
}else{
|
||||
@@ -380,7 +382,7 @@ export default defineComponent({
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
level2Type: this.selectCode == 'Moodboard'?'':this.disignType.value,
|
||||
modelSex:workspace?.sexEnum.value,
|
||||
modelSex:probjects?.sex,
|
||||
page: this.currentPage,
|
||||
// page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
@@ -427,7 +429,7 @@ export default defineComponent({
|
||||
}else{
|
||||
this.imgList.push(...aa)
|
||||
}
|
||||
this.workspace = workspace
|
||||
this.workspace = probjects
|
||||
// this.imgList = aa
|
||||
this.isShowLoading = false
|
||||
}
|
||||
@@ -486,7 +488,7 @@ export default defineComponent({
|
||||
.select_block{
|
||||
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
||||
margin-right: calc(2.3rem*1.2);
|
||||
height: 4rem;
|
||||
height: auto;
|
||||
.ant-select-selector{
|
||||
height: 90%;
|
||||
}
|
||||
@@ -496,44 +498,13 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.content_search_block{
|
||||
margin-right: calc(5rem*1.2);
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: calc(15rem*1.2);
|
||||
padding-left: calc(1.5rem*1.2);
|
||||
// height: 4rem*1.2);
|
||||
// line-height: 3.8rem*1.2);
|
||||
// background: #FFFFFF;
|
||||
border:calc( 0.1rem*1.2) solid #F1F1F1;
|
||||
// font-size: 1.6rem*1.2);
|
||||
font-size: calc(1.2rem*1.2);
|
||||
font-weight: 400;
|
||||
height: 4rem;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: calc(5rem*1.2);
|
||||
// height: calc(3rem*1.2);
|
||||
height: 100%;
|
||||
line-height: calc(3rem*1.2);
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: calc(2rem*1.2);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generalModel_state_item{
|
||||
margin: 0;
|
||||
.gallery_btn{
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_close{
|
||||
color: rgba(174, 178, 183, 1);
|
||||
font-size: calc(2.4rem*1.2);
|
||||
|
||||
@@ -176,7 +176,6 @@ export default defineComponent({
|
||||
// this.sketch[arr[0].num]?.push(this.sketchList[i])
|
||||
let dom = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item'+arr[0].num)[0]
|
||||
let img = dom.querySelector('.element:last-child')
|
||||
// console.log([sketch1.height,sketch2.height,sketch3.height]);
|
||||
await new Promise((resolve:any)=>{
|
||||
image.onload = ()=>{
|
||||
sketchH[index]+=image.height * (300/image.width)
|
||||
|
||||
@@ -209,7 +209,7 @@ export default defineComponent({
|
||||
let store:any =useStore()
|
||||
|
||||
let sketchCatecoryList:any = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
return store.state.Workspace.probjects.positionList
|
||||
})
|
||||
let sketchCatecoryAllList:any = computed(()=>{
|
||||
return store.state.Workspace.workspaceAllPosition
|
||||
|
||||
@@ -103,10 +103,10 @@ export default defineComponent({
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
let workspace:any = computed(()=>{
|
||||
return store.state.Workspace.workspace
|
||||
return store.state.Workspace.probjects
|
||||
})
|
||||
let position:any = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
return store.state.Workspace.probjects.positionList
|
||||
})
|
||||
let showCollectionModal:any=ref(false)
|
||||
let collectionStep=ref(1)
|
||||
@@ -248,7 +248,7 @@ export default defineComponent({
|
||||
let numBottom = 0
|
||||
let top:any
|
||||
let bottom:any
|
||||
if(this.workspace.sexEnum.value == "Female"){
|
||||
if(this.workspace.sex != "male"){
|
||||
top = ['Outwear','Dress','Blouse']
|
||||
bottom = ['Trousers','Skirt']
|
||||
}else{
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
||||
</template>
|
||||
<span v-if="item?.label">{{ item?.label }}</span>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
<span v-else>{{ item?.name }}</span>
|
||||
</a-popover>
|
||||
<div v-else>
|
||||
<span v-if="item?.label">{{ item?.label }}</span>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
<span v-else>{{ item?.name }}</span>
|
||||
</div>
|
||||
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
|
||||
</div>
|
||||
@@ -44,11 +44,11 @@
|
||||
|
||||
</template>
|
||||
<span v-if="item?.label">{{ item?.label }}</span>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
<span v-else>{{ item?.name }}</span>
|
||||
</a-popover>
|
||||
<div v-else>
|
||||
<span v-if="item?.label">{{ item?.label }}</span>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
<span v-else>{{ item?.name }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -179,14 +179,13 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
type1: "generate",
|
||||
type2: 'Sketchboard',
|
||||
},
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
|
||||
this.upload.gender = this.store.state.Workspace.probjects.sex
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="homeNav">
|
||||
<div class="navList" :class="{active:selectKey == item.value}" v-for="item in navListData" :key="item.value" @click="setNav(item.value, $event)">
|
||||
{{ item.name }}
|
||||
</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:''},
|
||||
navListData:{type:Array,default:()=>[]},
|
||||
},
|
||||
emits:['setSelectKey'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
|
||||
})
|
||||
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setNav = (str:any,event:any)=>{
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:event.target,
|
||||
posiiton:'nav',
|
||||
}
|
||||
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setNav,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeNav{
|
||||
padding: 5rem 0;
|
||||
background: #f7f8fa;
|
||||
> div{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #ebebeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<div class="homeNavBox">
|
||||
<div class="navList">
|
||||
<img src="@/assets/images/homePage/homeNavBg.png" alt="">
|
||||
<div class="navListItem" :class="[selectKey == item.value?'active':'',`item${item.task}`]" v-for="item in navListData" :key="item.value" @dblclick.stop="setNav(item.value,$event)" @click.stop="setSelect(item.value)">
|
||||
<div class="background"></div>
|
||||
<div class="text">
|
||||
{{ item.name }}
|
||||
</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:''},
|
||||
navListData:{type:Array,default:()=>[]},
|
||||
},
|
||||
emits:['setSelectKey'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
|
||||
})
|
||||
const dataTime = reactive({
|
||||
clickTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
navList:null as any
|
||||
})
|
||||
const setNav = (str:any,event:any)=>{
|
||||
clearTimeout(dataTime.clickTime)
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:event.target,
|
||||
posiiton:'navBox'
|
||||
}
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
const setSelect = ()=>{
|
||||
clearTimeout(dataTime.clickTime)
|
||||
dataTime.clickTime = setTimeout(()=>{//防止双击和单机都执行的问题
|
||||
console.log(123123);
|
||||
},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{
|
||||
width: 98rem;
|
||||
}
|
||||
> .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;
|
||||
&.item1-1{
|
||||
top: -5rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-2{
|
||||
top: 9rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-3{
|
||||
top: 23rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-4{
|
||||
top: 37rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.item1-5{
|
||||
top: 51rem;
|
||||
left: -22rem;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
.background{
|
||||
background: #d6eb77;
|
||||
transition: all .3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text{
|
||||
position: relative;
|
||||
}
|
||||
&.active{
|
||||
border: 3px solid #000;
|
||||
.background{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 3px solid #000;
|
||||
.background{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +1,225 @@
|
||||
<template>
|
||||
<div class="start">
|
||||
<div class="createProject" v-if="false">
|
||||
|
||||
<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;">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>
|
||||
<editContent v-else></editContent>
|
||||
<workflow v-else ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<affiche ref="affiche"></affiche>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { defineComponent,computed,onMounted,nextTick,onBeforeMount,toRefs, reactive,watch} 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 {useRoute} from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import editContent from './editContent/index.vue'
|
||||
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";
|
||||
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
editContent
|
||||
workflow,affiche
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const route = useRoute()
|
||||
const {t} = useI18n()
|
||||
const data = reactive({
|
||||
|
||||
|
||||
})
|
||||
const dataTime = reactive({
|
||||
selectTime:null as any,
|
||||
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:route.params.id,
|
||||
}
|
||||
if(!route.params.id)return
|
||||
createData()
|
||||
Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
|
||||
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
|
||||
//取出数组对象某个值
|
||||
let storeData = {
|
||||
name:'测试项目',
|
||||
id:rv.id,
|
||||
type:type?.value,
|
||||
httpType:rv.process,//项目类型
|
||||
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:[],
|
||||
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
|
||||
})
|
||||
})
|
||||
}
|
||||
// watch(()=>data.opjectList.type,(newVal,oldVal)=>{
|
||||
// console.log(newVal,oldVal);
|
||||
|
||||
|
||||
// })
|
||||
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()
|
||||
}
|
||||
getHistory()
|
||||
})
|
||||
onBeforeMount(()=>{
|
||||
// data.selectObject = null
|
||||
// store.commit('createProbject')
|
||||
})
|
||||
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
createProject,
|
||||
selectProject,
|
||||
getHistoryProject,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -53,5 +236,49 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
> .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>
|
||||
@@ -148,9 +148,9 @@
|
||||
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
|
||||
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;">
|
||||
<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
|
||||
<div class="delete" v-if="color.rgba?.r" @click="clearCurrentColor(index)">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_right_header">
|
||||
@@ -446,13 +446,13 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
//清除当前的颜色
|
||||
clearCurrentColor(){
|
||||
clearCurrentColor(index){
|
||||
this.selectColor = {}
|
||||
// this.fileList = []
|
||||
this.reviewColor={}
|
||||
this.colorList[this.selectIndex] = {}
|
||||
this.colorList[index] = {}
|
||||
this.pantongName = ''
|
||||
this.colorList[this.selectIndex] = {}
|
||||
this.colorList[index] = {}
|
||||
let colorList =this.colorList.filter((v) => Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
|
||||
@@ -667,7 +667,7 @@ export default defineComponent({
|
||||
this.store.commit('setColorboardList',newColorList)
|
||||
},
|
||||
|
||||
recollection(){
|
||||
openSetData(){
|
||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||
let hex
|
||||
colorList.forEach((ele, index) => {
|
||||
@@ -894,6 +894,8 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.upload_item{
|
||||
position: relative;
|
||||
@@ -937,6 +939,7 @@ export default defineComponent({
|
||||
.modal_img_item{
|
||||
width: calc(100% / 8 - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
position: relative;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -945,6 +948,29 @@ export default defineComponent({
|
||||
.select_upload_color{
|
||||
border: 1px solid #000;
|
||||
}
|
||||
> .delete{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
top: auto;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
> span{
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
> .delete{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fi-rr-square-plus,.fi-rr-picture{
|
||||
@@ -1074,7 +1100,8 @@ export default defineComponent({
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
// width: calc(16rem*1.2);
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
width: 90%;
|
||||
height: calc(14rem*1.2);
|
||||
max-height: calc(17rem*1.2);
|
||||
max-width: 23rem;
|
||||
@@ -1124,7 +1151,8 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
.vc-sketch-color-wrap{
|
||||
background-image: url(@../../../../../../../assets/images/homePage/dropper.png);
|
||||
// background-image: url(../../../../../../assets/images/homePage/dropper.png);
|
||||
background-image: url(../../../../../assets/images/homePage/dropper.png);
|
||||
// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
|
||||
// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
|
||||
// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
|
||||
@@ -1264,6 +1292,7 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
.color_setting_btn{
|
||||
margin: 0 1rem;
|
||||
font-size: 2rem;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
&.active{
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
@@ -108,13 +108,13 @@
|
||||
msg="Moodboard"
|
||||
></Generate>
|
||||
</div>
|
||||
<div v-show="moodboarList.length" class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_right" v-show="moodboarList.length >= 1 || edieShow">
|
||||
<div class="modal_layout" >
|
||||
<div class="modal_text">
|
||||
<div>
|
||||
{{ $t('MoodboardUpload.Thumbnail') }}
|
||||
</div>
|
||||
<div class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</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)">
|
||||
@@ -125,7 +125,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
|
||||
<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>
|
||||
@@ -358,13 +358,13 @@ export default defineComponent({
|
||||
this.edieShow = false
|
||||
}
|
||||
},
|
||||
recollection() {
|
||||
openSetData() {
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardFiles
|
||||
)
|
||||
);
|
||||
) || [];
|
||||
let disposeMoodboard = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
@@ -152,7 +152,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="moreBox" @click.stop>
|
||||
<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
||||
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -551,7 +551,7 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
|
||||
recollection(){
|
||||
openSetData(){
|
||||
this.useGenerate = {
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
@@ -559,7 +559,7 @@ export default defineComponent({
|
||||
level2Type:'',
|
||||
designType:'',
|
||||
}
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) || []
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
@@ -89,6 +89,7 @@
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
gender:workspace.sex,
|
||||
}"
|
||||
:multiple="!driver__.driver"
|
||||
:before-upload="beforeUpload"
|
||||
@@ -170,7 +171,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="moreBox" @click.stop>
|
||||
<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
||||
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -211,12 +212,14 @@ export default defineComponent({
|
||||
let store:any =useStore()
|
||||
|
||||
let sketchCatecoryList:any = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
return store.state.Workspace.probjects.positionList
|
||||
})
|
||||
let sketchCatecoryAllList:any = computed(()=>{
|
||||
return store.state.Workspace.workspaceAllPosition
|
||||
})
|
||||
let workspace:any = ref({})
|
||||
let workspace:any = computed(()=>{
|
||||
return store.state.Workspace.probjects
|
||||
})
|
||||
let sketchboardList:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.sketchboard
|
||||
})
|
||||
@@ -268,12 +271,10 @@ export default defineComponent({
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Sketchboard",
|
||||
gender:'',
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
@@ -322,10 +323,6 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
this.upload.gender = newVal?.sexEnum?.value
|
||||
},
|
||||
sketchboardList:{
|
||||
handler(newVal:any,oldVal:any){
|
||||
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
|
||||
@@ -351,9 +348,6 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspaceCom = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
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.'
|
||||
@@ -491,7 +485,7 @@ export default defineComponent({
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Sketchboard",
|
||||
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
|
||||
gender:this.workspace.sexEnum.value,
|
||||
gender:this.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
@@ -514,7 +508,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
},
|
||||
recollection() {
|
||||
openSetData() {
|
||||
this.useGenerate = {
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
@@ -527,12 +521,13 @@ export default defineComponent({
|
||||
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) => {
|
||||
@@ -597,6 +592,7 @@ export default defineComponent({
|
||||
<style lang="less" scoped>
|
||||
.sketchboard_upload_modal {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.modal_left,.modal_right{
|
||||
background: #f7f8fa;
|
||||
@@ -618,7 +614,6 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
// padding: 0 2rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
background: #fff;
|
||||
border-radius: calc(0.8rem*1.2);
|
||||
line-height: calc(4rem*1.2);
|
||||
font-size: var(--aida-fsize1-8);
|
||||
@@ -4,19 +4,19 @@
|
||||
<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>
|
||||
{{ $t('more.edit') }}
|
||||
<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>
|
||||
{{ $t('more.enlargement') }}
|
||||
<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>
|
||||
{{ $t('more.down') }}
|
||||
<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>
|
||||
{{ $t('more.delete') }}
|
||||
<div class="text">{{ $t('more.delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,10 +111,14 @@ export default defineComponent({
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="canvasArgument">
|
||||
<div class="label_item" v-show="
|
||||
canvasGeneral.operation != 'movePosition' &&
|
||||
canvasGeneral.operation != 'move' &&
|
||||
canvasGeneral.brushwork.value != 'RibbonBrush' &&
|
||||
canvasGeneral.brushwork.value != 'LongfurBrush'&&
|
||||
canvasGeneral.operation != 'zoomIn' &&
|
||||
canvasGeneral.operation != 'zoomOut' &&
|
||||
canvasGeneral.operation != 'dashedPencil' &&
|
||||
canvasGeneral.operation != 'dashed'">
|
||||
<div >{{ $t('exportModel.Size') }}:</div>
|
||||
<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
|
||||
</div>
|
||||
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
|
||||
<div >{{ $t('exportModel.Brushwork') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
|
||||
style="width: 12rem "
|
||||
@change="canvasGeneral.brushworkChange"
|
||||
>
|
||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
|
||||
<img style="width: 100%;" :src="item.url" alt="">
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
|
||||
<div >{{ $t('exportModel.Texture') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
|
||||
style="width: 12rem "
|
||||
@change="canvasGeneral.textureValueChange"
|
||||
>
|
||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
|
||||
<img :src="item.url" alt="">
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item" v-show="
|
||||
canvasGeneral.operation != 'pencil' &&
|
||||
canvasGeneral.operation != 'eraser'&&
|
||||
canvasGeneral.operation != 'movePosition' &&
|
||||
canvasGeneral.operation != 'move'&&
|
||||
canvasGeneral.operation != 'text'&&
|
||||
canvasGeneral.operation != 'texture'&&
|
||||
canvasGeneral.operation != ''&&
|
||||
canvasGeneral.operation != 'zoomIn' &&
|
||||
canvasGeneral.operation != 'zoomOut' &&
|
||||
canvasGeneral.operation != 'dashedPencil' &&
|
||||
canvasGeneral.operation != 'dashed'">
|
||||
<div >{{ $t('exportModel.FillBack') }}:</div>
|
||||
<div class="leftAlign">
|
||||
<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
|
||||
<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
|
||||
<div >{{ $t('exportModel.Layer') }}:</div>
|
||||
<div class="leftAlign">
|
||||
<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
|
||||
<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
|
||||
<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
|
||||
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
|
||||
<div>Font Family</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
|
||||
style="flex: 1;width: 15rem;"
|
||||
@change="canvasGeneral.setFontFamily"
|
||||
:style="{'font-family':canvasGeneral.fontFamily}"
|
||||
>
|
||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
|
||||
{{item.name}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="label_item" style="margin-left: auto;">
|
||||
<span style="margin-right: 2rem;">Show Models</span>
|
||||
<a-switch v-model:checked="isShowBg" @change="showBg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
|
||||
export default defineComponent({
|
||||
components:{},
|
||||
setup(){
|
||||
let testModal = ref(true)
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
const data = reactive({
|
||||
colorHistoryList:[],
|
||||
operation:'',
|
||||
isShowBg:true,
|
||||
})
|
||||
const setOperation = (str:any)=>{
|
||||
data.operation = str
|
||||
}
|
||||
const setOper = ()=>{
|
||||
setOperation('')
|
||||
}
|
||||
document.addEventListener('click',setOper)
|
||||
const closeModal = ()=>{
|
||||
document.removeEventListener('click',setOper)
|
||||
}
|
||||
const showBg = ()=>{
|
||||
canvasGeneral.showBg(data.isShowBg)
|
||||
}
|
||||
return {
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
testModal,
|
||||
setOperation,
|
||||
closeModal,
|
||||
showBg,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.canvasArgument{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
.label_item{
|
||||
margin-right: 2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.leftAlign{
|
||||
display: flex;
|
||||
}
|
||||
.labelHover_show{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
top: 100%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
padding: .5rem 1rem;
|
||||
background: #fff;
|
||||
div{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input{
|
||||
height: 100%;
|
||||
width: 12rem;
|
||||
}
|
||||
&.wH input{
|
||||
width: 5rem;
|
||||
}
|
||||
.title{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.icon-xiala{
|
||||
cursor: pointer;
|
||||
transform: rotate(0deg);
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
transition: all .3s;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
&.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.label_item:hover{
|
||||
// .labelHover_show{
|
||||
// display: flex;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="canvasContent_box">
|
||||
<div class="canvasContent" ref="canvasScaleDom">
|
||||
<div class="generalCanvas_center canvas" ref="canvasDom">
|
||||
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
component:{},
|
||||
setup(props,{emit}){
|
||||
const store = useStore();
|
||||
let {t} = useI18n()
|
||||
let canvasType = inject('canvasType')
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
const data:any = reactive({
|
||||
canvasDom:null,
|
||||
isShowMark:false,
|
||||
pencilbtnStyle:{},
|
||||
isCanva:false,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
})
|
||||
const dataDom = reactive({
|
||||
canvasScaleDom:null as any,
|
||||
})
|
||||
const createCanvas = ()=>{
|
||||
console.log(123123,data.isCanvas)
|
||||
if(data.isCanva)return
|
||||
nextTick(async ()=>{
|
||||
let width = dataDom.canvasScaleDom.offsetWidth
|
||||
let canvasSize = {width,height:width}
|
||||
data.isCanva = true
|
||||
let img = data.selectObject.model.url
|
||||
await canvasGeneral.canvasInit(data.canvasDom,canvasSize,img,'',{noErasable:true})
|
||||
let oldCanvas = store.state.HomeStoreModule.canvasData.deReconstruction
|
||||
if(oldCanvas)canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
|
||||
// if(oldCanvas)canvasGeneral.canvas.loadFromJSON(oldCanvas, () => {});
|
||||
})
|
||||
}
|
||||
const openMode = (data:any)=>{
|
||||
let {yes,no} = data
|
||||
console.log(yes,no);
|
||||
Modal.confirm({
|
||||
title: '是否栅格化',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
yes()
|
||||
},
|
||||
onCancel(){
|
||||
no()
|
||||
}
|
||||
});
|
||||
yes()
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
createCanvas()
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
return {
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
...toRefs(dataDom),
|
||||
openSetData,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.canvasContent_box{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// padding: 2rem;
|
||||
background: #e6e6e6;
|
||||
.canvasContent{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.generalCanvas_center{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&.canvas{
|
||||
}
|
||||
.editFrontBack_pencilbtn{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
:deep(.canvas-container){
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="detail" ref="detailDom"
|
||||
@mousemove="mousemove($event)"
|
||||
@touchmove="touchmove($event)"
|
||||
>
|
||||
<div class="layer">
|
||||
<div class="layer-item button" @click="canvasGeneral.createLayer">
|
||||
新建图层
|
||||
</div>
|
||||
<div class="layer-item-box-scroll">
|
||||
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
|
||||
<div class="layer-item"
|
||||
v-for="item,index in layerList"
|
||||
:key="item"
|
||||
:style="item?.style"
|
||||
@click="canvasGeneral.selectLayer(item.id)"
|
||||
@mousedown="mousedown($event,item,index)"
|
||||
@touchstart="touchstart($event,item,index)"
|
||||
|
||||
@contextmenu="openMenu($event,item,index)"
|
||||
|
||||
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
|
||||
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
|
||||
<i class="fi" :class="[(item.isShow)?'fi-rr-eye':'fi-rr-eye-crossed']" @click.stop="canvasGeneral.layerShowHide(item.id,item)"></i>
|
||||
<img :src="item.img" alt="">
|
||||
<div>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layer-menu" :style="styleMenu">
|
||||
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
|
||||
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
|
||||
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
|
||||
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,nextTick,toRefs,inject,watch,computed} from 'vue'
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
|
||||
export default defineComponent({
|
||||
component:{},
|
||||
setup(){
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
const data = reactive({
|
||||
detailDom:null as any,
|
||||
layerList:computed(()=>canvasGeneral.layer.list) as any,
|
||||
styleMenu:{
|
||||
left:0+'px',
|
||||
top:0+'px',
|
||||
display:'none',
|
||||
},
|
||||
itemMenu:{} as any,
|
||||
})
|
||||
watch(()=>canvasGeneral.layer.list.length, (newValue, oldValue) => {
|
||||
let sortedArr = data.layerList.map((item:any) => ({ ...item })).sort((a:any, b:any) => b.index - a.index)
|
||||
sortedArr.forEach((item:any,index:any)=>{
|
||||
item.index = sortedArr.length - index
|
||||
})
|
||||
data.layerList.forEach((item:any) => {
|
||||
//图层高度50px 下边距10px
|
||||
sortedArr.forEach((sortedArrItem:any)=>{
|
||||
if(item.id == sortedArrItem.id){
|
||||
item.index = sortedArrItem.index
|
||||
}
|
||||
let style = {
|
||||
top:(data.layerList.length - item.index) * 60 + 'px',
|
||||
transition:'all .3s',
|
||||
}
|
||||
item.style = style
|
||||
})
|
||||
|
||||
});
|
||||
},{immediate:true});
|
||||
const incident:any = reactive({
|
||||
isDown:false,
|
||||
selectStyleTop:null,
|
||||
selectStyle:null,
|
||||
downPoint:null,
|
||||
select:null,
|
||||
radius:25,
|
||||
})
|
||||
const openMenu = (event:any,item:any,index:number)=>{
|
||||
if(event.preventDefault)event.preventDefault();
|
||||
data.itemMenu = item;
|
||||
data.itemMenu.index = index
|
||||
let position = data.detailDom.getBoundingClientRect();
|
||||
data.styleMenu = {
|
||||
left:event.clientX - position.left+'px',
|
||||
top:event.clientY - position.top+'px',
|
||||
display:'block',
|
||||
}
|
||||
}
|
||||
document.onclick = ()=>{
|
||||
data.styleMenu.display = 'none'
|
||||
data.itemMenu = {};
|
||||
}
|
||||
let mousedown = (event:any,item:any,index:number)=>{
|
||||
if(event.button != 0)return
|
||||
let e:any = getMousePosition(event,false)
|
||||
mouseDownOperation(e,item,index)
|
||||
}
|
||||
let ipadDownTime:any = null
|
||||
let touchstart = (event:any,item:any,index:number)=>{
|
||||
let e:any = getMousePosition(event,true)
|
||||
mouseDownOperation(e,item,index)
|
||||
clearTimeout(ipadDownTime)
|
||||
ipadDownTime = setTimeout(()=>{
|
||||
openMenu(e,item,index)
|
||||
},1000)
|
||||
|
||||
}
|
||||
let mouseDownOperation = (e:any,item:any,index:number)=>{
|
||||
incident.isDown = true
|
||||
incident.selectStyleTop = item.style.top
|
||||
incident.selectStyle = item.style
|
||||
incident.selectStyle.transition = 'none'
|
||||
incident.select = item
|
||||
incident.downPoint = e.clientY
|
||||
}
|
||||
|
||||
let mousemove = (event:any)=>{
|
||||
let e:any = getMousePosition(event,false)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
let touchmove = (event:any)=>{
|
||||
let e:any = getMousePosition(event,true)
|
||||
clearTimeout(ipadDownTime)
|
||||
if(data.styleMenu.display != 'none')data.styleMenu.display = 'none'
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
let mouseMoveOperation = (e:any)=>{
|
||||
if(incident.isDown){
|
||||
let domTop = Number(incident.selectStyleTop.split('px')[0])
|
||||
|
||||
let gTop = domTop + (e.clientY - incident.downPoint)
|
||||
if(gTop < 0){
|
||||
gTop = 0
|
||||
}
|
||||
incident.select.style.top = gTop + 'px'
|
||||
data.layerList.forEach((item:any,index:number) => {
|
||||
let itemTop = Number(item.style.top.split('px')[0])
|
||||
if(Math.abs(gTop - itemTop) < 30 && item.id != incident.select.id){
|
||||
let itemIndex = item.index
|
||||
// if(gTop - itemTop > 0){
|
||||
// console.log('从下往上');
|
||||
// }
|
||||
// if(gTop - itemTop < 0){
|
||||
// console.log('从上往下');
|
||||
// }
|
||||
item.index = incident.select.index
|
||||
incident.select.index = itemIndex
|
||||
|
||||
}
|
||||
})
|
||||
sort(data.layerList,'move')
|
||||
}
|
||||
}
|
||||
const mouseUp = ()=>{
|
||||
if(data.styleMenu.display == 'none')clearTimeout(ipadDownTime)
|
||||
if(incident.isDown){
|
||||
if(incident.selectStyle)incident.selectStyle.transition = 'all .3s'
|
||||
incident.selectStyleTop = null
|
||||
incident.isDown = false
|
||||
incident.selectStyle = null
|
||||
incident.select = null
|
||||
sort(data.layerList,'up')
|
||||
}
|
||||
}
|
||||
document.onmouseup = mouseUp
|
||||
document.ontouchend = mouseUp
|
||||
//排序
|
||||
let time:any = null
|
||||
let sort = (list:any,str:string)=>{
|
||||
clearTimeout(time)
|
||||
// list = list.sort((a:any, b:any) =>{
|
||||
// return b.index - a.index;
|
||||
// });
|
||||
list.forEach((item:any) => {
|
||||
if(str == 'move'){
|
||||
if(item.id != incident.select.id)item.style.top = (list.length - item.index) * 60 + 'px'
|
||||
}else{
|
||||
item.style.top = (list.length - item.index) * 60 + 'px'
|
||||
}
|
||||
});
|
||||
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
|
||||
|
||||
}
|
||||
return {
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
openMenu,
|
||||
mousedown,
|
||||
touchstart,
|
||||
mousemove,
|
||||
touchmove,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.detail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid #dcdfe6;
|
||||
position: relative;
|
||||
* {
|
||||
-webkit-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-ms-user-drag: none;
|
||||
user-drag: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.layer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.layer-button{
|
||||
|
||||
}
|
||||
.layer-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .5rem 2rem;
|
||||
border: 1px solid #e6e6e6;
|
||||
margin-bottom: 10px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
i{
|
||||
font-size: 18px;
|
||||
}
|
||||
&.active{
|
||||
background: #e6e6e6;
|
||||
}
|
||||
.noDelete{
|
||||
background: #e6e6e6;
|
||||
opacity: .4;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.button{
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
img{
|
||||
height: 100%;
|
||||
width: 35px;
|
||||
object-fit: contain;
|
||||
}
|
||||
div{
|
||||
cursor: pointer;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.layer-item-box-scroll{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.layer-item-box{
|
||||
position: relative;
|
||||
.layer-item{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.layer-menu{
|
||||
position: absolute;
|
||||
width: 60%;
|
||||
line-height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
overflow: hidden;
|
||||
>div{
|
||||
border-bottom: 1px solid;
|
||||
padding: 0 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
>div:hover{
|
||||
background: #e6e6e6;
|
||||
}
|
||||
>div:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="generalCanvas">
|
||||
<div class="argument-box">
|
||||
<argument ref="argument" v-if="canvasObj.canvas"></argument>
|
||||
</div>
|
||||
<div class="canvasBox">
|
||||
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
|
||||
<div class="canvas">
|
||||
<canvasContent ref="canvasContent"></canvasContent>
|
||||
</div>
|
||||
<!-- <div class="detail-box">
|
||||
<detail ref="detail" v-if="canvasObj.canvas"></detail>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||
</template>
|
||||
<script>
|
||||
import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
|
||||
} from "vue";
|
||||
import {message} from 'ant-design-vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import canvasGeneral from "@/tool/canvasGeneralCopy";
|
||||
import tool from "./tool.vue"
|
||||
import argument from "./argument.vue"
|
||||
import detail from "./detail.vue"
|
||||
import canvasContent from "./canvasContent.vue"
|
||||
import liquefaction from "@/component/modules/liquefaction.vue";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
tool,
|
||||
argument,
|
||||
detail,
|
||||
canvasContent,
|
||||
liquefaction,
|
||||
},
|
||||
emits:['setGenerateImg'],
|
||||
setup(props,{emit}) {
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const isShowMark = ref(false)
|
||||
const component = reactive({
|
||||
argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
|
||||
})
|
||||
const dataDom = reactive({
|
||||
canvasContent:null,
|
||||
})
|
||||
let liquefaction = ref(null)
|
||||
let liquefactionData = ref()
|
||||
let groupDashed = ref(null)//用来判断是否需要对group添加img
|
||||
let canvasType = 'export'
|
||||
let canvasObj = reactive(new canvasGeneral('zz'))
|
||||
provide('canvasType',canvasType)
|
||||
provide('canvasObj',canvasObj)
|
||||
provide('isShowMark',isShowMark)
|
||||
const close = ()=>{
|
||||
component.forEach((item)=>{
|
||||
if(item.value.closeModal)item.value.closeModal()
|
||||
})
|
||||
}
|
||||
|
||||
let expoet = ()=>{
|
||||
console.log( canvasObj.selectExport());
|
||||
console.log( canvasObj.allExport());
|
||||
|
||||
}
|
||||
const setLiquefaction = async ()=>{//进入液化页面
|
||||
canvasObj.getLiquefactionImgObj().then((data)=>{
|
||||
if(data?.img){
|
||||
liquefactionData.value = data
|
||||
liquefaction.value.init(data.img)
|
||||
}else {
|
||||
message.info(t('exportModel.jsContent6'))
|
||||
return null;
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
const toolLiquefaction = ()=>{//工具点击按钮
|
||||
setLiquefaction()
|
||||
}
|
||||
const submitLiquefaction = (rv)=>{//液化回参
|
||||
canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
|
||||
// liquefactionData.value.setSrc(rv, (value)=>{
|
||||
// // liquefactionData.value.scaleToWidth(originalWidth);
|
||||
// // liquefactionData.value.scaleToHeight(originalHeight);
|
||||
// delete liquefactionData.value.minioUrl
|
||||
// if(groupDashed.value && groupDashed.value._objects.length == 1){
|
||||
// value.set({
|
||||
// left:-groupDashed.value.width/2,
|
||||
// top:-groupDashed.value.height/2,
|
||||
// })
|
||||
// groupDashed.value.insertAt(value)
|
||||
// // canvasObj.addDashedImg(value)
|
||||
// }
|
||||
// canvasObj.canvas.renderAll();
|
||||
// canvasObj.updateCanvasState()
|
||||
// });
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
dataDom.canvasContent.openSetData()
|
||||
}
|
||||
const addImage = (data)=>{
|
||||
canvasObj.addImage(data)
|
||||
}
|
||||
const getData = async ()=>{
|
||||
await canvasObj.detailSubmit().then((img)=>{
|
||||
emit('setGenerateImg',img)
|
||||
})
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
|
||||
// console.log(JSON.stringify(json));
|
||||
json.objects.forEach(item=>{
|
||||
if(item.type == 'image'){
|
||||
delete item.src
|
||||
}
|
||||
})
|
||||
let canvasExport = {
|
||||
canvas:json,
|
||||
groupList: canvasObj.layer.list
|
||||
}
|
||||
return canvasExport
|
||||
}
|
||||
onMounted(() => {
|
||||
});
|
||||
onBeforeUnmount(()=>{
|
||||
// canvasGeneral.canvasClear()
|
||||
})
|
||||
return {
|
||||
...toRefs(dataDom),
|
||||
isShowMark,
|
||||
liquefaction,
|
||||
canvasObj,
|
||||
close,
|
||||
expoet,
|
||||
toolLiquefaction,
|
||||
submitLiquefaction,
|
||||
openSetData,
|
||||
addImage,
|
||||
getData,
|
||||
getCanvasData,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.generalCanvas{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.argument-box,
|
||||
.canvasBox,
|
||||
.detail-box{
|
||||
:deep(i){
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all .3s;
|
||||
margin-bottom: .5rem;
|
||||
&.active{
|
||||
border: 1px solid;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
&.icon-xiala{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
&.icon-xialaActive{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.argument-box{
|
||||
margin-left: 4rem;
|
||||
height: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.canvasBox{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.canvas{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.detail-box{
|
||||
width: 20%;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="canvasTool">
|
||||
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
||||
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||||
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
|
||||
<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
|
||||
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
|
||||
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
|
||||
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
|
||||
<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
|
||||
<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
|
||||
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
|
||||
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
|
||||
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
|
||||
<div class="label_item uploadImage">
|
||||
<i class="icon fi fi-br-upload" ></i>
|
||||
<input type="file" @change="uploadImage">
|
||||
</div>
|
||||
<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
|
||||
<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
|
||||
<div class="btnModal" v-show="isMove" :style="moveStyle">
|
||||
<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
|
||||
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
|
||||
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
|
||||
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
|
||||
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
|
||||
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
|
||||
import {base64ToFile} from '@/tool/util'
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
component:{},
|
||||
emits:['toolLiquefaction'],
|
||||
setup(props,{emit}){
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
let isShowMark:any = inject('isShowMark')
|
||||
const data:any = reactive({
|
||||
isMove:false,
|
||||
moveStyle:{},
|
||||
})
|
||||
const uploadImage = (event:any)=>{
|
||||
isShowMark.value = true
|
||||
const file = event.target.files[0];
|
||||
let input = event.target
|
||||
setOperation('movePosition')
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
let file = base64ToFile(e.target.result,'upload')
|
||||
let formData = new FormData();
|
||||
formData.append("file", file);
|
||||
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
|
||||
rv.imgUrl = rv.minioUrl
|
||||
isShowMark.value = false
|
||||
canvasGeneral.addImage(rv)
|
||||
})
|
||||
input.value = ''
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
const historyState = (str:any)=>{
|
||||
canvasGeneral.historyState(str)
|
||||
}
|
||||
const setOperation = (str:any)=>{
|
||||
canvasGeneral.setOperation(str)
|
||||
}
|
||||
const openMore = (e:any)=>{
|
||||
data.isMove=!data.isMove
|
||||
if(data.isMove){
|
||||
let domPoint = e.target.getBoundingClientRect()
|
||||
let domParentPoint = e.target.parentElement.getBoundingClientRect()
|
||||
const left = domPoint.left - domParentPoint.left;
|
||||
const top = domPoint.top - domParentPoint.top;
|
||||
|
||||
data.moveStyle.top = top + 'px'
|
||||
data.moveStyle.left = left + domPoint.width + 2 + 'px'
|
||||
}
|
||||
}
|
||||
const setMore = ()=>{
|
||||
data.isMove = false
|
||||
}
|
||||
let setLiquefaction = ()=>{
|
||||
emit('toolLiquefaction')
|
||||
}
|
||||
document.addEventListener('click',setMore)
|
||||
const closeModal = ()=>{
|
||||
document.removeEventListener('click',setMore)
|
||||
}
|
||||
return {
|
||||
canvasGeneral,
|
||||
...toRefs(data),
|
||||
uploadImage,
|
||||
historyState,
|
||||
setOperation,
|
||||
openMore,
|
||||
closeModal,
|
||||
setLiquefaction,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.canvasTool::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
.canvasTool{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
&.leftAlign{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.leftAlign{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uploadImage{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
i{
|
||||
zoom:.8;
|
||||
}
|
||||
input{
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.uploadImage{
|
||||
position: relative;
|
||||
input{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.btnModal{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
top: 0;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
200
src/component/HomePage/index/model/deReconstruction/index.vue
Normal file
200
src/component/HomePage/index/model/deReconstruction/index.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="deReconstruction">
|
||||
<div class="selectSektch itemBox">
|
||||
<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
|
||||
</div>
|
||||
<div class="canvas itemBox">
|
||||
<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
|
||||
</div>
|
||||
<div class="finished itemBox">
|
||||
<div class="btnTop">
|
||||
<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
|
||||
<div v-show="!generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
|
||||
<div v-show="generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucanggift" @click="generateLike('noLike')"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img v-if="generateImg?.[0]?.url" :src="generateImg?.[0]?.url" alt="">
|
||||
<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
|
||||
</div>
|
||||
<div class="btnBottom" @click="getCanvasData">
|
||||
<div class="gallery_btn">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, inject} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import canvasBox from "./canvas/index.vue";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
selectList,sketchCategory,canvasBox
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
sketchCatecoryList:computed(()=>{
|
||||
return store.state.Workspace.probjects.positionList
|
||||
}),
|
||||
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
|
||||
})
|
||||
const setIsShowMark:any = inject('setIsShowMark')
|
||||
const dataDom = reactive({
|
||||
canvasBox:null as any,
|
||||
})
|
||||
const selectImgItem = (data:any)=>{
|
||||
data.minioUrl = data.url
|
||||
dataDom.canvasBox.addImage(data)
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
dataDom.canvasBox.openSetData()
|
||||
}
|
||||
const getCanvasImg = ()=>{
|
||||
dataDom.canvasBox.getData()
|
||||
}
|
||||
const setGenerateImg = (base64:any)=>{
|
||||
let value = {
|
||||
"collagePicture": base64,
|
||||
"gender": store.state.Workspace.probjects.sex,
|
||||
"projectId": store.state.Workspace.probjects.id
|
||||
}
|
||||
setIsShowMark(true)
|
||||
Https.axiosPost(Https.httpUrls.genSketchRecon,value).then((rv)=>{
|
||||
if(rv){
|
||||
data.sketchCatecoryList.forEach((item:any)=>{
|
||||
if(item.value == rv.category){
|
||||
rv.categoryValue = item.value
|
||||
rv.category = item.name
|
||||
}
|
||||
})
|
||||
rv.isLike = false
|
||||
let value = {
|
||||
list: [rv],
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit('setDeReconstruction',value)
|
||||
setIsShowMark(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
const generateLike = (str:string)=>{
|
||||
if(data.generateImg[0].id == -1)return
|
||||
if(str == 'like'){
|
||||
let value={
|
||||
"gender": store.state.Workspace.probjects.sex,
|
||||
"generateDetailId": data.generateImg[0].id,
|
||||
"level1Type": "Sketchboard",
|
||||
"level2Type": data.generateImg[0].categoryValue,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike,value).then((rv)=>{
|
||||
if(rv){
|
||||
data.generateImg[0].isLike = true
|
||||
}
|
||||
})
|
||||
}else{
|
||||
let value = {
|
||||
"generateDetailId": data.generateImg[0].id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:value}).then(
|
||||
(rv) => {
|
||||
data.generateImg[0].isLike = false
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
}
|
||||
const setCanvas = (str:string)=>{
|
||||
dataDom.canvasBox.setCanvas(str)
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
let data = dataDom.canvasBox.getCanvasData()
|
||||
return data
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
selectImgItem,
|
||||
openSetData,
|
||||
getCanvasImg,
|
||||
setGenerateImg,
|
||||
generateLike,
|
||||
getCanvasData,
|
||||
setCanvas,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.deReconstruction{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> .itemBox{
|
||||
margin-right: 2rem;
|
||||
padding: 2rem;
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
// flex: 1;
|
||||
&.selectSektch{
|
||||
width: 37rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&.canvas{
|
||||
flex: 1;
|
||||
}
|
||||
&.finished{
|
||||
width: 58rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .btnTop{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .icon{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
flex: 1;
|
||||
// overflow: hidden;
|
||||
margin: 10rem 0;
|
||||
position: relative;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .btnBottom{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .itemBox:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,32 +8,8 @@
|
||||
<div class="designPage_body">
|
||||
<div class="designPage_left" ref="hidden">
|
||||
<div class="designPage_left_content" :class="{'active':(domHidden)}">
|
||||
<!-- 空状态 start-->
|
||||
<div class="home_left_null" v-show="!isHaveReviewCollection">
|
||||
<div>
|
||||
<div id="Guide_1_1" class="new_collection_button Guide_1_1" @click="startNewCollection()">
|
||||
{{ $t('HomeView.GetStarted') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="is_finish_loading" v-show="isFinishLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 空状态 end-->
|
||||
|
||||
<!-- 有图状态 start-->
|
||||
<div class="home_left_info" v-show="isHaveReviewCollection">
|
||||
<div class="left_info_top">
|
||||
<!-- <div class="button_second" @click="startNewCollection()">
|
||||
{{ $t('HomeView.Start') }}
|
||||
</div> -->
|
||||
<div class="gallery_btn white button_margin" @click="recollection()">
|
||||
{{ $t('HomeView.Edit') }}
|
||||
</div>
|
||||
<div class="gallery_btn white button_margin" @click="resetCollection()">
|
||||
{{ $t('HomeView.Reset') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="home_left_info">
|
||||
<div class="left_info_content scroll_style">
|
||||
<div class="left_info_content_body" ref="collection_canvas">
|
||||
<NewCollectionReview id="collectionReview"></NewCollectionReview>
|
||||
@@ -57,6 +33,7 @@
|
||||
<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
|
||||
<div class="right_top_left">
|
||||
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
|
||||
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
|
||||
{{ $t('HomeView.Design') }}
|
||||
</div>
|
||||
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
||||
@@ -203,8 +180,6 @@
|
||||
</KeepAlive>
|
||||
<productImg ref="productImg" @setTask="setTask"></productImg>
|
||||
<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
|
||||
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
|
||||
|
||||
<!-- 导出缩略图的蒙层 start-->
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
@@ -235,7 +210,6 @@ import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nex
|
||||
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import CollectionModal from "@/component/HomePage/collectionModal.vue";
|
||||
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
|
||||
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
|
||||
import productImg from "@/component/HomePage/productImg.vue";
|
||||
import generalCanvas from "@/component/modules/generalCanvas.vue";
|
||||
import affiche from "@/component/HomePage/affiche.vue";
|
||||
@@ -262,7 +236,6 @@ export default defineComponent({
|
||||
CollectionModal,
|
||||
NewCollectionReview,
|
||||
DesignDetail,
|
||||
ExportNewCoolection,
|
||||
affiche,
|
||||
productImg,
|
||||
generalCanvas,
|
||||
@@ -273,6 +246,7 @@ export default defineComponent({
|
||||
},
|
||||
deactivated() {
|
||||
},
|
||||
props:['isState'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let likeDesignCollectionList: any = computed(() => {
|
||||
@@ -347,7 +321,7 @@ export default defineComponent({
|
||||
})
|
||||
let likeDesignItemIdList = ref([])
|
||||
let workspacePosition:any = computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
return store.state.Workspace.probjects.positionList
|
||||
})
|
||||
let allBoardData:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.allBoardData})
|
||||
@@ -440,8 +414,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const setDeleteDesign = (value:any,index:any)=>{
|
||||
console.log(value);
|
||||
|
||||
store.commit("setDeleteDesignCollectionList",index);
|
||||
let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
|
||||
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
|
||||
@@ -451,8 +423,6 @@ export default defineComponent({
|
||||
item.sort-=1
|
||||
}
|
||||
})
|
||||
console.log(posiitonData.value.likeElList);
|
||||
|
||||
moveItem('')
|
||||
}
|
||||
const cancelDeleteDesign = (index:any)=>{
|
||||
@@ -670,7 +640,6 @@ export default defineComponent({
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isHaveReviewCollection: false,
|
||||
isFinishLoading: false,
|
||||
isShowMark: false, //导出的loading蒙层
|
||||
indicator: h(LoadingOutlined, {
|
||||
@@ -713,103 +682,25 @@ export default defineComponent({
|
||||
sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
|
||||
sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
|
||||
sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
|
||||
this.sortDesignCollection()
|
||||
window.removeEventListener('resize', this.setDesignItemPosition)
|
||||
|
||||
if(this.$props.isState)this.sortDesignCollection()
|
||||
window.removeEventListener('resize', this.setItemPosition)
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
// if(JSON.parse( getCookie('isFirst') as any)){
|
||||
// }
|
||||
let test:any = getCookie('isTest')
|
||||
let isTest =JSON.parse(test)
|
||||
this.store.dispatch('get_clothingType')
|
||||
//判断账号剩余时间是否太短
|
||||
let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
|
||||
|
||||
if(!getCookie('isBeginner') || this.userDetail.systemUser == 0)return
|
||||
// if(this.store.state.UserHabit.bindEmail.isBindEmail)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:`${this.t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${this.t('HomeView.jsContent8')}</a>`,
|
||||
title:`${this.t('HomeView.jsContent7')}`,
|
||||
}
|
||||
this.affiche(text)
|
||||
}, 500);
|
||||
}else{
|
||||
openGuide()
|
||||
}
|
||||
resolve('')
|
||||
}else{
|
||||
openGuide()
|
||||
resolve('')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}else if(!isModalOne && isTest){
|
||||
}else{
|
||||
openGuide()
|
||||
}
|
||||
let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
|
||||
window.addEventListener('beforeunload', (event)=>{
|
||||
this.store.commit("clearAllCollection");
|
||||
});
|
||||
if (this.$route.name == "homePage") {
|
||||
let colorBoards =
|
||||
this.store.state.UploadFilesModule.allBoardData.colorBoards ||
|
||||
[];
|
||||
if (colorBoards.length) {
|
||||
this.isHaveReviewCollection = true;
|
||||
}
|
||||
} else {
|
||||
// this.store.commit("setUserGroupId", this.$route.params.id);
|
||||
// this.store.commit("clearAllCollection");
|
||||
}
|
||||
if (this.$route.params.id) {
|
||||
if(this.$route.params.type == 'History'){
|
||||
this.getHistoryChoose(this.$route.params.id, "normal");
|
||||
}else if(this.$route.params.type == 'Works'){
|
||||
this.getWorks(this.$route.params.id, "normal");
|
||||
}
|
||||
this.store.commit("setDesignCollectionList",[]);
|
||||
} else {
|
||||
// this.store.commit("clearAllData");
|
||||
}
|
||||
// let dataa:any = {
|
||||
// designItemId: 63094,
|
||||
// designItemUrl: null,
|
||||
// designOutfitId: 62798,
|
||||
// designOutfitUrl:''
|
||||
// if (this.$route.params.id) {
|
||||
// if(this.$route.params.type == 'History'){
|
||||
// this.getHistoryChoose(this.$route.params.id, "normal");
|
||||
// }else if(this.$route.params.type == 'Works'){
|
||||
// this.getWorks(this.$route.params.id, "normal");
|
||||
// }
|
||||
// this.store.commit("setDesignCollectionList",[]);
|
||||
// } else {
|
||||
// }
|
||||
// let designDetail: any = this.$refs.designDetail;
|
||||
// let data = {
|
||||
// design: dataa,
|
||||
// index: 0,
|
||||
// collectionList: [],
|
||||
// type: 'dislike',
|
||||
// };
|
||||
|
||||
// designDetail.showDesignDetailModal(data);
|
||||
window.addEventListener('resize', this.setDesignItemPosition)
|
||||
window.addEventListener('resize', this.setItemPosition)
|
||||
this.setSystemDesigner(0)
|
||||
this.setDesignItemStyle()
|
||||
},
|
||||
@@ -846,7 +737,7 @@ export default defineComponent({
|
||||
// addTeam (team:any) {
|
||||
// this.likeDesignCollectionList.push(team)
|
||||
// },
|
||||
setDesignItemPosition(){
|
||||
setItemPosition(){
|
||||
this.setSystemDesigner(0)
|
||||
this.setDesignItemStyle()
|
||||
},
|
||||
@@ -855,8 +746,6 @@ export default defineComponent({
|
||||
let affiche:any = this.$refs.affiche
|
||||
affiche.init(text)
|
||||
})
|
||||
|
||||
// affiche.afficheMask = true
|
||||
},
|
||||
|
||||
//判断模特和当前start的sketch是否匹配
|
||||
@@ -918,13 +807,11 @@ export default defineComponent({
|
||||
_this.store.commit("clearAllCollection");
|
||||
_this.store.commit("setAllBoardDataChoose",{});
|
||||
_this.store.commit("clearShowSketchboard",{});
|
||||
_this.isHaveReviewCollection = false
|
||||
}
|
||||
});
|
||||
},
|
||||
//完成设计
|
||||
finishCollection() {
|
||||
this.isHaveReviewCollection = true;
|
||||
this.isFinishLoading = false;
|
||||
},
|
||||
getContainer() {
|
||||
@@ -1105,24 +992,25 @@ export default defineComponent({
|
||||
moodboardPosition,
|
||||
} = this.store.state.UploadFilesModule.allBoardData;
|
||||
this.randomNum()
|
||||
let workspace = this.store.state.Workspace.workspace
|
||||
let workspace = this.store.state.Workspace.probjects
|
||||
let data: any = {
|
||||
colorBoards: this.getColorBoard(colorBoards),
|
||||
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
||||
moodBoards: this.getBoardId(moodboardFiles),
|
||||
printBoards: this.getPrintId(printboardFiles),
|
||||
sketchBoards: this.getSkecthBoard(sketchboardFiles),
|
||||
moodboardPosition: JSON.stringify(moodboardPosition),
|
||||
switchCategory: !workspace.overallSingle ?"": workspace.position,
|
||||
singleOverall: !workspace.overallSingle ? "overall" : "single",
|
||||
moodboardPosition: moodboardPosition?JSON.stringify(moodboardPosition):null,
|
||||
switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
|
||||
singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
|
||||
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
|
||||
// templateId: 3377,
|
||||
templateId: workspace.mannequinId?workspace.mannequinId:'',
|
||||
modelType:workspace.mannequinType,
|
||||
modelSex:workspace.sex,
|
||||
moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
|
||||
templateId: workspace.model.id,
|
||||
modelType:workspace.model.type,
|
||||
modelSex:workspace?.sex,
|
||||
moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
processId:this.designRandom
|
||||
processId:this.designRandom,
|
||||
projectId:workspace.id
|
||||
};
|
||||
// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
|
||||
this.setSystemDesigner(0)
|
||||
@@ -1130,16 +1018,10 @@ export default defineComponent({
|
||||
num:0,
|
||||
currentNum:0,
|
||||
}
|
||||
let isLoad = false
|
||||
if(designCollectionId == -1){
|
||||
isLoad = true
|
||||
} else if (designCollectionId) {
|
||||
if(designCollectionId) {
|
||||
data.collectionId = designCollectionId;
|
||||
}
|
||||
if(!isLoad){
|
||||
// this.designProgress = 0;
|
||||
// this.isShowMark = true;
|
||||
}
|
||||
|
||||
let arr = []
|
||||
for (let index = 0; index < 8; index++) {
|
||||
let floor = Math.floor(Math.random() * 90000000) + 10000000
|
||||
@@ -1189,6 +1071,7 @@ export default defineComponent({
|
||||
this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
|
||||
},
|
||||
getBoardId(boardData: any) {
|
||||
boardData = boardData || []
|
||||
let dataList = boardData.map((v: any) => {
|
||||
let data: any = {
|
||||
id: v.resData.id,
|
||||
@@ -1200,6 +1083,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
getPrintId(boardData: any) {
|
||||
boardData = boardData || []
|
||||
let dataList = boardData.map((v: any) => {
|
||||
let data: any = {
|
||||
id: v.resData.id,
|
||||
@@ -1213,6 +1097,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
getSkecthBoard(boardData: any) {
|
||||
boardData = boardData || []
|
||||
let sketchBoards = boardData.map((v: any) => {
|
||||
let data = {
|
||||
designType: v.resData.designType,
|
||||
@@ -1226,6 +1111,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
getColorBoard(boardData: any) {
|
||||
boardData = boardData || []
|
||||
let colorBoards = boardData.map((v: any) => {
|
||||
let data = {
|
||||
id: v.id,
|
||||
@@ -1406,7 +1292,6 @@ export default defineComponent({
|
||||
"setDesignCollectionId",
|
||||
data.collection.collectionId
|
||||
);
|
||||
this.isHaveReviewCollection = true;
|
||||
if (type === "normal") {
|
||||
|
||||
let likeDesignCollectionList = data.userLikeDetails.map(
|
||||
@@ -1503,6 +1388,11 @@ export default defineComponent({
|
||||
productImg.init(this.userGroupId)
|
||||
|
||||
},
|
||||
openSetData(button:any){
|
||||
if(button == 'design'){
|
||||
this.designNewCollection()
|
||||
}
|
||||
},
|
||||
//销毁图片详情
|
||||
setDetailDestroy() {
|
||||
// let designDetail: any = this.$refs.designDetail;
|
||||
@@ -1563,14 +1453,9 @@ export default defineComponent({
|
||||
.designPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right:5rem;
|
||||
// overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
// padding-right:5rem;
|
||||
overflow: initial !important;
|
||||
position: relative;
|
||||
// left: 50%;
|
||||
// margin-left: -50%;
|
||||
// transform: translateX(-50%);
|
||||
|
||||
.page_content {
|
||||
position: relative;
|
||||
|
||||
@@ -1616,7 +1501,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 4rem;
|
||||
// padding-bottom: 4rem;
|
||||
box-sizing: border-box;
|
||||
z-index:1;
|
||||
.designPage_body {
|
||||
@@ -1646,71 +1531,16 @@ export default defineComponent({
|
||||
padding-right: 0;
|
||||
width: 0;
|
||||
}
|
||||
.home_left_null {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #f6f6fa;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
|
||||
.home_null_icon {
|
||||
display: block;
|
||||
width: 32.3rem;
|
||||
}
|
||||
|
||||
.new_collection_button {
|
||||
padding: .5rem 5rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
background: #fff;
|
||||
font-size: 1.3rem;
|
||||
color: #000000;
|
||||
margin: 1.2rem auto 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
box-sizing: initial;
|
||||
border: 2px solid #000;
|
||||
font-weight: 600;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.is_finish_loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.home_left_info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: #f6f6fa;
|
||||
border-radius: 2rem;
|
||||
flex-direction: column;
|
||||
.left_info_top {
|
||||
padding: 0 0 1.3rem 0;
|
||||
display: flex;
|
||||
|
||||
.button_margin {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.left_info_content {
|
||||
width: 100%;
|
||||
height: calc(100% - 6.9rem);
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
&.left_info_content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
1553
src/component/HomePage/index/model/mannequin/edit.vue
Normal file
1553
src/component/HomePage/index/model/mannequin/edit.vue
Normal file
File diff suppressed because it is too large
Load Diff
428
src/component/HomePage/index/model/mannequin/index.vue
Normal file
428
src/component/HomePage/index/model/mannequin/index.vue
Normal file
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<div class="mannequin">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<!-- <div class="text">Style：</div>
|
||||
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
|
||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
|
||||
<div class="text">Style：</div>
|
||||
<div class="generalModel_state" style="width: 20rem;">
|
||||
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
|
||||
<a-select
|
||||
v-model:value="selectObject.style"
|
||||
:options="mannequinStyleList"
|
||||
@change="setWorkspaceStyle"
|
||||
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>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
|
||||
<a-switch class="switch" :disabled="libraryList?.[0]==null?true:false" :checked="!systemUser" @click="setSystemUser" />
|
||||
<div class="text" :class="{active:!systemUser}">{{ $t('Habit.User') }}</div>
|
||||
</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)">
|
||||
<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>
|
||||
<span class="icon add" v-if="systemUser" :title="'Add to your library'">+</span>
|
||||
</div>
|
||||
<div class="uploadBox">
|
||||
<div class="upload" v-if="!systemUser">
|
||||
<a-upload
|
||||
:capture="null"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<div style="margin-top: 1rem; font-size: 1.8rem;">Upload mannequin</div>
|
||||
</a-upload>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
|
||||
<edit ref="edit" @submit="getModel"></edit>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted, watch} from 'vue'
|
||||
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 edit from './edit.vue';
|
||||
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
habitSetStyle,edit
|
||||
},
|
||||
props:{
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
systemList:[],
|
||||
libraryList:[],
|
||||
modelList:[],
|
||||
systemUser:true,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
mannequinStyleList:[],
|
||||
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
|
||||
})
|
||||
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
||||
if(newValue != oldValue){
|
||||
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
||||
data.mannequinStyleList.unshift({
|
||||
name:'No style',
|
||||
value:'',
|
||||
id:'',
|
||||
})
|
||||
}
|
||||
},{immediate:true})
|
||||
|
||||
const dataDom = reactive({
|
||||
habitSetStyle:null as any,
|
||||
edit:null as any,
|
||||
})
|
||||
const getModel = ()=>{
|
||||
let value = {
|
||||
sex:data.selectObject.sex,
|
||||
style:data.selectObject?.style?data.selectObject?.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'){
|
||||
data.systemList = item.modelList
|
||||
}else{
|
||||
data.libraryList = item.modelList
|
||||
}
|
||||
});
|
||||
if(data.libraryList?.[0]==null)data.systemUser=true
|
||||
if(!data.systemUser){
|
||||
data.modelList = data.libraryList
|
||||
}else{
|
||||
data.modelList = data.systemList
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const setSelectKey = (item:any)=>{
|
||||
let value = {
|
||||
model:{
|
||||
id:item.id,
|
||||
url:item.presignedUrl,
|
||||
type:data.systemUser?'System':'Library',
|
||||
}
|
||||
}
|
||||
store.commit('setProbject',value)
|
||||
}
|
||||
const setSystemUser = ()=>{
|
||||
data.systemUser = !data.systemUser
|
||||
if(!data.systemUser){
|
||||
data.modelList = data.libraryList
|
||||
}else{
|
||||
data.modelList = data.systemList
|
||||
}
|
||||
}
|
||||
const setStyle = ()=>{
|
||||
dataDom.habitSetStyle.init(data.selectObject);
|
||||
}
|
||||
const setWorkspaceStyle = (item:any,value:any)=>{
|
||||
data.selectObject.styleName = value.name
|
||||
data.selectObject.style = value.value
|
||||
data.selectObject.styleId = value.id
|
||||
getModel()
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
|
||||
}
|
||||
const setEdit = (item:any,type:any,editOrUpload:any)=>{
|
||||
dataDom.edit.showPlacementModal(item,data.selectObject.sex,type,editOrUpload);
|
||||
}
|
||||
const beforeUpload = (file:any,fileList:any)=>{
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.info(t('LibraryPage.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(t('LibraryPage.jsContent4'));
|
||||
}
|
||||
if(isJpgOrPng && isLt2M){
|
||||
// currentUploadFileNum = fileList.length
|
||||
}else{
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
}
|
||||
const fileUploadChange = (data:any)=>{
|
||||
let file = data.file
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
let data_new;
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
setEdit({url:data_new,file:file.originFileObj},'Library','upload')
|
||||
|
||||
};
|
||||
reader.readAsArrayBuffer(file.originFileObj);
|
||||
|
||||
}
|
||||
const deleteSinglePic = (item:any,index:number)=>{
|
||||
Modal.confirm({
|
||||
title: t('LibraryPage.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
confirmDeletePic(item,index,'')
|
||||
}
|
||||
});
|
||||
}
|
||||
//确定删除图片 有data则是单个
|
||||
const confirmDeletePic = (item:any,index:any,nData:any)=>{
|
||||
let newData = {
|
||||
libraryIds:[item.id],
|
||||
deleteModelConfirm:item.deleteModelConfirm?item.deleteModelConfirm : 0,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
if(nData)newData = nData
|
||||
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
||||
(rv: any) => {
|
||||
getModel()
|
||||
// let id = this.store.state.Workspace.workspace.id
|
||||
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
|
||||
// if (rv) {
|
||||
// if(rv.sexEnum.name == 'Female'){
|
||||
// rv.mannequinUrl = rv.femalePresignedUrl
|
||||
// rv.mannequinType = rv.mannequinFemaleType
|
||||
// rv.mannequinId = rv.mannequinFemaleId
|
||||
// }else if(rv.sexEnum.name == 'Male'){
|
||||
// rv.mannequinUrl = rv.malePresignedUrl
|
||||
// rv.mannequinType = rv.mannequinMaleType
|
||||
// rv.mannequinId = rv.mannequinMaleId
|
||||
// }
|
||||
// this.store.commit("setWorkspace", rv);
|
||||
// }
|
||||
// })
|
||||
}
|
||||
).catch((res)=>{
|
||||
// if(res.errCode === 2){
|
||||
// Modal.confirm({
|
||||
// title: res.errMsg,
|
||||
// icon: createVNode(ExclamationCircleOutlined),
|
||||
// okText: 'Yes',
|
||||
// cancelText: 'No',
|
||||
// mask:false,
|
||||
// zIndex:99999,
|
||||
// centered:true,
|
||||
// onOk () {
|
||||
// newData.deleteModelConfirm = 1
|
||||
// confirmDeletePic('',index,newData)
|
||||
// },
|
||||
// onCancel(){
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
});
|
||||
}
|
||||
onMounted(()=>{
|
||||
getModel()
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setSelectKey,
|
||||
setSystemUser,
|
||||
setStyle,
|
||||
setWorkspaceStyle,
|
||||
openSetData,
|
||||
setEdit,
|
||||
|
||||
beforeUpload,
|
||||
fileUploadChange,
|
||||
getModel,
|
||||
deleteSinglePic
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},{ passive: true })
|
||||
}
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mannequin{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .top,> .model{
|
||||
width: 130rem;
|
||||
}
|
||||
> .top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 4rem 0 3rem;
|
||||
> .left,> .right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
> .right{
|
||||
> .switch{
|
||||
margin: 0 2rem;
|
||||
}
|
||||
> .text{
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
&.active{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .model{
|
||||
height: 70rem;
|
||||
width: auto;
|
||||
max-width: 130rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 20rem);
|
||||
position: relative;
|
||||
> .item{
|
||||
width: 25rem;
|
||||
height: 55rem;
|
||||
margin: auto 0;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
padding: 0 1rem;
|
||||
position: relative;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
&.active{
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
> .icon{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
> .icon-tianxie{
|
||||
right: 2rem;
|
||||
}
|
||||
> .icon-shanchu{
|
||||
left: 2rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
> .add{
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.item{
|
||||
&:hover{
|
||||
> .icon-tianxie{
|
||||
display: block;
|
||||
}
|
||||
> .add {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.library{
|
||||
&:hover{
|
||||
>.icon-shanchu{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .uploadBox{
|
||||
padding-left: 2rem;
|
||||
right: .5rem;
|
||||
position: sticky;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
margin: auto 0;
|
||||
> .upload{
|
||||
height: 55rem;
|
||||
width: 29rem;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #fff 0, #fff 0.3em, #000 0, #000 0.6em);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
i{
|
||||
font-size: 4rem;
|
||||
border-radius: 50%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
:deep(.ant-upload-list-text){
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
192
src/component/HomePage/index/model/patternMaking3D/download.vue
Normal file
192
src/component/HomePage/index/model/patternMaking3D/download.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="threeDownPage" ref="threeDownPage">
|
||||
<a-modal class="generalModel"
|
||||
v-model:visible="threeDown"
|
||||
:footer="null"
|
||||
width="77rem"
|
||||
height="65rem"
|
||||
:maskClosable="false"
|
||||
:mask="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:get-container="() => $refs.threeDownPage"
|
||||
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="black"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="black"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; height: 100%;">
|
||||
<div class="modal_title_text" style="text-align: center;">
|
||||
<div>Please select the image size</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="downItem" v-for="item,key in loadList">
|
||||
<div class="title">{{ key }}</div>
|
||||
<div class="keyList">
|
||||
<div class="item" :class="{active:(DSizeItem == select?.size && key == select?.sizeType)}" v-for="DSizeItem in item" @click="downloadIamge(DSizeItem,key)">
|
||||
{{ DSizeItem }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; margin-top: auto;">
|
||||
<div class="gallery_btn" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:['submitBrandAdd'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
threeDown:false,
|
||||
isShowMark:Object(''),
|
||||
loadList:{
|
||||
aa:[{a:1}],
|
||||
bb:[{a:1}],
|
||||
cc:[{a:1}]
|
||||
},
|
||||
select:{
|
||||
sizeType:'',
|
||||
size:'',
|
||||
threeDSimpleId:-1,
|
||||
},
|
||||
})
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const cancelDsign = ()=>{
|
||||
data.threeDown = false;
|
||||
}
|
||||
const getDowList = (id:any)=>{
|
||||
data.isShowMark = true
|
||||
let value = {
|
||||
threeDSimpleId:id,
|
||||
// threeDSimpleId:id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getThreeDSize,{},{params:value}).then((res:any)=>{
|
||||
data.loadList = res.sizeTypeMap
|
||||
data.isShowMark = false
|
||||
data.select.threeDSimpleId = id
|
||||
}).catch((err:any)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
}
|
||||
const setDown = ()=>{
|
||||
data.isShowMark = true
|
||||
let value = {
|
||||
...data.select,
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.downloadZip,{params:value,env:{binary:true,binaryType:'application/octet-stream'}}).then((res:any)=>{
|
||||
console.log(res)
|
||||
//anchor 标签下载
|
||||
let a = document.createElement('a');
|
||||
a.href = res.url;
|
||||
a.download = 'model.zip'; // 设置下载的文件名
|
||||
a.click(); // 触发下载
|
||||
URL.revokeObjectURL(a.href); // 释放 URL 对象
|
||||
|
||||
data.isShowMark = false
|
||||
}).catch((err:any)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
}
|
||||
const openDown = (id:any)=>{
|
||||
data.threeDown = true;
|
||||
getDowList(id)
|
||||
}
|
||||
const downloadIamge = (DSizeItem:any,key:any)=>{
|
||||
data.select.sizeType = key
|
||||
data.select.size = DSizeItem
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
cancelDsign,
|
||||
setDown,
|
||||
openDown,
|
||||
downloadIamge,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.threeDownPage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
:deep(.generalModel){
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
> .downItem{
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
> .title{
|
||||
margin-right: 1.5rem;
|
||||
width: 3.5rem;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> .keyList{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> .item{
|
||||
font-weight: 300;
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
border: 1px solid #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .3s;
|
||||
&.active{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
&:hover{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
273
src/component/HomePage/index/model/patternMaking3D/index.vue
Normal file
273
src/component/HomePage/index/model/patternMaking3D/index.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="patternMaking3D">
|
||||
<div class="selectModel">
|
||||
<div class="heard">Clothing</div>
|
||||
<div class="list">
|
||||
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
|
||||
<img :src="item.url" alt="">
|
||||
</div>
|
||||
<div v-show="!isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!isShowLoading" v-observe></span>
|
||||
<span v-show="isShowLoading">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model" v-show="selectModel.id != -1">
|
||||
<div class="heard">
|
||||
<div class="text">Technical sketch</div>
|
||||
<div class="switch">
|
||||
back
|
||||
<a-switch v-model:checked="isFront" />
|
||||
front
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelBox">
|
||||
<div v-show="!imgOrThree" class="img">
|
||||
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
||||
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
||||
</div>
|
||||
<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
|
||||
</div>
|
||||
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
|
||||
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
|
||||
</div>
|
||||
<div class="flatPatterm" v-show="selectModel.id != -1">
|
||||
<div class="heard">Flat pattern</div>
|
||||
<div class="modelBox">
|
||||
<div class="img">
|
||||
<img :src="selectModel.threeDPatternLayoutUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="openDown()">Download</div>
|
||||
</div>
|
||||
<div class="download">
|
||||
<download ref="download"></download>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import threeBox from "./three.vue"
|
||||
import download from "./download.vue"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
threeBox,download
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
selectModel:{
|
||||
id:-1,
|
||||
} as any,
|
||||
modelList:[] as any,
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
isShowLoading:false,
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
imgOrThree:false,
|
||||
isFront:false,
|
||||
})
|
||||
const setSelectModel = (item:any)=>{
|
||||
data.isShowMark = true
|
||||
const value = {
|
||||
threeDSimpleId:item.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getLayoutDetail,{},{params:value}).then((res:any)=>{
|
||||
data.selectModel = res
|
||||
data.selectModel.id = item.id
|
||||
data.isShowMark = false
|
||||
data.imgOrThree = false
|
||||
// if(data.imgOrThree){
|
||||
// dataDom.threeBox.openSetData()
|
||||
// }
|
||||
store.commit('setPatternMaking3D',item.id)
|
||||
}).catch((err:any)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
}
|
||||
const dataDom = reactive({
|
||||
threeBox:null as any,
|
||||
download:null as any,
|
||||
})
|
||||
const openSetData = ()=>{
|
||||
nextTick(()=>{
|
||||
let id = store.state.HomeStoreModule.patternMaking3D
|
||||
if(id && data.selectModel.id == -1)setSelectModel({id})
|
||||
})
|
||||
}
|
||||
const getModelList = ()=>{
|
||||
if(data.isShowMark && !data.isNoData)return
|
||||
let value = {
|
||||
page: data.currentPage,
|
||||
size:data.pageSize,
|
||||
|
||||
}
|
||||
data.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.threeDPage,value).then(
|
||||
(rv: any) => {
|
||||
if(rv.content.length == 0)data.isNoData = true
|
||||
data.isShowLoading = false
|
||||
data.modelList.push(...rv.content)
|
||||
}
|
||||
).catch((res)=>{
|
||||
data.isNoData = true
|
||||
});
|
||||
}
|
||||
const setImgOrThree = (boolean:boolean)=>{
|
||||
data.imgOrThree = boolean
|
||||
if(boolean){
|
||||
nextTick(()=>{
|
||||
dataDom.threeBox.openSetData(data.selectModel)
|
||||
// dataDom.threeBox.openSetData(data.selectModel.threeDPatternLayoutUrl)
|
||||
})
|
||||
}
|
||||
}
|
||||
const downList = ()=>{
|
||||
let value = {
|
||||
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.threeDPage,value).then(
|
||||
|
||||
)
|
||||
}
|
||||
const openDown = ()=>{
|
||||
dataDom.download.openDown(data.selectModel.id)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setSelectModel,
|
||||
openSetData,
|
||||
getModelList,
|
||||
setImgOrThree,
|
||||
openDown,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
observe:{
|
||||
mounted (el,binding) {
|
||||
// console.log(binding.instance);
|
||||
let this_:any = binding.instance
|
||||
this_.isShowMark = false
|
||||
this_.isNoData = false
|
||||
let parentDom = el.parentNode
|
||||
this_.getModelList()
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
this_.currentPage += 1
|
||||
this_.getModelList()
|
||||
},
|
||||
).observe(el);
|
||||
},
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.patternMaking3D{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
font-size: 1.4rem;
|
||||
> .selectModel,> .model,>.flatPatterm{
|
||||
padding: 3rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .heard{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
> .switch{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .selectModel{
|
||||
width: 70rem;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
> .list{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
> .modelItem{
|
||||
width: calc(100% / 4 - 1rem);
|
||||
margin: .5rem;
|
||||
aspect-ratio: 1 / 1.2;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #D4D4D4;
|
||||
cursor: pointer;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&.active{
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .model ,> .flatPatterm{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
> .modelBox{
|
||||
width: 100%;
|
||||
height: 20rem;
|
||||
height: 75rem;
|
||||
margin: auto;
|
||||
>.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.material_content_list_loding{
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
.page_loading{
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.download{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
391
src/component/HomePage/index/model/patternMaking3D/three.vue
Normal file
391
src/component/HomePage/index/model/patternMaking3D/three.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<div class="three">
|
||||
<div class="model" ref="threeDom">
|
||||
|
||||
</div>
|
||||
<div class="load" v-show="load.state">
|
||||
<i class="fi fi-rr-cubes"></i>
|
||||
<div class="text">Load...</div>
|
||||
<div class="loadBox">
|
||||
<div class="schedule" :style="{width:load.progress+'%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,shallowRef,provide,nextTick,onMounted,toRefs, reactive} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
// @ts-ignore
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
|
||||
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
|
||||
import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
|
||||
import gsap from 'gsap';
|
||||
import { env } from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
scene:shallowRef() as any,//场景
|
||||
group:shallowRef() as any,//组
|
||||
camera:shallowRef() as any,//相机
|
||||
renderer:shallowRef() as any,//渲染器
|
||||
pointLight:shallowRef() as any,//光
|
||||
controls:shallowRef() as any,//监听鼠标、键盘事件
|
||||
load:{
|
||||
state:false,
|
||||
progress:0 as any,
|
||||
}
|
||||
})
|
||||
const dataDom = reactive({
|
||||
threeDom:null as any,
|
||||
})
|
||||
const init = ()=>{
|
||||
data.scene = new THREE.Scene();
|
||||
data.group = new THREE.Group()
|
||||
data.scene.add(data.group)
|
||||
|
||||
//创建相机对象
|
||||
// this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
|
||||
data.camera = new THREE.PerspectiveCamera(45, dataDom.threeDom.offsetWidth / dataDom.threeDom.offsetHeight, 0.1, 10000);
|
||||
data.camera.position.set(0, 90, 6); //设置相机位置
|
||||
data.camera.lookAt(data.scene.position); //设置相机方向(指向的场景对象)
|
||||
|
||||
/**
|
||||
* 创建渲染器对象
|
||||
*/
|
||||
let width = dataDom.threeDom.offsetWidth; //窗口宽度
|
||||
let height = dataDom.threeDom.offsetHeight; //窗口高度
|
||||
data.renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
logarithmicDepthBuffer: true,//深度缓存 防止模型闪烁重影
|
||||
});
|
||||
|
||||
// data.renderer.outpuEncoding = THREE?.RGBEEncoding//设置输出颜色编码格式
|
||||
|
||||
data.renderer.toneMapping = THREE.ACESFilmicToneMapping;//设置色调
|
||||
data.renderer.toneMappingExposure = 1.3;
|
||||
|
||||
data.renderer.shadowMap.enabled = true;
|
||||
data.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
data.renderer.setSize(width, height); //设置渲染区域尺寸
|
||||
data.renderer.setClearColor(0xffffff, 1); //设置背景颜色
|
||||
dataDom.threeDom.innerHTML = '';
|
||||
dataDom.threeDom.appendChild(data.renderer.domElement);
|
||||
// 设置渲染器大小
|
||||
//环境光
|
||||
let ambient = new THREE.AmbientLight(0xffffff,.8);
|
||||
data.scene.add(ambient);
|
||||
data.controls = new OrbitControls(data.camera,data.renderer.domElement)//监听鼠标、键盘事件;
|
||||
// data.controls.minDistance = 500; // 设置相机与焦点的最小距离
|
||||
// data.controls.maxDistance = 4000; // 设置相机与焦点的最大距离
|
||||
data.controls.mouseButtons = {
|
||||
// LEFT:THREE.MOUSE.PAN, // 左键 拖动(默认旋转：ROTATE)
|
||||
LEFT:THREE.MOUSE.ROTATE, // 左键 拖动(默认旋转：ROTATE)
|
||||
MIDDLE:THREE.MOUSE.DOLLY, // 滑轮 缩放
|
||||
RIGHT:THREE.MOUSE.PAN // 右键 旋转（默认拖动：PAN）
|
||||
// RIGHT:THREE.MOUSE.ROTAafTE // 右键 旋转（默认拖动：PAN）
|
||||
}
|
||||
/**
|
||||
* 光源设置
|
||||
*/
|
||||
//点光源
|
||||
/**
|
||||
* AmbientLight 环境光
|
||||
PointLight 点光源
|
||||
DirectionalLight 平行光，比如太阳光
|
||||
SpotLight 聚光源
|
||||
*/
|
||||
data.pointLight = new THREE.DirectionalLight(0xffffff,.5);
|
||||
data.pointLight.intensity = 1.2
|
||||
data.pointLight.castShadow = true//开启阴影
|
||||
data.pointLight.shadow.mapSize = new THREE.Vector2(width, height)
|
||||
data.scene.add(data.pointLight); //点光源添加到场景中
|
||||
// data.pointLight.position.set(400, 200, 300); //点光源位置
|
||||
data.pointLight.position.y = 400;
|
||||
data.pointLight.position.z = 200;
|
||||
data.pointLight.position.x = 200;
|
||||
let floorGeometry = new THREE.PlaneGeometry(5000, 3000)//地板大小
|
||||
let floorMaterial = new THREE.MeshPhongMaterial({ color: "#7e7ab0", })
|
||||
let floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floorMesh.rotation.x = -0.5 * Math.PI;
|
||||
floorMesh.receiveShadow = true;
|
||||
floorMesh.position.y = -0.001;
|
||||
data.scene.add(floorMesh);
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
// const texture = textureLoader.load('/3dModel/sketch-thick.jpg');
|
||||
data.scene.background = new THREE.Color("#eee");
|
||||
// data.scene.background = texture;
|
||||
|
||||
let openModel = (event:any)=>{
|
||||
let mouse=new THREE.Vector2();
|
||||
let raycaster=new THREE.Raycaster();
|
||||
mouse.x=(event.clientX/window.innerWidth)*2-1;
|
||||
mouse.y=-(event.clientY/window.innerHeight)*2+1;
|
||||
raycaster.setFromCamera(mouse, data.camera);
|
||||
let intersects = raycaster.intersectObjects(data.scene.children);
|
||||
return intersects
|
||||
}
|
||||
|
||||
dataDom.threeDom.ondblclick = (event:any)=>{
|
||||
let intersects = openModel(event);
|
||||
if(!intersects || intersects.length<=0) return
|
||||
const bbox = new THREE.Box3().setFromObject(intersects[0].object);
|
||||
const size = new THREE.Vector3();
|
||||
let target2 = bbox.getCenter(size);//获取选中包围起来后的中心坐标
|
||||
animateCamera(data.camera.position,intersects[0].point,data.controls.target,target2)
|
||||
}
|
||||
let isTweening = false;
|
||||
function animateCamera(current1:any, target1:any, current2:any, target2:any){
|
||||
if (isTweening) return
|
||||
isTweening = true
|
||||
let options = {
|
||||
x1: current1.x, // 相机当前位置x
|
||||
y1: current1.y, // 相机当前位置y
|
||||
z1: current1.z, // 相机当前位置z
|
||||
x2: current2.x, // 控制当前的中心点x
|
||||
y2: current2.y, // 控制当前的中心点y
|
||||
// z2: current2.z // 控制当前的中心点z
|
||||
}
|
||||
gsap.to(options,{
|
||||
x1: 0, // 新的相机位置x
|
||||
y1: target2.y, // 新的相机位置y
|
||||
z1: 2500, // 新的相机位置z
|
||||
x2: 0, // 新的控制中心点位置x
|
||||
y2: target2.y, // 新的控制中心点位置x
|
||||
duration:1,
|
||||
ease:'linear',
|
||||
onUpdate:()=>{
|
||||
data.camera.position.x = options.x1;
|
||||
data.camera.position.y = options.y1;
|
||||
data.camera.position.z = options.z1;
|
||||
data.controls.target.x = options.x2;
|
||||
data.controls.target.y = options.y2;
|
||||
// data.controls.target.z = object.z2;
|
||||
data.controls.update();
|
||||
},
|
||||
onComplete:()=>{
|
||||
isTweening = false
|
||||
}
|
||||
// z2: target2.z // 新的控制中心点位置x
|
||||
})
|
||||
}
|
||||
// let setHighlight = (obj:any)=>{
|
||||
// outlinePass.selectedObjects = obj;
|
||||
// }
|
||||
|
||||
|
||||
data.controls.enableDamping = true;
|
||||
let animate = function () {
|
||||
requestAnimationFrame(animate);
|
||||
// data.renderer.render(data.scene, data.camera);
|
||||
// model.rotation.x += 0.01; //旋转物体
|
||||
var vector = data.camera.position.clone()
|
||||
data.controls.update();
|
||||
data.renderer.render(data.scene, data.camera);
|
||||
// point.position.set(vector.x,vector.y,vector.z);
|
||||
// group.rotation.y += 0.01;
|
||||
|
||||
// composer.render();
|
||||
};
|
||||
animate();
|
||||
}
|
||||
const setModel = async (url:any)=>{
|
||||
clearModel()
|
||||
await addModel(url)
|
||||
// addMaterial()
|
||||
}
|
||||
const addMaterial = ()=>{
|
||||
//添加图片材质
|
||||
data.load.state = true
|
||||
let textureLoader = new THREE.TextureLoader()
|
||||
textureLoader.load('/3dModel/texture0.webp', // 图片放在public/textures目录下
|
||||
(texture:any) => {
|
||||
// 3. 配置纹理参数
|
||||
texture.wrapS = THREE.RepeatWrapping;
|
||||
texture.wrapT = THREE.RepeatWrapping;
|
||||
texture.repeat.set(1, 1); // 纹理重复次数
|
||||
texture.anisotropy = 32; // 提高纹理清晰度
|
||||
data.group?.traverse((child:any) => {
|
||||
if (child.isMesh) {
|
||||
// 5. 创建新材质（根据需求选择材质类型）
|
||||
const newMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture, // 基础颜色贴图
|
||||
roughness: 0.7, // 表面粗糙度 (0-1)
|
||||
metalness: 0.2, // 金属质感 (0-1)
|
||||
side: THREE.DoubleSide // 双面渲染
|
||||
});
|
||||
console.log(child)
|
||||
// 6. 替换原有材质
|
||||
child.material = newMaterial;
|
||||
|
||||
// 7. 如果需要单独控制某些子模型的UV
|
||||
if (child.geometry.attributes.uv) {
|
||||
// 可以在这里修改UV坐标
|
||||
const uvs = child.geometry.attributes.uv.array;
|
||||
// ...UV操作逻辑...
|
||||
}
|
||||
}
|
||||
data.load.state = false
|
||||
},(xhr:any) => { // 加载进度回调
|
||||
console.log(xhr.loaded , xhr.total)
|
||||
const percent = xhr.total == 0?100:(xhr.loaded / xhr.total * 100).toFixed(2);
|
||||
data.load.progress = percent
|
||||
// updateProgressBar(Number(percent));
|
||||
},(error:any) => {
|
||||
console.error('纹理加载失败:', error);
|
||||
data.load.state = false
|
||||
});
|
||||
})
|
||||
}
|
||||
const addModel = async (url:any)=>{
|
||||
await new Promise((resolve, reject) => {
|
||||
var fbxLoader = new GLTFLoader();
|
||||
let drac = new DRACOLoader()
|
||||
drac.setDecoderPath('/draco/')
|
||||
fbxLoader.setDRACOLoader(drac)
|
||||
// fbxLoader.load('/3dModel/222/1111.glb',
|
||||
fbxLoader.load(url,
|
||||
|
||||
(obj:any) => {
|
||||
let scene = obj.scene;
|
||||
var box = new THREE.Box3().setFromObject(scene);
|
||||
var center = box.getCenter(new THREE.Vector3());
|
||||
data.controls.target.copy(center);
|
||||
// data.controls.autoRotate = true
|
||||
data.camera.position.y = center.y;
|
||||
data.camera.position.z = 1000;
|
||||
data.pointLight.position.y = 250;
|
||||
data.pointLight.position.z = 1250;
|
||||
data.group.add(scene);
|
||||
resolve('')
|
||||
},(xhr:any) => { // 加载进度回调
|
||||
console.log(xhr.loaded , xhr.total)
|
||||
const percent = xhr.total == 0?100:(xhr.loaded / xhr.total * 100).toFixed(2);
|
||||
console.log(`模型加载进度: ${percent}%`);
|
||||
data.load.progress = percent
|
||||
// updateProgressBar(Number(percent));
|
||||
},(error:any) => { // 加载失败回调
|
||||
console.error('模型加载失败:', error);
|
||||
reject('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const clearModel = ()=>{
|
||||
const oldGroup:any = data.group;
|
||||
data.group = new THREE.Group();
|
||||
data.scene.add(data.group);
|
||||
data.scene.remove(oldGroup);
|
||||
}
|
||||
// const loadThree = ()=>{
|
||||
|
||||
// init()
|
||||
// }
|
||||
const getModelUrl = (value:any)=>{
|
||||
console.log(12314343)
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
// Https.axiosGet(Https.httpUrls.getThreeDGlb,{params:{threeDSimpleId:value.id},env:{binary:true}}).then((rv)=>{
|
||||
// //二进制流转本地路径
|
||||
|
||||
// console.log(rv)
|
||||
// resolve(rv)
|
||||
// }).catch(()=>{
|
||||
// reject('')
|
||||
// })
|
||||
// //fetch get请求携带token
|
||||
|
||||
|
||||
// fetch("https://develop.api.aida.com.hk/api/project/getThreeDGlb?threeDSimpleId=1", {
|
||||
// headers:{
|
||||
// authorization:'Bearer-eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiI4OCIsInN1YiI6IntcImNvdW50cnlcIjpcIkNoaW5hXCIsXCJpZFwiOjg4LFwibGFuZ3VhZ2VcIjpcIkVOR0xJU0hcIixcInVzZXJuYW1lXCI6XCJzaGJcIn0iLCJpYXQiOjE3NDMzNDkwNjQsImlzcyI6IkRXSiIsImF1dGhvcml0aWVzIjoiW10iLCJleHAiOjE3NTE5ODkwNjR9.gmL0JufYy9wd23qCY-ibwhgpXZ2X68WAiHSeC99I4x7cipWyxLaQmuIBk2SJSdWBm0tTN2Mx-etXO9a7MtQmpw',
|
||||
// }
|
||||
// }).then(res => {
|
||||
// return res.blob();
|
||||
// }).then((res) => {
|
||||
// var url = URL.createObjectURL(res);
|
||||
// console.log(url, res)
|
||||
// resolve(url)
|
||||
// }).catch(err => {
|
||||
// console.log(err);
|
||||
// })
|
||||
resolve(value.threeDSimpleUrl)
|
||||
})
|
||||
}
|
||||
const openSetData = async (value:any)=>{
|
||||
if(!data.scene){
|
||||
init()
|
||||
}
|
||||
data.load.state = true
|
||||
const modeUrl = await getModelUrl(value)
|
||||
await setModel(modeUrl)
|
||||
data.load.state = false
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
openSetData,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.three{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .model{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> .load{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
> i{
|
||||
font-size: 3rem;
|
||||
}
|
||||
> .loadBox{
|
||||
width: 15rem;
|
||||
height: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
> .schedule{
|
||||
height: 100%;
|
||||
background: greenyellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
536
src/component/HomePage/index/model/poseTransfer/index.vue
Normal file
536
src/component/HomePage/index/model/poseTransfer/index.vue
Normal file
@@ -0,0 +1,536 @@
|
||||
<template>
|
||||
<div class="poseTransfer">
|
||||
<div class="configuratioBox" :class="{active:button.left}">
|
||||
<div class="configuratio">
|
||||
<div class="title">Give pose for them to select</div>
|
||||
<div class="content">
|
||||
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
|
||||
<div class="selectImg">
|
||||
<div class="head">
|
||||
<div class="text">Current</div>
|
||||
</div>
|
||||
<div class="imgBox">
|
||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
</div>
|
||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
</div>
|
||||
<div class="upload_item item">
|
||||
<div class="upload_file_item">
|
||||
<a-upload
|
||||
:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
v-model:file-list="fileList"
|
||||
:multiple="true"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="poses">
|
||||
<div class="head">
|
||||
<div class="text">Target poses</div>
|
||||
</div>
|
||||
<div class="imgBox">
|
||||
<div class="item" v-for="item in currentList">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate">
|
||||
<div class="gallery_btn" v-show="!isGenerate" @click="getgenerate">
|
||||
{{ $t('Generate.Generate') }}
|
||||
</div>
|
||||
<div v-show="isGenerate && !remGenerate" class="gallery_btn">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
</div>
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="likeBox">
|
||||
<div class="element">
|
||||
<div class="title">Selected Product</div>
|
||||
<div class="content">
|
||||
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
|
||||
</div>
|
||||
<div class="btnLeft" @click="setSize('left')">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
||||
</div>
|
||||
<div class="btnRight" @click="setSize('right')">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noLikeBox" :class="{active:button.right}">
|
||||
<div class="element">
|
||||
<div class="title">Generate Product</div>
|
||||
<div class="content">
|
||||
<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { Upload,message,Modal } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import generalDrag from '@/component/modules/generalDrag.vue';
|
||||
import { getUploadUrl,isMoible,getMinioUrl } from "@/tool/util";
|
||||
import { getCookie,setCookie } from "@/tool/cookie";
|
||||
import showViewVideo from "@/tool/mount";
|
||||
|
||||
// import selectList from '@/component/DetailCopy/module/selectList.vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
generalDrag,
|
||||
// selectList,
|
||||
},
|
||||
props:{
|
||||
isState:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
}
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const data:any = reactive({
|
||||
button:{
|
||||
left:false,
|
||||
right:false,
|
||||
},
|
||||
currentList:[],
|
||||
fileList:[],
|
||||
selectImg:{},
|
||||
token:getCookie('token'),
|
||||
upload:{
|
||||
projectId:store.state.Workspace.probjects.id
|
||||
},
|
||||
waitList:[],
|
||||
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
|
||||
noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
|
||||
isGenerate:false,//判断是否正在进行generate
|
||||
remGenerate:false,
|
||||
removeGenerate:false,
|
||||
})
|
||||
const setIsShowMark:any = inject('setIsShowMark')
|
||||
const dataDom = reactive({
|
||||
generalDragLeft:null as any,
|
||||
generalDragRight:null as any,
|
||||
scaleVideo:null as any,
|
||||
})
|
||||
const selectImgItem = (item:any)=>{
|
||||
data.selectImg = item
|
||||
data.selectImg.minioUrl = getMinioUrl(item.url)
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
// dataDom.generalDrag.openSetData()
|
||||
data.currentList = store.state.UploadFilesModule.modularData.toProduct
|
||||
setIsShowMark(false)
|
||||
}
|
||||
const setSize = (str:any)=>{
|
||||
data.button[str] = !data.button[str]
|
||||
setItemPosition()
|
||||
}
|
||||
const setItemPosition = ()=>{
|
||||
setTimeout(()=>{
|
||||
dataDom.generalDragLeft.setItemPosition()
|
||||
dataDom.generalDragRight.setItemPosition()
|
||||
},200)
|
||||
}
|
||||
const getgenerate = ()=>{
|
||||
if(!data.selectImg.minioUrl)return
|
||||
if(data.isGenerate)return
|
||||
|
||||
data.isGenerate = true
|
||||
data.remGenerateTime = setTimeout(()=>{
|
||||
data.remGenerate = true
|
||||
},10000)
|
||||
let value = {
|
||||
poseId:1,
|
||||
projectId:store.state.Workspace.probjects.id,
|
||||
productImage:data.selectImg.minioUrl,
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.poseTransform,{params:value}).then((rv)=>{
|
||||
data.noLikeList.unshift({taskId:rv})
|
||||
setGenerate(rv)
|
||||
}).catch((res:any)=>{
|
||||
data.isGenerate = false
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.remGenerate = false
|
||||
})
|
||||
}
|
||||
const setGenerate = (dataList:any)=>{
|
||||
let list = dataList
|
||||
let dataNum = dataList.length
|
||||
let state = true
|
||||
data.generateTime = setInterval(()=>{
|
||||
if(!data.isGenerate || data.remGenerate)return
|
||||
if(!state)return
|
||||
state = false
|
||||
Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
|
||||
(rv) => {
|
||||
rv=[rv]
|
||||
state = true
|
||||
if(data.isGenerate){//防止取消后有正在执行的获取状态
|
||||
// data.waitList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
||||
rv.forEach((element:any) => {
|
||||
if(element.status == 'Success'){
|
||||
element.url = element.firstFrameUrl
|
||||
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
|
||||
data.noLikeList[index] = element
|
||||
list = list.filter((item:any) => item !== element.taskId);
|
||||
}
|
||||
});
|
||||
data.waitList = list
|
||||
if((list.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
|
||||
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
||||
message.info(t('Generate.effectPoor'));
|
||||
}else{
|
||||
}
|
||||
|
||||
// this.store.dispatch('getCredits')
|
||||
clearInterval(data.generateTime)
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.remGenerate = false
|
||||
data.isGenerate = false
|
||||
}
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
clearInterval(data.generateTime)
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.isGenerate = false
|
||||
data.remGenerate = false
|
||||
});
|
||||
},1000)
|
||||
}
|
||||
const removeGenerate = ()=>{
|
||||
//取消操作
|
||||
data.isGenerate = false
|
||||
data.remGenerate = false
|
||||
clearInterval(data.generateTime)
|
||||
if(data.waitList){
|
||||
// let str = data.waitList.map((obj:any) => obj.taskId).join(',');
|
||||
let value = {
|
||||
uniqueId:data.waitList,
|
||||
userId:store.state.UserHabit.userDetail.userId,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
type: 'PoseTransferation'
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:value}).then(
|
||||
(rv) => {
|
||||
data.waitList = []
|
||||
data.noLikeList = data.noLikeList.filter((item:any)=>item.status == 'Success')
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
}
|
||||
let 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(useI18n().t('MoodboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(useI18n().t('MoodboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
const fileUploadChange = (value: any)=> {
|
||||
let file = value.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.id = res.data.id
|
||||
file.isChecked = true
|
||||
file.type = 'ProductElement'
|
||||
// if(props.productimgMenu.value == 'Relight'){
|
||||
// file.type = "ToProductImage"
|
||||
// }
|
||||
data.selectImg = res.data
|
||||
data.fileList.filter((v: any) => v.status === "done");
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
// this.showFileList = productImgData.fileList
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
}
|
||||
const likeSetBtn = (id:any,str:string)=>{
|
||||
data.likeList.forEach((item:any,index:any)=>{
|
||||
if(item.id == id){
|
||||
if(str == 'zoom'){
|
||||
showViewVideo({url:item.videoUrl})
|
||||
}else if(str == 'like'){
|
||||
likeFile(item,'noLike',index)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
const noLikeSetBtn = (id:any,str:string)=>{
|
||||
data.noLikeList.forEach((item:any,index:any)=>{
|
||||
if(item.id == id){
|
||||
if(str == 'zoom'){
|
||||
showViewVideo({url:item.videoUrl})
|
||||
}else if(str == 'like'){
|
||||
likeFile(item,'like',index)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
let likeFile = (item:any,str:any,index:any) =>{
|
||||
let url
|
||||
let value = {
|
||||
}
|
||||
if(str == 'like'){
|
||||
value = {
|
||||
likeOrDislike:'like',
|
||||
transformedId:item.id,
|
||||
}
|
||||
}else{
|
||||
value = {
|
||||
likeOrDislike:'dislike',
|
||||
transformedId:item.id,
|
||||
}
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.poselikeOrDisike, {},{params:value}).then(
|
||||
(rv) => {
|
||||
if(str == 'like'){
|
||||
let value = {
|
||||
list:[item],
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setPoseTransfer", value);
|
||||
data.noLikeList.splice(index,1)
|
||||
}else{
|
||||
let value = {
|
||||
list:[item],
|
||||
str:'splice',
|
||||
index:index,
|
||||
}
|
||||
data.noLikeList.push(item)
|
||||
store.commit("setPoseTransfer", value);
|
||||
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
openSetData,
|
||||
selectImgItem,
|
||||
setSize,
|
||||
setItemPosition,
|
||||
getgenerate,
|
||||
getUploadUrl,
|
||||
beforeUpload,
|
||||
fileUploadChange,
|
||||
removeGenerate,
|
||||
likeSetBtn,
|
||||
noLikeSetBtn,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.poseTransfer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
> .configuratioBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&.active{
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .generate{
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
> .configuratioBox > .configuratio{
|
||||
padding-right: 3.8rem;
|
||||
width: 31.8rem;
|
||||
> .title{
|
||||
// font-size: 2.6rem;
|
||||
}
|
||||
> .content{
|
||||
margin-top: 4rem;
|
||||
> .selectImg,> .poses{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .imgBox{
|
||||
flex: 1;
|
||||
max-height: 45rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
> .item{
|
||||
width: calc(100% / 2 - .5rem);
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #8e8e8e;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
height: 25rem;
|
||||
&.active{
|
||||
border: 2px solid;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .upload_item{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
> .head{
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
> .text{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .selectImg{
|
||||
> .head{
|
||||
> .text{
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.4rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -.5rem;
|
||||
width: 0px;
|
||||
width: 100%;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .poses{
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .likeBox ,> .noLikeBox{
|
||||
|
||||
margin-top: 1.8rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
> .element{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .btnLeft,> .btnRight{
|
||||
position: absolute;
|
||||
width: 4rem;
|
||||
height: 7rem;
|
||||
background: #fff;
|
||||
border: 2px solid;
|
||||
border-right: none;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
top: 50%;
|
||||
transform: translate(-100%,-50%);
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
>span{
|
||||
transition: all .3s;
|
||||
transform: rotate(90deg);
|
||||
&.active{
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btnRight{
|
||||
left: calc(100% + 4rem) ;
|
||||
transform: translate(-100%,-50%) rotate(180deg);
|
||||
}
|
||||
> .content{
|
||||
flex: 1;
|
||||
padding: 1.7rem 2rem;
|
||||
border-radius: 3rem;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
> .title{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
> .noLikeBox{
|
||||
padding-left: 2.3rem;
|
||||
&.active{
|
||||
flex: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1078
src/component/HomePage/index/model/toProduct/index.vue
Normal file
1078
src/component/HomePage/index/model/toProduct/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
244
src/component/HomePage/index/workflow/content/index.vue
Normal file
244
src/component/HomePage/index/workflow/content/index.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="contentBox">
|
||||
<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
|
||||
<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
|
||||
<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
|
||||
<productDrawingDesign v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></productDrawingDesign>
|
||||
<printingDesign3D v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printingDesign3D>
|
||||
<printDesign v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printDesign>
|
||||
</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 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 { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
|
||||
},
|
||||
props:{
|
||||
selectKey_:String,
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
},
|
||||
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 == 'workspace')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('')
|
||||
})
|
||||
}
|
||||
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)=>{
|
||||
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%;
|
||||
> .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>
|
||||
214
src/component/HomePage/index/workflow/content/printDesign.vue
Normal file
214
src/component/HomePage/index/workflow/content/printDesign.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace 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,watch,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,
|
||||
},
|
||||
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),//选择的项目
|
||||
})
|
||||
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>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
|
||||
<!-- <canvasUpload></canvasUpload> -->
|
||||
</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 patternMaking3D from '../../model/patternMaking3D/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/test.vue";
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
patternMaking3D,canvasUpload,workspace
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType: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),//选择的项目
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
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", ]
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['patternMaking3D']
|
||||
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)=>{
|
||||
store.commit('setPatternMaking3D',value.threeDSimpleId)
|
||||
}
|
||||
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>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace 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,watch,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,
|
||||
},
|
||||
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),//选择的项目
|
||||
})
|
||||
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>
|
||||
334
src/component/HomePage/index/workflow/content/seriesDesign.vue
Normal file
334
src/component/HomePage/index/workflow/content/seriesDesign.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace 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,watch,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,
|
||||
},
|
||||
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),//选择的项目
|
||||
})
|
||||
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)=>{
|
||||
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']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)//设置历史数据
|
||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','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
|
||||
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;
|
||||
}
|
||||
);
|
||||
}
|
||||
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
||||
store.commit("setUserGroupId", data.design.userGroupId);
|
||||
console.log(data.toProduct)
|
||||
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;
|
||||
});
|
||||
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>
|
||||
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace 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,watch,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,
|
||||
},
|
||||
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),//选择的项目
|
||||
})
|
||||
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;
|
||||
}
|
||||
);
|
||||
}
|
||||
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>
|
||||
223
src/component/HomePage/index/workflow/content/sketchDesign.vue
Normal file
223
src/component/HomePage/index/workflow/content/sketchDesign.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<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,watch,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 { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,SketchboardUpload,deReconstruction,canvasUpload
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType: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),//选择的项目
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
sketchBoard:null as any,
|
||||
deReconstruction:null as any,
|
||||
canvas: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']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['sketchBoard','deReconstruction']
|
||||
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>
|
||||
@@ -1,34 +1,44 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||
<div class="contentBox">
|
||||
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
||||
<navList @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"></navListBox>
|
||||
<navListBox
|
||||
@setSelectKey=setSelectKey
|
||||
:navListData="navListData"
|
||||
:selectKey="selectKey"
|
||||
:workflowType="workflowType"
|
||||
v-model:isShowMark="isShowMark"
|
||||
></navListBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="back" @click="setBack()">< Back</div>
|
||||
<design class="design" v-if="selectKey_ == 'design'"></design>
|
||||
<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
||||
<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
||||
<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||
<div class="back">
|
||||
<div class="title">
|
||||
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
|
||||
</div>
|
||||
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
|
||||
</div>
|
||||
<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!isUpdataPorject && !selectObject.id" class="workflow">
|
||||
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
|
||||
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 design from './design/index.vue'
|
||||
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 content from './content/index.vue'
|
||||
import workspace from './workspace.vue'
|
||||
import navList from './nav.vue'
|
||||
import navListBox from './navBox.vue'
|
||||
|
||||
@@ -37,8 +47,20 @@ import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
|
||||
content,navList,navListBox,workspace
|
||||
},
|
||||
//props
|
||||
props:{
|
||||
workflowType:{
|
||||
type:String,
|
||||
|
||||
},
|
||||
httpWorkflowType:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
emits:['goHome'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
@@ -47,89 +69,55 @@ export default defineComponent({
|
||||
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:[
|
||||
{
|
||||
icon:'',
|
||||
value:'design',
|
||||
name:'1',
|
||||
task:'1-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'moodBoard',
|
||||
name:'2',
|
||||
task:'1-2',
|
||||
},{
|
||||
icon:'',
|
||||
value:'printBoard',
|
||||
name:'3',
|
||||
task:'1-3',
|
||||
},{
|
||||
icon:'',
|
||||
value:'colorBoard',
|
||||
name:'3',
|
||||
task:'1-4',
|
||||
},{
|
||||
icon:'',
|
||||
value:'sketchBoard',
|
||||
name:'3',
|
||||
task:'1-5',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color3',
|
||||
name:'3',
|
||||
task:'2-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color4',
|
||||
name:'3',
|
||||
task:'3-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color5',
|
||||
name:'3',
|
||||
task:'4-1',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color6',
|
||||
name:'3',
|
||||
task:'4-2',
|
||||
},{
|
||||
icon:'',
|
||||
value:'color7',
|
||||
name:'3',
|
||||
task:'5-1',
|
||||
},
|
||||
],
|
||||
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
|
||||
})
|
||||
parent:null as any,
|
||||
content:null as any
|
||||
})
|
||||
const setBack = ()=>{
|
||||
data.selectKey = ''
|
||||
updataPage()
|
||||
}
|
||||
const setSelectKey = (value:any)=>{
|
||||
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('.home .content')[0]
|
||||
let contentDom:any = document.querySelectorAll('.workflow .content')[0]
|
||||
clearTimeout(dataTime.selectTime)
|
||||
let {top,left,width,height} = dom.getBoundingClientRect()
|
||||
let parentPosition = dataDom.parent.getBoundingClientRect()
|
||||
@@ -158,39 +146,26 @@ export default defineComponent({
|
||||
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"},);
|
||||
})
|
||||
}
|
||||
}
|
||||
// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
|
||||
// let navDom:any = document.querySelectorAll('.home .navList')
|
||||
// let contentDom:any = document.querySelectorAll('.home .content')[0]
|
||||
// clearTimeout(dataTime.selectTime)
|
||||
// if(oldVal && newVal == ''){
|
||||
// dataTime.selectTime
|
||||
// let index = data.navListData.findIndex(item => item.value === oldVal);
|
||||
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||||
// contentDom.style.transformOrigin = `0px ${top}px`
|
||||
// gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||||
// dataTime.selectTime = setTimeout(() => {
|
||||
// data.selectKey_ = newVal
|
||||
// }, 500);
|
||||
// }else{
|
||||
// data.selectKey_ = newVal
|
||||
// nextTick(()=>{
|
||||
// let index = data.navListData.findIndex(item => item.value === newVal);
|
||||
// let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
|
||||
// contentDom.style.transformOrigin = `0px ${top}px`
|
||||
// gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
const goHome = ()=>{
|
||||
emit("goHome");
|
||||
}
|
||||
const unfold = ()=>{
|
||||
dataDom.content.unfold()
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setBack,
|
||||
setProject,
|
||||
setSelectKey,
|
||||
unfold,
|
||||
goHome,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -202,7 +177,7 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.home{
|
||||
.workflow{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -214,25 +189,40 @@ export default defineComponent({
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3rem;
|
||||
padding: 4rem;
|
||||
padding-top: 3rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
// background: #ff6666;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding-bottom: 1rem;
|
||||
> .title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .text{
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
> i{
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
131
src/component/HomePage/index/workflow/nav.vue
Normal file
131
src/component/HomePage/index/workflow/nav.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<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)">
|
||||
<i class="fi fi-rr-settings-sliders"></i>
|
||||
<span v-show="isUnfold">Settings</span>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
<div class="navList list" :class="{active:selectKey == item.value}" v-for="item in navListData" :key="item.value" @click="setNav(item.value, $event)">
|
||||
<i :class="item.icon"></i>
|
||||
<span v-show="isUnfold">{{ item.name }}</span>
|
||||
</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:''},
|
||||
navListData:{type:Array,default:()=>[]},
|
||||
},
|
||||
emits:['setSelectKey','unfold','goHome'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
isUnfold:false
|
||||
})
|
||||
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setNav = (str:any,event:any)=>{
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:event.target,
|
||||
posiiton:'nav',
|
||||
}
|
||||
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
const setUnfold = ()=>{
|
||||
data.isUnfold = !data.isUnfold
|
||||
emit("unfold");
|
||||
}
|
||||
const goHome = ()=>{
|
||||
store.commit('createProbject')
|
||||
emit("goHome");
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setNav,
|
||||
setUnfold,
|
||||
goHome,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeNav{
|
||||
padding: 5rem 0rem;
|
||||
background: #f7f8fa;
|
||||
transition: all .3s;
|
||||
width: 7rem;
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
width: 20rem;
|
||||
}
|
||||
> div{
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
margin: 0 1rem;
|
||||
&.active{
|
||||
background: #ebebeb;
|
||||
}
|
||||
&.unfold{
|
||||
&.active{
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
}
|
||||
> 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>
|
||||
228
src/component/HomePage/index/workflow/navBox.vue
Normal file
228
src/component/HomePage/index/workflow/navBox.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<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,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: 1.3rem;}
|
||||
}
|
||||
> .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;
|
||||
&.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: -2.5rem;left: -22rem;}
|
||||
&.item2-1{top: -2.5rem;left: 8rem;}
|
||||
&.item3-1{top: -2.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 10px;
|
||||
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>
|
||||
345
src/component/HomePage/index/workflow/workspace.vue
Normal file
345
src/component/HomePage/index/workflow/workspace.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="workspace">
|
||||
<div class="workspaceBox">
|
||||
<div class="title marginBottom">Porject setting </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.style">
|
||||
<div class="text">Age</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:'No style' }}</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" v-show="show.position">
|
||||
<generalMenu :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,onBeforeMount,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';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
habitSetStyle,generalMenu
|
||||
},
|
||||
props:{
|
||||
workflowType:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
httpWorkflowType:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
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,
|
||||
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)=>{
|
||||
console.log(value);
|
||||
|
||||
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.sylteId: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',
|
||||
// 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.malePresignedUrl,
|
||||
}
|
||||
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 = ()=>{
|
||||
|
||||
}
|
||||
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.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
||||
data.show.position = (props.workflowType == 'singleProductDesign')
|
||||
|
||||
if(!data.mannequinStyle && props.workflowType == 'seriesDesign'){
|
||||
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{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setStyle,
|
||||
setWorkspaceStyle,
|
||||
setprintModel,
|
||||
formatter,
|
||||
complete,
|
||||
openSetData,
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
@@ -167,9 +167,9 @@ export default defineComponent({
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
workspace:{
|
||||
type:Object,
|
||||
default:{}
|
||||
sex:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
},
|
||||
setup(props:any,{emit}) {
|
||||
@@ -360,7 +360,7 @@ export default defineComponent({
|
||||
let data = {
|
||||
"base64": rv,
|
||||
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type,
|
||||
"gender": props.workspace.sexEnum.value,
|
||||
"gender": props.sex,
|
||||
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
|
||||
"isOverride":isOverlay,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user