FiDA_Front/src/components/Canvas/DepthCanvas/index.vue

<template>
	<fullscreen-dialog v-model="dialogVisible" @close="onClose" hide-destroy>
		<div class="canvas-box">
			<depth-canvas :config="config" @workbench="onWorkbench" />
		</div>
	</fullscreen-dialog>
</template>

<script setup lang="ts">
	import { base64Tofile } from '../tools/tools'
	import { uploadImage } from '@/api/upload'
	import FullscreenDialog from '../components/fullscreen-dialog.vue'
	import depthCanvas from './depth-canvas.vue'
	import { ref } from 'vue'
	const dialogVisible = ref(false)
	const config = ref({
		id: '',
		url: '',
		json: ''
	})

	const open = (options) => {
		config.value = options
		console.log(config.value)
		config.value.json = sessionStorage.getItem('canvasJson_' + config.value.id)
		dialogVisible.value = true
	}
	// 工作区
	const onWorkbench = async (options) => {
		const json = options.json

		sessionStorage.setItem('canvasJson_' + config.value.id, json)

		const file = base64Tofile(options.url, 'canvas.png')
		const formData = new FormData()
		formData.append('file', file)
		const url = await uploadImage(formData)
		config.value.onWorkbench?.({ url })
		dialogVisible.value = false
	}
	// 关闭
	const onClose = () => {
		dialogVisible.value = false
		config.value.onClose?.()
	}

	defineExpose({
		open,
		close
	})
</script>
<style lang="less" scoped>
	.canvas-box {
		padding-top: 10rem;
		width: 100%;
		height: 100%;
	}
</style>