功能：数据看板，订单数据接入

src/api/interface/dataDashboardsType.ts

@@ -94,3 +94,37 @@ export type userJoinReportDataType = InterFunction<
     trainingInstitution: number;
   }
 >;
+// 数据看板-订单数据
+export type orderReportDataType = InterFunction<
+  any,
+  {
+    /**
+     * 商品租赁交易总额
+     */
+    leaseGMV: number;
+    /**
+     * 商品租赁订单总数
+     */
+    leaseOrderCount: number;
+    /**
+     * 商城售卖交易总额
+     */
+    saleGMV: number;
+    /**
+     * 商城售卖订单总数
+     */
+    saleOrderCount: number;
+    /**
+     * 服务订单交易总额
+     */
+    serviceGMV: number;
+    /**
+     * 服务订单订单总数
+     */
+    serviceOrderCount: number;
+    /**
+     * 交易总额
+     */
+    totalGMV: number;
+  }
+>;

src/api/modules/dataDashboardsAPI.ts

 import {
+  orderReportDataType,
   releaseReportDataType,
   userJoinReportDataType,
   userReportDataType,
@@ -15,4 +16,7 @@ export class DataDashboardsAPI {
   // 数据看板-加盟信息
   static getUserJoinReportData: userJoinReportDataType = () =>
     axios.get('/pms/product/report/getProductReportData');
+  //   数据看板-订单信息
+  static getOrderReportData: orderReportDataType = () =>
+    axios.get('/oms/product/report/getOrderReportData');
 }

src/pages/dataDashboards/components/tradeInfo/index.tsx

 import './index.scss';
 import * as echarts from 'echarts';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { DataDashboardsAPI } from '~/api';
+import { InterDataType } from '~/api/interface';
+import { orderReportDataType } from '~/api/interface/dataDashboardsType';
+import dayjs from 'dayjs';
 
+// 数据看板-订单数据返回类型
+type orderDataType = InterDataType<orderReportDataType>;
 const TradeInfo = () => {
+  const [orderData, setOrderData] = useState<orderDataType>();
+  // 表格数据
+  const [tableData, setTableData] = useState<{ label: string; orderCount: number; GMV: number }[]>(
+    [],
+  );
   //   初始化柱状图
-  const initEchartsBar = () => {
+  const initEchartsBar = (totalOrderCount: number[], totalPriceCount: number[]) => {
     const myChart = echarts.init(document.getElementById('histogram'));
     myChart.setOption({
       legend: {
@@ -33,7 +44,7 @@ const TradeInfo = () => {
         {
           name: '总订单数',
           type: 'bar',
-          data: [50, 20, 36],
+          data: totalOrderCount,
           barWidth: '13',
           itemStyle: {
             barBorderRadius: [7, 7, 0, 0],
@@ -46,7 +57,7 @@ const TradeInfo = () => {
         {
           name: '总交易额',
           type: 'bar',
-          data: [50, 20, 36],
+          data: totalPriceCount,
           barWidth: '13',
           itemStyle: {
             barBorderRadius: [7, 7, 0, 0],
@@ -62,17 +73,46 @@ const TradeInfo = () => {
       myChart.resize();
     });
   };
+  // 数据看板-订单数据
+  const getOrderReportData = () => {
+    DataDashboardsAPI.getOrderReportData().then(({ result }) => {
+      if (result) {
+        setOrderData(result);
+        initEchartsBar(
+          [result.saleOrderCount, result.leaseOrderCount, result.serviceOrderCount],
+          [result.saleGMV, result.leaseGMV, result.serviceGMV],
+        );
+        setTableData([
+          {
+            label: '商城售卖',
+            orderCount: result.saleOrderCount,
+            GMV: result.saleGMV,
+          },
+          {
+            label: '商品租赁',
+            orderCount: result.leaseOrderCount,
+            GMV: result.leaseGMV,
+          },
+          {
+            label: '服务订单',
+            orderCount: result.serviceOrderCount,
+            GMV: result.serviceGMV,
+          },
+        ]);
+      }
+    });
+  };
 
   useEffect(() => {
-    initEchartsBar();
+    getOrderReportData();
   }, []);
 
   return (
     <div className='trade-info'>
       <div className='trade-info-card-1'>
-        <div className='total-price'>12987.00</div>
+        <div className='total-price'>{orderData?.totalGMV.toLocaleString()}</div>
         <div className='total-price-meta'>实时交易总额 (GMV)</div>
-        <div className='time'>09.05更新</div>
+        <div className='time'>{dayjs().format('MM-DD')}更新</div>
       </div>
       <div className='trade-info-card-2'>
         <div className='card-header'>
@@ -86,21 +126,13 @@ const TradeInfo = () => {
             <div className='header-td'>订单总数(个)</div>
             <div className='header-td'>交易总额(元)</div>
           </div>
-          <div className='card-table-tr'>
-            <div className='td'>商城售卖</div>
-            <div className='td'>123</div>
-            <div className='td'>¥187.00</div>
-          </div>
-          <div className='card-table-tr'>
-            <div className='td'>商品租赁</div>
-            <div className='td'>123</div>
-            <div className='td'>¥187.00</div>
-          </div>{' '}
-          <div className='card-table-tr'>
-            <div className='td'>服务订单</div>
-            <div className='td'>123</div>
-            <div className='td'>¥187.00</div>
-          </div>
+          {tableData.map((v, index) => (
+            <div className='card-table-tr' key={index}>
+              <div className='td'>{v.label}</div>
+              <div className='td'>{v.orderCount}</div>
+              <div className='td'>¥{v.GMV.toLocaleString()}</div>
+            </div>
+          ))}
         </div>
       </div>
     </div>