ss

src/views/pms/monitor/kanban.vue

@@ -15,14 +15,12 @@
 
     <!-- Header -->
     <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 relative"
-      >
-        <h1 class="text-xl font-bold text-cyan-300 flex-6 tracking-wider relative z-10">
+      <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 relative z-10">
+        <div class="flex flex-4 items-center gap-8 text-sm">
           <div
             style="border: 0.5px solid #085b77"
             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"
@@ -51,66 +49,56 @@
     </div>
 
     <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 min-h-0">
-        <div class="panel h-full flex flex-col">
-          <!-- PSA核心参数 -->
-          <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 mb-1 flex-shrink-0 relative">
-              <h4
-                class="text-sm text-cyan-300 absolute left-0 top-0 w-full h-6 flex items-center justify-center z-10"
-              >
-                PSA核心参数
-              </h4>
-              <div class="absolute inset-0 panel-title"></div>
-            </div>
-
-            <div class="panel-bottom"></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>
+      <!-- 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="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-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 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>
 
-          <!-- 1800中压机参数 -->
-          <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="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">空气处理撬参数</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 airTreatmentData"
+              :key="item.modelName"
+              :label="item.modelName"
+              :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
+              :compact="true"
+            />
+          </div>
+        </div>
 
-            <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>
+        <!-- 1800中压机参数 -->
+        <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">中压机参数</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 mediumPressureData"
+              :key="item.modelName"
+              :label="item.modelName"
+              :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
+              :compact="true"
+            />
           </div>
         </div>
       </div>
@@ -335,6 +323,13 @@ onUnmounted(() => {
   }
 }
 
+.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;
   width: 100%;
@@ -422,7 +417,7 @@ onUnmounted(() => {
 
 .btn-red:hover {
   background: rgb(239, 68, 68);
-  box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
+  box-shadow: 0 0 20px rgba(124, 10, 10, 0.8);
   transform: translateY(-1px);
 }
 
@@ -439,30 +434,4 @@ onUnmounted(() => {
   max-width: 100vw !important;
   max-height: 100vh !important;
 }
-
-.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;
-  background-image: url('@/assets/imgs/border-title.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 20px; /* 固定高度以适配图片 */
-  margin-bottom: 0.5rem;
-}
-
-/* 底部兜底图 */
-.panel-bottom {
-  background-image: url('@/assets/imgs/bottom.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 10px;
-  width: 100%;
-  margin-top: 0.5rem;
-}
 </style>