首页 年度 时间轴

src/components/Waterfall.jsx

@@ -66,7 +66,6 @@ export default observer((props) => {
       customItems: (originalItems) => {
         // process originalItems,
         const items = originalItems.map((ele) => ({ ...ele, title: `${ele.title} ${ele.data.groupsLabel}`, name: dataFieldAlias[ele.name]?.alias || ele.name }));
-        console.log(originalItems, items, 'llll');
         return items;
       },
     },

src/stores/Trade.js

@@ -54,7 +54,7 @@ class Trade {
    */
   fetchTradeDataByDate(queryData) {
     this.timeData.loading = true;
-    Object.assign(queryData, { groupType: 'overview', groupDateType: 'month' });
+    Object.assign(queryData, { groupType: 'overview', groupDateType: 'week' });
     this.fetchTradeData(queryData).then((json) => {
       if (json.errcode === 0) {
         runInAction(() => {

src/views/Home.jsx

@@ -8,14 +8,15 @@ import Bullet from '../components/BulletWithSort';
 import Waterfall from '../components/Waterfall';
 import DataFieldRadio from './../components/DateFieldRadio';
 import SearchForm from './../components/search/SearchForm';
-import { empty } from './../utils/commons';
+import { empty, cloneDeep } from './../utils/commons';
 import { dataFieldAlias } from './../libs/ht';
+import { Line } from '@ant-design/charts';
 import './home.css';
 
 export default observer(() => {
   const navigate = useNavigate();
   const { TradeStore } = useContext(stores_Context);
-  const { searchPayloadHome, sideData, summaryData, BuData, topData } = TradeStore;
+  const { searchPayloadHome, sideData, summaryData, BuData, topData, timeData } = TradeStore;
 
   const topSeries = [
     { key: 'country', label: '国籍' },
@@ -34,6 +35,7 @@ export default observer(() => {
 
   const pageRefresh = (queryData) => {
     TradeStore.fetchSummaryData(queryData);
+    TradeStore.fetchTradeDataByDate(queryData);
     TradeStore.fetchTradeDataByBU(queryData);
     TradeStore.fetchTradeDataByMonth(queryData);
     for (const iterator of topSeries) {
@@ -95,11 +97,52 @@ export default observer(() => {
     xField: 'groupsLabel',
     layout: 'vertical',
   };
+
+  const lineConfigSet = {
+    // data: orders_data.data,
+    padding: 'auto',
+    xField: 'groupDateVal',
+    yField: 'SumML',
+    seriesField: 'groupsLabel',
+    xAxis: {
+      type: 'cat',
+    },
+    smooth: true,
+    point: {
+      size: 4,
+      shape: "cicle",
+    },
+    legend: false,
+    meta: { ...cloneDeep(dataFieldAlias)
+      // [extProps.yField]: {
+      //   alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
+      //   formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
+      //   max: Math.ceil(yMax / 0.95),
+      // },
+    },
+  };
+  const [timeDataField, setTimeDataField] = useState('SumML');
+  const [lineConfig, setLineConfig] = useState(cloneDeep(lineConfigSet));
+  const handleChangetimeDataField = (key) => {
+    setTimeDataField(key);
+    setLineConfig({
+      ...lineConfig,
+      yField: key,
+      // ? 全局的alias不起作用
+      tooltip: {
+        customItems: (originalItems) => {
+          // process originalItems,
+          const items = originalItems.map((ele) => ({ ...ele, name: dataFieldAlias[key]?.alias || key }));
+          return items;
+        },
+      },
+    });
+  };
   return (
     <>
-      <Row gutter={16} style={{margin: '-16px -8px'}}>
+      <Row gutter={16} style={{ margin: '-16px -8px' }}>
         {/* style={{ margin: '-16px -8px', padding: 0 }} */}
-        <Col className="gutter-row" span={24} >
+        <Col className="gutter-row" span={24}>
           <SearchForm
             defaultValue={{
               initialValue: {
@@ -107,8 +150,8 @@ export default observer(() => {
               },
               shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'],
               fieldProps: {
-                DepartmentList: { show_all: true, },
-                WebCode: { show_all: true, },
+                DepartmentList: { show_all: true },
+                WebCode: { show_all: true },
                 years: { hide_vs: true },
               },
             }}
@@ -133,6 +176,14 @@ export default observer(() => {
           </Row>
         </Spin>
       </section>
+      <section>
+        <Space gutter={16} size={'large'}>
+          <h3>趋势</h3>
+          <DataFieldRadio value={timeDataField} onChange={handleChangetimeDataField} />
+          <div>周</div>
+        </Space>
+        <Line {...lineConfig} data={timeData.dataSource} />
+      </section>
       <section>
         <h3>市场进度</h3>
         <Spin spinning={BuData.loading}>