From a78ae3632012b0d7e8dad19837ed60f4293b5673 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 29 Nov 2022 15:57:02 +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=E7=94=A8=E6=88=B7=E8=A7=86=E5=9B=BE=E6=94=BE=E5=A4=A7?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=84=E4=BB=B6=E4=B8=8B=E6=8B=89=E6=A1=86=E5=9C=A8?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E7=8A=B6=E6=80=81=E6=97=A0=E6=B3=95=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/ComponentWrapper.vue    |  2 +-
 .../canvas/components/editor/Preview.vue      | 64 ++++++++++++++++++-
 .../canvas/customComponent/UserView.vue       | 13 +++-
 .../src/components/dataease/DeOutWidget.vue   |  2 +-
 4 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index 639bb5f740..289774c142 100644
--- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -274,7 +274,7 @@ export default {
       } else {
         return {
           ...
-          getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
+            getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
           position: 'relative'
         }
       }
diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index 9c27ac73e7..029227716e 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -95,6 +95,49 @@
         @closePreExport="closePreExport"
       />
     </el-dialog>
+
+    <!--视图详情-->
+    <el-dialog
+      :visible.sync="chartDetailsVisible"
+      width="80%"
+      class="dialog-css"
+      :destroy-on-close="true"
+      :show-close="true"
+      :append-to-body="false"
+      top="5vh"
+    >
+      <span
+        v-if="chartDetailsVisible"
+        style="position: absolute;right: 70px;top:15px"
+      >
+        <el-button
+          v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
+          class="el-icon-picture-outline"
+          size="mini"
+          @click="exportViewImg"
+        >
+          {{ $t('chart.export_img') }}
+        </el-button>
+        <el-button
+          v-if="showChartInfoType==='details'"
+          size="mini"
+          @click="exportExcel"
+        >
+          <svg-icon
+            icon-class="ds-excel"
+            class="ds-icon-excel"
+          />{{ $t('chart.export') }}Excel
+        </el-button>
+      </span>
+      <user-view-dialog
+        v-if="chartDetailsVisible"
+        ref="userViewDialog-canvas-main"
+        :chart="showChartInfo"
+        :chart-table="showChartTableInfo"
+        :canvas-style-data="canvasStyleData"
+        :open-type="showChartInfoType"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -117,10 +160,11 @@ import html2canvas from 'html2canvasde'
 import { queryAll } from '@/api/panel/pdfTemplate'
 import PDFPreExport from '@/views/panel/export/PDFPreExport'
 import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey'
+import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 
 const erd = elementResizeDetectorMaker()
 export default {
-  components: { ComponentWrapper, CanvasOptBar, PDFPreExport },
+  components: { UserViewDialog, ComponentWrapper, CanvasOptBar, PDFPreExport },
   model: {
     prop: 'show',
     event: 'change'
@@ -189,6 +233,10 @@ export default {
   },
   data() {
     return {
+      chartDetailsVisible: false,
+      showChartInfo: {},
+      showChartTableInfo: {},
+      showChartInfoType: 'details',
       mainHeightCount: null,
       userInfo: null,
       previewMainDomId: 'preview-main-' + this.canvasId,
@@ -381,6 +429,7 @@ export default {
     if (this.terminal === 'mobile') {
       this.initMobileCanvas()
     }
+    this.canvasId === 'canvas-main' && bus.$on('pcChartDetailsDialog', this.openChartDetailsDialog)
     bus.$on('trigger-search-button', this.triggerSearchButton)
     bus.$on('trigger-reset-button', this.triggerResetButton)
     this.initPdfTemplate()
@@ -389,10 +438,19 @@ export default {
     erd.uninstall(this.$refs[this.previewTempRefId])
     erd.uninstall(this.$refs[this.previewRefId])
     clearInterval(this.timer)
+    this.canvasId === 'canvas-main' && bus.$off('pcChartDetailsDialog', this.openChartDetailsDialog)
     bus.$off('trigger-search-button', this.triggerSearchButton)
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   methods: {
+    openChartDetailsDialog(paramInfo) {
+      if (this.canvasId === 'canvas-main') {
+        this.showChartInfo = paramInfo.showChartInfo
+        this.showChartTableInfo = paramInfo.showChartTableInfo
+        this.showChartInfoType = paramInfo.showChartInfoType
+        this.chartDetailsVisible = true
+      }
+    },
     initWatermark(waterDomId = 'preview-main-canvas-main') {
       if (this.panelInfo.watermarkInfo && this.canvasId === 'canvas-main') {
         if (this.userInfo) {
@@ -585,10 +643,10 @@ export default {
       }
     },
     exportExcel() {
-      this.$refs['userViewDialog'].exportExcel()
+      this.$refs['userViewDialog-canvas-main'].exportExcel()
     },
     exportViewImg() {
-      this.$refs['userViewDialog'].exportViewImg()
+      this.$refs['userViewDialog-canvas-main'].exportViewImg()
     },
     deselectCurComponent(e) {
       if (!this.isClickComponent) {
diff --git a/frontend/src/components/canvas/customComponent/UserView.vue b/frontend/src/components/canvas/customComponent/UserView.vue
index a6cd3f3a8c..00f4b230f0 100644
--- a/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/frontend/src/components/canvas/customComponent/UserView.vue
@@ -232,6 +232,11 @@ export default {
     ChartComponentG2
   },
   props: {
+    inScreen: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     canvasId: {
       type: String,
       required: true
@@ -871,7 +876,13 @@ export default {
       this.showChartInfo = this.chart
       this.showChartTableInfo = tableChart
       this.showChartInfoType = params.openType
-      if (this.terminal === 'pc') {
+      if (!this.inScreen) {
+        bus.$emit('pcChartDetailsDialog', {
+          showChartInfo: this.showChartInfo,
+          showChartTableInfo: this.showChartTableInfo,
+          showChartInfoType: this.showChartInfoType
+        })
+      } else if (this.terminal === 'pc') {
         this.chartDetailsVisible = true
       } else {
         this.mobileChartDetailsVisible = true
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index f12aae39d9..2a87d53365 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -2,7 +2,7 @@
   <div
     ref="myContainer"
     class="my-container"
-    :style="autoStyle"
+    :style="inScreen?autoStyle:''"
   >
     <div
       ref="conditionMain"