|
|
@@ -37,28 +37,33 @@
|
|
|
</ContentWrap>
|
|
|
|
|
|
<ContentWrap style="border: 0">
|
|
|
- <div v-if="staticData.length" class="stats-cards">
|
|
|
- <!-- <div class="stats-card stats-card--total">
|
|
|
- <div class="stats-card__label">风险总数</div>
|
|
|
- <div class="stats-card__value">{{ totalRiskCount }}</div>
|
|
|
- </div> -->
|
|
|
+ <div v-loading="!staticData.length" class="stats-cards">
|
|
|
<div
|
|
|
- v-for="item in staticData"
|
|
|
- :key="item.classify"
|
|
|
+ v-for="item in statsDisplayCards"
|
|
|
+ :key="item.key"
|
|
|
class="stats-card"
|
|
|
- :class="getStatsCardClass(item.classify)">
|
|
|
- <div class="stats-card__label">
|
|
|
- <!-- <span
|
|
|
- :class="`w-50 h-50 rounded-full inline-block bg-[${getStatsCardClass(item.classify)}]`"></span> -->
|
|
|
- <span>{{ item.classify }}</span>
|
|
|
+ :style="getStatsCardStyle(item.accent, item.glow)">
|
|
|
+ <div
|
|
|
+ class="stats-card__decor stats-card__decor--left"
|
|
|
+ :style="{ background: item.glow }"></div>
|
|
|
+ <div
|
|
|
+ class="stats-card__decor stats-card__decor--right"
|
|
|
+ :style="{ background: item.glow }"></div>
|
|
|
+ <div class="stats-card__header">
|
|
|
+ <div class="stats-card__icon-wrap">
|
|
|
+ <div class="stats-card__icon" :style="{ color: item.accent }">
|
|
|
+ <Icon :icon="item.icon" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stats-card__title">{{ item.label }}</div>
|
|
|
</div>
|
|
|
- <div class="stats-card__value">
|
|
|
+ <div class="stats-card__body">
|
|
|
<CountTo
|
|
|
:duration="2600"
|
|
|
:end-val="item.count"
|
|
|
:start-val="0"
|
|
|
- :class="'stats-card__count'"
|
|
|
- :style="{ color: getStatsCardClass(item.classify) }" />
|
|
|
+ class="stats-card__count"
|
|
|
+ :style="{ color: item.accent }" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -68,7 +73,7 @@
|
|
|
style="width: 100%"
|
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#333' }"
|
|
|
:cell-style="{ padding: '12px 8px' }"
|
|
|
- height="55vh">
|
|
|
+ height="52.7vh">
|
|
|
<!-- 区域/位置 列（已合并） -->
|
|
|
<zm-table-column prop="region" label="区域/位置" align="center" fixed="left" />
|
|
|
|
|
|
@@ -536,6 +541,63 @@ const totalRiskCount = computed(() =>
|
|
|
staticData.value.reduce((sum, item) => sum + (Number(item.count) || 0), 0)
|
|
|
)
|
|
|
|
|
|
+const getStatsCardMeta = (classify) => {
|
|
|
+ const value = String(classify || '')
|
|
|
+ if (value.includes('重大') || value.includes('閲嶅ぇ')) {
|
|
|
+ return {
|
|
|
+ accent: '#ff5b61',
|
|
|
+ glow: 'radial-gradient(circle, rgba(255, 91, 97, 0.22) 0%, rgba(255, 91, 97, 0) 72%)',
|
|
|
+ icon: 'ep:warning-filled'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (value.includes('较大') || value.includes('杈冨ぇ')) {
|
|
|
+ return {
|
|
|
+ accent: '#ff9827',
|
|
|
+ glow: 'radial-gradient(circle, rgba(255, 152, 39, 0.24) 0%, rgba(255, 152, 39, 0) 72%)',
|
|
|
+ icon: 'ep:opportunity'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (value.includes('一般') || value.includes('涓€鑸')) {
|
|
|
+ return {
|
|
|
+ accent: '#3d7cff',
|
|
|
+ glow: 'radial-gradient(circle, rgba(61, 124, 255, 0.2) 0%, rgba(61, 124, 255, 0) 72%)',
|
|
|
+ icon: 'ep:info-filled'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (value.includes('低') || value.includes('浣')) {
|
|
|
+ return {
|
|
|
+ accent: '#25b36a',
|
|
|
+ glow: 'radial-gradient(circle, rgba(37, 179, 106, 0.22) 0%, rgba(37, 179, 106, 0) 72%)',
|
|
|
+ icon: 'ep:success-filled'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ accent: '#5f7da8',
|
|
|
+ glow: 'radial-gradient(circle, rgba(95, 125, 168, 0.18) 0%, rgba(95, 125, 168, 0) 72%)',
|
|
|
+ icon: 'ep:data-analysis'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const statsDisplayCards = computed(() =>
|
|
|
+ staticData.value.map((item, index) => {
|
|
|
+ const meta = getStatsCardMeta(item.classify)
|
|
|
+ const count = Number(item.count) || 0
|
|
|
+ const rate = totalRiskCount.value ? ((count / totalRiskCount.value) * 100).toFixed(1) : '0.0'
|
|
|
+ return {
|
|
|
+ key: `${item.classify}-${index}`,
|
|
|
+ label: item.classify,
|
|
|
+ count,
|
|
|
+ note: `占比:${rate}%`,
|
|
|
+ ...meta
|
|
|
+ }
|
|
|
+ })
|
|
|
+)
|
|
|
+
|
|
|
+const getStatsCardStyle = (accent, glow) => ({
|
|
|
+ '--stats-accent': accent,
|
|
|
+ '--stats-glow': glow
|
|
|
+})
|
|
|
+
|
|
|
const getStatsCardClass = (classify) => {
|
|
|
const value = String(classify || '')
|
|
|
if (value.includes('重大')) return 'stats-card--major'
|
|
|
@@ -613,75 +675,153 @@ onMounted(() => {
|
|
|
|
|
|
.stats-cards {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
gap: 12px;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.stats-card {
|
|
|
- padding: 16px;
|
|
|
- border-radius: 10px;
|
|
|
- border: 1px solid #e4ecf7;
|
|
|
-
|
|
|
- background: linear-gradient(180deg, rgb(212 228 252 / 42%) 0%, rgb(220 232 250 / 28%) 100%);
|
|
|
- border: 1px solid rgb(255 255 255 / 58%);
|
|
|
- border-radius: 18px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ min-height: 132px;
|
|
|
+ padding: 18px 18px 16px;
|
|
|
+ border-radius: 22px;
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at 18% 22%,
|
|
|
+ rgb(255 255 255 / 92%) 0%,
|
|
|
+ rgb(255 255 255 / 0%) 20%
|
|
|
+ ),
|
|
|
+ radial-gradient(circle at 88% 80%, rgb(255 215 158 / 22%) 0%, rgb(255 215 158 / 0%) 16%),
|
|
|
+ linear-gradient(135deg, rgb(239 245 255 / 96%) 0%, rgb(217 230 248 / 88%) 100%);
|
|
|
+ border: 1px solid rgb(255 255 255 / 62%);
|
|
|
box-shadow:
|
|
|
- inset 0 1px 0 rgb(255 255 255 / 74%),
|
|
|
- 0 8px 18px rgb(63 103 171 / 7%);
|
|
|
+ inset 0 1px 0 rgb(255 255 255 / 86%),
|
|
|
+ 0 14px 30px rgb(116 146 191 / 12%);
|
|
|
}
|
|
|
|
|
|
-.stats-card--total {
|
|
|
- background: linear-gradient(180deg, #eff7ff 0%, #dfefff 100%);
|
|
|
- border-color: #bfd8fb;
|
|
|
+.stats-card__decor {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 999px;
|
|
|
+ pointer-events: none;
|
|
|
+ filter: blur(8px);
|
|
|
+ opacity: 0.95;
|
|
|
}
|
|
|
|
|
|
-.stats-card__label {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #6b7280;
|
|
|
+.stats-card__decor--left {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ left: -10px;
|
|
|
+ top: -8px;
|
|
|
}
|
|
|
|
|
|
-.stats-card__value {
|
|
|
- margin-top: 10px;
|
|
|
+.stats-card__decor--right {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ right: -18px;
|
|
|
+ bottom: -24px;
|
|
|
}
|
|
|
|
|
|
-.stats-card__count {
|
|
|
- display: block;
|
|
|
- padding-top: 10px;
|
|
|
- text-align: center;
|
|
|
- font-size: 40px !important;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 1;
|
|
|
+.stats-card__header {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card__icon-wrap {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 14px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgb(255 255 255 / 85%),
|
|
|
+ 0 10px 24px rgb(118 144 187 / 10%);
|
|
|
}
|
|
|
|
|
|
-.stats-card--major .stats-card__label,
|
|
|
-.stats-card--major .stats-card__count {
|
|
|
- color: #d03050;
|
|
|
+.stats-card__icon {
|
|
|
+ font-size: 24px;
|
|
|
+ /* line-height: 1; */
|
|
|
}
|
|
|
|
|
|
-.stats-card--high .stats-card__label,
|
|
|
-.stats-card--high .stats-card__count {
|
|
|
- color: #dd6b20;
|
|
|
+.stats-card__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #324b72;
|
|
|
+ letter-spacing: 0;
|
|
|
}
|
|
|
|
|
|
-.stats-card--medium .stats-card__label,
|
|
|
-.stats-card--medium .stats-card__count {
|
|
|
- color: #ebaa3c;
|
|
|
+.stats-card__body {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 14px;
|
|
|
+ padding-left: 62px;
|
|
|
}
|
|
|
|
|
|
-.stats-card--low .stats-card__label,
|
|
|
-.stats-card--low .stats-card__count {
|
|
|
- color: #f2c11a;
|
|
|
+.stats-card__count {
|
|
|
+ display: block;
|
|
|
+ font-size: 38px !important;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 0.92;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-style: italic;
|
|
|
+ text-shadow: 0 8px 18px rgb(68 110 183 / 10%);
|
|
|
}
|
|
|
|
|
|
-.stats-card--default .stats-card__label,
|
|
|
-.stats-card--default .stats-card__count {
|
|
|
- color: #475569;
|
|
|
+.stats-card__note {
|
|
|
+ padding-bottom: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
-.stats-card--total .stats-card__label,
|
|
|
-.stats-card--total .stats-card__value {
|
|
|
- color: #1f5bb8;
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .stats-cards {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card {
|
|
|
+ min-height: 160px;
|
|
|
+ padding: 24px 22px 22px;
|
|
|
+ border-radius: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__header {
|
|
|
+ gap: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__icon-wrap {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__icon {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__title {
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__body {
|
|
|
+ margin-top: 18px;
|
|
|
+ padding-left: 76px;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__count {
|
|
|
+ font-size: 46px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats-card__note {
|
|
|
+ font-size: 18px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
