From fc40cb8a656672ac038b27443d495472e0bd190e Mon Sep 17 00:00:00 2001 From: Hermes CI Fix Date: Tue, 14 Jul 2026 17:22:58 +0800 Subject: [PATCH] =?UTF-8?q?task=202:=20=E5=AF=BC=E5=87=BA=E5=9B=BE?= =?UTF-8?q?=E7=89=87=20=E2=80=94=20=E6=B7=BB=E5=8A=A0html2canvas=E4=BE=9D?= =?UTF-8?q?=E8=B5=96=E5=92=8C=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87=E6=8C=89?= =?UTF-8?q?=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 3 ++- frontend/pnpm-lock.yaml | 18 ++++++++++++++++++ frontend/src/views/MapCanvas.vue | 23 +++++++++++++++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 962a3abd..01e686c1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,8 @@ "pinia": "^3.0.2", "vue": "^3.5.32", "vue-echarts": "^7.0.3", - "vue-router": "^4.6.4" + "vue-router": "^4.6.4", + "vuedraggable": "^4.1.0" }, "devDependencies": { "@types/node": "^24.12.2", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 4a52fa22..02c25800 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: vue-router: specifier: ^4.6.4 version: 4.6.4(vue@3.5.34(typescript@6.0.3)) + vuedraggable: + specifier: ^4.1.0 + version: 4.1.0(vue@3.5.34(typescript@6.0.3)) devDependencies: '@types/node': specifier: ^24.12.2 @@ -1540,6 +1543,9 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + sortablejs@1.14.0: + resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==} + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -1724,6 +1730,11 @@ packages: typescript: optional: true + vuedraggable@4.1.0: + resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==} + peerDependencies: + vue: ^3.0.1 + w3c-keyname@2.2.8: resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==} @@ -3192,6 +3203,8 @@ snapshots: shebang-regex@3.0.0: {} + sortablejs@1.14.0: {} + source-map-js@1.2.1: {} speakingurl@14.0.1: {} @@ -3358,6 +3371,11 @@ snapshots: optionalDependencies: typescript: 6.0.3 + vuedraggable@4.1.0(vue@3.5.34(typescript@6.0.3)): + dependencies: + sortablejs: 1.14.0 + vue: 3.5.34(typescript@6.0.3) + w3c-keyname@2.2.8: {} webpack-virtual-modules@0.6.2: {} diff --git a/frontend/src/views/MapCanvas.vue b/frontend/src/views/MapCanvas.vue index 9e4aa5ca..a09846c0 100644 --- a/frontend/src/views/MapCanvas.vue +++ b/frontend/src/views/MapCanvas.vue @@ -33,6 +33,7 @@ 查看执行看板 + 📷 导出图片 @@ -280,6 +281,7 @@ import api from "../api/index" import { LAYER_CONFIG, LAYER_KEYS, getLayerList } from "../config/layers" import StrategyLayer from "../components/strategy-map/StrategyLayer.vue" import ConnectionLines from "../components/strategy/ConnectionLines.vue" +import html2canvas from "html2canvas" // ── 四层泳道配置 ── const layerKeysOrdered = [...LAYER_KEYS] @@ -913,6 +915,27 @@ function goAlignment() { window.location.href = url } +/** 导出画布为PNG图片 */ +async function exportImage() { + const el = document.querySelector('.canvas-scroll-wrap') as HTMLElement + if (!el) { ElMessage.warning('画布尚未加载'); return } + try { + const canvas = await html2canvas(el, { + useCORS: true, + backgroundColor: '#ffffff', + scale: 2, + }) + const link = document.createElement('a') + link.download = '战略地图.png' + link.href = canvas.toDataURL('image/png') + link.click() + ElMessage.success('图片已导出') + } catch (e) { + console.error('exportImage error:', e) + ElMessage.error('导出失败') + } +} + onMounted(async () => { const r: any = await mapApi.list() maps.value = r.data || []