aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整部分bug

Browse Source
This commit is contained in:
X1627315083
2025-05-28 10:28:07 +08:00
parent 608a4dec89
commit 9fc2bcaedf
78 changed files with 2034 additions and 10193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

437
src/component/home/batchGeneration/createCloud.vue Normal file
View 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>

362
src/component/home/batchGeneration/index.vue Normal file
View File

@@ -0,0 +1,362 @@
<template>
<div class="uploading">
<div class="title">
<div class="list">
<div
class="titleItem active"
>
<span class="detailText">All</span>
</div>
</div>
{{ selectObject.id }}123
<div class="searchObject generalModel_state">
<div class="generalModel_state_item smail">
<span>Project :</span>
<a-select
v-model:value="changeEvent"
show-search
allowClear
style="width: 150px"
placeholder="Please select"
:options="objectList"
@change="handleChange"
></a-select>
</div>
</div>
<div class="createCloud" v-show="selectObject.id">
<div class="gallery_btn" @click="createClound">Create</div>
</div>
</div>
<div class="contentList">
<div class="title">
<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
{{ item.name }}
</div>
</div>
<div class="content">
<tr v-for="(row, index) in contentList" :key="index">
<td v-for="header in cloudTiltleList" :key="header.value">
<span v-show="header.value != 'operation'">
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
</span>
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
Review
</span>
</td>
</tr>
</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>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import createCloud from "./createCloud.vue";
import { da } from 'element-plus/es/locale';
export default defineComponent({
components:{
createCloud,
},
props:{
workflowType:{
type:String,
default:'' as any,
required:true
}
},
emits:['retrieve'],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
pageType:'list',
pageSize:10,
currentPage:1,
total:0,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
generateList:{
seriesDesign:[
{
label:'Design',
value:'design',
consumption:0,
},{
label:'To Product Image',
value:'toProductImage',
consumption:5,
},{
label:'Relight',
value:'relight',
consumption:5,
},{
label:'Transfer Pose',
value:'poseTransfer',
consumption:10,
},
],
singleProductDesign:[
{
label:'Design',
value:'design',
consumption:0,
},{
label:'To Product Image',
value:'toProductImage',
consumption:5,
},
],
// printDesign:[
// {
// label:'1',
// value:100,
// }
// ],
productDrawingDesign:[
{
label:'To Product Image',
value:'toProductImage',
consumption:5,
},{
label:'Relight',
value:'relight',
consumption:5,
},{
label:'Transfer Pose',
value:'poseTransfer',
consumption:10,
},
],
// printingDesign3D:[
// {
// label:'1',
// value:100,
// }
// ],
// sketchDesign:[]
},
cloudTiltleList:[
{
name:'Task type',
value:'buildType',
fun:(value:any)=>{
let str = ''
if(value == 'design')str = 'Design'
if(value == 'toProductImage')str = 'To Product Image'
if(value == 'relight')str = 'Relight'
if(value == 'poseTransfer')str = 'Transfer Pose'
return str
}
},{
name:'Quantity generated',
value:'nums',
},{
name:'Creation time',
value:'updateTime',
fun:(value:any)=>{
if(!value)return
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
}
},{
name:'Start time',
value:'updateTime',
fun:(value:any)=>{
//没开始内容为 -
if(!value)return
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
}
},{
name:'End time',
value:'updateTime',
fun:(value:any)=>{
if(!value)return
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
}
},{
name:'Status',
value:'process',
fun:(value:any)=>{
if(value == '100.00%'){
return 'Completed'
}else{
return value
}
}
},{
name:'Operation',
value:'operation',
},
] as any,
contentList:[
] as any,
isGetContentList:false as any,
})
const dataDom = reactive({
createCloud,
})
const createClound = ()=>{
data.isGetContentList = false
dataDom.createCloud.init()
}
const detailIamge = (item:any)=>{
//去除里面的T2025-04-17T13:45:43
if(item.process == '100.00%' || item.status == 1){
let value = {
taskId:item.taskId,
page:1,
size:10,
buildType:item.buildType,
}
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
console.log(rv)
if(rv.design && rv.design.length > 0){
store.commit('addDesignCollectionList',rv.design)
emit('retrieve','design')
}else if(rv.toProductImage && rv.toProductImage.length > 0){
store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
emit('retrieve','toProduct')
}else if(rv.relight && rv.relight.length > 0){
store.commit('setCloudList',{str:'relight',list:rv.relight})
emit('retrieve','relight')
}else if(rv.poseTransfer && rv.poseTransfer.length > 0){
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
emit('retrieve','poseTransfer')
}
data.isGetContentList = false
})
}
}
const getContentList = ()=>{
if(data.isGetContentList){
let value = {
page:data.currentPage,
size:data.pageSize,
projectId: data.selectObject.id,
}
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
data.contentList = rv.content
data.total = rv.total
let arr = rv.content
let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
if(!result)data.isGetContentList = false
setTimeout(()=>{
getContentList()
},1500)
})
}
}
const submitGetContentList = ()=>{
data.isGetContentList = true
getContentList()
}
onBeforeUnmount(()=>{
data.isGetContentList = false
})
onMounted(()=>{
data.isGetContentList = true
getContentList()
})
return{
...toRefs(dataDom),
...toRefs(data),
createClound,
detailIamge,
getContentList,
submitGetContentList,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.uploading{
width: 100%;
height: 100%;
position: relative;
padding-top: 3rem;
display: flex;
flex-direction: column;
> .title{
width: 100%;
display: flex;
> .list{
display: flex;
margin-bottom: 2.5rem;
> .titleItem:last-child{
margin-right: 0;
}
> .titleItem{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .titleItem::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .active {
color: #000;
font-weight: 600;
}
> .active::before {
width: 100%;
}
}
> .createCloud{
margin-left: auto;
}
> .searchObject{
margin-left: auto;
}
}
> .contentList{
flex: 1;
overflow: hidden;
padding-top: 2.5rem;
display: flex;
flex-direction: column;
> .content tr , > .title{
display: flex;
justify-content: space-between;
padding: 0 1.2rem;
}
> .title{
background: #F7F7F7;
> .titleItem{
line-height: 4.6rem;
font-size: 2rem;
color: #666666;
width: calc(100% / 4);
text-align: center;
}
}
.content{
flex: 1;
overflow: hidden;
> tr{
> td{
text-align: center;
width: calc(100% / 4);
line-height: 4.6rem;
font-size: 2.2rem;
}
}
}
}
}
</style>