From 0d482ad9c4768e65a4f5f4fca49b4f29e3770daf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 5 Apr 2022 19:01:52 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=AF=BC=E5=87=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 33 +++++++++++++++ src/plugins/icon.ts | 4 +- .../modules/chartEditStore/chartEditStore.ts | 25 ++++------- src/styles/common/_dark.scss | 2 +- src/styles/common/_light.scss | 2 +- src/utils/crypto.ts | 2 +- src/utils/file.ts | 33 ++++++++++----- src/utils/utils.ts | 22 +++++++++- .../ChartData/hooks/useFile.hooks.ts | 4 +- .../components/EditRange/index.vue | 4 -- src/views/chart/ContentEdit/index.vue | 16 ++++---- src/views/chart/HeaderRightBtn/index.vue | 41 +++++++++++++++++-- .../components/ProjectItemsCard/index.vue | 4 +- 14 files changed, 140 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 6fc28bd5..eb517fa1 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "crypto-ts": "^1.0.2", "echarts-liquidfill": "3", "highlight.js": "^11.5.0", + "html2canvas": "^1.4.1", "naive-ui": "^2.25.2", "pinia": "^2.0.6", "screenfull": "^6.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2adde3fd..15c9ded9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,7 @@ specifiers: eslint-plugin-prettier: ^4.0.0 eslint-plugin-vue: ^8.2.0 highlight.js: ^11.5.0 + html2canvas: ^1.4.1 lodash: ~4.17.21 mockjs: ^1.1.0 naive-ui: ^2.25.2 @@ -56,6 +57,7 @@ dependencies: crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2 echarts-liquidfill: r2.cnpmjs.org/echarts-liquidfill/3.1.0_echarts@5.3.0 highlight.js: registry.npmjs.org/highlight.js/11.5.0 + html2canvas: 1.4.1 naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24 pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24 screenfull: rg.cnpmjs.org/screenfull/6.0.0 @@ -100,6 +102,17 @@ devDependencies: packages: + /base64-arraybuffer/1.0.2: + resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} + engines: {node: '>= 0.6.0'} + dev: false + + /css-line-break/2.1.0: + resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==} + dependencies: + utrie: 1.0.2 + dev: false + /esbuild-android-arm64/0.13.15: resolution: {integrity: sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==} cpu: [arm64] @@ -261,6 +274,14 @@ packages: requiresBuild: true dev: true + /html2canvas/1.4.1: + resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==} + engines: {node: '>=8.0.0'} + dependencies: + css-line-break: 2.1.0 + text-segmentation: 1.0.3 + dev: false + /jest-diff/27.4.6: resolution: {integrity: sha512-zjaB0sh0Lb13VyPsd92V7HkqF6yKRH9vm33rwBt7rPYrpQvS1nCvlIy2pICbKta+ZjWngYLNn4cCK4nyZkjS/w==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} @@ -290,6 +311,12 @@ packages: resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==} dev: false + /text-segmentation/1.0.3: + resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==} + dependencies: + utrie: 1.0.2 + dev: false + /uglify-js/3.15.1: resolution: {integrity: sha512-FAGKF12fWdkpvNJZENacOH0e/83eG6JyVQyanIJaBXCN1J11TUQv1T1/z8S+Z0CG0ZPk1nPcreF/c7lrTd0TEQ==} engines: {node: '>=0.8.0'} @@ -298,6 +325,12 @@ packages: dev: true optional: true + /utrie/1.0.2: + resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==} + dependencies: + base64-arraybuffer: 1.0.2 + dev: false + /vfonts/0.0.3: resolution: {integrity: sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ==} dev: false diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 5ea31501..0f5debbb 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -8,7 +8,8 @@ import { Pencil as PencilIcon, HammerOutline as HammerIcon, DesktopOutline as DesktopOutlineIcon, - DownloadOutline as DownloadIcon, + Download as DownloadIcon, + DownloadOutline as DownloadOutlineIcon, Open as OpenIcon, Send as SendIcon, InformationCircleOutline as InformationCircleIcon, @@ -122,6 +123,7 @@ const ionicons5 = { DesktopOutlineIcon, // 下载 DownloadIcon, + DownloadOutlineIcon, // 导出 OpenIcon, // 导出 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 28e4f7e5..a1bf4c9a 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -508,16 +508,6 @@ export const useChartEditStore = defineStore({ } }, // ---------------- - // * 设置页面变换时候的 Class - setPageSizeClass(): void { - const dom = this.getEditCanvas.editContentDom - if (dom) { - dom.classList.add('content-resize') - setTimeout(() => { - dom.classList.remove('content-resize') - }, 600) - } - }, // * 设置页面大小 setPageSize(scale: number): void { this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`) @@ -572,15 +562,16 @@ export const useChartEditStore = defineStore({ } return remove }, - // * 设置缩放 - setScale(scale: number, sys = true): void { - if (!this.getEditCanvas.lockScale) { - this.setPageSizeClass() + /** + * * 设置缩放 + * @param scale 0~1 number 缩放比例; + * @param force boolean 强制缩放 + */ + setScale(scale: number, force = false): void { + if (!this.getEditCanvas.lockScale || force) { this.setPageSize(scale) this.getEditCanvas.userScale = scale - if (sys) { - this.getEditCanvas.scale = scale - } + this.getEditCanvas.scale = scale } } } diff --git a/src/styles/common/_dark.scss b/src/styles/common/_dark.scss index cbf0d313..64b8b531 100644 --- a/src/styles/common/_dark.scss +++ b/src/styles/common/_dark.scss @@ -30,6 +30,6 @@ $dark: ( // hover 边框颜色 hover-border-color: $--color-dark-bg-5, // 阴影 - box-shadow: 0 8px 20px #5252521f + box-shadow: 0 8px 10px #1e1e1e1f ); diff --git a/src/styles/common/_light.scss b/src/styles/common/_light.scss index 31762c27..cf6dc90c 100644 --- a/src/styles/common/_light.scss +++ b/src/styles/common/_light.scss @@ -32,5 +32,5 @@ $light: ( // hover 边框颜色 hover-border-color: $--color-light-bg-4, // 阴影 - box-shadow: 0 8px 20px #0000001a + box-shadow: 0 8px 10px #00000012 ); diff --git a/src/utils/crypto.ts b/src/utils/crypto.ts index 35e872db..96989aa2 100644 --- a/src/utils/crypto.ts +++ b/src/utils/crypto.ts @@ -1,5 +1,5 @@ import * as CryptoJS from 'crypto-ts' - +// 加密 const AES_KEY = 'mt' export const cryptoEncode = (data: string): string => { diff --git a/src/utils/file.ts b/src/utils/file.ts index 1967dfee..0f8a15f2 100644 --- a/src/utils/file.ts +++ b/src/utils/file.ts @@ -19,25 +19,36 @@ export const readFile = (file: File) => { } /** - * 下载数据 - * @param { string } content 数据内容 - * @param { ?string } filename 文件名称（默认随机字符） - * @param { ?string } fileSuffix 文件名称（默认随机字符） + * * 通过 a 标签下载数据 + * @param url + * @param filename + * @param fileSuffix */ -export const downloadFile = ( - content: string, - filename = new Date().getDate().toString(), - fileSuffix?: string -) => { +export const downloadByA = (url: string, filename = new Date().getDate().toString(), fileSuffix?: string) => { const ele = document.createElement('a') // 创建下载链接 ele.download = `${filename}.${fileSuffix}` //设置下载的名称 ele.style.display = 'none' // 隐藏的可下载链接 // 字符内容转变成blob地址 - const blob = new Blob([content]) - ele.href = URL.createObjectURL(blob) + ele.href = url // 绑定点击时间 document.body.appendChild(ele) ele.click() // 然后移除 document.body.removeChild(ele) } + +/** + * 下载数据 + * @param { string } content 数据内容 + * @param { ?string } filename 文件名称（默认随机字符） + * @param { ?string } fileSuffix 文件名称（默认随机字符） + */ +export const downloadTextFile = ( + content: string, + filename = new Date().getDate().toString(), + fileSuffix?: string +) => { + // 字符内容转变成blob地址 + const blob = new Blob([content]) + downloadByA(URL.createObjectURL(blob), filename, fileSuffix) +} diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 8f63d3ef..62f74ca5 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -3,6 +3,8 @@ import { NIcon } from 'naive-ui' import screenfull from 'screenfull' import throttle from 'lodash/throttle' import Image_404 from '../assets/images/exception/image-404.png' +import html2canvas from 'html2canvas' +import { downloadByA } from './file' /** * * 判断是否是开发环境 @@ -146,7 +148,7 @@ export const addEventListener = ( type, throttle(listener, 300, { leading: true, - trailing: false + trailing: false, }), options ) @@ -163,3 +165,21 @@ export const removeEventListener = ( if (!target) return target.removeEventListener(type, listener) } + +/** + * * 截取画面为图片 + * @param html 需要截取的 DOM + */ +export const canvasCut = (html: HTMLElement | null, callback?: Function) => { + if (!html) { + window['$message'].error('导出失败！') + if (callback) callback() + return + } + + html2canvas(html).then((canvas: HTMLCanvasElement) => { + window['$message'].success('导出成功！') + downloadByA(canvas.toDataURL(), undefined, 'png') + if (callback) callback() + }) +} diff --git a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts b/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts index 1172aef1..42f38798 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts +++ b/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts @@ -1,7 +1,7 @@ import { ref, toRef, nextTick } from 'vue' import { UploadCustomRequestOptions } from 'naive-ui' import { FileTypeEnum } from '@/enums/fileTypeEnum' -import { readFile, downloadFile } from '@/utils' +import { readFile, downloadTextFile } from '@/utils' export const useFile = (targetData: any) => { const uploadFileListRef = ref() @@ -35,7 +35,7 @@ export const useFile = (targetData: any) => { const download = () => { try { window['$message'].success('下载中，请耐心等待...') - downloadFile(JSON.stringify(targetData.value.option.dataset), undefined, 'json') + downloadTextFile(JSON.stringify(targetData.value.option.dataset), undefined, 'json') } catch (error) { window['$message'].error('下载失败，数据错误！') } diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue index b2258fef..b084a925 100644 --- a/src/views/chart/ContentEdit/components/EditRange/index.vue +++ b/src/views/chart/ContentEdit/components/EditRange/index.vue @@ -54,12 +54,8 @@ const rangeStyle = computed(() => { diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index e39fb436..8c1f512f 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -87,20 +87,18 @@ onMounted(() => {