优化

src/views/system/AttMacManage/index.vue

@@ -10,6 +10,7 @@
                 <div class="right-content">
                     <!-- 切换按钮 -->
                     <div class="tab-switch">
+                        <div class="tab-switch-left">
                             <el-radio-group v-model="activeTab" size="medium">
                                 <el-radio-button label="person"
                                     >人员列表</el-radio-button
@@ -22,6 +23,16 @@
                                 >
                             </el-radio-group>
                         </div>
+                        <div class="tab-switch-right">
+                            <div class="selected-node-info">
+                                <i class="el-icon-location-outline"></i>
+                                <span class="label">当前节点：</span>
+                                <span class="value">{{
+                                    selectedNodeName || '未选择'
+                                }}</span>
+                            </div>
+                        </div>
+                    </div>
 
                     <div class="right-content-table">
                         <component
@@ -56,6 +67,7 @@ export default {
         return {
             selectedMacNo: '', // 选中的考勤机编号
             selectedProId: '', // 选中的工程id
+            selectedNodeName: '', // 选中的节点名称
             activeTab: 'person', // 当前激活的标签页
         }
     },
@@ -77,6 +89,8 @@ export default {
 
             this.selectedMacNo = data.id
             this.selectedProId = data.proId
+
+            this.selectedNodeName = data.name
             // if (data.level === 2) {
             //     // 二级节点（考勤机）
             //     this.selectedMacNo = data.id
@@ -141,15 +155,58 @@ export default {
 }
 
 .tab-switch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     flex-shrink: 0;
     margin-bottom: 10px;
-    padding: 10px 0;
+    padding: 12px 20px;
     background-color: #fff;
     border-radius: 4px;
-    padding-left: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 }
 
+.tab-switch-left {
+    flex: 1;
+}
+
+.tab-switch-right {
+    margin-left: 20px;
+    flex-shrink: 0;
+}
+
+.selected-node-info {
+    display: flex;
+    align-items: center;
+    padding: 6px 16px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 20px;
+    font-size: 14px;
+    color: #606266;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    i {
+        font-size: 16px;
+        color: #409eff;
+        margin-right: 6px;
+    }
+
+    .label {
+        color: #909399;
+        margin-right: 4px;
+        font-weight: 500;
+    }
+
+    .value {
+        color: #303133;
+        font-weight: 600;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
 .right-content-table {
     flex: 1;
     min-height: 0;