34 lines
2.0 KiB
Vue
34 lines
2.0 KiB
Vue
|
<script setup>
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
import { snapshot } from '../composables/bridge.js';
|
|||
|
|
import { summarizeHomes } from '../composables/insights.mjs';
|
|||
|
|
import AppIcon from './AppIcon.vue';
|
|||
|
|
const summary = computed(() => summarizeHomes(snapshot.value.state.households));
|
|||
|
|
</script>
|
|||
|
|
<template>
|
|||
|
|
<section class="home-insights" aria-label="已授权场所概览">
|
|||
|
|
<article class="insight-welcome">
|
|||
|
|
<span class="insight-kicker">一处相连 · 各有归属</span>
|
|||
|
|
<h2>家与日常，尽在掌握</h2>
|
|||
|
|
<p>从一个空间出发，照看设备，也珍藏生活。</p>
|
|||
|
|
<div class="insight-scope"><AppIcon name="shield" /> 仅汇总你有权访问的家庭与场所</div>
|
|||
|
|
</article>
|
|||
|
|
<article class="insight-number">
|
|||
|
|
<span class="insight-icon"><AppIcon name="devices" /></span>
|
|||
|
|
<span class="insight-label">已登记设备</span>
|
|||
|
|
<strong>{{ summary.devices }}<small>台</small></strong>
|
|||
|
|
<span class="insight-foot">分布在 {{ summary.areas }} 处区域</span>
|
|||
|
|
</article>
|
|||
|
|
<article class="insight-distribution">
|
|||
|
|
<div class="insight-donut">
|
|||
|
|
<svg viewBox="0 0 120 120" role="img" :aria-label="'场所分布：' + (summary.kinds.map(k => k.label + k.count + '个').join('，') || '暂无场所')">
|
|||
|
|
<circle class="donut-track" cx="60" cy="60" r="48" fill="none" stroke-width="10" />
|
|||
|
|
<circle v-for="kind in summary.kinds" :key="kind.key" cx="60" cy="60" r="48" fill="none" stroke-width="10" pathLength="100" :stroke="kind.color" :stroke-dasharray="`${kind.share} ${100 - kind.share}`" :stroke-dashoffset="-kind.offset" transform="rotate(-90 60 60)" />
|
|||
|
|
</svg>
|
|||
|
|
<div aria-hidden="true"><strong>{{ summary.total }}</strong><small>家庭与场所</small></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="insight-legend"><h3>空间分布</h3><span v-for="kind in summary.kinds" :key="kind.key"><i :style="{ background: kind.color }"></i>{{ kind.label }}<b>{{ kind.count }}</b></span><span v-if="!summary.total">等待添加空间</span></div>
|
|||
|
|
</article>
|
|||
|
|
</section>
|
|||
|
|
</template>
|