From 1529a2a85e26d1551f8e841c54a81070165ed2f1 Mon Sep 17 00:00:00 2001
From: "zhu.yawen" <zhu.yawen@ustcinfo.com>
Date: Fri, 20 Oct 2023 16:27:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=89=AD=E8=BD=AC=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data-room-ui/packages/BigScreenRun/index.vue | 35 ++++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/data-room-ui/packages/BigScreenRun/index.vue b/data-room-ui/packages/BigScreenRun/index.vue
index 99098bea..34afd522 100644
--- a/data-room-ui/packages/BigScreenRun/index.vue
+++ b/data-room-ui/packages/BigScreenRun/index.vue
@@ -13,14 +13,7 @@
         <div
           v-for="chart in chartList"
           :key="chart.code"
-          :style="{
-            position: 'absolute',
-            width: chart.w + 'px',
-            height: chart.h + 'px',
-            left: chart.x + 'px',
-            top: chart.y + 'px',
-            zIndex: chart.z || 0
-          }"
+          :style="getStyle(chart)"
         >
           <Configuration
             :config="chart"
@@ -94,7 +87,7 @@ export default {
       return this.config.fitMode || this.stateFitMode
     },
     fitSelector () {
-            return this.config.fitSelector
+      return this.config.fitSelector
     },
     pageLoading () {
       return this.$store.state.bigScreen.pageLoading
@@ -181,6 +174,28 @@ export default {
       'changePageConfig',
       'changeChartConfig'
     ]),
+    getStyle (chart) {
+      if (chart.perspective > 0) {
+        return {
+          position: 'absolute',
+          width: chart.w + 'px',
+          height: chart.h + 'px',
+          left: chart.x + 'px',
+          top: chart.y + 'px',
+          transform: `perspective(${chart.perspective}px) skew(${chart.skewX}deg, ${chart.skewY}deg) rotateX(${chart.rotateX}deg) rotateY(${chart.rotateY}deg)  rotateZ(${chart.rotateZ}deg)`,
+          zIndex: chart.z || 0
+        }
+      }
+      return {
+        position: 'absolute',
+        width: chart.w + 'px',
+        height: chart.h + 'px',
+        left: chart.x + 'px',
+        top: chart.y + 'px',
+        transform: `skew(${chart.skewX}deg, ${chart.skewY}deg) rotateX(${chart.rotateX}deg) rotateY(${chart.rotateY}deg)  rotateZ(${chart.rotateZ}deg)`,
+        zIndex: chart.z || 0
+      }
+    },
     // 右键点击查看数据
     openDataViewDialog (config) {
       this.$refs.dataViewDialog.init(config)
@@ -320,7 +335,7 @@ export default {
       // 宽度铺满 预览时画布横向铺满，纵向超出时出现滚动条
       if (pageConfig.fitMode === 'fitWidth') {
         scaleX = this.innerWidth / w
-                // 如果实际高度小于屏幕，纵向居中
+        // 如果实际高度小于屏幕，纵向居中
         if (this.innerHeight > h) {
           translate = `${((this.innerWidth - w) / 2) / scaleX}px, ${((this.innerHeight - h) / 2) / scaleY}px`
         } else {