aida_front/src/component/home/tools/deReconstruction/index.vue

<template>
	<div class="deReconstruction">
		<div class="selectSektch itemBox">
			<div class="type">
				<a-select
					v-model:value="segmentationType"
					show-search
					:allowClear="false"
					style="width: 100%"
					placeholder="Please select"
					:options="[{value:'product',label:'product'},{value:'sketch',label:'sketch'}]"
				></a-select>
				<!-- <label>
					<div class="text">product</div>
					<input type="radio" value="product" v-model="segmentationType">
				</label>
				<label>
					<div class="text">sketch</div>
					<input type="radio" value="sketch" v-model="segmentationType">
				</label> -->
			</div>
			<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
		</div>
		<div class="canvas itemBox">
			<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
		</div>
		<div class="finished itemBox">
			<div class="btnTop">
				<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
				<div v-show="!generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
				<div v-show="generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucanggift" @click="generateLike('noLike')"></div>
			</div>
			<div class="content">
				<img v-if="generateImg?.[0]?.url" :src="generateImg?.[0]?.url" alt="">
				<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
			</div>
			<div class="btnBottom" @click="getCanvasData">
				<div class="gallery_btn">Download</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, inject} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import canvasBox from "./canvas/index.vue";
export default defineComponent({
	components:{
		selectList,sketchCategory,canvasBox
	},
	props:{
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			sketchCatecoryList:computed(()=>{
				return store.state.Workspace.probjects.positionList
			}),
			segmentationType:'product',
			generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
		})
		const setIsShowMark:any = inject('setIsShowMark')
		const dataDom = reactive({
			canvasBox:null as any,
		})
		const selectImgItem = (data:any)=>{
			if(!data.designType){
				canvasAddImg(data)
			}else{
				// data.minioUrl = data.url
				// dataDom.canvasBox.addImage(data)
				getSegmentation(data)
			}
		}
		const canvasAddImg = (list:any)=>{
			list.segmentedImages.forEach((url:any) => {
				list.imgUrl = url
				dataDom.canvasBox.addImage(list)
			});
		}
		const getSegmentation = (value:any)=>{
			let param = new FormData(); 
			param.append('id',value.id)
			param.append('file','')
			param.append('type',data.segmentationType)
			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			Https.axiosPost(Https.httpUrls.imageSegmentation,param,config)
			.then((rv:any) => {
					// console.log(rv);
					canvasAddImg(rv[0])
				}
			).catch(rv=>{
			})
		}
		const openSetData = ()=>{
			dataDom.canvasBox.openSetData()
		}
		const getCanvasImg = ()=>{
			dataDom.canvasBox.getData()
		}
		const setGenerateImg = (base64:any)=>{
			let value = {
				"collagePicture": base64,
				"gender": store.state.Workspace.probjects.sex,
				"projectId": store.state.Workspace.probjects.id
			}
			setIsShowMark(true)
			Https.axiosPost(Https.httpUrls.genSketchRecon,value).then((rv)=>{
				if(rv){
					data.sketchCatecoryList.forEach((item:any)=>{
						if(item.value == rv.category){
							rv.categoryValue = item.value
							rv.category = item.name
						}
					})
					rv.isLike = false
					let value = {
						list: [rv],
						str:'add',
						index:-1,
					}
					store.commit('setDeReconstruction',value)
					setIsShowMark(false)
				}
			})
		}
		const generateLike = (str:string)=>{
			if(data.generateImg[0].id == -1)return
			if(str == 'like'){
				let value={
					"gender": store.state.Workspace.probjects.sex,
					"generateDetailId": data.generateImg[0].id,
					"level1Type": "Sketchboard",
					"level2Type": data.generateImg[0].categoryValue,
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
				}
				Https.axiosPost(Https.httpUrls.generateLike,value).then((rv)=>{
					if(rv){
						data.generateImg[0].isLike = true
					}
				})
			}else{
				let value = {
					"generateDetailId": data.generateImg[0].id,
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
				}
				Https.axiosGet(Https.httpUrls.generateDislike, {params:value}).then(
					(rv) => {
						data.generateImg[0].isLike = false
					}
				).catch(res=>{
				});
			}
		}
		const setCanvas = (str:string)=>{
			dataDom.canvasBox.setCanvas(str)
		}
		const getCanvasData = ()=>{
			let data = dataDom.canvasBox.getCanvasData()
			return data
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			selectImgItem,
			openSetData,
			getCanvasImg,
			setGenerateImg,
			generateLike,
			getCanvasData,
			setCanvas,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.deReconstruction{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		> .itemBox{
			margin-right: 2rem;
			padding: 2rem;
			background: #f7f8fa;
			border-radius: 3rem;
			// flex: 1;
			&.selectSektch{
				width: 37rem;
				flex-shrink: 0;
				> .type{
					display: flex;
					justify-content: space-between;
					> :deep(.ant-select){
						margin: 1rem 0;
						.ant-select-selector{
							border-radius: 2rem;
						}
					}
					>label{
						display: flex;
						align-items: center;
						>div{
							font-size: 2rem;
							margin-left: 1rem;
						}
					}
				}
			}
			&.canvas{
				flex: 1;
			}
			&.finished{
				width: 58rem;
				display: flex;
				flex-direction: column;
				> .btnTop{
					display: flex;
					justify-content: space-between;
					> .icon{
						cursor: pointer;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 2rem;
						width: 6rem;
						height: 6rem;
						border: 1px solid;
						border-radius: 50%;
					}
				}
				> .content{
					flex: 1;
					// overflow: hidden;
					margin: 10rem 0;
					position: relative;
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				> .btnBottom{
					text-align: right;
				}
			}
		}
		> .itemBox:last-child{
			margin-right: 0;
		}
	}
</style>