项目初始化

datax-ui/src/utils/image-compress.js

+/**
+ * @param img 压缩图片
+ * @param width：压缩后宽度
+ * @param height：压缩后高度
+ * @param rate：压缩比率,0~1，越小压缩比率越大
+ * @returns {string} 返回base64
+ */
+export function compressImg(img, width, height, rate) {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  canvas.width = width
+  canvas.height = height
+  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
+  return canvas.toDataURL('image/png', rate)
+}

datax-ui/src/views/visual/databoard/DataBoardBuild.vue

@@ -28,7 +28,7 @@
           取消
         </el-button>
       </div>
-      <div class="widget-right-wrapper">
+      <div class="widget-right-wrapper" id="boardWrapper">
         <grid-layout
           :layout.sync="layout"
           :col-num="24"
@@ -74,6 +74,8 @@ import { getDataBoard, buildDataBoard } from '@/api/visual/databoard'
 import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
 import VueGridLayout from 'vue-grid-layout'
 import ChartPanel from '../datachart/components/ChartPanel'
+import html2canvas from 'html2canvas'
+import { compressImg } from '@/utils/image-compress'
 
 export default {
   name: 'DataBoardBuild',
@@ -105,7 +107,8 @@ export default {
           charts.forEach(function(item, index, arr) {
             _this.parserChart(item)
           })
-          this.charts = charts
+          this.dataBoard.charts = JSON.parse(JSON.stringify(charts))
+          this.charts = JSON.parse(JSON.stringify(charts))
         }
       })
     },
@@ -163,11 +166,15 @@ export default {
     },
     handleReset() {
       this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
+      this.charts = JSON.parse(JSON.stringify(this.dataBoard.charts))
+      this.dataChartList.forEach(function(item, index, arr) {
+        this.$set(item, 'disabled', false)
+      })
     },
     handleSubmit() {
       const data = {
         id: this.dataBoard.id,
-        boardThumbnail: undefined,
+        boardThumbnail: this.dataBoard.boardThumbnail,
         boardConfig: {
           layout: this.layout
         }
@@ -184,6 +191,14 @@ export default {
     },
     handleResize(i, newH, newW, newHPx, newWPx) {
       this.$refs[`charts${i}`][0].$children[0].$emit('resized')
+    },
+    generatorImage() {
+      html2canvas(document.getElementById('boardWrapper')).then(canvas => {
+        const image = new Image()
+        image.src = canvas.toDataURL('image/png')
+        const dataURL = compressImg(image, 250, 150, 0.5)
+        this.$set(this.dataBoard, 'boardThumbnail', dataURL)
+      })
     }
   }
 }

datax-ui/src/views/visual/datachart/DataChartBuild.vue

@@ -86,7 +86,7 @@
           <el-tabs type="card">
             <el-tab-pane label="图表预览">
               <div class="widget-center-pane-chart">
-                <chart-panel id="chartPanel" :chart-schema="widget" :chart-data="[]" />
+                <chart-panel id="chartPanel" ref="chartPanel" :chart-schema="widget" :chart-data="[]" />
               </div>
             </el-tab-pane>
             <el-tab-pane label="查询脚本">
@@ -139,6 +139,7 @@ import draggable from 'vuedraggable'
 import chartTypes from '@/utils/visual-chart'
 import ChartPanel from './components/ChartPanel'
 import html2canvas from 'html2canvas'
+import { compressImg } from '@/utils/image-compress'
 
 export default {
   name: 'DataChartBuild',
@@ -252,11 +253,12 @@ export default {
     },
     changeChart(chart) {
       this.widget.chartType = chart
-      console.log(this.widget)
     },
     generatorImage() {
       html2canvas(document.getElementById('chartPanel')).then(canvas => {
-        const dataURL = canvas.toDataURL('image/png')
+        const image = new Image()
+        image.src = canvas.toDataURL('image/png')
+        const dataURL = compressImg(image, 250, 150, 0.5)
         this.$set(this.dataChart, 'chartThumbnail', dataURL)
       })
     }