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

commit

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-25 10:09:00 +08:00
parent 173f35042d
commit d9868d5cf0
37 changed files with 1618 additions and 1146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/views/HomeView.vue
View File

@@ -66,25 +66,27 @@
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="content_img_block" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @click="
designDetail(
design,
index,
designCollectionList,
'dislike'
)
">
<div class="content_img_flex">
<img class="content_img" :src="design.designItemUrl" />
<div class="right_content_img_item" v-mousewheel>
<div class="content_img_block" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @click="
designDetail(
design,
index,
designCollectionList,
'dislike'
)
">
<div class="content_img_flex">
<img class="content_img" :src="design.designOutfitUrl" />
</div>
<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
likeDesignCollection(
design,
index
)
"></div>
</div>
<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
likeDesignCollection(
design,
index
)
"></div>
</div>
</div>
</div>
@@ -100,26 +102,28 @@
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="content_img_block" v-for="(
design, index
) in likeDesignCollectionList" :key="design?.id" @click="
designDetail(
design,
index,
likeDesignCollectionList,
'like'
)
">
<div class="content_img_flex">
<img class="content_img" v-lazy="design.designItemUrl"
:key="design.designItemUrl" />
<div class="right_content_img_item" v-mousewheel>
<div class="content_img_block" v-for="(
design, index
) in likeDesignCollectionList" :key="design?.id" @click="
designDetail(
design,
index,
likeDesignCollectionList,
'like'
)
">
<div class="content_img_flex">
<img class="content_img" v-lazy="design.designOutfitUrl"
:key="design.designOutfitUrl" />
</div>
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
dislikeDesignCollection(
design,
index
)
"></div>
</div>
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
dislikeDesignCollection(
design,
index
)
"></div>
</div>
</div>
</div>
@@ -127,11 +131,9 @@
</div>
</div>
</div>
<RobotAssist class="robot"></RobotAssist>
</div>
<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
<ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal>
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
<!-- 导出缩略图的蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
@@ -142,14 +144,17 @@
<!-- design collection的进度蒙层 start-->
<div class="progress_mark" v-show="showDesignMark">
<div class="mark_content">
<a-progress type="circle" :percent="designProgress" :width="200" />
<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
<div>
<a-spin :indicator="indicator" />
</div>
</div>
</div>
<!-- design collection的进度蒙层 end-->
<RobotAssist></RobotAssist>
</div>
</template>
<script lang="ts">
@@ -158,7 +163,6 @@ import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
import DesignDetail from "@/component/Detail/DesignDetail.vue";
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import html2canvas from "html2canvas";
@@ -176,7 +180,6 @@ export default defineComponent({
CollectionModal,
NewCollectionReview,
DesignDetail,
ModelsModal,
ExportNewCoolection,
RobotAssist,
},
@@ -188,9 +191,6 @@ export default defineComponent({
let designCollectionList: any = computed(() => {
return store.state.HomeStoreModule.designCollectionList;
});
let templateId: any = computed(() => {
return store.state.HomeStoreModule.templateId;
}); //模特id
let userGroupId: any = computed(() => {
return store.state.HomeStoreModule.userGroupId;
}); //模特id //当likeDesignCollectionList长度为0时清空，startdesign时清空
@@ -200,14 +200,23 @@ export default defineComponent({
let designId: any = computed(() => {
return store.state.HomeStoreModule.designId;
});
let contentImgMax = {
width:'',
height:'',
}
let contentImg = {
width:'',
height:'',
}
return {
store,
likeDesignCollectionList,
designCollectionList,
userGroupId,
templateId,
designCollectionId,
designId,
contentImgMax,
contentImg,
};
},
data() {
@@ -219,6 +228,7 @@ export default defineComponent({
style: {
fontSize: "4.8rem",
marginTop: "3rem",
color:"#341e57",
},
spin: true,
}),
@@ -252,6 +262,39 @@ export default defineComponent({
this.store.commit("clearAllData");
}
},
directives:{
mousewheel:{
mounted (el) {
let parent = el.parentNode
// el.style.width='100%'
// el.style.height='100%'
// console.log(el);
let num = 0
let width = el.offsetWidth
let parentWidth = parent.offsetWidth
el.addEventListener('mouseover',()=>{
width = el.offsetWidth
parentWidth = parent.offsetWidth
})
el.addEventListener('mousewheel',(e:MouseEvent)=>{
if(0>(e as WheelEvent).deltaY){
num+=15
if(num >= 0){
num = 0
}
}else{
num-=15
if(num<=parentWidth - width){
num = parentWidth - width
}
}
el.style.marginLeft = num+'px'
})
}
}
},
methods: {
@@ -330,7 +373,7 @@ export default defineComponent({
let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData;
if (!colorBoards || colorBoards?.length < 1) {
message.error(
message.warning(
"You must choose one or more colors for further process."
);
return;
@@ -371,7 +414,7 @@ export default defineComponent({
let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData;
if (!colorBoards || colorBoards?.length < 1) {
message.error(
message.warning(
"You must choose one or more colors for further process."
);
return;
@@ -409,18 +452,18 @@ export default defineComponent({
} = this.store.state.UploadFilesModule.allBoardData;
// console.log(this.store.state.UploadFilesModule.allBoardData);
let workspace = this.store.state.Workspace.workspace
console.log(workspace);
let data: any = {
colorBoards: this.getColorBoard(colorBoards),
// marketingSketchs: this.getBoardId(marketingSketchFiles),
moodBoards: this.getBoardId(moodboardFiles),
printBoards: this.getPrintId(printboardFiles),
// printBoards: this.getPrintId(new_printboardFiles),
sketchBoards: this.getSkecthBoard(sketchboardFiles),
switchCategory: workspace.soverallSingle ? workspace.position : "",
singleOverall: workspace.soverallSingle ? "single" : "overall",
systemScale: workspace.systemDesignerPercentage,
templateId: this.templateId,
switchCategory: !workspace.overallSingle ?"": workspace.position,
singleOverall: !workspace.overallSingle ? "overall" : "single",
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
templateId: 96,
// templateId: workspace.mannequinId?workspace.mannequinId:'',
moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
};
@@ -743,18 +786,7 @@ export default defineComponent({
});
}
},
//选择模特
selectModels() {
let modelsModal: any = this.$refs.modelsModal;
modelsModal.init();
},
//确定选择模特
sureSelectModel(event: any) {
this.store.commit("setTemplateData", event);
},
//通过url 转为blob格式的数据
getImgArrayBuffer(url: any) {
return new Promise((resolve, reject) => {
@@ -799,7 +831,7 @@ export default defineComponent({
});
})
.catch((res) => {
_this.message.error("Failed to export the file");
_this.message.warning("Failed to export the file");
this.isShowMark = false;
});
},
@@ -810,7 +842,7 @@ export default defineComponent({
.home_page {
width: 100%;
height: 100%;
padding: 0 9rem;
.page_content {
position: relative;
.page_content_body {
@@ -824,13 +856,14 @@ export default defineComponent({
width: 100%;
height: calc(100% - 7rem);
display: flex;
padding-left: 0.7rem;
// padding-left: 0.7rem;
box-sizing: border-box;
.home_page_left {
width: 44.4rem;
// width: 44.4rem;
width: 55rem;
height: 100%;
padding: 2.3rem 0.7rem 1.7rem 1.3rem;
padding: 2rem 0 0 0;
background: rgba(255, 255, 255, 0.2);
.home_page_left_content {
@@ -888,7 +921,7 @@ export default defineComponent({
height: 100%;
.left_info_top {
padding: 0 0 1.3rem 2rem;
padding: 0 0 1.3rem 0;
display: flex;
.button_margin {
@@ -901,6 +934,9 @@ export default defineComponent({
height: calc(100% - 6.9rem);
overflow-y: auto;
background: #ffffff;
&.left_info_content::-webkit-scrollbar {
display: none;
}
.left_info_content_body {
width: 100%;
@@ -911,9 +947,10 @@ export default defineComponent({
}
.home_page_right {
width: calc(100% - 44.4rem);
// width: calc(100% - 44.4rem);
flex: 1;
height: 100%;
overflow: hidden;
.right_top {
padding: 2rem 3.2rem 2rem 1.2rem;
display: flex;
@@ -967,21 +1004,28 @@ export default defineComponent({
height: calc(50% - 5.5rem);
.right_content_img_block {
padding: 0.6rem 2.8rem 0.6rem 0.9rem;
overflow-y: auto;
background: #f6f6fa;
border-radius: 1rem;
height: 100%;
display: flex;
width: auto;
overflow: hidden;
align-items: center;
>div{
display: flex;
padding: 0 2.8rem 0 0.9rem;
}
.content_img_block {
width: 20.1rem;
height: 29.5rem;
height: 37rem;
// height: 29.5rem;
margin-right: 3rem;
margin-bottom: 1rem;
display: inline-block;
position: relative;
vertical-align: top;
flex-shrink: 0;
&:hover .icon_like {
display: block;
}
@@ -1057,6 +1101,12 @@ export default defineComponent({
.ant-modal-mask{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
border-radius: 1rem;
overflow: hidden;
height: calc(100% - 7rem);
bottom: 0;
top: auto;
margin: 0 9rem;
}
.ant-modal-centered{
top: 7rem;