|
@@ -0,0 +1,315 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="dwg-preview">
|
|
|
|
|
+ <!-- 转换中:上传原始 dwg + 后端转 svg 期间没有可展示的内容 -->
|
|
|
|
|
+ <div v-if="loading" class="dwg-hint">{{ loadingText }}</div>
|
|
|
|
|
+ <!-- 转换/加载失败:给一次重试入口(重试绕开缓存重新上传转换) -->
|
|
|
|
|
+ <div v-else-if="error" class="dwg-hint dwg-hint-error">
|
|
|
|
|
+ <span>{{ error }}</span>
|
|
|
|
|
+ <a-button size="small" type="link" @click="load(true)">重试</a-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-else ref="stageRef" class="dwg-stage" @wheel.prevent="onWheel" @mousedown="onMouseDown" @dblclick="resetView">
|
|
|
|
|
+ <img class="dwg-svg" :src="svgSrc" :style="svgStyle" alt="DWG 图纸预览" draggable="false" @error="onSvgError" />
|
|
|
|
|
+ <!-- 工具栏不吃 mousedown:否则从按钮上按下会连带触发舞台的拖拽平移 -->
|
|
|
|
|
+ <div class="dwg-toolbar" @mousedown.stop>
|
|
|
|
|
+ <span class="dwg-stat">{{ zoomText }}</span>
|
|
|
|
|
+ <a-button size="small" type="link" @click="resetView">适应窗口</a-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
|
|
|
|
+ import { getToken } from '/@/utils/auth/index';
|
|
|
|
|
+ import { buildStaticFileUrl, dwgToSvg, dwgToSvgInfo } from '/@/views/ventAI/manageAssistent/api';
|
|
|
|
|
+ import type { AttachedFile } from '/@/views/ventAI/manageAssistent/types/index';
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 右侧面板的 DWG 预览。
|
|
|
|
|
+ *
|
|
|
|
|
+ * DWG 是专有二进制格式,前端解析不了(对比 .dxf:明文,见 CadPreview 本地解析渲染),
|
|
|
|
|
+ * 只能「取出原始字节 → 上传后端转 SVG → 当作图片展示」。两个接口分工:
|
|
|
|
|
+ * 1) dwgFileToSVG:上传 + 转换,拿到生成的 svg 路径(转换结果落在服务端,重开面板不用重转);
|
|
|
|
|
+ * 2) dwgFileToSVGInfo:转换 + 直接返回 svg 正文,仅在 svg 内容拿不到/不可用时兜底。
|
|
|
|
|
+ *
|
|
|
|
|
+ * svg 必须自己取回来造 blob 地址再交给 <img>,不能把静态地址直接塞进 img src:
|
|
|
|
|
+ * 静态目录的响应头是 `Content-Type: application/force-download` + `X-Content-Type-Options: nosniff`,
|
|
|
|
|
+ * 浏览器据此判定"不是图片"而拒绝渲染(实测 <img> 直接 error,同样的字节换成 blob 地址就能显示)。
|
|
|
|
|
+ *
|
|
|
|
|
+ * 转换发生在预览面板而不是附件/卡片点击时:附件加进来、AI 给了下载链接,都不代表用户要打开图纸,
|
|
|
|
|
+ * 万一不看就白传一次几百 KB 到几 MB 的文件。
|
|
|
|
|
+ */
|
|
|
|
|
+ const props = defineProps<{ file: AttachedFile }>();
|
|
|
|
|
+
|
|
|
|
|
+ const stageRef = ref<HTMLElement | null>(null);
|
|
|
|
|
+ const loading = ref(false);
|
|
|
|
|
+ const loadingText = ref('');
|
|
|
|
|
+ const error = ref('');
|
|
|
|
|
+ const svgSrc = ref('');
|
|
|
|
|
+ const view = ref({ k: 1, tx: 0, ty: 0 });
|
|
|
|
|
+
|
|
|
|
|
+ const zoomText = computed(() => `${Math.round(view.value.k * 100)}%`);
|
|
|
|
|
+ const svgStyle = computed(() => {
|
|
|
|
|
+ const { k, tx, ty } = view.value;
|
|
|
|
|
+ return { transform: `translate(${tx}px, ${ty}px) scale(${k})` };
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 已转换出的 svg 静态地址按文件缓存:面板实例会随标签切换重建(RightPanelTabs 没加 :key),
|
|
|
|
|
+ // 同一份图纸关掉再打开很常见,每次重开都重新上传转换一次没有意义——本次会话内转换结果是稳定的。
|
|
|
|
|
+ const svgUrlCache = new Map<string, string>();
|
|
|
|
|
+
|
|
|
|
|
+ // 当前文件的上传体:转 SVG(首次与兜底)都要用,留着避免重复构造
|
|
|
|
|
+ let uploadSource: File | null = null;
|
|
|
|
|
+ // 交给 <img> 的 blob 地址(svg 正文所在),换文件/卸载时必须释放
|
|
|
|
|
+ let svgBlobUrl = '';
|
|
|
|
|
+ // 请求序号:换文件或重试后,在途请求的响应回来时状态已经属于另一个文件,必须丢弃
|
|
|
|
|
+ let loadToken = 0;
|
|
|
|
|
+ // svg 兜底只做一次,否则失败会在两个接口之间来回触发
|
|
|
|
|
+ let fallbackTried = false;
|
|
|
|
|
+
|
|
|
|
|
+ const releaseSvgBlob = () => {
|
|
|
|
|
+ if (svgBlobUrl) {
|
|
|
|
|
+ URL.revokeObjectURL(svgBlobUrl);
|
|
|
|
|
+ svgBlobUrl = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const resetView = () => {
|
|
|
|
|
+ view.value = { k: 1, tx: 0, ty: 0 };
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /** 把 svg 正文渲染出来:必须走 blob 地址(原因见文件头注释),空内容按失败处理 */
|
|
|
|
|
+ const applySvgText = (raw: string) => {
|
|
|
|
|
+ const svg = (raw || '').trim();
|
|
|
|
|
+ if (!svg) throw new Error('svg 内容为空');
|
|
|
|
|
+ releaseSvgBlob();
|
|
|
|
|
+ svgBlobUrl = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
|
|
|
|
|
+ svgSrc.value = svgBlobUrl;
|
|
|
|
|
+ resetView();
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /** 上传用的 File:本地上传的附件直接用原始文件(字节最保真),远端预览对象只有字节时按原文件名重建(后端用它命名生成物) */
|
|
|
|
|
+ const toUploadFile = (file: AttachedFile): File | null => {
|
|
|
|
|
+ if (file.originalFile) return file.originalFile;
|
|
|
|
|
+ if (file.arrayBuffer) return new File([file.arrayBuffer], file.name || 'preview.dwg', { type: 'application/octet-stream' });
|
|
|
|
|
+ return null;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const load = async (force = false) => {
|
|
|
|
|
+ const token = ++loadToken;
|
|
|
|
|
+ const file = props.file;
|
|
|
|
|
+ releaseSvgBlob();
|
|
|
|
|
+ fallbackTried = false;
|
|
|
|
|
+ error.value = '';
|
|
|
|
|
+ // 上一次转换可能还停在 loading(请求在途时被换文件/重试抢占),这里统一复位:
|
|
|
|
|
+ // 命中缓存的分支不会再把它置回 false,漏了这一行就会永远卡在「正在转换图纸」。
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+ resetView();
|
|
|
|
|
+
|
|
|
|
|
+ // 缓存的是转换产物地址而非 svg 正文:正文 1MB 上下,多份图纸攒在内存里不值当,
|
|
|
|
|
+ // 省下的只该是「重新上传 + 重新转换」这笔真正昂贵的开销。
|
|
|
|
|
+ const cachedUrl = force ? '' : svgUrlCache.get(file.id);
|
|
|
|
|
+ if (cachedUrl) {
|
|
|
|
|
+ svgSrc.value = '';
|
|
|
|
|
+ await loadSvgFromUrl(cachedUrl, token);
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ svgSrc.value = '';
|
|
|
|
|
+ uploadSource = toUploadFile(file);
|
|
|
|
|
+ if (!uploadSource) {
|
|
|
|
|
+ error.value = '未取到图纸内容,无法预览';
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ loading.value = true;
|
|
|
|
|
+ loadingText.value = '正在转换图纸,请稍候…';
|
|
|
|
|
+ try {
|
|
|
|
|
+ const result = await dwgToSvg(uploadSource);
|
|
|
|
|
+ if (token !== loadToken) return;
|
|
|
|
|
+ const url = result?.svgFile ? buildStaticFileUrl(result.svgFile) : '';
|
|
|
|
|
+ if (!url) throw new Error('转换结果缺少 svg 地址');
|
|
|
|
|
+ svgUrlCache.set(file.id, url);
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+ await loadSvgFromUrl(url, token);
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ if (token !== loadToken) return;
|
|
|
|
|
+ console.error('DWG 转 SVG 失败:', err);
|
|
|
|
|
+ error.value = '图纸转换失败,请稍后重试';
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /** 按转换产物地址取回 svg 正文再渲染(取不回来就换接口兜底) */
|
|
|
|
|
+ const loadSvgFromUrl = async (url: string, token: number) => {
|
|
|
|
|
+ loading.value = true;
|
|
|
|
|
+ loadingText.value = '正在加载图纸,请稍候…';
|
|
|
|
|
+ try {
|
|
|
|
|
+ const resp = await fetch(url, { headers: { 'X-Access-Token': getToken() } });
|
|
|
|
|
+ if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
|
|
|
|
+ const svg = await resp.text();
|
|
|
|
|
+ if (token !== loadToken) return;
|
|
|
|
|
+ applySvgText(svg);
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ if (token !== loadToken) return;
|
|
|
|
|
+ console.error('取回 DWG 转换结果失败:', err);
|
|
|
|
|
+ const ok = await loadSvgFromInfo(token);
|
|
|
|
|
+ if (token !== loadToken) return;
|
|
|
|
|
+ if (!ok) error.value = '图纸加载失败,请稍后重试';
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ if (token === loadToken) loading.value = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /** 兜底:换「转换并返回 svg 正文」的接口再拿一次;成功返回 true */
|
|
|
|
|
+ const loadSvgFromInfo = async (token: number) => {
|
|
|
|
|
+ if (!uploadSource) return false;
|
|
|
|
|
+ try {
|
|
|
|
|
+ const result = await dwgToSvgInfo(uploadSource);
|
|
|
|
|
+ if (token !== loadToken) return false;
|
|
|
|
|
+ applySvgText(result?.svgInfo || '');
|
|
|
|
|
+ // 已经用过内容接口了,后面 <img> 再失败就别再回来重试同一条路
|
|
|
|
|
+ fallbackTried = true;
|
|
|
|
|
+ return true;
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ if (token === loadToken) console.error('DWG 转 SVG 内容失败:', err);
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /** <img> 渲染失败(取回的字节其实不是有效 svg)时再兜一次 */
|
|
|
|
|
+ const onSvgError = async () => {
|
|
|
|
|
+ if (fallbackTried) {
|
|
|
|
|
+ error.value = '图纸加载失败,请稍后重试';
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ const token = loadToken;
|
|
|
|
|
+ loading.value = true;
|
|
|
|
|
+ loadingText.value = '正在重新获取图纸内容,请稍候…';
|
|
|
|
|
+ const ok = await loadSvgFromInfo(token);
|
|
|
|
|
+ if (token !== loadToken) return;
|
|
|
|
|
+ if (!ok) error.value = '图纸加载失败,请稍后重试';
|
|
|
|
|
+ loading.value = false;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 平移/缩放:与 DXF 预览(CadPreview)保持同一套操作——滚轮缩放、按住拖拽、双击复位
|
|
|
|
|
+ let dragging = false;
|
|
|
|
|
+ let lastX = 0;
|
|
|
|
|
+ let lastY = 0;
|
|
|
|
|
+
|
|
|
|
|
+ const onMouseMove = (ev: MouseEvent) => {
|
|
|
|
|
+ if (!dragging) return;
|
|
|
|
|
+ const v = view.value;
|
|
|
|
|
+ view.value = { ...v, tx: v.tx + (ev.clientX - lastX), ty: v.ty + (ev.clientY - lastY) };
|
|
|
|
|
+ lastX = ev.clientX;
|
|
|
|
|
+ lastY = ev.clientY;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const onMouseUp = () => {
|
|
|
|
|
+ dragging = false;
|
|
|
|
|
+ window.removeEventListener('mousemove', onMouseMove);
|
|
|
|
|
+ window.removeEventListener('mouseup', onMouseUp);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const onMouseDown = (ev: MouseEvent) => {
|
|
|
|
|
+ dragging = true;
|
|
|
|
|
+ lastX = ev.clientX;
|
|
|
|
|
+ lastY = ev.clientY;
|
|
|
|
|
+ window.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
+ window.addEventListener('mouseup', onMouseUp);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const onWheel = (ev: WheelEvent) => {
|
|
|
|
|
+ const stage = stageRef.value;
|
|
|
|
|
+ if (!stage) return;
|
|
|
|
|
+ const rect = stage.getBoundingClientRect();
|
|
|
|
|
+ // 变换原点在图片中心(即舞台中心),所以光标位置先换算成「相对中心」的坐标
|
|
|
|
|
+ const px = ev.clientX - rect.left - rect.width / 2;
|
|
|
|
|
+ const py = ev.clientY - rect.top - rect.height / 2;
|
|
|
|
|
+ const v = view.value;
|
|
|
|
|
+ const k = Math.min(Math.max(v.k * (ev.deltaY < 0 ? 1.15 : 1 / 1.15), 0.05), 200);
|
|
|
|
|
+ // 以光标为不动点:q = c·k + t → t' = q - (q - t)·k'/k
|
|
|
|
|
+ const ratio = k / v.k;
|
|
|
|
|
+ view.value = { k, tx: px - (px - v.tx) * ratio, ty: py - (py - v.ty) * ratio };
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ onMounted(() => {
|
|
|
|
|
+ void load();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 面板实例会在多个文件标签之间复用,换文件必须重新走一遍转换
|
|
|
|
|
+ watch(
|
|
|
|
|
+ () => props.file,
|
|
|
|
|
+ () => {
|
|
|
|
|
+ void load();
|
|
|
|
|
+ }
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ onBeforeUnmount(() => {
|
|
|
|
|
+ loadToken++; // 在途响应作废,避免卸载后还去改已销毁实例的状态
|
|
|
|
|
+ onMouseUp();
|
|
|
|
|
+ releaseSvgBlob();
|
|
|
|
|
+ });
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="less">
|
|
|
|
|
+ .dwg-preview {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dwg-stage {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-height: 320px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ // 后端转出的 svg 是透明底,图元里绝大多数是黑线(#000000,AutoCAD 默认色,实测 1MB 图纸里占六成以上),
|
|
|
|
|
+ // 所以必须配白底——不像 DXF 预览那样画在深色画布上,否则主体线条几乎看不见。
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ cursor: grab;
|
|
|
|
|
+ user-select: none;
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ cursor: grabbing;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 后端生成的 svg 根节点带宽高 100% 和 viewBox(preserveAspectRatio 默认 xMidYMid meet),
|
|
|
|
|
+ // 图片框铺满舞台时图形本身就已是「适应窗口」,缩放/平移只在这个基础上叠加 transform
|
|
|
|
|
+ .dwg-svg {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ transform-origin: center center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dwg-toolbar {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 8px;
|
|
|
|
|
+ bottom: 8px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dwg-stat {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ // 面板其余部分是深色,这里的文字压在白底舞台上,取更深的灰
|
|
|
|
|
+ color: #606a76;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dwg-hint {
|
|
|
|
|
+ padding: 12px 16px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #8b949e;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dwg-hint-error {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|