372 lines
9.1 KiB
Vue
372 lines
9.1 KiB
Vue
<template>
|
|
<div class="patternMaking3D">
|
|
<div class="selectModel">
|
|
<div class="heard selectList">
|
|
<div :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">Clothing</div>
|
|
<div :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">Print</div>
|
|
</div>
|
|
<div class="list" v-show="libraryOrModel == 'model'" v-if="maskShow">
|
|
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
|
|
<img :src="item.url" alt="">
|
|
</div>
|
|
<div v-show="!isNoData" class="material_content_list_loding">
|
|
<span class="page_loading" v-show="!isShowLoading" v-observe></span>
|
|
<span v-show="isShowLoading">
|
|
<a-spin size="large" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="list printList" v-show="libraryOrModel == 'print'">
|
|
<div v-for="item in printList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setMaterial(item)">
|
|
<img :src="item.url || item.imgUrl" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="model" v-show="selectModel.id != -1">
|
|
<div class="heard">
|
|
<div class="text">Technical sketch</div>
|
|
<div class="switch">
|
|
front
|
|
<a-switch v-model:checked="isFront" />
|
|
back
|
|
</div>
|
|
</div>
|
|
<div class="modelBox">
|
|
<div v-show="!imgOrThree" class="img">
|
|
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
|
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
|
</div>
|
|
<threeBox v-if="imgOrThree" ref="threeBox"></threeBox>
|
|
</div>
|
|
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
|
|
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
|
|
</div>
|
|
<div class="flatPatterm" v-show="selectModel.id != -1">
|
|
<div class="heard">Flat pattern</div>
|
|
<div class="modelBox">
|
|
<div class="img">
|
|
<img :src="selectModel.threeDPatternLayoutUrl" alt="">
|
|
<div class="btn">
|
|
<i class="fi fi-bs-expand-arrows-alt" @click.stop="openScaleImage()"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gallery_btn" @click="openDown()">Download</div>
|
|
</div>
|
|
<div class="download">
|
|
<download ref="download"></download>
|
|
</div>
|
|
<scaleImage ref="scaleImage"></scaleImage>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, watch} from 'vue'
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n'
|
|
import threeBox from "./three.vue"
|
|
import download from "./download.vue"
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
export default defineComponent({
|
|
components:{
|
|
threeBox,download,scaleImage
|
|
},
|
|
props:{
|
|
},
|
|
emits:[],
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
const data = reactive({
|
|
selectModel:{
|
|
id:-1,
|
|
} as any,
|
|
// printCatecoryList:computed(()=>{
|
|
// return store.state.UserHabit.printType
|
|
// }),
|
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
modelList:[] as any,
|
|
printList:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
|
|
isShowMark:false,
|
|
isNoData:false,
|
|
isShowLoading:false,
|
|
currentPage:1,
|
|
pageSize:10,
|
|
imgOrThree:false,
|
|
isFront:false,
|
|
maskShow:false,
|
|
libraryOrModel:'model'
|
|
})
|
|
watch(()=>data.selectObject.sex,(newVal)=>{
|
|
data.modelList = []
|
|
data.currentPage = 0,
|
|
data.isNoData = false
|
|
data.isShowMark = false
|
|
})
|
|
const setSelectModel = (item:any)=>{
|
|
data.isShowMark = true
|
|
const value = {
|
|
threeDSimpleId:item.threeDSimpleId,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.getLayoutDetail,{},{params:value}).then((res:any)=>{
|
|
data.selectModel = res
|
|
data.selectModel.id = item.id
|
|
data.isShowMark = false
|
|
data.imgOrThree = false
|
|
// if(data.imgOrThree){
|
|
// dataDom.threeBox.openSetData()
|
|
// }
|
|
let stateData = {
|
|
threeDsimpleId:item.id
|
|
}
|
|
store.commit('setPatternMaking3D',stateData)
|
|
}).catch((err:any)=>{
|
|
data.isShowMark = false
|
|
})
|
|
}
|
|
const dataDom = reactive({
|
|
threeBox:null as any,
|
|
download:null as any,
|
|
scaleImage:null as any,
|
|
})
|
|
const openSetData = ()=>{
|
|
nextTick(()=>{
|
|
let id = store.state.HomeStoreModule.patternMaking3D.threeDsimpleId
|
|
if(id && data.selectModel.id == -1)setSelectModel({threeDSimpleId:id})
|
|
})
|
|
setTimeout(()=>{
|
|
data.maskShow = true
|
|
},500)
|
|
}
|
|
const getModelList = ()=>{
|
|
if(data.isShowMark && !data.isNoData)return
|
|
let value = {
|
|
page: data.currentPage,
|
|
size:data.pageSize,
|
|
sex:data.selectObject.sex,
|
|
}
|
|
data.isShowLoading = true
|
|
Https.axiosPost(Https.httpUrls.threeDPage,value).then(
|
|
(rv: any) => {
|
|
if(rv.content.length == 0)data.isNoData = true
|
|
data.modelList.push(...rv.content)
|
|
data.isShowLoading = false
|
|
}
|
|
).catch((res)=>{
|
|
data.isNoData = true
|
|
});
|
|
}
|
|
const setImgOrThree = (boolean:boolean)=>{
|
|
data.imgOrThree = boolean
|
|
if(boolean){
|
|
nextTick(()=>{
|
|
dataDom.threeBox.openSetData(data.selectModel)
|
|
// dataDom.threeBox.openSetData(data.selectModel.threeDPatternLayoutUrl)
|
|
})
|
|
}
|
|
}
|
|
const downList = ()=>{
|
|
let value = {
|
|
|
|
}
|
|
Https.axiosGet(Https.httpUrls.threeDPage,value).then(
|
|
|
|
)
|
|
}
|
|
const openDown = ()=>{
|
|
dataDom.download.openDown(data.selectModel.id)
|
|
}
|
|
const setLibraryOrModel = (str:any)=>{
|
|
if(str == 'print' && data.selectModel.id == -1)return
|
|
data.libraryOrModel = str
|
|
}
|
|
const setMaterial = (item:any)=>{
|
|
dataDom.threeBox.addMaterial(item)
|
|
}
|
|
const openScaleImage = ()=>{
|
|
let scaleImage:any = dataDom.scaleImage
|
|
scaleImage.isLike = false
|
|
scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
|
|
}
|
|
return{
|
|
...toRefs(dataDom),
|
|
...toRefs(data),
|
|
setSelectModel,
|
|
openSetData,
|
|
getModelList,
|
|
setImgOrThree,
|
|
openDown,
|
|
setLibraryOrModel,
|
|
setMaterial,
|
|
openScaleImage
|
|
}
|
|
},
|
|
directives:{
|
|
observe:{
|
|
mounted (el,binding) {
|
|
// console.log(binding.instance);
|
|
let this_:any = binding.instance
|
|
this_.isShowMark = false
|
|
this_.isNoData = false
|
|
let parentDom = el.parentNode
|
|
this_.getModelList()
|
|
new IntersectionObserver(
|
|
(entries, observer) => {
|
|
// 如果不是相交，则直接返回
|
|
// console.log(entries[0]);
|
|
if (!entries[0].intersectionRatio) return;
|
|
this_.currentPage += 1
|
|
this_.getModelList()
|
|
},
|
|
).observe(el);
|
|
},
|
|
},
|
|
},
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.patternMaking3D{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
font-size: 1.4rem;
|
|
> .selectModel,> .model,>.flatPatterm{
|
|
padding: 3rem 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .heard{
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
&.selectList{
|
|
justify-content: flex-start;
|
|
> div{
|
|
position: relative;
|
|
margin-right: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
> div::before{
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
background: #000;
|
|
height: calc(.4rem*1.2);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -.5rem;
|
|
width: 0px;
|
|
transition: 0.3s all;
|
|
}
|
|
> .active {
|
|
color: #000;
|
|
font-weight: 600;
|
|
}
|
|
> .active::before {
|
|
width: 100%;
|
|
}
|
|
}
|
|
> .switch{
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
> .selectModel{
|
|
width: 40%;
|
|
// width: 70rem;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
background: #f7f8fa;
|
|
border-radius: 3rem;
|
|
> .list{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
align-content: flex-start;
|
|
&.printList{
|
|
> .modelItem{
|
|
aspect-ratio: 1 / 1;
|
|
>img{
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
> .modelItem{
|
|
width: calc(100% / 4 - 1rem);
|
|
margin: .5rem;
|
|
aspect-ratio: 1 / 1.2;
|
|
// height: 10rem;
|
|
border-radius: 2rem;
|
|
border: 2px solid #D4D4D4;
|
|
cursor: pointer;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
padding: 1rem;
|
|
|
|
}
|
|
&.active{
|
|
border: 2px solid #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .model ,> .flatPatterm{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
> .modelBox{
|
|
width: 100%;
|
|
// height: 20rem;
|
|
// height: 75rem;
|
|
flex: 1;
|
|
padding: 1rem 0;
|
|
overflow: hidden;
|
|
margin: auto;
|
|
>.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
> .btn{
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 2rem;
|
|
> i{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.material_content_list_loding{
|
|
text-align: center;
|
|
height: 50px;
|
|
width: 100%;
|
|
.page_loading{
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.download{
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
</style> |