aa

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

@@ -2,7 +2,7 @@
   <div
     style="border-radius: 5px"
     :class="[
-      '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',
+      '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 gap-5',
       compact ? 'py-1' : 'py-2'
     ]"
   >

src/views/pms/monitor/kanban.vue

@@ -54,30 +54,28 @@
         <!-- PSA核心参数 -->
 
         <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
+            class="flex bg-[#08092d] justify-between items-center panel-title mb-1 flex-shrink-0 pl-5"
+          >
+            <h4 class="text-sm pt-1">PSA核心参数</h4>
+          </div>
+          <div class="space-y-1 panel 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 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>
+          <div class="flex justify-between items-center panel-title mb-1 flex-shrink-0 pl-5">
+            <h4 class="text-sm pt-1">空气处理撬参数</h4>
           </div>
-          <div class="space-y-1 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
+          <div class="space-y-1 panel overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
               v-for="item in airTreatmentData"
               :key="item.modelName"
@@ -89,11 +87,11 @@
         </div>
 
         <!-- 1800中压机参数 -->
-        <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>
+        <div class="flex-1 min-h-0 flex flex-col">
+          <div class="flex justify-between items-center panel-title flex-shrink-0 pl-5">
+            <h4 class="text-sm pt-1">中压机参数</h4>
           </div>
-          <div class="space-y-1 px-6 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
+          <div class="space-y-1 panel px-6 overflow-y-auto overflow-x-hidden flex-1 min-h-0">
             <DataRow
               v-for="item in mediumPressureData"
               :key="item.modelName"
@@ -113,13 +111,11 @@
         </div>
 
         <!-- 1050空压机参数 -->
-        <div class="panel flex-shrink-0">
-          <div class="mb-1">
-            <dv-decoration7>
-              <h3 class="text-cyan-300 text-sm font-bold px-1"> 空压机参数 </h3>
-            </dv-decoration7>
+        <div class="flex-shrink-0">
+          <div class="flex justify-between items-center panel-title flex-shrink-0 pl-6">
+            <h4 class="text-sm pt-1">空压机参数</h4>
           </div>
-          <div class="grid grid-cols-5 gap-2">
+          <div class="grid panel 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">
@@ -144,15 +140,14 @@
 
       <!-- Right panel -->
       <div class="col-span-3 min-h-0">
-        <div class="panel h-full flex flex-col">
+        <div class="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"
+            class="flex panel-title items-center justify-between border-b border-cyan-500/30 pb-1 flex-shrink-0 pl-5"
           >
-            <h3 class="text-cyan-300 text-sm font-bold">液驱压缩机参数</h3>
-            <dv-decoration8 :reverse="true" style="width: 100px; height: 16px" />
+            <h3 class="text-cyan-300 text-sm font-bold pt-1">液驱压缩机参数</h3>
           </div>
           <div
-            class="space-y-1 px-6 text-[16px] text-[#00d9df] overflow-y-auto overflow-x-hidden flex-1 min-h-0"
+            class="space-y-1 panel text-[15px] px-3 text-[#00d9df] overflow-y-auto overflow-x-hidden flex-1 min-h-0"
           >
             <DataRow
               v-for="item in liquidDrivenData"
@@ -354,7 +349,7 @@ onUnmounted(() => {
 .panel {
   border: 1px solid #30459c;
   padding: 0.75rem;
-
+  border-top: none;
   transition: all 0.3s;
   min-height: 0; /* 允许flex项目收缩到其内容以下 */
   overflow: hidden;
@@ -366,6 +361,8 @@ onUnmounted(() => {
   font-weight: bold;
 
   padding-bottom: 0.25rem;
+  background-image: url('../../../assets/imgs/border-title.png');
+  background-size: cover;
   flex-shrink: 0;
 }