514 lines
14 KiB
Vue
514 lines
14 KiB
Vue
<template>
|
||
<div class="workspace">
|
||
<div class="workspaceBox">
|
||
<div class="title marginBottom">
|
||
<div class="titleText">{{$t('Habit.generationSetting')}}</div>
|
||
</div>
|
||
<div class="projectName marginBottom" v-if="show.title">
|
||
<div class="text">{{$t('Habit.ProjectName')}}: </div>
|
||
<div class="input">
|
||
<input type="text" v-model="selectObject.name">
|
||
</div>
|
||
</div>
|
||
<div class="gender marginBottom" v-if="show.age">
|
||
<div class="text">{{$t('Habit.Role')}}:</div>
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" :disabled="status == 'edit'" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
|
||
<span>{{$t('Habit.Adult')}}</span>
|
||
</label>
|
||
<label>
|
||
<input type="radio" :disabled="status == 'edit'" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
|
||
<span>{{$t('Habit.Child')}}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="gender marginBottom">
|
||
<div class="text">{{$t('Habit.Gender')}}:</div>
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" :disabled="status == 'edit'" name="gender" v-model="selectObject.sex" value="Female">
|
||
<span>{{$t('Habit.Female')}}</span>
|
||
</label>
|
||
<label>
|
||
<input type="radio" :disabled="status == 'edit'" name="gender" v-model="selectObject.sex" value="Male">
|
||
<span>{{$t('Habit.Male')}}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="style marginBottom" v-if="show.style">
|
||
<div class="text">{{$t('Habit.Style')}}：</div>
|
||
<div class="center">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
||
<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||
</div>
|
||
<div class="style brand marginBottom">
|
||
<div class="text">{{$t('Habit.Brand')}}:</div>
|
||
<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
||
</div>
|
||
<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
|
||
<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
|
||
<div class="text" style="font-size: 1.6rem;">
|
||
{{$t('Habit.BrandStrength')}}: ({{ `${selectObject.brandPercentage || 0}%` }})
|
||
|
||
</div>
|
||
<a-slider class="system_silder"
|
||
v-model:value="selectObject.brandPercentage"
|
||
:tip-formatter="formatterBrandDNA"
|
||
>
|
||
</a-slider>
|
||
</div>
|
||
<div class="position marginBottom" v-show="show.position" v-if="httpWorkflowType == 'SINGLE_DESIGN'">
|
||
<div class="text">
|
||
{{$t('Habit.Category')}}:
|
||
</div>
|
||
<generalMenu style="width:100%;" :ulStyle="{background: '#fff'}" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
||
</div>
|
||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
||
<div class="text" style="margin-bottom: 1rem;">
|
||
{{$t('Habit.GenerationParameters')}}:
|
||
</div>
|
||
<a-slider class="system_silder"
|
||
v-model:value="selectObject.systemDesignerPercentage"
|
||
:tip-formatter="formatter"
|
||
:tooltipVisible="false"
|
||
>
|
||
</a-slider>
|
||
<div class="text" style="margin-top: 1rem; font-size: 1.6rem;">
|
||
<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="complete">
|
||
<div class="gallery_btn" style="padding: 0rem 2.2rem; line-height: 4.5rem;font-weight: 500;" @click="complete">{{$t('HomeView.Start')}}</div>
|
||
</div>
|
||
</div>
|
||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
||
<setBrandDNA ref="brandDNA" @setWorkspaceBrandDNA="setWorkspaceBrandDNA"></setBrandDNA>
|
||
</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/modules/habitSetStyle.vue";
|
||
import setBrandDNA from "@/component/modules/setBrandDNA.vue";
|
||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||
import { Https } from '@/tool/https';
|
||
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
|
||
import { id } from 'element-plus/es/locale';
|
||
import { message } from 'ant-design-vue';
|
||
import {projectList} from '@/tool/listData'
|
||
import { formatTime } from "@/tool/util";
|
||
export default defineComponent({
|
||
components:{
|
||
habitSetStyle,generalMenu,setBrandDNA
|
||
},
|
||
props:{
|
||
workflowType:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
httpWorkflowType:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
workflowTitle:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
firstTime:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
status:{
|
||
type:String,
|
||
default:''
|
||
}
|
||
},
|
||
emits:['setProject'],
|
||
setup(props,{emit}) {
|
||
const { t } = useI18n();
|
||
const store = useStore();
|
||
const data = reactive({
|
||
selectObject_:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||
selectObject:{} as any,
|
||
femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
|
||
malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
|
||
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//
|
||
show:{
|
||
title:true,
|
||
gender:true,
|
||
style:true,
|
||
age:true,
|
||
systemDesigner:true,
|
||
position:true,
|
||
},
|
||
systemDesigner:{
|
||
system:0,
|
||
designer:0,
|
||
},
|
||
setIsShowMark:inject('setIsShowMark') as any,
|
||
})
|
||
// watch(()=>data.selectObject_,(newVal)=>{
|
||
// data.selectObject = JSON.parse(JSON.stringify(newVal))
|
||
// })
|
||
const init = (storeData:any)=>{
|
||
data.selectObject = JSON.parse(JSON.stringify(storeData))
|
||
}
|
||
const dataDom = reactive({
|
||
habitSetStyle:null as any,
|
||
brandDNA:null as any,
|
||
})
|
||
const setStyle = ()=>{
|
||
dataDom.habitSetStyle.init(data.selectObject);
|
||
}
|
||
const setBrandDNA = ()=>{
|
||
dataDom.brandDNA.init(data.selectObject);
|
||
}
|
||
const setWorkspaceStyle = (value:any)=>{
|
||
data.selectObject.styleName = value.name
|
||
data.selectObject.style = value.value
|
||
data.selectObject.styleId = value.id
|
||
// store.commit('setProbject',data)
|
||
}
|
||
const setWorkspaceBrandDNA = (value:any)=>{
|
||
data.selectObject.userBrandDnaName = value.name
|
||
data.selectObject.userBrandDna = value.id
|
||
data.selectObject.userBrandDnaImg = value.img
|
||
}
|
||
const setprintModel = (value:any)=>{
|
||
data.selectObject.position = value
|
||
}
|
||
const formatter = (value: number)=>{
|
||
data.systemDesigner.system = 100 - value
|
||
data.systemDesigner.designer = value
|
||
let num = Math.abs((value-50)*2)
|
||
return `${num}%`;
|
||
}
|
||
const formatterBrandDNA = (value: number)=>{
|
||
return `${value}%`;
|
||
}
|
||
const complete = ()=>{
|
||
// if(!data.selectObject.name){
|
||
// message.info(t('PrintboardUpload.jsContent7'))
|
||
// return
|
||
// }
|
||
console.log(data.selectObject)
|
||
let value = {
|
||
name:data.selectObject.name ? data.selectObject.name : formatTime(new Date().getTime() / 1000, 'YYYY-MM-DD hh:mm:ss'),
|
||
process:props.httpWorkflowType,
|
||
styleId:data.show.style?data.selectObject.styleId:null,
|
||
id:data.selectObject.id == -1?'':data.selectObject.id,
|
||
workspace:{
|
||
id:data.selectObject?.workspaceId == -1?'':data.selectObject?.workspaceId,
|
||
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,
|
||
userBrandDna:data.selectObject.userBrandDna,
|
||
brandPercentage:data.selectObject.brandPercentage,
|
||
// position:data.selectObject,
|
||
} as any,
|
||
|
||
}
|
||
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate,value).then((rv)=>{
|
||
if(rv){
|
||
data.selectObject.id = rv.id
|
||
|
||
let storeData = {
|
||
name:rv.name,
|
||
id:rv.id,
|
||
// type:rv.process == 'SERIES_DESIGN'?'seriesDesign':'singleProductDesign',
|
||
// httpType:rv.process,//项目类型
|
||
ageGroup:rv.workspaceVO?.ageGroup,
|
||
style:rv.workspaceVO?.style,
|
||
styleId:rv.workspaceVO?.styleId,
|
||
styleName:rv.workspaceVO?.styleName,
|
||
sex:rv.workspaceVO?.sex,
|
||
userBrandDnaImg:rv.workspaceVO?.userBrandDnaImg,
|
||
userBrandDnaName:rv.workspaceVO?.userBrandDnaName,
|
||
brandPercentage:rv.workspaceVO?.brandPercentage,
|
||
userBrandDna:rv.workspaceVO?.userBrandDna,
|
||
systemDesignerPercentage:rv.workspaceVO?.systemDesignerPercentage,
|
||
position:{
|
||
label:rv.workspaceVO?.positionEnum?.value,
|
||
value:rv.workspaceVO?.positionEnum?.name
|
||
},
|
||
workspaceId:rv.workspaceVO?.id,
|
||
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:[]
|
||
}
|
||
if(rv.process){
|
||
storeData.type = rv.process == 'SERIES_DESIGN'?'seriesDesign':'singleProductDesign'
|
||
storeData.httpType = rv.process
|
||
}
|
||
let position = []
|
||
if(storeData.sex == "Female"){
|
||
position = store.state.UserHabit.FemalePosition
|
||
}else{
|
||
position = store.state.UserHabit.MalePosition
|
||
}
|
||
// storeData.model = model
|
||
data.selectObject.positionList = position
|
||
storeData.positionList = position
|
||
store.commit('setProbject',storeData)
|
||
emit('setProject',data.selectObject)
|
||
}
|
||
})
|
||
}
|
||
const openSetData = ()=>{
|
||
|
||
}
|
||
onMounted(()=>{
|
||
if(props.status != 'edit'){
|
||
store.commit('createProbject')
|
||
}
|
||
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
|
||
data.selectObject.style = store.state.UserHabit?.mannequinStyle?.[0]?.value
|
||
data.selectObject.styleName = store.state.UserHabit?.mannequinStyle?.[0]?.name
|
||
data.selectObject.styleId = store.state.UserHabit?.mannequinStyle?.[0]?.id
|
||
})
|
||
onBeforeUnmount(()=>{
|
||
})
|
||
watch(()=>data.selectObject.sex,(newVal)=>{
|
||
if(newVal == 'Male'){
|
||
data.selectObject.positionList = data.malePosition
|
||
}else{
|
||
data.selectObject.positionList = data.femalePosition
|
||
}
|
||
data.selectObject.position = data.selectObject.positionList[0]
|
||
})
|
||
return{
|
||
projectList,
|
||
...toRefs(dataDom),
|
||
...toRefs(data),
|
||
init,
|
||
setStyle,
|
||
setBrandDNA,
|
||
setWorkspaceStyle,
|
||
setWorkspaceBrandDNA,
|
||
setprintModel,
|
||
formatter,
|
||
formatterBrandDNA,
|
||
complete,
|
||
openSetData,
|
||
}
|
||
},
|
||
|
||
provide() {
|
||
return {
|
||
}
|
||
},
|
||
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.workspace{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
font-size: 1.8rem;
|
||
padding: 1.2rem;
|
||
> .workspaceBox{
|
||
width: 52rem;
|
||
height: 100%;
|
||
padding: 0 5rem;
|
||
// width: 100%;
|
||
padding: 0;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
// align-content: flex-start;
|
||
> div{
|
||
// padding: 0 5rem;
|
||
}
|
||
> .title{
|
||
display: flex;
|
||
font-weight: 500;
|
||
align-items: flex-end;
|
||
// height: 2.4rem;
|
||
> div{
|
||
font-size: 2.4rem;
|
||
margin-right: 1.2rem;
|
||
}
|
||
> span{
|
||
font-size: 1.4rem;
|
||
color: #999999;
|
||
}
|
||
}
|
||
> .marginBottom{
|
||
margin-bottom: 2rem;
|
||
// width: 44%;
|
||
}
|
||
> .brand{
|
||
> .text{
|
||
> img{
|
||
width: 10rem;
|
||
height: 6rem;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
> .brandImg{
|
||
width: 10rem;
|
||
height: 10rem;
|
||
margin: 1rem 0;
|
||
> img{
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
> .title{
|
||
font-size: 2.7rem;
|
||
> span{
|
||
color: #999999;
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
> .projectName{
|
||
display: flex;
|
||
flex-direction: column;
|
||
> .text{
|
||
margin-right: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
> .input{
|
||
// flex: 1;
|
||
width: 100%;
|
||
padding: calc(1.7rem - 2px * 2) 2.7rem;
|
||
// padding: 2rem 2.7rem;
|
||
font-size: 1.8rem;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.text{
|
||
font-size: 1.8rem;
|
||
font-weight: 500;
|
||
}
|
||
> .gender{
|
||
display: flex;
|
||
align-items: center;
|
||
> .text{
|
||
// width: 8rem;
|
||
}
|
||
> .radio{
|
||
display: flex;
|
||
margin-left: 4.2rem;
|
||
> label{
|
||
display: flex;
|
||
margin-right: 4rem;
|
||
>input{
|
||
margin-right: 1.5rem;
|
||
transform: scale(1.2);
|
||
}
|
||
> span{
|
||
font-weight: 500;
|
||
font-size: 1.6rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
> .style{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.gallery_btn{
|
||
line-height: 3.6rem;
|
||
font-size: 1.4rem;
|
||
font-weight: 500;
|
||
border-radius: .8rem;
|
||
}
|
||
> .center{
|
||
margin-right: auto;
|
||
margin-left: 3rem;
|
||
min-width: 10rem;
|
||
font-size: 1.4rem;
|
||
border-radius: .8rem;
|
||
line-height: 3.6rem;
|
||
background-color: #ebebeb;
|
||
text-align: center;
|
||
}
|
||
}
|
||
> .systemDesigner{
|
||
> .text{
|
||
margin-right: 1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
> .brandDNAStrenght{
|
||
display: flex;
|
||
align-items: center;
|
||
> .text{
|
||
margin-right: 3rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
> .system_silder{
|
||
flex: 1;
|
||
}
|
||
}
|
||
> .position{
|
||
display: flex;
|
||
flex-direction: column;
|
||
> .text{
|
||
margin-bottom: 1rem;
|
||
}
|
||
:deep(.generalMenu_printModel){
|
||
position: relative;
|
||
margin: 0;
|
||
height: 6rem;
|
||
font-weight: 500;
|
||
> div,> ul{
|
||
width: 100%;
|
||
border-radius: 1.6rem;
|
||
border: 2px solid #D0D0D0;
|
||
}
|
||
}
|
||
}
|
||
> .complete{
|
||
width: 100%;
|
||
margin-top: auto;
|
||
text-align: right;
|
||
> div{
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |