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

34
src/component/Detail/habit.vue
View File

@@ -129,7 +129,7 @@
<div class="habit_btn">
<div class="model_current">
<div class="model_text">{{ $t('Habit.Current') }}</div>
<div class="model_img">
<div class="model_img generalScroll">
<img :src="workspaceItem.mannequinUrl" alt="">
</div>
</div>
@@ -149,14 +149,14 @@
{{ $t('Habit.User') }}
</div>
</div>
<div class="model_img" v-show="systemSeleves" v-mousewheel>
<div class="model_img generalScroll" v-show="systemSeleves" v-mousewheel>
<div class="model_img_item">
<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
</div>
</div>
</div>
<div class="model_img" v-show="!systemSeleves" v-mousewheel>
<div class="model_img generalScroll" v-show="!systemSeleves" v-mousewheel>
<div class="model_img_item">
<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
@@ -1128,33 +1128,7 @@ export default defineComponent({
flex: 1;
align-items: center;
overflow-x: auto;
&.model_img::-webkit-scrollbar {
/* 竖轴的宽度 */
width: calc(1rem*1.2);
/* 横轴的高度 */
height: calc(1rem*1.2);
transition: all .3s;
}
/* 进度 */
&.model_img::-webkit-scrollbar-thumb {
border-radius: calc(1rem*1.2);
background: rgba(238, 238, 244, 0);
}
/* 轨道 */
&.model_img::-webkit-scrollbar-track {
border-radius: calc(1rem*1.2);
background: rgba(238, 238, 244, 0);
}
&.model_img:hover {
// overflow-x: scroll;
&.model_img::-webkit-scrollbar-thumb {
background: #543087;
}
/* 轨道 */
&.model_img::-webkit-scrollbar-track {
background: rgba(84, 48, 135,.2);
}
}
>div{
display: flex;

31
src/component/HomePage/ExportModel.vue
View File

@@ -465,7 +465,8 @@ export default defineComponent({
position.y = maxHeight;
}
}
setCanvasImage(img,key,position.x,position.y)//设置图片
console.log(allItem,key);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
@@ -611,7 +612,27 @@ export default defineComponent({
}
return imgWidth
}
let setCanvasImage = (img,key,left,top)=>{
let setCanvasImage = (img,key,left,top,data)=>{
// data
console.log(data);
let imgId = 0
let designType = ''//表示收藏或者generate
let level1Type = ''//表示sketch或者print
if(key == 'disposeMoodboard'){
imgId = data.id
}else if(key == 'moodboardFiles'){
}else if(key == 'sketchboardFiles'){
}else if(key == 'printboardFiles'){
}else if(key == 'likeDesignCollectionList'){
}else if(key == 'upImgFiles'){
}
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
let imgWidth = setImageWidth(key)
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
@@ -916,6 +937,10 @@ export default defineComponent({
//设置画布监听修改添加事件，用来做撤回功能
let updateCanvasState = (str) =>{
const canvasAsJson = JSON.stringify(canvas.toJSON());
console.log(canvas.toJSON());
var json = canvas.toJSON(['aaaID']);
const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
console.log(json,d);
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
@@ -1128,7 +1153,7 @@ export default defineComponent({
const reader = new FileReader();
reader.onload = (e) => {
fabric.Image.fromURL(e.target.result,(img) => {
setCanvasImage(img,"sketchboardFiles",0,canvas.wrapperEl.parentNode.scrollTop)
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
input.value = ''

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

@@ -1,40 +1,6 @@
<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'">
<label>
<input
type="checkbox"
v-model="checkbox[0].type"
@click="setKeyword(0)"
/>
<span>{{ $t('Generate.ImageOnly') }}</span>
</label>
</div>
<div>
<label
:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
>
<input
type="checkbox"
v-model="checkbox[1].type"
@click="setKeyword(1)"
/>
<span>{{ $t('Generate.TextOnly') }}</span>
</label>
</div>
<div>
<label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
<input
type="checkbox"
v-model="checkbox[2].type"
@click="setKeyword(2)"
/>
<span>{{ $t('Generate.TextImage') }}</span>
</label>
</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> -->
<div v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
<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">
@@ -54,26 +20,19 @@
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
:class="[checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
:class="[driver__.driver?'showEvents':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
<a-spin size="small" :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>
@@ -89,7 +48,7 @@
@keydown.enter="getgenerate()"
@click="inputFocus()"
/>
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard'">
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
<a-upload
class="search_upImg"
:capture="null"
@@ -107,10 +66,9 @@
>
</a-upload>
</i>
<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></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"
@@ -131,7 +89,7 @@
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
<span ref="inputShowText"></span>
<span class="inputShowText" ref="inputShowText"></span>
</div>
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
@@ -172,7 +130,7 @@
</div>
</div>
</div> -->
<div class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
<div class="generage_img Guide_1_6" :style="[isGenerate?'overflow:hidden':'']">
<div
class="generage_img_item"
v-for="(item, index) in fileList"
@@ -181,6 +139,7 @@
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
>
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'',]"
@@ -196,10 +155,6 @@
</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>
@@ -220,33 +175,18 @@ 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";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
components: {
scaleImage,
generalMenu,
createSlogan,
sketchCategory,
},
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:'',
@@ -271,69 +211,37 @@ export default defineComponent({
value:'Painting Style',
label:useI18n().t('Generate.Model1')
})
let checkboxImage = ref()
let imgList = ref([]);
let selectImgList: any = ref([]);
let selectImgListIds: any = ref([]);
let isShowLoading: any = ref(false);
let selectCode: any = ref("");
let currentPage: any = ref(1);
let searchPictureName = ref("");
let pageSize = ref(20);
let total = ref(0);
let searcMaterialhName: any = ref(""); //搜索名字
let designType: any = ref(null);
let store = useStore();
let fileList: any = ref([
]);
let sketchboardList:any = ref([])
let collectionElementid = ref()
let level2Type = ref('')
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let sketchCatecoryList:any = ref([])
let workspace:any = ref({})
let loadingShow = ref(false)
let isGenerate = ref(false)//判断是否正在进行generate
let inputShow = ref(false)//表示是否出现红框
let inputTime = ref()
let driver__:any = inject('driver__')
let {t} = useI18n()
let isMmerge = ref(false)
let isTest = ref()
let userInfo:any = {}
let generateId:any = ref([])
let generateTime:any = ref()
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let scene:any = props.scene
return {
imgList,
selectImgList,
selectImgListIds,
isShowLoading,
selectCode,
currentPage,
searchPictureName,
pageSize,
total,
searcMaterialhName,
designType,
checkbox,
selectCheckbox,
store,
fileList,
sketchboardList,
collectionElementid,
level2Type,
checkboxImage,
printModel,
printModelList,
loadingShow,
isGenerate,
scene,
@@ -345,10 +253,8 @@ export default defineComponent({
inputTime,
driver__,
t,
isMmerge,
isTest,
userInfo,
generateId,
generateTime,
generateProceedList,
remGenerate,
@@ -376,6 +282,7 @@ export default defineComponent({
type1: "generate",
type2: prop.msg,
},
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
@@ -394,39 +301,15 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspace = computed(()=>{
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
if(this.type_.type2 == 'Sketchboard'){
this.checkbox=[
{
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:{
driver__:{
handler(newVal,oldVal){
if(this.type_.type2 == 'Printboard'){
if(newVal.index >= 14 && newVal.index < 15){
this.setKeyword(newVal.index-14)
}else{
}
}else if(this.type_.type2 == 'Sketchboard'){
@@ -435,7 +318,8 @@ export default defineComponent({
}
},
workspace(newVal,oldVal){
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.name
},
// moodboarList(newVal,oldVal){
@@ -480,7 +364,6 @@ export default defineComponent({
driverObj__.moveNext()
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
@@ -495,61 +378,12 @@ export default defineComponent({
message.info(this.t('Generate.jsContent2'));
}
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;
});
nextTick().then(()=>{
this.checkbox[num].type = true
this.$emit('generateCheckbox',this.checkbox[0].type)
this.checkboxImage = this.checkbox[1].type
// if(this.checkboxImage){
// this.sketchboardList.forEach((v:any)=>{
// v.checked = false
// })
// }
})
if(num == 1){
this.level2Type = ''//点击文字生成就把衣服类型清空
}
if(num == 2 || num == 1){
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')
// // );
// // return
// // }
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 250){
@@ -559,7 +393,7 @@ export default defineComponent({
return
}
}else{
if(this.sketchboardList[0].imgUrl){
if(this.sketchboardList?.[0]?.imgUrl){
}else{
message.info(
@@ -569,23 +403,36 @@ export default defineComponent({
}
}
let level2Type = ''
let collectionElementId = ''
let base64 = ''
if(this.sketchboardList?.[0]){
level2Type = this.sketchboardList[0].categoryValue?this.sketchboardList[0].categoryValue:''
collectionElementId = this.sketchboardList[0].id
if(this.sketchboardList[0].base64){
base64 = this.sketchboardList[0].imgUrl
}
}
if(this.upload.level1Type == "Sketchboard"){
console.log(this.sketchboardList);
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
}
let data = {
generateType:'',
generateType:'text',
designType:'collection',
collectionElementId:this.sketchboardList[0].id?this.sketchboardList[0].id:'',
collectionElementId:collectionElementId,
level1Type:this.upload.level1Type,
level2Type:this.scene?.value?this.scene?.value:'',
level2Type:level2Type,
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:'',
gender:this.workspace.sexEnum.name,
base64:base64,
}
console.log(data);
return
this.isGenerate = true
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
@@ -610,31 +457,6 @@ export default defineComponent({
).catch(res=>{
this.isGenerate = false
});
// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
// (rv) => {
// console.log(rv)
// if(rv){
// this.fileList = []
// let arr
// rv.generatedCollectionItems.forEach((v:any,index:number)=>{
// arr = {
// id:rv.generatedCollectionItems[index].generateItemId,
// imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
// like:rv.generatedCollectionItems[index].isLiked
// }
// this.fileList.push(arr)
// this.loadingShow = false
// })
// nextTick().then(()=>{
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
// })
// }
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
setGenerate(dataList:any){
this.remGenerateTime = setTimeout(()=>{
@@ -653,6 +475,12 @@ export default defineComponent({
element.id_ = GO.id++
this.fileList.unshift(element)
data = data.filter((item:any) => item !== element.taskId);
this.sketchCatecoryList.forEach((itemCategory:any) => {
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.name
element.category = itemCategory?.value
}
});
}
});
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -794,39 +622,7 @@ export default defineComponent({
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.collectionElementid = ''
this.sketchboardList.splice(item, 1);
// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
// this.printModel = {
@@ -839,10 +635,18 @@ export default defineComponent({
},
likeFile(item:any,str:string){
if(str == 'like'){
console.log();
let level2Type = ''
if(this.upload.level1Type == "Sketchboard"){
level2Type = item.category
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
}
let data = {
generateDetailId:item.id,
level1Type:"Moodboard",
level2Type: '',
level1Type:this.type_.type2,
level2Type: level2Type,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
@@ -888,13 +692,6 @@ export default defineComponent({
closeModal() {
// this.myMaterialModalShow = false
this.searchPictureName = "";
this.designType = null;
this.selectImgList = [];
this.selectImgListIds = [];
this.imgList = [];
this.currentPage = 1;
// this.pageSize = 10;
this.total = 0;
},
},
});
@@ -930,21 +727,6 @@ export default defineComponent({
z-index: 2;
}
.generate_checkbox {
z-index: 10;
div {
label {
display: flex;
cursor: pointer;
input {
margin-right: calc(0.5rem*1.2);
padding-left: calc(1.5rem*1.2);
}
span {
font-size: calc(1.2rem*1.2);
font-weight: 500;
}
}
}
}
.generage_input {
}
@@ -959,16 +741,19 @@ export default defineComponent({
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
position: relative;
&.active {
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
img {
transform: scale(0.9);
}
.delete_like_file_block{
pointer-events:none;
}
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
img {
transform: scale(0.9);
}
.delete_like_file_block{
pointer-events:none;
}
.operate_file_block{
pointer-events:none;
}
}
img {
width: calc(10rem*1.2);
height: calc(10rem*1.2);
@@ -995,13 +780,6 @@ export default defineComponent({
// img {
// }
// }
&.forbidden{
cursor:not-allowed;
img{
cursor:not-allowed;
}
}
.upload_file_item_content {
display: flex;
align-items: center;

10
src/component/HomePage/Material.vue
View File

@@ -22,17 +22,17 @@
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
</div>
</div> -->
</div>
<div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
<img src="@/assets/images/homePage/loading.gif" alt="">
</div>
</div>
<div class="no_data_block loading_block" v-show="isShowLoading">
<!-- <div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
</div> -->
</div>
<!-- </a-modal> -->
@@ -519,7 +519,7 @@ export default defineComponent({
&.material_content_body::-webkit-scrollbar{display: none;}
.content_img_item{
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);

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;

416
src/component/HomePage/SketchboardUpload.vue
View File

@@ -56,14 +56,14 @@
></span>
</div>
</div>
<div
<!-- <div
class="pin_block"
v-show="file?.status === 'done'"
>
<a-checkbox v-model:checked="file.pin"
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
>
</div>
</div> -->
</div>
<div
class="upload_file_item upload_component"
@@ -114,8 +114,6 @@
ref="Generate"
msg="Sketchboard"
:sketchCatecoryList="sketchCatecoryList"
@generateCheckbox="getgenerateCheckbox"
@setGenerate = setSetchboardGenerate
></Generate>
</div>
<div class="modal_right">
@@ -124,7 +122,7 @@
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<div class="modal_img modal_img_x" v-mousewheel>
<!-- <div class="modal_img modal_img_x" v-mousewheel>
<div class="mousewheel">
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
@@ -134,79 +132,33 @@
</div>
</div>
</div>
</div> -->
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_border">
<div class="Guide_1_9_2 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('LibraryPage.Generate') }}
</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" class="modal_imgItem Guide_1_13_2" :class="[item.status != 'Success'?'hideEvents':'',driver__.driver?'showEvents':'',item?.checked?'active':'']" :key="item">
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<div
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- <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>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</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('SketchboardUpload.PIN') }}</a-checkbox>
<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="mark_loading_btn" :class="[driver__.driver?'hideEvents':'']" @click="removeGenerate">{{$t('Generate.Close')}}</div>
</div>
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
@@ -238,20 +190,13 @@ export default defineComponent({
let fileList: any = ref([
]);
let openClick: any = ref(1);
let generateList:any = ref([
])
let store:any =useStore()
let generateCheckbox:any = ref()
let loadingShow = ref(false)
let isGenerate = ref(false)
let sketchCatecoryList:any = computed(()=>{
return store.state.Workspace.workspacePosition
})
let workspace:any = ref({})
let inputShow = ref(false)
let inputTime = ref()
let sketchboardList:any = computed(()=>{
return store.state.UploadFilesModule.sketchboard
})
@@ -259,11 +204,6 @@ export default defineComponent({
let driver__:any = inject('driver__')
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,
@@ -274,26 +214,15 @@ export default defineComponent({
return {
fileList,
openClick,
generateList,
store,
generateCheckbox,
loadingShow,
isGenerate,
sketchCatecoryList,
workspace,
inputShow,
inputTime,
sketchboardList,
t,
driver__,
isTest,
userInfo,
generateTime,
remGenerate,
generateProceedList,
remGenerateTime,
useGenerate,
isUseGenerate,
};
},
data() {
@@ -314,6 +243,7 @@ export default defineComponent({
token: "",
uploadUrl: "",
captionGeneration:'',
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
@@ -362,7 +292,8 @@ export default defineComponent({
}
},
watch:{
workspace(newVal,oldVal){
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.name
},
sketchboardList:{
@@ -392,7 +323,7 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspace = computed(()=>{
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
if(this.driver__.driver){
@@ -402,25 +333,6 @@ export default defineComponent({
}
},
methods: {
setUseGenerate(){
this.isUseGenerate = !this.isUseGenerate
let sketchMaterialFiles:any = computed(()=>{
return this.store.state.UploadFilesModule.sketchMaterialFiles
})
let Material:any = this.$refs.Material
Material.setUseGenerate(sketchMaterialFiles.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
@@ -430,7 +342,6 @@ export default defineComponent({
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
Material.setUseGenerate([])
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
@@ -454,11 +365,9 @@ export default defineComponent({
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.init(this.generateList,index)
},
getgenerateCheckbox(value:any){
this.generateCheckbox = value
scaleImage.init(this.sketchboardList,index)
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
@@ -529,10 +438,6 @@ export default defineComponent({
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
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){
@@ -540,34 +445,6 @@ export default defineComponent({
}
this.captionGeneration += str + value
},
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
if(this.captionGeneration?.split(/\s+/).length > 250){
(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.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)
},
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
@@ -585,51 +462,7 @@ export default defineComponent({
this.store.commit("setSketchboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Sketchboard",
level2Type: item.category,
gender:this.workspace.sex,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
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)
}
});
},
recollection() {
this.isUseGenerate = false
this.useGenerate = {
imgId : '',
imgUrl:1,
@@ -682,202 +515,6 @@ export default defineComponent({
}
this.store.commit("setSketchboardFile", this.fileList);
},
//发送请求生成图片
getgenerate(){
clearInterval(this.remGenerateTime)
this.remGenerate = false
// this.sketchCatecoryList = this.store.state.Workspace.workspacePosition
let sketchCatecoryList = this.sketchCatecoryList
// if(this.isTest){//试用用户禁止使用
// message.warning(
// this.t('isTest.available')
// );
// return
// }
if(this.isGenerate){
return
}
let generage:any = this.$refs.Generate
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,
level1Type:this.upload.level1Type,
level2Type:this.useGenerate.level2Type,
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
userId:this?.userInfo?.userId,
isTestUser:this.driver__.driver?false:this.isTest,
version:1,//为1就是Print
gender:this.workspace.sex,
}
if(generateType == 'image'){
if(this.useGenerate.imgId){
data.text = ''
}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.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){
let generage:any = this.$refs.Generate
let sketchCatecoryList = this.sketchCatecoryList
let categoryValue:any
let data = dataList
let dataNum = dataList.length
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
generage.sketchboardList.forEach((item:any) => {
if(item.checked){
categoryValue = item.categoryValue
}
});
this.generateTime = setInterval(()=>{
// let data = this.generateList.filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
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.sketchCatecoryList.forEach((itemCategory:any) => {
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.name
element.category = itemCategory?.value
}
});
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=>{
});
}
},
generageAdd(item:any){
item.type_ = {
type1: "generate",
type2: 'Sketchboard',
},
item.resData = JSON.parse(JSON.stringify(item))
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
this.store.commit("addGenerateMaterialFils", item);
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
});
</script>
@@ -963,7 +600,7 @@ export default defineComponent({
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(4rem*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);
@@ -1058,6 +695,7 @@ export default defineComponent({
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
@@ -1144,6 +782,8 @@ export default defineComponent({
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 30rem;
height: 30rem;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
@@ -1152,7 +792,7 @@ export default defineComponent({
opacity: 1;
}
img{
object-fit: cover;
object-fit: contain;
width: 100%;
height: 100%;
}

2
src/component/HomePage/createSlogan.vue
View File

@@ -101,6 +101,7 @@ export default defineComponent({
let { t } = useI18n();
let canvas = reactive({});
let scale = 2;
let exportWH = 512
let canvasWH = ref(0);
let textData = reactive({
fill:'#000000',
@@ -143,6 +144,7 @@ export default defineComponent({
let height = canvasBox.offsetHeight;
canvasBox.style.width = height+'px'
canvasWH.value = height
scale = exportWH/canvasWH.value
var canvasDom = document.createElement("canvas");
let oldCanvasDom = canvasBox.querySelector('canvas')
if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容

500
src/component/HomePage/productImg.vue Normal file
View File

@@ -0,0 +1,500 @@
<template>
<a-modal
class="productImg_modal generalModel"
v-model:visible="productImg"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="productImgMask"
:keyboard="false"
:destroyOnClose="true"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="productImg_content">
<div class="modal_title_text">
<div>Finalize</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="productImg_content_bottom">
<div class="productImg_left">
<div class="productImg_content_item_title">Select Collection</div>
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
<img v-lazy="item.designOutfitUrl" alt="">
</div>
</div>
<div class="productImg_content_item_title">Up Load</div>
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content content_item_imgBox_itemImg"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
<div class="upload_file_item upload_component ">
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:multiple="true"
:maxCount="8"
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 class="productImg_content_item_title">Magic Tools</div>
</div>
<div class="productImg_right">
<div class="productImg_content_item_title">Selected Product</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
<img v-lazy="item.url" alt="">
<div class="productImg_right_item_like">
<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
</div>
</div>
</div>
<div class="productImg_content_item_title productImg_right_titleBtn">
Selected Product
<div class="button_second">Export</div>
</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
<img v-lazy="item.url" alt="">
<div class="productImg_right_item_like">
<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
</a-modal>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl,isMoible } from "@/tool/util";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Upload,message,Modal } from 'ant-design-vue';
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
import ExportModel from "@/component/HomePage/ExportModel.vue";
import { useStore } from "vuex";
export default defineComponent({
components:{
ExportModel,
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
let productImg: any = ref(false);//弹窗
let productImgMask:any = ref(false)//弹窗遮罩
let productImgData:any = reactive({
isShowMark:false,
fileList:[],
generateList:[
{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:2,
}
],
likeList:[
{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},
],
})
let likeDesignCollectionList: any = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let init = ()=>{
productImg.value = true
console.log(likeDesignCollectionList);
}
let cancelDsign = ()=>{
Modal.confirm({
title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
cleardata()
}
});
}
let cleardata = ()=>{
productImg.value = false
productImgData.isShowMark = false
}
let fileUploadChange = (data: any)=> {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
// file.type_ = {
// type1:'upload',
// type2:'Moodboard'
// };
file.id = res.data.id
productImgData.fileList.filter((v: any) => v.status === "done");
}else{
bor = false
}
// this.showFileList = productImgData.fileList
} else if (file.status === "error") {
bor = false
}
}
let beforeUpload = (file: any)=>{
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(useI18n().t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.info(useI18n().t('MoodboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
let deleteFile = (index:any)=>{
productImgData.fileList.splice(index,1)
}
let likeFile = (item:any,str:any,index:any) =>{
if(str == 'like'){
productImgData.likeList.push(item)
productImgData.generateList.splice(index,1)
}else{
productImgData.generateList.push(item)
productImgData.likeList.splice(index,1)
}
}
let setExport = ()=>{
// let exportModel:any = this.$refs.ExportModel
// exportModel.init()
}
let setTask = (data:any)=>{
emit('setTask',data)
}
return {
productImg,
productImgMask,
...toRefs(productImgData),
likeDesignCollectionList,
init,
cancelDsign,
fileUploadChange,
beforeUpload,
deleteFile,
likeFile,
setExport,
setTask,
};
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
// moodTemplateId: "", //模板id
token: "",
uploadUrl: "",
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
};
},
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.productImg = false
// // this.productImgList = []
// // this.productImgIndex = 0
// },
// download(){
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.productImgIndex = index
// // console.log(this.productImgIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
<style lang="less">
.productImg_modal {
.productImg_page{
overflow-y: auto;
height: 100%;
&.productImg_page::-webkit-scrollbar{display: none;}
}
.productImg_content{
display: flex;
flex-direction: column;
height: 100%;
.modal_title_text{
height: 4rem;
}
}
.productImg_content_bottom{
height: calc(100% - 4rem - 2.4rem);
--border-color: #c4c4c4;
display: flex;
justify-content: space-between;
flex: 1;
.upload_item{
}
.upload_file_item{
display: flex;
margin-right: 1rem;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.8rem;
margin-bottom: 1rem;
}
.productImg_content_item_intro{
font-size: 1.4rem;
}
.productImg_content_item_imgBox{
display: flex;
overflow-x: auto;
width: auto;
margin-bottom: 2rem;
align-items: center;
.content_item_imgBox_itemImg{
display: flex;
margin-right: 1rem;
position: relative;
height: 12rem;
img{
width: 100%;
object-fit: contain;
}
&.content_item_imgBox_itemImg:hover{
.content_item_imgBox_itemImg_delete{
display: block;
cursor: pointer;
}
}
.content_item_imgBox_itemImg_delete{
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
position: absolute;
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
}
}
.content_item_imgBox_itemImg:last-child{
margin-right: 0;
}
}
.productImg_left,.productImg_right{
display: flex;
flex-direction: column;
}
.productImg_content_item:last-child{
margin-bottom: 0;
}
.productImg_left{
width: 25%;
// width: 45%;
.productImg_content_item_imgBox{
.content_item_imgBox_itemImg{
width: 5rem;
flex-shrink: 0;
}
}
}
.productImg_right{
width: 75%;
padding-left: 2rem;
height: 100%;
justify-content: space-between;
.productImg_right_item_box{
height: 40%;
display: flex;
overflow-x: auto;
background: #f6f6fa;
border-radius: 2rem;
margin-bottom: 2%;
padding: 0 1.5rem;
.productImg_right_item{
height: 100%;
padding: 1rem 0;
margin-right: 1rem;
position: relative;
img{
height: 100%;
}
.productImg_right_item_like{
display: none;
position: absolute;
top: 1rem;
right: 2rem;
cursor: pointer;
.fi-sr-heart{
color: red;
}
}
}
.productImg_right_item:hover{
.productImg_right_item_like{
display: block;
}
}
.productImg_right_item:last-child{
margin-right: 0;
}
}
.productImg_right_item_box:last-child{
margin-bottom: 0;
}
.productImg_right_titleBtn{
display: flex;
justify-content: space-between;
}
}
}
}
</style>

2
src/component/HomePage/sketchCategory.vue
View File

@@ -34,7 +34,7 @@
cate, index
) in disignTypeList"
:key="index"
@click="
@click.stop="
selectFileCategory(
item,
cate

337
src/component/WorksPage/Falls.vue Normal file
View File

@@ -0,0 +1,337 @@
<template>
<div class="Falls">
<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
:style="{
width: item.style.width + 'px',
height: item.style.height + 'px',
top: item.style.top + 'px',
left: item.style.left + 'px',
}"
>
<!-- 图片 -->
<div class="falls_item_img">
<img
v-lazy="item.designPythonOutfitUrl"
:style="{
height: item.style.imgHeihgt + 'px',
}"
/>
</div>
<!-- 文字 -->
<div class="falls_item_bottom">
<div class="falls_item_text" :title="item.text">
{{item.text}}
</div>
<div class="falls_item_content">
<div class="falls_item_user">
<img src="http://121.40.53.210:3000/falls/5.png" alt="">
<div class="falls_item_user_detail">
<div>{{item.name}}</div>
<span>地区</span>
</div>
</div>
<div class="falls_item_detail">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
</div>
<div>
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
<i v-else class="fi fi-rr-social-network"></i>
<span>321</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg>
<span>321</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
props:{
isScroll:{
type:Boolean,
default:true,
},
},
setup(){
let list = ref([])
let wait_list = ref([])
let width = ref(300)
let num_x = ref(1)
let gap_x = ref(0)
let gap_y = ref(0)
let poss = ref([])
let loading = ref(false)
let computedHeight = 0
return{
list,
wait_list,
width,
num_x,
gap_x,
gap_y,
poss,
loading,
computedHeight,
}
},
directives:{
fadeIn:{
mounted (el,binding) {
let dom
if(binding.value){
dom = document.querySelector('.works_page .page_content')
}else{
dom = document.querySelector('.homeRecommend_content_body')
}
gsap.registerPlugin(ScrollTrigger);
let tl1 = gsap.timeline();
tl1.from(el,1, {y:'30px',opacity:0},)
ScrollTrigger.create({
trigger: el, // 触发器元素
start: "top 90%", // 滚动触发器的起始滚动位置
end: '100% 80%', // 滚动触发器的结束滚动位置
// markers: true, // 开启标注功能
scrub: true,
animation:tl1,
scroller:dom,//设置指定元素为滚动依据
scrub:2,
// onUpdate:(v)=>{
// if(v.progress < 0.1){
// v.trigger?.classList.remove('active')
// }else{
// v.trigger?.classList.add('active')
// // v.trigger?.classList.add('active')
// }
// }
});
}
},
},
mounted () {
this.resize()
window.addEventListener("resize", this.resize);
let domFalls = document.querySelector('.Falls')
let domCss = getComputedStyle(domFalls);
const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
},
beforeDestroy () {
this.wait_list = []
window.removeEventListener("resize", this.resize);
},
// 挂载方法
methods: {
push(arr) {
this.wait_list = this.wait_list.concat(arr);
if (!this.loading) {
this.loading = true;
this.loadImg();
}
},
loadImg() {
if (this.wait_list.length <= 0) {
this.loading = false;
this.$emit("loadend");
return;
}
let url = this.wait_list[0].designPythonOutfitUrl;
let data = this.wait_list[0]
let img = document.createElement("img");
img.src = url;
img.style.width = this.width + "px";
img.style.maxHeight = this.width+330 + "px";
img.style.position = "absolute";
img.style.top = "-99999px";
document.body.appendChild(img);
img.addEventListener("load", () => {
var idx = 0;
var pos_num = this.poss[idx];
for (var i = 1; i < this.poss.length; i++) {
if (pos_num > this.poss[i]) {
idx = i;
pos_num = this.poss[i];
}
}
let width = img.offsetWidth;
let height = img.offsetHeight+this.computedHeight;
let top = this.poss[idx] + this.gap_y;
let left = (idx + 1) * this.gap_x + idx * width;
let imgHeight = height - this.computedHeight
this.poss[idx] = top + height;
let obj = {
designPythonOutfitUrl:url,
style: { width, height, top, left, imgHeight },
...data
};
this.list.push(obj);
img.remove();
this.wait_list.splice(0, 1);
this.$el.style.height =
Math.max(...this.poss) + this.gap_y + "px";
if (this.wait_list.length <= 0) {
this.loading = false;
this.$emit("loadend");
} else {
this.loadImg();
}
});
},
resize() {
var t_width = this.$el.offsetWidth;
var width = this.width;
var num_x = parseInt(t_width / (width + 20));
if (num_x < 1) num_x = 1;
var remain = t_width - width * num_x;
var gap_x = remain / (num_x + 1);
this.gap_x = gap_x;
this.gap_y = gap_x > 30 ? 30 : gap_x;
this.num_x = num_x;
var poss = [];
for (var i = 0; i < num_x; i++) poss.push(0);
this.poss = poss;
this.reset();
},
reset() {
for (let i = 0; i < this.list.length; i++) {
let width = this.list[i].style.width;
let height = this.list[i].style.height;
var idx = 0;
var pos_num = this.poss[idx];
for (var j = 1; j < this.poss.length; j++) {
if (pos_num > this.poss[j]) {
idx = j;
pos_num = this.poss[j];
}
}
let top = this.poss[idx] + this.gap_y;
let left = (idx + 1) * this.gap_x + idx * width;
this.poss[idx] = top + height;
this.list[i].style = { width, height, top, left };
}
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
},
},
})
</script>
<style lang='less' scoped>
.Falls {
width: 100%;
height: auto;
position: relative;
--paddingBottom:10px;
--textMarginTop:10px;
--textHeight:25px;
--contentHeight:35px;
.falls_item{
position: absolute;
transition: all 0.15s;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 2rem;
overflow: hidden;
padding-bottom: var(--paddingBottom);
&.falls_item:hover{
.falls_item_img{
img{
transform: scale(1.1);
}
}
}
.falls_item_img{
cursor: pointer;
width: 100%;
overflow: hidden;
img{
width: 100%;
object-fit: cover;
transition: all .3s;
}
}
.falls_item_bottom{
padding: 0 10px;
.falls_item_text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
font-size: 18px;
margin-top: var(--textMarginTop);
height: var(--textHeight);
}
.falls_item_content{
display: flex;
justify-content: space-between;
align-items: center;
color: #525252;
height: var(--contentHeight);
.falls_item_user{
width: 50%;
display: flex;
align-items: center;
img{
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 10px;
}
.falls_item_user_detail{
line-height: 1;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
div{
font-size: 16px;
}
span{
font-size: 12px;
color: #525252;
}
}
}
.falls_item_detail{
display: flex;
width: 40%;
justify-content: space-between;
>div{
svg,i{
width: 10px;
height: 10px;
}
span{
margin-left: 3px;
font-size: 12px;
}
}
}
}
}
}
}
</style>