调整缩放的问题

src/App.vue

@@ -22,7 +22,8 @@ html, body, #app {
 .pb-10 {
   padding-bottom: 10px;
 }
-.mb-10{
+
+.mb-10 {
   margin-bottom: 10px;
 }
 
@@ -43,7 +44,10 @@ export default {
       const targetHeight = 1080;
       const ratio = targetWidth / targetHeight;
       const element = this.$el.querySelector('.components');
-      const {width: originalWidth, height: originalHeight} = element.getBoundingClientRect();
+      if (!element) return
+      let {width: originalWidth, height: originalHeight} = this.$el.getBoundingClientRect();
+      originalWidth = originalWidth - 200
+      console.log("当前面板大小:", originalWidth, originalHeight)
       const ratioHeight = originalWidth / ratio;
       let scale
       if (ratioHeight < originalHeight) {
@@ -51,7 +55,6 @@ export default {
       } else {
         scale = originalHeight / targetHeight;
       }
-
       element.style.transform = `scale(${scale})`;
       element.style.width = '1920px'
       element.style.height = '1080px'
@@ -60,6 +63,10 @@ export default {
   },
   mounted() {
     this.scaleByAspect()
+    window.addEventListener('resize', this.scaleByAspect)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.scaleByAspect)
   }
 }
 </script>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
-const ctx = import.meta.glob('../views/App*.vue', {eager: true})
+const ctx = import.meta.glob('../views/**/App*.vue', {eager: true})
 const routes = [{path: '/', name: 'home'}]
 Object.values(ctx).map(file => {
   if (file.default) {

src/utils/inject.js

@@ -65,6 +65,7 @@ window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear
 
 Vue.prototype.$marketBoard = Vue.observable({
   screenId: '5b1849ac-4fc3-451a-844c-3362b47341ef',
+  goodsCategoryId: "",
   search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}
 })
 Vue.prototype.$multipleStoreBoard = Vue.observable({

src/views/AppStoreKeyGoods.vue

@@ -46,6 +46,9 @@ export default {
           this.$nextTick(() => this.$storeBoard.dialog = true)
         }
       })
+    },
+    relevanceMapData(row){
+      console.log(arguments)
     }
   }
 }
@@ -54,7 +57,7 @@ export default {
 <template>
   <section class="AppStoreKeyGoods">
     <div class="subTitle" v-text="'重点单品情况'"/>
-    <scroll-table :table-data="tableData" :columns="columns" @click="openNearbyStores" @click.native.stop/>
+    <scroll-table :table-data="tableData" :columns="columns" @click="relevanceMapData" @click.native.stop/>
     <!--<dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/>-->
   </section>
 </template>

src/views/board/AppMarketBoard.vue

@@ -19,7 +19,6 @@ export default {
 <template>
   <section class="AppMarketBoard">
     <app-navbar class="mb-10"/>
-    <app-market-board-filter/>
     <div class="flex" style="gap:20px">
       <div class="fill">
         <div class="flex gap">
@@ -28,7 +27,10 @@ export default {
             <app-sales-performance style="margin-bottom: 10px"/>
             <app-key-goods style="height: 208px"/>
           </div>
-          <app-map class="fill"/>
+          <div class="fill">
+            <app-market-board-filter/>
+            <app-map style="height: calc(100% - 50px)"/>
+          </div>
         </div>
         <div class="flex gap" style="height: 394px">
           <app-group-monitor-table class="fill"/>