|
|
@@ -33,10 +33,12 @@
|
|
|
<div
|
|
|
class="kpi-card"
|
|
|
:class="{ 'is-clickable': card.click }"
|
|
|
- role="button"
|
|
|
- tabindex="0"
|
|
|
+ :role="card.click ? 'button' : null"
|
|
|
+ :tabindex="card.click ? 0 : -1"
|
|
|
+ :aria-label="card.click ? card.label : null"
|
|
|
@click="card.click && goPath(card.click)"
|
|
|
@keyup.enter="card.click && goPath(card.click)"
|
|
|
+ @keydown.space.prevent="card.click && goPath(card.click)"
|
|
|
>
|
|
|
<div class="kpi-card__icon" :class="'kpi-icon--' + card.color">
|
|
|
<i :class="card.icon"></i>
|
|
|
@@ -99,6 +101,7 @@
|
|
|
>
|
|
|
<span class="heatmap__hour">{{ h }}</span>
|
|
|
<span class="heatmap__value">{{ fmtDuration(v) }}</span>
|
|
|
+ <span v-if="v > 0 && Number(v) >= Number(dwellByHourPeak) * 0.6" class="heatmap__flag" aria-hidden="true">高</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="heatmap__axis">
|
|
|
@@ -232,8 +235,10 @@
|
|
|
:key="act.label"
|
|
|
role="button"
|
|
|
tabindex="0"
|
|
|
+ :aria-label="act.label"
|
|
|
@click="goPath(act.path)"
|
|
|
@keyup.enter="goPath(act.path)"
|
|
|
+ @keydown.space.prevent="goPath(act.path)"
|
|
|
>
|
|
|
<div class="action-icon" :class="act.iconClass"><i :class="act.icon"></i></div>
|
|
|
<div class="action-label">{{ act.label }}</div>
|
|
|
@@ -1016,6 +1021,7 @@ export default {
|
|
|
.heatmap { padding: 8px 4px; }
|
|
|
.heatmap__row { display: flex; gap: 3px; }
|
|
|
.heatmap__cell {
|
|
|
+ position: relative;
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
height: 48px;
|
|
|
@@ -1029,6 +1035,19 @@ export default {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.heatmap__cell:hover { opacity: 0.88; }
|
|
|
+.heatmap__flag {
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ right: 3px;
|
|
|
+ font-size: 9px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 1px 3px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0, 0, 0, 0.28);
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+}
|
|
|
.heatmap__hour {
|
|
|
font-size: 11px;
|
|
|
font-weight: 600;
|