perf: 看板: 增加目的地国籍地图

src/components/MapCountry.jsx

@@ -5,22 +5,22 @@ import { dataFieldAlias } from '../libs/ht';
 import { cloneDeep } from '../utils/commons';
 
 export default observer((props) => {
-  const { dataSource, sourceField, valueField, ...extConfig } = props;
+  const { dataSource, sourceField, valueField, containerNode, ...extConfig } = props;
 
   const [mdataSource, setMdataSource] = useState([]);
   useEffect(() => {
     const dataMapped = (cloneDeep(dataSource) || []).reduce((r, v) => ({...r,
-      [(v.groupsLabel || '_').replace('(待删除)', '')]: v
+      [(v[sourceField] || '_').replace('(待删除)', '')]: v
     }), {});
     if (dataMapped?.['中国']) {
-      dataMapped['中国'].groupsLabel = '中华人民共和国';
+      dataMapped['中国'][sourceField] = '中华人民共和国';
     }
     setMdataSource(Object.values(dataMapped));
     return () => {};
   }, [dataSource, valueField]);
 
   const config = {
-      container: '#topC',
+      container: containerNode || '#topC',
       map: {
         // type: 'amap',
         type: 'mapbox',
@@ -38,7 +38,7 @@ export default observer((props) => {
       //   type: 'topojson',
       // },
       source: {
-        data: mdataSource.filter((ele) => ele[sourceField]),
+        data: mdataSource.filter((ele) => ele[sourceField] && ele[valueField] !== 0 ),
         joinBy: {
           geoField: 'name',
           sourceField: sourceField || 'name',

src/stores/Distribution.js

@@ -24,7 +24,7 @@ class Distribution {
   /**
    * 各个类型的分布
    */
-  getApartData = async (param) => {
+  getApartData = async (param, getDiff = undefined) => {
     this.pageLoading = true;
     const mkey = this.curTab;
     this[mkey] = { loading: true, dataSource: [] };
@@ -36,11 +36,13 @@ class Distribution {
     const [DateToQ1, DateToQ2] = [moment(param.Date1).subtract(moment(param.Date2).diff(param.Date1, 'days') + 1, 'days'), moment(param.Date1).subtract(1, 'days')];
     // 同比的参数: 去年同期
     const [DateToY1, DateToY2] = [moment(param.Date1).subtract(1, 'year'), moment(param.Date2).subtract(1, 'year')];
-    param.DateToY1 = DateToY1.format(DATE_FORMAT);
-    param.DateToY2 = DateToY2.format(SMALL_DATETIME_FORMAT);
-    param.DateToQ1 = DateToQ1.format(DATE_FORMAT);
-    param.DateToQ2 = DateToQ2.format(SMALL_DATETIME_FORMAT);
-    const dynamicsX = modelMapper[mkey].dynamicsX;
+    const dynamicsX = getDiff ?? modelMapper[mkey].dynamicsX;
+    if (getDiff === undefined) {
+      param.DateToY1 = DateToY1.format(DATE_FORMAT);
+      param.DateToY2 = DateToY2.format(SMALL_DATETIME_FORMAT);
+      param.DateToQ1 = DateToQ1.format(DATE_FORMAT);
+      param.DateToQ2 = DateToQ2.format(SMALL_DATETIME_FORMAT);
+    }
     const json = dynamicsX === false ? await req.fetchJSON(modelMapper[mkey].url, param) : await this.getApartDataStep(param);
     if (json.errcode === 0) {
       const dataLength = json.result.length;

src/views/Home.jsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col, Spin, Space, Radio, Table, Button } from 'antd';
+import { Row, Col, Spin, Space, Radio, Table, Button, } from 'antd';
 import { CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwoTone } from '@ant-design/icons';
 import { stores_Context } from '../config';
 import StatisticCard2 from '../components/StatisticCard2';
@@ -25,6 +25,7 @@ const topSeries = [
   { key: 'country', value: 'country', label: '国籍', graphVisible: true },
   { key: 'webcode', value: 'webcode', label: '站点', graphVisible: false },
   { key: 'bizarea', value: 'bizarea', label: '国境', graphVisible: false },
+  { key: 'destinationcountry', value: 'destinationcountry', label: '目的地国籍', graphVisible: false },
 ];
 
 const allGroupTypes = [
@@ -37,17 +38,27 @@ const iconSets = [CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwo
 
 export default observer(() => {
   // const navigate = useNavigate();
-  const { TradeStore, date_picker_store: searchFormStore } = useContext(stores_Context);
+  const { TradeStore, date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
   const { searchValues, sideData, summaryData, BuData, topData, timeData, timeLineKey, targetTableProps, timeDiffData, groupKey } = TradeStore;
-  const { formValues, siderBroken } = searchFormStore;
+  const { formValues, formValuesToSub, siderBroken } = searchFormStore;
+
+  const { curTab, dateStringQ, dateStringY } = DistributionStore;
 
   useEffect(() => {
-    if (empty(summaryData.dataSource)) {
-      // pageRefresh();
-    }
+    DistributionStore.setCurTab('destinationCountry');
+    // if (empty(summaryData.dataSource)) {
+    //   // pageRefresh();
+    // }
     return () => {};
   }, []);
 
+  const getDestinationCountry = (obj) => {
+    DistributionStore.setCurTab('destinationCountry');
+    DistributionStore.getApartData({
+      ...(obj || formValuesToSub),
+    }, false);
+  };
+
   const [topSeriesSet, setTopSeriesSet] = useState(topSeries);
   const [overviewFlag, setOverviewFlag] = useState(true);
   const [groupTypeVal, setGroupTypeVal] = useState('overview');
@@ -200,6 +211,7 @@ export default observer(() => {
             onSubmit={(_err, obj, form, str) => {
               TradeStore.setSearch(obj, form);
               pageRefresh(obj);
+              getDestinationCountry(obj);
             }}
           />
         </Col>
@@ -308,10 +320,21 @@ export default observer(() => {
               </Col>
             ) : null
           )}
-          <Col key={'mapG'} flex={'1 0 600px'} >
+          <Col key={'mapG'}  span={24}>
+            <hr />
+            <h3>来源国籍分布</h3>
             <Spin spinning={topData?.country?.loading || false}>
               <div id="topC" style={{ height: '700px' }}>
-                <MapCountry sourceField={'groupsLabel'} valueField={BUConfig.measureField} dataSource={topData?.country?.dataSource || []} />
+                <MapCountry sourceField={'groupsLabel'} valueField={BUConfig.measureField} dataSource={topData?.country?.dataSource || []} containerNode='#topC' />
+              </div>
+            </Spin>
+          </Col>
+          <Col key={'mapDestinationCountry'}  span={24}>
+            <hr />
+            <h3>目的地国籍分布</h3>
+            <Spin spinning={DistributionStore.pageLoading || false}>
+              <div id="mapDestinationCountry" style={{ height: '700px' }}>
+                <MapCountry sourceField={'label'} valueField={BUConfig.measureField} dataSource={DistributionStore.destinationCountry.originData || []} containerNode='#mapDestinationCountry' />
               </div>
             </Spin>
           </Col>