todo: trade data

src/mock/2.0/trade.json

@@ -5,22 +5,22 @@
     "data": null,
     "loading": false,
     "result1": {
-      "SumML|999-9999": 27018,
-      "SumMLrate|-20-100": 23,
-      "SumMLKPIrate|20-100": 23,
-      "SumOrder|999-999": 27018,
+      "SumML": "@float(999,9999,2,2)",
+      "SumMLrate": "@float(-20,100,2,2)",
+      "SumMLKPIrate": "@float(20,100,2,2)",
+      "SumOrder": "@integer(99,999)",
       "SumOrderrate": "@float(-20,20,2,2)",
       "SumOrderKPIrate|20-100": 25,
-      "SumPersonNum|999-999": 27018,
+      "SumPersonNum": "@integer(999,9999)",
       "SumPersonNumrate|-50-1": 33,
       "SumPersonNumKPIrate|20-100": 33,
       "groups": "2023-05-01~2023-05-31",
       "key": "@increment"
     },
     "result2": {
-      "SumML|999-9999": 27018,
-      "SumOrder|999-999": 27018,
-      "SumPersonNum|999-999": 27018,
+      "SumML": "@float(999,9999,2,2)",
+      "SumOrder": "@integer(99,999)",
+      "SumPersonNum": "@integer(99,999)",
       "groups": "2022-05-01~2023-05-31",
       "key": "@increment"
     }
@@ -31,8 +31,11 @@
     "loading": false,
     "data|24": [
       {
-        "biz_side|1": ["inside", "outside"],
-        "SumML|999-9999": 27018,
+        "biz_side|1": [
+          "inside",
+          "outside"
+        ],
+        "SumML": "@float(999,9999,2,2)",
         "SumMLKPIrate": "@float(0,70,2,2)",
         "COLI_Department": "1,2,28,7",
         "month": "@date('MM')",
@@ -41,7 +44,7 @@
     ],
     "inside|12": [
       {
-        "SumML|999-9999": 27018,
+        "SumML": "@float(999,9999,2,2)",
         "SumMLKPIrate": "@float(0,70,2,2)",
         "COLI_Department": "1,2,28,7",
         "month|+1": -11,
@@ -50,12 +53,44 @@
     ],
     "outside|12": [
       {
-        "SumML|999-9999": 27018,
+        "SumML": "@float(999,9999,2,2)",
         "SumMLKPIrate": "@float(0,70,2,2)",
         "COLI_Department": "1,2,28,7",
         "month|+1": -11,
         "key": "@increment"
       }
     ]
+  },
+  "get|/service-web/QueryData/GetTradeByType": {
+    "errcode": 0,
+    "errmsg": "",
+    "loading": false,
+    "data": null,
+    "result1|10": [
+      {
+        "OrderTypeSN": "@integer(1,10)",
+        "OrderType": "@region",
+        "OrderCount": "@integer(9,999)",
+        "CJCount": "@integer(9,999)",
+        "CJPersonNum": "@integer(9,999)",
+        "YJLY": "@integer(99,9999)",
+        "CJrate": "@float(1,99,0,2)",
+        "Ordervalue": "@integer(9,999)",
+        "SumML": "@integer(99,9999)",
+        "SumMLrate": "@float(-20,100,0,2)",
+        "SumMLKPIrate": "@float(20,100,0,2)",
+        "SumOrder": "@integer(9,999)",
+        "SumOrderrate": "@float(-20,20,0,2)",
+        "SumOrderKPIrate": "@float(20,100,0,2)",
+        "SumPersonNum": "@integer(99,9999)",
+        "SumPersonNumrate": "@float(-50,1,0,2)",
+        "SumPersonNumKPIrate": "@float(20,100,0,2)",
+        "groups": "2023-06-12~2023-06-18",
+        "key": "@increment"
+      }
+    ],
+    "result2": [
+      {}
+    ]
   }
 }

src/stores/Trade.js

@@ -20,7 +20,22 @@ class Trade {
     req.fetchJSON('/service-web/QueryData/GetTradeSummary').then((json) => {
       if (json.errcode === 0) {
         runInAction(() => {
-          this.summaryData = { loading: false, ...json };
+          const summaryData = {
+            loading: false,
+            dataSource: [
+              {
+                title: '人数',
+                value: json.result1?.SumPersonNum,
+                VSrate: json.result1?.SumPersonNumrate,
+                KPIrate: json.result1?.SumPersonNumKPIrate,
+                hasKPI: !isEmpty(json.result1?.SumPersonNumKPIrate),
+              },
+              { title: '成团', value: json.result1?.SumOrder, VSrate: json.result1?.SumOrderrate, KPIrate: json.result1?.SumOrderKPIrate, hasKPI: !isEmpty(json.result1?.SumOrderKPIrate) },
+              { title: '毛利', value: json.result1?.SumML, VSrate: json.result1?.SumMLrate, KPIrate: json.result1?.SumMLKPIrate, hasKPI: !isEmpty(json.result1?.SumMLKPIrate) },
+              { title: '完成率', value: `${json.result1?.SumMLKPIrate}%`, hasKPI: false },
+            ],
+          };
+          this.summaryData = summaryData;
         });
       }
     });
@@ -35,15 +50,30 @@ class Trade {
             (r[v.biz_side] || (r[v.biz_side] = [])).push(v);
             return r;
           }, {});
-          console.log(_sideData);
+          console.log(_sideData, '_sideData');
           this.sideData = { loading: false, ...json };
         });
       }
     });
   }
 
-  summaryData = { loading: false };
+  fetchTradeDataByType(orderType) {
+    this.topData.loading = true;
+    this.topData[orderType] = null;
+    req.fetchJSON('/service-web/QueryData/GetTradeByType').then((json) => {
+      if (json.errcode === 0) {
+        runInAction(() => {
+          this.topData.loading = false;
+          this.topData[orderType] = { loading: false, ...json };
+          console.log({ loading: false, ...json }, orderType, 'topData');
+        });
+      }
+    });
+  }
+
+  summaryData = { loading: false, dataSource: [] };
   sideData = { loading: false };
+  topData = { loading: false };
 }
 
 export default Trade;

src/views/Home.jsx

@@ -7,17 +7,17 @@ import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, Github
 import { empty } from './../utils/commons';
 import './home.css';
 
-const Home = () => {
+export default observer(() => {
   const navigate = useNavigate();
   const { TradeStore } = useContext(stores_Context);
-  const { sideData, summaryData } = TradeStore;
+  const { sideData, summaryData, topData } = TradeStore;
 
   useEffect(() => {
-    if (empty(summaryData?.errcode)) {
+    if (empty(summaryData.dataSource)) {
       TradeStore.fetchSummaryData();
-    }
-    if (empty(sideData?.errcode)) {
       TradeStore.fetchTradeDataByMonth();
+      TradeStore.fetchTradeDataByType('Country');
+      TradeStore.fetchTradeDataByType('Area');
     }
     return () => {};
   }, []);
@@ -46,34 +46,33 @@ const Home = () => {
     );
   };
 
+  const layoutProps = {
+    gutter: { xs: 8, sm: 8, lg: 16 },
+    lg: { span: 6 },
+    sm: { span: 12 },
+    xs: { span: 24 },
+  };
+
   return (
     <>
       <h2>年度业绩</h2>
       <section>
         <Spin spinning={summaryData.loading}>
-          <Row gutter={16}>
-            <Col span={6}>
-              <StatisticCard title="人数" value={summaryData?.result1?.SumPersonNum} VSrate={summaryData?.result1?.SumPersonNumrate} KPIrate={summaryData?.result1?.SumPersonNumKPIrate} />
-            </Col>
-            <Col span={6}>
-              <StatisticCard title="成团" value={summaryData?.result1?.SumOrder} VSrate={summaryData?.result1?.SumOrderrate} KPIrate={summaryData?.result1?.SumOrderKPIrate} />
-            </Col>
-            <Col span={6}>
-              <StatisticCard title="毛利" value={summaryData?.result1?.SumML} VSrate={summaryData?.result1?.SumMLrate} KPIrate={summaryData?.result1?.SumMLKPIrate} />
-            </Col>
-            <Col span={6}>
-              <StatisticCard title="完成率" value={`${summaryData?.result1?.SumMLKPIrate}%`} showProgress={false} />
+          <Row gutter={layoutProps.gutter}>
+            {summaryData.dataSource.map(item =>
+            <Col {...layoutProps} key={item.title}>
+              <StatisticCard {...item} showProgress={(item.hasKPI)} />
             </Col>
+            )}
           </Row>
         </Spin>
       </section>
       <h3>市场进度</h3>
-
       <section>
         <Spin spinning={sideData.loading}></Spin>
       </section>
+      <h3>TOP</h3>
+      <section></section>
     </>
   );
-};
-
-export default observer(Home);
+});