修改驾驶舱zoom缩放问题

src/components/cockpit/indicatorDistribution/index.vue

@@ -21,7 +21,7 @@
                 :options="echartList"
                 :style="{
                     width: prop.width,
-                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`,
                 }"
             />
             <my-echart
@@ -187,7 +187,7 @@ const initProbabilityData = () => {
                         type: 'category',
                         name: '越限程度',
                         nameLocation: 'middle',
-                        nameGap: 30,
+                       nameGap: 50,
                         data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
                         axisLine: {
                             lineStyle: {
@@ -206,7 +206,7 @@ const initProbabilityData = () => {
                         type: 'category',
                         name: '指标类型',
                         nameLocation: 'middle',
-                        nameGap: 30,
+                        nameGap: 50,
                         data: yAxisData,
                         nameTextStyle: {
                             color: '#111'

src/components/cockpit/indicatorFittingChart/index.vue

@@ -26,7 +26,6 @@ import { getTimeOfTheMonth } from '@/utils/formatTime'
 import OverLimitDetails from '@/components/cockpit/indicatorFittingChart/components/overLimitDetails.vue'
 import { useRoute } from 'vue-router'
 import { useTimeCacheStore } from '@/stores/timeCache'
-import { log } from 'console'
 
 const prop = defineProps({
     w: { type: [String, Number] },

src/views/pqs/cockpit/homePage/index.vue

@@ -16,7 +16,6 @@
                 <el-button type="primary" icon="el-icon-Tools" @click="settings">设置</el-button>
             </template>
         </TableHeader>
-
         <GridLayout
             v-model:layout="layout"
             :row-height="rowHeight"
@@ -26,6 +25,7 @@
             :vertical-compact="false"
             prevent-collision
             :col-num="12"
+            :style="{ zoom: zoom }"
         >
             <template #item="{ item }">
                 <div class="box">
@@ -34,8 +34,8 @@
                             <Icon class="HelpFilled" :name="(item as LayoutItem).icon" />
                             {{ (item as LayoutItem).name }}
                         </div>
-                        <!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
+                        <!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="setZoom(item)" /> -->
-                        <img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
+                        <img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="setZoom(item)" />
                     </div>
                     <div>
                         <component
@@ -80,6 +80,7 @@ const timeCacheStore = useTimeCacheStore()
 defineOptions({
     // name: 'dashboard/index'
 })
+
 // 定义类型
 interface LayoutItem {
     x: number
@@ -95,6 +96,7 @@ interface LayoutItem {
     loading?: boolean
     error?: any
 }
+const zoom = ref(1)
 const RoutingConfigRef = ref()
 const key = ref(0)
 const img = new URL(`@/assets/img/amplify.png`, import.meta.url).href
@@ -120,13 +122,15 @@ const componentMap = reactive(new Map<string, Component | string>())
 const dataList: any = ref({})
 // 获取主内容区域高度
 const getMainHeight = () => {
-    const elMain = document.querySelector('.el-main')
+    const elMain = document.querySelector('.el-main') as HTMLElement | null
-    return (elMain?.offsetHeight || 0) - 70
+    zoom.value =  layout.value.length==1?1: (elMain?.offsetHeight ?? 0) / 1080
+    // console.log('🚀 ~ getMainHeight ~ elMain:', elMain?.offsetHeight)
+    return ((elMain?.offsetHeight || 0) - 70) / zoom.value
 }
 // 获取主内容区域高度
 const getMainWidth = () => {
-    const elMain = document.querySelector('.el-main')
+    const elMain = document.querySelector('.el-main') as HTMLElement | null
-    return (elMain?.offsetWidth || 0) - 20
+    return ((elMain?.offsetWidth || 0) - 20) / zoom.value
 }
 
 // 初始化行高
@@ -170,8 +174,9 @@ const registerComponent = (path: string): Component | string | null => {
         return null
     }
 }
+
 // 缩放
-const zoom = (value: any) => {
+const setZoom = (value: any) => {
     if (flag.value) {
         layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
     } else {
@@ -181,7 +186,6 @@ const zoom = (value: any) => {
             component: registerComponent(item.path)
         }))
     }
-        console.log("🚀 ~ zoom ~ layout.value:", layout.value)
 
     flag.value = !flag.value