加数据展示

src/pages/Overview.tsx

@@ -0,0 +1,165 @@
+import { appList, incomeOverview } from '@/services/matrix/admin';
+import { Column } from '@ant-design/charts';
+import {
+  PageContainer,
+  ProFormDateRangePicker,
+  ProFormSelect,
+  QueryFilter,
+  StatisticCard,
+} from '@ant-design/pro-components';
+import moment from 'moment';
+import RcResizeObserver from 'rc-resize-observer';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { incomeDaily } from '../services/matrix/admin';
+
+const Overview: React.FC = () => {
+  const [overview, setOverview] = useState<API.OverviewBo>();
+  const [daily, setDaily] = useState<API.DateIncome[]>([]);
+  const [appArr, setAppArr] = useState<API.MatrixApp[]>([]);
+  const { Divider } = StatisticCard;
+  const [responsive, setResponsive] = useState(false);
+
+  const { code } = useParams();
+
+  const fetchData = async () => {
+    const res = await incomeOverview({ appCode: code });
+    if (res.data) {
+      setOverview(res.data);
+    }
+  };
+
+  const fetchApp = async () => {
+    const res = await appList();
+    if (res.data) {
+      setAppArr(res.data);
+    }
+  };
+
+  const fetchDaily = async (params: API.IncomeQuery) => {
+    console.log('fetchDaily');
+    console.log(params);
+    const res = await incomeDaily(params);
+    if (res.data) {
+      setDaily(res.data);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    fetchApp();
+    fetchDaily({ code: code });
+  }, []);
+
+  const formatIncome = (v: number | undefined) => {
+    if (!v) {
+      return 0;
+    }
+    return parseFloat((v / 1000_00).toFixed(2));
+  };
+
+  // 在渲染折线图组件时，对数据进行处理
+  const processedChartData: { date: string | number; income: number }[] = daily.map((item) => ({
+    date: item.date + '',
+    income: formatIncome(item.income),
+  }));
+
+  const config = {
+    data: processedChartData,
+    xField: 'date',
+    yField: 'income',
+    axis: {
+      date: {
+        title: '日期',
+      },
+      income: {
+        title: '收入（元）',
+      },
+    },
+    title:
+      '累计' +
+      formatIncome(daily.reduce((acc, data) => acc + (data.income ? data.income : 0), 0)) +
+      '元',
+    height: 400,
+    label: {
+      text: (d: any) => (d.收入 > 0 ? d.收入 : ''),
+      textBaseline: 'bottom',
+    },
+  };
+
+  return (
+    <PageContainer>
+      <RcResizeObserver
+        key="resize-observer"
+        onResize={(offset) => {
+          setResponsive(offset.width < 596);
+        }}
+      >
+        <StatisticCard>
+          <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
+            <StatisticCard
+              statistic={{
+                title: '累计收入（元）',
+                value: formatIncome(overview?.totalIncome),
+              }}
+            />
+            <Divider type={responsive ? 'horizontal' : 'vertical'} />
+            <StatisticCard
+              statistic={{
+                title: '今日收入（元）',
+                value: formatIncome(overview?.todayIncome),
+              }}
+            />
+          </StatisticCard.Group>
+        </StatisticCard>
+      </RcResizeObserver>
+
+      <div style={{ backgroundColor: 'white', marginTop: '20px', padding: '40px' }}>
+        <QueryFilter defaultCollapsed split onFinish={fetchDaily}>
+          <ProFormSelect
+            name="code"
+            label="应用"
+            options={appArr.map((x) => ({
+              label: x.name,
+              value: x.code,
+            }))}
+          />
+          <ProFormSelect
+            label="平台"
+            name="platform"
+            valueEnum={{
+              1: '穿山甲',
+              2: '腾讯',
+              3: '百度联盟',
+              4: 'Mintegral',
+              5: '快手',
+              6: '游可赢',
+              7: 'Sigmob',
+              8: 'Admob',
+            }}
+          />
+          <ProFormSelect
+            name="advType"
+            label="广告类型"
+            valueEnum={{
+              1: '横幅',
+              2: '插页',
+              3: '激励视频',
+            }}
+          />
+          <ProFormDateRangePicker
+            fieldProps={{
+              disabledDate: (current: any) => current && current >= moment().startOf('day'),
+            }}
+            name="date"
+            label="时间"
+          />
+        </QueryFilter>
+        {/* <Line {...config} /> */}
+        <Column {...config} />
+      </div>
+    </PageContainer>
+  );
+};
+
+export default Overview;