From 2cac46436327a5f336572a38894de043d115a3c5 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Fri, 22 Sep 2023 10:53:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E8=AE=A1=E5=88=86=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 5 +- src/stores/DictData.js | 1 + src/stores/Distribution.js | 61 +++++++++++++++++++ src/stores/Index.js | 2 + src/views/Distribution.jsx | 118 +++++++++++++++++++++++++++++++++++++ 5 files changed, 186 insertions(+), 1 deletion(-) create mode 100644 src/stores/Distribution.js create mode 100644 src/views/Distribution.jsx diff --git a/src/App.jsx b/src/App.jsx index 28f12ec..1ce1708 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,7 +10,7 @@ import { DollarOutlined, AreaChartOutlined, WechatOutlined, - UserOutlined, FlagOutlined, + UserOutlined, FlagOutlined, PieChartOutlined } from '@ant-design/icons'; import { Layout, Menu, Image, Spin } from 'antd'; import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom'; @@ -36,6 +36,7 @@ import { stores_Context } from './config'; import { observer } from 'mobx-react'; import ExchangeRate from './charts/ExchangeRate'; import KPI from './views/KPI'; +import Distribution from './views/Distribution'; const App = () => { const { Content, Footer, Sider } = Layout; @@ -121,6 +122,7 @@ const App = () => { ], }, { key: 'kpi', label: 目标, icon: }, + { key: 'distribution', label: 统计分布, icon: }, ]; return ( @@ -162,6 +164,7 @@ const App = () => { } /> } /> + } /> }> } /> } /> diff --git a/src/stores/DictData.js b/src/stores/DictData.js index 916d8a5..cdef2cd 100644 --- a/src/stores/DictData.js +++ b/src/stores/DictData.js @@ -56,6 +56,7 @@ class DictData { data = {}; operator = { loading: false, dataSource: [] }; + country = { loading: false, dataSource: [] }; vendor = { loading: false, dataSource: [] }; creditcardbilltype = { loading: false, dataSource: [] }; } diff --git a/src/stores/Distribution.js b/src/stores/Distribution.js new file mode 100644 index 0000000..e583983 --- /dev/null +++ b/src/stores/Distribution.js @@ -0,0 +1,61 @@ +import { makeAutoObservable, runInAction, toJS } from 'mobx'; +import * as req from '../utils/request'; +import { isEmpty, sortBy } from '../utils/commons'; + +const modelMapper = { + 'tourDays': { url: '/service-Analyse2/GetTradeApartByTourDays' }, + 'PML': { url: '/service-Analyse2/GetTradeApartByPML' }, + 'ConfirmDays': { url: '/service-Analyse2/GetTradeApartByConfirmDays' }, + 'ApplyDays': { url: '/service-Analyse2/GetTradeApartByApplyDays' }, + 'PersonNum': { url: '/service-Analyse2/GetTradeApartByPersonNum' }, + 'destination': { url: '/service-Analyse2/GetTradeApartByDestination' }, + 'GlobalDestination': { url: '/service-Analyse2/GetTradeApartByGlobalDestination' }, +}; +class Distribution { + constructor(appStore){ + this.appStore = appStore; + makeAutoObservable(this); + } + + async getData(param){ + const mkey = this.curTab; + this[mkey] = { loading: true, dataSource: [] }; + const json = await req.fetchJSON(modelMapper[mkey].url, param); + if (json.errcode === 0) { + runInAction(() => { + const dataLength = json.result.length; + this[mkey].loading = false; + this[mkey].originData = json.result; + this[mkey].dataSource = dataLength > 20 ? json.result.slice(0, 30) : json.result; + }); + } + return this[mkey]; + + } + + resetData() { + this.tourDays = { loading: false, dataSource: [] }; + this.PML = { loading: false, dataSource: [] }; + this.ConfirmDays = { loading: false, dataSource: [] }; + this.ApplyDays = { loading: false, dataSource: [] }; + this.PersonNum = { loading: false, dataSource: [] }; + this.destination = { loading: false, dataSource: [] }; + this.GlobalDestination = { loading: false, dataSource: [] }; + } + + curTab = 'tourDays'; + setCurTab(v) { + this.curTab = v; + } + + pageLoading = false; + + tourDays = { loading: false, dataSource: [] }; + PML = { loading: false, dataSource: [] }; + ConfirmDays = { loading: false, dataSource: [] }; + ApplyDays = { loading: false, dataSource: [] }; + PersonNum = { loading: false, dataSource: [] }; + destination = { loading: false, dataSource: [] }; + GlobalDestination = { loading: false, dataSource: [] }; +} +export default Distribution; diff --git a/src/stores/Index.js b/src/stores/Index.js index 0d38106..48dfba1 100644 --- a/src/stores/Index.js +++ b/src/stores/Index.js @@ -13,6 +13,7 @@ import CustomerServicesStore from "./CustomerServices"; import TradeStore from "./Trade"; import KPI from "./KPI"; import DictData from "./DictData"; +import Distribution from "./Distribution"; class Index { constructor() { this.dashboard_store = new DashboardStore(this); @@ -29,6 +30,7 @@ class Index { this.TradeStore = new TradeStore(this); this.KPIStore = new KPI(this); this.DictDataStore = new DictData(this); + this.DistributionStore = new Distribution(this); makeAutoObservable(this); } diff --git a/src/views/Distribution.jsx b/src/views/Distribution.jsx new file mode 100644 index 0000000..68a07f0 --- /dev/null +++ b/src/views/Distribution.jsx @@ -0,0 +1,118 @@ +import { useContext, useEffect, useMemo } from 'react'; +import { observer } from 'mobx-react'; +import { stores_Context } from '../config'; +import { Row, Col, Spin, Space, Radio, Tabs, Table } from 'antd'; +import { RingProgress } from '@ant-design/plots'; +import SearchForm from './../components/search/SearchForm'; +import "./kpi.css"; +import { empty } from '../utils/commons'; + +const apartOptions = [ + { key: 'tourDays', value: 'tourDays', label: '团天数', }, + { key: 'PML', value: 'PML', label: '单团毛利', }, + { key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期', }, + { key: 'ApplyDays', value: 'ApplyDays', label: '预定周期', }, + { key: 'PersonNum', value: 'PersonNum', label: '人等', }, + { key: 'destination', value: 'destination', label: '国内目的地', }, + { key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地', }, +]; + +export default observer((props) => { + const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context); + const { formValues, formValuesToSub } = searchFormStore; + const { curTab } = DistributionStore; + const pageRefresh = (obj) => { + DistributionStore.getData({ + DateType: 'applyDate', + Date1: searchFormStore.start_date.startOf('year').format('YYYY-MM-DD'), + Date2: searchFormStore.end_date.endOf('year').format('YYYY-MM-DD 23:59'), + ...(obj || formValuesToSub), + }); + }; + + useEffect(() => { + if (empty(DistributionStore[curTab].dataSource)) { + pageRefresh(); + } + }, [curTab]); + + useEffect(() => { + DistributionStore.resetData(); + return () => {}; + }, [formValuesToSub]); + + + const onTabsChange = (tab) => { + DistributionStore.setCurTab(tab); + }; + const RingProgressConfig = { + height: 60, + width: 60, + autoFit: false, + // percent: Number(_)/100, + color: ['#5B8FF9', '#E8EDF3'], + }; + const columns = [ + { + title: '', + dataIndex: 'label', + }, + { title: '团数', dataIndex: 'ConfirmOrder'}, + { title: '业绩', dataIndex: 'SumML', render1: (v) => `1`}, + { title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => }, + { title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => }, + ]; + return ( + <> + + {/* style={{ margin: '-16px -8px', padding: 0 }} */} + + { + pageRefresh(obj); + }} + /> + + +
+ { + // const ObjectItemPanel = objectComponents[ele.key]; + return { + ...ele, + children: ( + + {/* */} + + record.label} + loading={DistributionStore[curTab].loading} + pagination={false} + scroll={{ x: '100%' }} + /> + + ), + }; + })} + /> + + + ); +});