增加空间报表

src/pages/Op/data.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from "react";
 import baseRequest from "../../utils/baseRequest";
-import { DatePicker, Table } from "antd";
+import { DatePicker, Table, Image } from "antd";
 
 export default function Data() {
   const { RangePicker } = DatePicker;
   const [data, setData] = useState();
   const [order, setOrder] = useState();
   const [notFinishOrder, setNotFinishOrder] = useState();
+  const [zoneData, setZoneData] = useState();
 
   // 获取当前时间戳
   const currentTimestamp = Date.now();
@@ -139,8 +140,58 @@ export default function Data() {
       }
     };
 
+    const getZoneData = async () => {
+      try {
+        const base = baseRequest();
+        const response = await fetch(`/op/daily_statement_zone_info/list`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            st: Math.floor(selectTime.ct_lower_bound / 1000),
+            et: Math.floor(selectTime.ct_upper_bound / 1000),
+            offset: 0,
+            limit: 100,
+            ...base,
+          }),
+        });
+        const _data = await response.json();
+        console.log(_data);
+        if (_data.ret === -1) {
+          alert(_data.msg);
+          return;
+        }
+        const structedData = _data.data.list.map((item, index) => {
+          return {
+            key: index,
+            time: {
+              start: new Date(item.start_time * 1000).toLocaleString(),
+              end: new Date(item.end_time * 1000).toLocaleString(),
+            },
+            streamer: item.streamer_ext,
+            entrant_num: item.entrant_num,
+            earn_amount: {
+              total_amount: item.total_amount,
+              admission_amount: item.admission_amount,
+              zone_moment_amount: item.zone_moment_amount,
+              superfanship_amount: item.superfanship_amount,
+            },
+            refund: {
+              refund_amount: item.refund_amount,
+              refunder_amount: item.refunder_amount,
+            },
+          };
+        });
+        setZoneData(structedData);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
     getData();
     getOrderData();
+    getZoneData();
   }, [selectTime]);
 
   const onOk = (value) => {
@@ -263,6 +314,96 @@ export default function Data() {
     },
   ];
 
+  //空间数据表头
+  const zoneColumns = [
+    {
+      title: "时段",
+      dataIndex: "time",
+      key: "time",
+      render: (data) => {
+        return (
+          <div>
+            <p>
+              <span className="text-green-400">开始时间：</span>
+              {data.start}
+            </p>
+            <p>
+              <span className="text-red-400">结束时间：</span>
+              {data.end}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      title: "发帖人",
+      dataIndex: "streamer",
+      key: "streamer",
+      render: (data) => (
+        <div>
+          <Image src={data.avatar.images[0].urls[0]} width={50} />
+          <p>
+            ID：<span className="text-red-400">{data.user_id}</span>
+          </p>
+          <p>
+            昵称：<span className="text-red-400">{data.name}</span>
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: "上小时空间新增人数",
+      dataIndex: "entrant_num",
+      key: "entrant_num",
+    },
+    {
+      title: "营收情况",
+      dataIndex: "earn_amount",
+      key: "earn_amount",
+      render: (data) => {
+        return (
+          <div>
+            <p>
+              <span className="text-red-400">总营收：</span>¥
+              {data?.total_amount / 100}
+            </p>
+            <p>
+              <span className="text-red-400">解锁空间：</span>¥
+              {data?.admission_amount / 100}
+            </p>
+            <p>
+              <span className="text-red-400">空间动态：</span>¥
+              {data?.zone_moment_amount / 100}
+            </p>
+            <p>
+              <span className="text-red-400">超粉：</span>¥
+              {data?.superfanship_amount / 100}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      title: "退款情况",
+      dataIndex: "refund",
+      key: "refund",
+      render: (data) => {
+        return (
+          <div>
+            <p>
+              <span className="text-red-400">退款人数：</span>
+              {data?.refunder_amount}
+            </p>
+            <p>
+              <span className="text-red-400">退款金额：</span>¥
+              {data?.refund_amount / 100}
+            </p>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
     <div className="px-4">
       <h1>数据统计</h1>
@@ -296,6 +437,12 @@ export default function Data() {
         pagination={{ pageSize: 20 }}
         scroll={{ y: window.innerHeight - 300 }}
       />
+      <Table
+        columns={zoneColumns}
+        dataSource={zoneData}
+        pagination={{ pageSize: 20 }}
+        scroll={{ y: window.innerHeight - 300 }}
+      />
     </div>
   );
 }