refactor(仪表板): 超长仪表板导出PDF、图片优化

fix(视图): 修复复制仪表板后视图计算字段表达式为空的问题 #4062

backend/src/main/java/io/dataease/ext/ExtChartViewMapper.xml

@@ -608,6 +608,7 @@
             id,
             table_id,
             chart_id,
+            origin_name,
             `name`,
             dataease_name,
             group_type,
@@ -624,6 +625,7 @@
               uuid() AS id,
               chart_view_field.table_id,
               chart_view_field.pv_copy.chart_view_id AS chart_id,
+              chart_view_field.origin_name,
               chart_view_field.`name`,
               chart_view_field.dataease_name,
               chart_view_field.group_type,

backend/src/main/resources/db/migration/V45__1.17.1.sql

@@ -0,0 +1,4 @@
+INSERT INTO `my_plugin` (`name`, `store`, `free`, `cost`, `category`, `descript`, `version`, `creator`, `load_mybatis`,
+                         `install_time`, `module_name`, `ds_type`)
+VALUES ('人大金仓数据源插件', 'default', '0', '0', 'datasource', '人大金仓数据源插件', '1.0-SNAPSHOT', 'DATAEASE', '0',
+        '1650765903630', 'kingbase-backend', 'kingbase');

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

@@ -443,6 +443,9 @@ export default {
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   methods: {
+    getCanvasHeight() {
+      return this.mainHeightCount
+    },
     openChartDetailsDialog(paramInfo) {
       if (this.canvasId === 'canvas-main') {
         this.showChartInfo = paramInfo.showChartInfo

frontend/src/utils/conditionUtil.js

@@ -1,6 +1,6 @@
-
 import { Condition } from '@/components/widget/bean/Condition'
 import { ApplicationContext } from '@/utils/ApplicationContext'
+import store from '@/store'
 
 /**
  * 判断两个conditions数组是否相同
@@ -70,7 +70,11 @@ export const buildViewKeyMap = panelItems => {
 }
 
 export const buildViewKeyFilters = (panelItems, result) => {
-  panelItems.forEach((element, index) => {
+  if (!(panelItems && panelItems.length > 0)) {
+    return result
+  }
+  const buildItems = panelItems[0].canvasId === 'canvas-main' ? panelItems : store.state.componentData
+  buildItems.forEach((element, index) => {
     if (element.type !== 'custom') {
       return true
     }

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -67,7 +67,7 @@
           >
             {{ $t('chart.total') }}
             <span>{{
-              chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
+              (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
             }}</span>
             {{ $t('chart.items') }}
           </span>
@@ -173,7 +173,8 @@ export default {
       },
       totalStyle: {
         color: '#606266'
-      }
+      },
+      not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET
     }
   },
 

frontend/src/views/chart/components/table/TableNormal.vue

@@ -55,7 +55,7 @@
             >
               {{ $t('chart.total') }}
               <span>{{
-                chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
+                (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
               }}</span>
               {{ $t('chart.items') }}
             </span>
@@ -166,7 +166,8 @@ export default {
       scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor,
       totalStyle: {
         color: '#606266'
-      }
+      },
+      not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET
     }
   },
   computed: {

frontend/src/views/panel/export/PDFPreExport.vue

@@ -82,7 +82,7 @@ export default {
     mainCanvasStyle() {
       if (this.toExport) {
         return {
-          width: '4096px'
+          width: '1280px'
         }
       } else {
         return {
@@ -93,7 +93,7 @@ export default {
     templateHtmlStyle() {
       if (this.toExport) {
         return {
-          fontSize: '48px!important'
+          fontSize: '14px!important'
         }
       } else {
         return {}
@@ -133,17 +133,16 @@ export default {
         _this.toExport = true
         setTimeout(() => {
           html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
-              _this.exportLoading = false
+            _this.exportLoading = false
-              const contentWidth = canvas.width / 4
+            const contentWidth = canvas.width / 2
-              const contentHeight = canvas.height / 4
+            const contentHeight = canvas.height / 2
-              const pageData = canvas.toDataURL('image/jpeg', 1.0)
+            const pageData = canvas.toDataURL('image/jpeg', 1.0)
-              const lp = contentWidth > contentHeight ? 'l' : 'p'
+            const lp = contentWidth > contentHeight ? 'l' : 'p'
-              const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
+            const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
-              PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
+            PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
-              PDF.save(_this.panelName + '.pdf')
+            PDF.save(_this.panelName + '.pdf')
-              _this.$emit('closePreExport')
+            _this.$emit('closePreExport')
-            }
+          })
-          )
         }, 1500)
       }, 500)
     }

frontend/src/views/panel/filter/filterMain/FilterControl.vue

@@ -328,10 +328,13 @@ export default {
 
   created() {
     this.attrs = this.controlAttrs
-    if (this.widget.isTimeWidget && this.widget.isTimeWidget()) {
+    if (this.widget.isTimeWidget) {
       this.showParams = true
       this.isRangeParamWidget = this.widget.isRangeParamWidget && this.widget.isRangeParamWidget()
     }
+    if ('timeYearWidget,timeMonthWidget,timeDateWidget,textSelectWidget,numberSelectWidget'.indexOf(this.widget.name) !== -1) {
+      this.showParams = true
+    }
   },
   methods: {
     changeDynamicParams(val, name) {

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

@@ -17,7 +17,7 @@
         style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;"
       >
         <div style="height: 100%;">
-          <share-head />
+          <share-head/>
         </div>
       </el-row>
       <el-row
@@ -45,7 +45,7 @@
               width="400"
               trigger="click"
             >
-              <panel-detail-info />
+              <panel-detail-info/>
               <i
                 slot="reference"
                 class="el-icon-warning icon-class"
@@ -209,6 +209,7 @@
           >
             <Preview
               v-if="showMainFlag"
+              ref="paneViewPreviewRef"
               :component-data="mainCanvasComponentData"
               :canvas-style-data="canvasStyleData"
               :active-tab="activeTab"
@@ -378,8 +379,8 @@ export default {
     imageWrapperStyle() {
       if (this.exporting) {
         return {
-          width: '2560px',
+          width: '1280px',
-          height: '1440px'
+          height: '720px'
         }
       } else {
         return {
@@ -429,6 +430,16 @@ export default {
     bus.$off('set-panel-share-user', this.setPanelShareUser)
   },
   methods: {
+    // 画布高度大于6000px 自动使用原尺寸导出 减小浏览器再渲染压力
+    changeExportingState() {
+      const canvasHeight = this.$refs.paneViewPreviewRef.getCanvasHeight()
+      if (canvasHeight && canvasHeight > 6000) {
+        return false
+      } else {
+        return true
+      }
+
+    },
     downLoadApp(appAttachInfo) {
       this.downLoadToApp(appAttachInfo)
     },
@@ -597,7 +608,7 @@ export default {
     downloadAsImage() {
       this.dataLoading = true
       setTimeout(() => {
-        this.exporting = true
+        this.exporting = this.changeExportingState()
         setTimeout(() => {
           const canvasID = document.getElementById(this.canvasInfoTemp)
           const a = document.createElement('a')
@@ -628,7 +639,7 @@ export default {
       this.dataLoading = true
 
       setTimeout(() => {
-        this.exporting = true
+        this.exporting = this.changeExportingState()
         setTimeout(() => {
           html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => {
             const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量