-
-
-
{{ 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;