|
|
@@ -1,155 +1,13 @@
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
-import Chart from 'primevue/chart'
|
|
|
-import Card from 'primevue/card'
|
|
|
-import Divider from 'primevue/divider'
|
|
|
-import DataTable from 'primevue/datatable'
|
|
|
-import Column from 'primevue/column'
|
|
|
-
|
|
|
-// 模拟图表数据
|
|
|
-const salesChartData = ref({
|
|
|
- labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- label: '当年销售额',
|
|
|
- data: [65, 59, 80, 81, 56, 55, 40],
|
|
|
- fill: false,
|
|
|
- borderColor: '#2196F3',
|
|
|
- tension: 0.4
|
|
|
- },
|
|
|
- {
|
|
|
- label: '去年销售额',
|
|
|
- data: [28, 48, 40, 19, 86, 27, 90],
|
|
|
- fill: false,
|
|
|
- borderColor: '#4CAF50',
|
|
|
- tension: 0.4
|
|
|
- }
|
|
|
- ]
|
|
|
-})
|
|
|
-
|
|
|
-const visitorsChartData = ref({
|
|
|
- labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- label: '访问量',
|
|
|
- data: [540, 325, 702, 620, 815, 580, 770],
|
|
|
- backgroundColor: ['rgba(255, 159, 64, 0.2)'],
|
|
|
- borderColor: ['rgb(255, 159, 64)'],
|
|
|
- borderWidth: 1
|
|
|
- }
|
|
|
- ]
|
|
|
-})
|
|
|
-
|
|
|
-const chartOptions = ref({
|
|
|
- responsive: true,
|
|
|
- maintainAspectRatio: false
|
|
|
-})
|
|
|
-
|
|
|
-// 模拟最近订单数据
|
|
|
-const recentOrders = ref([
|
|
|
- { id: '1001', customer: '张三', date: '2023-09-18', amount: '¥1,200', status: '已完成' },
|
|
|
- { id: '1002', customer: '李四', date: '2023-09-17', amount: '¥890', status: '处理中' },
|
|
|
- { id: '1003', customer: '王五', date: '2023-09-16', amount: '¥2,500', status: '已完成' },
|
|
|
- { id: '1004', customer: '赵六', date: '2023-09-15', amount: '¥1,750', status: '已取消' },
|
|
|
- { id: '1005', customer: '钱七', date: '2023-09-14', amount: '¥3,200', status: '已完成' }
|
|
|
-])
|
|
|
-
|
|
|
-// 统计卡片数据
|
|
|
-const statsCards = ref([
|
|
|
- { title: '总销售额', value: '¥128,430', icon: 'pi pi-money-bill', color: '#2196F3' },
|
|
|
- { title: '新订单', value: '64', icon: 'pi pi-shopping-cart', color: '#4CAF50' },
|
|
|
- { title: '总访问量', value: '12,846', icon: 'pi pi-users', color: '#FF9800' },
|
|
|
- { title: '转化率', value: '24%', icon: 'pi pi-percentage', color: '#9C27B0' }
|
|
|
-])
|
|
|
+// 空白页面,不需要任何逻辑
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="dashboard-container">
|
|
|
- <h1 class="text-3xl font-bold mb-4">仪表盘</h1>
|
|
|
-
|
|
|
- <!-- 统计卡片行 -->
|
|
|
- <div class="grid">
|
|
|
- <div v-for="(card, index) in statsCards" :key="index" class="col-12 md:col-6 lg:col-3">
|
|
|
- <Card class="stat-card mb-4">
|
|
|
- <template #content>
|
|
|
- <div class="flex align-items-center">
|
|
|
- <div class="stat-icon mr-3" :style="{ backgroundColor: card.color + '20', color: card.color }">
|
|
|
- <i :class="card.icon" style="font-size: 2rem"></i>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="text-500 mb-1">{{ card.title }}</div>
|
|
|
- <div class="text-900 font-medium text-xl">{{ card.value }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </Card>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 图表行 -->
|
|
|
- <div class="grid mt-3">
|
|
|
- <div class="col-12 lg:col-8">
|
|
|
- <Card class="mb-4">
|
|
|
- <template #title>
|
|
|
- <div class="flex justify-content-between align-items-center">
|
|
|
- <h3>销售趋势</h3>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #content>
|
|
|
- <div style="height: 350px">
|
|
|
- <Chart type="line" :data="salesChartData" :options="chartOptions" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </Card>
|
|
|
- </div>
|
|
|
- <div class="col-12 lg:col-4">
|
|
|
- <Card class="mb-4">
|
|
|
- <template #title>
|
|
|
- <div class="flex justify-content-between align-items-center">
|
|
|
- <h3>每周访问量</h3>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #content>
|
|
|
- <div style="height: 350px">
|
|
|
- <Chart type="bar" :data="visitorsChartData" :options="chartOptions" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </Card>
|
|
|
- </div>
|
|
|
+ <h1 class="text-3xl font-bold mb-4">首页</h1>
|
|
|
+ <div class="empty-content">
|
|
|
+ <p class="text-gray-500">欢迎使用管理系统</p>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 最近订单表格 -->
|
|
|
- <Card class="mb-4">
|
|
|
- <template #title>
|
|
|
- <div class="flex justify-content-between align-items-center">
|
|
|
- <h3>最近订单</h3>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #content>
|
|
|
- <div class="table-container">
|
|
|
- <DataTable :value="recentOrders" responsiveLayout="scroll" class="p-datatable-sm" style="width: 100%">
|
|
|
- <Column field="id" header="订单编号"></Column>
|
|
|
- <Column field="customer" header="客户"></Column>
|
|
|
- <Column field="date" header="日期"></Column>
|
|
|
- <Column field="amount" header="金额"></Column>
|
|
|
- <Column field="status" header="状态">
|
|
|
- <template #body="slotProps">
|
|
|
- <span
|
|
|
- :class="{
|
|
|
- 'order-badge': true,
|
|
|
- 'order-completed': slotProps.data.status === '已完成',
|
|
|
- 'order-processing': slotProps.data.status === '处理中',
|
|
|
- 'order-cancelled': slotProps.data.status === '已取消'
|
|
|
- }"
|
|
|
- >
|
|
|
- {{ slotProps.data.status }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </Column>
|
|
|
- </DataTable>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </Card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -159,130 +17,11 @@ const statsCards = ref([
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
-.stat-card {
|
|
|
- box-shadow:
|
|
|
- 0 1px 3px rgba(0, 0, 0, 0.12),
|
|
|
- 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
|
- border-radius: 12px;
|
|
|
- transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-card:hover {
|
|
|
- box-shadow:
|
|
|
- 0 4px 8px rgba(0, 0, 0, 0.15),
|
|
|
- 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
|
-}
|
|
|
-
|
|
|
-.stat-icon {
|
|
|
- width: 4rem;
|
|
|
- height: 4rem;
|
|
|
- border-radius: 12px;
|
|
|
+.empty-content {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.order-badge {
|
|
|
- padding: 0.25rem 0.5rem;
|
|
|
- border-radius: 3px;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 0.8rem;
|
|
|
-}
|
|
|
-
|
|
|
-.order-completed {
|
|
|
- background-color: #4caf5020;
|
|
|
- color: #4caf50;
|
|
|
-}
|
|
|
-
|
|
|
-.order-processing {
|
|
|
- background-color: #2196f320;
|
|
|
- color: #2196f3;
|
|
|
-}
|
|
|
-
|
|
|
-.order-cancelled {
|
|
|
- background-color: #f4433620;
|
|
|
- color: #f44336;
|
|
|
-}
|
|
|
-
|
|
|
-/* PrimeFlex 辅助类 */
|
|
|
-.grid {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-right: -0.5rem;
|
|
|
- margin-left: -0.5rem;
|
|
|
- margin-top: -0.5rem;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.col-12 {
|
|
|
- flex: 0 0 100%;
|
|
|
- max-width: 100%;
|
|
|
- padding: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.justify-content-between {
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.mb-4 {
|
|
|
- margin-bottom: 1rem;
|
|
|
-}
|
|
|
-
|
|
|
-.mt-3 {
|
|
|
- margin-top: 0.75rem;
|
|
|
-}
|
|
|
-
|
|
|
-.mr-3 {
|
|
|
- margin-right: 0.75rem;
|
|
|
-}
|
|
|
-
|
|
|
-.mb-1 {
|
|
|
- margin-bottom: 0.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-.text-500 {
|
|
|
- color: var(--text-color-secondary);
|
|
|
-}
|
|
|
-
|
|
|
-.text-900 {
|
|
|
- color: var(--text-color);
|
|
|
-}
|
|
|
-
|
|
|
-.text-xl {
|
|
|
- font-size: 1.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-.font-medium {
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-@media (min-width: 768px) {
|
|
|
- .md\:col-6 {
|
|
|
- flex: 0 0 50%;
|
|
|
- max-width: 50%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media (min-width: 992px) {
|
|
|
- .lg\:col-3 {
|
|
|
- flex: 0 0 25%;
|
|
|
- max-width: 25%;
|
|
|
- }
|
|
|
-
|
|
|
- .lg\:col-8 {
|
|
|
- flex: 0 0 66.6667%;
|
|
|
- max-width: 66.6667%;
|
|
|
- }
|
|
|
-
|
|
|
- .lg\:col-4 {
|
|
|
- flex: 0 0 33.3333%;
|
|
|
- max-width: 33.3333%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.table-container {
|
|
|
- width: 100%;
|
|
|
- overflow-x: auto;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 400px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|