feat: 加广告类型饼图

dist/_umi_route_preload_helper.28e1d1c2.js

@@ -1 +0,0 @@
-!function(){"use strict";var t="/".replace(/([^/])$/,"$1/"),e=location.pathname,n=e.startsWith(t)&&decodeURI("/".concat(e.slice(t.length)));if(n){var a=document,c=a.head,r=a.createElement.bind(a),i=function(t,e,n){var a,c=e.r[t]||(null===(a=Object.entries(e.r).find((function(e){var n=e[0];return new RegExp("^".concat(n.replace(/\/:[^/]+/g,"/[^/]+").replace("/*","/.+"),"$")).test(t)})))||void 0===a?void 0:a[1]);return null==c?void 0:c.map((function(t){var a=e.f[t][1],c=e.f[t][0];return{type:c.split(".").pop(),url:"".concat(n.publicPath).concat(c),attrs:[["data-".concat(e.b),"".concat(e.p,":").concat(a)]]}}))}(n,{"p":"ant-design-pro","b":"webpack","f":[["134.6fc81d91.async.js",134],["169.57647c7d.async.js",169],["p__Welcome.61596037.async.js",185],["t__plugin-layout__Layout.6cae69f5.chunk.css",301],["t__plugin-layout__Layout.4594a64b.async.js",301],["343.7ff141fb.async.js",343],["p__User__Login__index.9d3ab92e.async.js",366],["p__DeviceOwnerApp.c61abcd9.async.js",371],["390.41467286.async.js",390],["393.38316f72.async.js",393],["397.fb5f72c1.async.js",397],["p__SuperAdmin.497ff705.async.js",455],["p__Proxy__ProxyUserManagement.107b3f81.async.js",526],["531.35af34f5.async.js",531],["539.290aefb9.async.js",539],["p__AdvRecordListV2.3e7f4381.async.js",542],["p__Bind.b6ee068f.async.js",557],["559.016bfdbb.async.js",559],["p__404.0c100574.async.js",571],["635.20e45f05.async.js",635],["p__App__AppManagement.dfde1a1b.async.js",731],["761.f7bbde11.async.js",761],["p__AdminManagement.3ee3c339.async.js",816],["841.614ef4c0.async.js",841],["p__AdvRecordList.fc092f59.async.js",857],["p__UserManagement.00a0e9d3.async.js",903],["905.6e225d1b.async.js",905],["930.fca7adbf.async.js",930],["p__Proxy__ProxyAdvRecordListV2.4cde70a4.async.js",990]],"r":{"/*":[18,26],"/":[0,3,4,17,19,26],"/welcome":[0,1,2,9,17,27,3,4,19,26],"/super":[0,1,5,11,13,14,26,27,3,4,17,19],"/adminList":[0,1,13,14,21,22,26,3,4,17,19],"/bind":[0,1,9,10,16,17,27,3,4,19,26],"/appList":[0,1,5,10,13,14,20,26,27,3,4,17,19],"/advList/:code":[0,1,13,14,17,23,24,26,27,3,4,19],"/advListV2/:code":[0,1,13,14,15,17,23,26,27,3,4,19],"/user/:code":[0,1,13,14,25,26,27,3,4,17,19],"/app/:code":[0,1,7,13,14,17,23,26,27,3,4,19],"/user/login":[0,1,6,13],"/proxy/advListV2/:code":[0,1,13,14,17,23,26,27,28,3,4,19],"/proxy/user/:code":[0,1,12,13,14,26,27,3,4,17,19]}},{publicPath:"/"});null==i||i.forEach((function(t){var e,n=t.type,a=t.url;if("js"===n)(e=r("script")).src=a,e.async=!0;else{if("css"!==n)return;(e=r("link")).href=a,e.rel="preload",e.as="style"}t.attrs.forEach((function(t){e.setAttribute(t[0],t[1]||"")})),c.appendChild(e)}))}}();

dist/_umi_route_preload_helper.592b4a61.js

@@ -0,0 +1 @@
+!function(){"use strict";var t="/".replace(/([^/])$/,"$1/"),e=location.pathname,n=e.startsWith(t)&&decodeURI("/".concat(e.slice(t.length)));if(n){var a=document,c=a.head,r=a.createElement.bind(a),i=function(t,e,n){var a,c=e.r[t]||(null===(a=Object.entries(e.r).find((function(e){var n=e[0];return new RegExp("^".concat(n.replace(/\/:[^/]+/g,"/[^/]+").replace("/*","/.+"),"$")).test(t)})))||void 0===a?void 0:a[1]);return null==c?void 0:c.map((function(t){var a=e.f[t][1],c=e.f[t][0];return{type:c.split(".").pop(),url:"".concat(n.publicPath).concat(c),attrs:[["data-".concat(e.b),"".concat(e.p,":").concat(a)]]}}))}(n,{"p":"ant-design-pro","b":"webpack","f":[["134.6fc81d91.async.js",134],["169.57647c7d.async.js",169],["p__Welcome.61596037.async.js",185],["t__plugin-layout__Layout.6cae69f5.chunk.css",301],["t__plugin-layout__Layout.4594a64b.async.js",301],["343.7ff141fb.async.js",343],["p__User__Login__index.9d3ab92e.async.js",366],["p__DeviceOwnerApp.1ed365d2.async.js",371],["390.41467286.async.js",390],["393.38316f72.async.js",393],["397.fb5f72c1.async.js",397],["435.88a89336.async.js",435],["p__SuperAdmin.497ff705.async.js",455],["p__Proxy__ProxyUserManagement.107b3f81.async.js",526],["531.35af34f5.async.js",531],["539.290aefb9.async.js",539],["p__AdvRecordListV2.3dfc1edf.async.js",542],["p__Bind.b6ee068f.async.js",557],["559.016bfdbb.async.js",559],["p__404.0c100574.async.js",571],["635.20e45f05.async.js",635],["p__App__AppManagement.dfde1a1b.async.js",731],["761.f7bbde11.async.js",761],["p__AdminManagement.3ee3c339.async.js",816],["p__AdvRecordList.d682c9eb.async.js",857],["p__UserManagement.00a0e9d3.async.js",903],["905.6e225d1b.async.js",905],["930.fca7adbf.async.js",930],["p__Proxy__ProxyAdvRecordListV2.f54d5e7d.async.js",990]],"r":{"/*":[19,26],"/":[0,3,4,18,20,26],"/welcome":[0,1,2,9,18,27,3,4,20,26],"/super":[0,1,5,12,14,15,26,27,3,4,18,20],"/adminList":[0,1,14,15,22,23,26,3,4,18,20],"/bind":[0,1,9,10,17,18,27,3,4,20,26],"/appList":[0,1,5,10,14,15,21,26,27,3,4,18,20],"/advList/:code":[0,1,11,14,15,18,24,26,27,3,4,20],"/advListV2/:code":[0,1,9,11,14,15,16,18,26,27,3,4,20],"/user/:code":[0,1,14,15,25,26,27,3,4,18,20],"/app/:code":[0,1,7,11,14,15,18,26,27,3,4,20],"/user/login":[0,1,6,14],"/proxy/advListV2/:code":[0,1,11,14,15,18,26,27,28,3,4,20],"/proxy/user/:code":[0,1,13,14,15,26,27,3,4,18,20]}},{publicPath:"/"});null==i||i.forEach((function(t){var e,n=t.type,a=t.url;if("js"===n)(e=r("script")).src=a,e.async=!0;else{if("css"!==n)return;(e=r("link")).href=a,e.rel="preload",e.as="style"}t.attrs.forEach((function(t){e.setAttribute(t[0],t[1]||"")})),c.appendChild(e)}))}}();

dist/index.html

@@ -7,10 +7,10 @@
 <title>Ant Design Pro</title>
 <link rel="stylesheet" href="/umi.1ca9308c.css">
 <script async src="/scripts/loading.js"></script>
-<script src="/_umi_route_preload_helper.28e1d1c2.js"></script>
+<script src="/_umi_route_preload_helper.592b4a61.js"></script>
 </head>
 <body>
 <div id="root"></div>
-<script src="/umi.106ea3b8.js"></script>
+<script src="/umi.91db6e04.js"></script>
 </body>
 </html>

src/pages/AdvRecordListV2.tsx

@@ -10,7 +10,7 @@ import {
   QueryFilter,
   StatisticCard,
 } from '@ant-design/pro-components';
-import { Tabs } from 'antd';
+import { Col, Row, Tabs } from 'antd';
 import TabPane from 'antd/es/tabs/TabPane';
 import moment from 'moment';
 import RcResizeObserver from 'rc-resize-observer';
@@ -21,6 +21,8 @@ import { useParams } from 'react-router-dom';
 
 import { formatIncome } from '@/utils/numberUtils';
 import type { ActionType } from '@ant-design/pro-components';
+import HistoryAdvPie from './Data/HistoryAdvPie';
+import TodayAdvPie from './Data/TodayAdvPie';
 import UserInfo from './User/UserInfo';
 const AdvRecordListV2: React.FC = () => {
   const actionRef = useRef<ActionType>();
@@ -247,7 +249,7 @@ const AdvRecordListV2: React.FC = () => {
 
   return (
     <PageContainer>
-      <Tabs defaultActiveKey="1" centered style={{ backgroundColor: 'white', padding: '20px' }}>
+      <Tabs defaultActiveKey="2" centered style={{ backgroundColor: 'white', padding: '20px' }}>
         <TabPane tab="广告详情" key="1">
           <ProTable<API.MatrixAdvRecordBo, API.AdvRecordQuery>
             headerTitle={income ? '表格累计：' + formatIncome(income) + '元' : ''}
@@ -315,6 +317,14 @@ const AdvRecordListV2: React.FC = () => {
               </StatisticCard.Group>
             </StatisticCard>
           </RcResizeObserver>
+          <Row>
+            <Col span={10} offset={1}>
+              <HistoryAdvPie appCode={code || ''} />
+            </Col>
+            <Col span={10} offset={2}>
+              <TodayAdvPie appCode={code || ''} />
+            </Col>
+          </Row>
 
           <QueryFilter defaultCollapsed split onFinish={fetchDaily}>
             <ProFormSelect
@@ -348,7 +358,6 @@ const AdvRecordListV2: React.FC = () => {
               label="时间"
             />
           </QueryFilter>
-          {/* <Line {...config} /> */}
           <Column {...config} />
         </TabPane>
       </Tabs>

src/pages/Data/HistoryAdvPie.tsx

@@ -0,0 +1,115 @@
+import { advTypeIncomeHistory } from '@/services/matrix/admin';
+import { Pie } from '@ant-design/charts';
+import { Card, DatePicker, GetProps } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { formatIncome } from '../../utils/numberUtils';
+
+export type HistoryAdvPieProps = {
+  appCode: string;
+};
+
+type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
+const { RangePicker } = DatePicker;
+
+const HistoryAdvPie: React.FC<HistoryAdvPieProps> = (props) => {
+  const [arr, setArr] = useState<{ type: string; value: number; 收入?: string; 百分比?: string }[]>(
+    [],
+  );
+
+  const disabledDate: RangePickerProps['disabledDate'] = (current: any) => {
+    // Can not select days before today and today
+    return current && current >= moment().startOf('day');
+  };
+
+  const fetchData = async (params: API.advTypeIncomeHistoryParams) => {
+    const data = await advTypeIncomeHistory(params);
+    let newArr: { type: string; value: number; 收入?: string; 百分比?: string }[] = [];
+    data.data?.forEach((x) => {
+      if (x.advType === 1) {
+        newArr.push({ type: '横幅', value: formatIncome(x.income) });
+      }
+      if (x.advType === 2) {
+        newArr.push({ type: '插页', value: formatIncome(x.income) });
+      }
+      if (x.advType === 3) {
+        newArr.push({ type: '视频', value: formatIncome(x.income) });
+      }
+    });
+    const sum = newArr.reduce((acc, x) => acc + x.value, 0);
+    newArr.forEach((x) => {
+      x.收入 = x.value + '元';
+      if (sum > 0) {
+        x.百分比 = ((x.value / sum) * 100).toFixed(1) + '%';
+      }
+    });
+    setArr(newArr);
+  };
+
+  const config = {
+    data: arr,
+    title: {
+      title: '历史数据',
+      align: 'center',
+    },
+    angleField: 'value',
+    colorField: 'type',
+    height: 200,
+    marginTop: 20,
+    label: {
+      text: 'value',
+      position: 'outside',
+    },
+    legend: {
+      color: {
+        title: false,
+        position: 'right',
+        rowPadding: 5,
+      },
+    },
+    tooltip: {
+      title: 'type',
+      items: [
+        {
+          name: '收入',
+          field: '收入',
+        },
+        {
+          name: '占比',
+          field: '百分比',
+        },
+      ],
+    },
+  };
+
+  const onDateChange = (dates: any, dateStrings: [string, string]) => {
+    let beginDate = parseInt(dateStrings[0]);
+    let endDate = parseInt(dateStrings[1]);
+    if (beginDate && endDate) {
+      fetchData({
+        code: props.appCode,
+        beginDate: beginDate,
+        endDate: endDate,
+      });
+    } else {
+      fetchData({
+        code: props.appCode,
+      });
+    }
+  };
+
+  useEffect(() => {
+    fetchData({ code: props.appCode });
+  }, [props.appCode]);
+
+  return (
+    <>
+      <Card style={{ height: 300 }}>
+        <RangePicker onChange={onDateChange} format="YYYYMMDD" disabledDate={disabledDate} />
+        {arr.length > 0 && <Pie {...config} />}
+      </Card>
+    </>
+  );
+};
+
+export default HistoryAdvPie;

src/pages/Data/TodayAdvPie.tsx

@@ -0,0 +1,88 @@
+import { Pie } from '@ant-design/charts';
+import { Card } from 'antd';
+import { useEffect, useState } from 'react';
+
+import { advTypeIncomeToday } from '../../services/matrix/admin';
+import { formatIncome } from '../../utils/numberUtils';
+
+export type TodayAdvPieProps = {
+  appCode: string;
+};
+
+const TodayAdvPie: React.FC<TodayAdvPieProps> = (props) => {
+  const [arr, setArr] = useState<{ type: string; value: number; 收入?: string; 百分比?: string }[]>(
+    [],
+  );
+
+  const fetchData = async () => {
+    const data = await advTypeIncomeToday({ code: props.appCode });
+    let newArr: { type: string; value: number; 收入?: string; 百分比?: string }[] = [];
+    data.data?.forEach((x) => {
+      if (x.advType === 1) {
+        newArr.push({ type: '横幅', value: formatIncome(x.income) });
+      }
+      if (x.advType === 2) {
+        newArr.push({ type: '插页', value: formatIncome(x.income) });
+      }
+      if (x.advType === 3) {
+        newArr.push({ type: '视频', value: formatIncome(x.income) });
+      }
+    });
+    const sum = newArr.reduce((acc, x) => acc + x.value, 0);
+    newArr.forEach((x) => {
+      x.收入 = x.value + '元';
+      if (sum > 0) {
+        x.百分比 = ((x.value / sum) * 100).toFixed(1) + '%';
+      }
+    });
+    setArr(newArr);
+  };
+
+  const config = {
+    data: arr,
+    title: {
+      title: '今日数据',
+      align: 'center',
+    },
+    angleField: 'value',
+    colorField: 'type',
+    height: 200,
+    marginTop: 20,
+    label: {
+      text: 'value',
+      position: 'outside',
+    },
+    legend: {
+      color: {
+        title: false,
+        position: 'right',
+        rowPadding: 5,
+      },
+    },
+    tooltip: {
+      title: 'type',
+      items: [
+        {
+          name: '收入',
+          field: '收入',
+        },
+        {
+          name: '占比',
+          field: '百分比',
+        },
+      ],
+    },
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [props.appCode]);
+
+  return (
+    <>
+      <Card style={{ height: 300 }}>{arr.length > 0 && <Pie {...config} />}</Card>
+    </>
+  );
+};
+
+export default TodayAdvPie;

src/services/matrix/admin.ts

@@ -49,6 +49,36 @@ export async function advList(body: API.AdvRecordQuery, options?: { [key: string
   });
 }
 
+/** 此处后端没有提供注释 GET /api/admin/advTypeIncomeHistory */
+export async function advTypeIncomeHistory(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.advTypeIncomeHistoryParams,
+  options?: { [key: string]: any },
+) {
+  return request<API.RListAdvTypeIncome>('/api/admin/advTypeIncomeHistory', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
+/** 此处后端没有提供注释 GET /api/admin/advTypeIncomeToday */
+export async function advTypeIncomeToday(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.advTypeIncomeTodayParams,
+  options?: { [key: string]: any },
+) {
+  return request<API.RListAdvTypeIncome>('/api/admin/advTypeIncomeToday', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
 /** 此处后端没有提供注释 GET /api/admin/appList */
 export async function appList(options?: { [key: string]: any }) {
   return request<API.RListMatrixAppBo>('/api/admin/appList', {

src/services/matrix/typings.d.ts

@@ -27,6 +27,21 @@ declare namespace API {
     userId?: number;
   };
 
+  type AdvTypeIncome = {
+    advType?: number;
+    income?: number;
+  };
+
+  type advTypeIncomeHistoryParams = {
+    code: string;
+    beginDate?: number;
+    endDate?: number;
+  };
+
+  type advTypeIncomeTodayParams = {
+    code: string;
+  };
+
   type AliPayConfigBo = {
     aliPayPublicCert?: string;
     aliPayRootCert?: string;
@@ -64,6 +79,8 @@ declare namespace API {
     enablePangolin?: boolean;
     pangolinDailyLimit?: number;
     tencentDailyLimit?: number;
+    videoDuration?: number;
+    popUpDuration?: number;
   };
 
   type calcParams = {
@@ -344,6 +361,12 @@ declare namespace API {
     data?: AppNormalConfig;
   };
 
+  type RListAdvTypeIncome = {
+    code?: number;
+    message?: string;
+    data?: AdvTypeIncome[];
+  };
+
   type RListDateIncome = {
     code?: number;
     message?: string;