From b0871b3af9678cd36fe8760062f8a550aa9b60bb Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Mon, 9 Aug 2021 15:05:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |  2 ++
 src/layouts/MainLayout.vue | 31 +++++++++-------
 src/pages/WallPage.vue     | 73 +++++++++++++-------------------------
 3 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 12e05c1..83c8896 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,8 @@ export default defineComponent({
 
     window.onresize = (evt: any) =>
       EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
+
+    document.body.classList.add("overflow-hidden");
     return {};
   },
 });
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 07e813c..fce4fcb 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -5,19 +5,24 @@
       <top-tool-bar />
     </q-header>
 
-    <!-- drawer -->
-    <q-drawer
-      v-if="landspace"
-      v-model="data.show_left_drawer"
-      side="left"
-      bordered
-    >
-      <left-tool-bar />
-    </q-drawer>
-
     <!-- page -->
-    <q-page-container>
-      <router-view />
+    <q-page-container class="col">
+      <div class="row">
+        <!-- left -->
+        <div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
+          <left-tool-bar />
+        </div>
+
+        <!-- cener content -->
+        <div class="col q-ma-sm">
+          <router-view />
+        </div>
+
+        <!-- left -->
+        <div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
+          <left-tool-bar />
+        </div>
+      </div>
     </q-page-container>
 
     <!-- fotter -->
@@ -29,7 +34,7 @@
     >
       <div class="text-center">SX</div>
     </q-footer>
-    <q-footer v-else elevated class="bg-white text-black" style="height: 40vh">
+    <q-footer v-else elevated class="bg-white text-black" style="height: 35vh">
       <left-tool-bar />
     </q-footer>
   </q-layout>
diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue
index 76dc12b..d012172 100644
--- a/src/pages/WallPage.vue
+++ b/src/pages/WallPage.vue
@@ -177,10 +177,11 @@ const _initialize = async (options: _OptionsType) => {
       await Common.waitFor(100);
     }
 
-    _initSignalSourceTree(options).then(() => {
+    await _getApplicationConfig(options);
+
+    await _initSignalSourceTree(options).then(() => {
       _getWindows(options);
     });
-    _getApplicationConfig(options);
   }
 };
 
@@ -191,10 +192,6 @@ export default defineComponent({
   setup() {
     const $store = useStore();
     const $t = useI18n();
-    _initialize({
-      $t,
-      $store,
-    });
 
     const windows = computed({
       get: () => $store.state.windows,
@@ -213,31 +210,8 @@ export default defineComponent({
 
     const wall: Ref<HTMLElement | null> = ref(null);
 
-    const item_witdh = computed({
-      get: () => {
-        if (wall.value && wall.value.parentElement) {
-          return wall.value.parentElement.offsetWidth / wall_cols.value;
-        }
-        return 0;
-      },
-      set: (val) => $store.commit("setWallCol", val),
-    });
-
-    const item_height = computed({
-      get: () => {
-        if (wall.value && wall.value.parentElement) {
-          const wv_scaler =
-            $store.state.device_screen_width /
-            $store.state.device_screen_height;
-
-          return (
-            wall.value.parentElement.offsetHeight / wv_scaler / wall_rows.value
-          );
-        }
-        return 0;
-      },
-      set: (val) => $store.commit("setWallCol", val),
-    });
+    let item_witdh = ref(0);
+    const item_height = ref(0);
 
     const wall_width_scaler = ref(0);
     const wall_height_scaler = ref(0);
@@ -256,8 +230,22 @@ export default defineComponent({
       }
     };
 
+    const calcWallItemWH = () => {
+      item_witdh.value =
+        wall?.value?.parentElement?.offsetWidth ?? 0 / wall_cols.value;
+      if (wall.value && wall.value.parentElement) {
+        const wv_scaler =
+          $store.state.device_screen_width / $store.state.device_screen_height;
+        item_height.value =
+          wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
+      } else {
+        item_height.value = 0;
+      }
+    };
+
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       calcWallVWScaler();
+      calcWallItemWH();
     });
 
     interface _ResponseMessage {
@@ -348,23 +336,6 @@ export default defineComponent({
                       (item) => item.window_id == temp.window_id
                     );
                     if (window) {
-                      // $store.commit("setWindowPropertys", [
-                      //   {
-                      //     window,
-                      //     property_name: "playing",
-                      //     value: temp.playing,
-                      //   },
-                      //   {
-                      //     window,
-                      //     property_name: "focus",
-                      //     value: temp.focus,
-                      //   },
-                      //   {
-                      //     window,
-                      //     property_name: "muted",
-                      //     value: temp.muted,
-                      //   },
-                      // ]);
                       window.window_state; //
                       $store.commit("setWindowProperty", {
                         window,
@@ -388,7 +359,11 @@ export default defineComponent({
       }
     );
 
-    onMounted(() => {
+    _initialize({
+      $t,
+      $store,
+    }).then(() => {
+      calcWallItemWH();
       calcWallVWScaler();
     });