|
|
@@ -9,7 +9,7 @@
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">今日新增订单</div>
|
|
|
- <div class="card-panel-num">156</div>
|
|
|
+ <div class="card-panel-num">{{ dashboardData.todayOrders }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -20,7 +20,7 @@
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">本周销售总额</div>
|
|
|
- <div class="card-panel-num">¥ 45,600</div>
|
|
|
+ <div class="card-panel-num">{{ formatCurrency(dashboardData.weekRevenue) }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -31,7 +31,7 @@
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">待发货数量</div>
|
|
|
- <div class="card-panel-num">32</div>
|
|
|
+ <div class="card-panel-num">{{ dashboardData.pendingShipment }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -42,7 +42,7 @@
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">在售商品数</div>
|
|
|
- <div class="card-panel-num">1,245</div>
|
|
|
+ <div class="card-panel-num">{{ dashboardData.onSaleProducts.toLocaleString() }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -55,7 +55,7 @@
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
- <span>近期订单与发货量走势</span>
|
|
|
+ <span>近期订单发货量走势</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div ref="lineChartRef" style="height: 350px"></div>
|
|
|
@@ -84,14 +84,18 @@
|
|
|
<span>最新发货动态</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <el-table :data="recentOrders" style="width: 100%" stripe border>
|
|
|
+ <el-table :data="dashboardData.latestShipments" style="width: 100%" stripe border>
|
|
|
<el-table-column prop="orderNo" label="订单编号" width="180" />
|
|
|
<el-table-column prop="productName" label="商品名称" />
|
|
|
- <el-table-column prop="amount" label="订单金额" width="120" />
|
|
|
+ <el-table-column label="订单金额" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ formatCurrency(scope.row.amount) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="customer" label="收货人" width="120" />
|
|
|
- <el-table-column prop="status" label="发货状态" width="100">
|
|
|
+ <el-table-column prop="status" label="订单状态" width="100">
|
|
|
<template #default="scope">
|
|
|
- <el-tag :type="scope.row.status === '已发货' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
|
|
|
+ <dict-tag :options="order_status" :value="scope.row.status" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="date" label="时间" width="160" />
|
|
|
@@ -105,6 +109,10 @@
|
|
|
<script setup lang="ts" name="Index">
|
|
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
import { ShoppingCart, Money, Van, Goods } from '@element-plus/icons-vue';
|
|
|
+import { partnerInfoIndexData } from '@/api/partner/merchant';
|
|
|
+import type { PartnerInfoIndexVO } from '@/api/partner/merchant/types';
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const { order_status } = toRefs<any>(proxy?.useDict('order_status'));
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
const lineChartRef = ref<HTMLElement | null>(null);
|
|
|
@@ -113,49 +121,39 @@ const pieChartRef = ref<HTMLElement | null>(null);
|
|
|
let lineChart: echarts.ECharts | null = null;
|
|
|
let pieChart: echarts.ECharts | null = null;
|
|
|
|
|
|
-// Mock 列表数据
|
|
|
-const recentOrders = ref([
|
|
|
- { orderNo: 'ORD-20261015-001', productName: '高级人体工学椅', amount: '¥899.00', customer: '张三', status: '已发货', date: '2026-01-15 10:23:45' },
|
|
|
- { orderNo: 'ORD-20261015-002', productName: '无线机械键盘', amount: '¥450.00', customer: '李四', status: '待发货', date: '2026-02-15 11:05:12' },
|
|
|
- {
|
|
|
- orderNo: 'ORD-20261015-003',
|
|
|
- productName: '27英寸4K显示器',
|
|
|
- amount: '¥1,299.00',
|
|
|
- customer: '王五',
|
|
|
- status: '已发货',
|
|
|
- date: '2026-01-18 15:30:00'
|
|
|
- },
|
|
|
- { orderNo: 'ORD-20261015-004', productName: '降噪蓝牙耳机', amount: '¥699.00', customer: '赵六', status: '已发货', date: '2026-01-16 09:15:22' },
|
|
|
- { orderNo: 'ORD-20261015-005', productName: '智能桌面护眼灯', amount: '¥199.00', customer: '钱七', status: '待发货', date: '2026-01-13 18:45:30' }
|
|
|
-]);
|
|
|
+const dashboardData = ref<PartnerInfoIndexVO>({
|
|
|
+ todayOrders: 0,
|
|
|
+ weekRevenue: 0,
|
|
|
+ pendingShipment: 0,
|
|
|
+ onSaleProducts: 0,
|
|
|
+ shipmentTrend: [],
|
|
|
+ productTypeSales: [],
|
|
|
+ latestShipments: []
|
|
|
+});
|
|
|
+
|
|
|
+const formatCurrency = (val: number) => '¥ ' + val.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
|
+
|
|
|
+const fetchData = async () => {
|
|
|
+ const { data } = await partnerInfoIndexData();
|
|
|
+ dashboardData.value = data;
|
|
|
+};
|
|
|
|
|
|
// 初始化折线图
|
|
|
const initLineChart = () => {
|
|
|
if (!lineChartRef.value) return;
|
|
|
lineChart = echarts.init(lineChartRef.value);
|
|
|
+ const trend = dashboardData.value.shipmentTrend;
|
|
|
const option = {
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
- legend: { data: ['订单量', '发货量'] },
|
|
|
+ legend: { data: ['发货量'] },
|
|
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
+ data: trend.map((item) => item.date)
|
|
|
},
|
|
|
yAxis: { type: 'value' },
|
|
|
series: [
|
|
|
- {
|
|
|
- name: '订单量',
|
|
|
- type: 'line',
|
|
|
- itemStyle: { color: '#409EFF' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: 'rgba(64,158,255,0.3)' },
|
|
|
- { offset: 1, color: 'rgba(64,158,255,0)' }
|
|
|
- ])
|
|
|
- },
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
- },
|
|
|
{
|
|
|
name: '发货量',
|
|
|
type: 'line',
|
|
|
@@ -166,7 +164,7 @@ const initLineChart = () => {
|
|
|
{ offset: 1, color: 'rgba(103,194,58,0)' }
|
|
|
])
|
|
|
},
|
|
|
- data: [110, 120, 95, 120, 80, 200, 190]
|
|
|
+ data: trend.map((item) => item.count)
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -177,6 +175,7 @@ const initLineChart = () => {
|
|
|
const initPieChart = () => {
|
|
|
if (!pieChartRef.value) return;
|
|
|
pieChart = echarts.init(pieChartRef.value);
|
|
|
+ const sales = dashboardData.value.productTypeSales;
|
|
|
const option = {
|
|
|
tooltip: { trigger: 'item' },
|
|
|
legend: { top: 'bottom' },
|
|
|
@@ -196,13 +195,7 @@ const initPieChart = () => {
|
|
|
label: { show: true, fontSize: '18', fontWeight: 'bold' }
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- data: [
|
|
|
- { value: 1048, name: '日用百货' },
|
|
|
- { value: 735, name: '生鲜食品' },
|
|
|
- { value: 580, name: '电子数码' },
|
|
|
- { value: 484, name: '家用电器' },
|
|
|
- { value: 300, name: '服饰鞋包' }
|
|
|
- ],
|
|
|
+ data: sales,
|
|
|
color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
|
|
|
}
|
|
|
]
|
|
|
@@ -216,7 +209,8 @@ const handleResize = () => {
|
|
|
pieChart?.resize();
|
|
|
};
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
+ await fetchData();
|
|
|
nextTick(() => {
|
|
|
initLineChart();
|
|
|
initPieChart();
|