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

generate交互更新

Browse Source
This commit is contained in:
X1627315083
2024-05-28 16:00:26 +08:00
parent c4952ff2c5 f98ea23128
commit ff9b2ea1a1
26 changed files with 1536 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

493
src/component/HomePage/Generate.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="generate">
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
<div v-show="type_.type2 != 'Sketchboard'">
<!-- <div v-show="type_.type2 != 'Sketchboard'">
<label>
<input
type="checkbox"
@@ -32,29 +32,86 @@
/>
<span>{{ $t('Generate.TextImage') }}</span>
</label>
</div>
<div v-if="type_.type2 == 'Printboard'" class="printModel">
</div> -->
<!-- <generalMenu :dataList="checkbox" @setprintModel="emitSetKeyword" :item="selectCheckbox" :deleteItem="type_.type2 == 'Sketchboard'?0:-1" :driver__="driver__.driver" :driverClass="{class1: '',class2:'',classList:{item1:'',item2:'',item3:''}}"></generalMenu> -->
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4',class2:'Guide_1_2_5'}"></generalMenu>
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
<li class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Model3') }}</li>
<!-- <li v-show="(sketchboardList.length>=1 && moodboarList.length>=1&& checkbox[0].type) || (sketchboardList.length>=2 && checkbox[0].type) " class="printModel_item" @click="setprintModel(4)">{{ $t('Generate.Merge') }}</li> -->
</ul>
</div>
</div> -->
</div>
<div v-else class="input_border" >
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
<input
class="search_input"
@input="ifMaximumLength"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@click="inputFocus()"
/>
<i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i>
<div class="input_box_btnBox">
<div class="upload_item">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
:class="[checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done' || file?.base64"
>
<img :src="file?.imgUrl" class="upload_img" />
<!-- <div
class="delete_file_block"
:class="[driver__.driver?'hideEvents':'']"
@click.stop="deleteFile(index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div> -->
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
</div>
</div>
</div>
</div>
<input
class="search_input"
@input="ifMaximumLength"
:placeholder="$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@click="inputFocus()"
/>
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard'">
<a-upload
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
<i v-show="scene?.value == 'slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<!-- <i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i> -->
</div>
<textarea
v-show="isTextarea"
class="search_textarea "
@@ -79,22 +136,12 @@
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
<div v-for="item in workspace?.keyWord?.[type_.type2]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
</div>
</div>
</div>
</div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<div class="upload_item">
<div
class="upload_file_item Guide_1_2_7"
@@ -123,36 +170,9 @@
</div>
</div>
</div>
<div
class="upload_file_item upload_component Guide_1_2_6"
:class="[driver__.driver?'showEvents':'']"
>
<a-upload
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:disabled="checkbox[1].type"
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
multiple
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div v-else class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
</div> -->
<div class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
<div
class="generage_img_item"
v-for="(item, index) in fileList"
@@ -160,7 +180,6 @@
@click="generageAdd(item)"
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
>
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<div
class="delete_like_file_block left1"
@@ -176,14 +195,13 @@
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
</div>
</template>
<script lang="ts">
@@ -197,30 +215,62 @@ import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import createSlogan from "@/component/HomePage/createSlogan.vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
scaleImage,
generalMenu,
createSlogan,
},
props: ["msg",'sketchCatecoryList'],
setup() {
props: ["msg",'sketchCatecoryList','scene'],
setup(props) {
// console.log(prop.msg);
let checkbox = ref([
{
name: "image",
type: true,
label:useI18n().t('Generate.ImageOnly'),
},
{
name: "text",
type: false,
label:useI18n().t('Generate.TextOnly'),
},
{
name: "text-image",
type: false,
label:useI18n().t('Generate.TextImage')
},
]);
let selectCheckbox = checkbox.value[0]
let printModelList = ref([
{
num:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
},{
num:'',
optype:false,
value:'Illustration Style',
label:useI18n().t('Generate.Model2')
},{
num:'',
optype:false,
value:'Real Style',
label:useI18n().t('Generate.Model3')
},
])
let printModel = ref({
num:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
})
let checkboxImage = ref()
let imgList = ref([]);
let selectImgList: any = ref([]);
@@ -240,14 +290,9 @@ export default defineComponent({
let sketchboardList:any = ref([])
let collectionElementid = ref()
let level2Type = ref('')
let printModel = ref({
num:'',
optype:false,
value:'Painting Style',
name:useI18n().t('Generate.Model'+1)
})
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let sketchCatecoryList:any = ref([])
let workspace:any = ref({})
@@ -258,7 +303,6 @@ export default defineComponent({
let driver__:any = inject('driver__')
let {t} = useI18n()
let isMmerge = ref(false)
let isTest = ref()
let userInfo:any = {}
let generateId:any = ref([])
@@ -266,6 +310,7 @@ export default defineComponent({
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let scene:any = props.scene
return {
imgList,
selectImgList,
@@ -279,6 +324,7 @@ export default defineComponent({
searcMaterialhName,
designType,
checkbox,
selectCheckbox,
store,
fileList,
sketchboardList,
@@ -286,10 +332,13 @@ export default defineComponent({
level2Type,
checkboxImage,
printModel,
printModelList,
loadingShow,
isGenerate,
scene,
// printBoards,
moodboarList,
// moodboarList,
// sketchCatecoryList,
workspace,
inputShow,
@@ -327,7 +376,6 @@ export default defineComponent({
type1: "generate",
type2: prop.msg,
},
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
@@ -346,26 +394,31 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
this.workspace = this.store.state.Workspace.workspace
if(this.type_.type2 == 'Sketchboard'){
this.checkbox=[
{
name: "image",
type: false,
},
{
name: "text",
type: true,
},
{
name: "text-image",
type: false,
},
]
{
name: "image",
type: false,
label:useI18n().t('Generate.ImageOnly'),
},
{
name: "text",
type: true,
label:useI18n().t('Generate.TextOnly'),
},
{
name: "text-image",
type: false,
label:useI18n().t('Generate.TextImage')
},
]
this.selectCheckbox = this.checkbox[1]
}
this.$emit('generateCheckbox',this.checkbox[0].type)
},
watch:{
@@ -382,21 +435,20 @@ export default defineComponent({
}
},
workspaceCom(newVal,oldVal){
this.workspace = newVal
workspace(newVal,oldVal){
this.upload.gender = newVal?.sexEnum?.name
},
moodboarList(newVal,oldVal){
if(newVal.length>=1 || this.sketchboardList.length >= 2){
}else{
this.printModel = {
num:'',
optype:false,
value:'Painting Style',
name:this.t('Generate.Model'+1)
}
}
},
// moodboarList(newVal,oldVal){
// if(newVal.length>=1 || this.sketchboardList.length >= 2){
// }else{
// this.printModel = {
// num:'',
// optype:false,
// value:'Painting Style',
// name:this.t('Generate.Model'+1)
// }
// }
// },
},
computed: {
getSketchLabel(value: any) {
@@ -444,6 +496,14 @@ export default defineComponent({
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
emitSetKeyword(data:any){
this.selectCheckbox = data
this.checkbox.forEach((item:any,index:any) => {
if(item.name == data.name){
this.setKeyword(index)
}
});
},
setKeyword(num: any) {
this.checkbox.forEach((v: any) => {
v.type = false;
@@ -466,70 +526,30 @@ export default defineComponent({
if(this.driver__.driver){
driverObj__.moveNext()
}
this.printModel = {
num:'',
optype:false,
value:'Painting Style',
name:this.t('Generate.Model'+1)
}
}
},
PrintModel(){
if(!this.printModel.optype){
document.addEventListener('click',this.removePrintModel)
}
this.printModel.optype = !this.printModel.optype
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
},
removePrintModel(){
this.printModel.optype = false
document.removeEventListener('click',this.removePrintModel)
},
setprintModel(num:any){
let arr = ["Painting Style","Illustration Style","Real Style"]
if(num == 4){
this.printModel = {
num : 'Generate',
optype:false,
value:'',
name:this.t('Generate.Merge')
}
}else{
this.printModel = {
num : num,
value:arr[num-1],
optype:false,
name:this.t('Generate.Model'+num)
}
}
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
setprintModel(value:any){
this.printModel = value
},
getgenerate(){
clearInterval(this.remGenerateTime)
this.remGenerate = false
// if(this.isTest){//试用用户禁止使用
// message.info(
// this.t('isTest.available')
// );
// return
// }
if(this.isGenerate){
return
}
// if(!this.searchPictureName){
// message.info(
// this.t('Generate.jsContent3')
// );
// this.remGenerate = false
// // if(this.isTest){//试用用户禁止使用
// // message.info(
// // this.t('isTest.available')
// // );
// // return
// // }
// if(this.isGenerate){
// return
// }
// // if(!this.searchPictureName){
// // message.info(
// // this.t('Generate.jsContent3')
// // );
// // return
// // }
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 250){
@@ -539,24 +559,33 @@ export default defineComponent({
return
}
}else{
message.info(
this.t('Generate.jsContent5')
);
return
if(this.sketchboardList[0].imgUrl){
}else{
message.info(
this.t('Generate.jsContent5')
);
return
}
}
let data = {
generateType:'text',
designType:'',
collectionElementId:'',
generateType:'',
designType:'collection',
collectionElementId:this.sketchboardList[0].id?this.sketchboardList[0].id:'',
level1Type:this.upload.level1Type,
level2Type:'',
level2Type:this.scene?.value?this.scene?.value:'',
text:this.searchPictureName,
userId:this?.userInfo?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print
isTestUser:this.driver__.driver?false:this.isTest,
gender:'',
base64:this.sketchboardList[0].base64?this.sketchboardList[0].imgUrl:'',
}
console.log(data);
return
this.isGenerate = true
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
@@ -670,8 +699,6 @@ export default defineComponent({
this.isTextarea = !this.isTextarea
},
cliSetKeyword(value:any){
console.log(this.workspace);
let str = ''
if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
str = ','
@@ -732,12 +759,7 @@ export default defineComponent({
let fileList = this.sketchboardList.filter(
(v: any) => v.status === "done"
);
let arr = this.store.state.UploadFilesModule.sketchboard;
if (arr.length >= 8) {
message.info(this.t('Generate.jsContent6'));
} else {
this.sketchboardList = fileList
}
this.sketchboardList = fileList
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
@@ -765,50 +787,55 @@ export default defineComponent({
message.warning(res.errMsg);
}
},
setSketchboardItem(item:any){
if(this.checkboxImage){
return
}
let parent:any = this.$parent
if(item.checked){
item.checked = false
this.collectionElementid = ''
}else{
let obj = {
imgId : item.id,
imgUr: item.imgUrl,
level2Type:item.category,
designType:'collection'
}
// parent.useGenerate.designType = 'collection'
this.$emit('setGenerate',obj)
this.sketchboardList.forEach((v:any)=>{
if(v.checked){
v.checked = false
}
})
item.checked = true
this.collectionElementid = item.id
}
this.level2Type = item.category
if(this.driver__.driver){
driverObj__.moveNext()
}
setSlogan(){
let createSlogan:any = this.$refs.createSlogan
createSlogan.init()
},
setSloganData(data:any){
this.sketchboardList = data
},
// setSketchboardItem(item:any){
// if(this.checkboxImage){
// return
// }
// let parent:any = this.$parent
// if(item.checked){
// item.checked = false
// this.collectionElementid = ''
// }else{
// let obj = {
// imgId : item.id,
// imgUr: item.imgUrl,
// level2Type:item.category,
// designType:'collection'
// }
// // parent.useGenerate.designType = 'collection'
// this.$emit('setGenerate',obj)
// this.sketchboardList.forEach((v:any)=>{
// if(v.checked){
// v.checked = false
// }
// })
// item.checked = true
// this.collectionElementid = item.id
// }
// this.level2Type = item.category
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
// },
deleteFile(item: any) {
// this.sketchboardList
this.collectionElementid = ''
this.sketchboardList.splice(item, 1);
if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
this.printModel = {
num:'',
optype:false,
value:'Painting Style',
name:this.t('Generate.Model'+1)
}
}
// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
// this.printModel = {
// num:'',
// optype:false,
// value:'Painting Style',
// label:this.t('Generate.Model'+1)
// }
// }
},
likeFile(item:any,str:string){
if(str == 'like'){
@@ -882,6 +909,7 @@ export default defineComponent({
flex-direction: column;
border-right: 1px solid #e5e5e5;
position: relative;
padding-top: calc(2.5rem*1.2);
&.generate::-webkit-scrollbar {
display: none;
}
@@ -898,13 +926,12 @@ export default defineComponent({
position: sticky;
top: 0;
background: #fff;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
z-index: 2;
}
.generate_checkbox {
z-index: 10;
div {
margin-right: calc(4rem*1.2);
label {
display: flex;
cursor: pointer;
@@ -919,42 +946,6 @@ export default defineComponent({
}
}
}
.printModel{
>div{
width: calc(13rem*1.2);
// display: flex;
display: block;
border-radius: calc(1rem*1.2);
margin: 0;
border: 2px solid;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 calc(1rem*1.2);
text-align: center;
}
ul{
position: absolute;
width: calc(13rem*1.2);
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
li{
background: rgba(0,0,0,.2);
line-height: 2;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 calc(1rem*1.2);
&.printModel_item:hover{
background: rgba(0,0,0,.4);
}
}
}
}
.generage_input {
}
.generage_img {