This commit is contained in:
parent
3f36f1943f
commit
b9bc8db213
|
|
@ -10,17 +10,28 @@
|
||||||
<div class="right-content">
|
<div class="right-content">
|
||||||
<!-- 切换按钮 -->
|
<!-- 切换按钮 -->
|
||||||
<div class="tab-switch">
|
<div class="tab-switch">
|
||||||
<el-radio-group v-model="activeTab" size="medium">
|
<div class="tab-switch-left">
|
||||||
<el-radio-button label="person"
|
<el-radio-group v-model="activeTab" size="medium">
|
||||||
>人员列表</el-radio-button
|
<el-radio-button label="person"
|
||||||
>
|
>人员列表</el-radio-button
|
||||||
<el-radio-button label="task"
|
>
|
||||||
>任务列表</el-radio-button
|
<el-radio-button label="task"
|
||||||
>
|
>任务列表</el-radio-button
|
||||||
<el-radio-button label="taskHistory"
|
>
|
||||||
>任务历史</el-radio-button
|
<el-radio-button label="taskHistory"
|
||||||
>
|
>任务历史</el-radio-button
|
||||||
</el-radio-group>
|
>
|
||||||
|
</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>
|
||||||
|
|
||||||
<div class="right-content-table">
|
<div class="right-content-table">
|
||||||
|
|
@ -56,6 +67,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
selectedMacNo: '', // 选中的考勤机编号
|
selectedMacNo: '', // 选中的考勤机编号
|
||||||
selectedProId: '', // 选中的工程id
|
selectedProId: '', // 选中的工程id
|
||||||
|
selectedNodeName: '', // 选中的节点名称
|
||||||
activeTab: 'person', // 当前激活的标签页
|
activeTab: 'person', // 当前激活的标签页
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -77,6 +89,8 @@ export default {
|
||||||
|
|
||||||
this.selectedMacNo = data.id
|
this.selectedMacNo = data.id
|
||||||
this.selectedProId = data.proId
|
this.selectedProId = data.proId
|
||||||
|
|
||||||
|
this.selectedNodeName = data.name
|
||||||
// if (data.level === 2) {
|
// if (data.level === 2) {
|
||||||
// // 二级节点(考勤机)
|
// // 二级节点(考勤机)
|
||||||
// this.selectedMacNo = data.id
|
// this.selectedMacNo = data.id
|
||||||
|
|
@ -141,15 +155,58 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-switch {
|
.tab-switch {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 10px 0;
|
padding: 12px 20px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 4px;
|
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);
|
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 {
|
.right-content-table {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue