ss

src/views/pms/monitor/data-row.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    style="border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 5px"
+    style="border-radius: 5px"
     :class="[
-      'flex items-center justify-between border-b border-cyan-500/20 hover:bg-cyan-500/10 transition-colors px-2 -mx-2 rounded',
+      'flex text-[#00d9df] items-center justify-between border-b border-cyan-500/20 hover:bg-cyan-500/10 transition-colors px-2 -mx-2 rounded',
       compact ? 'py-1' : 'py-2'
     ]"
   >

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-4 relative h-screen overflow-hidden flex flex-col"
+    class="bg-[#08092d] text-cyan-100 p-4 relative h-screen overflow-hidden flex flex-col font-mono"
     :class="{ 'fullscreen-layout': isFullscreen }"
   >
     <!-- Animated background grid -->
@@ -52,27 +52,30 @@
       <!-- Left panels - 三个独立面板 -->
       <div class="col-span-3 min-h-0 flex flex-col gap-2">
         <!-- PSA核心参数 -->
-        <div class="panel 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">PSA核心参数</h4>
-            <dv-decoration3 style="width: 100px; height: 20px" />
-          </div>
-          <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 class="flex-1 min-h-0 flex flex-col">
+          <div>
+            <div
+              class="flex bg-[#08092d] justify-between items-center panel-title mb-1 flex-shrink-0"
+            >
+              <h4 class="text-sm">PSA核心参数</h4>
+            </div>
+            <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>
 
         <!-- 空气处理参数 -->
-        <div class="panel flex-1 min-h-0 flex flex-col">
+        <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-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
@@ -86,12 +89,11 @@
         </div>
 
         <!-- 1800中压机参数 -->
-        <div class="panel flex-1 min-h-0 flex flex-col">
+        <div class="flex-1 panel 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-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
+          <div class="space-y-1 px-6 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
               v-for="item in mediumPressureData"
               :key="item.modelName"
@@ -149,7 +151,9 @@
             <h3 class="text-cyan-300 text-sm font-bold">液驱压缩机参数</h3>
             <dv-decoration8 :reverse="true" style="width: 100px; height: 16px" />
           </div>
-          <div class="space-y-1 text-xs overflow-y-auto overflow-x-hidden flex-1 min-h-0">
+          <div
+            class="space-y-1 px-6 text-[16px] text-[#00d9df] overflow-y-auto overflow-x-hidden flex-1 min-h-0"
+          >
             <DataRow
               v-for="item in liquidDrivenData"
               :key="item.modelName"
@@ -323,12 +327,12 @@ onUnmounted(() => {
   }
 }
 
-.grid-pattern {
+/* .grid-pattern {
   background-image: linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),
     linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);
   background-size: 50px 50px;
   animation: gridMove 20s linear infinite;
-}
+} */
 
 .scan-line {
   position: absolute;
@@ -348,26 +352,19 @@ onUnmounted(() => {
 }
 
 .panel {
-  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);
+  border: 1px solid #30459c;
   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 {
-  box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
-}
-
 .panel-title {
   color: rgb(103, 232, 249);
   font-size: 0.875rem;
   font-weight: bold;
-  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
+
   padding-bottom: 0.25rem;
   flex-shrink: 0;
 }

src/views/pms/monitor/kanban2.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,8 +14,8 @@
     </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">
+    <div class="relative z-10 flex-shrink-0">
+      <div class="flex items-center justify-center border-b-2 border-cyan-500/30 pb-2 gap-8">
         <h1 class="text-2xl font-bold text-cyan-300 flex-6 tracking-wider">
           {{ dataInfo.groupName }}
         </h1>
@@ -55,18 +55,18 @@
       </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 flex-1 min-h-0 p-2">
       <!-- Left panels - 固定高度 -->
-      <div class="col-span-3">
-        <div class="panel h-full flex flex-col">
+      <div class="col-span-3 flex flex-col min-h-0">
+        <div class="panel flex-1 flex flex-col min-h-0">
           <!-- 增压机参数 -->
-          <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">
+          <div class="flex-[3] border-b border-cyan-500/30 pb-1 mb-1 flex flex-col min-h-0">
+            <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0">
               <h4>增压机参数</h4>
-              <dv-decoration3 style="width: 120px; height: 30px" />
+              <dv-decoration3 style="width: 100px; height: 24px" />
             </div>
 
-            <div class="space-y-3 overflow-y-auto overflow-x-hidden flex-grow">
+            <div class="space-y-1 text-xs overflow-y-auto overflow-x-hidden flex-1 min-h-0">
               <DataRow
                 v-for="item in psaData"
                 :key="item.modelName"
@@ -77,12 +77,12 @@
           </div>
 
           <!-- 累计运行时间 -->
-          <div class="flex-1">
-            <div class="flex justify-between items-center panel-title mb-2">
+          <div class="flex-1 flex flex-col min-h-0">
+            <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0">
               <h4>累计运行时间</h4>
-              <dv-decoration3 style="width: 120px; height: 30px" />
+              <dv-decoration3 style="width: 100px; height: 24px" />
             </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"
@@ -94,32 +94,32 @@
         </div>
       </div>
 
-      <div class="col-span-6 space-y-4">
+      <div class="col-span-6 flex flex-col gap-2 min-h-0">
         <!-- 3D模型面板 -->
-        <div class="panel h-[60%] relative overflow-hidden">
+        <div class="panel flex-[6] relative overflow-hidden min-h-0">
           <div class="relative h-full flex items-center justify-center">
             <ModelViewer />
           </div>
         </div>
 
         <!-- 状态参数面板 -->
-        <div class="panel h-[40%]">
-          <div class="mb-2">
+        <div class="panel flex-[4] flex flex-col min-h-0">
+          <div class="mb-1 flex-shrink-0">
             <dv-decoration7>
-              <h3 class="text-cyan-300 text-lg font-bold px-1"> 状态参数 </h3>
+              <h3 class="text-cyan-300 text-base font-bold px-1"> 状态参数 </h3>
             </dv-decoration7>
           </div>
-          <div class="grid grid-cols-5 gap-4 h-[calc(100%-2rem)]">
+          <div class="grid grid-cols-5 gap-2 flex-1 min-h-0 overflow-hidden">
             <div
               v-for="(group, i) in compressorData"
               :key="i"
-              class="space-y-2 text-center h-full overflow-y-auto"
+              class="space-y-1 text-center overflow-y-auto"
             >
-              <div class="text-sm" v-for="item in group" :key="item.modelName">
+              <div class="text-xs" v-for="item in group" :key="item.modelName">
                 <div class="text-cyan-200">{{ item.modelName }}</div>
                 <div class="text-white font-mono flex items-center justify-center">
                   <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>
                   {{ getStatusDisplayText(item.modelName, item.value) }}
                 </div>
@@ -130,13 +130,15 @@
       </div>
 
       <!-- Right panel - 氮气参数和井口参数平分高度 -->
-      <div class="col-span-3">
-        <div class="panel h-[50%] mb-2">
-          <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 flex flex-col gap-2 min-h-0">
+        <div class="panel flex-1 flex flex-col min-h-0">
+          <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-base font-bold">氮气参数</h3>
+            <dv-decoration8 :reverse="true" style="width: 100px; height: 18px" />
           </div>
-          <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden h-[calc(100%-3rem)]">
+          <div class="space-y-1 text-sm overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
               v-for="item in liquidDrivenData"
               :key="item.modelName"
@@ -146,12 +148,14 @@
             />
           </div>
         </div>
-        <div class="panel h-[50%]">
-          <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="panel flex-1 flex flex-col min-h-0">
+          <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-base font-bold">井口参数</h3>
+            <dv-decoration8 :reverse="true" style="width: 100px; height: 18px" />
           </div>
-          <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden h-[calc(100%-3rem)]">
+          <div class="space-y-1 text-sm overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
               v-for="item in wellheadData"
               :key="item.modelName"
@@ -167,7 +171,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 './ModelViewer2.vue'
 import { IotDeviceApi } from '@/api/pms/device'
@@ -287,20 +291,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)
 
@@ -385,6 +380,16 @@ onMounted(async () => {
   } catch (error) {
     console.error('获取设备参数失败:', error)
   }
+}
+
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  fetchData()
+})
+
+// 添加 onUnmounted 来清理事件监听器
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
 })
 </script>
 
@@ -435,11 +440,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 {
@@ -509,21 +515,13 @@ 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+ */
 }
 
 /* 在现有样式中添加 */