aida_front/src/component/HomePage/index/model/cloudUploading/createCloud.vue

<template>
	<div class="createCloud" ref="createCloud"></div>
    <a-modal
        class="createCloud_modal generalModel"
        v-model:visible="operationsModal"
        :footer="null"
		:get-container="() => $refs.createCloud"
        width="50%"
		:height="'77rem'"
        :maskClosable="false"
        :centered="true"
        :closable="false"
		:mask="true"
        wrapClassName="#app"
        :keyboard="false"
    >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
					</svg>
			</div>
		</div>
		<div class="modal_title_text">
			<div>Cloud generation task</div>
		</div>
		<div class="allUserPoeration_center admin_page">
			<div class="admin_state_item">
				<span>Build type <span>*</span></span>
				<a-select
					v-model:value="buildType"
					allowClear
					style="width: 200px"
					placeholder="Please select"
					:options="cloudList"
					@change="changeBuildType"
				></a-select>
			</div>
			<div class="admin_state_item" >
				<span>Number of images <span>*</span></span>
				<input
					v-model="numberOfImages"
					:disabled="buildType =='relight' || buildType == 'poseTransfer'"
					placeholder="Please enter number"
					type="text"
					style="width: 200px"
				/>
			</div>
			<!-- toProductimg -->
			 <div v-show="buildType == 'toProductImage'" 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"
						:step="5"
						
					>
					</a-slider>
					<input type="number" readonly v-model="similarity">
				</div>
			</div>
			 <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 ">
				<span>{{$t('ProductImg.Highlight')}}</span>
				<div class="sliderAndImput" style="width: 200px">
					<a-slider class="system_silder"
						v-model:value="brightenValue"
						:tooltipVisible="false"
						
						:max="3"
						:min="1"
						:step="0.1"
					>
					</a-slider>
					<input type="number" readonly v-model="brightenValue">
				</div>
			</div>
			<div v-show="buildType == 'toProductImage' || buildType == 'relight'" class="admin_state_item">
				<span>Keyword</span>
				<input
					v-model="generateText"
					:placeholder="$t('Generate.inputContent1')"
					type="text"
					style="width: 200px"
				/>
			</div>
			
			<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 class="admin_state_item" style="width: 100%;">
				<span style="margin: 0;">Generation time：19min</span>
			</div> -->
			<div class="admin_state_item" style="width: 100%;">
				<span style="margin: 0;">Cost credit：{{credits * numberOfImages}}</span>
			</div>
		</div>
		<div class="allUserPoeration_btn admin_page">
			<div class="admin_search_item" @click="cancelDsign">
				Close
			</div>
			<div class="admin_search_item" @click="setOk">
				OK
			</div>
		
		</div>
    </a-modal>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
</template>
<script>
import { defineComponent, computed, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util";
import dayjs, { Dayjs } from 'dayjs';
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import {getMinioUrl} from '@/tool/util'
const md5 = require("md5");
export default defineComponent({
    components: {
    },
	props:{
		cloudList:{
			type:Array,
			default:[]
		}	
	},
	emits: ['getContentList'],
    setup(props,{emit}) {
        const store = useStore();
		let operations = reactive({
			operationsModal:false,
			loadingShow:false,
		})
		let operationsData = reactive({
			buildType:'',
			numberOfImages:'',
			credits:0,
			exhibitionImgList:[],//选择的图片
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			//toProduct
			generateText:'',//输入的内容
			similarity:30,
			brightenValue:1,//亮度
			relightDirection:'Right Light',//打光方向
			relightDirectionList:[
				{
					value:'Right Light',
					label:useI18n().t('ProductImg.RightLight')
				},{
					value:'Left Light',
					label:useI18n().t('ProductImg.LeftLight')
				},{
					value:'Top Light',
					label:useI18n().t('ProductImg.TopLight')
				},{
					value:'Bottom Light',
					label:useI18n().t('ProductImg.BottomLight')
				}
			]
		})
		let init = ()=>{
			operations.operationsModal = true

		}
		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
				operationsData.numberOfImages = operationsData.exhibitionImgList.length
			}else if(operationsData.buildType == 'poseTransfer'){
				operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
				operationsData.numberOfImages = operationsData.exhibitionImgList.length
			}
			props.cloudList.forEach((item)=>{
				if(item.value == operationsData.buildType){
					operationsData.credits = item.consumption
				}
			})
		}
		let getPorductImg = ()=>{
			let modularData = store.state.UploadFilesModule.modularData
			let list = []
			if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
				let productOrRelight = []
				if(operationsData.buildType == 'toProductImage')productOrRelight = modularData.design.likeData
				if(operationsData.buildType == 'relight')productOrRelight = modularData.toProduct

				productOrRelight.forEach((item)=>{
					if(!item.id)return
					let obj = {
						"createTime": "",
						"elementId": 0,
						"elementType": "",
						"id": 0,
						"isLike": 0,
						"taskId": "",
						"toProductImageRecordId": 0,
						"url": "",
					}
					obj.elementId = item.designOutfitId
					obj.elementType = 'DesignOutfit'
					if(operationsData.buildType == 'relight'){
						obj.elementId = item.id
						obj.elementType = 'ToProductImage'
					}
					list.push(obj)
				}) 
			} 
			return list
		}
		const getImageStrength = () => {
			let imageStrength = operationsData.similarity == 100? 95 :operationsData.similarity
			return imageStrength;
		};
		const getPoseTransformData = ()=>{
			let list = []
			let toProduct = store.state.UploadFilesModule.modularData.toProduct
			toProduct.forEach((item)=>{
				let obj = {
					poseId:1,
					productImage:getMinioUrl(item.url)
				}	
				list.push(obj)
			})
			return list
		}
		let setAddData = ()=>{
			return {
				"buildType": operationsData.buildType,
				nums: operationsData.numberOfImages,
				projectId: operationsData.selectObject.id,
				//productimg
				toProductImage:{
					prompt:operationsData.generateText,//输入的内容
					toProductImageVOList:getPorductImg(),//选择的图片
					projectId: operationsData.selectObject.id,
					direction:operationsData.relightDirection,//打光方向
					brightenValue:operationsData.brightenValue,
					imageStrength:(100 - getImageStrength())/100,
				},
				//poseTransform
				poseTransform:getPoseTransformData(),
				private: operationsData.selectObject.id,
				ToProductImageDTO: operationsData.selectObject.id,
			}
		}
		let cancelDsign = ()=>{
			operationsData.buildType=''
			operationsData.numberOfImages=''
			operations.operationsModal = false
		}
		let setOk = ()=>{
			let data 
			data = setAddData()
			console.log(data)
			if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
				if(data.toProductImage.toProductImageVOList.length == 0)return message.warning('Please select the image')
			}else if(operationsData.buildType == 'poseTransfer'){
				if(data.poseTransform.length == 0)return message.warning('Please enter the number of images')
			}
			if(!data.buildType || !data.nums)return message.warning('Please check the input box marked with *')
			operations.loadingShow = true
			Https.axiosPost(Https.httpUrls.designCloud, data).then(
			(rv) => {
				if (rv) {
					operations.loadingShow = false
					cancelDsign()
					emit('getContentList')
				}
			}).catch((error) => {
				operations.loadingShow = false
			})
		}
        return {
            ...toRefs(operations),
            ...toRefs(operationsData),
			cancelDsign,
			init,
			focus,
			blur,
			setOk,
			changeBuildType,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
	directives:{
		mousewheel:{
			mounted (el) {
				el.addEventListener('mouseenter', (e)=> {
					if(el.scrollWidth > el.clientWidth){
						el.parentElement.style.overflowY = 'hidden';
					}
				});

				// 鼠标移出事件
				el.addEventListener('mouseleave', ()=> {
					el.parentElement.style.overflowY = 'auto';
				});
				el.addEventListener('wheel',(e)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				},{ passive: true })
			}
		},
	},
});
</script>
<style lang="less" scoped>
:deep(.ant-modal-mask){
	background: rgba(0, 0, 0, 0.2);
}
:deep(.createCloud_modal){
	
	.ant-modal-body{
		display: flex;
		flex-direction: column;
	}
}

</style>
<style lang="less" scoped>

.createCloud_modal {
    .closeIcon {
        z-index: 2;
    }
	.allUserPoeration_btn{
		display: flex;
		flex-direction: row;
		height: auto;
		justify-content: flex-end;
		padding: 1rem 0;
		.admin_search_item{
			margin-bottom: 0;
		}
	}
	.allUserPoeration_center{
		flex: 1;
		overflow-y: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 0 2rem;
		> .selectImgList{
			width: 100%;
			display: flex;
			overflow-x: auto;
			align-items: center;
			flex-wrap: nowrap;
			height: 20rem;
			margin: 2rem 0;
			> .item{
				height: 100%;
				margin-right: 1rem;
				&:last-child{
					margin-right: 0;
				}
				> img{
					height: 100%;
				}
			}
			// 
		}
		> .admin_state_item{
			width: auto;
			// width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			> span{
				text-align: left;
				margin: 0;
				margin-bottom: 1.5rem;
				font-weight: 600;
			}
			:deep(> .ant-select > .ant-select-selector){
				border-radius: 1.6rem;
			}
			> input{
				border-radius: 1.6rem;
			}
			>.sliderAndImput{
				display: flex;
				align-items: center;
				flex: 1;
				:deep(> .ant-slider){
					// border-radius: 1.6rem;
					flex: 1;
				}
				> input{
					border-radius: 1.6rem;
					width: 4rem;
					margin-left: 1rem;
					height: 100%;
					border-radius: 1rem;
				}
			}
		}
	}
}
</style>