1352 lines
34 KiB
Vue
1352 lines
34 KiB
Vue
<template>
|
|
<div class="dashboard-container">
|
|
<!-- 统计卡片 -->
|
|
<el-row :gutter="24">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(card, index) in statisticsCards" :key="index">
|
|
<el-card class="stat-card" :class="card.class" shadow="hover">
|
|
<div class="card-top">
|
|
<div class="card-meta">
|
|
<div class="card-title">{{ card.title }}</div>
|
|
<div class="card-value">{{ card.value }}</div>
|
|
</div>
|
|
<div class="card-icon">
|
|
<el-icon><component :is="card.icon" /></el-icon>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="card-footer">
|
|
<span>较昨日</span>
|
|
<span :class="card.trend > 0 ? 'up' : 'down'">
|
|
{{ card.trend > 0 ? '+' : '' }}{{ card.trend }}%
|
|
<el-icon v-if="card.trend > 0"><arrow-up /></el-icon>
|
|
<el-icon v-else><arrow-down /></el-icon>
|
|
</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-inner" :style="{width: card.progress + '%', background: card.progressColor}"></div>
|
|
</div> -->
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 图表部分 -->
|
|
<!-- <el-row :gutter="24" class="chart-row">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
|
<el-card class="chart-card" shadow="hover">
|
|
<div class="chart-header">
|
|
<div class="chart-title">
|
|
<h3>销售趋势</h3>
|
|
<p>本期销售数据分析与预测</p>
|
|
</div>
|
|
<div class="chart-actions">
|
|
<el-radio-group v-model="salesRange" size="small">
|
|
<el-radio-button label="week">本周</el-radio-button>
|
|
<el-radio-button label="month">本月</el-radio-button>
|
|
<el-radio-button label="year">全年</el-radio-button>
|
|
</el-radio-group>
|
|
<el-dropdown class="chart-more">
|
|
<el-button size="small" text>
|
|
<el-icon><more-filled /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>
|
|
<el-icon><download /></el-icon> 导出数据
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<el-icon><refresh /></el-icon> 刷新
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<el-icon><setting /></el-icon> 配置
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="chart-overview">
|
|
<div class="overview-item">
|
|
<span class="label">总销售额</span>
|
|
<span class="value">¥ 893,204</span>
|
|
<span class="rate up">+21.5%</span>
|
|
</div>
|
|
<div class="overview-item">
|
|
<span class="label">平均订单额</span>
|
|
<span class="value">¥ 5,618</span>
|
|
<span class="rate up">+6.8%</span>
|
|
</div>
|
|
<div class="overview-item">
|
|
<span class="label">转化周期</span>
|
|
<span class="value">24天</span>
|
|
<span class="rate down">-2.3%</span>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" ref="salesChartRef"></div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
<el-card class="chart-card" shadow="hover">
|
|
<div class="chart-header">
|
|
<div class="chart-title">
|
|
<h3>客户构成</h3>
|
|
<p>客户群体分布情况</p>
|
|
</div>
|
|
<el-dropdown class="chart-more">
|
|
<el-button size="small" text>
|
|
<el-icon><more-filled /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>
|
|
<el-icon><download /></el-icon> 导出数据
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<el-icon><refresh /></el-icon> 刷新
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="customer-legend">
|
|
<div v-for="(item, index) in customerData" :key="index" class="legend-item">
|
|
<span class="legend-color" :style="{background: item.color}"></span>
|
|
<span class="legend-label">{{ item.name }}</span>
|
|
<span class="legend-value">{{ item.percentage }}%</span>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" ref="customerChartRef"></div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row> -->
|
|
|
|
<!-- 数据列表区域 -->
|
|
<el-row :gutter="24" class="list-row">
|
|
<!-- 最近用户 -->
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
<el-card class="list-card" shadow="hover" v-loading="listLoading">
|
|
<div class="card-header-custom">
|
|
<div class="header-left">
|
|
<el-icon class="header-icon user-icon"><User /></el-icon>
|
|
<h3>最近用户</h3>
|
|
</div>
|
|
<el-link type="primary" :underline="false" class="view-all" @click="goToUserList">
|
|
查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
|
|
</el-link>
|
|
</div>
|
|
<div class="list-content">
|
|
<div v-if="recentUsers.length === 0" class="empty-tip">暂无数据</div>
|
|
<div v-for="item in recentUsers" :key="item.id" class="list-item" @click="goToUserDetail(item.id)">
|
|
<div class="item-main">
|
|
<div class="item-title">{{ item.name }}</div>
|
|
<div class="item-sub">{{ item.email }}</div>
|
|
</div>
|
|
<div class="item-extra">
|
|
<div class="item-id">ID: {{ item.id }}</div>
|
|
<div class="item-time">{{ formatDate(item.createdAt) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- 最近订单 -->
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
<el-card class="list-card" shadow="hover" v-loading="listLoading">
|
|
<div class="card-header-custom">
|
|
<div class="header-left">
|
|
<el-icon class="header-icon order-icon"><ShoppingCart /></el-icon>
|
|
<h3>最近订单</h3>
|
|
</div>
|
|
<el-link type="primary" :underline="false" class="view-all" @click="goToOrderList">
|
|
查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
|
|
</el-link>
|
|
</div>
|
|
<div class="list-content">
|
|
<div v-if="recentOrders.length === 0" class="empty-tip">暂无数据</div>
|
|
<div v-for="item in recentOrders" :key="item.id" class="list-item" @click="showOrderDetail(item)">
|
|
<div class="item-main">
|
|
<div class="item-title">{{ item.name }}</div>
|
|
<div class="item-sub">用户ID: {{ item.userId }}</div>
|
|
</div>
|
|
<div class="item-extra">
|
|
<el-tag :type="getOrderStatusType(item.state)" size="small">
|
|
{{ getOrderStatusText(item.state) }}
|
|
</el-tag>
|
|
<div class="item-price">¥{{ (item.price / 100).toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- 最近工单 -->
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
<el-card class="list-card" shadow="hover" v-loading="listLoading">
|
|
<div class="card-header-custom">
|
|
<div class="header-left">
|
|
<el-icon class="header-icon ticket-icon"><Tickets /></el-icon>
|
|
<h3>最近工单</h3>
|
|
</div>
|
|
<el-link type="primary" :underline="false" class="view-all" @click="goToTicketList">
|
|
查看全部 <el-icon class="el-icon--right"><Right /></el-icon>
|
|
</el-link>
|
|
</div>
|
|
<div class="list-content">
|
|
<div v-if="recentTickets.length === 0" class="empty-tip">暂无数据</div>
|
|
<div v-for="item in recentTickets" :key="item.id" class="list-item" @click="goToTicketDetail(item.id)">
|
|
<div class="item-main">
|
|
<div class="item-title">{{ item.title || '工单 #' + item.id }}</div>
|
|
<div class="item-sub">用户ID: {{ item.userId }}</div>
|
|
</div>
|
|
<div class="item-extra">
|
|
<el-tag :type="getTicketStatusType(item.status)" size="small">
|
|
{{ getTicketStatusText(item.status) }}
|
|
</el-tag>
|
|
<div class="item-time">{{ formatDate(item.createdAt) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 订单详情弹窗 -->
|
|
<el-dialog
|
|
v-model="orderDetailVisible"
|
|
title="订单详情"
|
|
width="600px"
|
|
append-to-body
|
|
class="order-detail-dialog"
|
|
>
|
|
<el-descriptions :column="2" border v-if="currentOrder">
|
|
<el-descriptions-item label="订单ID">{{ currentOrder.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="订单名称">{{ currentOrder.name }}</el-descriptions-item>
|
|
<el-descriptions-item label="用户ID">{{ currentOrder.userId }}</el-descriptions-item>
|
|
<el-descriptions-item label="商品ID">{{ currentOrder.commodityId }}</el-descriptions-item>
|
|
<el-descriptions-item label="订单金额">
|
|
<span class="detail-price">¥{{ (currentOrder.price / 100).toFixed(2) }}</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="续费价格">
|
|
<span class="detail-renew-price">¥{{ (currentOrder.renewPrice / 100).toFixed(2) }}</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="数量">{{ currentOrder.payNum }}</el-descriptions-item>
|
|
<el-descriptions-item label="订单状态">
|
|
<el-tag :type="getOrderStatusType(currentOrder.state)">
|
|
{{ getOrderStatusText(currentOrder.state) }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="支付方式">{{ currentOrder.payType || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ formatDate(currentOrder.createdAt) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="orderDetailVisible = false">关闭</el-button>
|
|
<el-button type="primary" @click="goToOrderList">查看全部订单</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 最近活动和待办事项 -->
|
|
<!-- <el-row :gutter="24" class="activity-row">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
<el-card class="activity-card" shadow="hover">
|
|
<div class="card-header-custom">
|
|
<div class="header-left">
|
|
<h3>最近活动</h3>
|
|
<el-badge :value="activities.length" class="badge" type="primary" />
|
|
</div>
|
|
<el-link type="primary" :underline="false" class="view-all">
|
|
查看全部 <el-icon class="el-icon--right"><right /></el-icon>
|
|
</el-link>
|
|
</div>
|
|
<div class="timeline-container">
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(activity, index) in activities"
|
|
:key="index"
|
|
:timestamp="activity.timestamp"
|
|
:type="activity.type"
|
|
:hollow="index !== 0"
|
|
:size="index === 0 ? 'large' : 'normal'"
|
|
>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">{{ activity.content }}</div>
|
|
<div class="timeline-detail" v-if="activity.detail">{{ activity.detail }}</div>
|
|
</div>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
<el-card class="todo-card" shadow="hover">
|
|
<div class="card-header-custom">
|
|
<div class="header-left">
|
|
<h3>待办事项</h3>
|
|
<el-tag type="danger" size="small" effect="dark" class="task-tag">{{ todoList.length }} 任务</el-tag>
|
|
</div>
|
|
<el-button type="primary" size="small" plain class="add-btn">
|
|
<el-icon><plus /></el-icon> 添加
|
|
</el-button>
|
|
</div>
|
|
<div class="todo-filter">
|
|
<el-radio-group v-model="todoFilter" size="small">
|
|
<el-radio-button label="all">全部</el-radio-button>
|
|
<el-radio-button label="today">今日</el-radio-button>
|
|
<el-radio-button label="important">重要</el-radio-button>
|
|
</el-radio-group>
|
|
<el-dropdown>
|
|
<el-button size="small" text>
|
|
<el-icon><filter /></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="todo-list">
|
|
<div v-for="(todo, index) in todoList" :key="index" class="todo-item">
|
|
<div class="todo-check">
|
|
<el-checkbox size="large" />
|
|
</div>
|
|
<div class="todo-content">
|
|
<div class="todo-title">{{ todo.title }}</div>
|
|
<div class="todo-info">
|
|
<el-tag :type="getPriorityType(todo.priority)" size="small" effect="plain">
|
|
{{ todo.priority }}
|
|
</el-tag>
|
|
<span class="todo-date">
|
|
<el-icon><calendar /></el-icon> {{ todo.deadline }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="todo-actions">
|
|
<el-button type="primary" link size="small" circle>
|
|
<el-icon><check /></el-icon>
|
|
</el-button>
|
|
<el-button type="danger" link size="small" circle>
|
|
<el-icon><delete /></el-icon>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import {
|
|
User, ShoppingCart, Money, DataAnalysis,
|
|
MoreFilled, ArrowUp, ArrowDown, Right,
|
|
Download, Refresh, Check, Delete, Plus,
|
|
Setting, Calendar, Filter, Tickets, View
|
|
} from '@element-plus/icons-vue'
|
|
import * as echarts from 'echarts'
|
|
import Qrcode from '@/components/Qrcode.vue'
|
|
import {useUserStore} from "@/store/userStore.js";
|
|
import { getUserList } from '@/api/admin/user'
|
|
import { getOrderList } from '@/api/admin/order'
|
|
import { getTicketCount, getTickerList } from '@/api/ticket'
|
|
|
|
const userStore = useUserStore()
|
|
const router = useRouter()
|
|
|
|
// 统计数据
|
|
const userCount = ref(0)
|
|
const orderCount = ref(0)
|
|
const ticketCount = ref(0)
|
|
|
|
// 列表数据
|
|
const recentUsers = ref([])
|
|
const recentOrders = ref([])
|
|
const recentTickets = ref([])
|
|
const listLoading = ref(false)
|
|
|
|
// 数据统计卡片
|
|
const statisticsCards = computed(() => [
|
|
{
|
|
title: '用户量',
|
|
value: userCount.value.toLocaleString(),
|
|
icon: 'User',
|
|
trend: 12.5,
|
|
class: 'visitors',
|
|
progress: 78,
|
|
progressColor: 'rgba(24, 144, 255, 0.8)'
|
|
},
|
|
{
|
|
title: '订单量',
|
|
value: orderCount.value.toLocaleString(),
|
|
icon: 'ShoppingCart',
|
|
trend: 5.2,
|
|
class: 'orders',
|
|
progress: 65,
|
|
progressColor: 'rgba(82, 196, 26, 0.8)'
|
|
},
|
|
{
|
|
title: '工单量',
|
|
value: ticketCount.value.toLocaleString(),
|
|
icon: 'Tickets',
|
|
trend: -2.3,
|
|
class: 'sales',
|
|
progress: 52,
|
|
progressColor: 'rgba(250, 173, 20, 0.8)'
|
|
},
|
|
{
|
|
title: '转化率',
|
|
value: '32.8%',
|
|
icon: 'DataAnalysis',
|
|
trend: 4.6,
|
|
class: 'conversion',
|
|
progress: 83,
|
|
progressColor: 'rgba(114, 46, 209, 0.8)'
|
|
}
|
|
])
|
|
|
|
// 获取统计数据
|
|
const fetchStatistics = async () => {
|
|
try {
|
|
// 获取用户数量
|
|
const userRes = await getUserList({ page: 1, count: 10, key: '' })
|
|
console.log("用户数量，",userRes)
|
|
if (userRes.data?.code === 200) {
|
|
userCount.value = userRes.data.data.all_count || 0
|
|
}
|
|
|
|
// 获取订单数量
|
|
const orderRes = await getOrderList({ page: 1, count: 10 })
|
|
console.log("订单数量，",orderRes)
|
|
if (orderRes.data?.code === 200) {
|
|
orderCount.value = orderRes.data.data.all_count || 0
|
|
}
|
|
|
|
// 获取工单数量
|
|
const ticketRes = await getTicketCount()
|
|
console.log("工单数量，",ticketRes)
|
|
if (ticketRes.code === 200) {
|
|
ticketCount.value = ticketRes.data?.all_count || 0
|
|
}
|
|
} catch (error) {
|
|
console.error('获取统计数据失败:', error)
|
|
}
|
|
}
|
|
|
|
// 获取最近列表数据
|
|
const fetchRecentLists = async () => {
|
|
listLoading.value = true
|
|
try {
|
|
// 获取最近用户
|
|
const userRes = await getUserList({ page: 1, count: 10, key: '' })
|
|
if (userRes.data?.code === 200) {
|
|
recentUsers.value = (userRes.data.data.data || []).map(user => ({
|
|
id: user.user_id,
|
|
name: user.user_name,
|
|
email: user.email || '未设置',
|
|
phone: user.phone || '未设置',
|
|
createdAt: user.created_at
|
|
}))
|
|
}
|
|
|
|
// 获取最近订单
|
|
const orderRes = await getOrderList({ page: 1, count: 10 })
|
|
if (orderRes.data?.code === 200) {
|
|
recentOrders.value = (orderRes.data.data.list || []).map(order => ({
|
|
id: order.id,
|
|
name: order.name,
|
|
userId: order.userId,
|
|
commodityId: order.commodityId,
|
|
price: order.price,
|
|
renewPrice: order.renewPrice || 0,
|
|
payNum: order.payNum || 1,
|
|
state: order.state,
|
|
payType: order.payType,
|
|
createdAt: order.CreatedAt
|
|
}))
|
|
}
|
|
|
|
// 获取最近工单
|
|
const ticketRes = await getTickerList(5, 1)
|
|
console.log("最近工单，",ticketRes)
|
|
if (ticketRes.code === 200) {
|
|
recentTickets.value = (ticketRes.data.data?.list || ticketRes.data.data || []).map(ticket => ({
|
|
id: ticket.work_id || ticket.id,
|
|
title: ticket.title,
|
|
status: ticket.status,
|
|
userId: ticket.user?.userId,
|
|
createdAt: ticket.created_at || ticket.CreatedAt
|
|
}))
|
|
}
|
|
} catch (error) {
|
|
console.error('获取列表数据失败:', error)
|
|
} finally {
|
|
listLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 格式化日期
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return '-'
|
|
const date = new Date(dateString)
|
|
return date.toLocaleString('zh-CN', {
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
// 获取订单状态
|
|
const getOrderStatusText = (state) => {
|
|
const statusMap = { 0: '待支付', 1: '已支付', 2: '已失效' }
|
|
return statusMap[state] || '未知'
|
|
}
|
|
|
|
const getOrderStatusType = (state) => {
|
|
const typeMap = { 0: 'warning', 1: 'success', 2: 'info' }
|
|
return typeMap[state] || 'info'
|
|
}
|
|
|
|
// 获取工单状态
|
|
const getTicketStatusText = (status) => {
|
|
const statusMap = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已解决' }
|
|
return statusMap[status] || '未知'
|
|
}
|
|
|
|
const getTicketStatusType = (status) => {
|
|
const typeMap = { 0: 'danger', 1: 'warning', 2: 'primary', 3: 'success' }
|
|
return typeMap[status] || 'info'
|
|
}
|
|
|
|
// 跳转到详情页
|
|
const goToUserDetail = (userId) => {
|
|
router.push({ path: '/user/detail', query: { user_id: userId } })
|
|
}
|
|
|
|
const goToUserList = () => {
|
|
router.push('/user/list')
|
|
}
|
|
|
|
const goToOrderList = () => {
|
|
router.push('/order/list')
|
|
}
|
|
|
|
const goToTicketList = () => {
|
|
router.push('/ticket/list')
|
|
}
|
|
|
|
const goToTicketDetail = (ticketId) => {
|
|
router.push({ path: '/ticket/detail', query: { work_id: ticketId } })
|
|
}
|
|
|
|
// 订单详情弹窗
|
|
const orderDetailVisible = ref(false)
|
|
const currentOrder = ref(null)
|
|
|
|
const showOrderDetail = (order) => {
|
|
currentOrder.value = order
|
|
orderDetailVisible.value = true
|
|
}
|
|
|
|
// 客户构成数据
|
|
const customerData = ref([
|
|
{ name: '企业客户', value: 1048, percentage: 33, color: '#1890ff' },
|
|
{ name: '个人客户', value: 735, percentage: 23, color: '#52c41a' },
|
|
{ name: '政府单位', value: 580, percentage: 18, color: '#fa8c16' },
|
|
{ name: '教育机构', value: 484, percentage: 15, color: '#722ed1' },
|
|
{ name: '其他', value: 300, percentage: 11, color: '#f759ab' }
|
|
])
|
|
|
|
const salesRange = ref('month')
|
|
const todoFilter = ref('all')
|
|
const salesChartRef = ref(null)
|
|
const customerChartRef = ref(null)
|
|
let salesChart = null
|
|
let customerChart = null
|
|
|
|
// 活动数据
|
|
const activities = ref([
|
|
{
|
|
content: '王经理 完成了销售目标',
|
|
detail: '超额完成15%的销售指标',
|
|
timestamp: '刚刚',
|
|
type: 'success'
|
|
},
|
|
{
|
|
content: '李明 上传了新的销售报告',
|
|
detail: '包含Q2季度各区域销售数据',
|
|
timestamp: '10分钟前',
|
|
type: 'primary'
|
|
},
|
|
{
|
|
content: '系统更新了安全策略',
|
|
timestamp: '1小时前',
|
|
type: 'info'
|
|
},
|
|
{
|
|
content: '张经理 分配了新的任务',
|
|
detail: '关于新产品线的市场调研',
|
|
timestamp: '昨天',
|
|
type: 'warning'
|
|
},
|
|
{
|
|
content: '年度销售会议即将开始',
|
|
timestamp: '2天前',
|
|
type: 'danger'
|
|
}
|
|
])
|
|
|
|
// 待办事项
|
|
const todoList = ref([
|
|
{ title: '完成季度销售报告', priority: '高', deadline: '2024-06-10' },
|
|
{ title: '召开团队周会', priority: '中', deadline: '2024-06-12' },
|
|
{ title: '审核营销方案', priority: '高', deadline: '2024-06-14' },
|
|
{ title: '客户回访', priority: '低', deadline: '2024-06-18' }
|
|
])
|
|
|
|
// 根据优先级返回标签类型
|
|
const getPriorityType = (priority) => {
|
|
switch (priority) {
|
|
case '高': return 'danger'
|
|
case '中': return 'warning'
|
|
case '低': return 'info'
|
|
default: return 'info'
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 获取统计数据和列表数据
|
|
fetchStatistics()
|
|
fetchRecentLists()
|
|
|
|
initSalesChart()
|
|
initCustomerChart()
|
|
|
|
// 窗口大小变化时重新调整图表大小
|
|
window.addEventListener('resize', () => {
|
|
salesChart?.resize()
|
|
customerChart?.resize()
|
|
})
|
|
})
|
|
|
|
// 初始化销售趋势图表
|
|
const initSalesChart = () => {
|
|
if (!salesChartRef.value) return
|
|
|
|
salesChart = echarts.init(salesChartRef.value)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(255,255,255,0.9)',
|
|
borderColor: '#e6e9ed',
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: '#5e6d82'
|
|
},
|
|
formatter: function(params) {
|
|
let result = params[0].name + '<br/>';
|
|
params.forEach(item => {
|
|
result += `<div style="display:flex;align-items:center;margin:5px 0">
|
|
<span style="display:inline-block;width:10px;height:10px;background:${item.color};margin-right:5px;border-radius:50%"></span>
|
|
<span>${item.seriesName}: ${item.value} 元</span>
|
|
</div>`;
|
|
});
|
|
return result;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '8%',
|
|
top: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#e6e9ed'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#5e6d82'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#5e6d82'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#f0f3f8'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '销售额',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: '#1890ff'
|
|
},
|
|
itemStyle: {
|
|
color: '#1890ff',
|
|
borderWidth: 2,
|
|
borderColor: '#fff'
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(24, 144, 255, 0.5)'
|
|
}
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(24, 144, 255, 0.5)' },
|
|
{ offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
|
|
])
|
|
},
|
|
data: [12000, 19000, 15000, 22000, 19000, 28000, 32000]
|
|
}
|
|
]
|
|
}
|
|
salesChart.setOption(option)
|
|
}
|
|
|
|
// 初始化客户构成图表
|
|
const initCustomerChart = () => {
|
|
if (!customerChartRef.value) return
|
|
|
|
customerChart = echarts.init(customerChartRef.value)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
backgroundColor: 'rgba(255,255,255,0.9)',
|
|
borderColor: '#e6e9ed',
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: '#5e6d82'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '客户构成',
|
|
type: 'pie',
|
|
radius: ['55%', '75%'],
|
|
center: ['50%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
focus: 'self',
|
|
scaleSize: 10,
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: customerData.value.map(item => ({
|
|
value: item.value,
|
|
name: item.name,
|
|
itemStyle: {
|
|
color: item.color
|
|
}
|
|
}))
|
|
}
|
|
]
|
|
}
|
|
customerChart.setOption(option)
|
|
}
|
|
|
|
// 监听销售范围变化
|
|
watch(salesRange, (newVal) => {
|
|
// 根据选择的时间范围更新图表数据
|
|
if (salesChart) {
|
|
const xAxisData = newVal === 'week'
|
|
? ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
: newVal === 'month'
|
|
? ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
|
|
: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
|
const seriesData = newVal === 'week'
|
|
? [12000, 19000, 15000, 22000, 19000, 28000, 32000]
|
|
: newVal === 'month'
|
|
? [32000, 45000, 39000, 52000, 48000, 58000, 62000]
|
|
: [158000, 165000, 180000, 220000, 210000, 252000, 265000, 270000, 285000, 302000, 318000, 350000]
|
|
|
|
salesChart.setOption({
|
|
xAxis: {
|
|
data: xAxisData
|
|
},
|
|
series: [{
|
|
data: seriesData
|
|
}]
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-container {
|
|
padding: 16px;
|
|
}
|
|
|
|
/* 统计卡片样式 */
|
|
.stat-card {
|
|
margin-bottom: 24px;
|
|
transition: all 0.3s;
|
|
overflow: hidden;
|
|
border-left: 3px solid transparent !important;
|
|
}
|
|
|
|
.stat-card.visitors { border-left-color: #1890ff !important; }
|
|
.stat-card.orders { border-left-color: #52c41a !important; }
|
|
.stat-card.sales { border-left-color: #faad14 !important; }
|
|
.stat-card.conversion { border-left-color: #722ed1 !important; }
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 20px 10px;
|
|
}
|
|
|
|
.card-meta {
|
|
flex: 1;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
color: #8c8c8c;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.card-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 4px;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
}
|
|
|
|
.visitors .card-icon {
|
|
background: linear-gradient(135deg, #1890ff, #096dd9);
|
|
}
|
|
|
|
.orders .card-icon {
|
|
background: linear-gradient(135deg, #52c41a, #389e0d);
|
|
}
|
|
|
|
.sales .card-icon {
|
|
background: linear-gradient(135deg, #faad14, #d48806);
|
|
}
|
|
|
|
.conversion .card-icon {
|
|
background: linear-gradient(135deg, #722ed1, #531dab);
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
padding: 0 20px 15px;
|
|
font-size: 13px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.up {
|
|
color: #52c41a;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.down {
|
|
color: #f5222d;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 4px;
|
|
background-color: #f0f0f0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-inner {
|
|
height: 100%;
|
|
transition: width 0.8s ease;
|
|
}
|
|
|
|
/* 图表样式 */
|
|
.chart-row {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.chart-card {
|
|
margin-bottom: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 20px 20px 0;
|
|
}
|
|
|
|
.chart-title h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.chart-title p {
|
|
font-size: 13px;
|
|
color: #8c8c8c;
|
|
margin: 0;
|
|
}
|
|
|
|
.chart-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chart-more {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.chart-overview {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 40px;
|
|
padding: 15px 20px;
|
|
border-bottom: 1px dashed #f0f0f0;
|
|
}
|
|
|
|
.overview-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.overview-item .label {
|
|
font-size: 13px;
|
|
color: #8c8c8c;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.overview-item .value {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.overview-item .rate {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 300px;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* 客户构成图表特有样式 */
|
|
.customer-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.legend-label {
|
|
font-size: 13px;
|
|
color: #262626;
|
|
}
|
|
|
|
.legend-value {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
|
|
/* 活动和待办事项 */
|
|
.activity-row {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.activity-card, .todo-card {
|
|
height: 100%;
|
|
}
|
|
|
|
.card-header-custom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.header-left h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
margin: 0;
|
|
}
|
|
|
|
.view-all {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.timeline-container {
|
|
padding: 20px;
|
|
height: 350px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.timeline-content {
|
|
padding: 12px 16px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timeline-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.timeline-detail {
|
|
font-size: 13px;
|
|
color: #8c8c8c;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* 待办事项特有样式 */
|
|
.task-tag {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.add-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.todo-filter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.todo-list {
|
|
padding: 10px 20px;
|
|
height: 270px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.todo-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.todo-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.todo-check {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.todo-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.todo-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.todo-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.todo-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 13px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.todo-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* 列表卡片样式 */
|
|
.list-row {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.list-card {
|
|
margin-bottom: 24px;
|
|
height: 410px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.list-card :deep(.el-card__body) {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-icon {
|
|
font-size: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.user-icon {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.order-icon {
|
|
color: #52c41a;
|
|
}
|
|
|
|
.ticket-icon {
|
|
color: #faad14;
|
|
}
|
|
|
|
.list-content {
|
|
padding: 0 20px 20px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.empty-tip {
|
|
text-align: center;
|
|
color: #909399;
|
|
padding: 60px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list-item:hover {
|
|
background-color: #fafafa;
|
|
margin: 0 -20px;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.item-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.item-sub {
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.item-extra {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.item-id {
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.item-time {
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.item-price {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #f56c6c;
|
|
}
|
|
|
|
/* 订单详情弹窗样式 */
|
|
.order-detail-dialog :deep(.el-descriptions__label) {
|
|
width: 100px;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
}
|
|
|
|
.order-detail-dialog :deep(.el-descriptions__content) {
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.detail-price {
|
|
color: #f56c6c;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.detail-renew-price {
|
|
color: #409eff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-container {
|
|
padding: 12px;
|
|
}
|
|
|
|
.chart-overview {
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 250px;
|
|
}
|
|
|
|
.timeline-container,
|
|
.todo-list {
|
|
height: 320px;
|
|
}
|
|
|
|
.list-card {
|
|
height: auto;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.list-content {
|
|
min-height: 200px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
.order-detail-dialog :deep(.el-dialog) {
|
|
width: 90% !important;
|
|
margin: 5vh auto !important;
|
|
}
|
|
|
|
.order-detail-dialog :deep(.el-descriptions) {
|
|
--el-descriptions-item-bordered-label-background: #fafafa;
|
|
}
|
|
|
|
.order-detail-dialog :deep(.el-descriptions__label),
|
|
.order-detail-dialog :deep(.el-descriptions__content) {
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style> |