Bladeren bron

修改首页数据展示

hurx 4 dagen geleden
bovenliggende
commit
558b77541c
3 gewijzigde bestanden met toevoegingen van 66 en 47 verwijderingen
  1. 8 0
      src/api/partner/merchant/index.ts
  2. 17 0
      src/api/partner/merchant/types.ts
  3. 41 47
      src/views/index.vue

+ 8 - 0
src/api/partner/merchant/index.ts

@@ -47,3 +47,11 @@ export function exportPartnerMerchant(query: PartnerMerchantQuery) {
     data: query
   });
 }
+
+// 伙伴商协同平台首页数据
+export function partnerInfoIndexData() {
+  return request({
+    url: '/customer/partnerInfo/partnerInfoIndexData',
+    method: 'get'
+  });
+}

+ 17 - 0
src/api/partner/merchant/types.ts

@@ -33,3 +33,20 @@ export interface PartnerMerchantQuery extends PageQuery {
   partnerNo?: string;
   partnerName?: string;
 }
+
+export interface PartnerInfoIndexVO {
+  todayOrders: number;
+  weekRevenue: number;
+  pendingShipment: number;
+  onSaleProducts: number;
+  shipmentTrend: { date: string; count: number }[];
+  productTypeSales: { name: string; value: number }[];
+  latestShipments: {
+    orderNo: string;
+    productName: string;
+    amount: number;
+    customer: string;
+    status: string;
+    date: string;
+  }[];
+}

+ 41 - 47
src/views/index.vue

@@ -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();