292 lines
8.4 KiB
Vue
292 lines
8.4 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
<!-- github角标 -->
|
||
<github-corner class="github-corner" />
|
||
|
||
<el-card shadow="never">
|
||
<el-row justify="space-between">
|
||
<el-col :span="18" :xs="24">
|
||
<div class="flex h-full items-center">
|
||
<img
|
||
class="w-20 h-20 mr-5 rounded-full"
|
||
:src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
|
||
/>
|
||
<div>
|
||
<p>{{ greetings }}</p>
|
||
<p class="text-sm text-gray">
|
||
今日天气晴朗，气温在15℃至25℃之间，东南风。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="6" :xs="24">
|
||
<div class="flex h-full items-center justify-around">
|
||
<el-statistic :value="99">
|
||
<template #title>
|
||
<div class="flex items-center">
|
||
<svg-icon icon-class="message" size="20px" />
|
||
<span class="text-[16px] ml-1">消息</span>
|
||
</div>
|
||
</template>
|
||
</el-statistic>
|
||
|
||
<el-statistic :value="50">
|
||
<template #title>
|
||
<div class="flex items-center">
|
||
<svg-icon icon-class="todolist" size="20px" />
|
||
<span class="text-[16px] ml-1">待办</span>
|
||
</div>
|
||
</template>
|
||
<template #suffix>/100</template>
|
||
</el-statistic>
|
||
|
||
<el-statistic :value="10">
|
||
<template #title>
|
||
<div class="flex items-center">
|
||
<svg-icon icon-class="project" size="20px" />
|
||
<span class="text-[16px] ml-1">项目</span>
|
||
</div>
|
||
</template>
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- 数据卡片 -->
|
||
<el-row :gutter="10" class="mt-3">
|
||
<el-col :xs="24" :sm="12" :lg="6">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-[var(--el-text-color-secondary)]">访客数</span>
|
||
<el-tag type="success">日</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="flex items-center justify-between mt-5">
|
||
<div class="text-lg text-right">
|
||
{{ Math.round(visitCountOutput) }}
|
||
</div>
|
||
<svg-icon icon-class="visit" size="2em" />
|
||
</div>
|
||
|
||
<div
|
||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||
>
|
||
<span> 总访客数 </span>
|
||
<span> {{ Math.round(visitCountOutput * 15) }} </span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!--消息数-->
|
||
<el-col :xs="24" :sm="12" :lg="6">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-[var(--el-text-color-secondary)]">IP数</span>
|
||
<el-tag type="success">日</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="flex items-center justify-between mt-5">
|
||
<div class="text-lg text-right">
|
||
{{ Math.round(dauCountOutput) }}
|
||
</div>
|
||
<svg-icon icon-class="ip" size="2em" />
|
||
</div>
|
||
|
||
<div
|
||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||
>
|
||
<span> 总IP数 </span>
|
||
<span> {{ Math.round(dauCountOutput) }} </span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!--销售额-->
|
||
<el-col :xs="24" :sm="12" :lg="6">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-[var(--el-text-color-secondary)]">销售额</span>
|
||
<el-tag>月</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="flex items-center justify-between mt-5">
|
||
<div class="text-lg text-right">
|
||
{{ Math.round(amountOutput) }}
|
||
</div>
|
||
<svg-icon icon-class="money" size="2em" />
|
||
</div>
|
||
|
||
<div
|
||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||
>
|
||
<span> 总销售额 </span>
|
||
<span> {{ Math.round(amountOutput * 15) }} </span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!--订单量-->
|
||
<el-col :xs="24" :sm="12" :lg="6">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-[var(--el-text-color-secondary)]">订单量</span>
|
||
<el-tag type="danger">季</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="flex items-center justify-between mt-5">
|
||
<div class="text-lg text-right">
|
||
{{ Math.round(orderCountOutput) }}
|
||
</div>
|
||
<svg-icon icon-class="order" size="2em" />
|
||
</div>
|
||
|
||
<div
|
||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||
>
|
||
<span> 总订单量 </span>
|
||
<span> {{ Math.round(orderCountOutput * 15) }} </span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- Echarts 图表 -->
|
||
<el-row :gutter="10" class="mt-3">
|
||
<el-col :sm="24" :lg="8" class="mb-2">
|
||
<BarChart
|
||
id="barChart"
|
||
height="400px"
|
||
width="100%"
|
||
class="bg-[var(--el-bg-color-overlay)]"
|
||
/>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :sm="12" :lg="8" class="mb-2">
|
||
<PieChart
|
||
id="pieChart"
|
||
height="400px"
|
||
width="100%"
|
||
class="bg-[var(--el-bg-color-overlay)]"
|
||
/>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :sm="12" :lg="8" class="mb-2">
|
||
<RadarChart
|
||
id="radarChart"
|
||
height="400px"
|
||
width="100%"
|
||
class="bg-[var(--el-bg-color-overlay)]"
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
defineOptions({
|
||
name: "Dashboard",
|
||
inheritAttrs: false,
|
||
});
|
||
|
||
import { useUserStore } from "@/store/modules/user";
|
||
import { useTransition, TransitionPresets } from "@vueuse/core";
|
||
|
||
const userStore = useUserStore();
|
||
const date: Date = new Date();
|
||
|
||
const greetings = computed(() => {
|
||
const hours = date.getHours();
|
||
if (hours >= 6 && hours < 8) {
|
||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
|
||
} else if (hours >= 8 && hours < 12) {
|
||
return "上午好，" + useUserStore().user.nickname + "！";
|
||
} else if (hours >= 12 && hours < 18) {
|
||
return "下午好，" + useUserStore().user.nickname + "！";
|
||
} else if (hours >= 18 && hours < 24) {
|
||
return "晚上好，" + useUserStore().user.nickname + "！";
|
||
} else if (hours >= 0 && hours < 6) {
|
||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
|
||
}
|
||
});
|
||
|
||
const duration = 5000;
|
||
|
||
// 销售额
|
||
const amount = ref(0);
|
||
const amountOutput = useTransition(amount, {
|
||
duration: duration,
|
||
transition: TransitionPresets.easeOutExpo,
|
||
});
|
||
amount.value = 2000;
|
||
|
||
// 访客数
|
||
const visitCount = ref(0);
|
||
const visitCountOutput = useTransition(visitCount, {
|
||
duration: duration,
|
||
transition: TransitionPresets.easeOutExpo,
|
||
});
|
||
visitCount.value = 2000;
|
||
|
||
// IP数
|
||
const dauCount = ref(0);
|
||
const dauCountOutput = useTransition(dauCount, {
|
||
duration: duration,
|
||
transition: TransitionPresets.easeOutExpo,
|
||
});
|
||
dauCount.value = 2000;
|
||
|
||
// 订单量
|
||
const orderCount = ref(0);
|
||
const orderCountOutput = useTransition(orderCount, {
|
||
duration: duration,
|
||
transition: TransitionPresets.easeOutExpo,
|
||
});
|
||
orderCount.value = 2000;
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dashboard-container {
|
||
position: relative;
|
||
padding: 24px;
|
||
|
||
.user-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.github-corner {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
border: 0;
|
||
}
|
||
|
||
.data-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
font-weight: bold;
|
||
color: var(--el-text-color-regular);
|
||
background: var(--el-bg-color-overlay);
|
||
border-color: var(--el-border-color);
|
||
box-shadow: var(--el-box-shadow-dark);
|
||
}
|
||
|
||
.svg-icon {
|
||
fill: currentcolor !important;
|
||
}
|
||
}
|
||
</style>
|