diff --git a/package.json b/package.json
index 3e4df34..288fdbe 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,8 @@
"axios": "^0.24.0",
"braft-editor": "^2.3.9",
"classnames": "^2.2.6",
+ "echarts": "^5.3.3",
+ "echarts-for-react": "^3.0.2",
"lodash": "^4.17.11",
"moment": "^2.25.3",
"omit.js": "^2.0.2",
diff --git a/src/constants/enum/timeType.ts b/src/constants/enum/timeType.ts
new file mode 100644
index 0000000..326e3b6
--- /dev/null
+++ b/src/constants/enum/timeType.ts
@@ -0,0 +1,6 @@
+export enum TimeType {
+ DAY = 'day',
+ WEEK = 'week',
+ MONTH = 'month',
+}
+export default TimeType;
diff --git a/src/pages/DataBoard/ActiveAnalysis/List/components/moreData.tsx b/src/pages/DataBoard/ActiveAnalysis/List/components/moreData.tsx
new file mode 100644
index 0000000..33ff984
--- /dev/null
+++ b/src/pages/DataBoard/ActiveAnalysis/List/components/moreData.tsx
@@ -0,0 +1,45 @@
+import { Col, Row, Statistic } from 'antd';
+import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+const moreData = (props: any, title: string, company = '人') => {
+ return (
+
+
{title}
+
{props.time}
+
+ {props.mon_user}
+ {company}
+
+
+
+
+ 0
+ ? { color: '#3f8600', fontSize: 15 }
+ : { color: '#cf1322', fontSize: 15 }
+ }
+ prefix={props.week_proportion > 0 ? : }
+ suffix="%"
+ />
+
+
+ 0
+ ? { color: '#3f8600', fontSize: 15 }
+ : { color: '#cf1322', fontSize: 15 }
+ }
+ prefix={props.week_proportion > 0 ? : }
+ suffix="%"
+ />
+
+
+
+
+ );
+};
+export default moreData;
diff --git a/src/pages/DataBoard/ActiveAnalysis/List/index.tsx b/src/pages/DataBoard/ActiveAnalysis/List/index.tsx
index 2c60d26..652ad8e 100644
--- a/src/pages/DataBoard/ActiveAnalysis/List/index.tsx
+++ b/src/pages/DataBoard/ActiveAnalysis/List/index.tsx
@@ -1,59 +1,97 @@
import React, { useRef, useState } from 'react';
-import Table, { ProColumns, ActionType } from '@/components/Table';
-import { fetchTableData } from '@/utils/table';
+import echarts from 'echarts/lib/echarts'; // 引入 ECharts 主模块
+import { getDwuData } from '@/services/DataBorad';
+import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
+import { getCoreData } from '@/services/DataBorad';
+import ReactEcharts from 'echarts-for-react';
+import { Card, Col, Row, Select } from 'antd';
const ActiveAnalysis: React.FC = () => {
- const tableRef = useRef();
- const [visible, setVisible] = useState(false);
+ const { Option } = Select;
+ const [timeType, setTimeType] = useState('day');
+ const getData = async (func) => {
+ const res = await func({});
+ return res.data;
+ };
- const columns: ProColumns[] = [
- {
- title: '日期',
- dataIndex: 'time',
- width: '10%',
- hideInSearch: true,
- },
- {
- title: '活跃用户数',
- dataIndex: 'address',
- hideInSearch: true,
- width: '20%',
- },
- {
- title: '活跃老玩家数量',
- dataIndex: 'address',
- hideInSearch: true,
- width: '20%',
- },
- {
- title: 'MAU',
- dataIndex: 'address',
- hideInSearch: true,
- width: '20%',
- },
- {
- title: 'WAU',
- dataIndex: 'arpu',
- hideInSearch: true,
- width: '20%',
- },
- {
- title: 'DAU',
- dataIndex: 'arppu',
- hideInSearch: true,
- width: '20%',
- },
- ];
+ const [data, setData] = useState(getData(getCoreData));
+ const [oldUserData, setOldUserData] = useState(getData(getCoreData));
+ const [weekData, setWeekData] = useState(getData(getCoreData));
+ const [monthData, setMonthData] = useState(getData(getCoreData));
+
+ const getOption = async (item = 'day') => {
+ const res = await getDwuData({ time_type: item });
+ const xData: any = [];
+ const seriesData: any = [];
+ res.data.foreach((item: any) => {
+ xData.push(item.time);
+ seriesData.push(item.dwn);
+ });
+ const option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ // data: xData,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 360],
+ // data: seriesData.reverse(),
+ type: 'line',
+ },
+ ],
+ };
+ return option;
+ };
+ const [option, setOption] = useState(getOption);
+ const setTimeOption = (val: any) => {
+ setTimeType(val);
+ setOption(getOption(val));
+ };
return (
-
{
- // // return fetchTableData(, params);
- // }}
- />
+
+
+ {moreData(data, '今日活跃用户数')}
+
+
+ {moreData(oldUserData, '今日登录老用户数')}
+
+
+ {moreData(weekData, 'WAU(本周去重人数)')}
+
+
+ {moreData(monthData, 'MAU(本月去重人数)')}
+
+
+
+
+
+ DAU
+ 今日人数
+ {/* {data}人
*/}
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/DataBoard/CoreData/List/index.tsx b/src/pages/DataBoard/CoreData/List/index.tsx
index 1ce1a93..dbfc1fc 100644
--- a/src/pages/DataBoard/CoreData/List/index.tsx
+++ b/src/pages/DataBoard/CoreData/List/index.tsx
@@ -1,27 +1,55 @@
import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getCoreData } from '@/services/DataBorad';
-import { RedoOutlined } from '@ant-design/icons';
import moment from 'moment';
-import { Card, Col, Row, DatePicker, Button } from 'antd';
-// import TimeText from '@/components/Typography/TimeText';
+import TimeType from '@/constants/enum/timeType';
+import moreData from '@/pages/DataBoard/ActiveAnalysis/List/components/moreData';
+import { Card, Col, Row, DatePicker, Select } from 'antd';
const CoreData: React.FC = () => {
const tableRef = useRef();
const [startTimeValue, setStartTimeValue] = useState(Number);
const [endTimeValue, setEndTimeValue] = useState(Number);
+ const [timeType, setTimeType] = useState(TimeType.DAY);
const getTimedata = (data: any) => {
setStartTimeValue(moment(data[0]).valueOf());
setEndTimeValue(moment(data[1]).valueOf());
- console.log(startTimeValue, endTimeValue);
};
- const carddata = {
- name: 1,
- time: 2,
- user_num: 2,
+ const getData = async () => {
+ const res = await getCoreData({});
+ return res.data;
};
- const [date, setDate] = useState(carddata);
-
+ // const [date, setDate] = useState(getData);
+ const [date, setDate] = useState(getData);
const columns: ProColumns[] = [
+ {
+ title: '时间类型',
+ dataIndex: 'coinType',
+ hideInTable: true,
+ initialValue: TimeType.DAY,
+ renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
+ return (
+