From 1d550b8952c493f1b0059ea0af052981c02d7372 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Tue, 22 Oct 2024 15:59:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=B8=83=E5=92=8C=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4=EF=BC=8C=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=A4=A7=E5=B0=8F=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   |  3 +--
 src/components/AlertChart.vue |  8 +++++---
 src/components/Cameras.vue    |  8 +++++---
 src/components/Statistics.vue | 14 +++++++------
 src/html/DataStatistics.vue   | 37 ++++++++++++++++++++++++++++-------
 src/html/Home.vue             |  4 ----
 src/html/UserList.vue         |  2 +-
 7 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2fc1690..bc7bc45 100644
--- a/src/App.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/AlertChart.vue b/src/components/AlertChart.vue
index 31eaee8..1335681 100644
--- a/src/components/AlertChart.vue
+++ b/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 {
diff --git a/src/components/Cameras.vue b/src/components/Cameras.vue
index 17805a7..f691767 100644
--- a/src/components/Cameras.vue
+++ b/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; */
diff --git a/src/components/Statistics.vue b/src/components/Statistics.vue
index 2a0aee8..45c014b 100644
--- a/src/components/Statistics.vue
+++ b/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>
diff --git a/src/html/DataStatistics.vue b/src/html/DataStatistics.vue
index fd137f1..e974929 100644
--- a/src/html/DataStatistics.vue
+++ b/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{
diff --git a/src/html/Home.vue b/src/html/Home.vue
index c7ab55d..32f3dd5 100644
--- a/src/html/Home.vue
+++ b/src/html/Home.vue
@@ -160,10 +160,6 @@ onMounted(() => {
 <style scoped>
 .camera-container {
   display: flex;
-  overflow-x: auto;
-  /* 横向滚动条 */
-  min-width: 0;
-  /* 避免内容挤压 */
 }
 
 .camera-list {
diff --git a/src/html/UserList.vue b/src/html/UserList.vue
index ad5789e..538c70e 100644
--- a/src/html/UserList.vue
+++ b/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="序号"