看板高度

src/views/pms/monitor/kanban.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-6 relative"
+    class="bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-4 relative h-screen overflow-hidden flex flex-col"
     :class="{ 'fullscreen-layout': isFullscreen }"
   >
     <!-- Animated background grid -->
@@ -14,23 +14,23 @@
     </div>
 
     <!-- Header -->
-    <div class="relative z-10 mb-6">
-      <div class="flex items-center justify-center border-b-2 border-cyan-500/30 pb-4 gap-8">
-        <h1 class="text-2xl font-bold text-cyan-300 flex-6 tracking-wider">
+    <div class="relative z-10 mb-2 flex-shrink-0">
+      <div class="flex items-center justify-center border-b-2 border-cyan-500/30 pb-2 gap-8">
+        <h1 class="text-xl font-bold text-cyan-300 flex-6 tracking-wider">
           {{ dataInfo.groupName }}
         </h1>
 
         <div class="flex flex-4 items-center gap-8 text-sm">
           <div
             style="border: 0.5px solid #085b77"
-            class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
+            class="px-4 py-1.5 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
           >
             <span class="pr-4">部门名称</span>
             <span class="inline-block skew-x-[12deg]">{{ dataInfo.deptName }}</span>
           </div>
           <div
             style="border: 0.5px solid #085b77"
-            class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
+            class="px-4 py-1.5 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
           >
             <span class="pr-4">井号</span>
             <span class="inline-block skew-x-[12deg]">{{ dataInfo.wellName }}</span>
@@ -38,7 +38,7 @@
           <div
             @click="toggleFullscreen"
             style="border: 0.5px solid #085b77"
-            class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
+            class="px-4 py-1.5 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
           >
             <span class="inline-block skew-x-[12deg]">{{
               isFullscreen ? '退出全屏' : '全屏'
@@ -48,91 +48,94 @@
       </div>
     </div>
 
-    <div class="relative z-10 grid grid-cols-12 gap-4 mt-5 p-6">
+    <div class="relative z-10 grid grid-cols-12 gap-3 p-2 flex-1 min-h-0">
       <!-- Left panels - 合并为一个大面板 -->
-      <div class="col-span-3">
+      <div class="col-span-3 min-h-0">
         <div class="panel h-full flex flex-col">
           <!-- PSA核心参数 -->
-          <div class="flex-1 border-b border-cyan-500/30 pb-2 mb-2">
-            <div class="flex justify-between items-center panel-title mb-2">
-              <h4>PSA核心参数</h4>
-              <dv-decoration3 style="width: 120px; height: 30px" />
+          <div class="flex-1 border-b border-cyan-500/30 pb-1 mb-1 min-h-0 flex flex-col">
+            <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0">
+              <h4 class="text-sm">PSA核心参数</h4>
+              <dv-decoration3 style="width: 100px; height: 20px" />
             </div>
 
-            <div class="space-y-3 overflow-y-auto overflow-x-hidden flex-grow">
+            <div class="space-y-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
               <DataRow
                 v-for="item in psaData"
                 :key="item.modelName"
                 :label="item.modelName"
                 :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
+                :compact="true"
               />
             </div>
           </div>
 
           <!-- 空气处理参数 -->
-          <div class="flex-1 border-b border-cyan-500/30 pb-2 mb-2">
-            <div class="flex justify-between items-center panel-title mb-2">
-              <h4>空气处理撬参数</h4>
-              <dv-decoration3 style="width: 120px; height: 30px" />
+          <div class="flex-1 border-b border-cyan-500/30 pb-1 mb-1 min-h-0 flex flex-col">
+            <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0">
+              <h4 class="text-sm">空气处理撬参数</h4>
+              <dv-decoration3 style="width: 100px; height: 20px" />
             </div>
-            <div class="space-y-3 overflow-y-auto overflow-x-hidden flex-grow">
+            <div class="space-y-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
               <DataRow
                 v-for="item in airTreatmentData"
                 :key="item.modelName"
                 :label="item.modelName"
                 :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
+                :compact="true"
               />
             </div>
           </div>
 
           <!-- 1800中压机参数 -->
-          <div class="flex-1">
-            <div class="flex justify-between items-center panel-title mb-2">
-              <h4>中压机参数</h4>
-              <dv-decoration3 style="width: 120px; height: 30px" />
+          <div class="flex-1 min-h-0 flex flex-col">
+            <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0">
+              <h4 class="text-sm">中压机参数</h4>
+              <dv-decoration3 style="width: 100px; height: 20px" />
             </div>
 
-            <div class="space-y-5 overflow-y-auto overflow-x-hidden flex-grow">
+            <div class="space-y-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
               <DataRow
                 v-for="item in mediumPressureData"
                 :key="item.modelName"
                 :label="item.modelName"
                 :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
+                :compact="true"
               />
             </div>
           </div>
         </div>
       </div>
 
-      <div class="col-span-6 space-y-4">
-        <div class="panel relative overflow-hidden">
-          <div class="relative h-[450px] flex items-center justify-center">
+      <div class="col-span-6 flex flex-col gap-3 min-h-0">
+        <div class="panel relative overflow-hidden flex-1 min-h-0">
+          <div class="relative h-full flex items-center justify-center">
             <ModelViewer />
           </div>
         </div>
 
         <!-- 1050空压机参数 -->
-        <div class="panel">
-          <div class="mb-2">
+        <div class="panel flex-shrink-0">
+          <div class="mb-1">
             <dv-decoration7>
-              <h3 class="text-cyan-300 text-lg font-bold px-1"> 空压机参数 </h3>
+              <h3 class="text-cyan-300 text-sm font-bold px-1"> 空压机参数 </h3>
             </dv-decoration7>
           </div>
-          <div class="grid grid-cols-5 gap-4">
-            <div v-for="(compressor, i) in compressorData" :key="i" class="space-y-2 text-center">
-              <div class="text-cyan-300 font-bold mb-2">{{ `空压机${i + 1}` }}</div>
-              <div class="text-sm" v-for="item in compressor" :key="item.modelName">
-                <div class="text-cyan-200">{{ item.modelName }}</div>
+          <div class="grid grid-cols-5 gap-2">
+            <div v-for="(compressor, i) in compressorData" :key="i" class="space-y-0.5 text-center">
+              <div class="text-cyan-300 font-bold text-xs mb-1">{{ `空压机${i + 1}` }}</div>
+              <div class="text-xs" v-for="item in compressor" :key="item.modelName">
+                <div class="text-cyan-200 text-xs">{{ item.modelName }}</div>
                 <div
                   v-if="item.modelName.includes('运行状态') || item.modelName.includes('加载状态')"
-                  class="text-white font-mono flex items-center justify-center"
+                  class="text-white font-mono flex items-center justify-center text-xs"
                 >
                   <span
-                    :class="['w-3 h-3 rounded-full inline-block mr-2', getStatusClass(item.value)]"
+                    :class="['w-2 h-2 rounded-full inline-block mr-1', getStatusClass(item.value)]"
                   ></span>
                   {{ getStatusText(item.value) }}
                 </div>
-                <div v-else class="text-white font-mono">
+                <div v-else class="text-white font-mono text-xs">
                   {{ formatValue(item.value, getUnitFromModelName(item.modelName)) }}
                 </div>
               </div>
@@ -142,13 +145,15 @@
       </div>
 
       <!-- Right panel -->
-      <div class="col-span-3">
-        <div class="panel h-full">
-          <div class="flex items-center justify-between mb-4 border-b border-cyan-500/30 pb-2">
-            <h3 class="text-cyan-300 text-lg font-bold">液驱压缩机参数</h3>
-            <dv-decoration8 :reverse="true" style="width: 110px; height: 20px" />
+      <div class="col-span-3 min-h-0">
+        <div class="panel h-full flex flex-col">
+          <div
+            class="flex items-center justify-between mb-2 border-b border-cyan-500/30 pb-1 flex-shrink-0"
+          >
+            <h3 class="text-cyan-300 text-sm font-bold">液驱压缩机参数</h3>
+            <dv-decoration8 :reverse="true" style="width: 100px; height: 16px" />
           </div>
-          <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
+          <div class="space-y-1 text-xs overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
               v-for="item in liquidDrivenData"
               :key="item.modelName"
@@ -164,7 +169,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, onUnmounted } from 'vue'
 import DataRow from './data-row.vue'
 import ModelViewer from './ModelViewer.vue'
 import { IotDeviceApi } from '@/api/pms/device'
@@ -256,20 +261,11 @@ const handleFullscreenChange = () => {
   }
 }
 
-onMounted(() => {
-  document.addEventListener('fullscreenchange', handleFullscreenChange)
-})
-
-// 添加 onUnmounted 来清理事件监听器
-onUnmounted(() => {
-  document.removeEventListener('fullscreenchange', handleFullscreenChange)
-})
-
 const getStatusText = (statusValue: string | number) => {
   return statusValue === '1' || statusValue === 1 || statusValue === 'true' ? '运行中' : '停止'
 }
 
-onMounted(async () => {
+const fetchData = async () => {
   try {
     const res = await IotDeviceApi.getDeviceSetParams(route.query.deviceSetId)
 
@@ -299,6 +295,16 @@ onMounted(async () => {
   } catch (error) {
     console.error('获取设备参数失败:', error)
   }
+}
+
+onMounted(async () => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  await fetchData()
+})
+
+// 添加 onUnmounted 来清理事件监听器
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
 })
 </script>
 
@@ -349,11 +355,12 @@ onMounted(async () => {
   background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.8), rgba(30, 58, 138, 0.5));
   backdrop-filter: blur(4px);
   border: 2px solid rgba(6, 182, 212, 0.4);
-  padding: 1rem;
+  padding: 0.75rem;
   border-radius: 0.5rem;
   box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
   transition: all 0.3s;
   min-height: 0; /* 允许flex项目收缩到其内容以下 */
+  overflow: hidden;
 }
 
 .panel:hover {
@@ -362,10 +369,10 @@ onMounted(async () => {
 
 .panel-title {
   color: rgb(103, 232, 249);
-  font-size: 1.125rem;
+  font-size: 0.875rem;
   font-weight: bold;
   border-bottom: 1px solid rgba(6, 182, 212, 0.3);
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.25rem;
   flex-shrink: 0;
 }
 
@@ -423,20 +430,12 @@ onMounted(async () => {
   height: 100vh !important;
   width: 100vw !important;
   margin: 0 !important;
-  padding: 0 !important;
-  padding-top: 20px !important;
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-  padding-bottom: 150px !important;
+  padding: 1rem !important;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
-  overflow: auto !important;
-  overflow-x: hidden !important;
+  overflow: hidden !important;
   max-width: 100vw !important;
   max-height: 100vh !important;
-
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
 }
 </style>