<template><div class="dashboard"><a-grid :cols="{ xs: 1, sm: 2, lg: 5 }" :col-gap="16" :row-gap="16"><a-grid-item v-for="item in cards" :key="item.key"><a-card :bordered="false"><a-statistic :title="item.label" :value="overview[item.key] || 0" /></a-card></a-grid-item></a-grid><a-card title="运营概览" :bordered="false" class="intro"><p>跨组织查看可燃气体站、配送点、服务人员、业主客户与待处置安全事件。</p></a-card></div></template>
<script setup lang="ts">import { Message } from '@arco-design/web-vue'; import { onMounted, ref } from 'vue'; import { platformApi } from '@/api/platform'; const overview = ref<Record<string, number>>({}); const cards = [{ key: 'gas_basic_count', label: '可燃气体站' }, { key: 'delivery_basic_count', label: '配送点' }, { key: 'staff_count', label: '在岗服务人员' }, { key: 'user_count', label: '业主客户' }, { key: 'pending_safety_count', label: '待处理安全事件' }]; onMounted(async () => { try { overview.value = await platformApi.overview(); } catch (error) { Message.error((error as Error).message); } });</script>
<style scoped lang="less">.dashboard { padding: 20px; } .intro { margin-top: 16px; }</style>
