nili
/
matrix_fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

设备主收入数据展示

master
nili 8 months ago
parent
ade250f78a
commit
3f1bac514d
10 changed files with 181 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/index.html
  2. 1
      dist/p__AppManagement.53e672f6.async.js
  3. 1
      dist/p__AppManagement.91220ba0.async.js
  4. 1
      dist/p__DeviceOwnerApp.bd572567.async.js
  5. 1
      dist/p__DeviceOwnerApp.fcc25cee.async.js
  6. 4
      dist/umi.9093b793.js
  7. 1
      src/pages/AppManagement.tsx
  8. 148
      src/pages/DeviceOwnerApp.tsx
  9. 27
      src/services/matrix/device.ts
  10. 5
      src/services/matrix/typings.d.ts

2
dist/index.html
View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="/umi.e7092c68.js"></script> <script src="/umi.9093b793.js"></script>
</body></html> </body></html>

1
dist/p__AppManagement.53e672f6.async.js
View File

File diff suppressed because one or more lines are too long

1
dist/p__AppManagement.91220ba0.async.js
View File

File diff suppressed because one or more lines are too long

1
dist/p__DeviceOwnerApp.bd572567.async.js
View File

File diff suppressed because one or more lines are too long

1
dist/p__DeviceOwnerApp.fcc25cee.async.js
View File

File diff suppressed because one or more lines are too long

4
dist/umi.e7092c68.js → dist/umi.9093b793.js
View File

File diff suppressed because one or more lines are too long

1
src/pages/AppManagement.tsx
View File

@ -32,6 +32,7 @@ const AppManagement = () => {
{ {
title: '下载地址', title: '下载地址',
dataIndex: 'url', dataIndex: 'url',
width: 200,
renderText: (url: string) => ( renderText: (url: string) => (
<Popover <Popover
overlayInnerStyle={{ padding: 0 }} overlayInnerStyle={{ padding: 0 }}

148
src/pages/DeviceOwnerApp.tsx
View File

@ -1,19 +1,30 @@
import { advList } from '@/services/matrix/admin'; import {
import { PageContainer, ProColumns, ProTable } from '@ant-design/pro-components'; PageContainer,
ProColumns,
ProFormDateRangePicker,
ProFormSelect,
ProTable,
QueryFilter,
StatisticCard,
} from '@ant-design/pro-components';
import { useIntl, useModel } from '@umijs/max'; import { useIntl, useModel } from '@umijs/max';
import { Tabs } from 'antd'; import { Divider, Tabs } from 'antd';
import TabPane from 'antd/es/tabs/TabPane'; import TabPane from 'antd/es/tabs/TabPane';
import RcResizeObserver from 'rc-resize-observer';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { advList } from '../services/matrix/admin';
// import { RequestOptionsType, ProFieldRequestData } from "@ant-design/pro-utils"; // import { RequestOptionsType, ProFieldRequestData } from "@ant-design/pro-utils";
import { deviceList, offline } from '@/services/matrix/device'; import { deviceList, incomeDaily1, incomeOverview1, offline } from '@/services/matrix/device';
import { Column } from '@ant-design/charts';
import type { ActionType } from '@ant-design/pro-components'; import type { ActionType } from '@ant-design/pro-components';
import moment from 'moment';
const DeviceOwnerApp: React.FC = () => { const DeviceOwnerApp: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const deviceRef = useRef<ActionType>(); const deviceRef = useRef<ActionType>();
const [usedDeviceCnt, setUsedDeviceCnt] = useState(0); const [usedDeviceCnt, setUsedDeviceCnt] = useState(0);
const [responsive, setResponsive] = useState(false);
/** /**
* @en-US International configuration * @en-US International configuration
* @zh-CN 国际化配置 * @zh-CN 国际化配置
@ -23,6 +34,8 @@ const DeviceOwnerApp: React.FC = () => {
const { initialState } = useModel('@@initialState'); const { initialState } = useModel('@@initialState');
const currentUser = initialState?.currentUser; const currentUser = initialState?.currentUser;
const [overview, setOverview] = useState<API.OverviewBo>();
const [daily, setDaily] = useState<API.DateIncome[]>([]);
const fetchDevice = async () => { const fetchDevice = async () => {
const res = await deviceList({ appCode: code ? code : '' }); const res = await deviceList({ appCode: code ? code : '' });
@ -197,11 +210,70 @@ const DeviceOwnerApp: React.FC = () => {
}; };
}; };
const fetchOverview = async () => {
const res = await incomeOverview1({ appCode: code });
if (res.data) {
setOverview(res.data);
}
};
const fetchDaily = async (params: API.IncomeQuery | undefined) => {
const res = await incomeDaily1({ ...params, code: code });
if (res.data) {
setDaily(res.data);
}
};
useEffect(() => { useEffect(() => {
actionRef.current?.reload(); actionRef.current?.reload();
deviceRef.current?.reload(); deviceRef.current?.reload();
fetchOverview();
fetchDaily(undefined);
}, [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: (() => {
const inputDateStr = item.date + '';
const year: string = inputDateStr.slice(0, 4);
const month: string = inputDateStr.slice(4, 6);
const day: string = inputDateStr.slice(6, 8);
return `${year}-${month}-${day}`;
})(),
income: formatIncome(item.income),
}));
const config = {
data: processedChartData,
xField: 'date',
yField: 'income',
tooltip: {
name: '收入',
field: 'income',
},
axis: {
date: {
title: '日期',
},
},
title:
'累计' +
formatIncome(daily.reduce((acc, data) => acc + (data.income ? data.income : 0), 0)) +
'元',
height: 400,
label: {
text: (d: any) => (d.income > 0 ? d.income : ''),
textBaseline: 'bottom',
},
};
return ( return (
<PageContainer> <PageContainer>
<Tabs defaultActiveKey="1" centered style={{ backgroundColor: 'white', padding: '20px' }}> <Tabs defaultActiveKey="1" centered style={{ backgroundColor: 'white', padding: '20px' }}>
@ -235,6 +307,72 @@ const DeviceOwnerApp: React.FC = () => {
columns={columns} columns={columns}
/> />
</TabPane> </TabPane>
<TabPane tab="数据总览" key="3">
<RcResizeObserver
key="resize-observer"
onResize={(offset) => {
setResponsive(offset.width < 596);
}}
>
<StatisticCard>
<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
<StatisticCard
statistic={{
title: '上月收入（元）',
value: formatIncome(overview?.lastMonthIncome),
}}
/>
<Divider type={responsive ? 'horizontal' : 'vertical'} />
<StatisticCard
statistic={{
title: '本月收入（元）',
value: formatIncome(overview?.thisMonthIncome),
}}
/>
<Divider type={responsive ? 'horizontal' : 'vertical'} />
<StatisticCard
statistic={{
title: '今日收入（元）',
value: formatIncome(overview?.todayIncome),
}}
/>
<Divider type={responsive ? 'horizontal' : 'vertical'} />
<StatisticCard
statistic={{
title: '昨日收入（元）',
value: formatIncome(overview?.yesterdayIncome),
}}
/>
</StatisticCard.Group>
</StatisticCard>
</RcResizeObserver>
<QueryFilter defaultCollapsed split onFinish={fetchDaily}>
<ProFormSelect
label="平台"
name="platform"
valueEnum={{
1: '穿山甲',
2: '腾讯',
3: '百度联盟',
4: 'Mintegral',
5: '快手',
6: '游可赢',
7: 'Sigmob',
8: 'Admob',
}}
/>
<ProFormDateRangePicker
fieldProps={{
disabledDate: (current: any) => current && current >= moment().startOf('day'),
}}
name="date"
label="时间"
/>
</QueryFilter>
{/* <Line {...config} /> */}
<Column {...config} />
</TabPane>
</Tabs> </Tabs>
</PageContainer> </PageContainer>
); );

27
src/services/matrix/device.ts
View File

@ -2,6 +2,33 @@
/* eslint-disable */ /* eslint-disable */
import { request } from '@umijs/max'; import { request } from '@umijs/max';
/** 此处后端没有提供注释 POST /api/admin/device/incomeDaily */
export async function incomeDaily1(body: API.IncomeQuery, options?: { [key: string]: any }) {
return request<API.RListDateIncome>('/api/admin/device/incomeDaily', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || {}),
});
}
/** 此处后端没有提供注释 GET /api/admin/device/incomeOverview */
export async function incomeOverview1(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.incomeOverview1Params,
options?: { [key: string]: any },
) {
return request<API.ROverviewBo>('/api/admin/device/incomeOverview', {
method: 'GET',
params: {
...params,
},
...(options || {}),
});
}
/** 此处后端没有提供注释 GET /api/admin/device/list */ /** 此处后端没有提供注释 GET /api/admin/device/list */
export async function deviceList( export async function deviceList(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象) // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)

5
src/services/matrix/typings.d.ts
View File

@ -78,6 +78,10 @@ declare namespace API {
adminId: number; adminId: number;
}; };
type incomeOverview1Params = {
appCode?: string;
};
type incomeOverviewParams = { type incomeOverviewParams = {
appCode?: string; appCode?: string;
}; };
@ -235,6 +239,7 @@ declare namespace API {
type PageResultMatrixAdvRecordBo = { type PageResultMatrixAdvRecordBo = {
data?: MatrixAdvRecordBo[]; data?: MatrixAdvRecordBo[];
total?: number; total?: number;
sum?: number;
}; };
type RankList = { type RankList = {

Write Preview
Loading…
Cancel
Save