获取明细

src/App.jsx

@@ -10,9 +10,9 @@ import {
   DollarOutlined,
   AreaChartOutlined,
   WechatOutlined,
-  UserOutlined, FlagOutlined, PieChartOutlined
+  UserOutlined, FlagOutlined, PieChartOutlined, BarChartOutlined
 } from '@ant-design/icons';
-import { Layout, Menu, Image, Spin } from 'antd';
+import { Layout, Menu, Image, Badge } from 'antd';
 import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom';
 import Home from './views/Home';
 import Dashboard from './views/Dashboard';
@@ -37,6 +37,7 @@ import { observer } from 'mobx-react';
 import ExchangeRate from './charts/ExchangeRate';
 import KPI from './views/KPI';
 import Distribution from './views/Distribution';
+import Detail from './views/Detail';
 
 const App = () => {
   const { Content, Footer, Sider } = Layout;
@@ -123,6 +124,15 @@ const App = () => {
     },
     { key: 'kpi', label: <NavLink to="/kpi">目标</NavLink>, icon: <FlagOutlined /> },
     { key: 'distribution', label: <NavLink to="/distribution">统计分布</NavLink>, icon: <PieChartOutlined /> },
+    {
+      key: 'detail',
+      label: (
+        <NavLink to="/detail">
+          <Badge.Ribbon text="Beta">统计分析</Badge.Ribbon>
+        </NavLink>
+      ),
+      icon: <BarChartOutlined />,
+    },
   ];
 
   return (
@@ -165,6 +175,7 @@ const App = () => {
               <Route path="/" element={<Home />} />
               <Route path="/kpi" element={<KPI />} />
               <Route path="/distribution" element={<Distribution />} />
+              <Route path="/detail" element={<Detail />} />
               <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'marketing']} />}>
                 <Route path="/orders" element={<Orders />} />
                 <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub />} />

src/components/Scatter.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import { sortBy, merge } from '../utils/commons';
+import { dataFieldAlias } from '../libs/ht';
+import { Mix, Scatter } from '@ant-design/plots';
+
+export default observer((props) => {
+  const { dataSource, ...extProps } = props;
+  const config = merge(
+    {
+      appendPadding: 10,
+      // xField: 'Revenue (Millions)',
+      // yField: 'Rating',
+      shape: 'circle',
+      // colorField: 'Genre',
+      size: 4,
+      yAxis: {
+        nice: true,
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+      xAxis: {
+        min: -100,
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+    }, extProps);
+  return <Scatter {...config} data={dataSource} />;
+});

src/stores/Distribution.js

@@ -1,6 +1,6 @@
 import { makeAutoObservable, runInAction, toJS } from 'mobx';
 import * as req from '../utils/request';
-import { isEmpty, sortBy } from '../utils/commons';
+import { isEmpty, pick, sortBy } from '../utils/commons';
 
 const modelMapper = {
   'tourDays': { url: '/service-Analyse2/GetTradeApartByTourDays' },
@@ -17,7 +17,10 @@ class Distribution {
     makeAutoObservable(this);
   }
 
-  async getData(param){
+  /**
+   * 各个类型的分布
+   */
+  getApartData = async (param) => {
     const mkey = this.curTab;
     this[mkey] = { loading: true, dataSource: [] };
     const json = await req.fetchJSON(modelMapper[mkey].url, param);
@@ -30,10 +33,29 @@ class Distribution {
       });
     }
     return this[mkey];
+  };
 
-  }
+  /**
+   * 明细
+   */
+  getDetailData = async (param) => {
+    this.detailData.loading = true;
+    const json = await req.fetchJSON('/service-Analyse2/GetTradeApartDetail', param);
+    if (json.errcode === 0) {
+      runInAction(() => {
+        this.detailData.loading = false;
+        this.detailData.dataSource = json.result;
+        const daysData = json.result.filter(ele => ele.confirmDays).map(row => pick(row, ['o_id', 'tourdays', 'applyDays', 'personNum', 'country', 'startDate']));
+        this.scatterDays = daysData;
+      });
+    }
+    return this.detailData;
+  };
+
+  resetData = () => {
+    // this.detailData = { loading: false, dataSource: [] };
+    // this.scatterDays = [];
 
-  resetData() {
     this.tourDays = { loading: false, dataSource: [] };
     this.PML = { loading: false, dataSource: [] };
     this.ConfirmDays = { loading: false, dataSource: [] };
@@ -41,7 +63,7 @@ class Distribution {
     this.PersonNum = { loading: false, dataSource: [] };
     this.destination = { loading: false, dataSource: [] };
     this.GlobalDestination = { loading: false, dataSource: [] };
-  }
+  };
 
   curTab = 'tourDays';
   setCurTab(v) {
@@ -50,6 +72,9 @@ class Distribution {
 
   pageLoading = false;
 
+  detailData = { loading: false, dataSource: [], };
+  scatterDays = [];
+
   tourDays = { loading: false, dataSource: [] };
   PML = { loading: false, dataSource: [] };
   ConfirmDays = { loading: false, dataSource: [] };

src/views/Detail.jsx

@@ -0,0 +1,80 @@
+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 { empty } from '../utils/commons';
+import { dataFieldAlias } from '../libs/ht';
+import Scatter from './../components/Scatter';
+import SearchForm from './../components/search/SearchForm';
+
+export default observer((props) => {
+  const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
+  const { formValues, formValuesToSub } = searchFormStore;
+  const { curTab, scatterDays, detailData } = DistributionStore;
+
+  const detailRefresh = (obj) => {
+    DistributionStore.getDetailData({
+      ...(obj || formValuesToSub),
+    });
+  };
+
+  useEffect(() => {
+    if (empty(detailData.dataSource)) {
+      detailRefresh();
+    }
+  }, []);
+
+  const ScatterConfig = {
+    xField: 'startDate',
+    yField: 'tourdays',
+    colorField: 'country',
+    size: 4,
+    // xAxis: {
+    //   min: 0,
+    //   max: 30,
+    // },
+    yAxis: {
+      min: 0,
+      max: 10,
+    },
+    // quadrant: {
+    //   xBaseline: 15,
+    //   yBaseline: 5,
+    // },
+    tooltip: false,
+    legend: {
+      position: 'right-top',
+    },
+  };
+    return (
+      <>
+        <Row gutter={16} style={{ margin: '-16px -8px' }}>
+          {/* style={{ margin: '-16px -8px', padding: 0 }} */}
+          <Col className="gutter-row" span={24}>
+            <SearchForm
+              defaultValue={{
+                initialValue: {
+                  ...formValues,
+                },
+                shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates', 'country'],
+                fieldProps: {
+                  DepartmentList: { show_all: true },
+                  WebCode: { show_all: true },
+                  dates: { hide_vs: true },
+                },
+              }}
+              onSubmit={(_err, obj, form, str) => {
+                detailRefresh(obj);
+              }}
+            />
+          </Col>
+        </Row>
+
+        <section>
+          <Spin spinning={detailData.loading}>
+            <Scatter {...ScatterConfig} dataSource={scatterDays} />
+          </Spin>
+        </section>
+        </>
+    );
+});