aida_front/src/component/home/newProject/workspace.vue

<template>
    <div class="workspace">
		<div class="workspaceBox">
			<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">
				</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="style marginBottom brand">
				<div class="text">Bran DNA</div>
				<div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg"></div>
				<!-- <div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg">{{ selectObject.userBrandDnaName }}</div> -->
				<div class="gallery_btn" style="line-height: 5rem;" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
			</div>
			<div class="systemDesigner marginBottom" v-if="selectObject.userBrandDna">
				<a-slider class="system_silder"
                    v-model:value="selectObject.brandPercentage"
					:tip-formatter="formatterBrandDNA"
					:tooltipVisible="false"
				>
                </a-slider>
                <div class="text">
                    <div class="left">
						Bran DNA<span>({{systemBrandDNA.system}}%)</span>
					</div>
                    <div class="right">
						System<span>({{systemBrandDNA.brandDNA}}%)</span>
					</div>
                </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" v-if="httpWorkflowType == 'SINGLE_DESIGN'">
				<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>
		<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
		}
	},
	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,
			},
			systemBrandDNA:{
				system:0,
				brandDNA: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)=>{
			data.systemBrandDNA.system = 100 - value
			data.systemBrandDNA.brandDNA = 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,
					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 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',data.selectObject)
				}
			})
		}
		const openSetData = ()=>{

		}
		onMounted(()=>{
			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: 55rem;
			padding: 0 5rem;
			width: 100%;
			padding: 0;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			// align-content: flex-start;
			> .marginBottom{
				margin-bottom: 3rem;
				// width: 44%;
			}
			> .brand{
				> .text{
					> img{
						width: 10rem;
						height: 6rem;
						object-fit: contain;
					}
				}
			}
			> .title{
				font-size: 2.7rem;
				> span{
					color: #999999;
					font-size: 1.4rem;
				}
			}
			> .projectName{
				display: flex;
				justify-content: space-between;
				align-items: center;
				> .text{
					margin-right: 1rem;
				}
				> .input{
					// flex: 1;
					width: 80%;
					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;
				align-items: center;
				> .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{
					margin-right: 1rem;
					display: flex;
					justify-content: space-between;
				}
			}
			> .position{
				> .text{
					margin-right: 1rem;
				}
				: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>