feat: 设计组件时和预览时，组件右键菜单添加生成图片功能

data-room-ui/packages/js/mixins/chartContextMenu.js

@@ -1,10 +1,11 @@
 import { mapMutations, mapState } from 'vuex'
-// import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
+import { toJpeg, toPng } from 'html-to-image'
 import isEmpty from 'lodash/isEmpty'
 import { randomString } from 'data-room-ui/js/utils'
 import Contextmenu from 'vue-contextmenujs'
 import Vue from 'vue'
+
 Vue.use(Contextmenu)
 export default {
   computed: {
@@ -18,46 +19,26 @@ export default {
     })
   },
   data () {
-    return {
+    return {}
-
+  },
-    }
+  mounted () {
   },
-  mounted () {},
   methods: {
-    ...mapMutations('bigScreen', [
+    ...mapMutations('bigScreen', ['changeHoverCode', 'changeActiveCode', 'changeChartConfig', 'addItem', 'delItem', 'resetPresetLine', 'changeLayout', 'changeZIndex', 'changeLocked', 'saveTimeLine', 'copyCharts', 'pasteCharts', 'clearActiveCodes']), // 改变hover的组件
-      'changeHoverCode',
-      'changeActiveCode',
-      'changeChartConfig',
-      'addItem',
-      'delItem',
-      'resetPresetLine',
-      'changeLayout',
-      'changeZIndex',
-      'changeLocked',
-      'saveTimeLine',
-      'copyCharts',
-      'pasteCharts',
-      'clearActiveCodes'
-    ]),
-    // 改变hover的组件
     changeHover (code) {
       this.changeHoverCode(code)
-    },
+    }, // 改变激活的组件
-    // 改变激活的组件
     changeActive (code) {
       this.changeActiveCode(code)
-    },
+    }, // 打开右侧面板
-    // 打开右侧面板
     openRightPanel (config) {
       this.changeActiveCode(config.code)
       this.$emit('openRightPanel', config)
-    },
+    }, // 查看数据
-    // 查看数据
     dataView (config) {
       this.changeActiveCode(config.code)
       this.$emit('openDataViewDialog', config)
-    },
+    }, // 复制组件
-    // 复制组件
     copyItem (config) {
       const newConfig = cloneDeep(config)
       newConfig.code = randomString(8)
@@ -70,25 +51,17 @@ export default {
         newConfig.group = 'copy_' + config.group
       }
       this.addItem(newConfig)
-    },
+    }, // 删除单个组件
-    // 删除单个组件
     deleteItem (config) {
       this.$confirm('确定删除该组件吗？', '提示', {
-        confirmButtonText: '确定',
+        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', customClass: 'bs-el-message-box'
-        cancelButtonText: '取消',
-        type: 'warning',
-        customClass: 'bs-el-message-box'
       }).then(() => {
         this.delItem(config.code)
       })
-    },
+    }, // 批量删除组合元素
-    // 批量删除组合元素
     deleteGroupItem (config) {
       this.$confirm('确定批量删除选中的组件吗？', '提示', {
-        confirmButtonText: '确定',
+        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', customClass: 'bs-el-message-box'
-        cancelButtonText: '取消',
-        type: 'warning',
-        customClass: 'bs-el-message-box'
       }).then(() => {
         // 找到和本组件group相同的组件 删除
         const codes = this.chartList.filter(_chart => _chart.group === config.group && config.group).map(_chart => _chart.code)
@@ -98,12 +71,10 @@ export default {
           this.delItem(config.code)
         }
       })
-    },
+    }, // 获取组件的坐标字符串，取整 （100， 100）
-    // 获取组件的坐标字符串，取整 （100， 100）
     getPoint ({ x, y }) {
       return `(${Math.round(x)}, ${Math.round(y)})`
-    },
+    }, // 组合/取消组合图表
-    // 组合/取消组合图表
     groupChart (chart) {
       if (!chart.group || chart.group === 'tempGroup') {
         // 添加组合
@@ -111,8 +82,7 @@ export default {
         this.activeCodes?.forEach(code => {
           const config = this.chartList.find(item => item.code === code)
           this.changeChartConfig({
-            ...config,
+            ...config, group: `group_${chart.code}`
-            group: `group_${chart.code}`
           })
         })
         this.saveTimeLine('组合图表')
@@ -123,30 +93,50 @@ export default {
         this.chartList.forEach(_chart => {
           if (_chart.group === chart.group) {
             this.changeChartConfig({
-              ..._chart,
+              ..._chart, group: ''
-              group: ''
             })
           }
         })
         this.saveTimeLine('取消组合图表')
       }
-    },
+    }, // 生成图片
-    // 右键菜单
+    generateImage (chart) {
+      let componentDom = document.querySelector(`#${chart.code} .render-item-wrap`)
+      if (this.isPreview) {
+        componentDom = document.querySelector(`#${chart.code}`)
+      }
+      toPng(componentDom)
+        .then((dataUrl) => {
+          const link = document.createElement('a')
+          link.download = `${chart.title}.png`
+          link.href = dataUrl
+          link.click()
+          link.addEventListener('click', () => {
+            link.remove()
+          })
+        })
+    }, // 右键菜单
     onContextmenu (event, chart) {
       const isHidden = !chart?.option?.displayOption?.dataAllocation?.enable
       event.preventDefault()
       if (this.isPreview) {
         this.$contextmenu({
-          items: [
+          items: [{
-            {
+            label: '查看数据',
-              label: '查看数据',
+            icon: 'el-icon-view',
-              icon: 'el-icon-view',
+            hidden: isHidden,
-              hidden: isHidden,
+            onClick: () => {
-              onClick: () => {
+              this.dataView(chart)
-                this.dataView(chart)
-              }
             }
-          ],
+          },
+          {
+            label: '生成图片',
+            icon: 'el-icon-download',
+            hidden: isHidden,
+            onClick: () => {
+              this.generateImage(chart)
+            }
+          }],
           event, // 鼠标事件信息
           customClass: 'bs-context-menu-class', // 自定义菜单 class
           zIndex: 999, // 菜单样式 z-index
@@ -154,90 +144,85 @@ export default {
         })
       } else {
         this.$contextmenu({
-          items: [
+          items: [{
-            {
+            label: '配置',
-              label: '配置',
+            icon: 'el-icon-setting',
-              icon: 'el-icon-setting',
+            onClick: () => {
-              onClick: () => {
+              this.openRightPanel(chart)
-                this.openRightPanel(chart)
+            }
-              }
+          }, {
-            },
+            label: '删除',
-            {
+            icon: 'el-icon-delete',
-              label: '删除',
+            onClick: () => {
-              icon: 'el-icon-delete',
+              this.deleteItem(chart)
-              onClick: () => {
+            }
-                this.deleteItem(chart)
+          }, {
-              }
+            label: '批量删除',
-            },
+            icon: 'el-icon-delete',
-            {
+            onClick: () => {
-              label: '批量删除',
+              this.deleteGroupItem(chart)
-              icon: 'el-icon-delete',
+            }
-              onClick: () => {
+          }, {
-                this.deleteGroupItem(chart)
+            label: '复制',
-              }
+            icon: 'el-icon-copy-document',
-            },
+            onClick: () => {
-            {
+              this.copyItem(chart)
-              label: '复制',
+            }
-              icon: 'el-icon-copy-document',
+          }, {
-              onClick: () => {
+            label: '组合复制',
-                this.copyItem(chart)
+            icon: 'el-icon-copy-document',
-              }
+            onClick: () => {
-            },
+              this.copyCharts()
-            {
+              this.pasteCharts()
-              label: '组合复制',
+            }
-              icon: 'el-icon-copy-document',
+          }, {
-              onClick: () => {
+            label: '置于顶层',
-                this.copyCharts()
+            icon: 'el-icon-arrow-up',
-                this.pasteCharts()
+            onClick: () => {
-              }
+              let chartList = cloneDeep(this.chartList)
-            },
+              // 将当前图表置底
-            {
+              chartList = chartList.filter(item => item.code !== chart.code)
-              label: '置于顶层',
+              chartList.unshift(chart)
-              icon: 'el-icon-arrow-up',
+              this.changeLayout(chartList)
-              onClick: () => {
+              this.changeZIndex(chartList)
-                let chartList = cloneDeep(this.chartList)
+            }
-                // 将当前图表置底
+          }, {
-                chartList = chartList.filter(item => item.code !== chart.code)
+            label: '置于底层',
-                chartList.unshift(chart)
+            icon: 'el-icon-arrow-down',
-                this.changeLayout(chartList)
+            onClick: () => {
-                this.changeZIndex(chartList)
+              let chartList = cloneDeep(this.chartList)
-              }
+              // 将当前图表置顶
-            },
+              chartList = chartList.filter(item => item.code !== chart.code)
-            {
+              chartList.push(chart)
-              label: '置于底层',
+              this.changeLayout(chartList)
-              icon: 'el-icon-arrow-down',
+              this.changeZIndex(chartList)
-              onClick: () => {
+            }
-                let chartList = cloneDeep(this.chartList)
+          }, {
-                // 将当前图表置顶
+            label: chart.locked ? '解锁' : '锁定',
-                chartList = chartList.filter(item => item.code !== chart.code)
+            icon: chart.locked ? 'el-icon-unlock' : 'el-icon-lock',
-                chartList.push(chart)
+            onClick: () => {
-                this.changeLayout(chartList)
+              this.changeLocked(chart)
-                this.changeZIndex(chartList)
+            }
-              }
+          }, {
-            },
+            label: (chart.group && chart.group !== 'tempGroup') ? '取消组合' : '组合',
-            {
+            icon: (chart.group && chart.group !== 'tempGroup') ? 'iconfont-bigscreen icon-quxiaoguanlian' : 'iconfont-bigscreen icon-zuhe',
-              label: chart.locked ? '解锁' : '锁定',
+            onClick: () => {
-              icon: chart.locked ? 'el-icon-unlock' : 'el-icon-lock',
+              this.groupChart(chart)
-              onClick: () => {
+            }
-                this.changeLocked(chart)
+          }, {
-              }
+            label: '查看数据',
-            },
+            icon: 'el-icon-view',
-            {
+            hidden: isHidden,
-              label: (chart.group && chart.group !== 'tempGroup') ? '取消组合' : '组合',
+            onClick: () => {
-              icon: (chart.group && chart.group !== 'tempGroup') ? 'iconfont-bigscreen icon-quxiaoguanlian' : 'iconfont-bigscreen icon-zuhe',
+              this.dataView(chart)
-              onClick: () => {
+            }
-                this.groupChart(chart)
+          }, {
-              }
+            label: '生成图片',
-            },
+            icon: 'el-icon-download',
-            {
+            onClick: () => {
-              label: '查看数据',
+              this.generateImage(chart)
-              icon: 'el-icon-view',
-              hidden: isHidden,
-              onClick: () => {
-                this.dataView(chart)
-              }
             }
-          ],
+          }],
           event, // 鼠标事件信息
           customClass: 'bs-context-menu-class', // 自定义菜单 class
           zIndex: 999, // 菜单样式 z-index