|
@@ -0,0 +1,75 @@
|
|
|
|
+import QueryForm from "@/components/QueryForm"
|
|
|
|
+import { Card, Space, Spin } from "antd"
|
|
|
|
+import React, { useEffect, useState } from "react"
|
|
|
|
+import moment from "moment"
|
|
|
|
+import { useModel } from "umi"
|
|
|
|
+import { useAjax } from "@/Hook/useAjax"
|
|
|
|
+import { getHomePageApi } from "@/services/iaaData"
|
|
|
|
+import useEcharts from "@/Hook/useEcharts"
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+/**
|
|
|
|
+ * 小说腾讯 首页
|
|
|
|
+ * @returns
|
|
|
|
+ */
|
|
|
|
+const HomeNovel: React.FC = () => {
|
|
|
|
+
|
|
|
|
+ /********************************************/
|
|
|
|
+ const { initialState } = useModel('@@initialState');
|
|
|
|
+ const [queryForm, setQueryForm] = useState<{ costDayBegin: string, costDayEnd: string }>({
|
|
|
|
+ costDayBegin: moment().subtract(30, 'days').format('YYYY-MM-DD'),
|
|
|
|
+ costDayEnd: moment().format('YYYY-MM-DD'),
|
|
|
|
+ })
|
|
|
|
+ const { LineMonitor } = useEcharts()
|
|
|
|
+ const [lineDis, setLineDis] = useState<HOME.ConsumptionData[]>([])
|
|
|
|
+
|
|
|
|
+ const getHomePage = useAjax((params) => getHomePageApi(params))
|
|
|
|
+ /********************************************/
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ if (initialState?.iaaApp) {
|
|
|
|
+ const [appId, productType] = initialState.iaaApp.split('||')
|
|
|
|
+ getHomePage.run({ ...queryForm, appId, productType }).then(res => {
|
|
|
|
+ if (res?.data) {
|
|
|
|
+ let newCostLine: HOME.ConsumptionData = { legendName: '消耗' }
|
|
|
|
+ let newAdMonRevenue: HOME.ConsumptionData = { legendName: '广告变现金额' }
|
|
|
|
+ res.data.forEach((item: { day: string, cost: number, adMonetizationAmount: number }) => {
|
|
|
|
+ newCostLine[item.day as any] = item.cost
|
|
|
|
+ newAdMonRevenue[item.day as any] = item.adMonetizationAmount
|
|
|
|
+ })
|
|
|
|
+ setLineDis([newCostLine, newAdMonRevenue])
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }, [queryForm, initialState?.iaaApp])
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ return <Space direction="vertical" style={{ width: '100%' }}>
|
|
|
|
+ <Card bodyStyle={{ padding: 10 }}>
|
|
|
|
+ <QueryForm
|
|
|
|
+ initialValues={{ day3: [moment().subtract(30, 'days'), moment()] }}
|
|
|
|
+ day3={{ placeholder: ['消耗日期开始', '消耗日期结束'], allowClear: false }}
|
|
|
|
+ onChange={(data: any) => {
|
|
|
|
+ const { day3, ...params } = data
|
|
|
|
+ let newQueryForm = JSON.parse(JSON.stringify(queryForm))
|
|
|
|
+ newQueryForm.pageNum = 1
|
|
|
|
+ if (day3 && day3?.length === 2) {
|
|
|
|
+ newQueryForm['costDayBegin'] = moment(day3[0]).format('YYYY-MM-DD')
|
|
|
|
+ newQueryForm['costDayEnd'] = moment(day3[1]).format('YYYY-MM-DD')
|
|
|
|
+ } else {
|
|
|
|
+ delete newQueryForm['costDayBegin']
|
|
|
|
+ delete newQueryForm['costDayEnd']
|
|
|
|
+ }
|
|
|
|
+ setQueryForm({ ...newQueryForm, ...params })
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ </Card>
|
|
|
|
+ <Card bodyStyle={{ padding: 10, height: 'calc(100vh - 160px)', display: 'flex', justifyContent: 'center', alignContent: 'center' }}>
|
|
|
|
+ {getHomePage?.loading ? <Spin /> : <LineMonitor style={{ width: '100%', height: '100%' }} series smooth data={lineDis} />}
|
|
|
|
+ </Card>
|
|
|
|
+ </Space>
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default HomeNovel
|