mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-12 02:21:06 +08:00
fix dashboard
This commit is contained in:
jxxghp
BIN
src/assets/images/misc/storage.png
Normal file
BIN
src/assets/images/misc/storage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
@@ -1,32 +1,10 @@
|
||||
<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 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 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",
|
||||
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>
|
||||
|
||||
<template>
|
||||
@@ -44,35 +22,11 @@ const newProject = {
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="4">
|
||||
<AnalyticsTotalEarning />
|
||||
<AnalyticsSpeed />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="4">
|
||||
<VRow class="match-height">
|
||||
<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 />
|
||||
<AnalyticsScheduler />
|
||||
</VCol>
|
||||
|
||||
<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>
|
||||
<VCardItem>
|
||||
<VCardTitle>媒体统计</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<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>
|
||||
81
src/views/dashboard/AnalyticsScheduler.vue
Normal file
81
src/views/dashboard/AnalyticsScheduler.vue
Normal file
@@ -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>
|
||||
67
src/views/dashboard/AnalyticsSpeed.vue
Normal file
67
src/views/dashboard/AnalyticsSpeed.vue
Normal file
@@ -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">
|
||||
import { formatFileSize } from "@/@core/utils/formatters";
|
||||
import api from "@/api";
|
||||
import trophy from "@images/misc/storage.png";
|
||||
import triangleDark from "@images/misc/triangle-dark.png";
|
||||
import triangleLight from "@images/misc/triangle-light.png";
|
||||
import trophy from "@images/misc/trophy.png";
|
||||
import { useTheme } from "vuetify";
|
||||
|
||||
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">
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
import { hexToRgb } from "@layouts/utils";
|
||||
import VueApexCharts from "vue3-apexcharts";
|
||||
import { useTheme } from "vuetify";
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const vuetifyTheme = useTheme();
|
||||
|
||||
const options = controlledComputed(() => vuetifyTheme.name.value, () => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const options = controlledComputed(
|
||||
() => vuetifyTheme.name.value,
|
||||
() => {
|
||||
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 borderColor = `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`
|
||||
const disabledColor = `rgba(${hexToRgb(currentTheme.value["on-surface"])},${
|
||||
variableTheme.value["disabled-opacity"]
|
||||
})`;
|
||||
const borderColor = `rgba(${hexToRgb(String(variableTheme.value["border-color"]))},${
|
||||
variableTheme.value["border-opacity"]
|
||||
})`;
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 9,
|
||||
distributed: true,
|
||||
columnWidth: '40%',
|
||||
endingShape: 'rounded',
|
||||
startingShape: 'rounded',
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
},
|
||||
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',
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 9,
|
||||
distributed: true,
|
||||
columnWidth: "40%",
|
||||
endingShape: "rounded",
|
||||
startingShape: "rounded",
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Overview</VCardTitle>
|
||||
<VCardTitle>最近入库</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
@@ -94,25 +102,14 @@ const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }]
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="220"
|
||||
/>
|
||||
<VueApexCharts type="bar" :options="options" :series="series" :height="220" />
|
||||
|
||||
<div class="d-flex align-center mb-3">
|
||||
<h5 class="text-h5 me-4">
|
||||
45%
|
||||
</h5>
|
||||
<p>
|
||||
Your sales performance is 45% 😎 better compared to last month
|
||||
</p>
|
||||
<h5 class="text-h5 me-4">45</h5>
|
||||
<p>最近一周入库了 45 部影片 😎</p>
|
||||
</div>
|
||||
|
||||
<VBtn block>
|
||||
Details
|
||||
</VBtn>
|
||||
<VBtn block> 查看详情 </VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user