分布和趋势布局调整，卡片布局大小适配

src/App.vue

@@ -18,10 +18,9 @@ export default {
   padding: 0px;
   width: 100%;
   height: 100%;
-  overflow-x: auto;
 }
 /* .app-container{
   margin: 0;
   padding: 0;
 } */
-</style>
+</style>

src/components/AlertChart.vue

@@ -487,8 +487,8 @@ watch(monthlyCounts, () => {
   background-color: #304555;
   color: #fff;
   border-radius: 8px;
-  padding: 0;
-  margin: 0;
+  /* padding: 10px; */
+  /* margin: 10px; */
 }
 
 .alert-header {
@@ -498,7 +498,9 @@ watch(monthlyCounts, () => {
 }
 
 .chart-container {
-  height: 350px;
+  /* min-height: 350px; */
+  min-height: 41vh;
+  min-width: 40vw;
 }
 
 ::v-deep .el-tabs__item {

src/components/Cameras.vue

@@ -7,7 +7,7 @@
                     <el-card class="channel-card" shadow="hover">
                         <div class="section-title">通道</div>
                         <div class="scroll-container">
-                            <el-table :data="cameras" height="250">
+                            <el-table :data="cameras" height="220">
                                 <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                                 <el-table-column prop="name" label="名称" align="center"></el-table-column>
                                 <!-- 添加点播按钮的列 -->
@@ -278,6 +278,7 @@ onMounted(() => {
 
 .scroll-container {
     height: 170px;
+    height: 27vh;
     /* overflow-y: auto; */
 
 }
@@ -285,7 +286,7 @@ onMounted(() => {
 .status-summary-chart,
 .camera-count-chart {
     /* width: 100%; */
-    height: 170px;
+    height: 27vh;
 }
 
 .loading-container {
@@ -324,7 +325,8 @@ onMounted(() => {
 }
 
 .camera-row {
-    max-height: 250px;
+    max-height: 37vh;
+    /* max-height: 250px; */
     /* max-width: 1680px; */
     overflow-x: auto;
     /* gap: 1px; */

src/components/Statistics.vue

@@ -117,7 +117,7 @@ const initChart = () => {
         name: '告警类型',
         type: 'pie',
         radius: '50%',
-        center: ['50%', '150px'],
+        center: ['50%', '50%'],
         data: seriesData.value,
         data: [],
         emphasis: {
@@ -177,8 +177,8 @@ onMounted(async () => {
   /* background: linear-gradient(to top, rgba(16, 84, 194, 0.6), rgba(31, 48, 207, 0.7)); */
   color: #fff;
   border-radius: 8px;
-  margin: 0;
-  padding: 0;
+  /* margin: 10px; */
+  /* padding: 10px; */
   /* height: 100vh; */
 }
 
@@ -190,13 +190,15 @@ onMounted(async () => {
 }
 
 .stats-row {
-  margin-top: 20px;
-  margin-bottom: 10px;
+  margin-top: 10px;
+  margin-bottom: 34px;
 }
 
 .chart {
   width: 100%;
-  height: 365px;
+  /* min-height: 365px; */
+  height: 41vh;
+  min-width: 40vw;
   /* height: 445px; */
 }
 </style>

src/html/DataStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="alert-container">
+  <div class="alert-container" >
     <el-row class="bottom-pan">
       <el-col class="panel-bottom">
         <Cameras/>
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted,computed, onBeforeUnmount} from 'vue';
 import Statistics from '@/components/Statistics.vue';
 import AlertChart from '@/components/AlertChart.vue';
 import  Cameras from '@/components/Cameras.vue';
@@ -30,6 +30,19 @@ import { BoxApi } from '@/utils/boxApi.ts';  // 导入 BoxApi
 const boxApi = new BoxApi();
 const typeMapping = reactive({});
 const token = ref(null);
+// const scale = ref(1);
+
+// const scaleStyle = computed(() => ({
+//   transform: `scale(${scale.value})`,
+//   transformOrigin: 'top left', 
+//   width: `${100 / scale.value}%`, 
+// }));
+
+// const handleResize = () => {
+//   const clientWidth = document.documentElement.clientWidth;
+//   const scaleFactor = clientWidth / 1920;  
+//   scale.value = scaleFactor < 1 ? scaleFactor : 1;  
+// };
 
 // 获取类型映射
 const fetchTypeMapping = async (token) => {
@@ -47,7 +60,13 @@ const fetchTypeMapping = async (token) => {
 onMounted(async () => {
   token.value = localStorage.getItem('alertToken');
   await fetchTypeMapping(token.value);
+  // handleResize();
+  // window.addEventListener('resize', handleResize);
 });
+
+// onBeforeUnmount(() => {
+//   window.removeEventListener('resize', handleResize);
+// });
 </script>
 
 <style scoped>
@@ -56,8 +75,9 @@ onMounted(async () => {
   padding: 0;
   margin: 0;
   background-color: #f5f7fa;
-  overflow: auto;
+  overflow-x: hidden;
   height: 100vh;
+  width: 100%;
 }
 
 .top-pan {
@@ -69,13 +89,16 @@ onMounted(async () => {
   /* overflow: hidden; */
   /* height: 55vh; */
   /* max-height: 450px; */
-  padding-left: 10px;
-  padding-right:10px ;
-  overflow-y: auto;
+  /* padding-left: 1vh; */
+  /* padding-right:1vh ; */
+  /* overflow: hidden; */
+  height: 55vh;
+  margin-top: 60px;
 }
 .bottom-pan{
   margin: 0;
   padding: 0;
+  height: 33vh;
 }
 
 .panel-top-left {
@@ -88,7 +111,7 @@ onMounted(async () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  /* gap: 20px; */
 }
 
 .panel-bottom{

src/html/Home.vue

@@ -160,10 +160,6 @@ onMounted(() => {
 <style scoped>
 .camera-container {
   display: flex;
-  overflow-x: auto;
-  /* 横向滚动条 */
-  min-width: 0;
-  /* 避免内容挤压 */
 }
 
 .camera-list {

src/html/UserList.vue

@@ -36,7 +36,7 @@
                 <el-col :span="24">
                     <div class="table-part">
                         <el-table v-loading="loading" :data="tableData" 
-                            class="user-table" border max-height="550px">
+                            class="user-table" border max-height="700px">
                             <el-table-column v-if="getColumnVisibility('selection')" type="selection"
                                 min-width="55"></el-table-column>
                             <el-table-column v-if="getColumnVisibility('id')" prop="id" label="序号"