|
|
@ -1,5 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="statistical-analysis" :style="cssVars"> |
|
|
<div class="statistical-analysis statistical-analysis--adaptive" :style="cssVars"> |
|
|
<div class="wrap_all"> |
|
|
<div class="wrap_all"> |
|
|
<div class="select_set"> |
|
|
<div class="select_set"> |
|
|
<div class="select_item"> |
|
|
<div class="select_item"> |
|
|
@ -51,8 +51,8 @@ |
|
|
<div class="count_div"> |
|
|
<div class="count_div"> |
|
|
<img :src="item.icon" :alt="item.label" /> |
|
|
<img :src="item.icon" :alt="item.label" /> |
|
|
<div class="count_cont"> |
|
|
<div class="count_cont"> |
|
|
<span class="number_count">{{ item.count }}</span> |
|
|
<span class="number_count">{{ item.count ? item.count : '-' }}</span> |
|
|
<span class="number_percent">{{ item.rate }}<i>%</i></span> |
|
|
<span class="number_percent">{{ item.rate ? item.rate : '-' }}<i>%</i></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -66,8 +66,8 @@ |
|
|
<div class="count_div"> |
|
|
<div class="count_div"> |
|
|
<img :src="item.icon" :alt="item.label" /> |
|
|
<img :src="item.icon" :alt="item.label" /> |
|
|
<div class="count_cont"> |
|
|
<div class="count_cont"> |
|
|
<span class="number_count">{{ item.count }}</span> |
|
|
<span class="number_count">{{ item.count ? item.count : '-' }}</span> |
|
|
<span class="number_percent">{{ item.rate }}<i>%</i></span> |
|
|
<span class="number_percent">{{ item.rate ? item.rate : '-' }}<i>%</i></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -81,8 +81,8 @@ |
|
|
<div v-for="item in lawFieldItems" :key="item.label" class="count_item"> |
|
|
<div v-for="item in lawFieldItems" :key="item.label" class="count_item"> |
|
|
<div class="count_lab">{{ item.label }}</div> |
|
|
<div class="count_lab">{{ item.label }}</div> |
|
|
<div class="count_cont"> |
|
|
<div class="count_cont"> |
|
|
<span class="number_count">{{ item.count }}</span> |
|
|
<span class="number_count">{{ item.count ? item.count : '-' }}</span> |
|
|
<span class="number_percent">{{ item.rate }}<i>%</i></span> |
|
|
<span class="number_percent">{{ item.rate ? item.rate : '-' }}<i>%</i></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -264,8 +264,10 @@ const cssVars = computed(() => { |
|
|
function buildCategoryItems(data: Record<string, number>[] | undefined, total: number | undefined, iconMap: Record<string, string>) { |
|
|
function buildCategoryItems(data: Record<string, number>[] | undefined, total: number | undefined, iconMap: Record<string, string>) { |
|
|
if (!data) return []; |
|
|
if (!data) return []; |
|
|
return data.map((obj) => { |
|
|
return data.map((obj) => { |
|
|
const [label, count] = Object.entries(obj)[0]; |
|
|
const [label, rawCount] = Object.entries(obj)[0]; |
|
|
const rate = total ? parseFloat(((Number(count) / total) * 100).toFixed(2)) : 0; |
|
|
// 接口可能返回字符串 "0"，统一转成数字，0 才会被模板判定为空显示 '-' |
|
|
|
|
|
const count = Number(rawCount) || 0; |
|
|
|
|
|
const rate = total ? parseFloat(((count / total) * 100).toFixed(2)) : 0; |
|
|
return { label, count, rate, icon: `${BASE}statistical-new/images/${iconMap[label] || 'icon_801.png'}` }; |
|
|
return { label, count, rate, icon: `${BASE}statistical-new/images/${iconMap[label] || 'icon_801.png'}` }; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
@ -275,8 +277,9 @@ const caseTypeItems = computed(() => buildCategoryItems(stats.value.caseType, st |
|
|
const lawFieldItems = computed(() => { |
|
|
const lawFieldItems = computed(() => { |
|
|
if (!stats.value.lawField) return []; |
|
|
if (!stats.value.lawField) return []; |
|
|
return stats.value.lawField.map((obj) => { |
|
|
return stats.value.lawField.map((obj) => { |
|
|
const [label, count] = Object.entries(obj)[0]; |
|
|
const [label, rawCount] = Object.entries(obj)[0]; |
|
|
const rate = stats.value.lawFieldTotal ? parseFloat(((Number(count) / stats.value.lawFieldTotal!) * 100).toFixed(2)) : 0; |
|
|
const count = Number(rawCount) || 0; |
|
|
|
|
|
const rate = stats.value.lawFieldTotal ? parseFloat(((count / stats.value.lawFieldTotal!) * 100).toFixed(2)) : 0; |
|
|
return { label, count, rate }; |
|
|
return { label, count, rate }; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
@ -423,4 +426,43 @@ onUnmounted(() => { |
|
|
@import '../styles/analysis-scope.css'; |
|
|
@import '../styles/analysis-scope.css'; |
|
|
@import '/statistical-new/font-awesome/css/font-awesome.min.css'; |
|
|
@import '/statistical-new/font-awesome/css/font-awesome.min.css'; |
|
|
@import '../styles/analysis-layout.css'; |
|
|
@import '../styles/analysis-layout.css'; |
|
|
|
|
|
|
|
|
|
|
|
/* 卡片高度随内容自适应，避免条目增多时溢出裁切；同行卡片等高 */ |
|
|
|
|
|
.statistical-analysis--adaptive .twobox { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
align-items: stretch; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.statistical-analysis--adaptive .twobox .threebox { |
|
|
|
|
|
float: none; |
|
|
|
|
|
height: auto; |
|
|
|
|
|
/* min-height: 25rem; */ |
|
|
|
|
|
/* 等高时多出的高度留在底部，内容保持顶部对齐，不被分配到行间 */ |
|
|
|
|
|
align-content: flex-start; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 标题不再被第一行卡片压住（原 -2% / -0.5% 负外边距会让卡片上移盖住标题） */ |
|
|
|
|
|
.statistical-analysis--adaptive .twobox .chart_tit { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.statistical-analysis--adaptive .twobox .count_wrap { |
|
|
|
|
|
margin-top: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.statistical-analysis--adaptive .twobox .count_item { |
|
|
|
|
|
margin-top: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 投诉类别条目之间留出间隙 */ |
|
|
|
|
|
.statistical-analysis--adaptive .twobox .com_cate { |
|
|
|
|
|
gap: 0.75rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.statistical-analysis--adaptive .twobox .com_cate .count_item { |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
width: calc(50% - 0.375rem); |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
