taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0917

Browse Source
This commit is contained in:
dhr
2025-09-17 20:03:00 +08:00
parent 31a2b405db
commit 834b0ab161
10 changed files with 642 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/zhinengxunjian/renyuanzhuangtai.vue
View File

@ -36,72 +36,45 @@
</div>
<div class="stats-grid">
<div class="stat-item total-personnel">
<div class="stat-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
stroke="#165dff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
stroke="#165dff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="stat-value">{{ totalPersonnel }}</div>
<div class="stat-label">总人数</div>
<div class="stat-change">+2人</div>
</div>
<div class="stat-item available-personnel">
<div class="stat-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
stroke="#19b949"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="stat-value">{{ availablePersonnel }}</div>
<div class="stat-label">在线可用</div>
<div class="stat-change">+2人</div>
</div>
<!-- 总人数 -->
<div class="stat-item">
<div class="stat-value">{{ workingPersonnel }}</div>
<div class="stat-label">工作中</div>
<div class="stat-change">+1人</div>
</div>
<div class="stat-item resting-personnel">
<div class="stat-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 1a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"
stroke="#909399"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 1a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"
stroke="#909399"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="stat-icon orange">
<img src="@/assets/images/renyuan.png" class="stat-icon-img" alt="总人数" />
</div>
<div class="stat-label">总人数</div>
<div class="stat-value">{{ totalPersonnel }}</div>
<div class="stat-desc">所有运维人员总数</div>
<div class="stat-change green">+1</div>
</div>
<!-- 在线可用 -->
<div class="stat-item">
<div class="stat-icon blue">
<img src="@/assets/images/zaixian.png" class="stat-icon-img" alt="在线可用" />
</div>
<div class="stat-label">在线可用</div>
<div class="stat-value">{{ availablePersonnel }}</div>
<div class="stat-desc">在线可以投入工作的人员</div>
<div class="stat-change green">+2</div>
</div>
<!-- 工作中 -->
<div class="stat-item">
<div class="stat-icon green">
<img src="@/assets/images/gongzuo.png" class="stat-icon-img" alt="工作中" />
</div>
<div class="stat-label">工作中</div>
<div class="stat-value">{{ workingPersonnel }}</div>
<div class="stat-desc">工作中人数</div>
<div class="stat-change orange">1.2单/人</div>
</div>
<!-- 离线/休息 -->
<div class="stat-item">
<div class="stat-icon gray">
<img src="@/assets/images/lixian.png" class="stat-icon-img" alt="离线休息" />
</div>
<div class="stat-label">离线/休息</div>
<div class="stat-value">{{ restingPersonnel }}</div>
<div class="stat-label">离线休息</div>
<div class="stat-change">-1人</div>
<div class="stat-desc">休假人员</div>
<div class="stat-change gray">休息离线的人员</div>
</div>
</div>
</div>
@ -516,7 +489,7 @@ const handleInspectionManagement3 = () => {
/* 左侧边栏样式 */
.sidebar {
width: 320px;
width: 400px;
flex-shrink: 0;
}
@ -539,6 +512,8 @@ const handleInspectionManagement3 = () => {
/* 图表容器 */
.chart-container {
border: 1px solid #f0f0f0;
border-radius: 20%;
margin-bottom: 32px;
display: flex;
flex-direction: column;
@ -555,57 +530,88 @@ const handleInspectionManagement3 = () => {
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
gap: 16px; /* 项之间的间距 */
}
/* 单个统计项：纵向居中，卡片化 */
.stat-item {
background-color: #f8fafc;
border-radius: 10px;
padding: 16px 12px;
background-color: #fff;
border-radius: 8px;
padding: 16px;
text-align: center;
border: 1px solid #f0f0f0;
transition: all 0.3s ease;
}
.stat-item:hover {
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 6px;
line-height: 1.2;
}
.stat-label {
font-size: 13px;
color: #606266;
margin-bottom: 4px;
font-weight: 500;
}
.stat-change {
font-size: 12px;
color: #52c41a;
font-weight: 500;
display: inline-flex;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.stat-change::before {
content: '↗';
font-size: 10px;
/* 图标容器：圆形背景 + 颜色区分 */
.stat-icon {
width: 40px;
height: 40px;
border-radius: 50%; /* 圆形背景 */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
/* 不同图标背景色 */
.stat-icon.orange {
background-color: #fff2e8;
}
.stat-icon.blue {
background-color: #e6f4ff;
}
.stat-icon.green {
background-color: #f6ffed;
}
.stat-icon.gray {
background-color: #f5f5f5;
}
/* 图标尺寸 */
.stat-icon-img {
width: 24px;
height: 24px;
object-fit: contain;
}
/* 标题：小字号 + 浅灰色 */
.stat-label {
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
/* 数值：大字号 + 深灰色 + 加粗 */
.stat-value {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 4px;
}
/* 描述：更小字号 + 浅灰色 */
.stat-desc {
font-size: 12px;
color: #999;
margin-bottom: 6px;
}
/* 变化/额外说明：彩色小字号 */
.stat-change {
font-size: 12px;
color: #52c41a;
}
.stat-change.green {
color: #00b42a;
} /* 绿色（增长） */
.stat-change.orange {
color: #ff7d00;
} /* 橙色（效率） */
.stat-change.gray {
color: #999;
} /* 灰色（说明） */
/* 主内容区域 */
.main-content {