1 机械臂调整

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

 <template>
   <div class="app-container">
-    <!-- 右上角的图例提示 -->
-    <div class="legend">
-      <div class="legend-item">
-        <span class="legend-color green"></span> 运行中
+    <!-- 外层容器，添加边框样式 -->
+    <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-item">
-        <span class="legend-color red"></span> 故障
-      </div>
-      <div class="legend-item">
-        <span class="legend-color gray"></span> 空闲
+
+      <!-- 右上角的图例提示 -->
+      <div class="legend">
+        <div class="legend-item">
+          <span class="legend-color green"></span> 运行中
+        </div>
+        <div class="legend-item">
+          <span class="legend-color red"></span> 故障
+        </div>
+        <div class="legend-item">
+          <span class="legend-color gray"></span> 空闲
+        </div>
       </div>
-    </div>
 
-    <div style="padding: 20px;">
-      <!-- 渲染每一行 -->
-      <el-row :gutter="20" v-for="(row, rowIndex) in cabinetRows" :key="rowIndex">
-        <!-- 每行渲染6个卡片 -->
-        <el-col
-          :span="4"
-          v-for="item in row"
-          :key="item.id"
-          style="margin-bottom: 20px; text-align: center;"
-        >
-          <!-- 使用 el-tooltip 来提供 hover 提示 -->
-          <el-tooltip
-            :content="getTooltipContent(item)"
-            placement="top"
+      <div class="cabinet-content">
+        <!-- 渲染每一行 -->
+        <el-row :gutter="20" v-for="(row, rowIndex) in cabinetRows" :key="rowIndex">
+          <!-- 每行渲染6个卡片 -->
+          <el-col
+            :span="4"
+            v-for="item in row"
+            :key="item.id"
+            style="margin-bottom: 20px; text-align: center;"
           >
-            <el-card
-              :class="statusMap[item.deviceStatus]"
-              style="
-            width: 150px;
-            height: 150px;
-            margin: 0 auto;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            font-weight: bold;"
-              @click.native="handleCardClick(item)"
+            <!-- 使用 el-tooltip 来提供 hover 提示 -->
+            <el-tooltip
+              :content="getTooltipContent(item)"
+              placement="top"
             >
-              {{ item.id +  "号柜" }}
-            </el-card>
-          </el-tooltip>
-        </el-col>
-      </el-row>
+              <el-card
+                :class="statusMap[item.deviceStatus]"
+                style="
+              width: 100px;
+              height: 100px;
+              margin: 0 auto;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 18px;
+              font-weight: bold;"
+                @click.native="handleCardClick(item)"
+              >
+                {{ item.id +  "号柜" }}
+              </el-card>
+            </el-tooltip>
+          </el-col>
+        </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) {
@@ -139,18 +149,56 @@ export default {
     },
     testAgingCabinetAndPowerCheck() {
       getAgingCabinetAndPowerCheck().then(response => {
-          this.cabinets = 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/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;
 }