优化

src/views/home/datav.vue

@@ -1,42 +1,44 @@
 <template>
     <div class="hc-datav-main hc-full">
         <img class="hc-datav-bg" :src="bgPng" alt="bg">
-        <div class="hc-datav-header">
-            <img id="datav-header-bg" :src="png2" alt="头部图">
-            <div class="header-title hc-flex-center w-full">
-                <div ref="nameRef" class="name hc-flex" @click="toHomePage">
-                    <i class="i-solar-graph-outline" />
-                    项目数据看板
+        <div id="hc-datav-header-body" class="relative">
+            <div class="hc-datav-header">
+                <img id="datav-header-bg" :src="png2" alt="头部图">
+                <div class="header-title hc-flex-center w-full">
+                    <div ref="nameRef" class="name hc-flex" @click="toHomePage">
+                        <i class="i-solar-graph-outline" />
+                        项目数据看板
+                    </div>
                 </div>
-            </div>
-            <div class="hc-datav-search-select hc-flex w-full">
-                <div ref="searchRef" class="relative">
-                    <HcDatavSelect v-model="searchForm.year" :datas="yearArr" />
-                    <HcDatavSelect v-model="searchForm.quarter" :datas="quarterArr" />
-                    <HcDatavSelect v-model="searchForm.level" :datas="levelArr" />
-                    <HcDatavSelect v-model="searchForm.stage" :datas="stageArr" />
-                    <HcDatavSelect v-model="searchForm.type" :datas="typeArr" />
+                <div class="hc-datav-search-select hc-flex w-full">
+                    <div ref="searchRef" class="relative">
+                        <HcDatavSelect v-model="searchForm.year" :datas="yearArr" />
+                        <HcDatavSelect v-model="searchForm.quarter" :datas="quarterArr" />
+                        <HcDatavSelect v-model="searchForm.level" :datas="levelArr" />
+                        <HcDatavSelect v-model="searchForm.stage" :datas="stageArr" />
+                        <HcDatavSelect v-model="searchForm.type" :datas="typeArr" />
+                    </div>
                 </div>
             </div>
+            <div class="hc-datav-total relative p-[14px]">
+                <el-row :gutter="24">
+                    <el-col :span="6">
+                        <HcDatavCard title="项目总量" num="860" unit="" color="#D5DEFF" />
+                    </el-col>
+                    <el-col :span="6">
+                        <HcDatavCard title="计划总投资额" num="1590" unit="亿" color="#EEB500" />
+                    </el-col>
+                    <el-col :span="6">
+                        <HcDatavCard title="目前实际完成投资额" num="590" unit="亿" color="#0DD70C" />
+                    </el-col>
+                    <el-col :span="6">
+                        <HcDatavCard title="未完成投资额" num="1000" unit="亿" color="#FF0000" />
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="hc-datav-divider" />
         </div>
-        <div class="hc-datav-total relative p-[14px]">
-            <el-row :gutter="24">
-                <el-col :span="6">
-                    <HcDatavCard title="项目总量" num="860" unit="" color="#D5DEFF" />
-                </el-col>
-                <el-col :span="6">
-                    <HcDatavCard title="计划总投资额" num="1590" unit="亿" color="#EEB500" />
-                </el-col>
-                <el-col :span="6">
-                    <HcDatavCard title="目前实际完成投资额" num="590" unit="亿" color="#0DD70C" />
-                </el-col>
-                <el-col :span="6">
-                    <HcDatavCard title="未完成投资额" num="1000" unit="亿" color="#FF0000" />
-                </el-col>
-            </el-row>
-        </div>
-        <div class="hc-datav-divider" />
-        <div class="hc-datav-row-total relative p-[14px]">
+        <div id="hc-datav-row-total-body" class="hc-datav-row-total relative p-[14px]">
             <el-row :gutter="24" class="h-full">
                 <el-col :span="8" class="h-full">
                     <div class="hc-datav-row-column h-full">
@@ -216,7 +218,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import router from '~src/router/index'
 import { useAppStore } from '~src/store'
 import { getStore, setStore } from 'hc-vue3-ui'
@@ -243,6 +245,11 @@ onMounted(() => {
             tourOpen.value = true
         }, 500)
     }
+    //窗口大小改变
+    windowResize()
+    setTimeout(() => {
+        onWindowResize()
+    }, 100)
 })
 
 //关闭引导提示
@@ -290,6 +297,27 @@ const tableData2 = ref([
 const toHomePage = () => {
     router.push({ name: store.home })
 }
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener('resize', resizeEvent)
+}
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        onWindowResize()
+    })
+}
+
+//设置尺寸
+const onWindowResize = () => {
+    const height = document.getElementById('hc-datav-header-body').offsetHeight
+    document.getElementById('hc-datav-row-total-body').style.height = `calc(100% - ${height + 10}px)`
+}
+
+//被卸载
+onUnmounted(() => {
+    window.removeEventListener('resize', resizeEvent)
+})
 </script>
 
 <style lang="scss">