部分页面调整

2024-07-03 11:39:01 +08:00
parent 2bc888eac9
commit b08a0f85ad
12 changed files with 657 additions and 377 deletions
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -20,13 +20,70 @@
 			</div>
 		</div>
 		<div class="scaleImage_content">
-			<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
-			<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
-			<div class="img_operate_block" v-if="isLike">
-				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
-				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
+			<div v-if="isProductimg" class="productImg_modal">
+				<div class="productImg_left">
+					<div class="productImg_content_item_title productImg_content_item_title_menu">
+						<span>{{$t('ProductImg.MagicTools')}}</span>
+					</div>
+					<div class="input_border productImg_content_item_generate">
+						<div class="input_box">
+							<div class="input_box_btnBox">
+								<input
+									class="search_input"
+									:placeholder="$t('Generate.inputContent1')"
+									v-model="productimgSearchName"
+									@keydown.enter="getPrductimg()"
+								/>
+								<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
+								<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
+							</div>
+							<textarea 
+								v-show="productimgIsTextarea"
+								class="search_textarea "  
+								@keydown.enter="getPrductimg()"
+								v-model="productimgSearchName"
+							></textarea>
+						</div>
+					</div>
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
+						<span>{{$t('ProductImg.Similarity')}}</span>
+					</div>
+					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity">
+						<a-slider class="system_silder"
+							v-model:value="productimgSimilarity"
+							:tooltipVisible="false"
+							:step="5"
+							@afterChange="()=>{}"
+						>
+						</a-slider>
+						<input type="number" readonly v-model="productimgSimilarity">
+					</div>
+					<div class="productImg_content_item_generate_btn input_border">
+						<div class="input_box">
+							<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
+								{{ $t('Generate.Generate') }}
+							</div>
+							<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
+								<i class="fi fi-br-loading"></i>
+							</div>
+							<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
+								{{$t('Generate.Close')}}
+							</div>
+						</div>
+					</div>
+				</div>
 			</div>
+			<div class="scaleImage_content_imgBox">
+				<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
+				<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+				<div class="img_operate_block" v-if="isLike">
+					<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
+					<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
+				</div>
+			</div>
+			
 		</div>
+		
 		<div class="scaleImage_nav" @keydown="handleKeyDown">
 			<div class="nav_left">
 				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
@@ -56,15 +113,36 @@
 </template>

 <script lang="ts">
-import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
-// import { Https } from "@/tool/https";
-// import { getCookie } from "@/tool/cookie";
+import { defineComponent, h, ref ,toRefs,computed,reactive, nextTick} from "vue";
+import { Https } from "@/tool/https";
 // import domTurnImg from '@/tool/domTurnImg'
+import { useStore } from "vuex";
 import { downloadIamge } from "@/tool/util";
+import { getCookie,setCookie } from "@/tool/cookie";

 export default defineComponent({
-    setup() {
+	props:{
+		productData:{
+            type:Object,
+			default:{
+				similarity:30,
+				upload:'',
+			},
+		}
+	},
+    setup(props:any,{emit}) {
+		const store = useStore();
+		let productimg = reactive({
+			isProductimg:false,
+			productimgSearchName:'',
+			productimgIsTextarea:false,
+			productimgRemProductimg:false,
+			productimgIsProductimg:false,
+			productimgSimilarity:props.productData.similarity,
+			productimgUpload:props.productData.upload,
+		})
        let scaleImage: any = ref(false);
+		let isShowMark = ref(false)
 		let loadingShow = ref(false)
 		let isComparison = ref(false)
 		const visible = ref<boolean>(false);
@@ -78,8 +156,114 @@ export default defineComponent({
 		let scaleImageIndex:any = ref(0)
 		let isLike:any = ref(true)
 		let robotAssits:any = ref(0)
+
+		//procuctimg
+		let remPrductimgTime:any = null
+		let prductimgTime:any = null
+		let getPrductimg = ()=>{
+			let obj = {
+				elementId:scaleImageList.value[scaleImageIndex.value].elementId,
+				elementType:scaleImageList.value[scaleImageIndex.value].elementType,
+			}
+			let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
+			let data:any ={
+				prompt:productimg.productimgSearchName,
+				toProductImageVOList:[obj],
+				userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
+				imageStrength:(100 - imageStrength)/100,
+			}
+
+			productimg.productimgIsProductimg = true
+			remPrductimgTime = setTimeout(()=>{
+				productimg.productimgRemProductimg = true
+			},10000)
+			let url = Https.httpUrls.relight
+			if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
+				url = Https.httpUrls.toProduct
+			}
+			isShowMark.value = true
+			Https.axiosPost(url, data).then(
+                (rv) => {
+					isShowMark.value = false
+					let arr:any = []
+					rv.forEach((item:any)=>{
+					  arr.push(item.taskId)  
+					})
+					
+					// productimg.generateList.unshift(...rv)
+					setPrductimg(arr)
+                }
+            ).catch(res=>{
+				isShowMark.value = false
+				productimg.productimgIsProductimg = false
+				clearInterval(remPrductimgTime)
+				productimg.productimgRemProductimg = false
+            });
+		}
+		let generateProceedList:any = []
+		let setPrductimg = (dataList:any)=>{
+			let data = dataList
+			let dataNum = dataList.length
+			let state = true
+			let url = Https.httpUrls.relightResult
+			if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
+				url = Https.httpUrls.toProductImageResult
+			}
+			prductimgTime = setInterval(()=>{
+				if(!state)return
+				state = false
+				Https.axiosPost(url, data).then(
+					(rv) => {
+						state = true
+						if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
+							// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
+							let isEnd = false
+							if(rv[0].status == 'Success'){
+								rv[0].imgUrl = rv[0].url
+								scaleImageList.value[scaleImageIndex.value] = rv[0]
+								isEnd = true
+							}else if(rv[0].status == 'Fail'){
+								isEnd = true
+							}
+							generateProceedList = data
+							if(isEnd){
+								store.state.store.dispatch('getCredits')
+								clearInterval(prductimgTime)
+								clearInterval(remPrductimgTime)
+								productimg.productimgRemProductimg = false
+								productimg.productimgIsProductimg = false
+							}
+						}
+					}
+				).catch(res=>{
+					clearInterval(prductimgTime)
+					clearInterval(remPrductimgTime)
+					productimg.productimgIsProductimg = false
+					productimg.productimgRemProductimg= false
+				});
+			},1000)
+		}
+		let removeProductimg = ()=>{
+			productimg.productimgIsProductimg = false
+			productimg.productimgRemProductimg= false
+			clearInterval(prductimgTime)
+			let userInfo:any = getCookie("userInfo")
+			if(generateProceedList){
+				// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
+				let str = generateProceedList.join(',')
+				let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
+				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
+					(rv) => {
+						generateProceedList = []
+					}
+				).catch(res=>{
+				});
+			}
+		}
        return {
+			...toRefs(productimg),
            scaleImage,
+			isShowMark,
 			loadingShow,
 			isComparison,
 			visible,
@@ -89,6 +273,8 @@ export default defineComponent({
 			scaleImageIndex,
 			isLike,
 			robotAssits,
+			getPrductimg,
+			removeProductimg,
        };
    },
    data() {
@@ -162,7 +348,7 @@ export default defineComponent({
 			}else if(event.keyCode == 39){
 				this.nextStep()
 			}
-		}
+		},
    },
 });
 </script>
@@ -176,45 +362,58 @@ export default defineComponent({
 	.scaleImage_content{
 		display: flex;
 		justify-content: center;
-		height: 75%;
-		margin: 0 auto;
 		margin-top: calc(5rem*1.2);
+		height: 75%;
 		position: relative;
-		max-width: 70rem;
-		img{
-			width: auto;
-			height: 100%;
-		}
-		.img_operate_block{
-			width: 3.6rem;
-			height: 3.6rem;
-			background: rgba(0,0,0,0.6);
-			border-radius: 50%;
-			text-align: center;
-			line-height: 3.6rem;
-			cursor: pointer;
-			margin-bottom: 0.4rem;
+		.productImg_modal{
 			position: absolute;
-			right: 2rem;
-			top: 2rem;
-			opacity: 0;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			.operate_icon{
-				font-size: 1.8rem;
-				color: #fff;
-				&.fi-sr-heart{
-					color: red;
+			left: 0;
+			.productImg_left{
+				width: 100%;
+				.productImg_content_item_generate_btn{
+					transform: translateY(100%);
 				}
 			}
-			i{
+		}
+		.scaleImage_content_imgBox{
+			position: relative;
+			max-width: 70rem;
+			img{
+				width: auto;
+				height: 100%;
+			}
+			.img_operate_block{
+				width: 3.6rem;
+				height: 3.6rem;
+				background: rgba(0,0,0,0.6);
+				border-radius: 50%;
+				text-align: center;
+				line-height: 3.6rem;
+				cursor: pointer;
+				margin-bottom: 0.4rem;
+				position: absolute;
+				right: 2rem;
+				top: 2rem;
+				opacity: 0;
 				display: flex;
-				font-size: 1.8rem;
-				color: #fff;
+				align-items: center;
+				justify-content: center;
+				.operate_icon{
+					font-size: 1.8rem;
+					color: #fff;
+					&.fi-sr-heart{
+						color: red;
+					}
+				}
+				i{
+					display: flex;
+					font-size: 1.8rem;
+					color: #fff;
+				}
 			}
 		}
 		
+		
 	}
 	.scaleImage_content:hover{
 		.img_operate_block{