调整部分bug
This commit is contained in:
X1627315083
437
src/component/home/batchGeneration/createCloud.vue
Normal file
437
src/component/home/batchGeneration/createCloud.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<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>Create Cloud Generation Tasks</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Task 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" v-show="buildType">
|
||||
<span>Quantity <span>*</span></span>
|
||||
<input
|
||||
v-model="numberOfImages"
|
||||
placeholder="Please enter number"
|
||||
type="text"
|
||||
style="width: 200px"
|
||||
@input="changeNumberOfImages"
|
||||
/>
|
||||
</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 v-show="buildType" 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
|
||||
}else if(operationsData.buildType == 'poseTransfer'){
|
||||
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
|
||||
}
|
||||
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()
|
||||
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(!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
|
||||
})
|
||||
}
|
||||
const changeNumberOfImages = ()=>{
|
||||
if(operationsData.buildType =='relight' || operationsData.buildType == 'poseTransfer'){
|
||||
if(operationsData.exhibitionImgList.length < Number(operationsData.numberOfImages)){
|
||||
operationsData.numberOfImages = operationsData.exhibitionImgList.length
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
changeBuildType,
|
||||
changeNumberOfImages,
|
||||
};
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user