From 702cc229a3aa7c7a73bc8d6178ce34b18b033466 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Tue, 15 Oct 2024 18:16:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/IscsDrawLayout.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue
index 1f741fa..ffad9b7 100644
--- a/src/layouts/IscsDrawLayout.vue
+++ b/src/layouts/IscsDrawLayout.vue
@@ -154,12 +154,17 @@
       <div
         v-show="subMenuDisplayForm !== DisplayForm.draw"
         id="component-container"
-        class="show-component"
       >
-        <cCTV-monitoring
-          v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
-          :stationName="drawStore.selectSubmenuAndStation.station"
-        />
+        <q-scroll-area
+          :style="`width: ${showComponent.width}px;height: ${showComponent.height}px`"
+        >
+          <div class="show-component">
+            <cCTV-monitoring
+              v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
+              :stationName="drawStore.selectSubmenuAndStation.station"
+            />
+          </div>
+        </q-scroll-area>
       </div>
       <q-page-sticky position="bottom-right" :offset="fabPos">
         <q-fab
@@ -555,6 +560,10 @@ const canvasHeight = ref(0);
 const headerHeight = ref(0);
 const footerHeight = ref(0);
 const rightWidth = ref(0);
+const showComponent = reactive({
+  width: 0,
+  height: 0,
+});
 
 function onHeaderResize(size: { height: number; width: number }) {
   headerHeight.value = size.height;
@@ -581,6 +590,7 @@ function onResize() {
   const componentDom = document.getElementById('component-container');
   if (dom) {
     dom.style.width = canvasWidth.value + 'px';
+    showComponent.width = canvasWidth.value;
     if (subMenuDisplayForm.value == DisplayForm.draw) {
       dom.style.height = canvasHeight.value + 'px';
     } else if (subMenuDisplayForm.value == DisplayForm.drawAndComponent) {
@@ -588,10 +598,12 @@ function onResize() {
         (subMenu) => subMenu.value == selectSubMenuName.value
       ).heightPercent;
       dom.style.height = (heightPercent / 100) * canvasHeight.value + 'px';
-      componentDom.style.height =
-        (1 - heightPercent / 100) * canvasHeight.value - 1 + 'px';
+      const height = (1 - heightPercent / 100) * canvasHeight.value - 1;
+      componentDom.style.height = height + 'px';
+      showComponent.height = height;
     } else {
       componentDom.style.height = canvasHeight.value + 'px';
+      showComponent.height = canvasHeight.value;
     }
   }
 }