65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { nextTick, onMounted, ref } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import { useDashboardStore } from '../stores/dashboard'
|
|
import SummaryCards from '../components/SummaryCards.vue'
|
|
import AppNav from '../components/AppNav.vue'
|
|
|
|
const dashboard = useDashboardStore()
|
|
const chartEl = ref<HTMLDivElement>()
|
|
let chart: echarts.ECharts | null = null
|
|
|
|
function renderChart() {
|
|
if (!chartEl.value) return
|
|
if (!chart) chart = echarts.init(chartEl.value)
|
|
chart.setOption({
|
|
tooltip: { trigger: 'item' },
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
data: (dashboard.by_category || []).map((x: any) => ({ name: x.category_name || '未分类', value: x.total_value })),
|
|
}],
|
|
})
|
|
}
|
|
|
|
async function load() {
|
|
await dashboard.fetch()
|
|
await nextTick()
|
|
renderChart()
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<AppNav />
|
|
<SummaryCards
|
|
:total="dashboard.total_assets_value"
|
|
:assets-count="dashboard.by_category.length"
|
|
:expiring-count="dashboard.expiring_in_30_days.length"
|
|
/>
|
|
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
|
<el-col :xs="24" :md="12">
|
|
<el-card class="card">
|
|
<template #header>分类占比</template>
|
|
<div ref="chartEl" style="height:320px"></div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :md="12">
|
|
<el-card class="card">
|
|
<template #header>30天到期 Top10</template>
|
|
<el-table :data="dashboard.expiring_in_30_days.slice(0,10)" size="small">
|
|
<el-table-column prop="name" label="名称" min-width="120" />
|
|
<el-table-column prop="expiry_date" label="到期日" min-width="180" />
|
|
<el-table-column label="金额" min-width="110">
|
|
<template #default="scope">{{ scope.row.total_value }} {{ scope.row.currency }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|