1 机械臂调整

zhmes-agecal-web/src/views/screen/components/AgingCabinetBoard.vue

 <template>
   <div class="app-container">
+    <!-- 外层容器，添加边框样式 -->
+    <div class="cabinet-board-container">
+      <!-- 标题区域 -->
+      <div class="board-header">
+        <div class="board-title">
+          <div class="title-text">老化柜看板</div>
+          <div class="title-line"></div>
+        </div>
+      </div>
+
       <!-- 右上角的图例提示 -->
       <div class="legend">
         <div class="legend-item">
@@ -13,7 +23,7 @@
         </div>
       </div>
 
-    <div style="padding: 20px;">
+      <div class="cabinet-content">
         <!-- 渲染每一行 -->
         <el-row :gutter="20" v-for="(row, rowIndex) in cabinetRows" :key="rowIndex">
           <!-- 每行渲染6个卡片 -->
@@ -31,8 +41,8 @@
               <el-card
                 :class="statusMap[item.deviceStatus]"
                 style="
-            width: 150px;
-            height: 150px;
+              width: 100px;
+              height: 100px;
               margin: 0 auto;
               display: flex;
               align-items: center;
@@ -48,11 +58,11 @@
         </el-row>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
-
-import {getAgingCabinetAndPowerCheck} from "@/api/testScheduledTasks/testTasks";
+import { getAgingCabinetAndPowerCheck } from "@/api/testScheduledTasks/testTasks";
 export default {
   name: "AgingCabinetBoard",
   data() {
@@ -95,7 +105,7 @@ export default {
         { id: 34, deviceStatus: '0' },
         { id: 35, deviceStatus: '0' },
         { id: 36, deviceStatus: '0' },
-        // //...共36个
+        // 共36个
       ],
       // 状态对应的颜色类名
       statusMap: {
@@ -124,7 +134,7 @@ export default {
     handleCardClick(item) {
       // 触发事件传递 cabinetId 给父组件
       // 3 是 AgingLayer 组件的索引
-      this.$emit('cabinet-click', item,3);
+      this.$emit('cabinet-click', item, 3);
     },
     getTooltipContent(item) {
       switch (item.deviceStatus) {
@@ -140,17 +150,55 @@ export default {
     testAgingCabinetAndPowerCheck() {
       getAgingCabinetAndPowerCheck().then(response => {
         this.cabinets = response;
-        }
-      );
+      });
     }
   }
 };
 </script>
 <style>
-.aging{
-  text-align: center;
-  font-size: 40px;
+/* 外层容器样式 */
+.cabinet-board-container {
+  padding: 20px;
+  background: rgba(4, 18, 57, 0.7);
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 153, 255, 0.2);
+  border: 1px solid rgba(64, 158, 255, 0.3);
+}
+
+/* 标题区域样式 */
+.board-header {
+  margin-bottom: 25px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
+}
+
+.board-title {
+  display: flex;
+  flex-direction: column;
 }
+
+.title-text {
+  font-size: 22px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 1px;
+  text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
+}
+
+.title-line {
+  height: 3px;
+  width: 100px;
+  background: linear-gradient(to right, #409EFF, transparent);
+  margin-top: 8px;
+  border-radius: 2px;
+}
+
+/* 内容区域样式 */
+.cabinet-content {
+  padding: 20px;
+}
+
+/* 状态样式保持不变 */
 .default {
   background-color: #f0f0f0;
 }
@@ -163,30 +211,29 @@ export default {
   color: white;
 }
 
-/* 可选：悬停效果 */
+/* 卡片悬停效果 */
 .el-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
   transition: all 0.2s ease;
 }
-/* 添加更多状态样式 */
 
+/* 图例样式调整 */
 .legend {
-  position: fixed; /* 关键：固定定位 */
-  top: 110px;
-  right: 60px;
+  position: absolute; /* 修改为绝对定位，相对于外层容器 */
+  top: 50px; /* 调整与顶部距离 */
+  right: 40px; /* 调整与右侧距离 */
   display: flex;
   gap: 15px;
-  background-color: #fff;
+  background-color: rgba(4, 18, 57, 0.8); /* 半透明背景，与整体风格统一 */
   padding: 10px 15px;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 9999; /* 确保在最上层 */
+  z-index: 10; /* 确保在内容上层 */
   font-size: 14px;
-  color: #333;
+  color: #e0f0ff; /* 浅色文字，适应深色背景 */
 }
 
-
 .legend-item {
   display: flex;
   align-items: center;
@@ -211,4 +258,12 @@ export default {
 .legend-color.gray {
   background-color: #f0f0f0;
 }
+
+/* 调整app-container样式，作为外层容器 */
+.app-container {
+  position: relative;
+  background-color: #030b2a; /* 整体背景色，与其他界面保持一致 */
+  min-height: 100vh; /* 确保占满全屏高度 */
+  padding: 0;
+}
 </style>

zhmes-agecal-web/src/views/screen/components/AgingLayer.vue

 <template>
   <div class="screen-container">
+    <!-- 外层容器 - 添加边框 -->
+    <div class="aging-layer-container">
+      <!-- 头部标题区域 -->
+      <div class="tray-header">
+        <div class="tray-title">
+          <div class="title-text">{{ modbusDeviceData.id }}号柜</div>
+          <div class="title-line"></div>
+        </div>
+      </div>
+
+      <!-- 整体内容容器 -->
+      <div class="content-container">
         <!-- 返回按钮 -->
         <div class="back-button" @click="goBack">
           <i class="el-icon-back"></i> 返回老化柜看板
         </div>
 
-    <!-- 整体容器 -->
-    <div class="content-container">
         <!-- 柜体容器 -->
         <div class="cabinet-body">
-        <!-- 标题 -->
-        <div class="title" ref="title">{{ modbusDeviceData.id }}号柜</div>
-
           <div class="cabinet-and-lines">
             <!-- 柜体 -->
             <div class="cabinet" ref="cabinetContainer">
@@ -42,7 +49,7 @@
           <div class="placeholder">
             <div class="tray-container">
               <!-- 托盘信息展示区域 -->
-            <div class="tray-header">
+              <div class="tray-header-inner">
                 <span class="tray-label">托盘</span>
                 <span class="tray-id">TP-{{ trayInfo.id || '--' }}</span>
               </div>
@@ -87,11 +94,11 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { queryByDepartmentId } from "@/api/storey/storey";
-
 import { testPowerOutage } from "@/api/testScheduledTasks/testTasks";
 export default {
   name: "AgingLayer",
@@ -242,7 +249,6 @@ export default {
     powerOn() {
       this.$message.success("上电操作已执行");
       testPowerOutage().then(response => {
-
         if(response.code === 200) {
           this.$message.success("断电操作已执行");
         }
@@ -286,6 +292,48 @@ export default {
 </script>
 
 <style scoped>
+/* 外层容器样式 - 统一边框风格 */
+.aging-layer-container {
+  width: 100%;
+  padding: 20px;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+  background: rgba(4, 18, 57, 0.7);
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 153, 255, 0.2);
+  border: 1px solid rgba(64, 158, 255, 0.3);
+}
+
+/* 头部标题样式 - 与托盘信息管理界面一致 */
+.tray-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
+}
+
+.tray-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.title-text {
+  font-size: 22px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 1px;
+  text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
+}
+
+.title-line {
+  height: 3px;
+  width: 100px;
+  background: linear-gradient(to right, #409EFF, transparent);
+  margin-top: 8px;
+  border-radius: 2px;
+}
+
 /* 状态背景色 */
 .status-idle {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.2));
@@ -341,22 +389,20 @@ export default {
   color: white;
   font-family: 'Arial', sans-serif;
   position: relative;
-  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
   overflow: hidden;
   background: radial-gradient(circle at center, #041740 0%, #030b2a 70%);
 }
 
 .content-container {
+  position: relative; /* 使返回按钮相对于此容器定位 */
   display: flex;
   width: 100%;
   max-width: 1600px;
   justify-content: space-between;
   align-items: flex-start;
-  padding: 0 50px;
 }
 
 .cabinet-body {
@@ -366,35 +412,8 @@ export default {
   position: relative;
 }
 
-.title {
-  font-size: 24px;
-  font-weight: bold;
-  margin-right: 40px;
-  padding: 10px 30px;
-  border-radius: 8px;
-  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.2));
-  border: 1px solid rgba(100, 180, 255, 0.6);
-  box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.6),
-    inset 0 0 12px rgba(100, 200, 255, 0.4);
-  height: 60px;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  z-index: 20;
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-.title:hover {
-  box-shadow:
-    0 0 15px rgba(100, 200, 255, 0.6),
-    inset 0 0 10px rgba(100, 220, 255, 0.5);
-}
-
 .cabinet-and-lines {
   position: relative;
-  z-index: 10;
 }
 
 .cabinet {
@@ -481,7 +500,8 @@ export default {
   position: relative;
 }
 
-.tray-header {
+/* 区分内部托盘标题和外部容器标题 */
+.tray-header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -617,17 +637,25 @@ export default {
 }
 
 .back-button {
+  position: absolute;
+  top: -90px; /* 调整顶部距离 */
+  right: 15px; /* 调整右侧距离 */
   cursor: pointer;
-  margin-bottom: 20px;
-  width: 145px;
+  padding: 8px 15px;
+  background: rgba(0, 30, 80, 0.3);
+  border-radius: 6px;
+  border: 1px solid rgba(100, 180, 255, 0.6);
   color: #409EFF;
   display: inline-flex;
   align-items: center;
   transition: all 0.3s;
+  font-size: 14px;
+  z-index: 100; /* 确保在其他内容上方 */
 }
 
 .back-button:hover {
   color: #66b1ff;
   transform: translateX(-5px);
 }
+
 </style>

zhmes-agecal-web/src/views/screen/index.vue

@@ -35,6 +35,11 @@
 
     <!-- 内容展示区域 -->
     <div class="content-area">
+      <!-- 左侧机械臂面板 -->
+      <div class="robotic-scroll-container">
+        <RoboticArm class="robotic-arm-panel" />
+      </div>
+
       <div class="scroll-container">
         <transition name="fade" mode="out-in">
 <!--          <component :is="currentComponent" />-->
@@ -59,13 +64,16 @@ import AgingLayer from './components/AgingLayer'
 import RealTimeData from './components/RealTimeData'
 import TrayBinding from "@/views/screen/components/TrayBinding";
 import TrayInformation from "@/views/screen/components/TrayInformation";
+
+import RoboticArm from './components/RoboticArm.vue';
 export default {
   components: {
     AgingCabinetBoard,
     AgingLayer,
     RealTimeData,
     TrayBinding,
-    TrayInformation
+    TrayInformation,
+    RoboticArm
   },
   data() {
     return {
@@ -286,15 +294,44 @@ export default {
 .content-area {
   padding: 20px 40px;
   flex: 1;
-  min-height: calc(100vh - 150px); /* 根据实际布局调整 */
+  min-height: calc(100vh - 150px);
   overflow-y: auto;
+  display: flex; /* 添加flex布局 */
+  gap: 20px; /* 添加间距 */
 }
-.scroll-container {
-  max-height: calc(100vh - 180px);
+
+/* 机械臂面板样式 */
+.robotic-arm-panel {
+  overflow-y: auto;
+  flex: 0 0 500px; /* 固定宽度 */
+  min-height: calc(100vh - 150px);
+}
+
+.robotic-scroll-container {
+  max-height: calc(100vh - 150px);
+  width: 500px;
   overflow-y: auto;
   padding: 0 10px;
 }
 
+
+.robotic-scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.robotic-scroll-container::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+
+.scroll-container {
+  flex: 1;
+  max-height: calc(100vh - 150px);
+  overflow-y: auto;
+  padding: 0 0px;
+}
+
 .scroll-container::-webkit-scrollbar {
   width: 6px;
 }