修改首页数据展示

src/api/order/orderMain/index.ts

@@ -147,3 +147,11 @@ export const getOrderMainAndSubOrder = (id: string | number): AxiosPromise<Order
     method: 'get'
   });
 };
+
+// 订单中心首页数据
+export function orderIndexData() {
+  return request({
+    url: '/order/orderMain/orderIndexData',
+    method: 'get'
+  });
+}

src/views/index.vue

@@ -8,15 +8,7 @@
             <span class="card-title">今日订单(笔)</span>
             <el-tag type="primary">日</el-tag>
           </div>
-          <div class="card-value">1,245</div>
-          <div class="card-footer">
-            <span class="trend"
-              >较昨日
-              <span class="up"
-                ><el-icon><CaretTop /></el-icon>12.5%</span
-              ></span
-            >
-          </div>
+          <div class="card-value">{{ indexData.todayOrders.toLocaleString() }}</div>
         </el-card>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
@@ -25,15 +17,7 @@
             <span class="card-title">待发货订单(笔)</span>
             <el-tag type="warning">待办</el-tag>
           </div>
-          <div class="card-value">342</div>
-          <div class="card-footer">
-            <span class="trend"
-              >较昨日
-              <span class="down"
-                ><el-icon><CaretBottom /></el-icon>5.2%</span
-              ></span
-            >
-          </div>
+          <div class="card-value">{{ indexData.pendingDeliveryOrders.toLocaleString() }}</div>
         </el-card>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
@@ -42,15 +26,7 @@
             <span class="card-title">本月成交额(元)</span>
             <el-tag type="success">月</el-tag>
           </div>
-          <div class="card-value">￥89,450.00</div>
-          <div class="card-footer">
-            <span class="trend"
-              >同比上月
-              <span class="up"
-                ><el-icon><CaretTop /></el-icon>8.1%</span
-              ></span
-            >
-          </div>
+          <div class="card-value">￥{{ indexData.monthlyRevenue.toLocaleString() }}</div>
         </el-card>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
@@ -59,15 +35,7 @@
             <span class="card-title">售后退款订单(笔)</span>
             <el-tag type="danger">售后</el-tag>
           </div>
-          <div class="card-value">28</div>
-          <div class="card-footer">
-            <span class="trend"
-              >较昨日
-              <span class="up"
-                ><el-icon><CaretTop /></el-icon>2.0%</span
-              ></span
-            >
-          </div>
+          <div class="card-value">{{ indexData.afterSaleOrders.toLocaleString() }}</div>
         </el-card>
       </el-col>
     </el-row>
@@ -105,32 +73,28 @@
           <template #header>
             <div class="card-header-flex">
               <span class="title">最新订单动态</span>
-              <el-button link type="primary">查看全部</el-button>
+              <el-button link type="primary" @click="viewAllOrders">查看全部</el-button>
             </div>
           </template>
-          <el-table :data="recentOrders" style="width: 100%" max-height="400">
-            <el-table-column prop="orderNo" label="订单编号" width="180" />
-            <el-table-column prop="customerName" label="客户名称" width="150" />
-            <el-table-column prop="platform" label="来源平台" width="120">
+          <el-table :data="indexData.latestOrders" style="width: 100%" max-height="400">
+            <el-table-column prop="orderNo" label="订单编号" />
+            <el-table-column prop="customerName" label="客户名称" />
+            <el-table-column prop="orderSource" label="订单来源">
               <template #default="scope">
-                <el-tag size="small" :type="scope.row.platform === '供应商' ? 'danger' : 'success'">
-                  {{ scope.row.platform }}
-                </el-tag>
+                <dict-tag :options="order_source" :value="scope.row.orderSource" />
               </template>
             </el-table-column>
-            <el-table-column prop="amount" label="订单金额(元)" width="150" />
-            <el-table-column prop="status" label="订单状态" width="120">
+            <el-table-column prop="amount" label="订单金额(元)">
               <template #default="scope">
-                <el-tag :type="getStatusType(scope.row.status)" effect="light">{{ scope.row.status }}</el-tag>
+                {{ scope.row.amount?.toLocaleString() }}
               </template>
             </el-table-column>
-            <el-table-column prop="createTime" label="创建时间" min-width="160" />
-            <el-table-column label="操作" width="120" fixed="right">
-              <template>
-                <el-button link type="primary" size="small">详情</el-button>
-                <!-- <el-button link type="primary" size="small">跟踪</el-button> -->
+            <el-table-column prop="status" label="订单状态">
+              <template #default="scope">
+                <dict-tag :options="order_status" :value="scope.row.status" />
               </template>
             </el-table-column>
+            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
           </el-table>
         </el-card>
       </el-col>
@@ -139,69 +103,52 @@
 </template>
 
 <script setup name="Index" lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, getCurrentInstance, toRefs } from 'vue';
+import type { ComponentInternalInstance } from 'vue';
+import { orderIndexData } from '@/api/order/orderMain';
+import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
 import { CaretTop, CaretBottom } from '@element-plus/icons-vue';
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { order_status, order_source } = toRefs<any>(proxy?.useDict('order_status', 'order_source'));
+
+const router = useRouter();
+
 // 图表 refs
 const chartRef = ref<HTMLElement | null>(null);
 const pieRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 let pieInstance: echarts.ECharts | null = null;
 
-// 模拟订单数据
-const recentOrders = ref([
-  { orderNo: 'ORD202310100001', customerName: '张先生', platform: '供应商', amount: '1,299.00', status: '待发货', createTime: '2023-10-10 10:23:05' },
-  {
-    orderNo: 'ORD202310100002',
-    customerName: '李四科技',
-    platform: '伙伴商',
-    amount: '8,950.00',
-    status: '已发货',
-    createTime: '2023-10-10 09:15:30'
-  },
-  { orderNo: 'ORD202310090015', customerName: '王五', platform: '大客户', amount: '399.00', status: '已完成', createTime: '2023-10-09 16:45:11' },
-  {
-    orderNo: 'ORD202310090008',
-    customerName: '赵六实业',
-    platform: '供应商',
-    amount: '12,500.00',
-    status: '已关闭',
-    createTime: '2023-10-09 11:20:00'
-  },
-  { orderNo: 'ORD202310080034', customerName: '孙七', platform: '普通客户', amount: '59.90', status: '部分发货', createTime: '2023-10-08 20:11:45' },
-  {
-    orderNo: 'ORD202310080002',
-    customerName: '华润商贸',
-    platform: '伙伴商',
-    amount: '45,000.00',
-    status: '已完成',
-    createTime: '2023-10-08 14:30:12'
-  }
-]);
+// 首页数据
+const indexData = ref({
+  todayOrders: 0,
+  pendingDeliveryOrders: 0,
+  monthlyRevenue: 0,
+  afterSaleOrders: 0,
+  weeklyTrend: [] as { date: string; count: number }[],
+  platformProportion: [] as { name: string; value: number }[],
+  latestOrders: [] as any[]
+});
 
-// 订单状态颜色映射
-const getStatusType = (status: string) => {
-  switch (status) {
-    case '待发货':
-      return 'warning';
-    case '已发货':
-      return 'primary';
-    case '部分发货':
-      return 'primary';
-    case '已完成':
-      return 'success';
-    case '已关闭':
-      return 'info';
-    default:
-      return 'info';
+const getIndexData = async () => {
+  const res = await orderIndexData();
+  if (res.code === 200) {
+    indexData.value = res.data;
   }
 };
 
+// 跳转订单列表
+const viewAllOrders = () => {
+  router.push('/order-center/order-list');
+};
+
 // 初始化柱状图
 const initBarChart = () => {
   if (!chartRef.value) return;
   chartInstance = echarts.init(chartRef.value);
+  const { weeklyTrend } = indexData.value;
   chartInstance.setOption({
     tooltip: {
       trigger: 'axis',
@@ -216,7 +163,7 @@ const initBarChart = () => {
     xAxis: [
       {
         type: 'category',
-        data: ['10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10'],
+        data: weeklyTrend.map((item) => item.date),
         axisTick: { alignWithLabel: true },
         axisLine: { lineStyle: { color: '#909399' } }
       }
@@ -232,7 +179,7 @@ const initBarChart = () => {
         name: '新增订单数',
         type: 'bar',
         barWidth: '40%',
-        data: [120, 200, 150, 80, 70, 110, 130],
+        data: weeklyTrend.map((item) => item.count),
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#83bff6' },
@@ -250,6 +197,8 @@ const initBarChart = () => {
 const initPieChart = () => {
   if (!pieRef.value) return;
   pieInstance = echarts.init(pieRef.value);
+  const { platformProportion } = indexData.value;
+  const colors = ['#f56c6c', '#e6a23c', '#409eff', '#67c23a', '#909399'];
   pieInstance.setOption({
     tooltip: {
       trigger: 'item',
@@ -285,13 +234,11 @@ const initPieChart = () => {
         labelLine: {
           show: false
         },
-        data: [
-          { value: 1048, name: '供应商', itemStyle: { color: '#f56c6c' } },
-          { value: 735, name: '伙伴商', itemStyle: { color: '#e6a23c' } },
-          { value: 580, name: '大客户', itemStyle: { color: '#409eff' } },
-          { value: 484, name: '普通客户', itemStyle: { color: '#67c23a' } },
-          { value: 300, name: '其他渠道', itemStyle: { color: '#909399' } }
-        ]
+        data: platformProportion.map((item, index) => ({
+          value: item.value,
+          name: item.name,
+          itemStyle: { color: colors[index % colors.length] }
+        }))
       }
     ]
   });
@@ -303,7 +250,8 @@ const resizeCharts = () => {
   pieInstance?.resize();
 };
 
-onMounted(() => {
+onMounted(async () => {
+  await getIndexData();
   nextTick(() => {
     initBarChart();
     initPieChart();