aida_front/src/component/home/newProject/workspace.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" name="gender" v-model="selectObject.sex" value="Female">
						<span>{{$t('Habit.Female')}}</span>
					</label>
					<label>
						<input type="radio" 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(sourceType)">{{ sourceType == 'edit' ? $t('HomeView.Save') : $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'
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:''
		},
		sourceType:{
			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)=>{
			// if(props.status == 'edit'){
				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 = (sourceType)=>{
			// 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 == -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){
					if((sourceType == 'edit' && data.selectObject.id == rv.id) || sourceType != 'edit'){
						store.state.Workspace.cachedRoutes = [];
						store.commit('setProjectPath','')
					}
					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 = {
					name: '',
					id: '',
					type: '',
					httpType: '',
					styleName: '', //项目风格
					styleId: null, //项目风格
					style: '',
					sex: 'Female',
					ageGroup: 'Adult', //年龄组
					positionList: [],
					position: {}, //衣服位置
					userBrandDna: '', //用户品牌
					userBrandDnaImg: '', //用户品牌图片
					userBrandDnaName: '', //用户品牌名字
					workspaceId: -1, //worspaceId
					publishData: {
					id: '',
					portfolioDes: '',
					portfolioName: '',
					tagsDTO: []
					}, //发布的作品数据
					systemDesignerPercentage: 30,
					model: [] //模特
				}
			}else{
				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) 1rem;
					// 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>