tangweijie/xlcp-frontend
1
0
Fork 0
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(dashboard): 修改中间区域为纵向3字段布局

Browse Source 
- 左侧区域：累计服刑天数、累计违规次数、累计表扬次数
- 右侧区域：剩余刑期天数、累计扣分次数、累计加分次数
- 底部模块：显示占位符 '-'
- 添加CSS样式适配纵向布局（info-field-item, field-label, field-value）
- 遵循Element Plus设计规范

参考计划: .sisyphus/plans/dashboard-center-update.md Tasks 2-5
This commit is contained in:
tangweijie 2026-01-27 10:50:21 +08:00
parent 4bff154317
commit 9a3044147b
1 changed files with 87 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/Dashboard/Index.vue
View File

@ -10,42 +10,36 @@
<div class="dashboard-content-top-center">
<div class="gauge-container">
<div class="dashboard-content-top-center-data">
<!-- 左侧第一个卡片 -->
<div class="info-card-item">
<div class="card-number">{{ centerLeftData.top.value }}</div>
<div class="card-label">{{ centerLeftData.top.label }}</div>
<!-- 左侧区域：3个字段纵向排列 -->
<div class="info-field-item">
<div class="field-label">累计服刑天数</div>
<div class="field-value">{{ servedDays }}</div>
</div>
<!-- 左侧第二个卡片 -->
<div class="card-row">
<div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerLeftData.middle.left.value }}</div>
<div class="card-label">{{ centerLeftData.middle.left.label }}</div>
</div>
<div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerLeftData.middle.right.value }}</div>
<div class="card-label">{{ centerLeftData.middle.right.label }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计违规次数</div>
<div class="field-value">{{ violationCount }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计表扬次数</div>
<div class="field-value">{{ praiseCount }}</div>
</div>
</div>
<div class="dashboard-content-top-center-center">
<GaugeChart :height="'240px'" :value="gaugeValue" :name="gaugeName" />
</div>
<div class="dashboard-content-top-center-data">
<!-- 右侧第一个卡片 -->
<div class="info-card-item">
<div class="card-number">{{ centerRightData.top.value }}</div>
<div class="card-label">{{ centerRightData.top.label }}</div>
<!-- 右侧区域：3个字段纵向排列 -->
<div class="info-field-item">
<div class="field-label">剩余刑期天数</div>
<div class="field-value">{{ remainingDays }}</div>
</div>
<!-- 右侧第二个卡片 -->
<div class="card-row">
<div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerRightData.middle.left.value }}</div>
<div class="card-label">{{ centerRightData.middle.left.label }}</div>
</div>
<div class="info-card-item center-right-card-item">
<div class="card-number">{{ centerRightData.middle.right.value }}</div>
<div class="card-label">{{ centerRightData.middle.right.label }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计扣分次数</div>
<div class="field-value">{{ penaltyCount }}</div>
</div>
<div class="info-field-item">
<div class="field-label">累计加分次数</div>
<div class="field-value">{{ rewardCount }}</div>
</div>
</div>
</div>
@ -242,6 +236,16 @@ const rewardsPunishments = ref<{
const currentTime = ref('')
const prisonerName = ref('加载中...')
// 左侧区域三个字段数据
const servedDays = ref(0)
const violationCount = ref(0)
const praiseCount = ref(0)
// 右侧区域三个字段数据
const remainingDays = ref(0)
const penaltyCount = ref(0)
const rewardCount = ref(0)
// 格式化时间
const formatTime = () => {
const now = new Date()
@ -275,13 +279,14 @@ const loadData = async (prisonerId: number) => {
gaugeName.value = ''
// 计算累计服刑天数和剩余刑期天数
const servedDays = res.servedDays || 0;
let remainingDays = 0;
const servedDaysValue = res.servedDays || 0;
servedDays.value = servedDaysValue
remainingDays.value = 0;
if (res.imprisonmentDate && res.releaseDate) {
const startDate = new Date(res.imprisonmentDate);
const endDate = new Date(res.releaseDate);
const totalDays = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
remainingDays = Math.max(0, totalDays - servedDays);
remainingDays.value = Math.max(0, totalDays - servedDaysValue);
}
// 获取计分考核数据 - 累计扣分次数和累计加分次数
@ -301,6 +306,10 @@ const loadData = async (prisonerId: number) => {
console.error('获取计分考核数据失败:', error)
}
// 更新右侧区域三个字段数据
penaltyCount.value = totalPenaltyCount
rewardCount.value = totalRewardCount
// 获取狱情收集数据 - 累计违规次数
let totalViolationCount = 0
try {
@ -315,6 +324,10 @@ const loadData = async (prisonerId: number) => {
console.error('获取狱情收集数据失败:', error)
}
// 更新左侧区域三个字段数据
violationCount.value = totalViolationCount
praiseCount.value = res.praiseCount || 0
// 更新中心左侧数据
if (res.centerLeftData) {
centerLeftData.value = {
@ -583,6 +596,49 @@ onUnmounted(() => {
justify-content: space-between;
}
// 纵向字段项样式
.info-field-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 16px;
background: #2d3d5f;
border: 1px solid rgba(56, 102, 141, 0.5);
border-radius: 6px;
box-shadow: inset 0 0 10px 0 rgba(43, 65, 131, 0.3);
transition: all 0.3s ease;
&:hover {
border-color: rgba(56, 102, 141, 0.8);
box-shadow: inset 0 0 15px 0 rgba(43, 65, 131, 0.5);
}
}
// 字段标签样式
.field-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
text-align: center;
white-space: nowrap;
margin-bottom: 8px;
font-weight: 500;
}
// 字段数值样式
.field-value {
font-size: 20px;
font-weight: bold;
color: #ffffff;
line-height: 1.3;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dashboard-content-top-center-center {
width: 40%;
height: 220px;