430 lines
12 KiB
Vue
430 lines
12 KiB
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> |