aida_front/src/component/HomePage/index/model/deReconstruction/index.vue

<template>
	<div class="deReconstruction">
		<div class="selectSektch itemBox">
			<selectList @selectImgItem="selectImgItem" 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
			}),
			generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
		})
		const setIsShowMark:any = inject('setIsShowMark')
		const dataDom = reactive({
			canvasBox:null as any,
		})
		const selectImgItem = (data:any)=>{
			data.minioUrl = data.url
			dataDom.canvasBox.addImage(data)
		}
		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;
			}
			&.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>