fix

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

@@ -1,22 +1,12 @@
 <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> -->
+			<editCanvas v-if="canvasLoad" ref="editCanvas"></editCanvas>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
 	</div>
-	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 </template>
 <script>
 import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
@@ -26,20 +16,12 @@ 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";
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
 
 
 export default defineComponent({
     components: {
-		tool,
-		argument,
-		detail,
-		canvasContent,
-		liquefaction,
+		editCanvas,
     },
 	emits:['setGenerateImg'],
     setup(props,{emit}) {
@@ -47,102 +29,41 @@ export default defineComponent({
 		const store = useStore();
 		const isShowMark = ref(false)
 		const component = reactive({
-			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
+		})
+		const data = reactive({
+			canvasLoad:false,
 		})
 		const dataDom = reactive({
-			canvasContent:null,
+			editCanvas:null,
 		})
-		let liquefaction = ref(null)
-		let liquefactionData = ref()
-		let groupDashed = ref(null)//用来判断是否需要对group添加img
-		let canvasType = 'export'
-		let canvasObj = reactive(new canvasGeneral('zz'))
-		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()
-			// });
-		}
 		const openSetData = ()=>{
-			dataDom.canvasContent.openSetData()
+			data.canvasLoad = true
+			// dataDom.canvasContent.openSetData()
 		}
-		const addImage = (data)=>{
-			canvasObj.addImage(data)
+		const addImage = (value)=>{
+			console.log(value)
+			dataDom.editCanvas.addImageToLayer(value.imgUrl)
+		}
+		const addBottomImage = (value)=>{
+			dataDom.editCanvas.changeFixedImage(value)
 		}
 		const getData = async ()=>{
-			await canvasObj.detailSubmit().then((img)=>{
-				emit('setGenerateImg',img)
-			})
+		
 		}
 		const getCanvasData = ()=>{
-			var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
-			// console.log(JSON.stringify(json));
-			json.objects.forEach(item=>{
-				if(item.type == 'image'){
-					delete item.src
-				}
-			})
-			let canvasExport = {
-				canvas:json,
-				groupList: canvasObj.layer.list
-			}
+			
 			return canvasExport
 		}
         onMounted(() => {
 		});
 		onBeforeUnmount(()=>{
+			data.canvasLoad = false
 			// canvasGeneral.canvasClear()
 		})
         return {
+			...toRefs(data),
 			...toRefs(dataDom),
 			isShowMark,
-			liquefaction,
-			canvasObj,
-			close,
-			expoet,
-			toolLiquefaction,
-			submitLiquefaction,
 			openSetData,
 			addImage,
 			getData,
@@ -173,49 +94,9 @@ export default defineComponent({
 	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;
+	> .canvasBox{
+		width: 100%;
+		height: 100%;
 	}
 }
 </style>