diff --git a/src/views/Dashboard/Index.vue b/src/views/Dashboard/Index.vue index 55f44ef5..b0b1b339 100644 --- a/src/views/Dashboard/Index.vue +++ b/src/views/Dashboard/Index.vue @@ -10,42 +10,36 @@
- -
-
{{ centerLeftData.top.value }}
-
{{ centerLeftData.top.label }}
+ +
+
累计服刑天数
+
{{ servedDays }}
- -
-
-
{{ centerLeftData.middle.left.value }}
-
{{ centerLeftData.middle.left.label }}
-
-
-
{{ centerLeftData.middle.right.value }}
-
{{ centerLeftData.middle.right.label }}
-
+
+
累计违规次数
+
{{ violationCount }}
+
+
+
累计表扬次数
+
{{ praiseCount }}
- -
-
{{ centerRightData.top.value }}
-
{{ centerRightData.top.label }}
+ +
+
剩余刑期天数
+
{{ remainingDays }}
- -
-
-
{{ centerRightData.middle.left.value }}
-
{{ centerRightData.middle.left.label }}
-
-
-
{{ centerRightData.middle.right.value }}
-
{{ centerRightData.middle.right.label }}
-
+
+
累计扣分次数
+
{{ penaltyCount }}
+
+
+
累计加分次数
+
{{ rewardCount }}
@@ -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;