mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 15:36:49 +08:00
fix dashboard
This commit is contained in:
jxxghp
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
+4
-50
@@ -1,32 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
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 AnalyticsMediaStatistic from "@/views/dashboard/AnalyticsMediaStatistic.vue";
|
||||||
import AnalyticsProcesses from "@/views/dashboard/AnalyticsProcesses.vue";
|
import AnalyticsProcesses from "@/views/dashboard/AnalyticsProcesses.vue";
|
||||||
import AnalyticsSalesByCountries from "@/views/dashboard/AnalyticsSalesByCountries.vue";
|
import AnalyticsScheduler from "@/views/dashboard/AnalyticsScheduler.vue";
|
||||||
|
import AnalyticsSpeed from "@/views/dashboard/AnalyticsSpeed.vue";
|
||||||
import AnalyticsStorage from "@/views/dashboard/AnalyticsStorage.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";
|
import AnalyticsWeeklyOverview from "@/views/dashboard/AnalyticsWeeklyOverview.vue";
|
||||||
|
|
||||||
const totalProfit = {
|
|
||||||
title: "Total Profit",
|
|
||||||
color: "secondary",
|
|
||||||
icon: "mdi-poll",
|
|
||||||
stats: "$25.6k",
|
|
||||||
change: 42,
|
|
||||||
subtitle: "Weekly Project",
|
|
||||||
};
|
|
||||||
|
|
||||||
const newProject = {
|
|
||||||
title: "New Project",
|
|
||||||
color: "primary",
|
|
||||||
icon: "mdi-briefcase-variant-outline",
|
|
||||||
stats: "862",
|
|
||||||
change: -18,
|
|
||||||
subtitle: "Yearly Project",
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -44,35 +22,11 @@ const newProject = {
|
|||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
<VCol cols="12" md="4">
|
<VCol cols="12" md="4">
|
||||||
<AnalyticsTotalEarning />
|
<AnalyticsSpeed />
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
<VCol cols="12" md="4">
|
<VCol cols="12" md="4">
|
||||||
<VRow class="match-height">
|
<AnalyticsScheduler />
|
||||||
<VCol cols="12" sm="6">
|
|
||||||
<AnalyticsTotalProfitLineCharts />
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol cols="12" sm="6">
|
|
||||||
<CardStatisticsVertical v-bind="totalProfit" />
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol cols="12" sm="6">
|
|
||||||
<CardStatisticsVertical v-bind="newProject" />
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol cols="12" sm="6">
|
|
||||||
<AnalyticsBarCharts />
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol cols="12" md="4">
|
|
||||||
<AnalyticsSalesByCountries />
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol cols="12" md="8">
|
|
||||||
<AnalyticsDepositWithdraw />
|
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
<VCol cols="12">
|
<VCol cols="12">
|
||||||
|
|||||||
@@ -1,197 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import americanBank from '@images/logos/american-bank.png'
|
|
||||||
import aws from '@images/logos/aws.png'
|
|
||||||
import citiBank from '@images/logos/citi-bank.png'
|
|
||||||
import digitalOcean from '@images/logos/digital-ocean.png'
|
|
||||||
import github from '@images/logos/github.png'
|
|
||||||
import google from '@images/logos/google.png'
|
|
||||||
import gumroad from '@images/logos/gumroad.png'
|
|
||||||
import mastercardLabel from '@images/logos/mastercard-label.png'
|
|
||||||
import slack from '@images/logos/slack.png'
|
|
||||||
import stripe from '@images/logos/stripe.png'
|
|
||||||
|
|
||||||
const deposits = [
|
|
||||||
{
|
|
||||||
title: 'Gumroad Account',
|
|
||||||
subtitle: 'Sell UI Kit',
|
|
||||||
amount: '+$4,650',
|
|
||||||
logo: gumroad,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Mastercard',
|
|
||||||
subtitle: 'Wallet deposit',
|
|
||||||
amount: '+$92,705',
|
|
||||||
logo: mastercardLabel,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Stripe Account',
|
|
||||||
subtitle: 'iOS Application',
|
|
||||||
amount: '+$957',
|
|
||||||
logo: stripe,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'American Bank',
|
|
||||||
subtitle: 'American Bank',
|
|
||||||
amount: '+$6,837',
|
|
||||||
logo: americanBank,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Bank Account',
|
|
||||||
subtitle: 'Wallet deposit',
|
|
||||||
amount: '+$8,934',
|
|
||||||
logo: citiBank,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const withdraws = [
|
|
||||||
{
|
|
||||||
title: 'Google Adsense',
|
|
||||||
subtitle: 'Paypal deposit',
|
|
||||||
amount: '-$145',
|
|
||||||
logo: google,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Github Enterprise',
|
|
||||||
subtitle: 'Security & compliance',
|
|
||||||
amount: '-$1870',
|
|
||||||
logo: github,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Upgrade Slack Plan',
|
|
||||||
subtitle: 'Debit card deposit',
|
|
||||||
amount: '-$450',
|
|
||||||
logo: slack,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Digital Ocean',
|
|
||||||
subtitle: 'Cloud Hosting',
|
|
||||||
amount: '-$540',
|
|
||||||
logo: digitalOcean,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'AWS Account',
|
|
||||||
subtitle: 'Choosing a Cloud Platform',
|
|
||||||
amount: '-$21',
|
|
||||||
logo: aws,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VCard>
|
|
||||||
<VRow no-gutters>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="6"
|
|
||||||
>
|
|
||||||
<VCardItem>
|
|
||||||
<VCardTitle>Deposit</VCardTitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<a
|
|
||||||
href="javascript:void(0)"
|
|
||||||
class="text-sm font-weight-medium"
|
|
||||||
>View All</a>
|
|
||||||
</template>
|
|
||||||
</VCardItem>
|
|
||||||
|
|
||||||
<VCardText>
|
|
||||||
<VList class="card-list">
|
|
||||||
<VListItem
|
|
||||||
v-for="deposit in deposits"
|
|
||||||
:key="deposit.logo"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<VAvatar
|
|
||||||
start
|
|
||||||
rounded
|
|
||||||
>
|
|
||||||
<VImg
|
|
||||||
:height="29"
|
|
||||||
:width="28"
|
|
||||||
:src="deposit.logo"
|
|
||||||
/>
|
|
||||||
</VAvatar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<VListItemTitle class="text-sm font-weight-medium mb-1">
|
|
||||||
{{ deposit.title }}
|
|
||||||
</VListItemTitle>
|
|
||||||
<VListItemSubtitle class="text-xs">
|
|
||||||
{{ deposit.subtitle }}
|
|
||||||
</VListItemSubtitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<VListItemAction class="text-success font-weight-medium">
|
|
||||||
{{ deposit.amount }}
|
|
||||||
</VListItemAction>
|
|
||||||
</template>
|
|
||||||
</VListItem>
|
|
||||||
</VList>
|
|
||||||
</VCardText>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VDivider
|
|
||||||
:vertical="$vuetify.display.mdAndUp"
|
|
||||||
:inset="$vuetify.display.mdAndUp"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="6"
|
|
||||||
>
|
|
||||||
<VCardItem>
|
|
||||||
<VCardTitle>Withdraw</VCardTitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<a
|
|
||||||
href="javascript:void(0)"
|
|
||||||
class="text-sm font-weight-medium"
|
|
||||||
>View All</a>
|
|
||||||
</template>
|
|
||||||
</VCardItem>
|
|
||||||
|
|
||||||
<VCardText>
|
|
||||||
<VList class="card-list">
|
|
||||||
<VListItem
|
|
||||||
v-for="withdraw in withdraws"
|
|
||||||
:key="withdraw.logo"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<VAvatar
|
|
||||||
start
|
|
||||||
rounded
|
|
||||||
>
|
|
||||||
<VImg
|
|
||||||
:height="29"
|
|
||||||
:width="28"
|
|
||||||
:src="withdraw.logo"
|
|
||||||
/>
|
|
||||||
</VAvatar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<VListItemTitle class="text-sm font-weight-medium mb-1">
|
|
||||||
{{ withdraw.title }}
|
|
||||||
</VListItemTitle>
|
|
||||||
<VListItemSubtitle class="text-xs">
|
|
||||||
{{ withdraw.subtitle }}
|
|
||||||
</VListItemSubtitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<VListItemAction class="text-error font-weight-medium">
|
|
||||||
{{ withdraw.amount }}
|
|
||||||
</VListItemAction>
|
|
||||||
</template>
|
|
||||||
</VListItem>
|
|
||||||
</VList>
|
|
||||||
</VCardText>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</VCard>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.card-list {
|
|
||||||
--v-card-list-gap: 1.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -55,12 +55,6 @@ onMounted(() => {
|
|||||||
<VCard>
|
<VCard>
|
||||||
<VCardItem>
|
<VCardItem>
|
||||||
<VCardTitle>媒体统计</VCardTitle>
|
<VCardTitle>媒体统计</VCardTitle>
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<div class="me-n3">
|
|
||||||
<MoreBtn />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</VCardItem>
|
</VCardItem>
|
||||||
|
|
||||||
<VCardText>
|
<VCardText>
|
||||||
|
|||||||
@@ -1,112 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const salesByCountries = [
|
|
||||||
{
|
|
||||||
abbr: 'US',
|
|
||||||
amount: '$8,656k',
|
|
||||||
country: 'United states of america',
|
|
||||||
change: '+25.8%',
|
|
||||||
sales: '894k',
|
|
||||||
color: 'success',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
abbr: 'UK',
|
|
||||||
amount: '$2,415k',
|
|
||||||
country: 'United kingdom',
|
|
||||||
change: '-6.2%',
|
|
||||||
sales: '645k',
|
|
||||||
color: 'error',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
abbr: 'IN',
|
|
||||||
amount: '$865k',
|
|
||||||
country: 'India',
|
|
||||||
change: '+12.4%',
|
|
||||||
sales: '148k',
|
|
||||||
color: 'warning',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
abbr: 'JA',
|
|
||||||
amount: '$745k',
|
|
||||||
country: 'Japan',
|
|
||||||
change: '-11.9%',
|
|
||||||
sales: '86k',
|
|
||||||
color: 'secondary',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
abbr: 'KO',
|
|
||||||
amount: '$45k',
|
|
||||||
country: 'Korea',
|
|
||||||
change: '+16.2%',
|
|
||||||
sales: '42k',
|
|
||||||
color: 'error',
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VCard>
|
|
||||||
<VCardItem>
|
|
||||||
<VCardTitle>Sales by Countries</VCardTitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<div class="me-n3">
|
|
||||||
<MoreBtn />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</VCardItem>
|
|
||||||
|
|
||||||
<VCardText>
|
|
||||||
<VList class="card-list">
|
|
||||||
<VListItem
|
|
||||||
v-for="data in salesByCountries"
|
|
||||||
:key="data.country"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<VAvatar
|
|
||||||
size="40"
|
|
||||||
variant="tonal"
|
|
||||||
:color="data.color"
|
|
||||||
class="me-3"
|
|
||||||
>
|
|
||||||
{{ data.abbr }}
|
|
||||||
</VAvatar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<VListItemTitle class="mb-1">
|
|
||||||
<span class="text-sm font-weight-medium">{{ data.amount }}</span>
|
|
||||||
<VIcon
|
|
||||||
size="22"
|
|
||||||
:color="data.change.charAt(0) === '+' ? 'success' : 'error'"
|
|
||||||
class="mx-1"
|
|
||||||
>
|
|
||||||
{{ data.change.charAt(0) === '+' ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
|
|
||||||
</VIcon>
|
|
||||||
<span :class="`text-xs ${data.change.charAt(0) === '+' ? 'text-success' : 'text-error'}`">
|
|
||||||
{{ data.change.slice(1) }}
|
|
||||||
</span>
|
|
||||||
</VListItemTitle>
|
|
||||||
|
|
||||||
<VListItemSubtitle class="text-xs">
|
|
||||||
{{ data.country }}
|
|
||||||
</VListItemSubtitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-weight-medium">
|
|
||||||
{{ data.sales }}
|
|
||||||
</h4>
|
|
||||||
<span class="text-xs text-medium-emphasis">Sales</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</VListItem>
|
|
||||||
</VList>
|
|
||||||
</VCardText>
|
|
||||||
</VCard>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.card-list {
|
|
||||||
--v-card-list-gap: 1.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const salesByCountries = [
|
||||||
|
{
|
||||||
|
abbr: "CC",
|
||||||
|
amount: "CookieCloud同步",
|
||||||
|
country: "2小时5分钟后",
|
||||||
|
sales: "等待",
|
||||||
|
color: "success",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
abbr: "刷",
|
||||||
|
amount: "订阅刷新",
|
||||||
|
country: "30分钟后",
|
||||||
|
sales: "运行中",
|
||||||
|
color: "error",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
abbr: "搜",
|
||||||
|
amount: "订阅搜索",
|
||||||
|
country: "12小时后",
|
||||||
|
sales: "等待",
|
||||||
|
color: "error",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
abbr: "豆",
|
||||||
|
amount: "豆瓣想看同步",
|
||||||
|
country: "25分钟后",
|
||||||
|
sales: "运行中",
|
||||||
|
color: "warning",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
abbr: "下",
|
||||||
|
amount: "下载文件整理",
|
||||||
|
country: "每隔5分钟",
|
||||||
|
sales: "等待",
|
||||||
|
color: "secondary",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard>
|
||||||
|
<VCardItem>
|
||||||
|
<VCardTitle>后台任务</VCardTitle>
|
||||||
|
</VCardItem>
|
||||||
|
|
||||||
|
<VCardText>
|
||||||
|
<VList class="card-list">
|
||||||
|
<VListItem v-for="data in salesByCountries" :key="data.country">
|
||||||
|
<template #prepend>
|
||||||
|
<VAvatar size="40" variant="tonal" :color="data.color" class="me-3">
|
||||||
|
{{ data.abbr }}
|
||||||
|
</VAvatar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<VListItemTitle class="mb-1">
|
||||||
|
<span class="text-sm font-weight-medium">{{ data.amount }}</span>
|
||||||
|
</VListItemTitle>
|
||||||
|
|
||||||
|
<VListItemSubtitle class="text-xs">
|
||||||
|
{{ data.country }}
|
||||||
|
</VListItemSubtitle>
|
||||||
|
|
||||||
|
<template #append>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-weight-medium">
|
||||||
|
{{ data.sales }}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VListItem>
|
||||||
|
</VList>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card-list {
|
||||||
|
--v-card-list-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const earnings = [
|
||||||
|
{
|
||||||
|
avatar: "mdi-upload",
|
||||||
|
title: "总上传量",
|
||||||
|
amount: "193 GB",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar: "mdi-download",
|
||||||
|
title: "总下载量",
|
||||||
|
amount: "12,235 GB",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar: "mdi-content-save",
|
||||||
|
title: "磁盘剩余空间",
|
||||||
|
amount: "1.24 TB",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard>
|
||||||
|
<VCardItem>
|
||||||
|
<VCardTitle>实时速率</VCardTitle>
|
||||||
|
|
||||||
|
<template #append>
|
||||||
|
<div class="me-n3">
|
||||||
|
<MoreBtn />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VCardItem>
|
||||||
|
|
||||||
|
<VCardText class="pt-4">
|
||||||
|
<div class="d-flex align-center">
|
||||||
|
<h4 class="text-h4 me-2">
|
||||||
|
↑21 KB/s <br />
|
||||||
|
↓24,895 KB/s
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<VList class="card-list mt-9">
|
||||||
|
<VListItem v-for="earning in earnings" :key="earning.title">
|
||||||
|
<template #prepend>
|
||||||
|
<VIcon rounded :icon="earning.avatar" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<VListItemTitle class="text-sm font-weight-medium mb-1">
|
||||||
|
{{ earning.title }}
|
||||||
|
</VListItemTitle>
|
||||||
|
|
||||||
|
<template #append>
|
||||||
|
<div>
|
||||||
|
<h6 class="text-sm font-weight-medium mb-2">
|
||||||
|
{{ earning.amount }}
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VListItem>
|
||||||
|
</VList>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card-list {
|
||||||
|
--v-card-list-gap: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { formatFileSize } from "@/@core/utils/formatters";
|
import { formatFileSize } from "@/@core/utils/formatters";
|
||||||
import api from "@/api";
|
import api from "@/api";
|
||||||
|
import trophy from "@images/misc/storage.png";
|
||||||
import triangleDark from "@images/misc/triangle-dark.png";
|
import triangleDark from "@images/misc/triangle-dark.png";
|
||||||
import triangleLight from "@images/misc/triangle-light.png";
|
import triangleLight from "@images/misc/triangle-light.png";
|
||||||
import trophy from "@images/misc/trophy.png";
|
|
||||||
import { useTheme } from "vuetify";
|
import { useTheme } from "vuetify";
|
||||||
|
|
||||||
const { global } = useTheme();
|
const { global } = useTheme();
|
||||||
|
|||||||
@@ -1,99 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import aviato from '@images/logos/aviato.png'
|
|
||||||
import bitbank from '@images/logos/bitbank.png'
|
|
||||||
import zipcar from '@images/logos/zipcar.png'
|
|
||||||
|
|
||||||
const earnings = [
|
|
||||||
{
|
|
||||||
avatar: zipcar,
|
|
||||||
title: 'Zipcar',
|
|
||||||
subtitle: 'Vuejs, React & HTML',
|
|
||||||
amount: '$24,895.65',
|
|
||||||
progress: 'primary',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: bitbank,
|
|
||||||
title: 'Bitbank',
|
|
||||||
subtitle: 'Sketch, Figma & XD',
|
|
||||||
amount: '$8,6500.20',
|
|
||||||
progress: 'info',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: aviato,
|
|
||||||
title: 'Aviato',
|
|
||||||
subtitle: 'HTML & Anguler',
|
|
||||||
amount: '$1,2450.80',
|
|
||||||
progress: 'secondary',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VCard>
|
|
||||||
<VCardItem>
|
|
||||||
<VCardTitle>Total Earning</VCardTitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<div class="me-n3">
|
|
||||||
<MoreBtn />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</VCardItem>
|
|
||||||
|
|
||||||
<VCardText class="pt-4">
|
|
||||||
<div class="d-flex align-center">
|
|
||||||
<h4 class="text-h4 me-2">
|
|
||||||
$24,895
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<span class="text-success">
|
|
||||||
<VIcon
|
|
||||||
size="30"
|
|
||||||
icon="mdi-menu-up"
|
|
||||||
/>
|
|
||||||
<span>10%</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs">Compared to $84,325 last year</span>
|
|
||||||
|
|
||||||
<VList class="card-list mt-9">
|
|
||||||
<VListItem
|
|
||||||
v-for="earning in earnings"
|
|
||||||
:key="earning.title"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<VAvatar
|
|
||||||
rounded
|
|
||||||
:image="earning.avatar"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<VListItemTitle class="text-sm font-weight-medium mb-1">
|
|
||||||
{{ earning.title }}
|
|
||||||
</VListItemTitle>
|
|
||||||
<VListItemSubtitle class="text-xs">
|
|
||||||
{{ earning.subtitle }}
|
|
||||||
</VListItemSubtitle>
|
|
||||||
|
|
||||||
<template #append>
|
|
||||||
<div>
|
|
||||||
<h6 class="text-sm font-weight-medium mb-2">
|
|
||||||
{{ earning.amount }}
|
|
||||||
</h6>
|
|
||||||
<VProgressLinear
|
|
||||||
:color="earning.progress"
|
|
||||||
model-value="80"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</VListItem>
|
|
||||||
</VList>
|
|
||||||
</VCardText>
|
|
||||||
</VCard>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.card-list {
|
|
||||||
--v-card-list-gap: 2.625rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import VueApexCharts from 'vue3-apexcharts'
|
|
||||||
import { useTheme } from 'vuetify'
|
|
||||||
import { hexToRgb } from '@layouts/utils'
|
|
||||||
|
|
||||||
const vuetifyTheme = useTheme()
|
|
||||||
|
|
||||||
const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
|
|
||||||
const variableTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.variables)
|
|
||||||
|
|
||||||
const series = [
|
|
||||||
{
|
|
||||||
data: [0, 20, 5, 30, 15, 45],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
|
|
||||||
return {
|
|
||||||
chart: {
|
|
||||||
parentHeightOffset: 0,
|
|
||||||
toolbar: { show: false },
|
|
||||||
},
|
|
||||||
tooltip: { enabled: false },
|
|
||||||
grid: {
|
|
||||||
borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
|
|
||||||
strokeDashArray: 6,
|
|
||||||
xaxis: {
|
|
||||||
lines: { show: true },
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
lines: { show: false },
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
top: -10,
|
|
||||||
left: -7,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
width: 3,
|
|
||||||
lineCap: 'butt',
|
|
||||||
curve: 'straight',
|
|
||||||
},
|
|
||||||
colors: [currentTheme.value.primary],
|
|
||||||
markers: {
|
|
||||||
size: 6,
|
|
||||||
offsetY: 4,
|
|
||||||
offsetX: -2,
|
|
||||||
strokeWidth: 3,
|
|
||||||
colors: ['transparent'],
|
|
||||||
strokeColors: 'transparent',
|
|
||||||
discrete: [
|
|
||||||
{
|
|
||||||
size: 5.5,
|
|
||||||
seriesIndex: 0,
|
|
||||||
strokeColor: currentTheme.value.primary,
|
|
||||||
fillColor: currentTheme.value.surface,
|
|
||||||
dataPointIndex: series[0].data.length - 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
hover: { size: 7 },
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
labels: { show: false },
|
|
||||||
axisTicks: { show: false },
|
|
||||||
axisBorder: { show: false },
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
labels: { show: false },
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<VCard>
|
|
||||||
<VCardText>
|
|
||||||
<h6 class="text-h6">
|
|
||||||
$86.4k
|
|
||||||
</h6>
|
|
||||||
<VueApexCharts
|
|
||||||
type="line"
|
|
||||||
:options="chartOptions"
|
|
||||||
:series="series"
|
|
||||||
:height="100"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="text-center font-weight-medium mb-0">
|
|
||||||
Total Profit
|
|
||||||
</p>
|
|
||||||
</VCardText>
|
|
||||||
</VCard>
|
|
||||||
</template>
|
|
||||||
@@ -1,90 +1,98 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import VueApexCharts from 'vue3-apexcharts'
|
import { hexToRgb } from "@layouts/utils";
|
||||||
import { useTheme } from 'vuetify'
|
import VueApexCharts from "vue3-apexcharts";
|
||||||
import { hexToRgb } from '@layouts/utils'
|
import { useTheme } from "vuetify";
|
||||||
|
|
||||||
const vuetifyTheme = useTheme()
|
const vuetifyTheme = useTheme();
|
||||||
|
|
||||||
const options = controlledComputed(() => vuetifyTheme.name.value, () => {
|
const options = controlledComputed(
|
||||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
() => vuetifyTheme.name.value,
|
||||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
() => {
|
||||||
|
const currentTheme = ref(vuetifyTheme.current.value.colors);
|
||||||
|
const variableTheme = ref(vuetifyTheme.current.value.variables);
|
||||||
|
|
||||||
const disabledColor = `rgba(${hexToRgb(currentTheme.value['on-surface'])},${variableTheme.value['disabled-opacity']})`
|
const disabledColor = `rgba(${hexToRgb(currentTheme.value["on-surface"])},${
|
||||||
const borderColor = `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`
|
variableTheme.value["disabled-opacity"]
|
||||||
|
})`;
|
||||||
|
const borderColor = `rgba(${hexToRgb(String(variableTheme.value["border-color"]))},${
|
||||||
|
variableTheme.value["border-opacity"]
|
||||||
|
})`;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
chart: {
|
chart: {
|
||||||
parentHeightOffset: 0,
|
parentHeightOffset: 0,
|
||||||
toolbar: { show: false },
|
toolbar: { show: false },
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
borderRadius: 9,
|
|
||||||
distributed: true,
|
|
||||||
columnWidth: '40%',
|
|
||||||
endingShape: 'rounded',
|
|
||||||
startingShape: 'rounded',
|
|
||||||
},
|
},
|
||||||
},
|
plotOptions: {
|
||||||
stroke: {
|
bar: {
|
||||||
width: 2,
|
borderRadius: 9,
|
||||||
colors: [currentTheme.value.surface],
|
distributed: true,
|
||||||
},
|
columnWidth: "40%",
|
||||||
legend: { show: false },
|
endingShape: "rounded",
|
||||||
grid: {
|
startingShape: "rounded",
|
||||||
borderColor,
|
|
||||||
strokeDashArray: 7,
|
|
||||||
padding: {
|
|
||||||
top: -1,
|
|
||||||
right: 0,
|
|
||||||
left: -12,
|
|
||||||
bottom: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: { enabled: false },
|
|
||||||
colors: [
|
|
||||||
currentTheme.value['grey-100'],
|
|
||||||
currentTheme.value['grey-100'],
|
|
||||||
currentTheme.value['grey-100'],
|
|
||||||
currentTheme.value.primary,
|
|
||||||
currentTheme.value['grey-100'],
|
|
||||||
currentTheme.value['grey-100'],
|
|
||||||
],
|
|
||||||
states: {
|
|
||||||
hover: { filter: { type: 'none' } },
|
|
||||||
active: { filter: { type: 'none' } },
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
||||||
tickPlacement: 'on',
|
|
||||||
labels: { show: false },
|
|
||||||
crosshairs: { opacity: 0 },
|
|
||||||
axisTicks: { show: false },
|
|
||||||
axisBorder: { show: false },
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
show: true,
|
|
||||||
tickAmount: 4,
|
|
||||||
labels: {
|
|
||||||
offsetX: -17,
|
|
||||||
style: {
|
|
||||||
colors: disabledColor,
|
|
||||||
fontSize: '12px',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
formatter: (value: number) => `${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`,
|
|
||||||
},
|
},
|
||||||
},
|
stroke: {
|
||||||
}
|
width: 2,
|
||||||
})
|
colors: [currentTheme.value.surface],
|
||||||
|
},
|
||||||
|
legend: { show: false },
|
||||||
|
grid: {
|
||||||
|
borderColor,
|
||||||
|
strokeDashArray: 7,
|
||||||
|
padding: {
|
||||||
|
top: -1,
|
||||||
|
right: 0,
|
||||||
|
left: -12,
|
||||||
|
bottom: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
colors: [
|
||||||
|
currentTheme.value["grey-100"],
|
||||||
|
currentTheme.value["grey-100"],
|
||||||
|
currentTheme.value["grey-100"],
|
||||||
|
currentTheme.value.primary,
|
||||||
|
currentTheme.value["grey-100"],
|
||||||
|
currentTheme.value["grey-100"],
|
||||||
|
],
|
||||||
|
states: {
|
||||||
|
hover: { filter: { type: "none" } },
|
||||||
|
active: { filter: { type: "none" } },
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||||
|
tickPlacement: "on",
|
||||||
|
labels: { show: false },
|
||||||
|
crosshairs: { opacity: 0 },
|
||||||
|
axisTicks: { show: false },
|
||||||
|
axisBorder: { show: false },
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: true,
|
||||||
|
tickAmount: 4,
|
||||||
|
labels: {
|
||||||
|
offsetX: -17,
|
||||||
|
style: {
|
||||||
|
colors: disabledColor,
|
||||||
|
fontSize: "12px",
|
||||||
|
},
|
||||||
|
|
||||||
const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }]
|
formatter: (value: number) =>
|
||||||
|
`${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VCard>
|
<VCard>
|
||||||
<VCardItem>
|
<VCardItem>
|
||||||
<VCardTitle>Weekly Overview</VCardTitle>
|
<VCardTitle>最近入库</VCardTitle>
|
||||||
|
|
||||||
<template #append>
|
<template #append>
|
||||||
<div class="me-n3">
|
<div class="me-n3">
|
||||||
@@ -94,25 +102,14 @@ const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }]
|
|||||||
</VCardItem>
|
</VCardItem>
|
||||||
|
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<VueApexCharts
|
<VueApexCharts type="bar" :options="options" :series="series" :height="220" />
|
||||||
type="bar"
|
|
||||||
:options="options"
|
|
||||||
:series="series"
|
|
||||||
:height="220"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="d-flex align-center mb-3">
|
<div class="d-flex align-center mb-3">
|
||||||
<h5 class="text-h5 me-4">
|
<h5 class="text-h5 me-4">45</h5>
|
||||||
45%
|
<p>最近一周入库了 45 部影片 😎</p>
|
||||||
</h5>
|
|
||||||
<p>
|
|
||||||
Your sales performance is 45% 😎 better compared to last month
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<VBtn block>
|
<VBtn block> 查看详情 </VBtn>
|
||||||
Details
|
|
||||||
</VBtn>
|
|
||||||
</VCardText>
|
</VCardText>
|
||||||
</VCard>
|
</VCard>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user