tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 首页控制台优化

Browse Source 
Former-commit-id: 40345282d470d315585b052e0ae55cb1974e3e25
This commit is contained in:
haoxr
2023-01-23 01:19:17 +08:00
parent 08990b274c
commit d098fd85a2
4 changed files with 98 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/dashboard/components/BarChart.vue
View File

@@ -1,6 +1,9 @@
<!-- 线 + 柱混合图 -->
<template>
<div :id="id" :class="className" :style="{ height, width }" />
<el-card>
<template #header> 业绩柱状图 </template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<script setup lang="ts">
@@ -42,18 +45,6 @@ function initChart() {
const barChart = init(document.getElementById(props.id) as HTMLDivElement);
barChart.setOption({
title: {
show: true,
text: '业绩总览',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color: '#337ecc'
}
},
grid: {
left: '2%',
right: '2%',
@@ -72,7 +63,10 @@ function initChart() {
legend: {
x: 'center',
y: 'bottom',
data: ['收入', '毛利润', '收入增长率', '利润增长率']
data: ['收入', '毛利润', '收入增长率', '利润增长率'],
textStyle: {
color: '#999'
}
},
xAxis: [
{

22
src/views/dashboard/components/PieChart.vue
View File

@@ -1,6 +1,9 @@
<!-- 饼图 -->
<template>
<div :id="id" :class="className" :style="{ height, width }" />
<el-card>
<template #header> 产品分类饼图 </template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<script setup lang="ts">
@@ -41,18 +44,6 @@ function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement);
pieChart.setOption({
title: {
show: true,
text: '产品分类总览',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color: '#337ecc'
}
},
grid: {
left: '2%',
right: '2%',
@@ -60,7 +51,10 @@ function initChart() {
containLabel: true
},
legend: {
top: 'bottom'
top: 'bottom',
textStyle: {
color: '#999'
}
},
series: [
{

22
src/views/dashboard/components/RadarChart.vue
View File

@@ -1,6 +1,9 @@
<!-- 雷达图 -->
<template>
<div :id="id" :class="className" :style="{ height, width }" />
<el-card>
<template #header> 订单状态雷达图 </template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<script setup lang="ts">
@@ -41,18 +44,6 @@ function initChart() {
const radarChart = init(document.getElementById(props.id) as HTMLDivElement);
radarChart.setOption({
title: {
show: true,
text: '订单状态统计',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color: '#337ecc'
}
},
grid: {
left: '2%',
right: '2%',
@@ -62,7 +53,10 @@ function initChart() {
legend: {
x: 'center',
y: 'bottom',
data: ['预定数量', '下单数量', '发货数量']
data: ['预定数量', '下单数量', '发货数量'],
textStyle: {
color: '#999'
}
},
radar: {
// shape: 'circle',

83
src/views/dashboard/index.vue
View File

@@ -11,17 +11,77 @@ import PieChart from './components/PieChart.vue';
import RadarChart from './components/RadarChart.vue';
import CountUp from 'vue-countup-v3';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const date: Date = new Date();
const greetings = computed(() => {
if (date.getHours() >= 6 && date.getHours() < 12) {
return '晨起披衣出草堂，轩窗已自喜微凉🌞！';
} else if (date.getHours() >= 12 && date.getHours() < 18) {
return '下午好☕！';
} else if (date.getHours() >= 18 && date.getHours() < 24) {
return '晚上好🌃！';
} else if (date.getHours() >= 0 && date.getHours() < 6) {
return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！';
}
});
</script>
<template>
<div class="dashboard-container">
<!--github-->
<!-- github角标 -->
<github-corner class="github-corner" />
<!-- 数据 -->
<el-row :gutter="40" class="mb-[12px]">
<!--访问数-->
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<!-- 用户信息 -->
<el-row class="mb-[24px]">
<el-card class="w-full">
<div class="flex justify-between flex-wrap">
<div>
<img
class="user-avatar"
:src="userStore.avatar + '?imageView2/1/w/80/h/80'"
/>
<span class="ml-[5px] text-[14px]">
{{ userStore.nickname }}
</span>
</div>
<div class="leading-[40px]">
{{ greetings }}
</div>
<div class="space-x-2 pt-[5px]">
<el-link
target="_blank"
type="danger"
href="https://www.cnblogs.com/haoxianrui/p/16090029.html"
>官方0到1教程</el-link
>
<el-divider direction="vertical" />
<el-link
target="_blank"
type="success"
href="https://gitee.com/youlaiorg/vue3-element-admin"
>Gitee源码</el-link
>
<el-divider direction="vertical" />
<el-link
target="_blank"
type="primary"
href="https://github.com/youlaitech/vue3-element-admin"
>GitHub源码
</el-link>
</div>
</div>
</el-card>
</el-row>
<!-- 数据卡片 -->
<el-row :gutter="40" class="mb-[24px]">
<el-col :xs="24" :sm="12" :lg="6">
<div class="data-box">
<div
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
@@ -38,7 +98,7 @@ import CountUp from 'vue-countup-v3';
</el-col>
<!--消息数-->
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<el-col :xs="24" :sm="12" :lg="6">
<div class="data-box">
<div
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
@@ -54,7 +114,7 @@ import CountUp from 'vue-countup-v3';
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<el-col :xs="24" :sm="12" :lg="6">
<div class="data-box">
<div
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
@@ -69,7 +129,7 @@ import CountUp from 'vue-countup-v3';
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<el-col :xs="24" :sm="12" :lg="6">
<div class="data-box">
<div
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
@@ -87,7 +147,7 @@ import CountUp from 'vue-countup-v3';
</el-row>
<!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px">
<el-row :gutter="40">
<el-col :sm="24" :lg="8" class="mb-[12px]">
<BarChart
id="barChart"
@@ -122,6 +182,11 @@ import CountUp from 'vue-countup-v3';
.dashboard-container {
padding: 24px;
position: relative;
.user-avatar {
height: 40px;
widows: 40px;
border-radius: 50%;
}
.github-corner {
position: absolute;