aida_front/src/component/HomePage/index/model/patternMaking3D/index.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>