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

product

Browse Source
This commit is contained in:
X1627315083
2024-06-01 10:02:21 +08:00
parent 89ee910ce9
commit ff9e2f510b
21 changed files with 2046 additions and 1798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

530
src/component/HomePage/PrintboardUpload.vue
View File

@@ -53,9 +53,9 @@
</div>
</div>
</div>
<div class="pin_block" v-show="file?.status === 'done'">
<!-- <div class="pin_block" v-show="file?.status === 'done'">
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div> -->
</div>
<div class="upload_file_item upload_component" v-show="printboardList.length < 8">
@@ -92,7 +92,7 @@
</div>
</div>
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
@@ -100,90 +100,40 @@
<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<div class="modal_img">
<!-- <div class="modal_img">
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div> -->
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_border">
<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<div class="input_box_btnBox">
<input class="search_input"
@click="inputFocus()"
@input="ifMaximumLength"
@keydown.enter="getgenerate"
:maxlength='inputShow?0:9999'
:class="{forbidden:generateCheckbox}"
:readonly="generateCheckbox"
:placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
</div>
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
</textarea>
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
<!-- <div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
{{ $t('PrintboardUpload.Generate') }}
</div> -->
<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
{{ $t('PrintboardUpload.Generate') }}
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
</div>
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
<span ref="inputShowText"></span>
</div>
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
</div>
</div>
</div>
<!-- <div>
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
</div> -->
</div>
<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
<div v-for="item,index in generateList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'',driver__.driver?'showEvents':'']" >
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<div
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div>
</div> -->
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</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>
</div>
</div>
<!-- 取消请求 -->
<!-- <button @click="canelAxios">9999999999999999999</button> -->
<scaleImage ref="scaleImage"></scaleImage>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
</div>
@@ -220,28 +170,12 @@ export default defineComponent({
let store:any =useStore()
let fileList:any = ref([]),//选中的文件id数据
printImgList:any = ref([]), //print的印花图片
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard}),
printBoards:any = computed(()=>{
return store.state.UploadFilesModule.printboard
})
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
let openClick: any = ref(1);
let generateCheckbox:any = ref()
let generateList:any = ref([
])
let loadingShow = ref(false)
let isGenerate = ref(false)
let inputShow = ref(false)
let inputTime = ref()
let driver__:any = inject('driver__')
let {t} = useI18n()
let isTest = ref()
let userInfo:any = {}
let generateTime:any = ref()
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let isUseGenerate = ref(false)
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
@@ -252,43 +186,31 @@ export default defineComponent({
let workspace = ref({})
let sceneList = ref([
{
label:'pattern',
value:'pattern'
label:'Pattern',
value:'Pattern'
},{
label:'slogan',
value:'slogan'
label:'Slogan',
value:'Slogan'
},{
label:'logo',
value:'logo'
label:'Logo',
value:'Logo'
},
])
let scene = ref({
label:'pattern',
value:'pattern'
label:'Pattern',
value:'Pattern'
})
let openMenu = ref(false)
return {
fileList,
printImgList,
moodBoards,
printBoards,
openClick,
generateCheckbox,
generateList,
loadingShow,
isGenerate,
inputShow,
inputTime,
driver__,
t,
isTest,
userInfo,
generateProceedList,
generateTime,
remGenerate,
remGenerateTime,
useGenerate,
isUseGenerate,
workspace,
sceneList,
scene,
@@ -296,24 +218,9 @@ export default defineComponent({
}
},
computed:{
// getPinLength(){
// let selectLength:any = 0
// for(let item of this.printBoards){
// if(item.pin){
// selectLength++
// }
// }
// return selectLength
// }
},
watch:{
printBoards:{
handler(newVal:any,oldVal:any){
// if(newVal.length>=2 && this.driver__.driver && newVal.length!=oldVal.length){
// driverObj__.moveTo(7)
// }
}
}
},
data(){
return {
@@ -340,7 +247,6 @@ export default defineComponent({
printboardList:computed(()=>{
return useStore().state.UploadFilesModule.printboard
}),
source:axios.CancelToken.source(),
isTextarea:false,
isInputFocus:false,
}
@@ -362,26 +268,6 @@ export default defineComponent({
}
},
methods:{
//设置library里面选择generate图片
setUseGenerate(){
this.isUseGenerate = !this.isUseGenerate
let printMaterialFiles:any = computed(()=>{
return this.store.state.UploadFilesModule.printMaterialFiles
})
let Material:any = this.$refs.Material
Material.setUseGenerate(printMaterialFiles.value)
if(this.isUseGenerate){
let generate:any = this.$refs.Generate
generate.checkbox.forEach((item:any)=>{
if(item.name == "text-image"){
item.type = true
}else{
item.type = false
}
})
this.generateCheckbox = false
}
},
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
@@ -391,19 +277,12 @@ export default defineComponent({
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
Material.setUseGenerate([])
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
//取消请求测试
canelAxios(){
// Https.axiosCanel()
this.source.cancel('请求被取消');
this.source = axios.CancelToken.source()
},
open(num: Number) {
this.openClick = num;
let material:any = this.$refs.Material
@@ -525,21 +404,6 @@ export default defineComponent({
}
},
deleteGenerate(index:any){
if(this.isGenerate)return
let _this = this
Modal.confirm({
title: this.t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.generateList.splice(index,1)
}
});
},
customRequest(data:any){
let new_data = {
@@ -661,7 +525,6 @@ export default defineComponent({
},
recollection(){
this.isUseGenerate = false
this.useGenerate = {
imgId : '',
imgUrl:1,
@@ -711,337 +574,17 @@ export default defineComponent({
}
this.store.commit('setPrintboardFile',this.fileList)
},
getgenerateCheckbox(value:any){
this.generateCheckbox = value
},
setTextareaShow(){
if(this.generateCheckbox) return
this.isTextarea = !this.isTextarea
},
cliSetKeyword(value:any){
let str = ''
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
str = ','
}
this.captionGeneration += str + value
},
ifMaximumLength(){
this.inputTime = setTimeout(()=>{
if(this.captionGeneration?.split(/\s+/).length > 250){
(this.$refs.inputShowText as any).innerHTML = this.t('PrintboardUpload.maximumLength')
this.inputShow = true
}else{
this.inputShow = false
}
},500)
},
inputFocus(){
if(this.isInputFocus) return
if(this.generateCheckbox) return
this.isInputFocus = true
let setDomCli = ()=>{
this.isInputFocus = false
document.removeEventListener('click',setDomCli)
}
setTimeout(()=>{
document.addEventListener('click',setDomCli)
},200)
},
getgenerate(){
clearInterval(this.remGenerateTime)
this.remGenerate = false
// if(this.isTest){//试用用户禁止使用
// message.warning(
// this.t('isTest.available')
// );
// return
// }
if(this.isGenerate){
return
}
let generage:any = this.$refs.Generate
if(generage.printModel.num == 'Generate'){
this.generatePrint()
return
}
//如果是通过moodboard随即图片生成
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
let data = {
generateType:generateType,
// designType:this.useGenerate.designType,
designType:'collection',
collectionElementId:this.useGenerate.imgId,
// collectionElementId:generage?.collectionElementid,
level1Type:this.upload.level1Type,
level2Type:'',
text:`${generage.printModel.value},${this.captionGeneration}`,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
userId:this?.userInfo?.userId,
isTestUser:this.driver__.driver?false:this.isTest,
version:1,//为1就是Print
gender:'',
}
if(generateType == 'image'){
if(generage?.collectionElementid){
data.text = generage.printModel.value
}else{
message.info(
this.t('PrintboardUpload.jsContent4')
);
return
}
}else if(generateType == 'text'){
data.collectionElementId = ''
data.level2Type = ''
// this.beforeUpload(false)
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 250){
message.info(
this.t('PrintboardUpload.jsContent5')
);
return
}
}else{
message.info(
this.t('PrintboardUpload.jsContent6')
);
return
}
}else if(generateType == 'text-image'){
if(this.useGenerate.imgId){
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 250){
message.info(
this.t('PrintboardUpload.jsContent5')
);
return
}
}else{
message.info(
this.t('PrintboardUpload.jsContent6')
);
return
}
}else{
message.info(
this.t('PrintboardUpload.jsContent4')
);
return
}
}
this.isGenerate = true
//取消请求
// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data,{cancelToken: this.source?.token}).then(
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
if(data.isTestUser){
if(rv.leftUsageCount >= 1){
message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Printboard')}));
}else if(rv.leftUsageCount == 0){
message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
this.isGenerate = false
return
}
}
// rv.uniqueId.forEach((item:any) => {
// let arr:any = {}
// arr.taskId = item
// arr.status = 'execution'
// this.generateList.unshift(arr)
// });
this.setGenerate(rv.uniqueId)
}
).catch(res=>{
this.isGenerate = false
});
},
setGenerate(dataList:any){
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
let data = dataList
let dataNum = dataList.length
this.generateTime = setInterval(()=>{
Https.axiosPost(Https.httpUrls.generateResult, data).then(
(rv) => {
if(this.isGenerate){//防止取消后有正在执行的获取状态
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => {
if(element.status == 'Success'){
element.imgUrl = element.url
element.id_ = GO.id++
this.generateList.unshift(element)
data = data.filter((item:any) => item !== element.taskId);
}
});
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
if(rv.filter((item:any)=>item.status == 'Invalid').length == dataNum){
message.info(this.t('Generate.effectPoor'));
}
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
clearInterval(this.generateTime)
clearInterval(this.remGenerateTime)
this.remGenerate = false
this.isGenerate = false
}
}
}
).catch(res=>{
clearInterval(this.generateTime)
clearInterval(this.remGenerateTime)
this.remGenerate = false
this.isGenerate = false
});
},1000)
},
removeGenerate(){
//取消操作
this.isGenerate = false
this.remGenerate = false
clearInterval(this.generateTime)
if(this.generateProceedList){
let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
let data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
this.generateProceedList = []
}
).catch(res=>{
});
}
},
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
let index = Math.floor(Math.random() * (max - min)) + min;
while(index === num){
index = Math.floor(Math.random() * (max - min)) + min;
}
return index
},
generatePrint(){
let data:any = {}
//随机获取图片id
let generage:any = this.$refs.Generate
let generateList = generage.sketchboardList
let isGenerateListChecked = generateList.filter((item:any) => item.checked)
if(!this.moodBoards.length){ //mood没有图片
let index1 = -1
let index2 = -2
if(isGenerateListChecked.length == 0){ //没pin住
index1 = this.randomRange(0, generateList.length, -1)
index2 = this.randomRange(0, generateList.length, index1)
}else if(isGenerateListChecked.lengthh === 1){ //pin住1个
generateList.forEach((element:any,index:number) => {
if(element.checked){
index1 = index
}
});
index2 = this.randomRange(0, generateList.length, index1)
}else{ //pin住多个
let selectIndexList:any = []
generateList.forEach((element:any,index:number) => {
if(element.pin){
selectIndexList.push(index)
}
});
index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
index2 = this.randomRange(0, generateList.length, selectIndexList[index1]) //除了选中的外再来一个
}
data = {
select1Id:generateList[index1].id,
select2Id:generateList[index2].id
}
}else{
let index1 = this.randomRange(0, this.moodBoards.length, -1)
let index2 = -2
if(isGenerateListChecked.length == 0){ //没pin住
index2 = this.randomRange(0, generateList.length, -1)
}else if(isGenerateListChecked.lengthh === 1){ //pin住1个
generateList.forEach((element:any,index:number) => {
if(element.pin){
index2 = index
}
});
}else{ //pin住多个
let selectIndexList:any = []
generateList.forEach((element:any,index:number) => {
if(element.pin){
selectIndexList.push(index)
}
});
index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
}
data = {
select1Id:this.moodBoards[index1].resData.id,
select2Id:generateList[index2].id
}
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
this.loadingShow = true
Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
if(rv){
this.generateList = []
let value = {
id:rv.generateItemId,
imgUrl:rv.generateItemUrl,
id_:GO.id++,
like:rv.isLiked
}
this.generateList.push(value)
this.loadingShow = false
}
}).catch(res=>{
this.loadingShow = false
})
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.init(this.generateList,index)
},
generageAdd(item:any){
// if(this.isUseGenerate){
// let data = {
// imgId:item.id,
// imgUrl:item.imgUrl,
// designType:'generate',
// level2Type:'',
// }
// this.setSetchboardGenerate(data)
// }else{
item.type_ = {
type1: "generate",
type2: 'Printboard',
},
item.resData = JSON.parse(JSON.stringify(item))
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
this.store.commit("addGenerateMaterialFils", item);
if(this.driver__.driver){
driverObj__.moveNext()
}
// }
scaleImage.init(this.printboardList,index)
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
console.log(data);
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.scene = data
this.openMenu = false
},
@@ -1163,7 +706,7 @@ export default defineComponent({
}
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
@@ -1252,7 +795,7 @@ export default defineComponent({
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_layout{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
@@ -1263,6 +806,7 @@ export default defineComponent({
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
@@ -1326,11 +870,6 @@ export default defineComponent({
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.input_box{
input{
}
}
.modal_img{
flex: 1;
display: flex;
@@ -1338,11 +877,17 @@ export default defineComponent({
justify-content: flex-start;
position: relative;
align-content: flex-start;
.modal_imgItem:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
.modal_imgItem{
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: 30rem;
height: 30rem;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
@@ -1352,10 +897,7 @@ export default defineComponent({
max-width: 100%;
width: auto;
}
&:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
&.active{
opacity: 0.5;
// border: 2px solid;