refactor: 视图明细导出优化 (#2093)

Co-authored-by: wangjiahao <1522128093@qq.com>

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -468,7 +468,7 @@ public class PanelGroupService {
             details.add(0,request.getHeader());
             HSSFWorkbook wb = new HSSFWorkbook();
             //明细sheet
-            HSSFSheet detailsSheet = wb.createSheet("视图明细");
+            HSSFSheet detailsSheet = wb.createSheet("数据");
 
             //给单元格设置样式
             CellStyle cellStyle = wb.createCellStyle();
@@ -503,7 +503,7 @@ public class PanelGroupService {
             }
             if(StringUtils.isNotEmpty(snapshot)){
                 //截图sheet 1px ≈ 2.33dx ≈ 0.48 dy  8*24 个单元格
-                HSSFSheet snapshotSheet = wb.createSheet("截图");
+                HSSFSheet snapshotSheet = wb.createSheet("图表");
                 short reDefaultRowHeight = (short)Math.round(request.getSnapshotHeight()*3.5/8);
                 int reDefaultColumnWidth = (int)Math.round(request.getSnapshotWidth()*0.25/24);
                 snapshotSheet.setDefaultColumnWidth(reDefaultColumnWidth);

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

@@ -37,7 +37,7 @@
               {{ $t('chart.export_details') }}
             </el-button>
           </span>
-          <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
 
         <!--手机视图详情-->

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

@@ -156,7 +156,7 @@
           {{ $t('chart.export_details') }}
         </el-button>
       </span>
-      <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+      <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
     </el-dialog>
 
     <el-dialog

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

@@ -1,18 +1,20 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
     <de-aside-container v-if="showChartCanvas">
-      <div id="chartCanvas" :style="customStyle">
-        <plugin-com
-          v-if="chart.isPlugin"
-          :component-name="chart.type + '-view'"
-          :obj="{chart}"
-          class="chart-class"
-        />
-        <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
-        <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
-        <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
-        <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
-        <label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
+      <div id="chartCanvas" class="canvas-class" :style="customStyle">
+        <div class="canvas-class" :style="commonStyle">
+          <plugin-com
+            v-if="chart.isPlugin"
+            :component-name="chart.type + '-view'"
+            :obj="{chart}"
+            class="chart-class"
+          />
+          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
+          <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
+          <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
+          <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
+          <label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
+        </div>
       </div>
     </de-aside-container>
     <de-main-container>
@@ -37,6 +39,9 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 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 { get } from '@/api/system/dynamic'
 export default {
   name: 'UserView',
   components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
@@ -52,7 +57,8 @@ export default {
   },
   data() {
     return {
-      refId: null
+      refId: null,
+      element: {}
     }
   },
   computed: {
@@ -61,7 +67,6 @@ export default {
     },
     customStyle() {
       let style = {
-        height: '100%'
       }
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@@ -81,6 +86,25 @@ export default {
       }
       return style
     },
+    commonStyle() {
+      const style = {}
+      if (this.element && this.element.commonBackground) {
+        style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
+        style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
+        if (this.element.commonBackground.enable) {
+          if (this.element.commonBackground.backgroundType === 'innerImage') {
+            const innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
+            style['background'] = `url(${innerImage}) no-repeat`
+          } else if (this.element.commonBackground.backgroundType === 'outerImage') {
+            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
+          } else if (this.element.commonBackground.backgroundType === 'color') {
+            style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
+          }
+        }
+        style['overflow'] = 'hidden'
+      }
+      return style
+    },
     ...mapState([
       'isClickComponent',
       'curComponent',
@@ -88,6 +112,9 @@ export default {
       'canvasStyleData'
     ])
   },
+  mounted() {
+    this.element = deepCopy(this.curComponent)
+  },
   methods: {
     exportExcel() {
       const _this = this
@@ -118,7 +145,7 @@ export default {
         const link = document.createElement('a')
         link.style.display = 'none'
         link.href = URL.createObjectURL(blob)
-        link.download = excelName // 下载的文件名
+        link.download = excelName + '.xlsx' // 下载的文件名
         document.body.appendChild(link)
         link.click()
         document.body.removeChild(link)
@@ -150,4 +177,9 @@ export default {
   .table-class{
     height: 100%;
   }
+  .canvas-class{
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100% !important;
+  }
 </style>