From 3b0e2b86c1d78e197e3948419ee3a9a18dcdbca5 Mon Sep 17 00:00:00 2001 From: junjun Date: Fri, 22 Apr 2022 10:20:10 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E4=BB=AA=E8=A1=A8=E7=9B=98?= =?UTF-8?q?=E9=98=88=E5=80=BC=E8=8C=83=E5=9B=B4=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 3 ++- frontend/src/lang/tw.js | 3 ++- frontend/src/lang/zh.js | 3 ++- .../src/views/chart/components/senior/Threshold.vue | 10 ++++++++++ 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 2ab6ac7ebf..6c0b6871c8 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1088,7 +1088,8 @@ export default { unit_ten_thousand: 'Ten Thousand', unit_million: 'Million', unit_hundred_million: 'Hundred Million', - formatter_decimal_count_error: 'Range 0-10' + formatter_decimal_count_error: 'Range 0-10', + gauge_threshold_compare_error: 'Range must added' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index ba96d54137..05e0b65709 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1088,7 +1088,8 @@ export default { unit_ten_thousand: '萬', unit_million: '百萬', unit_hundred_million: '億', - formatter_decimal_count_error: '請輸入0-10的整數' + formatter_decimal_count_error: '請輸入0-10的整數', + gauge_threshold_compare_error: '阈值範圍需逐級遞增' }, dataset: { sheet_warn: '有多個 Sheet 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index dccbecd8b7..31a07e9645 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1091,7 +1091,8 @@ export default { unit_ten_thousand: '万', unit_million: '百万', unit_hundred_million: '亿', - formatter_decimal_count_error: '请输入0-10的整数' + formatter_decimal_count_error: '请输入0-10的整数', + gauge_threshold_compare_error: '阈值范围需逐级递增' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/components/senior/Threshold.vue b/frontend/src/views/chart/components/senior/Threshold.vue index e970c5349f..6b433b70fe 100644 --- a/frontend/src/views/chart/components/senior/Threshold.vue +++ b/frontend/src/views/chart/components/senior/Threshold.vue @@ -137,6 +137,16 @@ export default { }) return } + if (i > 0) { + if (parseFloat(ele) <= parseFloat(arr[i - 1])) { + this.$message({ + message: this.$t('chart.gauge_threshold_compare_error'), + type: 'error', + showClose: true + }) + return + } + } } } this.changeThreshold() From 04e965b7aba5150ae9fb381e922eca2b988bdb7f Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 22 Apr 2022 12:01:19 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E7=9B=B4=E6=8E=A5=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/Editor/Preview.vue | 16 +++++++--- .../canvas/components/Editor/index.vue | 16 +++++++--- .../custom-component/UserViewDialog.vue | 5 ++- frontend/src/components/canvas/utils/utils.js | 27 ++++++++++++++++ frontend/src/lang/en.js | 3 ++ frontend/src/lang/tw.js | 3 ++ frontend/src/lang/zh.js | 4 ++- frontend/src/styles/deicon/demo_index.html | 29 ++++++++++++++++-- frontend/src/styles/deicon/iconfont.css | 10 ++++-- frontend/src/styles/deicon/iconfont.js | 2 +- frontend/src/styles/deicon/iconfont.json | 7 +++++ frontend/src/styles/deicon/iconfont.ttf | Bin 23692 -> 24084 bytes frontend/src/styles/deicon/iconfont.woff | Bin 14764 -> 15032 bytes frontend/src/styles/deicon/iconfont.woff2 | Bin 12532 -> 12764 bytes 14 files changed, 105 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 5da0a077a3..61fc45c893 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -32,10 +32,15 @@ :destroy-on-close="true" > - - - {{ $t('chart.export_details') }} - + + + {{ $t('chart.export') }} + + + Excle + {{ $t('chart.image') }} + + @@ -326,6 +331,9 @@ export default { exportExcel() { this.$refs['userViewDialog'].exportExcel() }, + exportViewImg() { + this.$refs['userViewDialog'].exportViewImg() + }, deselectCurComponent(e) { if (!this.isClickComponent) { this.$store.commit('setCurComponent', { component: null, index: null }) diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index d2e05831b5..0e340487aa 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -154,10 +154,15 @@ :show-close="true" > - - - {{ $t('chart.export_details') }} - + + + {{ $t('chart.export') }} + + + Excle + {{ $t('chart.image') }} + + item.name) const excelHeaderKeys = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.dataeaseName) diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 624e7a9515..860bf7861a 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -9,6 +9,7 @@ import { import { uuid } from 'vue-uuid' import store from '@/store' import { AIDED_DESIGN } from '@/views/panel/panel' +import html2canvas from 'html2canvasde' export function deepCopy(target) { if (typeof target === 'object') { @@ -156,3 +157,29 @@ export function checkViewTitle(opt, id, tile) { } } +export function exportImg(imgName) { + const canvasID = document.getElementById('chartCanvas') + const a = document.createElement('a') + html2canvas(canvasID).then(canvas => { + const dom = document.body.appendChild(canvas) + dom.style.display = 'none' + a.style.display = 'none' + document.body.removeChild(dom) + const blob = dataURLToBlob(dom.toDataURL('image/png', 1)) + a.setAttribute('href', URL.createObjectURL(blob)) + a.setAttribute('download', imgName + '.png') + document.body.appendChild(a) + a.click() + URL.revokeObjectURL(blob) + document.body.removeChild(a) + }) +} + +export function dataURLToBlob(dataurl) { // ie 图片转格式 + const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1] + const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n) + while (n--) { + u8arr[n] = bstr.charCodeAt(n) + } + return new Blob([u8arr], { type: mime }) +} diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 1b908c0752..d57a3442f1 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -903,7 +903,10 @@ export default { filter_in: 'IN', filter_not_in: 'NOT IN', chart_details: 'Chart Details', + details: 'Details', + image: 'Image', export_details: 'Export Details', + export: 'Export', color_light: 'Light', color_classical: 'Classical', color_fresh: 'Fresh', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 420d0effdd..ad7bfb75fa 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -911,7 +911,10 @@ export default { color_fast: '輕快', color_spiritual: '靈動', chart_details: '視圖明細', + details: '明细', + image: '图片', export_details: '導出明細', + export: '导出', chart_data: '數據', chart_style: '樣式', drag_block_type_axis: '類別軸', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 759e36a20c..d64157aab0 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -913,7 +913,9 @@ export default { color_fast: '轻快', color_spiritual: '灵动', chart_details: '视图明细', - export_details: '导出明细', + export: '导出', + details: '明细', + image: '图片', chart_data: '数据', chart_style: '样式', drag_block_type_axis: '类别轴', diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index de8d8ba6f3..a8e8256837 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,12 @@
    +
  • + +
    图片
    +
    &#xe666;
    +
    • +
  • 超链接
    @@ -558,9 +564,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
-       url('iconfont.woff?t=1650358178587') format('woff'),
-       url('iconfont.ttf?t=1650358178587') format('truetype');
+  src: url('iconfont.woff2?t=1650596962167') format('woff2'),
+       url('iconfont.woff?t=1650596962167') format('woff'),
+       url('iconfont.ttf?t=1650596962167') format('truetype');
 }

    第二步：定义使用 iconfont 的样式

    @@ -586,6 +592,15 @@
      +
    • + +
      + 图片 +
      +
      .icon-tupian +
      +
      • +
    • @@ -1342,6 +1357,14 @@
        +
      • + +
        图片
        +
        #icon-tupian
        +
        • +
      • + {{ $t('chart.export') }} diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 0e340487aa..4dcc72c839 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -153,7 +153,7 @@ :destroy-on-close="true" :show-close="true" > - + {{ $t('chart.export') }} diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index d57a3442f1..e3fb03ece1 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1512,6 +1512,7 @@ export default { save_to_panel: 'Save to template', export_to_panel: 'Export to template', export_to_pdf: 'Export to PDF', + export_to_img: 'Export to Image', preview: 'Preview', fullscreen_preview: 'Fullscreen Preview', new_tab_preview: 'New Tab Preview', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index ad7bfb75fa..b3987c27a7 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1513,6 +1513,7 @@ export default { save_to_panel: '保存爲模闆', export_to_panel: '導出爲模闆', export_to_pdf: '導出爲PDF', + export_to_img: '導出爲图片', preview: '預覽', fullscreen_preview: '全屏預覽', new_tab_preview: '新Tab頁預覽', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index d64157aab0..e370c19d5d 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1520,6 +1520,7 @@ export default { save_to_panel: '保存为模板', export_to_panel: '导出为模板', export_to_pdf: '导出为PDF', + export_to_img: '导出为图片', preview: '预览', fullscreen_preview: '全屏预览', new_tab_preview: '新Tab页预览', diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index 9ff03807e4..f6c96880f9 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -35,14 +35,14 @@ - - - - - - - - + + + + {{ $t('panel.export_to_panel') }} + {{ $t('panel.export_to_pdf') }} + {{ $t('panel.export_to_img') }} + + @@ -138,6 +138,7 @@ import { queryAll } from '@/api/panel/pdfTemplate' import ShareHead from '@/views/panel/GrantAuth/ShareHead' import { initPanelData } from '@/api/panel/panel' import { proxyInitPanelData } from '@/api/panel/shareProxy' +import { dataURLToBlob } from '@/components/canvas/utils/utils' export default { name: 'PanelViewShow', components: { Preview, SaveToTemplate, PDFPreExport, ShareHead }, @@ -282,6 +283,34 @@ export default { }, 50) }, + downloadAsImage() { + this.dataLoading = true + setTimeout(() => { + this.exporting = true + setTimeout(() => { + const canvasID = document.getElementById('canvasInfoTemp') + const a = document.createElement('a') + html2canvas(canvasID).then(canvas => { + this.exporting = false + const dom = document.body.appendChild(canvas) + dom.style.display = 'none' + a.style.display = 'none' + document.body.removeChild(dom) + const blob = dataURLToBlob(dom.toDataURL('image/png', 1)) + a.setAttribute('href', URL.createObjectURL(blob)) + a.setAttribute('download', this.$store.state.panel.panelInfo.name + '.png') + document.body.appendChild(a) + a.click() + URL.revokeObjectURL(blob) + document.body.removeChild(a) + setTimeout(() => { + this.dataLoading = false + }, 300) + }) + }, 500) + }, 0) + }, + downloadAsPDF() { // this.pdfExportShow = true //