791 lines
18 KiB
Vue
791 lines
18 KiB
Vue
<template>
|
||
<div class="dashboard">
|
||
<!-- 欢迎区域 -->
|
||
<div class="welcome-section">
|
||
<div class="welcome-content">
|
||
<h1 class="welcome-title">欢迎回来！</h1>
|
||
<p class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作愉快</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stats-grid">
|
||
<div
|
||
v-for="(stat, index) in stats"
|
||
:key="index"
|
||
class="stat-card"
|
||
:class="stat.type"
|
||
>
|
||
<div class="stat-icon-wrapper">
|
||
<el-icon :size="28">
|
||
<component :is="stat.icon" />
|
||
</el-icon>
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-value">{{ stat.value }}</div>
|
||
<div class="stat-label">{{ stat.label }}</div>
|
||
</div>
|
||
<div
|
||
class="stat-trend"
|
||
:class="stat.change > 0 ? 'up' : stat.change < 0 ? 'down' : 'flat'"
|
||
>
|
||
<el-icon v-if="stat.change > 0" :size="14">
|
||
<ArrowUp />
|
||
</el-icon>
|
||
<el-icon v-else-if="stat.change < 0" :size="14">
|
||
<ArrowDown />
|
||
</el-icon>
|
||
<span>{{ stat.change > 0 ? "+" : "" }}{{ stat.change }}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表区域 -->
|
||
<!-- <div class="charts-section">
|
||
<div class="chart-card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">月收入走势</h3>
|
||
<el-dropdown trigger="click">
|
||
<el-button type="primary" link>
|
||
<el-icon>
|
||
<MoreFilled />
|
||
</el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item>查看详情</el-dropdown-item>
|
||
<el-dropdown-item>导出数据</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
<div class="chart-container">
|
||
<canvas id="lineChart" height="160"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">用户活跃分布</h3>
|
||
<el-dropdown trigger="click">
|
||
<el-button type="primary" link>
|
||
<el-icon>
|
||
<MoreFilled />
|
||
</el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item>查看详情</el-dropdown-item>
|
||
<el-dropdown-item>导出数据</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
<div class="chart-container">
|
||
<canvas id="barChart" height="160"></canvas>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 列表区域 -->
|
||
<div class="lists-section">
|
||
<div class="list-card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">待办任务</h3>
|
||
<el-button type="primary" link size="small">
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>
|
||
添加任务
|
||
</el-button>
|
||
</div>
|
||
<div class="list-content">
|
||
<div
|
||
v-for="(task, idx) in paginatedTasks"
|
||
:key="idx"
|
||
class="task-item"
|
||
:class="{ done: task.completed }"
|
||
>
|
||
<!-- <el-checkbox v-model="task.completed" @change="handleTaskChange(task)" /> -->
|
||
<div class="task-info">
|
||
<div class="task-title">
|
||
{{ task.title }}
|
||
<el-tag
|
||
:type="task.priorityTagType || getPriorityType(task.priority)"
|
||
size="small"
|
||
effect="plain"
|
||
:class="'priority-' + task.priority"
|
||
>
|
||
{{ task.priorityLabel || task.priority }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="task-meta">
|
||
<span class="task-date">
|
||
<el-icon><Clock /></el-icon>
|
||
{{ formatDate(task.date) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-empty
|
||
description="暂无待办任务"
|
||
:image-size="80"
|
||
/>
|
||
<div class="pagination-wrapper">
|
||
<el-pagination
|
||
v-model:current-page="taskCurrentPage"
|
||
:page-size="taskPageSize"
|
||
layout="prev, pager, next"
|
||
size="small"
|
||
@current-change="handleTaskPageChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">最新动态</h3>
|
||
<!-- <el-button type="primary" link size="small" @click="goToActivityLogs">
|
||
查看全部
|
||
</el-button> -->
|
||
</div>
|
||
<div class="list-content">
|
||
<div
|
||
v-for="(activity, idx) in paginatedActivityLogs"
|
||
:key="idx"
|
||
class="activity-item"
|
||
>
|
||
<div class="activity-icon" :class="activity.type">
|
||
<el-icon>
|
||
<component :is="getActivityIcon(activity.type)" />
|
||
</el-icon>
|
||
</div>
|
||
<div class="activity-info">
|
||
<div class="activity-text">
|
||
<span class="activity-module">{{ activity.operation }}</span>
|
||
<span class="activity-action">{{ activity.description }}</span>
|
||
</div>
|
||
<div class="activity-time">
|
||
{{ formatTime(activity.timestamp) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-empty
|
||
description="暂无动态"
|
||
:image-size="80"
|
||
/>
|
||
<div v-if="totalActivityLogs > pageSize" class="pagination-wrapper">
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
:total="totalActivityLogs"
|
||
layout="prev, pager, next"
|
||
size="small"
|
||
@current-change="handlePageChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, markRaw } from "vue";
|
||
import { Chart, registerables } from "chart.js";
|
||
import {
|
||
Money,
|
||
User,
|
||
ShoppingCart,
|
||
TrendCharts,
|
||
ArrowUp,
|
||
ArrowDown,
|
||
MoreFilled,
|
||
Plus,
|
||
Document,
|
||
Edit,
|
||
View,
|
||
} from "@element-plus/icons-vue";
|
||
import { getMenus } from "@/api/menu";
|
||
|
||
import { useAuthStore } from "@/stores/auth";
|
||
import { useDictStore } from "@/stores/dict";
|
||
|
||
Chart.register(...registerables);
|
||
|
||
|
||
// 当前日期
|
||
const currentDate = computed(() => {
|
||
const date = new Date();
|
||
const weekdays = [
|
||
"星期日",
|
||
"星期一",
|
||
"星期二",
|
||
"星期三",
|
||
"星期四",
|
||
"星期五",
|
||
"星期六",
|
||
];
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
const weekday = weekdays[date.getDay()];
|
||
return `${month}月${day}日 ${weekday}`;
|
||
});
|
||
|
||
//格式化时间
|
||
const formatDate = (date: string) => {
|
||
const d = new Date(date);
|
||
const month = d.getMonth() + 1;
|
||
const day = d.getDate();
|
||
return `${month}月${day}日`;
|
||
};
|
||
|
||
// 统计数据（使用 markRaw 避免图标组件被响应式化）
|
||
const stats = ref([
|
||
{
|
||
label: "知识库",
|
||
value: "0",
|
||
change: 0,
|
||
icon: markRaw(Document),
|
||
type: "knowledge",
|
||
},
|
||
{
|
||
label: "新用户",
|
||
value: "0",
|
||
change: 0,
|
||
icon: markRaw(User),
|
||
type: "users",
|
||
},
|
||
{
|
||
label: "员工数",
|
||
value: "0",
|
||
change: 0,
|
||
icon: markRaw(ShoppingCart),
|
||
type: "employees",
|
||
},
|
||
{
|
||
label: "租户数",
|
||
value: "0",
|
||
change: 0,
|
||
icon: markRaw(TrendCharts),
|
||
type: "tenants",
|
||
},
|
||
]);
|
||
|
||
// 任务相关数据
|
||
const tasks = ref([]);
|
||
const taskCurrentPage = ref(1);
|
||
const taskPageSize = ref(5);
|
||
|
||
// 活动日志相关数据
|
||
const activityLogs = ref([]);
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(5);
|
||
const totalActivityLogs = ref(0);
|
||
|
||
// 计算属性
|
||
const paginatedTasks = computed(() => {
|
||
const start = (taskCurrentPage.value - 1) * taskPageSize.value;
|
||
const end = start + taskPageSize.value;
|
||
return tasks.value.slice(start, end);
|
||
});
|
||
|
||
const paginatedActivityLogs = computed(() => {
|
||
const start = (currentPage.value - 1) * pageSize.value;
|
||
const end = start + pageSize.value;
|
||
return activityLogs.value.slice(start, end);
|
||
});
|
||
|
||
// 事件处理函数
|
||
const handleTaskPageChange = (page) => {
|
||
taskCurrentPage.value = page;
|
||
};
|
||
|
||
const handlePageChange = (page) => {
|
||
currentPage.value = page;
|
||
};
|
||
|
||
const getPriorityType = (priority) => {
|
||
const types = {
|
||
high: 'danger',
|
||
medium: 'warning',
|
||
low: 'info'
|
||
};
|
||
return types[priority] || 'info';
|
||
};
|
||
|
||
const getActivityIcon = (type) => {
|
||
const icons = {
|
||
operation: Edit,
|
||
access: View
|
||
};
|
||
return icons[type] || Document;
|
||
};
|
||
|
||
const authStore = useAuthStore();
|
||
|
||
// 格式化时间
|
||
const formatTime = (timestamp: string | Date) => {
|
||
if (!timestamp) return "-";
|
||
const date = new Date(timestamp);
|
||
if (isNaN(date.getTime())) return String(timestamp);
|
||
|
||
const now = new Date();
|
||
const diff = now.getTime() - date.getTime();
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
|
||
if (days < 1) {
|
||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||
if (hours < 1) {
|
||
const minutes = Math.floor(diff / (1000 * 60));
|
||
return `${minutes}分钟前`;
|
||
}
|
||
return `${hours}小时前`;
|
||
}
|
||
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||
const day = String(date.getDate()).padStart(2, "0");
|
||
const hours = String(date.getHours()).padStart(2, "0");
|
||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||
};
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
// 从auth store获取用户信息
|
||
const id = authStore.user.id;
|
||
console.log('用户ID:', id);
|
||
if (!id) {
|
||
console.error('用户ID不存在');
|
||
return;
|
||
}
|
||
|
||
const response = await getMenus(id);
|
||
} catch (error) {
|
||
console.error('获取菜单数据失败:', error);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.dashboard {
|
||
min-height: 100%;
|
||
background-color: var(--el-bg-color-page);
|
||
}
|
||
|
||
// 欢迎区域
|
||
.welcome-section {
|
||
margin-bottom: 16px;
|
||
padding: 32px;
|
||
background: linear-gradient(135deg, #3973ff 0%, #4f84ff 100%);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(6, 45, 163, 0.2);
|
||
|
||
.welcome-content {
|
||
.welcome-title {
|
||
margin: 0 0 8px;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.welcome-subtitle {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 统计卡片
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
|
||
.stat-card {
|
||
background: var(--el-bg-color);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
border-color: var(--el-color-primary-light-7);
|
||
}
|
||
|
||
.stat-icon-wrapper {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
|
||
.el-icon {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&.income .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #3973ff 0%, #4f84ff 100%);
|
||
}
|
||
|
||
&.users .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
||
}
|
||
|
||
&.orders .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
|
||
}
|
||
|
||
&.active .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
|
||
}
|
||
|
||
&.knowledge .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #3973ff 0%, #4f84ff 100%);
|
||
}
|
||
|
||
&.employees .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
||
}
|
||
|
||
&.tenants .stat-icon-wrapper {
|
||
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
|
||
}
|
||
|
||
.stat-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.stat-value {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--el-text-color-primary);
|
||
line-height: 1;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
}
|
||
|
||
.stat-trend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
|
||
&.up {
|
||
color: #10b981;
|
||
background: rgba(16, 185, 129, 0.1);
|
||
}
|
||
|
||
&.down {
|
||
color: #ef4444;
|
||
background: rgba(239, 68, 68, 0.1);
|
||
}
|
||
|
||
&.flat {
|
||
color: var(--el-text-color-placeholder);
|
||
background: var(--el-fill-color-lighter);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 图表区域
|
||
.charts-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 24px;
|
||
|
||
.chart-card {
|
||
background: var(--el-bg-color);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
|
||
.card-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
height: 280px;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 列表区域
|
||
.lists-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 16px;
|
||
|
||
.list-card {
|
||
background: var(--el-bg-color);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
|
||
.card-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
min-height: 400px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.task-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:hover {
|
||
background: var(--el-fill-color-lighter);
|
||
margin: 0 -24px;
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
&.done {
|
||
.task-info {
|
||
margin-left: 20px;
|
||
.task-title {
|
||
text-decoration: line-through;
|
||
color: var(--el-text-color-placeholder);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.task-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.task-title {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-primary);
|
||
margin-bottom: 4px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-tag {
|
||
margin-left: 8px !important;
|
||
}
|
||
|
||
.task-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.task-date {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-placeholder);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:hover {
|
||
background: var(--el-fill-color-lighter);
|
||
margin: 0 -24px;
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.activity-icon {
|
||
flex-shrink: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
|
||
&.operation {
|
||
background-color: rgba(79, 132, 255, 0.2);
|
||
color: #4f84ff;
|
||
}
|
||
|
||
&.access {
|
||
background-color: rgba(85, 190, 130, 0.2);
|
||
color: #55be82;
|
||
}
|
||
}
|
||
|
||
.activity-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.activity-text {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-primary);
|
||
margin-bottom: 4px;
|
||
|
||
.activity-module {
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
|
||
.activity-action {
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-placeholder);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式
|
||
@media (max-width: 1200px) {
|
||
.charts-section,
|
||
.lists-section {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.welcome-section {
|
||
padding: 24px 16px;
|
||
|
||
.welcome-title {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 16px;
|
||
|
||
.stat-value {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.priority-0 {
|
||
color: #e6a23c;
|
||
background-color: #fdf6ec;
|
||
border-color: #f5dab1;
|
||
}
|
||
|
||
.priority-1 {
|
||
color: #67c23a;
|
||
background-color: rgb(240, 249, 235);
|
||
border-color: rgb(225, 243, 216);
|
||
}
|
||
|
||
.priority-2 {
|
||
color: #f56c6c;
|
||
background-color: #fef0f0;
|
||
border-color: #fbc4c4;
|
||
}
|
||
</style>
|