调整部分bug
This commit is contained in:
X1627315083
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="img_block_item" v-else>
|
||||
<div class="title" v-if="allBoardData?.moodboardFiles?.length>0">
|
||||
<div class="title">
|
||||
<div>Moodboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item" v-if="allBoardData?.printboardFiles?.length>0 || allBoardData?.generatePrintFiles?.length>0">
|
||||
<div class="img_block_item">
|
||||
<div class="title">
|
||||
<div>Printboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
|
||||
@@ -45,7 +45,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item" v-if="allBoardData?.colorBoards?.length>0">
|
||||
<div class="img_block_item">
|
||||
<div class="title">
|
||||
<div>Colorboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
|
||||
@@ -59,6 +59,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img_block_item mannquin">
|
||||
<div class="title">
|
||||
<div>Mannequin</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('mannequin')"></i>
|
||||
</div>
|
||||
<div class="mannquin_img_item" v-for="(model) in probjects?.model" :key="model">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="model?.url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="img_block_item img_block_item_sketch">
|
||||
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
|
||||
@@ -68,7 +79,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="img_block_item img_block_item_sketch">
|
||||
<div class="title" v-if="allBoardData?.sketch">
|
||||
<div class="title" style="width: 100%;">
|
||||
<div>Sketchboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
|
||||
</div>
|
||||
@@ -103,12 +114,15 @@ export default defineComponent({
|
||||
return store.state.UploadFilesModule.showSketchboard})
|
||||
let allBoardData:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.allBoardData})
|
||||
let probjects:any = computed(()=>{
|
||||
return store.state.Workspace.probjects})
|
||||
const openCollection = (str:any)=>{
|
||||
emit('openCollection',str)
|
||||
}
|
||||
return {
|
||||
store,
|
||||
allBoardData,
|
||||
probjects,
|
||||
sketch,
|
||||
sketchList,
|
||||
openCollection,
|
||||
@@ -269,6 +283,9 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mannquin{
|
||||
|
||||
}
|
||||
|
||||
.sketch_img_item{
|
||||
display: inline-block;
|
||||
@@ -282,6 +299,12 @@ export default defineComponent({
|
||||
height: 6.8rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.mannquin_img_item{
|
||||
width: 6.8rem;
|
||||
height: 15rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.color_item{
|
||||
display: inline-block;
|
||||
@@ -291,7 +314,7 @@ export default defineComponent({
|
||||
margin-right: 4%;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 21%;
|
||||
&:nth-child(4n){
|
||||
&:nth-child(5n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -346,7 +369,7 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
>div{
|
||||
> .lager_img_item{
|
||||
width: 30%;
|
||||
margin-left: 2rem;
|
||||
height: auto;
|
||||
|
||||
@@ -1,341 +0,0 @@
|
||||
<template>
|
||||
<div class="start">
|
||||
<div class="createProject" v-if="!selectObject?.type">
|
||||
<div v-if="state == 1" class="createProjectBtn">
|
||||
<div @click="createProject" class="gallery_btn gallery_btn_radius">New Project</div>
|
||||
<div @click="getHistoryProject" class="gallery_btn white gallery_btn_radius">Resume Project</div>
|
||||
</div>
|
||||
<div v-else-if="state == 2" class="selectProjectBtn">
|
||||
<div style="width: 100%; margin: 2rem; display:flex;align-items: center;">
|
||||
<i @click="()=>state = 1" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>Please choose your workflow</div>
|
||||
<div class="porjectBox">
|
||||
<div class="selectProjectBtn_title" v-for="item in opjectList" :key="item.value" @click="selectProject(item)">{{item.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType" :workflowTitle="opjectList.filter((item)=>item.value == selectObject.type)[0].title"></workflow>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<affiche ref="affiche"></affiche>
|
||||
<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
|
||||
You can use these features only after becoming a regular user~
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,onMounted,nextTick,onBeforeUnmount,toRefs, reactive,watch} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { useStore } from "vuex";
|
||||
import {useRoute} from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import workflow from './workflow/index.vue'
|
||||
// import workspace from './model/workspace.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import router from '@/router';
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import {projectList} from '@/tool/listData'
|
||||
import affiche from "@/component/HomePage/affiche.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workflow,affiche
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const route = useRoute()
|
||||
const {t} = useI18n()
|
||||
const data = reactive({
|
||||
state:1,//状态 1:创建项目 2:选择项目
|
||||
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
|
||||
userDetail:computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
}),
|
||||
opjectList:[
|
||||
{
|
||||
title:'Series Design',
|
||||
value:'seriesDesign',
|
||||
httpValue:'SERIES_DESIGN',
|
||||
},{
|
||||
title:'Single Product Design',
|
||||
value:'singleProductDesign',
|
||||
httpValue:'SINGLE_DESIGN',
|
||||
},{
|
||||
title:'Sketch Design',
|
||||
value:'sketchDesign',
|
||||
httpValue:'SKETCH_COLLAGE_PROCESS',
|
||||
},{
|
||||
title:'Print Design',
|
||||
value:'printDesign',
|
||||
httpValue:'PRINT_DESIGN',
|
||||
},{
|
||||
title:'Product Design',
|
||||
value:'productDrawingDesign',
|
||||
httpValue:'FINISHED_PRODUCT',
|
||||
},{
|
||||
title:'3D Pattern Making',
|
||||
value:'printingDesign3D',
|
||||
httpValue:'THREE_D_PLATE_MAKING',
|
||||
},
|
||||
],//项目列表
|
||||
isShowMark:false,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
affiche:null as any,
|
||||
workflow:null as any
|
||||
})
|
||||
const createProject =()=>{
|
||||
data.state = 2
|
||||
createData()
|
||||
}
|
||||
const createData = ()=>{
|
||||
store.commit("clearAllData");
|
||||
store.commit("clearAllCollection");
|
||||
store.commit("setAllBoardDataChoose",{});
|
||||
store.commit("clearShowSketchboard",{});
|
||||
store.commit("clearAllCollection");
|
||||
}
|
||||
const selectProject =(item:any)=>{
|
||||
let data = {
|
||||
type:item.value,
|
||||
httpType:item.httpValue,//项目类型
|
||||
}
|
||||
store.commit('setProbject',data)
|
||||
let list:any = projectList
|
||||
store.commit('setProjectList',list[item.value])
|
||||
}
|
||||
const getHistoryProject = ()=>{
|
||||
router.push('/home/history')
|
||||
}
|
||||
const getHistory = ()=>{
|
||||
let value = {
|
||||
id:Number(route.params.id),
|
||||
}
|
||||
if(!route.params.id)return
|
||||
createData()
|
||||
Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
|
||||
setProjectData(rv)
|
||||
})
|
||||
}
|
||||
// watch(()=>data.opjectList.type,(newVal,oldVal)=>{
|
||||
// console.log(newVal,oldVal);
|
||||
|
||||
|
||||
// })
|
||||
const getWorks = ()=>{
|
||||
let data:any = {
|
||||
"accountId": 0,
|
||||
"collectionId": 0,
|
||||
"coverId": 0,
|
||||
"createDate": "",
|
||||
id:Number(route.params.id),
|
||||
"isDeleted": 0,
|
||||
"portfolioDes": "",
|
||||
"portfolioName": "",
|
||||
"portfolioType": "",
|
||||
"status": 0,
|
||||
"updateDate": "",
|
||||
"userLikeGroupId":''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
|
||||
(rv: any) => {
|
||||
setProjectData(rv)
|
||||
// this.setPortfolio(rv.portfolioDTO)
|
||||
// this.store.commit("setUserGroupId", rv.userGroupId);
|
||||
// this.dealHistoryChooseData(rv, type);
|
||||
}
|
||||
).catch((res)=>{
|
||||
});
|
||||
}
|
||||
const setProjectData = (rv:any)=>{
|
||||
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
|
||||
//取出数组对象某个值
|
||||
let storeData = {
|
||||
name:rv.name,
|
||||
id:rv.id,
|
||||
type:type?.value,
|
||||
httpType:rv.process,//项目类型
|
||||
ageGroup:rv.workspaceVO.ageGroup,
|
||||
style:rv.workspaceVO.style,
|
||||
styleId:rv.workspaceVO.styleId,
|
||||
styleName:rv.workspaceVO.styleName,
|
||||
sex:rv.workspaceVO.sex,
|
||||
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
||||
position:{
|
||||
label:rv.workspaceVO.positionEnum.value,
|
||||
value:rv.workspaceVO.positionEnum.name
|
||||
},
|
||||
positionList:[],
|
||||
publishData:{
|
||||
id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
|
||||
portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',
|
||||
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
||||
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
||||
},
|
||||
model:{}
|
||||
}
|
||||
let model:any = {}
|
||||
let position = []
|
||||
if(data.selectObject.sex == "Female"){
|
||||
// if(rv.workspaceVO.sex == "Female"){
|
||||
model = {
|
||||
id:rv.workspaceVO.mannequinFemaleId,
|
||||
type:rv.workspaceVO.mannequinFemaleType,
|
||||
url:rv.workspaceVO.femalePresignedUrl,
|
||||
}
|
||||
position = store.state.UserHabit.FemalePosition
|
||||
}else{
|
||||
model = {
|
||||
id:rv.workspaceVO.mannequinMaleId,
|
||||
type:rv.workspaceVO.mannequinMaleType,
|
||||
url:rv.workspaceVO.malePresignedUrl,
|
||||
}
|
||||
position = store.state.UserHabit.MalePosition
|
||||
}
|
||||
storeData.model = model
|
||||
data.selectObject.positionList = position
|
||||
storeData.positionList = position
|
||||
store.commit('setProbject',storeData)
|
||||
let list:any = projectList
|
||||
store.commit('setProjectList',list[type.value])
|
||||
nextTick(()=>{
|
||||
dataDom.workflow.isUpdataPorject = true
|
||||
})
|
||||
}
|
||||
onMounted(async ()=>{
|
||||
let test:any = getCookie('isTest')
|
||||
let isTest =JSON.parse(test)
|
||||
//判断账号剩余时间是否太短
|
||||
let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
|
||||
// if(!data.userDetail.isBeginner || data.userDetail.systemUser == 0)return
|
||||
if(!isModalOne){//判断是否是试用用户
|
||||
// if(!isTest && !isModalOne){//判断是否是试用用户
|
||||
await new Promise(async (resolve) => {
|
||||
if(isTest){
|
||||
// openGuide()
|
||||
resolve('')
|
||||
}else{
|
||||
await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
|
||||
if (rv) {
|
||||
let dateNow = Date.now()
|
||||
let date:any = new Date(dateNow)
|
||||
let rvDate:any = new Date(rv);
|
||||
let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
|
||||
let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
|
||||
let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
|
||||
let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
|
||||
if(days < 5){
|
||||
setTimeout(() => {
|
||||
let text = {
|
||||
str:`${t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${t('HomeView.jsContent8')}</a>`,
|
||||
title:`${t('HomeView.jsContent7')}`,
|
||||
}
|
||||
dataDom.affiche.init(text)
|
||||
}, 500);
|
||||
}else{
|
||||
// openGuide()
|
||||
}
|
||||
resolve('')
|
||||
}else{
|
||||
// openGuide()
|
||||
resolve('')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}else if(!isModalOne && isTest){
|
||||
}else{
|
||||
// openGuide()
|
||||
}
|
||||
if(route.params.type == 'Works'){
|
||||
getWorks()
|
||||
}else{
|
||||
getHistory()
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
// data.selectObject = null
|
||||
// store.commit('createProbject')
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
createProject,
|
||||
selectProject,
|
||||
getHistoryProject,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.start{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.userSystem{
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index:2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
}
|
||||
> .createProject{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .createProjectBtn,> .selectProjectBtn{
|
||||
display: flex;
|
||||
}
|
||||
> .createProjectBtn{
|
||||
> div{
|
||||
margin: 1rem;
|
||||
width: 19rem;
|
||||
}
|
||||
}
|
||||
> .selectProjectBtn{
|
||||
flex-direction: column;
|
||||
> .porjectBox{
|
||||
display: flex;
|
||||
> .selectProjectBtn_title{
|
||||
padding: 2rem;
|
||||
width: 21rem;
|
||||
height: 26rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #000;
|
||||
text-align: center;
|
||||
background: #f6f6f6;
|
||||
color: #000;
|
||||
transition: all .3s;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin: 0 2rem;
|
||||
&:hover{
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,437 +0,0 @@
|
||||
<template>
|
||||
<div class="createCloud" ref="createCloud"></div>
|
||||
<a-modal
|
||||
class="createCloud_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.createCloud"
|
||||
width="50%"
|
||||
:height="'77rem'"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div>Create Cloud Generation Tasks</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Task type <span>*</span></span>
|
||||
<a-select
|
||||
v-model:value="buildType"
|
||||
allowClear
|
||||
style="width: 200px"
|
||||
placeholder="Please select"
|
||||
:options="cloudList"
|
||||
@change="changeBuildType"
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="admin_state_item" v-show="buildType">
|
||||
<span>Quantity <span>*</span></span>
|
||||
<input
|
||||
v-model="numberOfImages"
|
||||
placeholder="Please enter number"
|
||||
type="text"
|
||||
style="width: 200px"
|
||||
@input="changeNumberOfImages"
|
||||
/>
|
||||
</div>
|
||||
<!-- toProductimg -->
|
||||
<div v-show="buildType == 'toProductImage'" class="admin_state_item ">
|
||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||
<div class="sliderAndImput" style="width: 200px">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="similarity"
|
||||
:tooltipVisible="false"
|
||||
:step="5"
|
||||
|
||||
>
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="similarity">
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="buildType == 'relight'" class="admin_state_item ">
|
||||
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
||||
<a-select style="width: 200px" v-model:value="relightDirection" :options="relightDirectionList"></a-select>
|
||||
</div>
|
||||
<div v-show="buildType == 'relight'" class="admin_state_item ">
|
||||
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||
<div class="sliderAndImput" style="width: 200px">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="brightenValue"
|
||||
:tooltipVisible="false"
|
||||
|
||||
:max="3"
|
||||
:min="1"
|
||||
:step="0.1"
|
||||
>
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="brightenValue">
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="buildType == 'toProductImage' || buildType == 'relight'" class="admin_state_item">
|
||||
<span>Keyword</span>
|
||||
<input
|
||||
v-model="generateText"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
type="text"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="selectImgList generalScroll" v-mousewheel v-show="exhibitionImgList.length>0">
|
||||
<div v-for="item in exhibitionImgList" class="item">
|
||||
<img :src="item.designOutfitUrl||item.url" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="admin_state_item" style="width: 100%;">
|
||||
<span style="margin: 0;">Generation time：19min</span>
|
||||
</div> -->
|
||||
<div v-show="buildType" class="admin_state_item" style="width: 100%;">
|
||||
<span style="margin: 0;">Cost credit：{{credits * numberOfImages}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_btn admin_page">
|
||||
<!-- <div class="admin_search_item" @click="cancelDsign">
|
||||
Close
|
||||
</div> -->
|
||||
<div class="admin_search_item" @click="setOk">
|
||||
OK
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, computed, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import { formatTime,isEmail } from "@/tool/util";
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {getMinioUrl} from '@/tool/util'
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
},
|
||||
props:{
|
||||
cloudList:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
},
|
||||
emits: ['getContentList'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let operations = reactive({
|
||||
operationsModal:false,
|
||||
loadingShow:false,
|
||||
})
|
||||
let operationsData = reactive({
|
||||
buildType:'',
|
||||
numberOfImages:'',
|
||||
credits:0,
|
||||
exhibitionImgList:[],//选择的图片
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
//toProduct
|
||||
generateText:'',//输入的内容
|
||||
similarity:30,
|
||||
brightenValue:1,//亮度
|
||||
relightDirection:'Right Light',//打光方向
|
||||
relightDirectionList:[
|
||||
{
|
||||
value:'Right Light',
|
||||
label:useI18n().t('ProductImg.RightLight')
|
||||
},{
|
||||
value:'Left Light',
|
||||
label:useI18n().t('ProductImg.LeftLight')
|
||||
},{
|
||||
value:'Top Light',
|
||||
label:useI18n().t('ProductImg.TopLight')
|
||||
},{
|
||||
value:'Bottom Light',
|
||||
label:useI18n().t('ProductImg.BottomLight')
|
||||
}
|
||||
]
|
||||
})
|
||||
let init = ()=>{
|
||||
operations.operationsModal = true
|
||||
|
||||
}
|
||||
const changeBuildType = ()=>{
|
||||
if(operationsData.buildType == 'design'){
|
||||
operationsData.exhibitionImgList = []
|
||||
}else if(operationsData.buildType == 'toProductImage'){
|
||||
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.design.likeData
|
||||
}else if(operationsData.buildType == 'relight'){
|
||||
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
|
||||
}else if(operationsData.buildType == 'poseTransfer'){
|
||||
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
|
||||
}
|
||||
props.cloudList.forEach((item)=>{
|
||||
if(item.value == operationsData.buildType){
|
||||
operationsData.credits = item.consumption
|
||||
}
|
||||
})
|
||||
}
|
||||
let getPorductImg = ()=>{
|
||||
let modularData = store.state.UploadFilesModule.modularData
|
||||
let list = []
|
||||
if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
|
||||
let productOrRelight = []
|
||||
if(operationsData.buildType == 'toProductImage')productOrRelight = modularData.design.likeData
|
||||
if(operationsData.buildType == 'relight')productOrRelight = modularData.toProduct
|
||||
|
||||
productOrRelight.forEach((item)=>{
|
||||
if(!item.id)return
|
||||
let obj = {
|
||||
"createTime": "",
|
||||
"elementId": 0,
|
||||
"elementType": "",
|
||||
"id": 0,
|
||||
"isLike": 0,
|
||||
"taskId": "",
|
||||
"toProductImageRecordId": 0,
|
||||
"url": "",
|
||||
}
|
||||
obj.elementId = item.designOutfitId
|
||||
obj.elementType = 'DesignOutfit'
|
||||
if(operationsData.buildType == 'relight'){
|
||||
obj.elementId = item.id
|
||||
obj.elementType = 'ToProductImage'
|
||||
}
|
||||
list.push(obj)
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
const getImageStrength = () => {
|
||||
let imageStrength = operationsData.similarity == 100? 95 :operationsData.similarity
|
||||
return imageStrength;
|
||||
};
|
||||
const getPoseTransformData = ()=>{
|
||||
let list = []
|
||||
let toProduct = store.state.UploadFilesModule.modularData.toProduct
|
||||
toProduct.forEach((item)=>{
|
||||
let obj = {
|
||||
poseId:1,
|
||||
productImage:getMinioUrl(item.url)
|
||||
}
|
||||
list.push(obj)
|
||||
})
|
||||
return list
|
||||
}
|
||||
let setAddData = ()=>{
|
||||
return {
|
||||
"buildType": operationsData.buildType,
|
||||
nums: operationsData.numberOfImages,
|
||||
projectId: operationsData.selectObject.id,
|
||||
//productimg
|
||||
toProductImage:{
|
||||
prompt:operationsData.generateText,//输入的内容
|
||||
toProductImageVOList:getPorductImg(),//选择的图片
|
||||
projectId: operationsData.selectObject.id,
|
||||
direction:operationsData.relightDirection,//打光方向
|
||||
brightenValue:operationsData.brightenValue,
|
||||
imageStrength:(100 - getImageStrength())/100,
|
||||
},
|
||||
//poseTransform
|
||||
poseTransform:getPoseTransformData(),
|
||||
private: operationsData.selectObject.id,
|
||||
ToProductImageDTO: operationsData.selectObject.id,
|
||||
}
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
operationsData.buildType=''
|
||||
operationsData.numberOfImages=''
|
||||
operations.operationsModal = false
|
||||
}
|
||||
let setOk = ()=>{
|
||||
let data
|
||||
data = setAddData()
|
||||
if(operationsData.buildType == 'toProductImage'){
|
||||
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
|
||||
}else if(operationsData.buildType == 'relight'){
|
||||
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
|
||||
}else if(operationsData.buildType == 'poseTransfer'){
|
||||
if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
|
||||
}
|
||||
if(!data.buildType || !data.nums)return message.warning('Please check the input box marked with *')
|
||||
operations.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designCloud, data).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
operations.loadingShow = false
|
||||
cancelDsign()
|
||||
emit('getContentList')
|
||||
}
|
||||
}).catch((error) => {
|
||||
operations.loadingShow = false
|
||||
})
|
||||
}
|
||||
const changeNumberOfImages = ()=>{
|
||||
if(operationsData.buildType =='relight' || operationsData.buildType == 'poseTransfer'){
|
||||
if(operationsData.exhibitionImgList.length < Number(operationsData.numberOfImages)){
|
||||
operationsData.numberOfImages = operationsData.exhibitionImgList.length
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
changeBuildType,
|
||||
changeNumberOfImages,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('mouseenter', (e)=> {
|
||||
if(el.scrollWidth > el.clientWidth){
|
||||
el.parentElement.style.overflowY = 'hidden';
|
||||
}
|
||||
});
|
||||
|
||||
// 鼠标移出事件
|
||||
el.addEventListener('mouseleave', ()=> {
|
||||
el.parentElement.style.overflowY = 'auto';
|
||||
});
|
||||
el.addEventListener('wheel',(e)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},{ passive: true })
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-modal-mask){
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
:deep(.createCloud_modal){
|
||||
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.createCloud_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.allUserPoeration_btn{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 0;
|
||||
.admin_search_item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.allUserPoeration_center{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
padding: 0 2rem;
|
||||
> .selectImgList{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
height: 20rem;
|
||||
margin: 2rem 0;
|
||||
> .item{
|
||||
height: 100%;
|
||||
margin-right: 1rem;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
> img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
//
|
||||
}
|
||||
> .admin_state_item{
|
||||
width: auto;
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> span{
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
:deep(> .ant-select > .ant-select-selector){
|
||||
border-radius: 1.6rem;
|
||||
}
|
||||
> input{
|
||||
border-radius: 1.6rem;
|
||||
}
|
||||
>.sliderAndImput{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
:deep(> .ant-slider){
|
||||
// border-radius: 1.6rem;
|
||||
flex: 1;
|
||||
}
|
||||
> input{
|
||||
border-radius: 1.6rem;
|
||||
width: 4rem;
|
||||
margin-left: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<div class="uploading">
|
||||
<div class="title">
|
||||
<div class="list">
|
||||
<div
|
||||
class="titleItem active"
|
||||
>
|
||||
<span class="detailText">All</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="createCloud">
|
||||
<div class="gallery_btn" @click="createClound">Create</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentList">
|
||||
<div class="title">
|
||||
<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<tr v-for="(row, index) in contentList" :key="index">
|
||||
<td v-for="header in cloudTiltleList" :key="header.value">
|
||||
<span v-show="header.value != 'operation'">
|
||||
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
|
||||
</span>
|
||||
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
|
||||
Review
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
<a-pagination style="text-align: center;" v-model:current="currentPage" :total="total" show-less-items />
|
||||
</div>
|
||||
<createCloud ref="createCloud" :cloudList="generateList[workflowType]" @getContentList="submitGetContentList"></createCloud>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import createCloud from "./createCloud.vue";
|
||||
import { da } from 'element-plus/es/locale';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
createCloud,
|
||||
},
|
||||
props:{
|
||||
workflowType:{
|
||||
type:String,
|
||||
default:'' as any,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
emits:['retrieve'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
pageType:'list',
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
total:0,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
generateList:{
|
||||
seriesDesign:[
|
||||
{
|
||||
label:'Design',
|
||||
value:'design',
|
||||
consumption:0,
|
||||
},{
|
||||
label:'To Product Image',
|
||||
value:'toProductImage',
|
||||
consumption:5,
|
||||
},{
|
||||
label:'Relight',
|
||||
value:'relight',
|
||||
consumption:5,
|
||||
},{
|
||||
label:'Transfer Pose',
|
||||
value:'poseTransfer',
|
||||
consumption:10,
|
||||
},
|
||||
],
|
||||
singleProductDesign:[
|
||||
{
|
||||
label:'Design',
|
||||
value:'design',
|
||||
consumption:0,
|
||||
},{
|
||||
label:'To Product Image',
|
||||
value:'toProductImage',
|
||||
consumption:5,
|
||||
},
|
||||
],
|
||||
// printDesign:[
|
||||
// {
|
||||
// label:'1',
|
||||
// value:100,
|
||||
// }
|
||||
// ],
|
||||
productDrawingDesign:[
|
||||
{
|
||||
label:'To Product Image',
|
||||
value:'toProductImage',
|
||||
consumption:5,
|
||||
},{
|
||||
label:'Relight',
|
||||
value:'relight',
|
||||
consumption:5,
|
||||
},{
|
||||
label:'Transfer Pose',
|
||||
value:'poseTransfer',
|
||||
consumption:10,
|
||||
},
|
||||
],
|
||||
// printingDesign3D:[
|
||||
// {
|
||||
// label:'1',
|
||||
// value:100,
|
||||
// }
|
||||
// ],
|
||||
// sketchDesign:[]
|
||||
},
|
||||
cloudTiltleList:[
|
||||
{
|
||||
name:'Task type',
|
||||
value:'buildType',
|
||||
fun:(value:any)=>{
|
||||
let str = ''
|
||||
if(value == 'design')str = 'Design'
|
||||
if(value == 'toProductImage')str = 'To Product Image'
|
||||
if(value == 'relight')str = 'Relight'
|
||||
if(value == 'poseTransfer')str = 'Transfer Pose'
|
||||
return str
|
||||
}
|
||||
},{
|
||||
name:'Quantity generated',
|
||||
value:'nums',
|
||||
},{
|
||||
name:'Creation time',
|
||||
value:'updateTime',
|
||||
fun:(value:any)=>{
|
||||
if(!value)return
|
||||
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
|
||||
}
|
||||
},{
|
||||
name:'Start time',
|
||||
value:'updateTime',
|
||||
fun:(value:any)=>{
|
||||
//没开始内容为 -
|
||||
if(!value)return
|
||||
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
|
||||
}
|
||||
},{
|
||||
name:'End time',
|
||||
value:'updateTime',
|
||||
fun:(value:any)=>{
|
||||
if(!value)return
|
||||
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
|
||||
}
|
||||
},{
|
||||
name:'Status',
|
||||
value:'process',
|
||||
fun:(value:any)=>{
|
||||
if(value == '100.00%'){
|
||||
return 'Completed'
|
||||
}else{
|
||||
return value
|
||||
}
|
||||
}
|
||||
},{
|
||||
name:'Operation',
|
||||
value:'operation',
|
||||
},
|
||||
] as any,
|
||||
contentList:[
|
||||
] as any,
|
||||
isGetContentList:false as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
createCloud,
|
||||
})
|
||||
const createClound = ()=>{
|
||||
data.isGetContentList = false
|
||||
dataDom.createCloud.init()
|
||||
}
|
||||
const detailIamge = (item:any)=>{
|
||||
//去除里面的T2025-04-17T13:45:43
|
||||
if(item.process == '100.00%' || item.status == 1){
|
||||
let value = {
|
||||
taskId:item.taskId,
|
||||
page:1,
|
||||
size:10,
|
||||
buildType:item.buildType,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
|
||||
console.log(rv)
|
||||
if(rv.design && rv.design.length > 0){
|
||||
store.commit('addDesignCollectionList',rv.design)
|
||||
emit('retrieve','design')
|
||||
}else if(rv.toProductImage && rv.toProductImage.length > 0){
|
||||
store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
|
||||
emit('retrieve','toProduct')
|
||||
}else if(rv.relight && rv.relight.length > 0){
|
||||
store.commit('setCloudList',{str:'relight',list:rv.relight})
|
||||
emit('retrieve','relight')
|
||||
}else if(rv.poseTransfer && rv.poseTransfer.length > 0){
|
||||
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
|
||||
emit('retrieve','poseTransfer')
|
||||
}
|
||||
data.isGetContentList = false
|
||||
})
|
||||
}
|
||||
}
|
||||
const getContentList = ()=>{
|
||||
if(data.isGetContentList){
|
||||
let value = {
|
||||
page:data.currentPage,
|
||||
size:data.pageSize,
|
||||
projectId: data.selectObject.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
|
||||
data.contentList = rv.content
|
||||
data.total = rv.total
|
||||
let arr = rv.content
|
||||
let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
|
||||
if(!result)data.isGetContentList = false
|
||||
setTimeout(()=>{
|
||||
getContentList()
|
||||
},1500)
|
||||
})
|
||||
}
|
||||
}
|
||||
const submitGetContentList = ()=>{
|
||||
data.isGetContentList = true
|
||||
getContentList()
|
||||
}
|
||||
onBeforeUnmount(()=>{
|
||||
data.isGetContentList = false
|
||||
})
|
||||
onMounted(()=>{
|
||||
data.isGetContentList = true
|
||||
getContentList()
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
createClound,
|
||||
detailIamge,
|
||||
getContentList,
|
||||
submitGetContentList,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.uploading{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding-top: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
> .list{
|
||||
display: flex;
|
||||
margin-bottom: 2.5rem;
|
||||
> .titleItem:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
> .titleItem{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 6.5rem;
|
||||
}
|
||||
> .titleItem::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.4rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -.5rem;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
> .active {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .active::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> .createCloud{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
> .contentList{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .content tr , > .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
> .title{
|
||||
background: #F7F7F7;
|
||||
> .titleItem{
|
||||
line-height: 4.6rem;
|
||||
font-size: 2rem;
|
||||
color: #666666;
|
||||
width: calc(100% / 4);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> tr{
|
||||
> td{
|
||||
text-align: center;
|
||||
width: calc(100% / 4);
|
||||
line-height: 4.6rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,742 +0,0 @@
|
||||
<template>
|
||||
<div class="collection_modal_item">
|
||||
<div class="modal_left" >
|
||||
<div class="switch_type_list" >
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
{{ $t('MoodboardUpload.Delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="moodboarList.length < 8"
|
||||
>
|
||||
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
:before-upload="beforeUpload"
|
||||
v-model:file-list="fileList"
|
||||
:maxCount="8 - moodboarList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show=" moodboarList.length < 8"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
|
||||
</div>
|
||||
<!-- <div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span
|
||||
>Maximum 10 images can be uploaded, Maximum 2M per
|
||||
image</span
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Moodboard"
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Moodboard"
|
||||
></Generate>
|
||||
</div>
|
||||
<div class="modal_right" v-show="moodboarList.length >= 1 || edieShow">
|
||||
<div class="modal_layout" >
|
||||
<div class="modal_text">
|
||||
<div>
|
||||
{{ $t('MoodboardUpload.Thumbnail') }}
|
||||
</div>
|
||||
<div v-show="moodboarList.length > 1" class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
|
||||
</div>
|
||||
<div class="modal_img" >
|
||||
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_accomplish" v-show="modalImg[0]?.id || loadingShow">
|
||||
<div class="modal_text">
|
||||
<div>{{ $t('MoodboardUpload.selected') }}</div>
|
||||
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
|
||||
</div>
|
||||
<div class="modal_img_max">
|
||||
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
|
||||
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl" v-modelImg>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="modal_img">
|
||||
<img :src="modalImg[0].imgUrl">
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl,isMoible } from "@/tool/util";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
|
||||
import layout from "@/component/HomePage/layout.vue";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: { Material, MoodTemplate, Generate,layout },
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let lessenList: any = ref([]);
|
||||
let fileList: any = ref([]);
|
||||
let showFileList: any = ref([]);
|
||||
let templateModal: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let moodb_className:any = ref([]);
|
||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||||
let layoutList:any = []//选中后随机生成的list
|
||||
let layoutOpen = ref(false)
|
||||
let loadingShow = ref(false)
|
||||
let modalImg:any= computed(()=>{
|
||||
return store.state.UploadFilesModule.disposeMoodboard
|
||||
})
|
||||
let uploading:any = ref([])
|
||||
let edieShow:any = ref()
|
||||
let {t} = useI18n()
|
||||
|
||||
return {
|
||||
fileList,
|
||||
showFileList,
|
||||
lessenList,
|
||||
templateModal,
|
||||
templateFileList,
|
||||
openClick,
|
||||
moodb_className,
|
||||
flex_direction,
|
||||
layoutList,
|
||||
layoutOpen,
|
||||
loadingShow,
|
||||
modalImg,
|
||||
uploading,
|
||||
edieShow,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload: {
|
||||
isPin: 0,
|
||||
gender:'',
|
||||
level1Type: "Moodboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
moodb_:moodb.moodb_,
|
||||
moodboarList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.moodboard
|
||||
}),
|
||||
};
|
||||
},
|
||||
// watcheffect(){
|
||||
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
|
||||
// (v: any) => v.checked == true
|
||||
// );
|
||||
// this.store.commit("setMoodboardFile", breviaryList);
|
||||
// console.log(22);
|
||||
// },
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
directives:{
|
||||
modelImg:{
|
||||
mounted(el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
},
|
||||
updated (el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
el.style.width = 100+'%'
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if(num ==2 ){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Moodboard')
|
||||
}else if (num == 3){
|
||||
}
|
||||
},
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Moodboard'
|
||||
};
|
||||
file.id_ = GO.id++
|
||||
file.id = res.data.id
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
if(arr.length >= 8){
|
||||
message.info(this.t('MoodboardUpload.jsContent1'))
|
||||
}else{
|
||||
this.store.commit("setMoodboardFile", fileList);
|
||||
}
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
// this.showFileList = this.fileList
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
if(!bor){
|
||||
let res:any = JSON.parse(file.xhr.response);
|
||||
let index = -1;
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
},
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.info(this.t('MoodboardUpload.jsContent3'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(this.t('MoodboardUpload.jsContent4'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(item: any) {
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
||||
item.state = 'delete'
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
}
|
||||
if(this.store.state.UploadFilesModule.moodboard.length == 0){
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
this.layoutList = []
|
||||
this.edieShow = false
|
||||
}
|
||||
},
|
||||
openSetData() {
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardFiles
|
||||
)
|
||||
) || [];
|
||||
let disposeMoodboard = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.disposeMoodboard
|
||||
)
|
||||
);
|
||||
let moodboardPosition = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardPosition
|
||||
)
|
||||
);
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
moodboard:[] as any,
|
||||
}
|
||||
arr.forEach((v:any)=>{
|
||||
if(v.type_.type1 == 'generate'){
|
||||
setboard.generate.push(v)
|
||||
}else if(v.type_.type1 == 'material'){
|
||||
setboard.material.push(v)
|
||||
}else{
|
||||
setboard.moodboard.push(v)
|
||||
}
|
||||
})
|
||||
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||||
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
||||
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
|
||||
this.fileList = setboard.moodboard
|
||||
},
|
||||
|
||||
async changeTemplateModal() {
|
||||
if(this.modalImg[0]?.id){
|
||||
let layout:any = this.$refs.layout
|
||||
if(this.layoutList.length <= 0){
|
||||
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
||||
if(!styleObj.domStyle)await this.layout()
|
||||
//
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||
this.layoutList = arr
|
||||
}
|
||||
if(window.screen.width<1300){
|
||||
layout.isMobile = true
|
||||
}else{
|
||||
layout.isMobile = false
|
||||
}
|
||||
|
||||
layout.init()
|
||||
}else{
|
||||
message.info(this.t('MoodboardUpload.jsContent5'))
|
||||
}
|
||||
|
||||
},
|
||||
async layout(){
|
||||
if(this.loadingShow)return
|
||||
await new Promise((resolve, reject) => {
|
||||
this.loadingShow = true
|
||||
this.store.commit("setDisposeMoodboard", []);
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||
this.layoutList = arr
|
||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||
let moodb = this.moodb_[arr.length-1][random]
|
||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||
this.flex_direction = true
|
||||
}else{
|
||||
this.flex_direction = false
|
||||
}
|
||||
if(this.moodb_[arr.length-1].length != 1){
|
||||
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
|
||||
this.loadingShow = false
|
||||
this.layout()
|
||||
return resolve('')
|
||||
}
|
||||
}
|
||||
this.edieShow = true
|
||||
if(this.moodb_[arr.length-1].length == 2){
|
||||
this.moodb_className = this.moodb_[arr.length-1][0]
|
||||
}else{
|
||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||
}
|
||||
this.layoutOpen = true
|
||||
//提交模板
|
||||
// this.loadingShow = true
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
nextTick().then(()=>{
|
||||
let layoutCentent = document.getElementById('modal_img')
|
||||
let obj = {
|
||||
imgStyle:[],
|
||||
domStyle:[],
|
||||
borStyle:[],
|
||||
rototeStyle:[],
|
||||
translateStyle:[],
|
||||
angleTRStyle:[],
|
||||
angleTLStyle:[],
|
||||
angleBRStyle:[],
|
||||
angleBLStyle:[],
|
||||
class:this.moodb_className,
|
||||
}
|
||||
this.store.commit("setDisposeMoodboardPosition", obj);
|
||||
domTurnImg(layoutCentent).then((rv)=>{
|
||||
let file = rv
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('level1Type','Moodboard')
|
||||
param.append('gender','')
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',file);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
||||
.then((rv: any) => {
|
||||
let img:any = rv
|
||||
img.imgUrl = rv.url
|
||||
img.resData = JSON.parse(JSON.stringify(img))
|
||||
this.store.commit("setDisposeMoodboard", img);
|
||||
this.loadingShow = false
|
||||
resolve('')
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
setmoodbClass(val:any){
|
||||
this.moodb_className = val
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal_item {
|
||||
// padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.modal_left,.modal_right{
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
.modal_left {
|
||||
width: 71rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2rem;
|
||||
// width: 50rem*1.2);
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
border-radius: calc(0.8rem*1.2);
|
||||
line-height: calc(4rem*1.2);
|
||||
font-size: var(--aida-fsize1-8);
|
||||
// margin-right: 2.2rem*1.2);
|
||||
margin-right: calc(8rem*1.2);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(.6rem*1.2);
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon {
|
||||
font-size: calc(1.8rem*1.2);
|
||||
margin-right: calc(0.8rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moodboard_body {
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
flex: 1;
|
||||
height: calc(30rem*1.2);
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.moodboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.upload_max_tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(1.4rem*1.2);
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi {
|
||||
font-size: calc(1.6rem*1.2);
|
||||
margin-right: calc(0.7rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: calc(57rem*1.2);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size:var(--aida-fsize1-4);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
.modal_img{
|
||||
width: calc(40rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
text-align: center;
|
||||
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem*1.2);
|
||||
height: calc(30rem*1.2);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
.modal_text{
|
||||
padding-top: calc(2rem*1.2);
|
||||
padding-block: calc(2rem*1.2);
|
||||
}
|
||||
.modal_img_max{
|
||||
// width: calc(57rem*1.2);
|
||||
// height: calc(35rem*1.2);
|
||||
width: 100%;
|
||||
aspect-ratio: 1.62 / 1;
|
||||
position: relative;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
>img{
|
||||
// height: 100%;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
.wh1{
|
||||
width: 23%;
|
||||
height: 48%;
|
||||
}
|
||||
.wh4{
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
}
|
||||
.wh8{
|
||||
width: 100%;
|
||||
height: 48.5%;
|
||||
}
|
||||
.w1h2{
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
}
|
||||
.w2h1{
|
||||
width: 48.5%;
|
||||
height: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,962 +0,0 @@
|
||||
<template>
|
||||
<div class="sketchboard_upload_modal">
|
||||
<div class="modal_left">
|
||||
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item Guide_1_9"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
|
||||
</div>
|
||||
<ul v-show="openMenu">
|
||||
<li
|
||||
v-for="item,index in sketchStyleList"
|
||||
class="printModel_item"
|
||||
@click.stop="setSceneList(item)"
|
||||
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
|
||||
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
|
||||
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
|
||||
>{{ item.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
|
||||
<div
|
||||
class="delete_like_file_block"
|
||||
@click.stop="deleteFile(file)"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="pin_block"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<a-checkbox v-model:checked="file.pin"
|
||||
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="sketchboardList.length < 20"
|
||||
>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
:capture="null"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
gender:workspace.sex,
|
||||
}"
|
||||
:multiple="!driver__.driver"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="fileList"
|
||||
:maxCount="20 - sketchboardList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show="sketchboardList.length < 20"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Sketchboard"
|
||||
@confirmSelect="confirmSelect"
|
||||
:disignTypeList="sketchCatecoryList"
|
||||
@setLibrary = setSetchboardGenerate
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Sketchboard"
|
||||
:scene="scene"
|
||||
:gender="workspace.sex"
|
||||
:sketchCatecoryList="sketchCatecoryList"
|
||||
></Generate>
|
||||
</div>
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<!-- <div class="modal_img modal_img_x" v-mousewheel>
|
||||
<div class="mousewheel">
|
||||
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="modal_accomplish">
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
|
||||
<img v-lazy="item.imgUrl">
|
||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
|
||||
<!-- 在sketch 和print暂时关闭like -->
|
||||
<!-- <div
|
||||
class="delete_like_file_block left1"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
>
|
||||
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
||||
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
|
||||
</div> -->
|
||||
<div class="pin_block">
|
||||
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
|
||||
<i v-if="item.pin" class="fi fi-rr-check"></i>
|
||||
<i v-else class="fi noCheck"></i>
|
||||
<span>PIN</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="moreBox" @click.stop>
|
||||
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
|
||||
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
import GO from "@/tool/GO";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload, Modal } from "ant-design-vue";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import more from './more.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: { Material, Generate,scaleImage,sketchCategory,more },
|
||||
setup() {
|
||||
let fileList: any = ref([
|
||||
]);
|
||||
let openClick: any = ref(1);
|
||||
|
||||
let store:any =useStore()
|
||||
|
||||
let sketchCatecoryList:any = computed(()=>{
|
||||
return store.state.Workspace.probjects.positionList
|
||||
})
|
||||
let sketchCatecoryAllList:any = computed(()=>{
|
||||
return store.state.Workspace.workspaceAllPosition
|
||||
})
|
||||
let workspace:any = computed(()=>{
|
||||
return store.state.Workspace.probjects
|
||||
})
|
||||
let sketchboardList:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.sketchboard
|
||||
})
|
||||
let {t} = useI18n()
|
||||
let driver__:any = inject('driver__')
|
||||
let isTest = ref()
|
||||
let useGenerate:any = ref({
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
checked:false,
|
||||
level2Type:'',
|
||||
designType:'',
|
||||
})
|
||||
|
||||
let openMenu = ref(false)
|
||||
let sketchStyleList:any = computed(()=>{
|
||||
return store.state.UserHabit.SketchGenerateType
|
||||
})
|
||||
let scene = ref({
|
||||
name: t('SketchboardUpload.GenerateSketch'),
|
||||
value:'generate'
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
openClick,
|
||||
store,
|
||||
sketchCatecoryList,
|
||||
sketchCatecoryAllList,
|
||||
workspace,
|
||||
sketchboardList,
|
||||
t,
|
||||
driver__,
|
||||
isTest,
|
||||
useGenerate,
|
||||
scene,
|
||||
openMenu,
|
||||
sketchStyleList,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swtich_type: "upload",
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Sketchboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getSketchLabel(value) {
|
||||
return (value: any) => {
|
||||
let lable = "";
|
||||
for (let item of this.sketchCatecoryList) {
|
||||
if (item.value === value) {
|
||||
lable = item.label;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return lable;
|
||||
};
|
||||
},
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
|
||||
let dom:any = document.getElementsByClassName('modal_img_x')
|
||||
let mouseover = ()=>{
|
||||
// bodyDom.classList.add('active')
|
||||
}
|
||||
let mouseleave = ()=>{
|
||||
// bodyDom.classList.remove('active')
|
||||
}
|
||||
dom.forEach((item:any) => {
|
||||
item.addEventListener('mouseover',mouseover)
|
||||
item.addEventListener('mouseleave',mouseleave)
|
||||
});
|
||||
|
||||
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},true)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
sketchboardList:{
|
||||
handler(newVal:any,oldVal:any){
|
||||
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
|
||||
if(this.driver__.driver){
|
||||
// driverObj__.moveTo(22)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
driver__:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal.index >= 15 && newVal.index <= 16){
|
||||
if(this.driver__.driver){
|
||||
// driverObj__.moveTo(15)
|
||||
}
|
||||
}else{
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
let Generate:any = this.$refs.Generate
|
||||
if(this.driver__.driver){
|
||||
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
|
||||
}else{
|
||||
Generate.searchPictureName = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSetchboardGenerate(item:any){
|
||||
this.useGenerate.imgId = item.imgId
|
||||
this.useGenerate.imgUrl = item.imgUrl
|
||||
this.useGenerate.level2Type = item.level2Type
|
||||
this.useGenerate.designType = item.designType
|
||||
let Material:any = this.$refs.Material
|
||||
let generate:any = this.$refs.Generate
|
||||
|
||||
if(item.designType == 'collection'){
|
||||
}else {
|
||||
generate.sketchboardList.forEach((item:any) => {
|
||||
item.checked = false
|
||||
});
|
||||
}
|
||||
},
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if (num == 2) {
|
||||
let material: any = this.$refs.Material;
|
||||
material.init("Sketchboard");
|
||||
} else if (num == 3) {
|
||||
// let Generate:any = this.$refs.Generate
|
||||
// Generate.init('generate')
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
scaleImage(index:any){
|
||||
let scaleImage:any = this.$refs.scaleImage
|
||||
scaleImage.isLike = false
|
||||
scaleImage.init(this.sketchboardList,index)
|
||||
},
|
||||
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
let category:any={
|
||||
value:'',
|
||||
name:'',
|
||||
}
|
||||
this.sketchCatecoryList.forEach((item:any) => {
|
||||
if(item.value == res.data.level2Type){
|
||||
category.value = item?.value
|
||||
category.name = item?.name
|
||||
}
|
||||
});
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
// file.pin = false;
|
||||
//category用来数据处理
|
||||
file.categoryValue = category?.value;
|
||||
file.category = category?.name;
|
||||
file.categoryShow = false;
|
||||
file.id_ = GO.id++
|
||||
file.id = res.data.id
|
||||
file.type_ = {
|
||||
type1:'upload',
|
||||
type2:'Sketchboard'
|
||||
};
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
this.store.commit("setSketchboardFile", fileList);
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
if(!bor){
|
||||
let index = -1;
|
||||
let res:any = JSON.parse(file.xhr.response);
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.info(this.t('SketchboardUpload.jsContent2'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(this.t('SketchboardUpload.jsContent3'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
deleteFile(item: any) {
|
||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||
item.state = 'delete'
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
if(str == 'like'){
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
level1Type:"Sketchboard",
|
||||
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
|
||||
gender:this.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
||||
(rv) => {
|
||||
item.like = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}else{
|
||||
let data = {
|
||||
generateDetailId:item.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
|
||||
(rv) => {
|
||||
item.like = false
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
openSetData() {
|
||||
this.useGenerate = {
|
||||
imgId : '',
|
||||
imgUrl:1,
|
||||
checked:false,
|
||||
level2Type:'',
|
||||
designType:''
|
||||
}
|
||||
let arr = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.sketchboardFiles
|
||||
)
|
||||
) || [];
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
moodboard:[] as any,
|
||||
}
|
||||
|
||||
arr.forEach((v:any)=>{
|
||||
v.pin = v.pin == 1?true:false
|
||||
this.sketchCatecoryAllList.forEach((item:any) => {
|
||||
if(v.level2Type == item.value){
|
||||
v.category=item.name
|
||||
v.categoryValue=item.value
|
||||
}
|
||||
});
|
||||
if(v.type_.type1 == 'generate'){
|
||||
setboard.generate.push(v)
|
||||
}else if(v.type_.type1 == 'material'){
|
||||
setboard.material.push(v)
|
||||
}else{
|
||||
setboard.moodboard.push(v)
|
||||
}
|
||||
})
|
||||
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
|
||||
this.store.commit("setSketchboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setSketchboardFile", setboard.moodboard);
|
||||
this.fileList = setboard.moodboard
|
||||
},
|
||||
confirmSelect(event: any) {
|
||||
for (let item of event) {
|
||||
let data = {
|
||||
imgUrl: item.url,
|
||||
resData: item,
|
||||
pin: false,
|
||||
status: "done",
|
||||
category: item.level2Type || "Outwear",
|
||||
categoryShow: false,
|
||||
};
|
||||
if (this.fileList.length == 15) {
|
||||
message.warning(
|
||||
this.t('SketchboardUpload.jsContent4')
|
||||
);
|
||||
break;
|
||||
}
|
||||
this.fileList.push(data);
|
||||
}
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
setSceneList(data:any){
|
||||
if(this.scene.value === data.value) return
|
||||
this.scene = data
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.sketchboardList = []
|
||||
generate.searchPictureName = ''
|
||||
this.openMenu = false
|
||||
},
|
||||
openPrintModel(){
|
||||
if(this.openMenu)return
|
||||
document.addEventListener('click',this.removePrintModel)
|
||||
this.openMenu = true
|
||||
},
|
||||
removePrintModel(){
|
||||
this.openMenu = false
|
||||
document.removeEventListener('click',this.removePrintModel)
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchboard_upload_modal {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.modal_left,.modal_right{
|
||||
background: #f7f8fa;
|
||||
border-radius: 3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
.modal_left {
|
||||
width: 71rem;
|
||||
margin-right: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
border-radius: calc(0.8rem*1.2);
|
||||
line-height: calc(4rem*1.2);
|
||||
font-size: var(--aida-fsize1-8);
|
||||
// margin-right: 2.2rem*1.2);
|
||||
margin-right: calc(8rem*1.2);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(.6rem*1.2);
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon {
|
||||
font-size: calc(1.8rem*1.2);
|
||||
margin-right: calc(0.8rem*1.2);
|
||||
}
|
||||
}
|
||||
.printMenu{
|
||||
margin-right: 0;
|
||||
margin-left: 2rem;
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
>div{
|
||||
width: 18rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
border: 0;
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
.switch_type_item:nth-child(3){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.sketchboard_body {
|
||||
// height: calc(100% - 5rem*1.2));
|
||||
flex: 1;
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
height: calc(30rem*1.2);
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.moodboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: calc(100% - 3rem*1.2);
|
||||
overflow-y: auto;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
&.upload_img_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload_file_item{
|
||||
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
||||
display: inline-block;
|
||||
width: calc(25% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.upload_component {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
// display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.upload_max_tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(1.4rem*1.2);
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi {
|
||||
font-size: calc(1.6rem*1.2);
|
||||
margin-right: calc(0.7rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: var(--aida-fsize1-4);
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
padding-bottom: 4.8rem;
|
||||
.modal_img{
|
||||
width: calc(40rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
// overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: hidden;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.mousewheel{
|
||||
display: flex;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
img{
|
||||
// width: 100%;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem*1.2);
|
||||
overflow-x: hidden;
|
||||
height: calc(30rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
// overflow-x: hidden;
|
||||
&.modal_accomplish::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_text{
|
||||
padding-top: calc(2rem*1.2);
|
||||
padding-block:calc(2rem*1.2);
|
||||
}
|
||||
.input_box{
|
||||
z-index: 1;
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
position: relative;
|
||||
.modal_imgItem{
|
||||
margin: 1rem;
|
||||
margin-bottom: 5rem;
|
||||
display: inline-block;
|
||||
// width: calc(10rem*1.2);
|
||||
// height: calc(10rem*1.2);
|
||||
width: calc(33.33% - 2rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
.moreBox{
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
// opacity: 0;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&.modal_imgItem:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
img{
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pin_block{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
width: 8rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 3rem;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: #fff;
|
||||
>label{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
padding-right: 1rem;
|
||||
padding-left: .2rem;
|
||||
}
|
||||
i{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
background: #000;
|
||||
&.noCheck{
|
||||
background: inherit;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: calc(1rem*1.2);
|
||||
transform: scale(0.9);
|
||||
// img {
|
||||
// }
|
||||
.operate_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
.pin_block{
|
||||
pointer-events:none
|
||||
}
|
||||
.delete_like_file_block{
|
||||
pointer-events:none
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<div class="more">
|
||||
<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
|
||||
<div class="more_box" v-show="show">
|
||||
<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
<div class="text">{{ $t('more.edit') }}</div>
|
||||
</div>
|
||||
<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
|
||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||
<div class="text">{{ $t('more.enlargement') }}</div>
|
||||
</div>
|
||||
<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
|
||||
<i class="fi fi-br-download"></i>
|
||||
<div class="text">{{ $t('more.down') }}</div>
|
||||
</div>
|
||||
<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
<div class="text">{{ $t('more.delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
moreList:{type:Array,default:()=>[]},
|
||||
item:{type:Object,default:()=>{}},
|
||||
index:{type:Number,default:0},
|
||||
},
|
||||
emits:['deleteFile','scaleImage'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
show:false
|
||||
})
|
||||
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const openList = ()=>{
|
||||
data.show = true
|
||||
document.addEventListener('click',setShow)
|
||||
}
|
||||
const setShow = ()=>{
|
||||
data.show = false
|
||||
document.removeEventListener('click',setShow)
|
||||
}
|
||||
const setMore = (str:any)=>{
|
||||
if(str == 'delete'){
|
||||
emit("deleteFile",props.item);
|
||||
}else if(str == 'edit'){
|
||||
emit("scaleImage",props.index);
|
||||
}else if(str == 'down'){
|
||||
console.log(props.item);
|
||||
downloadIamge(props.item.url)
|
||||
}else if(str == 'enlargement'){
|
||||
emit("scaleImage",props.index);
|
||||
}
|
||||
setShow()
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
openList,
|
||||
setMore,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.more{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .fi{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: #fff;
|
||||
border-radius: .6rem;
|
||||
}
|
||||
> .more_box{
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,.7);
|
||||
right: 0;
|
||||
margin-top: .5rem;
|
||||
color: #fff;
|
||||
border-radius: .6rem;
|
||||
padding: 1rem 0;
|
||||
font-size: 1.4rem;
|
||||
// width: 12rem;
|
||||
text-align: left;
|
||||
> .item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1.3rem;
|
||||
> i,> span{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text{
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:hover{
|
||||
background: rgba(0,0,0,.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,191 +0,0 @@
|
||||
<template>
|
||||
<div class="canvasArgument">
|
||||
<div class="label_item">
|
||||
<div >{{ $t('exportModel.Layer') }}:</div>
|
||||
<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 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>
|
||||
@@ -1,122 +0,0 @@
|
||||
<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, watch} 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,
|
||||
})
|
||||
watch(()=>data.selectObject.model.id,(newVal:any)=>{
|
||||
if(newVal){
|
||||
canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
|
||||
}
|
||||
})
|
||||
const createCanvas = ()=>{
|
||||
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>
|
||||
@@ -1,305 +0,0 @@
|
||||
<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>
|
||||
@@ -1,221 +0,0 @@
|
||||
<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>
|
||||
@@ -1,167 +0,0 @@
|
||||
<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>
|
||||
@@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<div class="deReconstruction">
|
||||
<div class="selectSektch itemBox">
|
||||
<div class="type">
|
||||
<a-select
|
||||
v-model:value="segmentationType"
|
||||
show-search
|
||||
:allowClear="false"
|
||||
style="width: 100%"
|
||||
placeholder="Please select"
|
||||
:options="[{value:'product',label:'product'},{value:'sketch',label:'sketch'}]"
|
||||
></a-select>
|
||||
<!-- <label>
|
||||
<div class="text">product</div>
|
||||
<input type="radio" value="product" v-model="segmentationType">
|
||||
</label>
|
||||
<label>
|
||||
<div class="text">sketch</div>
|
||||
<input type="radio" value="sketch" v-model="segmentationType">
|
||||
</label> -->
|
||||
</div>
|
||||
<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" 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
|
||||
}),
|
||||
segmentationType:'product',
|
||||
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
|
||||
})
|
||||
const setIsShowMark:any = inject('setIsShowMark')
|
||||
const dataDom = reactive({
|
||||
canvasBox:null as any,
|
||||
})
|
||||
const selectImgItem = (data:any)=>{
|
||||
if(!data.designType){
|
||||
canvasAddImg(data)
|
||||
}else{
|
||||
// data.minioUrl = data.url
|
||||
// dataDom.canvasBox.addImage(data)
|
||||
getSegmentation(data)
|
||||
}
|
||||
}
|
||||
const canvasAddImg = (list:any)=>{
|
||||
list.segmentedImages.forEach((url:any) => {
|
||||
list.imgUrl = url
|
||||
dataDom.canvasBox.addImage(list)
|
||||
});
|
||||
}
|
||||
const getSegmentation = (value:any)=>{
|
||||
let param = new FormData();
|
||||
param.append('id',value.id)
|
||||
param.append('file','')
|
||||
param.append('type',data.segmentationType)
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.imageSegmentation,param,config)
|
||||
.then((rv:any) => {
|
||||
// console.log(rv);
|
||||
canvasAddImg(rv[0])
|
||||
}
|
||||
).catch(rv=>{
|
||||
})
|
||||
}
|
||||
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;
|
||||
> .type{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> :deep(.ant-select){
|
||||
margin: 1rem 0;
|
||||
.ant-select-selector{
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
>label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>div{
|
||||
font-size: 2rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,421 +0,0 @@
|
||||
<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" v-show="systemUser">Style：</div>
|
||||
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
|
||||
<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" :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'" @click.stop="addSystemToUser(item)">+</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" :ageGroup="selectObject.ageGroup" @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';
|
||||
import { Item } from 'ant-design-vue/lib/menu';
|
||||
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:[] as any,
|
||||
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:'All',
|
||||
value:'',
|
||||
id:'',
|
||||
})
|
||||
}
|
||||
},{immediate:true})
|
||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||
getModel()
|
||||
})
|
||||
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()
|
||||
}
|
||||
).catch((res)=>{
|
||||
|
||||
});
|
||||
}
|
||||
const addSystemToUser = (item:any)=>{
|
||||
let newData = {
|
||||
sysModelId:item.id,
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.addSysModelToLib, {params:newData}).then(
|
||||
(rv: any) => {
|
||||
getModel()
|
||||
let value = {
|
||||
id:rv.id,
|
||||
url:rv.url,
|
||||
type:'Library',
|
||||
}
|
||||
setSelectKey(value)
|
||||
data.systemUser = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
|
||||
});
|
||||
}
|
||||
onMounted(()=>{
|
||||
getModel()
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setSelectKey,
|
||||
setSystemUser,
|
||||
setStyle,
|
||||
setWorkspaceStyle,
|
||||
openSetData,
|
||||
setEdit,
|
||||
|
||||
beforeUpload,
|
||||
fileUploadChange,
|
||||
getModel,
|
||||
deleteSinglePic,
|
||||
addSystemToUser
|
||||
}
|
||||
},
|
||||
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;
|
||||
max-height: 100%;
|
||||
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: 0 2rem;
|
||||
right: 0;
|
||||
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>
|
||||
@@ -1,213 +0,0 @@
|
||||
<template>
|
||||
<div class="threeDownPage" ref="threeDownPage">
|
||||
<!-- height="65rem" -->
|
||||
<a-modal class="generalModel"
|
||||
v-model:visible="threeDown"
|
||||
:footer="null"
|
||||
width="77rem"
|
||||
height="35rem"
|
||||
:maskClosable="false"
|
||||
:mask="true"
|
||||
: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 size of the clothing</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" :class="{btnActive:!select.sizeType}" @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;
|
||||
data.select.sizeType = ''
|
||||
data.select.size = ''
|
||||
}
|
||||
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,
|
||||
}
|
||||
let config = {
|
||||
params:value
|
||||
}
|
||||
|
||||
Https.axiosGet(Https.httpUrls.downloadZip,config).then((res:any)=>{
|
||||
let a = document.createElement('a');
|
||||
a.href = res;
|
||||
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>
|
||||
:deep(.ant-modal-mask){
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
.threeDownPage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
:deep(.generalModel){
|
||||
.gallery_btn{
|
||||
&.btnActive{
|
||||
pointer-events: none;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding-left: 6rem;
|
||||
// width: 55rem;
|
||||
// margin: 0 auto;
|
||||
|
||||
> .downItem{
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
align-items: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>
|
||||
@@ -1,372 +0,0 @@
|
||||
<template>
|
||||
<div class="patternMaking3D">
|
||||
<div class="selectModel">
|
||||
<div class="heard selectList">
|
||||
<div :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">Clothing</div>
|
||||
<div :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">Print</div>
|
||||
</div>
|
||||
<div class="list" v-show="libraryOrModel == 'model'" v-if="maskShow">
|
||||
<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 class="list printList" v-show="libraryOrModel == 'print'">
|
||||
<div v-for="item in printList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setMaterial(item)">
|
||||
<img :src="item.url || item.imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model" v-show="selectModel.id != -1">
|
||||
<div class="heard">
|
||||
<div class="text">Technical sketch</div>
|
||||
<div class="switch">
|
||||
front
|
||||
<a-switch v-model:checked="isFront" />
|
||||
back
|
||||
</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-if="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 class="btn">
|
||||
<i class="fi fi-bs-expand-arrows-alt" @click.stop="openScaleImage()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="openDown()">Download</div>
|
||||
</div>
|
||||
<div class="download">
|
||||
<download ref="download"></download>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, 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 threeBox from "./three.vue"
|
||||
import download from "./download.vue"
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
threeBox,download,scaleImage
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
selectModel:{
|
||||
id:-1,
|
||||
} as any,
|
||||
// printCatecoryList:computed(()=>{
|
||||
// return store.state.UserHabit.printType
|
||||
// }),
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
modelList:[] as any,
|
||||
printList:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
isShowLoading:false,
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
imgOrThree:false,
|
||||
isFront:false,
|
||||
maskShow:false,
|
||||
libraryOrModel:'model'
|
||||
})
|
||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||
data.modelList = []
|
||||
data.currentPage = 0,
|
||||
data.isNoData = false
|
||||
data.isShowMark = false
|
||||
})
|
||||
const setSelectModel = (item:any)=>{
|
||||
data.isShowMark = true
|
||||
const value = {
|
||||
threeDSimpleId:item.threeDSimpleId,
|
||||
}
|
||||
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()
|
||||
// }
|
||||
let stateData = {
|
||||
threeDsimpleId:item.id
|
||||
}
|
||||
store.commit('setPatternMaking3D',stateData)
|
||||
}).catch((err:any)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
}
|
||||
const dataDom = reactive({
|
||||
threeBox:null as any,
|
||||
download:null as any,
|
||||
scaleImage:null as any,
|
||||
})
|
||||
const openSetData = ()=>{
|
||||
nextTick(()=>{
|
||||
let id = store.state.HomeStoreModule.patternMaking3D.threeDsimpleId
|
||||
if(id && data.selectModel.id == -1)setSelectModel({threeDSimpleId:id})
|
||||
})
|
||||
setTimeout(()=>{
|
||||
data.maskShow = true
|
||||
},500)
|
||||
}
|
||||
const getModelList = ()=>{
|
||||
if(data.isShowMark && !data.isNoData)return
|
||||
let value = {
|
||||
page: data.currentPage,
|
||||
size:data.pageSize,
|
||||
sex:data.selectObject.sex,
|
||||
}
|
||||
data.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.threeDPage,value).then(
|
||||
(rv: any) => {
|
||||
if(rv.content.length == 0)data.isNoData = true
|
||||
data.modelList.push(...rv.content)
|
||||
data.isShowLoading = false
|
||||
}
|
||||
).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)
|
||||
}
|
||||
const setLibraryOrModel = (str:any)=>{
|
||||
if(str == 'print' && data.selectModel.id == -1)return
|
||||
data.libraryOrModel = str
|
||||
}
|
||||
const setMaterial = (item:any)=>{
|
||||
dataDom.threeBox.addMaterial(item)
|
||||
}
|
||||
const openScaleImage = ()=>{
|
||||
let scaleImage:any = dataDom.scaleImage
|
||||
scaleImage.isLike = false
|
||||
scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setSelectModel,
|
||||
openSetData,
|
||||
getModelList,
|
||||
setImgOrThree,
|
||||
openDown,
|
||||
setLibraryOrModel,
|
||||
setMaterial,
|
||||
openScaleImage
|
||||
}
|
||||
},
|
||||
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%;
|
||||
&.selectList{
|
||||
justify-content: flex-start;
|
||||
> div{
|
||||
position: relative;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> div::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.4rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -.5rem;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
> .active {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .active::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> .switch{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .selectModel{
|
||||
width: 40%;
|
||||
// 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;
|
||||
&.printList{
|
||||
> .modelItem{
|
||||
aspect-ratio: 1 / 1;
|
||||
>img{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .modelItem{
|
||||
width: calc(100% / 4 - 1rem);
|
||||
margin: .5rem;
|
||||
aspect-ratio: 1 / 1.2;
|
||||
// height: 10rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #D4D4D4;
|
||||
cursor: pointer;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
padding: 1rem;
|
||||
|
||||
}
|
||||
&.active{
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .model ,> .flatPatterm{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
> .modelBox{
|
||||
width: 100%;
|
||||
// height: 20rem;
|
||||
// height: 75rem;
|
||||
flex: 1;
|
||||
padding: 1rem 0;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
>.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .btn{
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 2rem;
|
||||
> i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
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>
|
||||
@@ -1,552 +0,0 @@
|
||||
<template>
|
||||
<div class="three">
|
||||
<div class="parameter">
|
||||
<label>
|
||||
<span>scaleX:</span>
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="repeat.x"
|
||||
:tooltipVisible="false"
|
||||
@change="changeRepeat"
|
||||
:max="6"
|
||||
:step="0.001"
|
||||
:min="0.002"
|
||||
>
|
||||
</a-slider>
|
||||
</label>
|
||||
<label>
|
||||
<span>scaleY:</span>
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="repeat.y"
|
||||
:tooltipVisible="false"
|
||||
@change="changeRepeat"
|
||||
:max="6"
|
||||
:min="0.002"
|
||||
:step="0.001"
|
||||
>
|
||||
</a-slider>
|
||||
</label>
|
||||
<i class="fi fi-br-link" :class="{'fi-br-link':isLock,'fi-bs-link-slash':!isLock}" @click="setLock"></i>
|
||||
</div>
|
||||
<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, onBeforeUnmount} 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/examples/jsm/controls/OrbitControls.js';
|
||||
|
||||
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
|
||||
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
|
||||
import { OutlinePass } from "three/examples/jsm/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,//监听鼠标、键盘事件
|
||||
textureLoader:shallowRef() as any,//材质
|
||||
load:{
|
||||
state:false,
|
||||
progress:0 as any,
|
||||
},
|
||||
repeat:{
|
||||
x:1,
|
||||
y:1,
|
||||
},
|
||||
animationId:null as any,
|
||||
isLock:false,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
threeDom:null as any,
|
||||
})
|
||||
const dataTime = reactive({
|
||||
updataRepeat: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("#fff");
|
||||
// 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 = ()=>{
|
||||
data.animationId = 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 =async (item:any)=>{
|
||||
//添加图片材质
|
||||
let url = item.url || item.url || item.imgUrl
|
||||
data.load.state = true
|
||||
let textureLoader = new THREE.TextureLoader()
|
||||
await textureLoader.load(url, // 图片放在public/textures目录下
|
||||
(texture:any) => {
|
||||
data.textureLoader = texture
|
||||
// 3. 配置纹理参数
|
||||
texture.wrapS = THREE.RepeatWrapping;
|
||||
texture.wrapT = THREE.RepeatWrapping;
|
||||
// texture.wrapS = THREE.ClampToEdgeWrapping; // 水平方向不重复
|
||||
// texture.wrapT = THREE.ClampToEdgeWrapping; // 垂直方向不重复
|
||||
|
||||
// texture.repeat.set(1, 1); // 纹理重复次数
|
||||
texture.anisotropy = 32; // 提高纹理清晰度
|
||||
data.group?.traverse((child:any) => {
|
||||
if (child.isMesh) {
|
||||
console.log(child.name)
|
||||
// 5. 创建新材质（根据需求选择材质类型）
|
||||
const textureWidth = texture.image.width;
|
||||
const textureHeight = texture.image.height;
|
||||
const box = new THREE.Box3().setFromObject(child);
|
||||
const modelWidth = box.getSize(new THREE.Vector3()).x;
|
||||
const modelHeight = box.getSize(new THREE.Vector3()).y;
|
||||
data.repeat.x = 2 - modelWidth / textureWidth;
|
||||
data.repeat.y = 2 - modelHeight / textureHeight;
|
||||
let patternMaking3D = store.state.HomeStoreModule.patternMaking3D
|
||||
if(patternMaking3D.x)data.repeat.x = patternMaking3D.x
|
||||
if(patternMaking3D.y)data.repeat.y = patternMaking3D.y
|
||||
|
||||
// texture.repeat.set(1, 1); // 纹理重复次数
|
||||
texture.repeat.set(2 - data.repeat.x, 2 - data.repeat.y); // 纹理重复次数
|
||||
|
||||
const newMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture, // 基础颜色贴图
|
||||
roughness: 0.7, // 表面粗糙度 (0-1)
|
||||
metalness: .2, // 金属质感 (0-1)
|
||||
side: THREE.DoubleSide // 双面渲染
|
||||
});
|
||||
// 7. 如果需要单独控制某些子模型的UV
|
||||
if (child.geometry.attributes.uv) {
|
||||
const uvs = child.geometry.attributes.uv.array;
|
||||
// 计算UV边界
|
||||
let minU = Infinity, maxU = -Infinity;
|
||||
let minV = Infinity, maxV = -Infinity;
|
||||
|
||||
for (let i = 0; i < uvs.length; i += 2) {
|
||||
minU = Math.min(minU, uvs[i]);
|
||||
maxU = Math.max(maxU, uvs[i]);
|
||||
minV = Math.min(minV, uvs[i+1]);
|
||||
maxV = Math.max(maxV, uvs[i+1]);
|
||||
}
|
||||
|
||||
const uvWidth = maxU - minU;
|
||||
const uvHeight = maxV - minV;
|
||||
// 仅对非小UV区域设置材质
|
||||
if (!(uvWidth < 1.2 || uvHeight < 1.2)) {
|
||||
const newMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture,
|
||||
roughness: 0.7,
|
||||
metalness: 0.2,
|
||||
side: THREE.DoubleSide
|
||||
});
|
||||
child.material = newMaterial;
|
||||
}else{
|
||||
// child.material = new THREE.MeshStandardMaterial({
|
||||
// transparent: true,
|
||||
// opacity: 0, // 完全透明
|
||||
// side: THREE.DoubleSide
|
||||
// });
|
||||
}
|
||||
|
||||
child.geometry.attributes.uv.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
data.load.state = false
|
||||
},(xhr:any) => { // 加载进度回调
|
||||
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
|
||||
});
|
||||
let value = {
|
||||
collectionElementId:item.id,
|
||||
x:data.repeat.x,
|
||||
y:data.repeat.y,
|
||||
}
|
||||
store.commit('setPatternMaking3D',value)
|
||||
|
||||
})
|
||||
}
|
||||
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) => { // 加载进度回调
|
||||
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);
|
||||
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)=>{
|
||||
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)
|
||||
let patternMaking3D = store.state.HomeStoreModule.patternMaking3D
|
||||
if(patternMaking3D.printMinioUrl)await addMaterial({url:patternMaking3D.printMinioUrl})
|
||||
data.load.state = false
|
||||
}
|
||||
const changeRepeat = (e:any)=>{
|
||||
if(data.isLock)data.repeat.x = e
|
||||
if(data.isLock)data.repeat.y = e
|
||||
clearTimeout(dataTime.updataRepeat)
|
||||
dataTime.updataRepeat = setTimeout(()=>{
|
||||
data.repeat.x = data.repeat.x == 6 ? 5.999 : data.repeat.x
|
||||
data.repeat.y = data.repeat.y == 6 ? 5.999 : data.repeat.y
|
||||
|
||||
data.textureLoader.repeat.set(6 - data.repeat.x,6 - data.repeat.y); // 纹理重复次数
|
||||
let value = {
|
||||
x:data.repeat.x,
|
||||
y:data.repeat.y,
|
||||
}
|
||||
store.commit('setPatternMaking3D',value)
|
||||
},1000)
|
||||
}
|
||||
const setLock = ()=>{
|
||||
data.isLock = !data.isLock
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
if(data.animationId){
|
||||
cancelAnimationFrame(data.animationId);
|
||||
data.animationId = null;
|
||||
}
|
||||
data.scene.traverse((child:any) => {
|
||||
if (child.material) {
|
||||
child.material.dispose();
|
||||
}
|
||||
if (child.geometry) {
|
||||
child.geometry.dispose();
|
||||
}
|
||||
child = null;
|
||||
});
|
||||
data.renderer.forceContextLoss();
|
||||
data.renderer.dispose();
|
||||
data.scene.clear();
|
||||
data.scene = null;
|
||||
data.camera = null;
|
||||
data.controls = null;
|
||||
data.renderer.domElement = null;
|
||||
data.renderer = null;
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
openSetData,
|
||||
addMaterial,
|
||||
changeRepeat,
|
||||
setLock,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.three{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .parameter{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-right: 2rem;
|
||||
// &:not(:last-child){
|
||||
// margin-right: 3rem;
|
||||
// }
|
||||
> span{
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
> i{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .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>
|
||||
@@ -1,615 +0,0 @@
|
||||
<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">Choose design to transfer</div>
|
||||
</div>
|
||||
<div class="imgBox" v-mousewheel>
|
||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div>
|
||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</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">Choose pose</div>
|
||||
</div>
|
||||
<div class="imgBox" v-mousewheel>
|
||||
<div class="item" v-for="item in poseList" @click="selectPose(item)">
|
||||
<img :src="item.firstFrame"
|
||||
alt=""
|
||||
@mouseenter.stop="gifPlay($event,item)"
|
||||
@mouseleave.stop="gifPause($event,item)"
|
||||
>
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate input_border">
|
||||
<div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
|
||||
{{ $t('Generate.Generate') }}
|
||||
</div>
|
||||
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
</div>
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="likeBox">
|
||||
<div class="element">
|
||||
<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
|
||||
<div class="content">
|
||||
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
|
||||
</div>
|
||||
<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
|
||||
<span class="icon iconfont icon-xiala"></span>
|
||||
</div> -->
|
||||
<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
|
||||
<span class="icon iconfont icon-xiala"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noLikeBox" :class="{active:button.right}">
|
||||
<div class="element">
|
||||
<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></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:[],
|
||||
isGenerate:false,//判断是否正在进行generate
|
||||
remGenerate:false,
|
||||
removeGenerate:false,
|
||||
generateTime:null as any,
|
||||
poseList:[],
|
||||
selectPose:null as any,
|
||||
})
|
||||
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.fileList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||
console.log(data.currentList)
|
||||
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||
item.isChecked = true
|
||||
if(item.url || item.imgUrl)data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
// dataDom.generalDrag.openSetData()
|
||||
data.currentList = store.state.UploadFilesModule.modularData.toProduct
|
||||
setIsShowMark(false)
|
||||
if(data.poseList.length == 0){
|
||||
getPoseList()
|
||||
}
|
||||
setCloudImg()
|
||||
}
|
||||
const setCloudImg = ()=>{
|
||||
let arr = store.state.UploadFilesModule.cloudList
|
||||
let list = JSON.parse(JSON.stringify(arr.poseTransfer)) || []
|
||||
console.log(list)
|
||||
list.forEach((item:any)=>{
|
||||
item.url = item.firstFrameUrl
|
||||
data.noLikeList.unshift(item)
|
||||
})
|
||||
|
||||
store.commit('clearCloudList','poseTransfer')
|
||||
}
|
||||
const gifPlay = (e:any,item:any)=>{
|
||||
e.target.src = item.gif//使用gif图片
|
||||
}
|
||||
const gifPause = (e:any,item:any)=>{
|
||||
e.target.src = item.firstFrame//静态图片
|
||||
}
|
||||
const getPoseList = ()=>{
|
||||
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
|
||||
rv[0].isChecked = true
|
||||
data.selectPose = rv[0]?.id || 1
|
||||
data.poseList = rv
|
||||
})
|
||||
}
|
||||
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:data.selectPose,
|
||||
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:any = 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
|
||||
console.log(list)
|
||||
list = ''
|
||||
// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
|
||||
}else if(element.status == 'Fail'){
|
||||
|
||||
}
|
||||
});
|
||||
data.waitList = list
|
||||
if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
|
||||
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
||||
message.info(t('Generate.effectPoor'));
|
||||
}else{
|
||||
}
|
||||
|
||||
// this.store.dispatch('getCredits')
|
||||
clearInterval(data.generateTime)
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.remGenerate = false
|
||||
data.isGenerate = false
|
||||
}
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
|
||||
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
|
||||
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||
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 && id){
|
||||
if(str == 'zoom'){
|
||||
showViewVideo({url:item.videoUrl})
|
||||
}else if(str == 'like'){
|
||||
likeFile(item,'noLike',index)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
const noLikeSetBtn = (id:any,str:string)=>{
|
||||
if(str == 'delete'){
|
||||
data.noLikeList = data.noLikeList.filter((v:any) => v.id != id);
|
||||
}else{
|
||||
data.noLikeList.forEach((item:any,index:any)=>{
|
||||
if(item.id == 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=>{
|
||||
});
|
||||
}
|
||||
const selectPose = (item:any)=>{
|
||||
item.isChecked = true
|
||||
data.selectPose = item?.id || 1
|
||||
data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||
}
|
||||
onMounted(()=>{
|
||||
// showViewVideo({url:'https://www.minio.aida.com.hk:12025/api/v1/download-shared-object/aHR0cHM6Ly93d3cubWluaW8uYWlkYS5jb20uaGs6MTIwMjQvYWlkYS11c2Vycy84OS9wb3NlX3RyYW5zZm9ybV92aWRlby8xMjMtODkubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9N0tOVDdNWlNLWkRXM1RVOEJZVlklMkYyMDI1MDQwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA0MDhUMDUxOTM1WiZYLUFtei1FeHBpcmVzPTQzMTk5JlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJM1MwNVVOMDFhVTB0YVJGY3pWRlU0UWxsV1dTSXNJbVY0Y0NJNk1UYzBOREV4T0RneE9Td2ljR0Z5Wlc1MElqb2lZV1J0YVc0aWZRLmY0Z3RoTU1BeC1GUnM3eGhWNFdjTUFCUW5lU19BVkIxUDlYbnJQbEFNWUFsVnJwY3RpYXgtU2cyY2FkZHZ0a0VCOU1NbWxGeUlIbU90aGhUWDlqN2lnJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9Yjg5YmQ4ZDg5M2I4ZjBjYmYxZDI3NDFjZmY0NGRiZGNmYWM2NmU0ZGM2OGIwYzQzZDA2OGI4YjYzZjE5YjhhOA'})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
openSetData,
|
||||
selectImgItem,
|
||||
setSize,
|
||||
setItemPosition,
|
||||
gifPlay,
|
||||
gifPause,
|
||||
getgenerate,
|
||||
getUploadUrl,
|
||||
beforeUpload,
|
||||
fileUploadChange,
|
||||
removeGenerate,
|
||||
likeSetBtn,
|
||||
noLikeSetBtn,
|
||||
selectPose,
|
||||
}
|
||||
},
|
||||
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>
|
||||
.poseTransfer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
> .configuratioBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-right: 3.8rem;
|
||||
&.active{
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .generate{
|
||||
margin-left: auto;
|
||||
> .started_btn{
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .configuratioBox > .configuratio{
|
||||
width: 31.8rem;
|
||||
padding-bottom: 1rem;
|
||||
> .title{
|
||||
// font-size: 2.6rem;
|
||||
}
|
||||
> .content{
|
||||
// margin-top: 4rem;
|
||||
margin-top: 1.8rem;
|
||||
> .selectImg,> .poses{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .imgBox{
|
||||
flex: 1;
|
||||
max-height: 45rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
> .item{
|
||||
margin-right: 1rem;
|
||||
width: calc(100% / 2 - .5rem);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
height: 25rem;
|
||||
position: relative;
|
||||
// &.active{
|
||||
// border: 2px solid;
|
||||
// }
|
||||
:deep(.ant-checkbox-wrapper){
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .upload_item{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
> .head{
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
> .text{
|
||||
display: inline-block;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .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{
|
||||
>span{
|
||||
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;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
> span{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
> .noLikeBox{
|
||||
padding-left: 2.3rem;
|
||||
&.active{
|
||||
flex: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<div class="contentBox" :class="{active:(selectKey_ == 'design' || selectKey_ == 'toProduct' || selectKey_ == 'relight' || selectKey_ == 'poseTransfer')}">
|
||||
<seriesDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></seriesDesign>
|
||||
<singleProductDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></singleProductDesign>
|
||||
<sketchDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></sketchDesign>
|
||||
<productDrawingDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></productDrawingDesign>
|
||||
<printingDesign3D v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></printingDesign3D>
|
||||
<printDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></printDesign>
|
||||
<div class="public">
|
||||
<cloudUploading v-show="selectKey_ == 'yun'" v-if="selectObject.id" :workflowType="workflowType" ref="cloudUploading" @retrieve="(value:any)=>$emit('retrieve',value)"></cloudUploading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,inject,watch,nextTick,provide,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import seriesDesign from './seriesDesign.vue'
|
||||
import printDesign from './printDesign.vue'
|
||||
import singleProductDesign from './singleProductDesign.vue'
|
||||
import sketchDesign from './sketchDesign.vue'
|
||||
import productDrawingDesign from './productDrawingDesign.vue'
|
||||
import printingDesign3D from './printingDesign3D.vue'
|
||||
import cloudUploading from '../../model/cloudUploading/index.vue'
|
||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D,
|
||||
cloudUploading
|
||||
},
|
||||
props:{
|
||||
selectKey_:String,
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
emit:['projectComplete','retrieve'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
navListData:computed(()=>store.state.Workspace.projectList),
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
userDetail:computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
}),
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
seriesDesign:null as any,
|
||||
singleProductDesign:null as any,
|
||||
printDesign:null as any,
|
||||
sketchDesign:null as any,
|
||||
productDrawingDesign:null as any,
|
||||
printingDesign3D:null as any,
|
||||
})
|
||||
//处理design数据
|
||||
const setDesignData = (str:any)=>{
|
||||
// if (str in dataDom) {
|
||||
if(str == 'workspace' || str == 'yun' || str == '')return
|
||||
return new Promise(async (resolve,reject)=>{
|
||||
if(str == "colorBoard")await setColor()
|
||||
// if(str == "sketchBoard")await setSketch()
|
||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
let value = {
|
||||
type:str,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
if(allBoardData.indexOf(str) != -1){
|
||||
await store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
let value = {
|
||||
type:str,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
store.dispatch('setModularData',value)
|
||||
}
|
||||
saveProject(str)
|
||||
resolve('')
|
||||
})
|
||||
// } else {
|
||||
// return
|
||||
// }
|
||||
}
|
||||
const saveCanvas = (value:any,str:any)=>{
|
||||
let json = dataDom[data.selectObject.type][str].getCanvasData()
|
||||
let blob = new Blob([JSON.stringify(json)], { type: "application/json" });
|
||||
let formData = new FormData();
|
||||
// let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
formData.append("file", blob, "data.json");
|
||||
formData.append('module', str);
|
||||
formData.append('projectId', value.projectId);
|
||||
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
|
||||
// message.success(t('exportModel.jsContent7'))
|
||||
})
|
||||
}
|
||||
const saveProject = (str:any)=>{
|
||||
if(str == 'design')return
|
||||
let value:any = {
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
if(str == 'deReconstruction' || str == 'canvas'){
|
||||
saveCanvas(value,str)
|
||||
return
|
||||
}
|
||||
store.dispatch('getProjectData',str).then((data)=>{
|
||||
// if(!data[str])return
|
||||
value[str] = data[str]
|
||||
console.log(value,132)
|
||||
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
||||
})
|
||||
})
|
||||
}
|
||||
const setSketch = ()=>{
|
||||
|
||||
}
|
||||
const setColor = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
let colorBoards = store.state.UploadFilesModule.colorBoards;
|
||||
if(colorBoards.length == 0)return resolve('')
|
||||
let data: any = [];
|
||||
for (let v of colorBoards) {
|
||||
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
|
||||
let hsv = rgbToHsv(color);
|
||||
v.hsv = hsv[0] + hsv[1] + hsv[2];
|
||||
data.push({
|
||||
h: hsv[0],
|
||||
s: hsv[1],
|
||||
v: hsv[2],
|
||||
});
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
rv.forEach((ele: any, index: number) => {
|
||||
colorBoards[index].id = ele.id;
|
||||
colorBoards[index].tcx = ele.tcx;
|
||||
colorBoards[index].name = ele.name;
|
||||
});
|
||||
store.commit("setColorboardList", colorBoards);
|
||||
resolve('');
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
reject();
|
||||
});
|
||||
})
|
||||
}
|
||||
const setModule = (value:any)=>{//选中设置数据
|
||||
if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
|
||||
}
|
||||
const unfold = ()=>{
|
||||
dataDom[data.selectObject.type].unfold()
|
||||
}
|
||||
watch(()=>props.selectKey_,async (newVal,oldVal)=>{
|
||||
if((!!newVal && !!oldVal) || (!newVal && !!oldVal)){
|
||||
setDesignData(oldVal)
|
||||
}
|
||||
// if(newVal == '' && oldVal != ''){
|
||||
// //选择数据
|
||||
// if(data.navListData.value[index]?.select){
|
||||
// setDesignData(oldVal)
|
||||
// }
|
||||
// }
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setModule,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.contentBox{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
height: calc(100% - 5rem);
|
||||
// &.active{
|
||||
// overflow: initial;
|
||||
// }
|
||||
> .public{
|
||||
flex: 1;
|
||||
}
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: initial;
|
||||
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
PrintboardUpload,canvasUpload,workspace
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
emits:['projectComplete'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
workspaceBack:inject('setBack') as any,
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
printBoard:null as any,
|
||||
canvas:null as any,
|
||||
})
|
||||
const open = (str:any)=>{
|
||||
nextTick(()=>{
|
||||
if(dataDom[str]?.openSetData){
|
||||
dataDom[str].openSetData()
|
||||
}
|
||||
})
|
||||
}
|
||||
const setitemData = (arr:any)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
nextTick(()=>{
|
||||
arr.forEach((rv:any)=>{
|
||||
let arr = ['design','patternMaking3D']
|
||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
||||
dataDom[rv].openSetData()
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const unfold = ()=>{
|
||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
||||
}
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":["printBoard", ]
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['printBoard']
|
||||
let canvasData = ['canvas']
|
||||
for (let index = 0; index < canvasData.length; index++) {
|
||||
const item = canvasData[index];
|
||||
await getCanvasData(item)
|
||||
}
|
||||
await setitemData(allBoardData)
|
||||
allBoardData.forEach((item)=>{
|
||||
let value = {
|
||||
type:item,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
if(arr.indexOf(item) != -1){
|
||||
store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
store.dispatch('setModularData',value)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const getCanvasData = (str:any)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:str,
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
store.commit("setCanvasData", {type:str,file:rv});
|
||||
resolve('')
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
}
|
||||
const historyChooseData = (data:any)=>{
|
||||
let collectionData = {
|
||||
printboardFiles: dealViewChooseData(
|
||||
data.printBoard,"Printboard"
|
||||
),
|
||||
generatePrintFiles: [],
|
||||
};
|
||||
store.commit("setAllBoardDataChoose", collectionData);
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseData = (data: any,str:string)=> {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
let filesList = data.map((v: any) => {
|
||||
let newData: any = {
|
||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
||||
id: v.id,
|
||||
status: "done",
|
||||
resData: v,
|
||||
type_:{
|
||||
type1:'material',
|
||||
type2:v.level1Type
|
||||
}
|
||||
};
|
||||
if (v.level1Type === "Sketchboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.categoryValue = v.level2Type;
|
||||
newData.level2Type = v.level2Type;
|
||||
}
|
||||
if (v.level1Type === "Printboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.level2Type = v.level2Type;
|
||||
newData.categoryValue = v.level2Type;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
return filesList;
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
getCollection()
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
open,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.seriesDesign{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,200 +0,0 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
|
||||
<!-- <canvasUpload></canvasUpload> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import patternMaking3D from '../../model/patternMaking3D/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/test.vue";
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
patternMaking3D,canvasUpload,workspace,PrintboardUpload
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
workspaceBack:inject('setBack') as any,
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
printBoard:null as any,
|
||||
patternMaking3D:null as any,
|
||||
})
|
||||
const open = (str:any)=>{
|
||||
nextTick(()=>{
|
||||
if(dataDom[str]?.openSetData){
|
||||
dataDom[str].openSetData()
|
||||
}
|
||||
})
|
||||
}
|
||||
const setitemData = (arr:any)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
nextTick(()=>{
|
||||
arr.forEach((rv:any)=>{
|
||||
let arr = ['design','patternMaking3D']
|
||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
||||
dataDom[rv].openSetData()
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const unfold = ()=>{
|
||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
||||
}
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":["patternMaking3D", 'printBoard']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['patternMaking3D','printBoard']
|
||||
await setitemData(allBoardData)
|
||||
allBoardData.forEach((item)=>{
|
||||
let value = {
|
||||
type:item,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
if(arr.indexOf(item) > -1){
|
||||
store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
store.dispatch('setModularData',value)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const historyChooseData = (value:any)=>{
|
||||
let collectionData = {
|
||||
printboardFiles: dealViewChooseData(
|
||||
value.printBoard,"Printboard"
|
||||
),
|
||||
generatePrintFiles: [],
|
||||
};
|
||||
|
||||
store.commit("setAllBoardDataChoose", collectionData);
|
||||
let patternMaking3DData = {
|
||||
threeDsimpleId:value.patternMaking3D.threeDSimpleId,
|
||||
collectionElementId:value.patternMaking3D.collectionElementId,
|
||||
printMinioUrl:value.patternMaking3D.printMinioUrl,
|
||||
x:value.patternMaking3D.x,
|
||||
y:value.patternMaking3D.y,
|
||||
};
|
||||
store.commit('setPatternMaking3D',patternMaking3DData)
|
||||
}
|
||||
const dealViewChooseData = (data: any,str:string)=> {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
let filesList = data.map((v: any) => {
|
||||
let newData: any = {
|
||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
||||
id: v.id,
|
||||
status: "done",
|
||||
resData: v,
|
||||
type_:{
|
||||
type1:'material',
|
||||
type2:v.level1Type
|
||||
}
|
||||
};
|
||||
if (v.level1Type === "Printboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.level2Type = v.level2Type;
|
||||
newData.categoryValue = v.level2Type;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
return filesList;
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
getCollection()
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
open,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.seriesDesign{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<toProduct ref="toProduct"
|
||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
||||
class="toProduct"
|
||||
:isState="selectKey_ =='toProduct'"
|
||||
v-show="selectKey_ == 'toProduct'"
|
||||
></toProduct>
|
||||
<toProduct ref="relight"
|
||||
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
|
||||
class="relight"
|
||||
:isState="selectKey_ =='relight'"
|
||||
v-show="selectKey_ == 'relight'"
|
||||
></toProduct>
|
||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
||||
<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import toProduct from '../../model/toProduct/index.vue'
|
||||
import poseTransfer from '../../model/poseTransfer/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,toProduct,canvasUpload,poseTransfer
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
workspaceBack:inject('setBack') as any,
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
toProduct:null as any,
|
||||
relight:null as any,
|
||||
poseTransfer:null as any,
|
||||
canvas:null as any,
|
||||
})
|
||||
const open = (str:any)=>{
|
||||
console.log(str)
|
||||
nextTick(()=>{
|
||||
if(dataDom[str]?.openSetData){
|
||||
dataDom[str].openSetData()
|
||||
}
|
||||
})
|
||||
}
|
||||
const setitemData = (arr:any)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
nextTick(()=>{
|
||||
arr.forEach((rv:any)=>{
|
||||
let arr = ['design','patternMaking3D']
|
||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
||||
dataDom[rv].openSetData()
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const unfold = ()=>{
|
||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
||||
}
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":['toProduct','relight','poseTransfer']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)//设置历史数据
|
||||
let allBoardData = ['toProduct','relight','poseTransfer']
|
||||
let canvasData = ['canvas']
|
||||
for (let index = 0; index < canvasData.length; index++) {
|
||||
const item = canvasData[index];
|
||||
await getCanvasData(item)
|
||||
}
|
||||
await setitemData(allBoardData)
|
||||
//还有一个canvas
|
||||
allBoardData.forEach((item)=>{
|
||||
let value = {
|
||||
type:item,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
store.dispatch('setModularData',value)
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const getCanvasData = (str:any)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:str,
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
store.commit("setCanvasData", {type:str,file:rv});
|
||||
resolve('')
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
}
|
||||
const historyChooseData = (data:any)=>{
|
||||
if(data.toProduct){
|
||||
let value = {
|
||||
list: data.toProduct,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setToProductImage", value);
|
||||
}
|
||||
if(data.relight){
|
||||
let value = {
|
||||
list: data.relight,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setRelightList", value);
|
||||
}
|
||||
if(data.poseTransfer){
|
||||
let value = {
|
||||
list: data.poseTransfer,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setPoseTransfer", value);
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
getCollection()
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
open,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.seriesDesign{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,338 +0,0 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
|
||||
<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
|
||||
<toProduct ref="toProduct"
|
||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
||||
class="toProduct"
|
||||
:isState="selectKey_ =='toProduct'"
|
||||
v-show="selectKey_ == 'toProduct'"
|
||||
></toProduct>
|
||||
<toProduct ref="relight"
|
||||
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
|
||||
class="relight"
|
||||
:isState="selectKey_ =='relight'"
|
||||
v-show="selectKey_ == 'relight'"
|
||||
></toProduct>
|
||||
<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
|
||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import design from '../../model/design/index.vue'
|
||||
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
|
||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
||||
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
|
||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
||||
import mannequin from '../../model/mannequin/index.vue'
|
||||
import toProduct from '../../model/toProduct/index.vue'
|
||||
import poseTransfer from '../../model/poseTransfer/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,toProduct,canvasUpload,poseTransfer
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
emits:['projectComplete'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
workspaceBack:inject('setBack') as any,
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
moodBoard:null as any,
|
||||
printBoard:null as any,
|
||||
colorBoard:null as any,
|
||||
sketchBoard:null as any,
|
||||
mannequin:null as any,
|
||||
toProduct:null as any,
|
||||
design:null as any,
|
||||
relight:null as any,
|
||||
poseTransfer:null as any,
|
||||
canvas:null as any,
|
||||
})
|
||||
const open = (str:any,button:any)=>{
|
||||
console.log(button)
|
||||
nextTick(()=>{
|
||||
if(dataDom[str]?.openSetData){
|
||||
dataDom[str].openSetData(button)
|
||||
}
|
||||
})
|
||||
}
|
||||
const setitemData = (arr:any)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
nextTick(()=>{
|
||||
arr.forEach((rv:any)=>{
|
||||
let arr = ['design','patternMaking3D']
|
||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
||||
dataDom[rv].openSetData()
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const unfold = ()=>{
|
||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
||||
}
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)//设置历史数据
|
||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
|
||||
let canvasData = ['canvas']
|
||||
for (let index = 0; index < canvasData.length; index++) {
|
||||
const item = canvasData[index];
|
||||
await getCanvasData(item)
|
||||
}
|
||||
await setitemData(allBoardData)
|
||||
//还有一个canvas
|
||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
||||
allBoardData.forEach((item)=>{
|
||||
let value = {
|
||||
type:item,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
if(arr.indexOf(item) != -1){
|
||||
store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
store.dispatch('setModularData',value)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const getCanvasData = (str:any)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:str,
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
store.commit("setCanvasData", {type:str,file:rv});
|
||||
resolve('')
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
}
|
||||
const historyChooseData = (data:any)=>{
|
||||
let collectionData = {
|
||||
disposeMoodboard: data.moodBoard?.moodTemplateId?[{
|
||||
id:data.moodBoard.moodTemplateId,
|
||||
imgUrl:data.moodBoard.moodTemplateUrl,
|
||||
resData:{
|
||||
name:data.moodBoard.moodTemplateName,
|
||||
}
|
||||
}]:[],
|
||||
moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
|
||||
moodboardFiles: dealViewChooseData(
|
||||
data.moodBoard?.moodBoards,"Moodboard"
|
||||
),
|
||||
printboardFiles: dealViewChooseData(
|
||||
data.printBoard,"Printboard"
|
||||
),
|
||||
generatePrintFiles: [],
|
||||
colorBoards: dealViewChooseColor(
|
||||
data.colorBoard
|
||||
),
|
||||
sketchboardFiles: dealViewChooseData(
|
||||
data.sketchBoard,"Sketchboard"
|
||||
),
|
||||
};
|
||||
if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
|
||||
store.commit("setAllBoardDataChoose", collectionData);
|
||||
// store.commit('clearShowSketchboard')
|
||||
store.commit("setShowSketchboard", data.sketchBoards);
|
||||
let likeDesignCollectionList:any = []
|
||||
if(data.design?.userLikeDetails){
|
||||
data.design?.userLikeDetails.map(
|
||||
(v: any) => {
|
||||
let data = {
|
||||
...v,
|
||||
groupDetailId: v.id,
|
||||
designItemUrl: v.designOutfitUrl,
|
||||
designItemId: v.designItemId,
|
||||
};
|
||||
return data;
|
||||
}
|
||||
);
|
||||
}
|
||||
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
||||
store.commit("setUserGroupId", data.design.userGroupId);
|
||||
if(data.toProduct){
|
||||
let value = {
|
||||
list: data.toProduct,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setToProductImage", value);
|
||||
}
|
||||
if(data.relight){
|
||||
let value = {
|
||||
list: data.relight,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setRelightList", value);
|
||||
}
|
||||
if(data.poseTransfer){
|
||||
let value = {
|
||||
list: data.poseTransfer,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setPoseTransfer", value);
|
||||
}
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseData = (data: any,str:string)=> {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
let filesList = data.map((v: any) => {
|
||||
let newData: any = {
|
||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
||||
id: v.id,
|
||||
status: "done",
|
||||
resData: v,
|
||||
type_:{
|
||||
type1:'material',
|
||||
type2:v.level1Type
|
||||
}
|
||||
};
|
||||
if (v.level1Type === "Sketchboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.categoryValue = v.level2Type;
|
||||
newData.level2Type = v.level2Type;
|
||||
}
|
||||
if (v.level1Type === "Printboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.level2Type = v.level2Type;
|
||||
newData.categoryValue = v.level2Type;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
return filesList;
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseColor = (data: any)=>{
|
||||
let colorList = data.map((v: any) => {
|
||||
let rgbValue = v.rgbValue.split(" ");
|
||||
let newData: any = {
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
tcx: v.tcx || "",
|
||||
rgbValue: {
|
||||
r: rgbValue[0],
|
||||
g: rgbValue[1],
|
||||
b: rgbValue[2],
|
||||
a: 1,
|
||||
},
|
||||
};
|
||||
if(v.gradient){
|
||||
newData.gradient = v.gradient;
|
||||
}else{
|
||||
delete newData.gradient;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
console.log(colorList)
|
||||
return colorList;
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
getCollection()
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
open,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.seriesDesign{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,321 +0,0 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
|
||||
<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
||||
<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||
<toProduct ref="toProduct"
|
||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
||||
class="toProduct"
|
||||
:isState="selectKey_ =='toProduct'"
|
||||
v-show="selectKey_ == 'toProduct'"
|
||||
></toProduct>
|
||||
<toProduct ref="relight"
|
||||
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
|
||||
class="relight"
|
||||
:isState="selectKey_ =='relight'"
|
||||
v-show="selectKey_ == 'relight'"
|
||||
></toProduct>
|
||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import design from '../../model/design/index.vue'
|
||||
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
|
||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
||||
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
|
||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
||||
import toProduct from '../../model/toProduct/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,toProduct,canvasUpload,
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
workspaceBack:inject('setBack') as any,
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
moodBoard:null as any,
|
||||
printBoard:null as any,
|
||||
colorBoard:null as any,
|
||||
sketchBoard:null as any,
|
||||
toProduct:null as any,
|
||||
design:null as any,
|
||||
relight:null as any,
|
||||
canvas:null as any,
|
||||
})
|
||||
const open = (str:any)=>{
|
||||
nextTick(()=>{
|
||||
if(dataDom[str]?.openSetData){
|
||||
dataDom[str].openSetData()
|
||||
}
|
||||
})
|
||||
}
|
||||
const setitemData = (arr:any)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
nextTick(()=>{
|
||||
arr.forEach((rv:any)=>{
|
||||
let arr = ['design','patternMaking3D']
|
||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
||||
dataDom[rv].openSetData()
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const unfold = ()=>{
|
||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
||||
}
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight']
|
||||
let canvasData = ['canvas']
|
||||
for (let index = 0; index < canvasData.length; index++) {
|
||||
const item = canvasData[index];
|
||||
await getCanvasData(item)
|
||||
}
|
||||
await setitemData(allBoardData)
|
||||
//还有一个canvas
|
||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
||||
allBoardData.forEach((item)=>{
|
||||
let value = {
|
||||
type:item,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
if(arr.indexOf(item) != -1){
|
||||
store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
store.dispatch('setModularData',value)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const getCanvasData = (str:any)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:str,
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
store.commit("setCanvasData", {type:str,file:rv});
|
||||
resolve('')
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
}
|
||||
const historyChooseData = (data:any)=>{
|
||||
let collectionData = {
|
||||
disposeMoodboard: data.moodBoard?.moodTemplateId?[{
|
||||
id:data.moodBoard.moodTemplateId,
|
||||
imgUrl:data.moodBoard.moodTemplateUrl,
|
||||
resData:{
|
||||
name:data.moodBoard.moodTemplateName,
|
||||
}
|
||||
}]:[],
|
||||
moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
|
||||
moodboardFiles: dealViewChooseData(
|
||||
data.moodBoard?.moodBoards,"Moodboard"
|
||||
),
|
||||
printboardFiles: dealViewChooseData(
|
||||
data.printBoard,"Printboard"
|
||||
),
|
||||
generatePrintFiles: [],
|
||||
colorBoards: dealViewChooseColor(
|
||||
data.colorBoard
|
||||
),
|
||||
sketchboardFiles: dealViewChooseData(
|
||||
data.sketchBoard,"Sketchboard"
|
||||
),
|
||||
};
|
||||
if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
|
||||
store.commit("setAllBoardDataChoose", collectionData);
|
||||
// store.commit('clearShowSketchboard')
|
||||
store.commit("setShowSketchboard", data.sketchBoards);
|
||||
let likeDesignCollectionList:any = []
|
||||
if(data.design?.userLikeDetails){
|
||||
data.design?.userLikeDetails.map(
|
||||
(v: any) => {
|
||||
let data = {
|
||||
...v,
|
||||
groupDetailId: v.id,
|
||||
designItemUrl: v.designOutfitUrl,
|
||||
designItemId: v.designItemId,
|
||||
};
|
||||
return data;
|
||||
}
|
||||
);
|
||||
}
|
||||
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
||||
store.commit("setUserGroupId", data.design.userGroupId);
|
||||
if(data.toProduct){
|
||||
let value = {
|
||||
list: data.toProduct,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setToProductImage", value);
|
||||
}
|
||||
if(data.relight){
|
||||
let value = {
|
||||
list: data.relight,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setRelightList", value);
|
||||
}
|
||||
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseData = (data: any,str:string)=> {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
let filesList = data.map((v: any) => {
|
||||
let newData: any = {
|
||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
||||
id: v.id,
|
||||
status: "done",
|
||||
resData: v,
|
||||
type_:{
|
||||
type1:'material',
|
||||
type2:v.level1Type
|
||||
}
|
||||
};
|
||||
if (v.level1Type === "Sketchboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.categoryValue = v.level2Type;
|
||||
newData.level2Type = v.level2Type;
|
||||
}
|
||||
if (v.level1Type === "Printboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.level2Type = v.level2Type;
|
||||
newData.categoryValue = v.level2Type;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
return filesList;
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseColor = (data: any)=>{
|
||||
let colorList = data.map((v: any) => {
|
||||
let rgbValue = v.rgbValue.split(" ");
|
||||
let newData: any = {
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
tcx: v.tcx || "",
|
||||
rgbValue: {
|
||||
r: rgbValue[0],
|
||||
g: rgbValue[1],
|
||||
b: rgbValue[2],
|
||||
a: 1,
|
||||
},
|
||||
};
|
||||
if(v.gradient){
|
||||
newData.gradient = v.gradient;
|
||||
}else{
|
||||
delete newData.gradient;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
return colorList;
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
getCollection()
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
open,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.seriesDesign{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,228 +0,0 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
|
||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
|
||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
||||
import deReconstruction from '../../model/deReconstruction/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
import mannequin from '../../model/mannequin/index.vue'
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowType:String,
|
||||
httpWorkflowType:String,
|
||||
workflowTitle:String,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
workspaceBack:inject('setBack') as any,
|
||||
})
|
||||
const dataDom:any = reactive({
|
||||
sketchBoard:null as any,
|
||||
deReconstruction:null as any,
|
||||
canvas:null as any,
|
||||
mannequin:null as any,
|
||||
})
|
||||
const open = (str:any)=>{
|
||||
nextTick(()=>{
|
||||
if(dataDom[str]?.openSetData){
|
||||
dataDom[str].openSetData(str)
|
||||
}
|
||||
})
|
||||
}
|
||||
const setitemData = (arr:any)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
nextTick(()=>{
|
||||
arr.forEach((rv:any)=>{
|
||||
if(rv == 'design' || rv == 'deReconstruction' || rv == 'canvas' || !dataDom[rv])return
|
||||
dataDom[rv].openSetData()
|
||||
})
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
}
|
||||
const unfold = ()=>{
|
||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
||||
}
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":["sketchBoard",'deReconstruction','mannequin']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
|
||||
let canvasData = ['deReconstruction','canvas']
|
||||
for (let index = 0; index < canvasData.length; index++) {
|
||||
const item = canvasData[index];
|
||||
await getCanvasData(item)
|
||||
}
|
||||
await setitemData(allBoardData)
|
||||
//还有一个canvas
|
||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
||||
allBoardData.forEach((item)=>{
|
||||
let value = {
|
||||
type:item,
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
if(arr.indexOf(item) != -1){
|
||||
store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
store.dispatch('setModularData',value)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
const getCanvasData = (str:any)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
let value = {
|
||||
module:str,
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
||||
.then((rv) => {
|
||||
store.commit("setCanvasData", {type:str,file:rv});
|
||||
resolve('')
|
||||
})
|
||||
.catch((rv) => {
|
||||
resolve(null)
|
||||
});
|
||||
})
|
||||
}
|
||||
const historyChooseData = (data:any)=>{
|
||||
let collectionData = {
|
||||
sketchboardFiles: dealViewChooseData(
|
||||
data.sketchBoard,"Sketchboard"
|
||||
),
|
||||
};
|
||||
store.commit("setAllBoardDataChoose", collectionData);
|
||||
if(data.deReconstruction){
|
||||
data.deReconstruction.url = data.deReconstruction.collageSketchUrl
|
||||
data.deReconstruction.isLike = data.deReconstruction.liked
|
||||
let value = {
|
||||
list: [data.deReconstruction],
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setDeReconstruction", value);
|
||||
}
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseData = (data: any,str:string)=> {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
let filesList = data.map((v: any) => {
|
||||
let newData: any = {
|
||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
||||
id: v.id,
|
||||
status: "done",
|
||||
resData: v,
|
||||
type_:{
|
||||
type1:'material',
|
||||
type2:v.level1Type
|
||||
}
|
||||
};
|
||||
if (v.level1Type === "Sketchboard") {
|
||||
newData.pin = v.isPin;
|
||||
newData.categoryValue = v.level2Type;
|
||||
newData.level2Type = v.level2Type;
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
return filesList;
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
getCollection()
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
open,
|
||||
unfold,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.seriesDesign{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
background: #ff6666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,269 +0,0 @@
|
||||
<template>
|
||||
<div class="workflowBox">
|
||||
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
||||
<navList ref="navList" :workflowType="workflowType" @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
|
||||
<div class="homeContent" ref="parent">
|
||||
<navListBox
|
||||
@setSelectKey=setSelectKey
|
||||
:navListData="navListData"
|
||||
:selectKey="selectKey"
|
||||
:workflowType="workflowType"
|
||||
v-model:isShowMark="isShowMark"
|
||||
></navListBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="back">
|
||||
<div class="title">
|
||||
<div v-show="navListData?.find((item:any) => item.value === selectKey_)?.name">
|
||||
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
|
||||
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
|
||||
</div>
|
||||
<div v-show="!navListData?.find((item:any) => item.value === selectKey_)?.name ">
|
||||
<i class="fi fi-rr-cloud-upload-alt"></i>
|
||||
Cloud Generation Tasks
|
||||
</div>
|
||||
</div>
|
||||
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
|
||||
</div>
|
||||
<content ref="content" @retrieve="retrieve" :selectKey_="selectKey_" @projectComplete="setBack()" :workflowType="workflowType" :workflowTitle="workflowTitle" :httpWorkflowType="httpWorkflowType"></content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
|
||||
<workspace :firstTime="true" :workflowType="workflowType" @setProject="setProject" :workflowTitle="workflowTitle" :httpWorkflowType="httpWorkflowType"></workspace>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import content from './content/index.vue'
|
||||
import workspace from './workspace.vue'
|
||||
import navList from './nav.vue'
|
||||
import navListBox from './navBox.vue'
|
||||
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
content,navList,navListBox,workspace
|
||||
},
|
||||
//props
|
||||
props:{
|
||||
workflowType:{
|
||||
type:String,
|
||||
},
|
||||
workflowTitle:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
httpWorkflowType:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
emits:['goHome'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
provide('driver__',driver__)
|
||||
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
selectKey:'',
|
||||
selectKey_:'',
|
||||
isShowMark:false,
|
||||
isUpdataPorject:false as any,
|
||||
adminData:{
|
||||
position:'',
|
||||
dom:null as any,
|
||||
parentDom:null as any,
|
||||
},
|
||||
navListData:computed(()=>{
|
||||
return store.state.Workspace.projectList
|
||||
}),
|
||||
})
|
||||
const setIsShowMark = (boolean:boolean)=>{
|
||||
data.isShowMark = boolean
|
||||
}
|
||||
provide('setIsShowMark',setIsShowMark)
|
||||
const dataTime = reactive({
|
||||
selectTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
parent:null as any,
|
||||
content:null as any,
|
||||
navList:null as any
|
||||
})
|
||||
const setBack = ()=>{
|
||||
data.selectKey = ''
|
||||
updataPage()
|
||||
}
|
||||
provide('setBack',setBack)
|
||||
const setProject = (value:any)=>{
|
||||
// data.isUpdataPorject = data
|
||||
if(value == 'set'){
|
||||
data.isUpdataPorject = true
|
||||
}else{
|
||||
data.isUpdataPorject = false
|
||||
}
|
||||
}
|
||||
const setSelectKey = async (value:any)=>{
|
||||
let {str,dom,position} = value
|
||||
data.adminData.dom = dom
|
||||
data.adminData.parentDom = value?.parentDom
|
||||
data.adminData.position = position
|
||||
data.selectKey = str
|
||||
updataPage()
|
||||
if(value.str)dataDom.content.setModule(value)
|
||||
}
|
||||
const updataPage = ()=>{
|
||||
let {dom,position} = data.adminData
|
||||
let contentDom:any = document.querySelectorAll('.workflow .content')[0]
|
||||
clearTimeout(dataTime.selectTime)
|
||||
let {top,left,width,height} = dom.getBoundingClientRect()
|
||||
let parentPosition = dataDom.parent.getBoundingClientRect()
|
||||
let parentTop = parentPosition?.top
|
||||
let parentLeft = parentPosition?.left
|
||||
if(data.selectKey_ && data.selectKey == ''){
|
||||
// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
|
||||
let y = top - parentTop + height / 2
|
||||
let x = left - parentLeft + width / 2
|
||||
if(position == 'nav'){
|
||||
x = 0
|
||||
y = dom.offsetTop + dom.offsetHeight / 2
|
||||
}
|
||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||||
gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
||||
dataTime.selectTime = setTimeout(() => {
|
||||
data.selectKey_ = data.selectKey
|
||||
}, 500);
|
||||
}else{
|
||||
data.selectKey_ = data.selectKey
|
||||
nextTick(()=>{
|
||||
// let index = data.navListData.findIndex((item:any) => item.value === str);
|
||||
let y = top - parentTop + height / 2
|
||||
let x = left - parentLeft + width / 2
|
||||
if(position == 'nav'){
|
||||
x = 0
|
||||
y = dom.offsetTop + dom.offsetHeight / 2
|
||||
}
|
||||
// dataDom.content.open({selectKey:data.selectKey_,workflowType:props.workflowType})
|
||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
||||
gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
||||
})
|
||||
}
|
||||
}
|
||||
const goHome = ()=>{
|
||||
emit("goHome");
|
||||
}
|
||||
const unfold = ()=>{
|
||||
dataDom.content.unfold()
|
||||
}
|
||||
const retrieve = (str:any)=>{
|
||||
console.log(str)
|
||||
dataDom.navList.uploadSelectKey(str)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setBack,
|
||||
setProject,
|
||||
setSelectKey,
|
||||
unfold,
|
||||
goHome,
|
||||
retrieve,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.workflowBox{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .workflow{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
padding-top: 3rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
// background: #ff6666;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding-bottom: 1rem;
|
||||
> .title{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
i{
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<div class="homeNav" :class="{active:isUnfold}">
|
||||
<div class="navList unfold" @click="setUnfold" :title="'Expand the sidebar'" :class="{active:isUnfold}">
|
||||
<!-- <i class="fi fi-rr-window-maximize"></i> -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span v-show="isUnfold">Module</span>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
<div class="navList unfold" @click="goHome">
|
||||
<i class="fi fi-sr-home"></i>
|
||||
<span v-show="isUnfold">Home</span>
|
||||
</div>
|
||||
<div class="navList" :class="{active:selectKey == 'workspace'}" @click="setNav('workspace', $event.target)">
|
||||
<i class="fi fi-rr-settings-sliders"></i>
|
||||
<span v-show="isUnfold">Settings</span>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
<div class="navList list" :class="[selectKey == item.value?'active':'',navListData.some((navListItem:any) => navListItem.value === item.value)?'exist':'',item.value]" v-for="item in navList" :key="item.value" @click="setNav(item.value, $event.target)">
|
||||
<i :class="item.icon"></i>
|
||||
<span v-show="isUnfold">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="border" style="margin-top: auto;" ></div>
|
||||
<div class="navList list exist" v-show="['seriesDesign', 'singleProductDesign', 'productDrawingDesign'].includes(workflowType)" @click="setNav('yun', $event.target)">
|
||||
<i class="fi fi-rr-cloud-upload-alt"></i>
|
||||
<span v-show="isUnfold">云生成</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,watch,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {projectList} from '@/tool/listData'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
selectKey:{type:String,default:''},
|
||||
workflowType:{type:String,default:''},
|
||||
navListData:{type:Array,default:()=>[]},
|
||||
},
|
||||
emits:['setSelectKey','unfold','goHome'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
isUnfold:false,
|
||||
navList:[] as any,
|
||||
})
|
||||
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setNav = (str:any,target:any)=>{
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:target,
|
||||
posiiton:'nav',
|
||||
}
|
||||
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
watch(()=>props.navListData,(newVal:any)=>{
|
||||
let list:any = projectList.all
|
||||
const combined = [...newVal, ...list];
|
||||
const seen = new Set();
|
||||
data.navList = combined.filter((item:any) => {
|
||||
if (seen.has(item.value)) {
|
||||
return false; // 如果value已经出现过，跳过当前对象
|
||||
} else {
|
||||
seen.add(item.value); // 如果value没有出现过，保留当前对象
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
const setUnfold = ()=>{
|
||||
data.isUnfold = !data.isUnfold
|
||||
emit("unfold");
|
||||
}
|
||||
const goHome = ()=>{
|
||||
store.commit('createProbject')
|
||||
emit("goHome");
|
||||
}
|
||||
const uploadSelectKey = (str:any)=>{
|
||||
let dom = document.querySelector(`.homeNav .${str}`)
|
||||
setNav(str,dom)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setNav,
|
||||
setUnfold,
|
||||
goHome,
|
||||
projectList,
|
||||
uploadSelectKey,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeNav{
|
||||
padding: 5rem 0rem;
|
||||
padding-bottom: 2.5rem;
|
||||
background: #f7f8fa;
|
||||
transition: all .3s;
|
||||
width: 7rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
width: 25rem;
|
||||
}
|
||||
> div{
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
margin: 0 1rem;
|
||||
&.list{
|
||||
color: #bfbfbf;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
background: #ebebeb;
|
||||
}
|
||||
&.unfold{
|
||||
&.active{
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
}
|
||||
&.list{
|
||||
&.exist{
|
||||
color: #000000;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> i,> svg{
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
> svg{
|
||||
padding: 1rem;
|
||||
}
|
||||
> span{
|
||||
font-size: 1.8rem;
|
||||
line-height: 5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.border{
|
||||
border-bottom: 1px solid #D9D9D9;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,231 +0,0 @@
|
||||
<template>
|
||||
<div class="homeNavBox">
|
||||
<div class="navList">
|
||||
<img :class="workflowType" v-if="workflowType == 'seriesDesign'" src="@/assets/images/homePage/seriesDesign.png" alt="">
|
||||
<img :class="workflowType" v-if="workflowType == 'singleProductDesign'" src="@/assets/images/homePage/singleProductDesign.png" alt="">
|
||||
<img :class="workflowType" v-if="workflowType == 'printDesign'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
|
||||
<img :class="workflowType" v-if="workflowType == 'productDrawingDesign'" src="@/assets/images/homePage/productDrawingDesign.png" alt="">
|
||||
<img :class="workflowType" v-if="workflowType == 'printingDesign3D'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
|
||||
<img :class="workflowType" v-if="workflowType == 'sketchDesign'" src="@/assets/images/homePage/sketchDesign.png" alt="">
|
||||
<div class="navListItem"
|
||||
v-for="item in navListData" :key="item.value"
|
||||
:class="[
|
||||
(item?.select || (selectObject.model.id > -1 && item.value == 'mannequin'))?'active':'',
|
||||
`item${item.task}`,
|
||||
workflowType,
|
||||
]"
|
||||
@click.stop="setNav(item.value,$event)" >
|
||||
<!-- @click.stop="setSelect(item)" -->
|
||||
<div class="background"></div>
|
||||
<div class="text">
|
||||
<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
|
||||
<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
|
||||
</div>
|
||||
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
selectKey:{type:String,default:''},
|
||||
isShowMark:{type:Boolean,default:false},
|
||||
workflowType:{type:String,default:''},
|
||||
},
|
||||
emits:['setSelectKey','setModule'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
navListData:computed(()=>store.state.Workspace.projectList),
|
||||
})
|
||||
const dataTime = reactive({
|
||||
clickTime:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
navList:null as any
|
||||
})
|
||||
const setNav = async (str:any,event:any,button:string)=>{
|
||||
clearTimeout(dataTime.clickTime)
|
||||
let data = {
|
||||
str:str == props.selectKey?'':str,
|
||||
dom:event.target,
|
||||
posiiton:'navBox',
|
||||
button,
|
||||
}
|
||||
emit("setSelectKey", data);
|
||||
// emit("update:selectKey", str);
|
||||
}
|
||||
const setSelect = (item:any)=>{
|
||||
clearTimeout(dataTime.clickTime)
|
||||
dataTime.clickTime = setTimeout(async ()=>{//防止双击和单机都执行的问题
|
||||
if (item.select) {
|
||||
let data = {
|
||||
select:false,
|
||||
value:item.value
|
||||
}
|
||||
emit('setModule',data)
|
||||
item.select = false
|
||||
}else{
|
||||
let data = {
|
||||
select:true,
|
||||
value:item.value
|
||||
}
|
||||
emit('setModule',data)
|
||||
item.select = true
|
||||
}
|
||||
|
||||
},200)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setNav,
|
||||
setSelect,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeNavBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .navList{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
img{
|
||||
&.seriesDesign{width: 98rem;height: 58rem;}
|
||||
&.singleProductDesign{width: 98rem;height: 43rem;}
|
||||
&.printDesign{width: 8rem;height: 1.3rem;}
|
||||
&.printingDesign3D{width: 8rem;height: 1.3rem;}
|
||||
&.productDrawingDesign{width: 38rem;height: 23rem;}
|
||||
&.sketchDesign{width: 38rem;height: 23rem;}
|
||||
}
|
||||
> .navListItem{
|
||||
width: 22rem;
|
||||
height: 10rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .2s;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 2rem;
|
||||
&.seriesDesign{
|
||||
&.item1-1{top: -5rem;left: -22rem;}
|
||||
&.item1-2{top: 9rem;left: -22rem;}
|
||||
&.item1-3{top: 23rem;left: -22rem;}
|
||||
&.item1-4{top: 37rem;left: -22rem;}
|
||||
&.item1-5{top: 51rem;left: -22rem;}
|
||||
&.item2-1{top: 23rem;left: 8rem;}
|
||||
&.item3-1{top: 23rem;left: 38rem;}
|
||||
&.item4-1{top: 12rem;left: 68rem;}
|
||||
&.item4-2{top: 34rem;left: 68rem;}
|
||||
&.item5-1{top: 23rem;left: 98rem;}
|
||||
}
|
||||
&.singleProductDesign{
|
||||
&.item1-1{top: -5rem;left: -22rem;}
|
||||
&.item1-2{top: 9rem;left: -22rem;}
|
||||
&.item1-3{top: 23rem;left: -22rem;}
|
||||
&.item1-4{top: 37rem;left: -22rem;}
|
||||
&.item1-5{top: 51rem;left: -22rem;}
|
||||
&.item2-1{top: 16.5rem;left: 8rem;}
|
||||
&.item3-1{top: 16.5rem;left: 38rem;}
|
||||
&.item4-1{top: 16.5rem;left: 68rem;}
|
||||
&.item5-1{top: 16.5rem;left: 98rem;}
|
||||
}
|
||||
&.printDesign,&.printingDesign3D{
|
||||
&.item1-1{top: -3rem;left: -22rem;}
|
||||
&.item2-1{top: -3rem;left: 8rem;}
|
||||
}
|
||||
&.productDrawingDesign{
|
||||
&.item1-1{top: 6.5rem;left: -22rem;}
|
||||
&.item2-1{top: -4rem;left: 8rem;}
|
||||
&.item2-2{top: 17rem;left: 8rem;}
|
||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
||||
}
|
||||
&.sketchDesign{
|
||||
&.item1-1{top: -5rem;left: -22rem;}
|
||||
&.item1-2{top: 18rem;left: -22rem;}
|
||||
&.item2-1{top: 6.5rem;left: 8rem;}
|
||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
||||
}
|
||||
.background{
|
||||
// background: #e8e8e8;
|
||||
background: #e8e8e8;
|
||||
transition: all .3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i{
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
&.active{
|
||||
box-shadow: #000 0px 0px 10px;
|
||||
border-radius: 1rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .designIcon{
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
cursor: pointer;
|
||||
box-shadow: #000 0px 0px 2px;
|
||||
border-radius: 1rem;
|
||||
> i{
|
||||
display: flex;
|
||||
padding: .5rem;
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
border: 3px solid #000;
|
||||
.background{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 3px solid #000;
|
||||
.background{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,371 +0,0 @@
|
||||
<template>
|
||||
<div class="workspace">
|
||||
<div class="workspaceBox">
|
||||
<div class="title marginBottom" style=" display:flex;align-items: center;">
|
||||
<i v-if="firstTime" @click="setBack" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>
|
||||
Project setting <div v-show="workflowTitle" style="font-size: 1.4rem;margin-top: auto;">({{ workflowTitle }})</div>
|
||||
</div>
|
||||
<div class="projectName marginBottom" v-if="show.title">
|
||||
<div class="text">Project name: <span style="color: red;">*</span></div>
|
||||
<div class="input">
|
||||
<input type="text" v-model="selectObject.name">
|
||||
<!-- <i class="fi fi-rr-edit"></i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="gender marginBottom" v-if="show.age">
|
||||
<div class="text">Role</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
|
||||
<span>Adult</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
|
||||
<span>Child</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gender marginBottom">
|
||||
<div class="text">Gender：</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
|
||||
<span>Female</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
|
||||
<span>Male</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style marginBottom" v-if="show.style">
|
||||
<div class="text">Style：</div>
|
||||
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||
</div>
|
||||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="selectObject.systemDesignerPercentage"
|
||||
:tip-formatter="formatter"
|
||||
:tooltipVisible="false"
|
||||
>
|
||||
</a-slider>
|
||||
<div class="text">
|
||||
<div class="left">
|
||||
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position marginBottom" style="display: flex; align-items: center;justify-content: space-between;" v-show="show.position">
|
||||
<div class="text">
|
||||
Category:
|
||||
</div>
|
||||
<generalMenu style="width:80%" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
||||
</div>
|
||||
<div class="complete">
|
||||
<div class="gallery_btn" @click="complete">Complete</div>
|
||||
</div>
|
||||
</div>
|
||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,watch,nextTick,onBeforeUnmount,toRefs, reactive, onMounted, inject} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
// import workspace from './model/workspace.vue'
|
||||
import router from '@/router';
|
||||
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
import { Https } from '@/tool/https';
|
||||
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
|
||||
import { id } from 'element-plus/es/locale';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {projectList} from '@/tool/listData'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
habitSetStyle,generalMenu
|
||||
},
|
||||
props:{
|
||||
workflowType:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
httpWorkflowType:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
workflowTitle:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
firstTime:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
emits:['setProject'],
|
||||
setup(props,{emit}) {
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
selectObject_:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
selectObject:{} as any,
|
||||
femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
|
||||
malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
|
||||
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
|
||||
show:{
|
||||
title:true,
|
||||
gender:false,
|
||||
style:false,
|
||||
age:false,
|
||||
systemDesigner:false,
|
||||
position:false,
|
||||
},
|
||||
systemDesigner:{
|
||||
system:0,
|
||||
designer:0,
|
||||
},
|
||||
setIsShowMark:inject('setIsShowMark') as any,
|
||||
})
|
||||
watch(()=>data.selectObject_,(newVal)=>{
|
||||
data.selectObject = JSON.parse(JSON.stringify(newVal))
|
||||
})
|
||||
const dataDom = reactive({
|
||||
habitSetStyle:null as any,
|
||||
})
|
||||
const setStyle = ()=>{
|
||||
dataDom.habitSetStyle.init(data.selectObject);
|
||||
}
|
||||
const setWorkspaceStyle = (value:any)=>{
|
||||
data.selectObject.styleName = value.name
|
||||
data.selectObject.style = value.value
|
||||
data.selectObject.styleId = value.id
|
||||
// store.commit('setProbject',data)
|
||||
}
|
||||
const setprintModel = (value:any)=>{
|
||||
data.selectObject.position = value
|
||||
}
|
||||
const formatter = (value: number)=>{
|
||||
data.systemDesigner.system = 100 - value
|
||||
data.systemDesigner.designer = value
|
||||
let num = Math.abs((value-50)*2)
|
||||
return `${num}%`;
|
||||
}
|
||||
const complete = ()=>{
|
||||
if(!data.selectObject.name){
|
||||
message.info(t('PrintboardUpload.jsContent7'))
|
||||
return
|
||||
}
|
||||
let value = {
|
||||
name:data.selectObject.name,
|
||||
process:props.httpWorkflowType,
|
||||
styleId:data.show.style?data.selectObject.styleId:null,
|
||||
id:data.selectObject.id,
|
||||
workspace:{
|
||||
sex:data.selectObject.sex,
|
||||
// sex:data.show.gender?data.selectObject.sex:null,
|
||||
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
||||
position:data.show.position?data.selectObject.position.value:'Overall',
|
||||
ageGroup:data.show.style?data.selectObject.ageGroup:null,
|
||||
// position:data.selectObject,
|
||||
} as any,
|
||||
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
|
||||
if(rv){
|
||||
data.selectObject.id = rv.id
|
||||
let model:any = {}
|
||||
let position = []
|
||||
if(data.selectObject.sex == "Female"){
|
||||
// if(rv.workspaceVO.sex == "Female"){
|
||||
model = {
|
||||
id:rv.workspaceVO.mannequinFemaleId,
|
||||
type:rv.workspaceVO.mannequinFemaleType,
|
||||
url:rv.workspaceVO.femalePresignedUrl,
|
||||
}
|
||||
position = store.state.UserHabit.FemalePosition
|
||||
}else{
|
||||
model = {
|
||||
id:rv.workspaceVO.mannequinMaleId,
|
||||
type:rv.workspaceVO.mannequinMaleType,
|
||||
url:rv.workspaceVO.malePresignedUrl,
|
||||
}
|
||||
position = store.state.UserHabit.MalePosition
|
||||
}
|
||||
// model.url = rv.workspaceVO.malePresignedUrl
|
||||
data.selectObject.model = model
|
||||
data.selectObject.positionList = position
|
||||
store.commit('setProbject',data.selectObject)
|
||||
emit('setProject','set')
|
||||
}
|
||||
})
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
|
||||
}
|
||||
const setBack = ()=>{
|
||||
let data = {
|
||||
type:'',
|
||||
httpType:'',//项目类型
|
||||
}
|
||||
store.commit('setProbject',data)
|
||||
store.commit('setProjectList',[])
|
||||
}
|
||||
onMounted(()=>{
|
||||
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
|
||||
data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
|
||||
data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
||||
data.show.age = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'sketchDesign')
|
||||
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
||||
data.show.position = (props.workflowType == 'singleProductDesign')
|
||||
|
||||
if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
|
||||
data.setIsShowMark(true)
|
||||
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
||||
(rv) => {
|
||||
data.setIsShowMark(false)
|
||||
rv.forEach((item:any) => {
|
||||
let name = item.value
|
||||
item.value = item.name
|
||||
item.name = name
|
||||
});
|
||||
data.selectObject.style = rv[0].value
|
||||
data.selectObject.styleName = rv[0].name
|
||||
data.selectObject.styleId = rv[0].id
|
||||
store.commit('setMannequinStyle',rv)
|
||||
}
|
||||
).catch(res=>{
|
||||
data.setIsShowMark(false)
|
||||
});
|
||||
}
|
||||
})
|
||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||
if(newVal == 'Male'){
|
||||
data.selectObject.positionList = data.malePosition
|
||||
}else{
|
||||
data.selectObject.positionList = data.femalePosition
|
||||
}
|
||||
data.selectObject.position = data.selectObject.positionList[0]
|
||||
})
|
||||
return{
|
||||
projectList,
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setStyle,
|
||||
setWorkspaceStyle,
|
||||
setprintModel,
|
||||
formatter,
|
||||
complete,
|
||||
openSetData,
|
||||
setBack,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.workspace{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
> .workspaceBox{
|
||||
width: 55rem;
|
||||
padding: 0 5rem;
|
||||
> .marginBottom{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
> .title{
|
||||
font-size: 2.7rem;
|
||||
> span{
|
||||
color: #999999;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
> .projectName{
|
||||
> .text{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .input{
|
||||
padding: 1rem 2rem;
|
||||
// padding: 2rem 2.7rem;
|
||||
font-size: 1.6rem;
|
||||
border-radius: 1.6rem;
|
||||
border: 2px solid #D0D0D0;
|
||||
display: flex;
|
||||
> input{
|
||||
flex: 1;
|
||||
border: none;
|
||||
}
|
||||
> i{
|
||||
display: flex;
|
||||
color: #999999;
|
||||
align-items: center;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .gender{
|
||||
display: flex;
|
||||
> .text{
|
||||
width: 8rem;
|
||||
}
|
||||
> .radio{
|
||||
display: flex;
|
||||
margin-left: 4.5rem;
|
||||
> label{
|
||||
display: flex;
|
||||
margin-right: 4rem;
|
||||
>input{
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .style{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
> .systemDesigner{
|
||||
> .text{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
> .position{
|
||||
:deep(.generalMenu_printModel){
|
||||
position: relative;
|
||||
margin: 0;
|
||||
> div,> ul{
|
||||
width: 100%;
|
||||
border-radius: 1.6rem;
|
||||
border: 2px solid #D0D0D0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .complete{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
> div{
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user