接入画布

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;
--- a/src/component/home/batchGeneration/index.vue
+++ b/src/component/home/batchGeneration/index.vue
@@ -12,17 +12,28 @@
 				<div class="generalModel_state_item smail">
 					<span>Project :</span>
 					<a-select
-						v-model:value="changeEvent"
+						v-model:value="projectData"
 						show-search
 						allowClear
-						style="width: 150px"
+                        size="large"
+						:show-arrow="false"
+						 :default-active-first-option="false"
+						:not-found-content="null"
+						:filter-option="false"
+						style="width: 16rem"
+						:fieldNames="{ label: 'name', value: 'value'}"
 						placeholder="Please select"
 						:options="objectList"
+						@search="getHistoryProjectList"
 						@change="handleChange"
-					></a-select>
+					>
+					<template #option="{ value: val, label, icon,updateTime }">
+						<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
+					</template>
+					</a-select>
 				</div>
 			</div>
-			<div class="createCloud" v-show="selectObject.id">
+			<div class="createCloud">
 				<div class="gallery_btn" @click="createClound">Create</div>
 			</div>
 		</div>
@@ -46,7 +57,7 @@
 			</div>
 			<a-pagination style="text-align: center;" v-model:current="currentPage" :total="total" show-less-items />
 		</div>
-		<createCloud ref="createCloud" :cloudList="generateList[workflowType]" @getContentList="submitGetContentList"></createCloud>
+		<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
 	</div>
 </template>
 <script lang="ts">
@@ -57,44 +68,50 @@ import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import createCloud from "./createCloud.vue";
 import { da } from 'element-plus/es/locale';
+import { useRouter,useRoute } from 'vue-router'
 export default defineComponent({
 	components:{
 		createCloud,
 	},
-	props:{
-		workflowType:{
-		    type:String,
-			default:'' as any,
-			required:true	
-		}
-	},
 	emits:['retrieve'],
 	setup(props,{emit}) {
 		const store = useStore();
+		const route = useRoute()
 		const data = reactive({
 			pageType:'list',
 			pageSize:10,
 			currentPage:1,
 			total:0,
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			projectData:null as any,//批量id
+			createData:null as any,
 			generateList:{
 				seriesDesign:[
-					{
-						label:'Design',
-						value:'design',
+				{
+						label:'Series design',
+						// value:'SERIES_DESIGN',
 						consumption:0,
+						value:'SERIES_DESIGN',
+					},{
+						label:'Single design',
+						// value:'SINGLE_DESIGN',
+						consumption:0,
+						value:'SINGLE_DESIGN',
 					},{
 						label:'To Product Image',
-						value:'toProductImage',
+						// value:'toProductImage',
 						consumption:5,
+						value:'TO_PRODUCT_IMAGE',
 					},{
 						label:'Relight',
-						value:'relight',
+						// value:'relight',
 						consumption:5,
+						value:'RELIGHT',
 					},{
 						label:'Transfer Pose',
-						value:'poseTransfer',
+						// value:'poseTransfer',
 						consumption:10,
+						value:'POSE_TRANSFER',
 					},
 				],
 				singleProductDesign:[
@@ -191,6 +208,7 @@ export default defineComponent({
 			]  as any,
 			contentList:[
 			]  as any,
+			objectList:[],
 			isGetContentList:false as any,
 		})
 		const dataDom = reactive({
@@ -198,7 +216,16 @@ export default defineComponent({
 		})
 		const createClound = ()=>{
 			data.isGetContentList = false
-			dataDom.createCloud.init()
+			let obj = {}
+			if(data.createData){
+				data.generateList.seriesDesign.forEach((item:any)=>{
+					if((item.value == data.createData.process)){
+						obj = item
+					}
+				})
+			}
+			
+			dataDom.createCloud.init(data.createData,obj)
 		}
 		const detailIamge = (item:any)=>{
 			//去除里面的T2025-04-17T13:45:43
@@ -233,7 +260,7 @@ export default defineComponent({
 				let value = {
 					page:data.currentPage,
 					size:data.pageSize,
-					projectId: data.selectObject.id,
+					projectId: data.projectData.id,
 				}
 				Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
 					data.contentList = rv.content
@@ -247,16 +274,47 @@ export default defineComponent({
 				})
 			}
 		}
+		let getHistoryTime = null as any
+		const getHistoryProjectList = (event:any)=>{
+			clearTimeout(getHistoryTime)
+			if(!event){
+				data.objectList = []
+				return
+			}
+			getHistoryTime = setTimeout(()=>{
+				let value = {
+					projectName:event,
+					page:1,
+					size:9999,
+					asc:0,
+					process:'',
+				}
+				Https.axiosPost(Https.httpUrls.historyProject,value).then((rv)=>{
+					rv.content.forEach((item:any)=>{
+						item.value = item.id
+						item.label = item.name
+					})
+					data.objectList = rv.content
+				})
+			},1000)
+		}
 		const submitGetContentList = ()=>{
 			data.isGetContentList = true
 			getContentList()
 		}
+		const handleChange = (event:any,value:any)=>{
+			data.createData = value
+		}
 		onBeforeUnmount(()=>{
 			data.isGetContentList = false
 		})
 		onMounted(()=>{
 			data.isGetContentList = true
-			getContentList()
+			if(route.query?.id){
+				data.projectData.value = route.query?.id
+				data.projectData.label = route.query?.name
+			}
+			// if(route.query?.type == 'creation')dataDom.createCloud.init(data.projectData)
 		})
 		return{
 			...toRefs(dataDom),
@@ -265,6 +323,8 @@ export default defineComponent({
 			detailIamge,
 			getContentList,
 			submitGetContentList,
+			handleChange,
+			getHistoryProjectList,
 		}
 	},
 	provide() {
@@ -316,7 +376,6 @@ export default defineComponent({
 				}
 			}	
 			> .createCloud{
-				margin-left: auto;
 			}
 			> .searchObject{
 				margin-left: auto;