增加边框

src/views/pms/device/completeKanban/index.vue

@@ -42,144 +42,143 @@
       </div>
     </div>
 
-    <!-- <div class="flex justify-center mt--8 mb-4 ml-26">
-      <dv-decoration5 :dur="2" style="width: 600px; height: 40px" />
-    </div> -->
-
-    <!-- Main content -->
-    <div class="relative z-10 grid grid-cols-12 gap-4">
-      <!-- Left panels -->
-      <div class="col-span-3 space-y-4">
-        <!-- PSA核心参数 -->
-        <div class="panel">
-          <div class="flex justify-between items-center panel-title">
-            <h4>PSA核心参数</h4>
-            <dv-decoration3 style="width: 120px; height: 30px" />
-          </div>
+    <dv-border-box1 class="relative z-10">
+      <div class="relative z-10 grid grid-cols-12 gap-4 mt-5 p-6">
+        <!-- Left panels -->
+        <div class="col-span-3 space-y-4">
+          <!-- PSA核心参数 -->
+          <div class="panel">
+            <div class="flex justify-between items-center panel-title">
+              <h4>PSA核心参数</h4>
+              <dv-decoration3 style="width: 120px; height: 30px" />
+            </div>
 
-          <div class="space-y-3">
-            <!-- <DataRow label="氧气纯度" value="99.66 %" button="启停按钮" button-color="green" /> -->
-            <DataRow label="氧气压力" value="0.54 MPa" />
-            <DataRow label="氧气瞬时流量" value="3002.10 Nm³" />
-            <DataRow label="氧气累计流量" value="219.6217 万Nm³" />
-            <div class="flex items-center justify-between mt-4">
-              <span class="text-cyan-200">运行状态</span>
-              <div class="status-indicator status-active"></div>
+            <div class="space-y-3">
+              <!-- <DataRow label="氧气纯度" value="99.66 %" button="启停按钮" button-color="green" /> -->
+              <DataRow label="氧气压力" value="0.54 MPa" />
+              <DataRow label="氧气瞬时流量" value="3002.10 Nm³" />
+              <DataRow label="氧气累计流量" value="219.6217 万Nm³" />
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">运行状态</span>
+                <div class="status-indicator status-active"></div>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 空气处理参数 -->
-        <div class="panel">
-          <div class="flex justify-between items-center panel-title">
-            <h4>空气处理参数</h4>
-            <dv-decoration3 style="width: 120px; height: 30px" />
-          </div>
-          <div class="space-y-3">
-            <!-- <DataRow label="出口温度" value="6.7 ℃" button="启停按钮" button-color="green" /> -->
-            <DataRow label="出口压力" value="0.6 MPa" />
-            <div class="flex items-center justify-between mt-4">
-              <span class="text-cyan-200">冷干机运行状态</span>
-              <div class="status-indicator status-inactive"></div>
+          <!-- 空气处理参数 -->
+          <div class="panel">
+            <div class="flex justify-between items-center panel-title">
+              <h4>空气处理参数</h4>
+              <dv-decoration3 style="width: 120px; height: 30px" />
             </div>
+            <div class="space-y-3">
+              <!-- <DataRow label="出口温度" value="6.7 ℃" button="启停按钮" button-color="green" /> -->
+              <DataRow label="出口压力" value="0.6 MPa" />
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">冷干机运行状态</span>
+                <div class="status-indicator status-inactive"></div>
+              </div>
 
-            <div class="flex items-center justify-between mt-4">
-              <span class="text-cyan-200">风机运行状态</span>
-              <div class="status-indicator status-active"></div>
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">风机运行状态</span>
+                <div class="status-indicator status-active"></div>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 1800中压机参数 -->
-        <div class="panel">
-          <div class="flex justify-between items-center panel-title">
-            <h4>1800中压机参数</h4>
-            <dv-decoration3 style="width: 120px; height: 30px" />
-          </div>
+          <!-- 1800中压机参数 -->
+          <div class="panel">
+            <div class="flex justify-between items-center panel-title">
+              <h4>1800中压机参数</h4>
+              <dv-decoration3 style="width: 120px; height: 30px" />
+            </div>
 
-          <div class="space-y-3">
-            <!-- <DataRow label="排气压力" value="3.47 MPa" button="启停按钮" button-color="green" /> -->
-            <DataRow label="排气温度" value="107.0 ℃" />
-            <DataRow label="总用电能" value="247406.4 kWh" />
-            <div class="flex items-center justify-between mt-4">
-              <span class="text-cyan-200">运行状态</span>
-              <div class="status-indicator status-active"></div>
+            <div class="space-y-3">
+              <!-- <DataRow label="排气压力" value="3.47 MPa" button="启停按钮" button-color="green" /> -->
+              <DataRow label="排气温度" value="107.0 ℃" />
+              <DataRow label="总用电能" value="247406.4 kWh" />
+              <div class="flex items-center justify-between mt-4">
+                <span class="text-cyan-200">运行状态</span>
+                <div class="status-indicator status-active"></div>
+              </div>
             </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">
-            <ModelViewer />
-            <!-- <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></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">
+              <ModelViewer />
+              <!-- <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div> -->
+            </div>
           </div>
-        </div>
 
-        <!-- 1050空压机参数 -->
-        <div class="panel">
-          <div class="mb-2">
-            <dv-decoration7>
-              <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
-            </dv-decoration7>
-          </div>
-          <!-- <h3 class="panel-title">1050空压机参数</h3> -->
-          <div class="grid grid-cols-5 gap-4">
-            <div v-for="(unit, i) in compressorUnits" :key="i" class="space-y-2 text-center">
-              <div class="text-cyan-300 font-bold mb-2">{{ unit.name }}</div>
-              <div class="text-sm">
-                <div class="text-cyan-200">排气压力</div>
-                <div class="text-white font-mono">{{ unit.pressure }}</div>
-              </div>
-              <div class="text-sm">
-                <div class="text-cyan-200">排气温度</div>
-                <div class="text-white font-mono">{{ unit.temp }}</div>
-              </div>
-              <div class="text-sm">
-                <div class="text-cyan-200">总用电能</div>
-                <div class="text-white font-mono text-xs">{{ unit.energy }}</div>
+          <!-- 1050空压机参数 -->
+          <div class="panel">
+            <div class="mb-2">
+              <dv-decoration7>
+                <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
+              </dv-decoration7>
+            </div>
+            <!-- <h3 class="panel-title">1050空压机参数</h3> -->
+            <div class="grid grid-cols-5 gap-4">
+              <div v-for="(unit, i) in compressorUnits" :key="i" class="space-y-2 text-center">
+                <div class="text-cyan-300 font-bold mb-2">{{ unit.name }}</div>
+                <div class="text-sm">
+                  <div class="text-cyan-200">排气压力</div>
+                  <div class="text-white font-mono">{{ unit.pressure }}</div>
+                </div>
+                <div class="text-sm">
+                  <div class="text-cyan-200">排气温度</div>
+                  <div class="text-white font-mono">{{ unit.temp }}</div>
+                </div>
+                <div class="text-sm">
+                  <div class="text-cyan-200">总用电能</div>
+                  <div class="text-white font-mono text-xs">{{ unit.energy }}</div>
+                </div>
+                <div
+                  :class="[
+                    'w-8 h-8 mx-auto rounded-full animate-pulse',
+                    unit.status === 'active' ? 'status-active' : 'status-inactive'
+                  ]"
+                ></div>
               </div>
-              <div
-                :class="[
-                  'w-8 h-8 mx-auto rounded-full animate-pulse',
-                  unit.status === 'active' ? 'status-active' : 'status-inactive'
-                ]"
-              ></div>
             </div>
           </div>
         </div>
-      </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: 130px; height: 30px" />
-          </div>
-          <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
-            <DataRow label="入口压力" value="3.30 MPa" :compact="true" />
-            <DataRow label="一级入口压力" value="3.32 MPa" :compact="true" />
-            <DataRow label="A级一级出口温度" value="104.5 ℃" :compact="true" />
-            <DataRow label="A级一级冷却后温度" value="16.6 ℃" :compact="true" />
-            <DataRow label="A级二级入口压力" value="8.40 MPa" :compact="true" />
-            <DataRow label="A级二级出口温度" value="134.3 ℃" :compact="true" />
-            <DataRow label="A级二级冷却后温度" value="27.6 ℃" :compact="true" />
-            <DataRow label="A级三级入口压力" value="22.57 MPa" :compact="true" />
-            <DataRow label="B级一级出口温度" value="109.6 ℃" :compact="true" />
-            <DataRow label="B级一级冷却后温度" value="16.5 ℃" :compact="true" />
-            <DataRow label="B级二级入口压力" value="8.23 MPa" :compact="true" />
-            <DataRow label="B级二级出口温度" value="130.0 ℃" :compact="true" />
-            <DataRow label="B级二级冷却后温度" value="21.5 ℃" :compact="true" />
-            <DataRow label="B级三级入口压力" value="22.46 MPa" :compact="true" />
-            <DataRow label="三级出口温度" value="83.6 ℃" :compact="true" />
-            <DataRow label="总出口温度" value="26.1 ℃" :compact="true" />
-            <DataRow label="总出口压力" value="40.82 MPa" :compact="true" />
+        <!-- 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: 130px; height: 30px" />
+            </div>
+            <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
+              <DataRow label="入口压力" value="3.30 MPa" :compact="true" />
+              <DataRow label="一级入口压力" value="3.32 MPa" :compact="true" />
+              <DataRow label="A级一级出口温度" value="104.5 ℃" :compact="true" />
+              <DataRow label="A级一级冷却后温度" value="16.6 ℃" :compact="true" />
+              <DataRow label="A级二级入口压力" value="8.40 MPa" :compact="true" />
+              <DataRow label="A级二级出口温度" value="134.3 ℃" :compact="true" />
+              <DataRow label="A级二级冷却后温度" value="27.6 ℃" :compact="true" />
+              <DataRow label="A级三级入口压力" value="22.57 MPa" :compact="true" />
+              <DataRow label="B级一级出口温度" value="109.6 ℃" :compact="true" />
+              <DataRow label="B级一级冷却后温度" value="16.5 ℃" :compact="true" />
+              <DataRow label="B级二级入口压力" value="8.23 MPa" :compact="true" />
+              <DataRow label="B级二级出口温度" value="130.0 ℃" :compact="true" />
+              <DataRow label="B级二级冷却后温度" value="21.5 ℃" :compact="true" />
+              <DataRow label="B级三级入口压力" value="22.46 MPa" :compact="true" />
+              <DataRow label="三级出口温度" value="83.6 ℃" :compact="true" />
+              <DataRow label="总出口温度" value="26.1 ℃" :compact="true" />
+              <DataRow label="总出口压力" value="40.82 MPa" :compact="true" />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </dv-border-box1>
+
+    <!-- Main content -->
   </div>
 </template>