页面调整

2025-07-19 14:04:48 +08:00
parent 22ee9c6cf1
commit 4b694236ee
161 changed files with 2934 additions and 3979 deletions
--- a/src/component/home/tools/deReconstruction/canvas/index.vue
+++ b/src/component/home/tools/deReconstruction/canvas/index.vue
@@ -3,12 +3,19 @@
 		<div class="canvasBox" ref="canvasBox">
 			<editCanvas v-if="canvasLoad" ref="editCanvas"
 			 :config="canvasConfig"
-			:clothingImageUrl="modelUrl" 
+			:clothingImageUrl="changeImageUrl" 
 			@changeCanvas="changeCanvas"
 			:clothing-image-opts="{
 				imageMode:'contains',
 			}"
-			></editCanvas>
+			>
+				<template #customTools="{ toolButtonProps }">
+					<div class="custom-tool-btn" :class="{active:isHiddenModel}" @click="setHiddenmodel()">
+						<i class="fi fi-rr-eye"></i>
+						<div class="tool-tooltip">Hidden model</div>
+					</div>
+				</template>
+			</editCanvas>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
@@ -24,12 +31,26 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import canvasGeneral from "@/tool/canvasGeneralCopy";
 import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
-import defaultModel from "@/assets/images/homePage/defaultModel.png"
+import FemaleAdultModel from "@/assets/images/homePage/FemaleAdultModel.png"
+import FemaleChildModel from "@/assets/images/homePage/FemaleChildModel.png"
+import MaleAdultModel from "@/assets/images/homePage/MaleAdultModel.png"
+import MaleChildModel from "@/assets/images/homePage/MaleChildModel.png"

 export default defineComponent({
    components: {
 		editCanvas,
    },
+	props:{
+		selectSexAge:{
+			type:Object,
+			default:()=>{
+				return {
+					sex:'',
+					age:'',
+				}
+			}
+		}
+	},
 	emits:['setGenerateImg','setCanvasJSON'],
    setup(props,{emit}) {
 		const { t } = useI18n();
@@ -40,10 +61,11 @@ export default defineComponent({
 		const createProbject = inject('createProbject',()=>{})
 		const data = reactive({
 			canvasLoad:false,
+			isHiddenModel:true,
 			canvasConfig:{},
-			modelUrl:'',
 			probjects:computed(()=>store.state.Workspace.probjects),
 			undoStack:0,
+			changeImageUrl:'',
 		})
 		const dataDom = reactive({
 			editCanvas:null,
@@ -52,19 +74,31 @@ export default defineComponent({
 		const openSetData = ()=>{
 			// dataDom.canvasContent.openSetData()
 		}
-		const addImage = async (value)=>{
-			if(!data?.probjects?.id){
-				await createProbject()
+
+		const setFixedImg = ()=>{
+			let sex = props.selectSexAge.value
+			let age = props.selectSexAge.age
+			let changeImageUrl = ''
+			if(sex == 'Male' && age == 'Adult'){
+				changeImageUrl = MaleAdultModel
+			}else if(sex == 'Male' && age == 'Child'){
+				changeImageUrl = MaleChildModel
+			}else if(sex == 'Female' && age == 'Adult'){
+				changeImageUrl = FemaleAdultModel
+			}else if(sex == 'Female' && age == 'Child'){
+				changeImageUrl = FemaleChildModel
 			}
-			// dataDom.editCanvas.addImageToLayer(value.imgUrl)
-			dataDom.editCanvas.addImageToLayer(value.url)
+			changeImageUrl = new URL(changeImageUrl, import.meta.url).href
+			return changeImageUrl
 		}
-		const addBottomImage = (value)=>{
-			dataDom.editCanvas.changeFixedImage(value)
+		const changeFixedImage = async ()=>{
+			await nextTick()
+			data.changeImageUrl = setFixedImg()
+			dataDom.editCanvas.changeFixedImage(data.changeImageUrl, {
+				imageMode: "contains", // 设置底图包含在画布内
+			});
 		}
 		const getData = async ()=>{
-			console.log(dataDom.editCanvas.getCanvasManager().commandManager)
-			// if(dataDom.editCanvas.getState())
 			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv)=>{
 				emit('setGenerateImg',rv)
 			})
@@ -75,7 +109,6 @@ export default defineComponent({
 		const setCanvas = (url)=>{
 			return new Promise((res,rev)=>{
 				let img = new Image()
-				console.log(url)
 				img.onload = ()=>{
 					let wH = [1,1]
 					let domHeight = dataDom.canvasBox.offsetHeight - 200
@@ -99,16 +132,26 @@ export default defineComponent({
 				emit('setCanvasJSON',getCanvasJSON())
 			},5000)
 		}
+		const setHiddenmodel = ()=>{
+			data.isHiddenModel = !data.isHiddenModel
+			let index = dataDom.editCanvas.layers.findIndex((item)=>item.type == "fixed")
+			let layerId = dataDom.editCanvas.layers[index].id
+			let canvasManager = dataDom.editCanvas.getCanvasManager()
+			canvasManager?.layerManager?.toggleLayerVisibility(layerId);
+		}
+		const addImage = (url)=>{
+			dataDom.editCanvas.addImageToLayer(url.url,{imageMode:'contains'})
+		}
        onMounted(() => {
 			nextTick(()=>{
-				let url = new URL(defaultModel, import.meta.url).href
-				data.modelUrl = url
-				setCanvas(url).then(()=>{
+				data.changeImageUrl = setFixedImg()
+				setCanvas(data.changeImageUrl).then(()=>{
 				})
 			})
 		});
 		onBeforeUnmount(()=>{
 			data.canvasLoad = false
+			data.isHiddenModel = true
 			// canvasGeneral.canvasClear()
 		})
        return {
@@ -116,10 +159,12 @@ export default defineComponent({
 			...toRefs(dataDom),
 			isShowMark,
 			openSetData,
-			addImage,
 			getData,
 			getCanvasJSON,
 			changeCanvas,
+			changeFixedImage,
+			setHiddenmodel,
+			addImage,
        };
    },
    data(prop) {
@@ -150,5 +195,65 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 	}
+	.custom-tool-btn {
+		position: relative;
+		width: 36px;
+		height: 36px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 16px;
+		color: #333;
+		transition: all 0.2s ease;
+		i{
+			font-size: 3rem;
+			display: flex;
+		}
+		&.active{
+			background-color: #e6f7ff;
+			color: #1890ff;
+		}
+	}
+	.custom-tool-btn:hover {
+		background-color: #f0f0f0;
+		&.active{
+			background-color: #e6f7ff;
+			color: #1890ff;
+		}
+	}
+	.custom-tool-btn:hover .tool-tooltip {
+		display: block;
+	}
+
+	.tool-tooltip {
+		display: none;
+		position: absolute;
+		left: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		background-color: rgba(0, 0, 0, 0.7);
+		color: white;
+		padding: 4px 8px;
+		border-radius: 4px;
+		margin-left: 8px;
+		white-space: nowrap;
+		font-size: 12px;
+		z-index: 10;
+	}
+
+	.tool-tooltip:before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		right: 100%;
+		margin-top: -5px;
+		border-width: 5px;
+		border-style: solid;
+		border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
+	}
 }
 </style>
--- a/src/component/home/tools/deReconstruction/index.vue
+++ b/src/component/home/tools/deReconstruction/index.vue
@@ -17,11 +17,11 @@
 						<div class="generalModel_state_item smail" style="margin-right: 0">
 							<a-select
 								ref="select"
-								v-model:value="sex"
+								v-model:value="sexId"
 								:options="sexList"
 								size="large"
-								:fieldNames="{ label: 'name', value: 'value' }"
-								style="width:10rem"
+								:fieldNames="{ label: 'name', value: 'id' }"
+								style="width:13rem"
 								@change="sexChange"
 							>
 								<template #suffixIcon
@@ -37,7 +37,7 @@
 			</selectList>
 		</div>
 		<div class="canvas itemBox">
-			<canvasBox @setGenerateImg="setGenerateImg" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
+			<canvasBox @setGenerateImg="setGenerateImg" :selectSexAge="selectSexAge" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
 			<!-- <canvasUpload :config="ceditorConfig" clothingImageUrl="https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250608%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250608T161025Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a4374c0954d11c2490ef3b86a1924cf6d423ed8ac56023b3c3ccabcdf0672620"></canvasUpload> -->
 		</div>
 		<div class="finished itemBox">
@@ -48,7 +48,7 @@
 			</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>
+				<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSetSketchCategory="true" :isSpread="false"></sketchCategory>
 			</div>
 			<div class="btnBottom" @click="getCanvasData">
 				<div class="gallery_btn">{{ $t('DeReconstruction.Download') }}</div>
@@ -61,6 +61,7 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
+import { downloadIamge,getMinioUrl } from "@/tool/util";
 import { useI18n } from 'vue-i18n'
 import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
@@ -76,37 +77,49 @@ export default defineComponent({
 	emits:[],
 	setup(props,{emit}) {
 		const store = useStore();
+		const {t} = useI18n()
 		const data = reactive({
-			sketchCatecoryList:computed(()=>{
-				return store.state.Workspace.probjects.positionList
-			}),
+			sketchCatecoryList:[],
 			segmentationType:'product',
 			segmentationTypeList:[{value:'product',name:'product'},{value:'sketch',name:'sketch'}],
 			generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			sexList:[
+				
+			],
+			// sexList:computed(()=>store.state.UserHabit.sex.value),
+			femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
+			malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
+			sex:'Male',
+			sexId:1,
 			ceditorConfig:{
 				width: 800,
 				height: 600,
 				backgroundColor: "#f8f8f8",
 			},
 			defaultModel:'',
+			selectSexAge:{},
 		})
+		const createProbject:any = inject('createProbject',()=>{}) as any
 		const setIsShowMark:any = inject('setIsShowMark')
 		const dataDom = reactive({
 			canvasBox:null as any,
 		})
-		const selectImgItem = (data:any)=>{
-			console.log(data)
+		const selectImgItem = async (value:any)=>{
 			// getSegmentation(data)
-			getSegmentation(data)
+			if(!data.selectObject?.id)await createProbject()
+			getSegmentation(value)

 		}
 		const canvasAddImg = (list:any)=>{
+			console.log(list)
 			list.segmentedImages.forEach((url:any) => {
 				list.imgUrl = url
 				dataDom.canvasBox.addImage({url})
 			});
 		}
 		const getSegmentation = (value:any)=>{
+			console.log(value)
 			let segmentationType = ''
 			if(value.designType == "Library"){
 				segmentationType = 'sketch'
@@ -191,7 +204,13 @@ export default defineComponent({
 		}
 		const setCanvasJSON = (canvasJSON)=>{
 			if(!canvasJSON)return
-			let blob = new Blob([canvasJSON], { type: "application/json" });
+			let canvasData = JSON.parse(canvasJSON)
+			console.log(canvasData)
+			canvasData.canvas.objects.forEach((objectsItem:any) => {
+				if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
+				
+			});
+			let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 			let formData = new FormData();
 			formData.append("file", blob, "data.json");
 			formData.append("module", "deReconstruction");
@@ -201,7 +220,6 @@ export default defineComponent({
 			};
 			Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
 				(rv) => {
-					console.log(rv)
 				}
 			);
 		}
@@ -209,9 +227,39 @@ export default defineComponent({
 			dataDom.canvasBox.setCanvas(str)
 		}
 		const getCanvasData = ()=>{
-			let data = dataDom.canvasBox.getCanvasData()
-			return data
+			downloadIamge(data.generateImg[0].url,'downloadIamge')
 		}
+		const sexChange = ()=>{
+			data.selectSexAge = data.sexList.filter((item)=>item.id == data.sexId)[0]
+			store.commit('setProbject',{sex:data.selectSexAge.value})
+			if(data.selectSexAge.value == 'Male'){
+				data.sketchCatecoryList = data.malePosition
+			}else{
+				data.sketchCatecoryList = data.femalePosition
+			}
+			if(dataDom.canvasBox?.canvasLoad)dataDom.canvasBox.changeFixedImage()
+		}
+		onMounted(()=>{
+			let sexList = store.state.UserHabit.sex.value
+			let id = 0
+			data.sexList = []
+			sexList.forEach((item:any,index) => {
+				let obj = {
+					age:'Adult',
+					name:item.name,
+					value:item.value,
+					id:index + 1,
+				} as any
+				id = index+1;
+				data.sexList.push(obj)
+			});
+			data.sexList.push({age:'Child',name:t('DeReconstruction.Girls'),value:'Female',id:id+=1})
+			data.sexList.push({age:'Child',name:t('DeReconstruction.Boys'),value:'Male',id:id+=1})
+			data.sex = data.sexList[0].value
+			data.selectSexAge = data.sexList[0]
+			data.sexId = 1
+			sexChange()
+		})
 		return{
 			...toRefs(dataDom),
 			...toRefs(data),
@@ -223,6 +271,7 @@ export default defineComponent({
 			getCanvasData,
 			setCanvas,
 			setCanvasJSON,
+			sexChange,
 		}
 	},
 	provide() {