132 lines
2.6 KiB
Vue
132 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import ChartRadar from '@/components/ChartRadar.vue'
|
|
import ChartLine from '@/components/ChartLine.vue'
|
|
import ChartBar from '@/components/ChartBar.vue'
|
|
import ChartPie from '@/components/ChartPie.vue'
|
|
import StatsCard from '@/components/StatsCard.vue'
|
|
|
|
// Import MDI icons
|
|
import { mdiWeb, mdiRss, mdiSend, mdiBell, mdiGithub, mdiCurrencyCny } from '@mdi/js'
|
|
|
|
const stats = ref([
|
|
{
|
|
icon: mdiWeb,
|
|
title: 'Bandwidth',
|
|
value: 230,
|
|
unit: 'GB',
|
|
color: 'primary',
|
|
caption: 'Up: 100, Down: 130',
|
|
},
|
|
{
|
|
icon: mdiRss,
|
|
title: 'Submissions',
|
|
value: 108,
|
|
color: 'primary',
|
|
caption: 'Too young, too naive',
|
|
},
|
|
{
|
|
icon: mdiSend,
|
|
title: 'Requests',
|
|
value: 1238,
|
|
color: 'warning',
|
|
caption: 'Limit: 1320',
|
|
},
|
|
{
|
|
icon: mdiBell,
|
|
title: 'Messages',
|
|
value: 9042,
|
|
color: 'primary',
|
|
caption: 'Warnings: 300, erros: 47',
|
|
},
|
|
{
|
|
icon: mdiGithub,
|
|
title: 'Github Stars',
|
|
value: NaN,
|
|
color: 'grey',
|
|
caption: 'API has no response',
|
|
},
|
|
{
|
|
icon: mdiCurrencyCny,
|
|
title: 'Total Fee',
|
|
value: 2300,
|
|
unit: '￥',
|
|
color: 'error',
|
|
caption: 'Upper Limit: 2000 ￥',
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<v-container fluid>
|
|
<v-row>
|
|
<v-col
|
|
v-for="stat in stats"
|
|
:key="stat.title"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
lg="2"
|
|
>
|
|
<StatsCard
|
|
:title="stat.title"
|
|
:unit="stat.unit"
|
|
:color="stat.color"
|
|
:icon="stat.icon"
|
|
:value="stat.value"
|
|
>
|
|
<template #footer>
|
|
{{ stat.caption }}
|
|
</template>
|
|
</StatsCard>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6" lg="12">
|
|
<v-card class="pa-2 chart-card">
|
|
<ChartLine />
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-card class="pa-2 chart-card">
|
|
<ChartRadar />
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-card class="pa-2 chart-card">
|
|
<ChartPie />
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="6" lg="4">
|
|
<v-card class="pa-2 chart-card">
|
|
<ChartBar />
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.chart-card {
|
|
height: 350px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
:deep(.chart-container) {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-height: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
:deep(.v-chart) {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|