接入画布

2025-06-09 10:25:54 +08:00
parent 87a08f5f8f
commit c266967f16
157 changed files with 43833 additions and 1571 deletions
--- a/src/component/home/batchGeneration/createCloud.vue
+++ b/src/component/home/batchGeneration/createCloud.vue
@@ -38,6 +38,26 @@
 					@change="changeBuildType"
 				></a-select>
 			</div>
+			<div class="admin_state_item">
+				<span>Project <span v-show="buildType == 'SERIES_DESIGN' || buildType == 'SINGLE_DESIGN'">*</span></span>
+				<a-select
+					v-model:value="projectData"
+					show-search
+					allowClear
+					:show-arrow="false"
+						:default-active-first-option="false"
+					:not-found-content="null"
+					:filter-option="false"
+					style="width: 16rem"
+					placeholder="Please select"
+					:options="objectList"
+					@search="getHistoryProjectList"
+				>
+				<template #option="{ value: val, label, icon,updateTime }">
+					<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
+				</template>
+				</a-select>
+			</div>
 			<div class="admin_state_item" v-show="buildType">
 				<span>Quantity <span>*</span></span>
 				<input
@@ -49,24 +69,24 @@
 				/>
 			</div>
 			<!-- toProductimg -->
-			 <div v-show="buildType == 'toProductImage'" class="admin_state_item ">
+			 <div v-show="buildType == 'TO_PRODUCT_IMAGE'" 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"
+						range
 						:step="5"
 						
 					>
 					</a-slider>
-					<input type="number" readonly v-model="similarity">
+					<!-- <input type="number" readonly v-model="similarity"> -->
 				</div>
 			</div>
-			 <div v-show="buildType == 'relight'" class="admin_state_item ">
+			 <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 ">
+			<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"
@@ -81,7 +101,7 @@
 					<input type="number" readonly v-model="brightenValue">
 				</div>
 			</div>
-			<div v-show="buildType == 'toProductImage' || buildType == 'relight'" class="admin_state_item">
+			<div v-show="buildType == 'TO_PRODUCT_IMAGE' || buildType == 'relight'" class="admin_state_item">
 				<span>Keyword</span>
 				<input
 					v-model="generateText"
@@ -91,12 +111,55 @@
 				/>
 			</div>
 			
-			<div class="selectImgList generalScroll" v-mousewheel v-show="exhibitionImgList.length>0">
+			<!-- <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> -->
+			<div class="productImg_content_item_imgBox generalScroll upload_item" v-if="buildType && buildType != 'SERIES_DESIGN' && buildType != 'SINGLE_DESIGN'" v-mousewheel>
+				<div class="content_item_imgBox_itemImg" 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="imgBox"
+						v-show="file?.status === 'done'"
+						@click="()=>file.isChecked = !file.isChecked"
+					>
+						<img :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
+						<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
+					</div>
+				</div>
+				<div class="upload_file_item upload_component">
+				<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
+					<a-upload
+						:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
+						list-type="picture-card"
+						:capture="null"
+						:headers="{ Authorization: getCookie('token') }"
+						:before-upload="beforeUpload"
+						:data="{
+							projectId:2061,
+						}"
+						v-model:file-list="fileList"
+						:multiple="true"
+						:maxCount="8"
+						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 class="admin_state_item" style="width: 100%;">
 				<span style="margin: 0;">Generation time：19min</span>
 			</div> -->
@@ -119,11 +182,13 @@
 	</div>
 </template>
 <script>
-import { defineComponent, computed, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, computed, reactive, watch, onMounted, h, nextTick, toRefs } from "vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
+import { getCookie,setCookie } from "@/tool/cookie";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { formatTime,isEmail } from "@/tool/util";
+import { getUploadUrl,isMoible } from "@/tool/util";
 import dayjs, { Dayjs } from 'dayjs';
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
@@ -150,10 +215,11 @@ export default defineComponent({
 			numberOfImages:'',
 			credits:0,
 			exhibitionImgList:[],//选择的图片
-			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			projectData:null,//批量id
+			objectList:[],
 			//toProduct
 			generateText:'',//输入的内容
-			similarity:30,
+			similarity:[30,60],
 			brightenValue:1,//亮度
 			relightDirection:'Right Light',//打光方向
 			relightDirectionList:[
@@ -170,27 +236,47 @@ export default defineComponent({
 					value:'Bottom Light',
 					label:useI18n().t('ProductImg.BottomLight')
 				}
-			]
+			],
+			fileList:[],
 		})
-		let init = ()=>{
+		let init = (projectData,buildType)=>{
 			operations.operationsModal = true
-
+			if(projectData?.id)operationsData.projectData = {label:projectData.name,value:projectData.id}
+			
+			if(buildType.value)operationsData.buildType = buildType
 		}
 		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
-			}
+			// operationsData.exhibitionImgList = []
+			operationsData.projectData = null
 			props.cloudList.forEach((item)=>{
 				if(item.value == operationsData.buildType){
 					operationsData.credits = item.consumption
 				}
 			})
+			getHistoryProjectList()
+		}
+		const getGenerateCloudImgList = ()=>{
+			let list = []
+			if(operationsData.buildType == 'SINGLE_DESIGN'|| operationsData.buildType == 'SERIES_DESIGN')return list
+			let selectList = operationsData.fileList.filter((item)=>item.isChecked)
+			selectList.forEach((item)=>{
+				let obj = {
+					
+				}
+				if(operationsData.buildType == 'POSE_TRANSFER'){
+					obj = {
+						poseId:1,
+						productImage:getMinioUrl(item.imgUrl)
+					}
+				}else{
+					obj = {
+						elementId:item.id,
+						elementType:item.type
+					}
+				}
+				list.push(obj)
+			})
+			return list
 		}
 		let getPorductImg = ()=>{
 			let modularData = store.state.UploadFilesModule.modularData
@@ -223,8 +309,9 @@ export default defineComponent({
 			} 
 			return list
 		}
-		const getImageStrength = () => {
-			let imageStrength = operationsData.similarity == 100? 95 :operationsData.similarity
+		const getImageStrength = (num) => {
+			let imageStrength = num == 100? 95 :num
+			console.log(num)
 			return imageStrength;
 		};
 		const getPoseTransformData = ()=>{
@@ -240,23 +327,34 @@ export default defineComponent({
 			return list
 		}
 		let setAddData = ()=>{
+			let buildTypeCorresponding = {
+				SINGLE_DESIGN:"design",
+				SERIES_DESIGN:"design",
+				TO_PRODUCT_IMAGE:"toProductImage",
+				RELIGHT:"relight",
+				POSE_TRANSFORM:"poseTransfer"
+			}
 			return {
-				"buildType": operationsData.buildType,
+				"buildType": buildTypeCorresponding[operationsData.buildType],
 				nums: operationsData.numberOfImages,
-				projectId: operationsData.selectObject.id,
+				projectId: operationsData.projectData,
 				//productimg
 				toProductImage:{
 					prompt:operationsData.generateText,//输入的内容
-					toProductImageVOList:getPorductImg(),//选择的图片
-					projectId: operationsData.selectObject.id,
+					toProductImageVOList:(operationsData.buildType == 'TO_PRODUCT_IMAGE' || operationsData.buildType == 'RELIGHT')?getGenerateCloudImgList():[],//选择的图片
+					// toProductImageVOList:getPorductImg(),//选择的图片
+					projectId: operationsData.projectData,
 					direction:operationsData.relightDirection,//打光方向
 					brightenValue:operationsData.brightenValue,
 					imageStrength:(100 - getImageStrength())/100,
+					imageStrengthMin:(100 - getImageStrength(operationsData.similarity[1]))/100,
+					imageStrengthMax:(100 - getImageStrength(operationsData.similarity[0]))/100,
 				},
 				//poseTransform
-				poseTransform:getPoseTransformData(),
-				private: operationsData.selectObject.id,
-				ToProductImageDTO: operationsData.selectObject.id,
+				// poseTransform:getPoseTransformData(),
+				poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList():[],
+				private: operationsData.projectData,
+				ToProductImageDTO: operationsData.projectData,
 			}
 		}
 		let cancelDsign = ()=>{
@@ -267,14 +365,18 @@ export default defineComponent({
 		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(operationsData.buildType == 'TO_PRODUCT_IMAGE'){
+				if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("Please upload the picture first.")
+				// 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("Please upload the picture first.")
+				// 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 == 'POSE_TRANSFER'){
+				if(data.poseTransform.length == 0)return message.warning("Please upload the picture first.")
+				// 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 *')
+			if(operationsData.buildType == 'DESIGN' && !operationsData.projectData)return message.warning('Please select a project')
+			if(!data.buildType || !data.nums || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
 			operations.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designCloud, data).then(
 			(rv) => {
@@ -294,6 +396,64 @@ export default defineComponent({
 				}
 			}
 		}
+		let getHistoryTime = null
+		const getHistoryProjectList = (event)=>{
+			clearTimeout(getHistoryTime)
+			if(!event && !operationsData.buildType){
+				operationsData.objectList = []
+				return
+			}
+			getHistoryTime = setTimeout(()=>{
+				let value = {
+					projectName:event,
+					page:1,
+					size:9999,
+					asc:0,
+					process:operationsData.buildType,
+				}
+				Https.axiosPost(Https.httpUrls.historyProject,value).then((rv)=>{
+					rv.content.forEach((item)=>{
+						item.value = item.id
+						item.label = item.name
+					})
+					operationsData.objectList = rv.content
+				})
+			},1000)
+		}
+		let beforeUpload = async (file)=>{
+            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;
+        }
+		let fileUploadChange = (data)=> {
+            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.id = res.data.id
+					file.isChecked = true
+					file.type = 'ProductElement'
+					operationsData.fileList.filter((v) => v.status === "done");
+				}else{
+					bor = false
+				}
+				// this.showFileList = productImgData.fileList
+            } else if (file.status === "error") {
+				bor = false
+            }
+        }
        return {
            ...toRefs(operations),
            ...toRefs(operationsData),
@@ -304,10 +464,21 @@ export default defineComponent({
 			setOk,
 			changeBuildType,
 			changeNumberOfImages,
+			getHistoryProjectList,
+			beforeUpload,
+			fileUploadChange,
+			getUploadUrl,
+			getCookie,
        };
    },
    data() {
        return {
+			indicator: h(LoadingOutlined, {
+				style: {
+					fontSize: "2.4rem",
+				},
+				spin: true,
+			}),
        };
    },
    mounted() {},
@@ -360,6 +531,66 @@ export default defineComponent({
    .closeIcon {
        z-index: 2;
    }
+	.productImg_content_item_imgBox{
+		display: flex;
+		overflow-x: auto;
+		width: auto;
+		margin-bottom: 2rem;
+		align-items: center;
+		flex-wrap: nowrap;
+		width: 100%;
+		.content_item_imgBox_itemImg{
+			display: flex;
+			margin-right: 1rem;
+			position: relative;
+			height: 20rem;
+			max-height: 100%;
+			position: relative;
+			flex-shrink: 0;
+			img{
+				height: 100%;
+				width: 100%;
+				cursor: pointer;
+				object-fit: contain;
+				opacity: .5;
+				&.active{
+					opacity: 1;
+				}
+			}
+			.ant-checkbox-wrapper{
+				position: absolute;
+				right: 0;
+				top: 0;
+			}
+			&.content_item_imgBox_itemImg:hover{
+				.content_item_imgBox_itemImg_delete{
+					display: block;
+					cursor: pointer;
+				}
+			}
+			.content_item_imgBox_itemImg_delete{
+				display: none;	
+				width: 100%;
+				height: 100%;
+				background: rgba(0,0,0,.2);
+				position: absolute;
+				i{
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%,-50%);
+					color: #fff;
+				}
+			}
+
+		}
+		:deep(.upload_file_item){
+			flex-shrink: 0;
+		}
+		.content_item_imgBox_itemImg:last-child{
+			margin-right: 0;
+		}
+	}
 	.allUserPoeration_btn{
 		display: flex;
 		flex-direction: row;