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

2023-11-13-dist

Browse Source
This commit is contained in:
X1627315083
2023-11-13 09:52:57 +08:00
parent 1298a3051e
commit 6cad540fbb
40 changed files with 360 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/style/style.css
View File

@@ -180,9 +180,14 @@ li {
.ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner::after {
background-color: #767676;
}
.ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-inner {
background-color: #d9d9d9;
}
.ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-inner::after {
border-color: #eeeeee;
}
.ant-modal-mask {
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
min-width: 1440px;
border-radius: 1rem;
overflow: hidden;
height: calc(100% - 7rem);

13
src/assets/style/style.less
View File

@@ -191,10 +191,21 @@ ul,li{
.ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner::after{
background-color: #767676;
}
//禁止选中状态
.ant-checkbox-wrapper-disabled{
.ant-checkbox-disabled{
.ant-checkbox-inner{
background-color: #d9d9d9;
}
.ant-checkbox-inner::after{
border-color: #eeeeee ;
}
}
}
.ant-modal-mask{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
min-width: 1440px;
// min-width: 1440px;
border-radius: 1rem;
overflow: hidden;
height: calc(100% - 7rem);

46
src/component/Detail/DesignPrintOperation.vue
View File

@@ -183,17 +183,18 @@ export default defineComponent({
//操作旋转
rotote:{
mounted(el,value){
el.addEventListener('mousedown', (e) => {
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.value[1].scale
angle = value.value[1].rotateZ
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.value[0]]
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "rotateZ("+ angle + "deg)"
el.addEventListener('mousedown', (e) => {
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
@@ -215,8 +216,7 @@ export default defineComponent({
document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value?.value[0]].transform.rotateZ = angle
// console.log(value.instance.printStyleList);
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('mousemove',mousemove)
@@ -365,18 +365,18 @@ export default defineComponent({
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.printStyleList[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.printStyleList[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
@@ -452,7 +452,7 @@ export default defineComponent({
if(this.printAmount>this.printStyleList.length){
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
this.printStyleList.push(JSON.parse(JSON.stringify(this.printStyleList[this.printStyleList.length-1])))
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
@@ -487,12 +487,14 @@ export default defineComponent({
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
let width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/3))+1+sketch?.width/3
let width
let scale
if(this.print.width - this.print.height > 0 || this.print.width - this.print.height == 0){
if(this.print.width>this.print.height){
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/3
scale = width / this.print.width.replace(/px/g,'')
}else{
scale = width / this.print.width.replace(/px/g,'')
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/3
scale = width / this.print.height.replace(/px/g,'')
}
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))

53
src/component/HomePage/ExportNewCoolection.vue
View File

@@ -4,14 +4,14 @@
<!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
</div> -->
<div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
<div v-show="exportNav[0].change" class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
<div v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
</div>
</div>
</div>
<div class="img_block_item" v-else>
<div v-show="exportNav[0].change" class="img_block_item" v-else>
<div v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood?.imgUrl" >
@@ -19,7 +19,7 @@
</div>
</div>
<div class="img_block_item">
<div v-show="exportNav[1].change" class="img_block_item">
<div class="small_img_item" v-for="(print) in allBoardData.printboardFiles" :key="print">
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="print.imgUrl">
@@ -32,7 +32,7 @@
</div>
</div>
<div class="img_block_item">
<div v-show="exportNav[2].change" class="img_block_item">
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
<div class="color_content_body">
@@ -49,7 +49,7 @@
</div>
</div>
</div> -->
<div class="img_block_item img_block_item_sketch">
<div v-show="exportNav[3].change" class="img_block_item img_block_item_sketch">
<div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
<div class="all_img_item_block" v-for="v in item" :key="sketch">
<img class="all_img_content" :src="v?.imgUrl">
@@ -63,19 +63,17 @@
</div>
</div>
</div>
<div class="img_block_item img_block_item_sketch_like h50">
<div v-show="exportNav[4].change" class="img_block_item img_block_item_sketch_like h50">
<div class="lager_img_item" v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
<div class="all_img_item_block">
<img class="all_img_content" :src="design.designItemUrl">
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent,ref,nextTick} from 'vue'
import { computed, defineComponent,ref,nextTick, inject} from 'vue'
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
import { useStore } from "vuex";
export default defineComponent({
@@ -86,11 +84,13 @@ export default defineComponent({
const store = useStore();
let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
let exportNav = inject('exportNav')
return {
allBoardData,
likeDesignCollectionList,
sketch,
sketchList,
exportNav,
}
},
watch: {
@@ -103,6 +103,18 @@ export default defineComponent({
},
immediate: true
},
// 'exportNav[3].change':{
// handler(newVal:any,oldVal:any){
// console.log(1111);
// if(newVal){
// this.sketchList = []
// this.sketchList = this.allBoardData.sketchboardFiles
// this.setSketch()
// }
// },
// immediate: true
// },
},
methods: {
setSketch(){
@@ -111,6 +123,9 @@ export default defineComponent({
let sketch1:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
let sketch2:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
let sketch3:any = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
sketch1 = sketch1?sketch1:{}
sketch2 = sketch2?sketch2:{}
sketch3 = sketch3?sketch3:{}
sketch1.num = 0
sketch2.num = 1
sketch3.num = 2
@@ -265,17 +280,21 @@ export default defineComponent({
&.img_block_item_sketch_like{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: flex-start;
>div{
width: 45%;
height: 25rem;
}
}
&.h50{
.lager_img_item{
height: 50rem;
// width: 45%;
width: calc(100%/4.5);
margin-right: 2.5%;
margin-bottom: 2.5%;
height: auto;
// height: 25rem;
}
}
// &.h50{
// .lager_img_item{
// height: 50rem;
// }
// }
}
}

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

@@ -376,7 +376,7 @@ export default defineComponent({
setprintModel(num:any){
if(num == 3){
this.printModel = {
num : this.t('Generate.Generate'),
num : 'Generate',
optype:false,
name:this.t('Generate.Generate')
}

1
src/component/HomePage/Header.vue
View File

@@ -526,6 +526,7 @@ export default defineComponent({
.icon-xiala {
font-size: 1.4rem;
cursor: pointer;
transition: .3s all;
}
.icon_rotate {

99
src/component/LibraryPage/setLabel.vue
View File

@@ -9,36 +9,38 @@
@cancel="clearSetLabel"
>
<div class="setLabel_centent">
<div class="started_btn" @click="removeLabel(options)">删除</div>
<ul class="optionsItem">
<li class="optionsItem_title" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
<div class="setLabel_text">
<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
<span v-show="!optionsItem.openType">{{ optionsItem.classificationName }}</span>
<span v-show="!optionsItem.openType" :title="optionsItem.classificationName">{{ optionsItem.classificationName }}</span>
<input v-show="optionsItem.openType" type="text" v-model="itemName">
<i v-show="optionsItem.openType" @click.stop="putName(index,'affirm',optionsItem)" class="fi fi-br-check"></i>
<i v-show="optionsItem.openType" @click.stop="putName(optionsIndex,'affirm',optionsItem)" class="fi fi-br-check"></i>
<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
</div>
<ul class="childrenItem active" v-mousewheel>
<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.childList" :key="childrenItem.id">
<a-checkbox v-model:checked="childrenItem.checkAll" @change="onCheckAllchildrenItem(optionsItem)"></a-checkbox>
<span v-show="!childrenItem.openType">{{ childrenItem.classificationName }}</span>
<span v-show="!childrenItem.openType" :title="childrenItem.classificationName">{{ childrenItem.classificationName }}</span>
<input v-show="childrenItem.openType" type="text" v-model="itemName">
<i v-show="childrenItem.openType" @click.stop="putName(index,'affirm',childrenItem)" class="fi fi-br-check"></i>
<i v-show="childrenItem.openType" @click.stop="putName(childrenIndex,'affirm',childrenItem)" class="fi fi-br-check"></i>
<i v-show="!childrenItem.openType" @click.stop="putName(childrenIndex,'put',childrenItem)" class="fi fi-rr-edit"></i>
</li>
<li class="newLabel setLabel_text">
<input v-show="optionsItem.addOpenType" type="text" v-model="itemName">
<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="optionsItem.addOpenType" class="fi fi-br-check"></i>
<div v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
<div class="addLabel" v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
</li>
</ul>
</li>
<li class="newLabel setLabel_text optionsItem_title">
<input v-show="openType" type="text" v-model="itemName">
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
<div v-show="!openType" @click="newLabel('')">+</div>
<div>
<input v-show="openType" type="text" v-model="itemName">
<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
<div class="addLabel" v-show="!openType" @click="newLabel('','')">+</div>
</div>
<div class="started_btn" @click="removeLabel(options)">删除</div>
</li>
</ul>
</div>
@@ -299,19 +301,13 @@ export default defineComponent({
max-height: 65rem;
overflow-y: auto;
// border-radius: ;
position: relative;
&.setLabel_centent::-webkit-scrollbar{display: none;}
&.active{
overflow: hidden;
}
.started_btn{
position: absolute;
width: auto;
position: sticky;
top: 0;
z-index: 999;
margin-right: auto;
}
ul{
display: flex;
li{
@@ -328,6 +324,7 @@ export default defineComponent({
width: 80%;
background: rgba(0,0,0,0);
}
}
.setLabel_text{
display: flex;
@@ -335,25 +332,35 @@ export default defineComponent({
align-items: center;
padding: .5rem 1rem;
width: 16rem;
margin: 1rem 1rem;
margin: 2rem 2rem;
border-radius: 1rem;
justify-content: space-between;
flex-shrink: 0;
font-size: 1.8rem;
font-weight: 900;
i{
display: flex;
}
>span{
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.setLabel_text:hover{
background: #efefef;
}
}
.optionsItem{
flex-direction: column;
padding: 1rem;
.optionsItem_title{
margin-bottom: 1rem;
margin-bottom: 2rem;
border-radius: 1rem;
align-items: flex-start;
background-color: #f9f9f9;
border: 0.1rem solid #ebebeb;
// border-bottom: 2px solid rgba(0,0,0,.2);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);
>label{
align-items: center;
}
@@ -361,7 +368,27 @@ export default defineComponent({
max-width: 100%;
overflow: hidden;
overflow-x: auto;
padding-bottom: 2rem;
// padding-bottom: 2rem;
.setLabel_text{
font-weight: 300;
margin: 1rem 1rem;
background: #f0f0f0;
// background: #d5d5d5;
font-size: 1.4rem;
label{
transform: scale(.8);
}
.fi-rr-edit{
opacity: 0;
transition: .3s all;
}
}
.setLabel_text:hover{
// background: #efefef;
.fi-rr-edit{
opacity: 1;
}
}
&.active::-webkit-scrollbar-button:single-button{
display: none;
}
@@ -401,8 +428,30 @@ export default defineComponent({
&.optionsItem_title{
width: 100%;
margin: 0;
justify-content: space-around;
border: none;
background: none;
position: sticky;
background: #fff;
border: none;
>div{
}
.started_btn{
width: auto;
position: sticky;
top: 0;
z-index: 999;
// margin-right: auto;
}
}
div{
>div{
display: flex;
width: 16rem;
display: flex;
align-items: center;
justify-content: center;
}
.addLabel{
border-radius: 50%;
border: 1px solid #000;
display: inline-block;

5
src/lang/cn.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'生成的设计',
SelectedDesign:'喜欢的设计',
Export:'导出',
moodboard:"情绪板",
printboard:"印刷板",
colorboard:"调色板",
sketchboard:"素描板",
mannequins:"人体模型",
jsContent1:'您必须选择一种或多种颜色进行下一步。',
jsContent2:'您必须选择一种或多种颜色进行下一步。',
jsContent3:'导出文件失败。',

5
src/lang/en.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'Generated Design',
SelectedDesign:'Selected Design',
Export:'Export',
moodboard:"moodboard",
printboard:"printboard",
colorboard:"colorboard",
sketchboard:"sketchboard",
mannequins:"mannequins",
jsContent1:'You must choose one or more colors for further process.',
jsContent2:'You must choose one or more colors for further process.',
jsContent3:'Failed to export the file',

5
src/lang/fr.ts
View File

@@ -46,6 +46,11 @@ export default {
GeneratedDesign:'Conception générée',
SelectedDesign:'Conception sélectionnée',
Export:'Exporter',
moodboard:"Conseil d'humeur",
printboard:"carton imprimé",
colorboard:"tableau de couleurs",
sketchboard:"planche à croquis",
mannequins:"mannequins",
jsContent1:'Vous devez choisir une ou plusieurs couleurs pour un processus ultérieur.',
jsContent2:'Vous devez choisir une ou plusieurs couleurs pour un processus ultérieur.',
jsContent3:"Échec de l'exportation du fichier",

5
src/lang/it.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'Progettazione generata',
SelectedDesign:'Disegno selezionato',
Export:'Esportare',
moodboard:"moodboard",
printboard:"cartoncino",
colorboard:"tavola da disegno",
sketchboard:"tavola da disegno",
mannequins:"manichini",
jsContent1:"È necessario scegliere uno o più colori per l'ulteriore elaborazione.",
jsContent2:"È necessario scegliere uno o più colori per l'ulteriore elaborazione.",
jsContent3:'Impossibile esportare il file',

5
src/lang/ja.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'生成されたデザイン',
SelectedDesign:'選択されたデザイン',
Export:'輸出',
moodboard:"ムードボード",
printboard:"プリント基板",
colorboard:"カラーボード",
sketchboard:"スケッチボード",
mannequins:"マネキン",
jsContent1:'以降の処理には 1 つ以上の色を選択する必要があります。',
jsContent2:'以降の処理には 1 つ以上の色を選択する必要があります。',
jsContent3:'ファイルのエクスポートに失敗しました',

5
src/lang/kr.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'생성된 디자인',
SelectedDesign:'선택된 디자인',
Export:'내보내다',
moodboard:"무드보드",
printboard:"인쇄판",
colorboard:"컬러보드",
sketchboard:"스케치보드",
mannequins:"마네킹",
jsContent1:'추가 처리를 위해 하나 이상의 색상을 선택해야 합니다.',
jsContent2:'추가 처리를 위해 하나 이상의 색상을 선택해야 합니다.',
jsContent3:'파일을 내보내지 못했습니다.',

5
src/lang/ru.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'Сгенерированный дизайн',
SelectedDesign:'Выбранный дизайн',
Export:'Экспорт',
moodboard:"мудборд",
printboard:"печатная плата",
colorboard:"цветная доска",
sketchboard:"доска для рисования",
mannequins:"манекены",
jsContent1:'Вы должны выбрать один или несколько цветов для дальнейшей обработки..',
jsContent2:'Вы должны выбрать один или несколько цветов для дальнейшей обработки..',
jsContent3:'Не удалось экспортировать файл',

5
src/lang/th.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'การออกแบบที่สร้างขึ้น',
SelectedDesign:'การออกแบบที่เลือก',
Export:'ส่งออก',
moodboard:"มูดบอร์ด",
printboard:"บอร์ดพิมพ์",
colorboard:"กระดานสี",
sketchboard:"กระดานสเก็ตช์",
mannequins:"หุ่น",
jsContent1:'คุณต้องเลือกหนึ่งสีขึ้นไปเพื่อดำเนินการต่อไป.',
jsContent2:'คุณต้องเลือกหนึ่งสีขึ้นไปเพื่อดำเนินการต่อไป.',
jsContent3:'ล้มเหลวในการส่งออกไฟล์',

5
src/lang/vn.ts
View File

@@ -45,6 +45,11 @@ export default {
GeneratedDesign:'Thiết kế được tạo',
SelectedDesign:'Thiết kế đã chọn',
Export:'Xuất khẩu',
moodboard:"bảng tâm trạng",
printboard:"bảng in",
colorboard:"bảng màu",
sketchboard:"bảng phác thảo",
mannequins:"ma-nơ-canh",
jsContent1:'Bạn phải chọn một hoặc nhiều màu để xử lý tiếp.',
jsContent2:'Bạn phải chọn một hoặc nhiều màu để xử lý tiếp.',
jsContent3:'Không xuất được tệp',

2
src/tool/flexible.js
View File

@@ -8,7 +8,7 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
maxWidth = maxWidth || 1920;
width > maxWidth && (width = maxWidth);
width > maxWidth && (width = maxWidth);
width < minWidth && (width = minWidth);
// width < minWidth && (width = minWidth);
var rem = width * 10 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}

2
src/views/HistoryPage.vue
View File

@@ -233,7 +233,7 @@ export default defineComponent({
height: 100%;
padding: 0 9rem;
overflow: hidden;
min-width: 1440px;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;

204
src/views/HomeView.vue
View File

@@ -37,6 +37,8 @@
<div class="left_info_content scroll_style">
<div class="left_info_content_body" ref="collection_canvas">
<NewCollectionReview id="collectionReview"></NewCollectionReview>
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
</div>
</div>
</div>
@@ -101,9 +103,26 @@
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
</div>
<div class="button_second" v-show="likeDesignCollectionList.length" @click="exportCanvas()">
{{ $t('HomeView.Export') }}
<div class="right_content_export" v-show="likeDesignCollectionList.length">
<div class="button_second" @click="exportCanvas()">
{{ $t('HomeView.Export') }}
</div>
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
isShowOperate ? 'icon_rotate' : '',
]"
@click.stop="changeShowOperateContent()"
></div>
<div class="export_nav" v-show="isShowOperate" @click.stop="">
<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
{{ item.name }}
</a-checkbox>
</div>
</div>
</div>
<div class="right_content_body">
@@ -186,7 +205,7 @@
</template>
<script lang="ts">
import { defineComponent, h, ref, computed ,inject} from "vue";
import { defineComponent, h, ref, computed ,inject,provide} from "vue";
import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
@@ -241,6 +260,36 @@ export default defineComponent({
width:'',
height:'',
}
let exportNav = ref([
{
name:useI18n().t('HomeView.moodboard'),
change:true,
noChange:true,
value:'moodboardFiles',
},{
name:useI18n().t('HomeView.printboard'),
change:true,
noChange:false,
value:'printboardFiles',
},{
name:useI18n().t('HomeView.colorboard'),
change:true,
noChange:false,
value:'colorBoards',
},{
name:useI18n().t('HomeView.sketchboard'),
change:true,
noChange:false,
value:'sketchboardFiles',
},{
name:useI18n().t('HomeView.mannequins'),
change:true,
noChange:true,
value:'',
},
])
provide('exportNav',exportNav)
let isShowOperate = ref(false)
let userInfo:any = {}
let {t} = useI18n()
return {
@@ -252,6 +301,8 @@ export default defineComponent({
designId,
contentImgMax,
contentImg,
exportNav,
isShowOperate,
userInfo,
t,
};
@@ -810,6 +861,20 @@ export default defineComponent({
});
return colorList;
},
//点击下拉图标出现操作
changeShowOperateContent() {
this.isShowOperate = !this.isShowOperate;
document.addEventListener(
"click",
this.closeShowOperateContent,
false
);
},
//关闭下拉图标
closeShowOperateContent() {
this.isShowOperate = false;
document.removeEventListener("click", this.closeShowOperateContent);
},
//导出合成图
async exportCanvas() {
@@ -834,21 +899,26 @@ export default defineComponent({
imgUrl: URL.createObjectURL(blob),
name: "collection.png",
})
let num = 0
for (let key in allBoardData) {
if (key !== "colorBoards" && key !== "moodTemplateId") {
for (let item of allBoardData[key]) {
let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
let data = {
imgUrl: item.imgUrl,
name:
item?.resData?.name +
index +
"." +
nameTail,
};
img.push(data);
index++;
if(!this.exportNav[num]?.change){
}else{
for (let item of allBoardData[key]) {
let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
let data = {
imgUrl: item.imgUrl,
name:
item?.resData?.name +
index +
"." +
nameTail,
};
img.push(data);
index++;
}
}
num++
}
}
// a.setAttribute('href', URL.createObjectURL(blob));
@@ -856,47 +926,28 @@ export default defineComponent({
// a.click();
}
);
await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
(canvas) => {
let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png")
);
let allBoardData: any =
this.store.state.UploadFilesModule.allBoardData;
let index = 0;
img.push({
imgUrl: URL.createObjectURL(blob),
name: "achievement.png",
},)
this.likeDesignCollectionList.forEach((item:any) => {
let data = {
imgUrl:item.designItemUrl,
name:item.pictureName
}
img.push(data)
});
// for (let key in allBoardData) {
// if (key !== "colorBoards" && key !== "moodTemplateId") {
// for (let item of allBoardData[key]) {
// // console.log(item, 666);
// let nameTail = item.imgUrl.split(".").pop().split("?").shift();
// let data = {
// imgUrl: item.imgUrl,
// name:
// item?.resData?.name +
// index +
// "." +
// nameTail,
// };
// img.push(data);
// index++;
// }
// }
// }
}
);
//单独导出模特图
// await html2canvas(rightContentImgBlock, { useCORS: true, scale: 3 }).then(
// (canvas) => {
// let blob: any = dataURLtoBlob(
// canvas.toDataURL("image/png")
// );
// let allBoardData: any =
// this.store.state.UploadFilesModule.allBoardData;
// let index = 0;
// img.push({
// imgUrl: URL.createObjectURL(blob),
// name: "achievement.png",
// },)
// this.likeDesignCollectionList.forEach((item:any) => {
// let data = {
// imgUrl:item.designItemUrl,
// name:item.pictureName
// }
// img.push(data)
// });
// }
// );
this.downImg(img);
},
@@ -959,7 +1010,6 @@ export default defineComponent({
let zip = new JSZip();
let cache: any = {};
let promises = [];
for (let item of imagesParams) {
const promise = _this
.getImgArrayBuffer(item.imgUrl)
@@ -992,7 +1042,7 @@ export default defineComponent({
height: 100%;
padding: 0 9rem;
overflow: hidden;
min-width: 1440px;
// min-width: 1440px;
position: relative;
// left: 50%;
// margin-left: -50%;
@@ -1140,7 +1190,37 @@ export default defineComponent({
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
position: relative;
.right_content_export{
display: flex;
align-items: center;
position: relative;
.icon-xiala{
cursor: pointer;
transition: .3s all;
margin-left: 1rem;
}
.icon_rotate{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.export_nav{
display: flex;
flex-direction: column;
position: absolute;
top: 4.5rem;
width: 100%;
background: #fff;
padding: 1rem;
border: 2px solid;
z-index: 2;
label{
margin: 0;
}
}
}
.content_header_left {
display: flex;
justify-content: space-between;
@@ -1301,7 +1381,7 @@ export default defineComponent({
.ant-modal-mask{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
min-width: 1440px;
// min-width: 1440px;
border-radius: 1rem;
overflow: hidden;
height: calc(100% - 7rem);
@@ -1311,11 +1391,11 @@ export default defineComponent({
}
.ant-modal-centered{
top: 7rem;
min-width: 1440px;
// min-width: 1440px;
// left: 50%;
// margin-left: -50%;
.ant-modal{
min-width: .65*1440px;
// min-width: .65*1440px;
}
}

3
src/views/LibraryPage.vue
View File

@@ -86,6 +86,7 @@
<div class="content_body_header_right">
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
</div>
<div class="content_search_block">
<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
@@ -1081,7 +1082,7 @@ export default defineComponent({
overflow: hidden;
height: 100%;
padding: 0 9rem;
min-width: 1440px;
// min-width: 1440px;
position: relative;
.page_content {
position: relative;