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

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/views/HomeView/HomeView.vue
View File

@@ -7,8 +7,8 @@
<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
<div class="page_content_body">
<div class="home_page_body">
<div class="home_page_left">
<div class="home_page_left_content">
<div class="home_page_left" ref="hidden">
<div class="home_page_left_content" :class="{'active':domHidden}">
<!-- 空状态 start-->
<div class="home_left_null" v-show="!isHaveReviewCollection">
<div>
@@ -32,10 +32,10 @@
<!-- <div class="button_second" @click="startNewCollection()">
{{ $t('HomeView.Start') }}
</div> -->
<div class="button_first button_margin" @click="recollection()">
<div class="gallery_btn white button_margin" @click="recollection()">
{{ $t('HomeView.Edit') }}
</div>
<div class="button_first button_margin" @click="resetCollection()">
<div class="gallery_btn white button_margin" @click="resetCollection()">
{{ $t('HomeView.Reset') }}
</div>
</div>
@@ -52,20 +52,37 @@
</div>
</div>
<!-- 有图状态 end-->
</div>
<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
</div>
</div>
<div class="home_page_right">
<div class="right_top">
<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
<div class="right_top_left">
<div class="button_second Guide_1_15" @click="designNewCollection()">
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
{{ $t('HomeView.Design') }}
</div>
<div class="button_first button_margin_14 Guide_1_30" v-show="designCollectionId"
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
@click="resDesignCollection()">
{{ $t('HomeView.Redesign') }}
</div>
<div class="silder button_margin_14" v-show="designCollectionId">
<div class="text">Small</div>
<a-slider id="system_silder"
class="system_silder"
v-model:value="collValue"
@afterChange="setSystemDesigner"
:tooltipVisible="false"
>
</a-slider>
<div class="text">Big</div>
</div>
<div class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
<!-- {{ $t('HomeView.Export') }} -->
{{$t('HomeView.FinalizeCollection')}}
</div>
</div>
</div>
@@ -79,11 +96,35 @@
</div>
<div class="right_content_body">
<div class="right_content_img_block scroll_style Guide_1_17 active" v-mousewheel :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_item">
<!-- <draggable
group="people" > -->
<div class="content_img_block" v-for="(
<div class="content_img_block active" :style="collStyle" draggable
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@click="designDetail(
design,
index,
likeDesignCollectionList,
'like'
)"
@dragstart="dragstart($event, index)"
@dragover.prevent
@drop="dragDrop($event, index)">
<div class="content_img_flex">
<img class="content_img" :src="design.designOutfitUrl"
:key="design.designOutfitUrl" />
</div>
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
dislikeDesignCollection(
design,
index
)">
</div>
</div>
<!-- </draggable> -->
<div class="content_img_block" :style="collStyle" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId">
<div class="content_img_flex"
@@ -106,64 +147,28 @@
">
</div>
</div>
<!-- </draggable> -->
<div class="content_img_block" v-show="showDesignMark">
<div class="content_img_flex" >
<!-- <img class="content_img" v-lazy="''" /> -->
<img class="content_img" src="@/assets/images/homePage/loading.gif" />
</div>
</div>
</div>
</div>
</div>
<div class="right_content_header">
<!-- <div class="right_content_header">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
</div>
<div class="right_content_export" v-show="likeDesignCollectionList.length">
<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
<div class="button_second Guide_1_31" @click="exportModel()">
<!-- {{ $t('HomeView.Export') }} -->
{{$t('HomeView.FinalizeCollection')}}
</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">
<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:likeDesignCollectionList.length != 0}">
<div class="right_content_img_block scroll_style" :class="{active:likeDesignCollectionList.length != 0}">
<div class="right_content_img_item" id="right_content_img_block">
<!-- <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="content_img_block" draggable
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@click="designDetail(
@@ -188,7 +193,7 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -200,6 +205,7 @@
<productImg ref="productImg" @setTask="setTask"></productImg>
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
<!-- 导出缩略图的蒙层 start-->
<div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
<a-spin size="large" />
@@ -207,14 +213,15 @@
<!-- 导出缩略图的蒙层 end-->
<!-- design collection的进度蒙层 start-->
<div class="progress_mark" v-show="showDesignMark">
<!-- <div class="progress_mark" v-show="showDesignMark">
<div class="mark_content Guide_1_16">
<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
<div>
<a-spin :indicator="indicator" />
</div>
</div>
</div>
</div> -->
<!-- design collection的进度蒙层 end-->
<affiche ref="affiche"></affiche>
<!-- <RobotAssist></RobotAssist> -->
@@ -224,7 +231,7 @@
</template>
<script lang="ts">
import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode} from "vue";
import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode} from "vue";
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
@@ -240,7 +247,6 @@ import html2canvas from "html2canvas";
import { message,Modal } from "ant-design-vue";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { openGuide,driverObj__ } from "@/tool/guide";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import draggable from 'vuedraggable'
@@ -344,6 +350,25 @@ export default defineComponent({
return store.state.UploadFilesModule.chooseIsDesign})
let portfolio:any = ref({})
provide('portfolio',portfolio)
const collItemSize = reactive({
collValue:40,
collStyle:{
width:'24rem',
height:'37rem'
},
collTime:null as any,
})
const setSystemDesigner = ()=>{
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
let wScale = 60,hScale = 92.5
let num = collItemSize.collValue
let {width,height} = collItemSize.collStyle
collItemSize.collStyle.width = wScale * ((num<20?20:num) / 100) + 'rem'
collItemSize.collStyle.height = hScale * ((num<20?20:num) / 100) + 'rem'
},500)
}
return {
store,
likeDesignCollectionList,
@@ -365,6 +390,8 @@ export default defineComponent({
isMannequinShow,
chooseIsDesign,
portfolio,
setSystemDesigner,
...toRefs(collItemSize),
};
},
data() {
@@ -387,6 +414,9 @@ export default defineComponent({
likeLoading: false, //喜欢防抖
dragIdx:0,
designRandom:'',
domHidden:false,
getDesignTime:null as any,
};
},
watch: {
@@ -401,6 +431,9 @@ export default defineComponent({
},
},
},
beforeUnmount(){
clearTimeout(this.getDesignTime);
},
async mounted() {
// if(JSON.parse( getCookie('isFirst') as any)){
// }
@@ -645,38 +678,63 @@ export default defineComponent({
);
return;
}
clearTimeout(this.getDesignTime);
let data = this.getDesignData("");
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.designCollection, data)
.then((rv: any) => {
if (rv) {
this.store.commit(
"setDesignCollectionList",
rv.designCollectionItems
);
let value = {
objectSignList:data.requestIdList.join(),
requestId:rv
}
this.store.commit("setLikeDesignCollectionList", []);
this.store.commit("deleteUserGroupId");
this.store.commit(
"setDesignCollectionId",
rv.collectionId
);
this.store.commit("setDesignId", rv.designId);
// this.designProgress = 0;
this.getDesignResult(value,'newDesign')
this.startDesignType = "design";
}
this.isShowMark = false;
})
.catch((res) => {
this.showDesignMark = false;
this.isShowMark = false;
})
// setTimeout(() => {
this.getDesignProcess(this.designRandom);
// }, 1000);
// this.getDesignProcess(this.designRandom);
},
getDesignResult(data:any,str:any){
this.showDesignMark = true
Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
.then((rv)=>{
if(rv.designCollectionItems){
this.store.commit("setDesignCollectionList",rv.designCollectionItems);
}
if(rv.unfinishedList.length == 0){
this.showDesignMark = false
if(str == 'newDesign'){
if(rv.designCollectionItems){
this.store.commit("deleteUserGroupId");
this.store.commit(
"setDesignCollectionId",
rv.collectionId
);
this.store.commit("setDesignId", rv.designId);
}
}else{
// this.designProgress = 0,
this.store.commit("setDesignId", rv.designId);
}
}else{
this.getDesignTime = setTimeout(()=>{
data.objectSignList = rv.unfinishedList.join()
this.getDesignResult(data,str)
},1000)
}
}).catch(()=>this.showDesignMark = false)
},
//重新设计collection
resDesignCollection() {
@@ -693,25 +751,25 @@ export default defineComponent({
driverObj__.moveNext();
})
}
clearTimeout(this.getDesignTime);
this.isShowMark = true
let data = this.getDesignData(this.designCollectionId);
Https.axiosPost(Https.httpUrls.reDesignCollection, data)
.then((rv: any) => {
if (rv) {
this.store.commit(
"setDesignCollectionList",
rv.designCollectionItems
);
// this.designProgress = 0,
let value = {
objectSignList:data.requestIdList.join(),
requestId:rv
}
this.getDesignResult(value,'resDesign')
this.startDesignType = "resDesign";
this.store.commit("setDesignId", rv.designId);
this.isShowMark = false
}
})
.catch((res) => {
this.showDesignMark = false;
this.isShowMark = false;
});
// setTimeout(() => {
this.getDesignProcess(this.designRandom);
// }, 1000);
// this.getDesignProcess(this.designRandom);
},
@@ -754,9 +812,15 @@ export default defineComponent({
data.collectionId = designCollectionId;
}
if(!isLoad){
this.designProgress = 0;
this.showDesignMark = true;
// this.designProgress = 0;
// this.isShowMark = true;
}
let arr = []
for (let index = 0; index < 8; index++) {
let floor = Math.floor(Math.random() * 90000000) + 10000000
arr.push(floor)
}
data.requestIdList = arr
return data;
},
@@ -1142,8 +1206,8 @@ export default defineComponent({
.home_page {
width: 100%;
height: 100%;
padding: 0 9rem;
overflow: hidden;
padding: 0 6rem;
// overflow: hidden;
// min-width: 1440px;
position: relative;
// left: 50%;
@@ -1164,18 +1228,51 @@ export default defineComponent({
display: flex;
// padding-left: 0.7rem;
box-sizing: border-box;
overflow: hidden;
// overflow: hidden;
.home_page_left {
// width: 44.4rem;
width: 55rem;
height: 100%;
padding: 2rem 0 0 0;
background: rgba(255, 255, 255, 0.2);
position: relative;
// overflow: hidden;
.home_page_left_bottom{
position: absolute;
width: 4rem;
height: 7rem;
background: #fff;
border: 2px solid;
border-right: none;
border-radius: 2rem 0 0 2rem;
top: 50%;
transform: translate(-100%,-50%);
left: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
>span{
transition: all .3s;
transform: rotate(90deg);
&.active{
transform: rotate(270deg);
}
}
}
.home_page_left_content {
height: 100%;
width: 55rem;
overflow: hidden;
transition: all .3s;
padding-right: 1.2rem;
&.active{
padding-right: 0;
width: 0;
}
.home_left_null {
display: flex;
align-items: center;
@@ -1185,7 +1282,6 @@ export default defineComponent({
height: 100%;
position: relative;
background: #f7f8fa;
border: 1px solid #f2f2f9;
border-radius: 2rem;
overflow: hidden;
@@ -1275,21 +1371,40 @@ export default defineComponent({
justify-content: space-between;
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
background: rgba(255, 255, 255, 0.4);
transition: all .3s;
&.active{
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
height: 0;
}
.right_top_left {
display: flex;
align-items: center;
width: 100%;
.button_margin_14 {
margin-left: 1.4rem;
}
.silder{
display: flex;
align-items: center;
.text{
font-weight: 600;
font-size: 1.8rem;
}
.system_silder{
margin: 0 3rem;
width: 12rem;
}
}
}
}
.right_content_block {
height: calc(100% - 8.584rem);
overflow-y: auto;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
&.right_content_block::-webkit-scrollbar{display: none;}
&.active{
overflow: hidden;
@@ -1351,11 +1466,11 @@ export default defineComponent({
}
}
.right_content_body {
padding: 0 1.8rem 0 1.2rem;
// padding: 0 1.8rem 0 1.2rem;
background: rgba(255, 255, 255, 0.2);
height: calc(50% - 4.5rem);
// min-height: 280px;
// height: calc(50% - 4.5rem);
flex: 1;
overflow: auto;
.right_content_img_block {
// overflow-y: auto;
background: #f6f6fa;
@@ -1399,18 +1514,18 @@ export default defineComponent({
}
>div{
display: flex;
padding: 0 2.8rem 0 0.9rem;
flex-wrap: wrap;
// padding: 0 2.8rem 0 0.9rem;
height: 100%;
align-items: center;
align-content: flex-start;
}
.content_img_block {
// width: 20.1rem;
width: auto;
width: 24rem;
height: 37rem;
// height: 29.5rem;
margin-right: 1rem;
// margin-bottom: 1rem;
min-width: 127px;
margin-bottom: 1rem;
// min-height: 271px;
max-height: 100%;
@@ -1423,9 +1538,9 @@ export default defineComponent({
display: block;
}
&:nth-child(4n) {
margin-right: 0;
}
// &:nth-child(4n) {
// margin-right: 0;
// }
.content_img_flex {
display: flex;
@@ -1433,8 +1548,17 @@ export default defineComponent({
align-items: center;
width: 100%;
height: 100%;
border-radius: 2rem;
}
&.active{
.icon_like{
display: block;
}
.content_img_flex {
border: 2px solid #000;
}
}
.content_img {
max-width: 100%;
max-height: 100%;
@@ -1454,7 +1578,8 @@ export default defineComponent({
color: #000;
}
.icon-jushoucanggift {
color: rgba(52, 53, 121, 1);
// color: rgba(52, 53, 121, 1);
color: #000;
}
}
}