From 528a950b220a37662361becb3d4ae89501f82ef0 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Wed, 27 Dec 2023 15:30:44 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E7=9C=8B=E6=9D=BF:=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E7=9B=AE=E7=9A=84=E5=9C=B0=E5=9B=BD=E7=B1=8D=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MapCountry.jsx | 10 ++++----- src/stores/Distribution.js | 14 +++++++------ src/views/Home.jsx | 39 ++++++++++++++++++++++++++++------- 3 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/components/MapCountry.jsx b/src/components/MapCountry.jsx index 9e6a444..c2fea33 100644 --- a/src/components/MapCountry.jsx +++ b/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', diff --git a/src/stores/Distribution.js b/src/stores/Distribution.js index fd8bbbf..3d387a8 100644 --- a/src/stores/Distribution.js +++ b/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; diff --git a/src/views/Home.jsx b/src/views/Home.jsx index cd5cfdb..1ff8575 100644 --- a/src/views/Home.jsx +++ b/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); }} /> @@ -308,10 +320,21 @@ export default observer(() => { ) : null )} - + +
+

来源国籍分布

- + +
+ + + +
+

目的地国籍分布

+ +
+