aida_front/src/component/Canvas/index.vue

<template>
	<div class="generalCanvas">
		<div class="argument-box">
			<argument ref="argument" v-if="canvasObj.canvas"></argument>
		</div>
		<div class="canvasBox">
			<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
			<div class="canvas">
				<canvasContent ref="canvasContent"></canvasContent>
			</div>
			<div class="detail-box">
				<detail ref="detail" v-if="canvasObj.canvas"></detail>
			</div>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</div>
	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</template>
<script>
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import tool from "./tool.vue"
import argument from "./argument.vue"
import detail from "./detail.vue"
import canvasContent from "./canvasContent.vue"
import liquefaction from "@/component/modules/liquefaction.vue";


export default defineComponent({
    components: {
		tool,
		argument,
		detail,
		canvasContent,
		liquefaction,
    },
    setup(props,{emit}) {
		const { t } = useI18n();
		const store = useStore();
		const isShowMark = ref(false)
		const component = reactive({
			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
		})
		let liquefaction = ref(null)
		let liquefactionData = ref()
		let groupDashed = ref(null)//用来判断是否需要对group添加img
		let canvasType = 'export'
		let canvasObj = reactive(new canvasGeneral())
		provide('canvasType',canvasType)
		provide('canvasObj',canvasObj)
		provide('isShowMark',isShowMark)
		const close = ()=>{
			component.forEach((item)=>{
				if(item.value.closeModal)item.value.closeModal()
			})
		}
		
		let expoet = ()=>{
			console.log( canvasObj.selectExport());
			console.log( canvasObj.allExport());

		}
		const setLiquefaction = async ()=>{//进入液化页面
			canvasObj.getLiquefactionImgObj().then((data)=>{
				if(data?.img){
					liquefactionData.value = data
					liquefaction.value.init(data.img)
				}else {
					message.info(t('exportModel.jsContent6'))
					return null;
				}
			})
			
		}
		const toolLiquefaction = ()=>{//工具点击按钮
			setLiquefaction()
		}
		const submitLiquefaction = (rv)=>{//液化回参
			canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
			// liquefactionData.value.setSrc(rv, (value)=>{
			// 	// liquefactionData.value.scaleToWidth(originalWidth);
			// 	// liquefactionData.value.scaleToHeight(originalHeight);
			// 	delete liquefactionData.value.minioUrl
			// 	if(groupDashed.value && groupDashed.value._objects.length == 1){
			// 		value.set({
			// 			left:-groupDashed.value.width/2,	
			// 			top:-groupDashed.value.height/2,
			// 		})
			// 		groupDashed.value.insertAt(value)
			// 		// canvasObj.addDashedImg(value)
			// 	}
			// 	canvasObj.canvas.renderAll();
			// 	canvasObj.updateCanvasState()
			// });
		}
        onMounted(() => {
		});
		onBeforeUnmount(()=>{
			// canvasGeneral.canvasClear()
		})
        return {
			isShowMark,
			liquefaction,
			canvasObj,
			close,
			expoet,
			toolLiquefaction,
			submitLiquefaction,
        };
    },
    data(prop) {
        return {
		};
    },
	computed: {
	},
    watch: {
      
    },
    mounted() {},

    methods: {
		
	},
});
</script>
<style lang="less" scoped>
.generalCanvas{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.argument-box,
	.canvasBox,
	.detail-box{
		:deep(i){
			font-size: 2.5rem;
			cursor: pointer;
			width: 3rem;
			height: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			transition: all .3s;
			margin-bottom: .5rem;
			&.active{
				border: 1px solid;
				border-radius: .4rem;
			}
			&.icon-xiala{
				transform: rotate(-90deg);
			}
			&.icon-xialaActive{
				transform: rotate(90deg);
			}
		}
	}
	.argument-box{
		margin-left: 4rem;
		height: 4rem;
		margin-bottom: 1rem;
	}
	.canvasBox{
		flex: 1;
		overflow: hidden;
		display: flex;
		.canvas{
			flex: 1;
			overflow: hidden;
		}
	}
	.detail-box{
		width: 20%;
		margin-left: 1rem;
	}
}
</style>