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"
diff --git a/frontend/src/websocket/index.js b/frontend/src/websocket/index.js
index b623bb0e6a..91d9592457 100644
--- a/frontend/src/websocket/index.js
+++ b/frontend/src/websocket/index.js
@@ -20,8 +20,8 @@ class DeWebsocket {
   initialize() {
     this.connection()
     const _this = this
-    this.timer = this.isLoginStatu() && setInterval(() => {
-      this.isLoginStatu() || this.destroy()
+    this.timer = this.isLoginStatus() && setInterval(() => {
+      this.isLoginStatus() || this.destroy()
       try {
         _this.client && _this.client.send('heart detection')
       } catch (error) {
@@ -41,12 +41,12 @@ class DeWebsocket {
     this.initialize()
   }
 
-  isLoginStatu() {
+  isLoginStatus() {
     return store.state && store.state.user && store.state.user.user && store.state.user.user.userId
   }
 
   connection() {
-    if (!this.isLoginStatu()) {
+    if (!this.isLoginStatus()) {
       return
     }
     const socket = new SockJS(this.ws_url + '?userId=' + store.state.user.user.userId)
@@ -70,6 +70,7 @@ class DeWebsocket {
       }
     ).bind(this)
   }
+
   subscribe() {
     this.channels.forEach(channel => {
       this.client.subscribe('/user/' + store.state.user.user.userId + channel.topic, res => {
@@ -77,6 +78,7 @@ class DeWebsocket {
       })
     })
   }
+
   disconnect() {
     this.client && this.client.disconnect()
   }