nili
8 months ago
23 changed files with 1237 additions and 753 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,328 @@ |
|||
import { |
|||
addSchedule, |
|||
addWhiteList1, |
|||
appList, |
|||
deleteWhiteList, |
|||
scheduleList, |
|||
whiteList1, |
|||
} from '@/services/matrix/admin'; |
|||
import { PageContainer } from '@ant-design/pro-components'; |
|||
import { |
|||
Button, |
|||
DatePicker, |
|||
Form, |
|||
Input, |
|||
Modal, |
|||
Popover, |
|||
Select, |
|||
Table, |
|||
Tabs, |
|||
Tag, |
|||
message, |
|||
} from 'antd'; |
|||
import { ColumnsType } from 'antd/es/table'; |
|||
import TabPane from 'antd/es/tabs/TabPane'; |
|||
import moment from 'moment'; |
|||
import React, { useEffect, useState } from 'react'; |
|||
|
|||
// import { RequestOptionsType, ProFieldRequestData } from "@ant-design/pro-utils";
|
|||
|
|||
const SuperAdmin: React.FC = () => { |
|||
const [appArr, setAppArr] = useState<API.MatrixApp[]>([]); |
|||
const [whiteList, setWhiteList] = useState<API.MatrixWhiteDevice[]>([]); |
|||
const [scheduleArr, setScheduleArr] = useState<API.MatrixMockSchedule[]>([]); |
|||
const [visible, setVisible] = useState(false); |
|||
const [sVisible, setSVisible] = useState(false); |
|||
const [whiteListForm] = Form.useForm(); |
|||
const [scheduleForm] = Form.useForm(); |
|||
|
|||
/** |
|||
* @en-US International configuration |
|||
* @zh-CN 国际化配置 |
|||
* */ |
|||
|
|||
const fetchWhiteList = async () => { |
|||
const res = await whiteList1(); |
|||
if (res.data) { |
|||
setWhiteList(res.data); |
|||
} |
|||
}; |
|||
|
|||
const deleteDevice = async (deviceId: string | undefined) => { |
|||
if (!deviceId) { |
|||
return; |
|||
} |
|||
await deleteWhiteList({ deviceId: deviceId }); |
|||
fetchWhiteList(); |
|||
}; |
|||
|
|||
const columns: ColumnsType<API.MatrixWhiteDevice> = [ |
|||
{ |
|||
title: '设备id', |
|||
dataIndex: 'deviceId', |
|||
ellipsis: true, |
|||
}, |
|||
|
|||
{ |
|||
title: '渠道', |
|||
dataIndex: 'channel', |
|||
render: (r: string) => { |
|||
switch (r) { |
|||
case 'fanmiyou': |
|||
return '凡米游'; |
|||
case 'qiji': |
|||
return '奇迹'; |
|||
} |
|||
return r; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
dataIndex: 'operate', |
|||
render: (_, record: API.MatrixWhiteDevice) => { |
|||
return ( |
|||
<Popover |
|||
title="确认删除吗" |
|||
content={ |
|||
<div style={{ textAlign: 'center' }}> |
|||
<p> |
|||
删除之后ecpm会降低 |
|||
<br /> |
|||
也会影响刷数据可使用的设备 |
|||
</p> |
|||
<a onClick={() => deleteDevice(record.deviceId)}>确定</a> |
|||
</div> |
|||
} |
|||
> |
|||
<a>删除</a> |
|||
</Popover> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const getAppNameById = (appId: number) => { |
|||
const app = appArr.find((app) => app.id === appId); |
|||
return app ? app.name : ''; |
|||
}; |
|||
|
|||
const formatIncome = (v: number | undefined) => { |
|||
if (!v) { |
|||
return 0; |
|||
} |
|||
return parseFloat((v / 1000_00).toFixed(2)); |
|||
}; |
|||
|
|||
const sColumns: ColumnsType<API.MatrixMockSchedule> = [ |
|||
{ |
|||
title: '应用', |
|||
dataIndex: 'appId', |
|||
render: (appId) => ( |
|||
<Tag color="blue" key={appId}> |
|||
{getAppNameById(appId)} |
|||
</Tag> |
|||
), |
|||
}, |
|||
{ |
|||
title: '渠道', |
|||
dataIndex: 'channel', |
|||
render: (r: string) => { |
|||
switch (r) { |
|||
case 'fanmiyou': |
|||
return '凡米游'; |
|||
case 'qiji': |
|||
return '奇迹'; |
|||
} |
|||
return r; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '目标金额', |
|||
dataIndex: 'incomeYuan', |
|||
}, |
|||
{ |
|||
title: '已刷金额', |
|||
dataIndex: 'mockIncome', |
|||
render: (r: number) => { |
|||
return formatIncome(r); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '开始时间', |
|||
dataIndex: 'scheduleTime', |
|||
render: (r: string) => { |
|||
return moment(r).format('YYYY-MM-DD HH:mm'); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'status', |
|||
render: (r: number) => { |
|||
switch (r) { |
|||
case 0: |
|||
return '未开始'; |
|||
case 1: |
|||
return '进行中'; |
|||
case 2: |
|||
return '已完成'; |
|||
} |
|||
return r; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
dataIndex: 'createdAt', |
|||
render: (r: string) => { |
|||
return moment(r).format('YYYY-MM-DD HH:mm'); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '更新时间', |
|||
dataIndex: 'updatedAt', |
|||
render: (r: string) => { |
|||
return moment(r).format('YYYY-MM-DD HH:mm'); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const fetchScheduleList = async () => { |
|||
const res = await scheduleList(); |
|||
if (res.data) { |
|||
setScheduleArr(res.data); |
|||
} |
|||
}; |
|||
|
|||
const fetchApp = async () => { |
|||
const res = await appList(); |
|||
if (res.data) { |
|||
setAppArr(res.data); |
|||
} |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
fetchApp(); |
|||
fetchWhiteList(); |
|||
fetchScheduleList(); |
|||
}, []); |
|||
|
|||
const handleSaveMock = async (params: API.AddMockScheduleReq) => { |
|||
const { scheduleTime, ...otherValues } = params; |
|||
const timestamp = moment(scheduleTime).valueOf(); // 使用 moment.js 将日期转换为时间戳
|
|||
await addSchedule({ scheduleTime: timestamp, ...otherValues }); // 将时间戳作为参数传递给后端
|
|||
message.success('任务提交成功'); |
|||
fetchScheduleList(); |
|||
setSVisible(false); |
|||
}; |
|||
|
|||
const addWhiteList = () => { |
|||
whiteListForm.resetFields(); // 重置表单字段
|
|||
setVisible(true); |
|||
}; |
|||
|
|||
const addScheduleTask = () => { |
|||
scheduleForm.resetFields(); // 重置表单字段
|
|||
setSVisible(true); |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
whiteListForm.submit(); |
|||
}; |
|||
|
|||
const handleCancel = () => { |
|||
setVisible(false); |
|||
}; |
|||
|
|||
const handleSOk = () => { |
|||
scheduleForm.submit(); |
|||
}; |
|||
|
|||
const handleSCancel = () => { |
|||
setSVisible(false); |
|||
}; |
|||
|
|||
const handleSaveWhiteList = async (values: API.MatrixWhiteDevice) => { |
|||
try { |
|||
await addWhiteList1({ deviceId: values.deviceId || '', channel: values.channel || '' }); |
|||
} catch (e) { |
|||
return; |
|||
} |
|||
setVisible(false); |
|||
fetchWhiteList(); |
|||
}; |
|||
|
|||
return ( |
|||
<PageContainer> |
|||
<Tabs |
|||
defaultActiveKey="1" |
|||
onChange={(activeKey) => { |
|||
if (activeKey === '1') { |
|||
fetchWhiteList(); |
|||
} else if (activeKey === '2') { |
|||
fetchScheduleList(); |
|||
} |
|||
}} |
|||
centered |
|||
style={{ backgroundColor: 'white', padding: '20px' }} |
|||
> |
|||
<TabPane tab="设备白名单" key="1"> |
|||
<div> |
|||
<Button onClick={addWhiteList}>添加白名单</Button> |
|||
<Table columns={columns} dataSource={whiteList} /> |
|||
|
|||
<Modal title="添加白名单" visible={visible} onOk={handleOk} onCancel={handleCancel}> |
|||
<Form form={whiteListForm} onFinish={handleSaveWhiteList}> |
|||
<Form.Item name="deviceId" label="设备id"> |
|||
<Input /> |
|||
</Form.Item> |
|||
<Form.Item label="渠道" name="channel"> |
|||
<Select> |
|||
<Select.Option value="fanmiyou">凡米游</Select.Option> |
|||
<Select.Option value="qiji">奇迹</Select.Option> |
|||
</Select> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal> |
|||
</div> |
|||
</TabPane> |
|||
<TabPane tab="刷数据" key="2"> |
|||
<div> |
|||
<Button onClick={addScheduleTask}>添加任务</Button> |
|||
<Table columns={sColumns} dataSource={scheduleArr} /> |
|||
|
|||
<Modal title="添加任务" visible={sVisible} onOk={handleSOk} onCancel={handleSCancel}> |
|||
<Form form={scheduleForm} onFinish={handleSaveMock}> |
|||
<Form.Item label="应用" name="appId"> |
|||
<Select> |
|||
{appArr.map((app) => ( |
|||
<Select.Option key={app.id} value={app.id}> |
|||
{app.name} |
|||
</Select.Option> |
|||
))} |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item name="channel" label="渠道"> |
|||
<Select> |
|||
<Select.Option key="fanmiyou" value="fanmiyou"> |
|||
凡米游 |
|||
</Select.Option> |
|||
<Select.Option key="qiji" value="qiji"> |
|||
奇迹 |
|||
</Select.Option> |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item name="incomeYuan" label="金额（元）"> |
|||
<Input /> |
|||
</Form.Item> |
|||
<Form.Item name="sheduleTime" label="开始时间"> |
|||
<DatePicker format="YYYY-MM-DD HH:mm" showTime={{ format: 'HH:mm' }} /> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal> |
|||
</div> |
|||
</TabPane> |
|||
</Tabs> |
|||
</PageContainer> |
|||
); |
|||
}; |
|||
|
|||
export default SuperAdmin; |
|||
Loading…
Reference in new issue