From da7dc55edb88a69473ccfeae4147462e11130e6e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 24 Aug 2022 18:10:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=A7=86=E5=9B=BE=E6=94=BE=E5=A4=A7=E6=97=B6=E8=87=AA?=
 =?UTF-8?q?=E6=9C=89=E8=83=8C=E6=99=AF=E4=B8=A2=E5=A4=B1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Preview.vue      |  2 +-
 .../custom-component/UserViewDialog.vue       | 51 ++++++++++---
 .../custom-component/UserViewMobileDialog.vue | 73 +++++++++++++++----
 3 files changed, 102 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 6c3fd2fa30..22442e71fd 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -62,7 +62,7 @@
           class="mobile-dialog-css"
           :destroy-on-close="true"
         >
-          <UserViewMobileDialog :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewMobileDialog v-if="mobileChartDetailsVisible" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
       </div>
     </div>
diff --git a/frontend/src/components/canvas/custom-component/UserViewDialog.vue b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
index 2500116f40..1e7684384c 100644
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@@ -1,8 +1,9 @@
 <template>
   <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" :class="isAbsoluteContainer ? 'abs-container' : ''">
-    <de-main-container v-show="showChartCanvas">
+    <de-main-container v-show="showChartCanvas" class="">
       <div id="chartCanvas" class="canvas-class" :style="customStyle">
         <div class="canvas-class" :style="commonStyle">
+<!--          <svg-icon v-show="svgInnerEnable" :style="{'color':this.element.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />-->
           <plugin-com
             v-if="chart.isPlugin"
             :component-name="chart.type + '-view'"
@@ -98,20 +99,40 @@ export default {
       }
       return style
     },
+
+    svgInnerEnable() {
+      return !this.screenShot&&this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string'
+    },
+    mainSlotSvgInner() {
+      if (this.svgInnerEnable) {
+        return this.element.commonBackground.innerImage.replace('board/', '').replace('.svg', '')
+      } else {
+        return null
+      }
+    },
     commonStyle() {
-      const style = {}
-      if (this.element && this.element.commonBackground) {
+      const style = {
+        width: '100%',
+        height: '100%'
+      }
+      if (this.element.commonBackground) {
         style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
         style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
+        let colorRGBA = ''
+        if (this.element.commonBackground.backgroundColorSelect) {
+          colorRGBA = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
+        }
         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)
+          if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
+            let innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
+            style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
+          } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
+            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+          } else {
+            style['background-color'] = colorRGBA
           }
+        } else {
+          style['background-color'] = colorRGBA
         }
         style['overflow'] = 'hidden'
       }
@@ -240,6 +261,7 @@ export default {
     height: 100%;
   }
   .canvas-class{
+    position: relative;
     width: 100%;
     height: 100%;
     background-size: 100% 100% !important;
@@ -249,4 +271,13 @@ export default {
     width: 100%;
     margin-left: -20px;
   }
+
+  .svg-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
 </style>
diff --git a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
index 6f2fc6f56b..dbb8466bd5 100644
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@@ -1,18 +1,20 @@
 <template>
   <de-container>
     <de-main-container v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'" :style="customStyle" class="full-div">
-      <plugin-com
-        v-if="chart.isPlugin"
-        :component-name="chart.type + '-view'"
-        :obj="{chart: mapChart || chart}"
-        :chart="mapChart || chart"
-        class="chart-class"
-      />
-      <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || 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 class="canvas-class" :style="commonStyle">
+        <plugin-com
+          v-if="chart.isPlugin"
+          :component-name="chart.type + '-view'"
+          :obj="{chart: mapChart || chart}"
+          :chart="mapChart || chart"
+          class="chart-class"
+        />
+        <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || 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>
     </de-main-container>
     <de-main-container v-else>
       <table-normal :chart="chartTable" :show-summary="false" class="table-class" />
@@ -33,6 +35,7 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import {hexColorToRGBA} from "@/views/chart/chart/util";
 export default {
   name: 'UserViewMobileDialog',
   components: { ChartComponentS2, LabelNormalText, DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal, PluginCom },
@@ -57,7 +60,6 @@ export default {
     this.element = deepCopy(this.curComponent)
   },
   computed: {
-
     customStyle() {
       let style = {
       }
@@ -79,6 +81,45 @@ export default {
       }
       return style
     },
+
+    svgInnerEnable() {
+      return !this.screenShot&&this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string'
+    },
+    mainSlotSvgInner() {
+      if (this.svgInnerEnable) {
+        return this.element.commonBackground.innerImage.replace('board/', '').replace('.svg', '')
+      } else {
+        return null
+      }
+    },
+    commonStyle() {
+      const style = {
+        width: '100%',
+        height: '100%'
+      }
+      if (this.element.commonBackground) {
+        style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
+        style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
+        let colorRGBA = ''
+        if (this.element.commonBackground.backgroundColorSelect) {
+          colorRGBA = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
+        }
+        if (this.element.commonBackground.enable) {
+          if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
+            let innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
+            style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
+          } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
+            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}`
+          } else {
+            style['background-color'] = colorRGBA
+          }
+        } else {
+          style['background-color'] = colorRGBA
+        }
+        style['overflow'] = 'hidden'
+      }
+      return style
+    },
     ...mapState([
       'isClickComponent',
       'curComponent',
@@ -128,4 +169,10 @@ export default {
     background-size:100% 100% !important;
     padding: 5px 0px 5px 0px !important;
   }
+  .canvas-class{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100% !important;
+  }
 </style>