add dashboard

This commit is contained in:
jxxghp
2023-07-10 16:42:31 +08:00
parent f8f6e79d18
commit fb19e43421
9 changed files with 315 additions and 411 deletions

View File

@@ -1,115 +1,82 @@
<script setup lang="ts">
import AnalyticsAward from '@/views/dashboard/AnalyticsAward.vue'
import AnalyticsBarCharts from '@/views/dashboard/AnalyticsBarCharts.vue'
import AnalyticsDepositWithdraw from '@/views/dashboard/AnalyticsDepositWithdraw.vue'
import AnalyticsSalesByCountries from '@/views/dashboard/AnalyticsSalesByCountries.vue'
import AnalyticsTotalEarning from '@/views/dashboard/AnalyticsTotalEarning.vue'
import AnalyticsTotalProfitLineCharts from '@/views/dashboard/AnalyticsTotalProfitLineCharts.vue'
import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
import AnalyticsUserTable from '@/views/dashboard/AnalyticsUserTable.vue'
import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
import CardStatisticsVertical from '@/components/cards/CardStatisticsVertical.vue'
import CardStatisticsVertical from "@/components/cards/CardStatisticsVertical.vue";
import AnalyticsBarCharts from "@/views/dashboard/AnalyticsBarCharts.vue";
import AnalyticsDepositWithdraw from "@/views/dashboard/AnalyticsDepositWithdraw.vue";
import AnalyticsMediaStatistic from "@/views/dashboard/AnalyticsMediaStatistic.vue";
import AnalyticsProcesses from "@/views/dashboard/AnalyticsProcesses.vue";
import AnalyticsSalesByCountries from "@/views/dashboard/AnalyticsSalesByCountries.vue";
import AnalyticsStorage from "@/views/dashboard/AnalyticsStorage.vue";
import AnalyticsTotalEarning from "@/views/dashboard/AnalyticsTotalEarning.vue";
import AnalyticsTotalProfitLineCharts from "@/views/dashboard/AnalyticsTotalProfitLineCharts.vue";
import AnalyticsWeeklyOverview from "@/views/dashboard/AnalyticsWeeklyOverview.vue";
const totalProfit = {
title: 'Total Profit',
color: 'secondary',
icon: 'mdi-poll',
stats: '$25.6k',
title: "Total Profit",
color: "secondary",
icon: "mdi-poll",
stats: "$25.6k",
change: 42,
subtitle: 'Weekly Project',
}
subtitle: "Weekly Project",
};
const newProject = {
title: 'New Project',
color: 'primary',
icon: 'mdi-briefcase-variant-outline',
stats: '862',
title: "New Project",
color: "primary",
icon: "mdi-briefcase-variant-outline",
stats: "862",
change: -18,
subtitle: 'Yearly Project',
}
subtitle: "Yearly Project",
};
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="4"
>
<AnalyticsAward />
<VCol cols="12" md="4">
<AnalyticsStorage />
</VCol>
<VCol
cols="12"
md="8"
>
<AnalyticsTransactions />
<VCol cols="12" md="8">
<AnalyticsMediaStatistic />
</VCol>
<VCol
cols="12"
md="4"
>
<VCol cols="12" md="4">
<AnalyticsWeeklyOverview />
</VCol>
<VCol
cols="12"
md="4"
>
<VCol cols="12" md="4">
<AnalyticsTotalEarning />
</VCol>
<VCol
cols="12"
md="4"
>
<VCol cols="12" md="4">
<VRow class="match-height">
<VCol
cols="12"
sm="6"
>
<VCol cols="12" sm="6">
<AnalyticsTotalProfitLineCharts />
</VCol>
<VCol
cols="12"
sm="6"
>
<VCol cols="12" sm="6">
<CardStatisticsVertical v-bind="totalProfit" />
</VCol>
<VCol
cols="12"
sm="6"
>
<VCol cols="12" sm="6">
<CardStatisticsVertical v-bind="newProject" />
</VCol>
<VCol
cols="12"
sm="6"
>
<VCol cols="12" sm="6">
<AnalyticsBarCharts />
</VCol>
</VRow>
</VCol>
<VCol
cols="12"
md="4"
>
<VCol cols="12" md="4">
<AnalyticsSalesByCountries />
</VCol>
<VCol
cols="12"
md="8"
>
<VCol cols="12" md="8">
<AnalyticsDepositWithdraw />
</VCol>
<VCol cols="12">
<AnalyticsUserTable />
<AnalyticsProcesses />
</VCol>
</VRow>
</template>