大屏页面初始化

screen-vue/src/views/screen/Erp/index.vue

@@ -83,10 +83,9 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, computed } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import ChartTop from './components/ChartTop.vue';
-
 import { getChartListAll } from '@/api/bizChart'
 
 const route = useRoute();
@@ -165,8 +164,8 @@ onMounted(async () => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 2px;
-  padding: 8px;
+  padding: 2px;
   margin: 0 !important;
   box-sizing: border-box;
   background-color: transparent;
@@ -176,7 +175,7 @@ onMounted(async () => {
 .erp-section {
   width: 100%;
   display: flex;
-  gap: 6px;
+  gap: 2px;
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -198,18 +197,18 @@ onMounted(async () => {
 }
 
 .erp-col-1-3 {
-  width: calc((100% - 12px) / 3);
+  width: calc((100% - 4px) / 3);
 }
 
 .erp-col-1-2 {
-  width: calc((100% - 6px) / 2);
+  width: calc((100% - 2px) / 2);
 }
 
 .erp-inner-layout {
   width: 100%;
   height: 100%;
   display: flex;
-  gap: 6px;
+  gap: 2px;
   box-sizing: border-box;
 }
 
@@ -270,23 +269,23 @@ onMounted(async () => {
 
 @media (max-width: 1600px) {
   .erp-layout-container {
-    padding: 6px;
+    padding: 2px;
-    gap: 4px;
+    gap: 2px;
   }
   .erp-section {
-    gap: 4px;
+    gap: 2px;
   }
   .erp-col-1-3 {
-    width: calc((100% - 8px) / 3);
+    width: calc((100% - 4px) / 3);
   }
   .erp-col-1-2 {
-    width: calc((100% - 4px) / 2);
+    width: calc((100% - 2px) / 2);
   }
   .erp-inner-layout {
-    gap: 4px;
+    gap: 2px;
   }
   .erp-card {
-    padding: 10px;
+    padding: 2px;
   }
   .erp-card h3 {
     font-size: 14px;
@@ -301,40 +300,41 @@ onMounted(async () => {
     flex-direction: column;
     height: auto;
     min-height: 100%;
-    padding: 6px;
+    padding: 2px;
-    gap: 6px;
+    gap: 2px;
     overflow-y: auto;
   }
   .erp-section {
     flex-direction: column;
     height: auto !important;
     min-height: 120px;
-    gap: 6px;
+    gap: 2px;
   }
   .erp-col-1-3,
   .erp-col-1-2 {
     width: 100%;
-    height: calc((100% - 12px) / 3);
+    height: calc((100% - 4px) / 3);
   }
   .erp-inner-layout {
     flex-direction: column;
     height: 100%;
+    gap: 2px;
   }
   .erp-card {
-    padding: 8px;
+    padding: 2px;
   }
 }
 
 @media (max-height: 900px) {
   .erp-layout-container {
-    padding: 6px;
+    padding: 2px;
-    gap: 4px;
+    gap: 2px;
   }
   .erp-section {
-    gap: 4px;
+    gap: 2px;
   }
   .erp-card {
-    padding: 8px;
+    padding: 2px;
   }
   .erp-card h3 {
     font-size: 14px;

screen-vue/src/views/screen/Work/index.vue

@@ -64,7 +64,6 @@
 import { ref, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import ChartTop from './components/ChartTop.vue';
-
 import { getChartListAll } from '@/api/bizChart'
 
 const route = useRoute();
@@ -113,7 +112,7 @@ async function getChartList(){
 	  const res = await getChartListAll(reqParams)
 	  chartData.value = res || []
 	} catch (error) {
-	  console.error('获取数据失败:', error)
+	  console.error('获取数据失败:', error);
 	  chartData.value = []
 	}
 }
@@ -143,8 +142,8 @@ onMounted(async () => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 2px;
-  padding: 8px;
+  padding: 2px;
   margin: 0 !important;
   box-sizing: border-box;
   background-color: transparent;
@@ -154,7 +153,7 @@ onMounted(async () => {
 .work-section {
   width: 100%;
   display: flex;
-  gap: 6px;
+  gap: 2px;
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -174,21 +173,21 @@ onMounted(async () => {
 }
 
 .work-col-1-3 {
-  width: calc((100% - 12px) / 3);
+  width: calc((100% - 4px) / 3);
 }
 
 .work-left-col, .work-middle-col, .work-right-col {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 2px;
 }
 
 .work-card-1-3 {
-  height: calc((100% - 12px) / 3);
+  height: calc((100% - 4px) / 3);
 }
 
 .work-card-2-3 {
-  height: calc(2 * ((100% - 12px) / 3) + 6px);
+  height: calc(2 * ((100% - 4px) / 3) + 2px);
 }
 
 .work-card {
@@ -206,6 +205,7 @@ onMounted(async () => {
   backdrop-filter: blur(2px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   min-height: 0;
+  margin: 0;
 }
 
 .full-card {
@@ -248,23 +248,23 @@ onMounted(async () => {
 
 @media (max-width: 1600px) {
   .work-layout-container {
-    padding: 6px;
+    padding: 2px;
-    gap: 4px;
+    gap: 2px;
   }
   .work-section {
-    gap: 4px;
+    gap: 2px;
   }
   .work-col-1-3 {
-    width: calc((100% - 8px) / 3);
+    width: calc((100% - 4px) / 3);
   }
   .work-card-1-3 {
-    height: calc((100% - 8px) / 3);
+    height: calc((100% - 4px) / 3);
   }
   .work-card-2-3 {
-    height: calc(2 * ((100% - 8px) / 3) + 4px);
+    height: calc(2 * ((100% - 4px) / 3) + 2px);
   }
   .work-card {
-    padding: 10px;
+    padding: 2px;
   }
   .work-card h3 {
     font-size: 14px;
@@ -279,15 +279,15 @@ onMounted(async () => {
     flex-direction: column;
     height: auto;
     min-height: 100%;
-    padding: 6px;
+    padding: 2px;
-    gap: 6px;
+    gap: 2px;
     overflow-y: auto;
   }
   .work-section {
     flex-direction: column;
     height: auto !important;
     min-height: 120px;
-    gap: 6px;
+    gap: 2px;
   }
   .work-col-1-3 {
     width: 100%;
@@ -296,26 +296,27 @@ onMounted(async () => {
   .work-left-col, .work-middle-col, .work-right-col {
     flex-direction: column;
     height: auto;
+    gap: 2px;
   }
   .work-card-1-3, .work-card-2-3 {
     height: 120px;
-    margin-bottom: 6px;
+    margin-bottom: 2px;
   }
   .work-card {
-    padding: 8px;
+    padding: 2px;
   }
 }
 
 @media (max-height: 900px) {
   .work-layout-container {
-    padding: 6px;
+    padding: 2px;
-    gap: 4px;
+    gap: 2px;
   }
   .work-section {
-    gap: 4px;
+    gap: 2px;
   }
   .work-card {
-    padding: 8px;
+    padding: 2px;
   }
   .work-card h3 {
     font-size: 14px;