From f5f9a23ce0fdd763bd6e60f2eec76acfdccde938 Mon Sep 17 00:00:00 2001
From: joey <huqingxiang11@163.com>
Date: Fri, 21 Jun 2024 10:39:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E6=9F=A5=E7=9C=8B=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A2=9E=E5=8A=A0=E8=87=AA=E9=80=82=E5=BA=94=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/bigscreenDesigner/viewer/index.vue  | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/report-ui/src/views/bigscreenDesigner/viewer/index.vue b/report-ui/src/views/bigscreenDesigner/viewer/index.vue
index ae0eb32a..4292aebb 100644
--- a/report-ui/src/views/bigscreenDesigner/viewer/index.vue
+++ b/report-ui/src/views/bigscreenDesigner/viewer/index.vue
@@ -30,17 +30,20 @@ export default {
   data() {
     return {
       bigScreenStyle: {},
+      dashboard:{},
       widgets: []
     };
   },
   mounted() {
     this.getData();
+    window.onresize=this.Debounce(this.setScale,500);
   },
   methods: {
     async getData() {
       const reportCode = this.$route.query.reportCode;
       const { code, data } = await detailDashboard(reportCode);
       if (code != 200) return;
+      this.dashboard=data.dashboard||{};
       const equipment = document.body.clientWidth;
       const ratioEquipment = equipment / data.dashboard.width;
       this.bigScreenStyle = {
@@ -74,7 +77,32 @@ export default {
       if(data.dashboard.refreshSeconds>0) {
         setTimeout(function(){ window.location.reload(); }, data.dashboard.refreshSeconds*1000);
       }
-    }
+    },
+    Debounce:(fn,t)=>{
+      const delay=t||500;
+      let timer=null;
+      return(...args)=>{
+        if(timer){
+          clearTimeout(timer);
+        }
+        const context=this
+        timer=setTimeout(()=>{
+          fn.apply(context,args);
+        },delay);
+      }
+    },
+    setScale(){
+      const scale=this.getScale();
+      this.bigScreenStyle.transform='scale('+scale.scalex+','+scale.scaley+')'
+    },
+    getScale(){
+      let width=this.dashboard.width;
+      let height=this.dashboard.height;
+      return{
+        scalex:(window.innerWidth)/width,
+        scaley:(window.innerHeight)/height,
+      }
+    },
   }
 };
 </script>