feat: 首页: 排名

src/mock/2.0/trade.json

@@ -66,12 +66,13 @@
     "errmsg": "",
     "loading": false,
     "data": null,
-    "result1|10": [
+    "result1|5": [
       {
         "OrderTypeSN": "@integer(1,10)",
-        "OrderType": "@region",
+        "OrderType": "@cname",
         "OrderCount": "@integer(9,999)",
         "CJCount": "@integer(9,999)",
+        "CJCountKPI": "@integer(100,1000)",
         "CJPersonNum": "@integer(9,999)",
         "YJLY": "@integer(99,9999)",
         "CJrate": "@float(1,99,0,2)",

src/stores/Trade.js

@@ -58,13 +58,12 @@ class Trade {
   }
 
   fetchTradeDataByType(orderType) {
-    this.topData.loading = true;
-    this.topData[orderType] = null;
+    this.topData[orderType] = { loading: true, dataSource: [] };
     req.fetchJSON('/service-web/QueryData/GetTradeByType').then((json) => {
       if (json.errcode === 0) {
         runInAction(() => {
-          this.topData.loading = false;
-          this.topData[orderType] = { loading: false, ...json };
+          this.topData[orderType].loading = false;
+          this.topData[orderType].dataSource = json.result1;
           console.log({ loading: false, ...json }, orderType, 'topData');
         });
       }
@@ -73,7 +72,7 @@ class Trade {
 
   summaryData = { loading: false, dataSource: [] };
   sideData = { loading: false };
-  topData = { loading: false };
+  topData = { };
 }
 
 export default Trade;

src/views/Home.jsx

@@ -1,10 +1,12 @@
 import { useContext, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col, Spin, } from 'antd';
+import { Row, Col, Spin } from 'antd';
 import { stores_Context } from '../config';
 import { useNavigate } from 'react-router-dom';
 import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 import StatisticCard from './../charts/StatisticCard';
+import Bullet from './../charts/Bullet';
+import DataFieldRadio from './../components/DateFieldRadio';
 import { empty } from './../utils/commons';
 import './home.css';
 
@@ -13,12 +15,21 @@ export default observer(() => {
   const { TradeStore } = useContext(stores_Context);
   const { sideData, summaryData, topData } = TradeStore;
 
+  const topSeries = [
+    { key: 'Country', label: '国籍'},
+    { key: 'Area', label: '目的地'},
+    { key: 'Sales', label: '顾问'},
+    { key: 'GuestGroupType', label: '客群类别'},
+  ];
+
   useEffect(() => {
     if (empty(summaryData.dataSource)) {
       TradeStore.fetchSummaryData();
       TradeStore.fetchTradeDataByMonth();
-      TradeStore.fetchTradeDataByType('Country');
-      TradeStore.fetchTradeDataByType('Area');
+      for (const iterator of topSeries) {
+        TradeStore.fetchTradeDataByType(iterator.key);
+        // TradeStore.fetchTradeDataByType('Area');
+      }
     }
     return () => {};
   }, []);
@@ -30,26 +41,45 @@ export default observer(() => {
     xs: { span: 24 },
   };
 
+  const BulletConfig = {
+    measureField: 'CJCount', //
+    rangeField: 'CJCountRange', //
+    targetField: 'CJCountKPI', //
+    xField: 'OrderType',
+  };
+
   return (
     <>
       <h2>年度业绩</h2>
       <section>
         <Spin spinning={summaryData.loading}>
           <Row gutter={layoutProps.gutter}>
-            {summaryData.dataSource.map(item =>
-            <Col {...layoutProps} key={item.title}>
-              <StatisticCard {...item} showProgress={(item.hasKPI)} />
-            </Col>
-            )}
+            {summaryData.dataSource.map((item) => (
+              <Col {...layoutProps} key={item.title}>
+                <StatisticCard {...item} showProgress={item.hasKPI} />
+              </Col>
+            ))}
           </Row>
         </Spin>
       </section>
       <h3>市场进度</h3>
+      <section></section>
+      <h3>TOP
+      <div style={{float: 'right', display: 'inline-block'}}>
+        <DataFieldRadio />
+      </div></h3>
       <section>
-        <Spin spinning={sideData.loading}></Spin>
+        <Row gutter={layoutProps.gutter}>
+          {topSeries.map((item) => (
+            <Col {...layoutProps} key={item.key}>
+              <Spin spinning={topData[item.key]?.loading}>
+                <h3 style={{textAlign: 'center'}}>{item.label}</h3>
+                <Bullet {...BulletConfig} dataSource={topData[item.key]?.dataSource || []} />
+              </Spin>
+            </Col>
+          ))}
+        </Row>
       </section>
-      <h3>TOP</h3>
-      <section></section>
     </>
   );
 });