Merge branch 'dev' of github.com:dataease/dataease into dev

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -31,11 +31,16 @@
           class="dialog-css"
           :destroy-on-close="true"
         >
-          <span style="position: absolute;right: 70px;top:15px">
+          <span  v-if="chartDetailsVisible"  style="position: absolute;right: 70px;top:15px">
-            <el-button size="mini" @click="exportExcel">
+            <el-dropdown>
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+              <el-button size="mini">
-              {{ $t('chart.export_details') }}
+                {{ $t('chart.export') }}<i class="el-icon-download" />
               </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </span>
           <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
@@ -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 })

frontend/src/components/canvas/components/Editor/index.vue

@@ -153,11 +153,16 @@
       :destroy-on-close="true"
       :show-close="true"
     >
-      <span style="position: absolute;right: 70px;top:15px">
+      <span  v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
-        <el-button size="mini" @click="exportExcel">
+        <el-dropdown>
-          <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+              <el-button size="mini">
-          {{ $t('chart.export_details') }}
+                {{ $t('chart.export') }}<i class="el-icon-download" />
               </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
       </span>
       <UserViewDialog
         v-if="chartDetailsVisible"
@@ -1347,6 +1352,9 @@ export default {
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
     },
+    exportViewImg() {
+      this.$refs['userViewDialog'].exportViewImg()
+    },
     showViewDetails(index) {
       this.$refs.wrapperChild[index].openChartDetailsDialog()
     },

frontend/src/components/canvas/custom-component/UserViewDialog.vue

@@ -40,7 +40,7 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { exportDetails } from '@/api/panel/panel'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import { deepCopy, exportImg } from '@/components/canvas/utils/utils'
 export default {
   name: 'UserView',
   components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
@@ -138,6 +138,9 @@ export default {
         _this.exportExcelDownload()
       }
     },
+    exportViewImg() {
+      exportImg(this.chart.name)
+    },
     exportExcelDownload(snapshot, width, height) {
       const excelHeader = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.name)
       const excelHeaderKeys = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.dataeaseName)

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 })
+}

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',
@@ -1088,7 +1091,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',
@@ -1512,6 +1516,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',

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: '類別軸',
@@ -1088,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 頁，默認抽取第一個',
@@ -1513,6 +1517,7 @@ export default {
     save_to_panel: '保存爲模闆',
     export_to_panel: '導出爲模闆',
     export_to_pdf: '導出爲PDF',
+    export_to_img: '導出爲图片',
     preview: '預覽',
     fullscreen_preview: '全屏預覽',
     new_tab_preview: '新Tab頁預覽',

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: '类别轴',
@@ -1091,7 +1093,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 页，默认抽取第一个',
@@ -1521,6 +1524,7 @@ export default {
     save_to_panel: '保存为模板',
     export_to_panel: '导出为模板',
     export_to_pdf: '导出为PDF',
+    export_to_img: '导出为图片',
     preview: '预览',
     fullscreen_preview: '全屏预览',
     new_tab_preview: '新Tab页预览',

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe666;</span>
+                <div class="name">图片</div>
+                <div class="code-name">&amp;#xe666;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6e4;</span>
                 <div class="name">超链接</div>
@@ -558,9 +564,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
+  src: url('iconfont.woff2?t=1650596962167') format('woff2'),
-       url('iconfont.woff?t=1650358178587') format('woff'),
+       url('iconfont.woff?t=1650596962167') format('woff'),
-       url('iconfont.ttf?t=1650358178587') format('truetype');
+       url('iconfont.ttf?t=1650596962167') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -586,6 +592,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-tupian"></span>
+            <div class="name">
+              图片
+            </div>
+            <div class="code-name">.icon-tupian
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-chaolianjie1"></span>
             <div class="name">
@@ -1342,6 +1357,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tupian"></use>
+                </svg>
+                <div class="name">图片</div>
+                <div class="code-name">#icon-tupian</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-chaolianjie1"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
+  src: url('iconfont.woff2?t=1650596962167') format('woff2'),
-       url('iconfont.woff?t=1650358178587') format('woff'),
+       url('iconfont.woff?t=1650596962167') format('woff'),
-       url('iconfont.ttf?t=1650358178587') format('truetype');
+       url('iconfont.ttf?t=1650596962167') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-tupian:before {
+  content: "\e666";
+}
+
 .icon-chaolianjie1:before {
   content: "\e6e4";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1278123",
+      "name": "图片",
+      "font_class": "tupian",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
     {
       "icon_id": "6156146",
       "name": "超链接",

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()

frontend/src/views/panel/list/PanelViewShow.vue

@@ -35,14 +35,14 @@
               </el-tooltip>
             </span>
             <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-              <el-tooltip :content="$t('panel.export_to_panel')">
+              <el-dropdown>
-                <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
+                <el-button size="mini" class="el-icon-download" circle />
-              </el-tooltip>
+                <el-dropdown-menu slot="dropdown">
-            </span>
+                  <el-dropdown-item icon="el-icon-copy-document" @click.native="downloadToTemplate">{{ $t('panel.export_to_panel') }}</el-dropdown-item>
-            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
+                  <el-dropdown-item icon="el-icon-notebook-2" @click.native="downloadAsPDF">{{ $t('panel.export_to_pdf') }}</el-dropdown-item>
-              <el-tooltip :content="$t('panel.export_to_pdf')">
+                  <el-dropdown-item icon="el-icon-picture-outline" @click.native="downloadAsImage">{{ $t('panel.export_to_img') }}</el-dropdown-item>
-                <el-button class="el-icon-notebook-2" size="mini" circle @click="downloadAsPDF" />
+                </el-dropdown-menu>
-              </el-tooltip>
+              </el-dropdown>
             </span>
             <span style="float: right;margin-right: 10px">
               <el-tooltip :content="$t('panel.fullscreen_preview')">
@@ -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
       //