调用接口
This commit is contained in:
al
parent
27e2f36271
commit
791a6626c2
|
|
@ -2,16 +2,49 @@
|
|||
|
||||
import Link from "next/link";
|
||||
import * as echarts from "echarts";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import webviewBaseRequest from "@/utils/webviewBaseRequest";
|
||||
import { generateSignature } from "@/utils/crypto";
|
||||
export default function IncomeQuerry({ children }) {
|
||||
var databoard = useRef();
|
||||
var incomeOrgin = useRef();
|
||||
const [data, setData] = useState({
|
||||
withdraw_diamonds: 0,
|
||||
today_income: 0,
|
||||
wait_deal_income: 0,
|
||||
weekIncom: 0,
|
||||
});
|
||||
useEffect(() => {
|
||||
createDataBoard();
|
||||
createIncomeOrgin();
|
||||
getData();
|
||||
}, []);
|
||||
|
||||
const createDataBoard = () => {
|
||||
const getData = async () => {
|
||||
const base = webviewBaseRequest();
|
||||
const signature = generateSignature({
|
||||
...base,
|
||||
});
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/vas/income_page?signature=${signature}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...base,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const { data } = await response.json();
|
||||
const weekIncom = data.week_dashboard.reduce((total, item) => {
|
||||
return total + item.income;
|
||||
}, 0);
|
||||
data && setData({ ...data, weekIncom });
|
||||
createDataBoard(data.week_dashboard);
|
||||
createIncomeOrgin(data.income_from_dashboard);
|
||||
} catch (error) {}
|
||||
};
|
||||
const createDataBoard = (data) => {
|
||||
if (databoard.current) {
|
||||
var myChart = echarts.init(databoard.current, "dark");
|
||||
var option;
|
||||
|
|
@ -32,16 +65,24 @@ export default function IncomeQuerry({ children }) {
|
|||
},
|
||||
],
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b} : {c}'
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: getDateStr(),
|
||||
boundaryGap: false,
|
||||
data: getDateStr(data),
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: '#ffffff30'
|
||||
color: "#ffffff30",
|
||||
// ...
|
||||
},
|
||||
},
|
||||
|
|
@ -56,23 +97,26 @@ export default function IncomeQuerry({ children }) {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
name: '',
|
||||
symbolSize: 10,
|
||||
data:data.map(item=>item.income),
|
||||
type: "line",
|
||||
stack: 'Total',
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
// ...
|
||||
},
|
||||
itemStyle: {
|
||||
color:"#fff",
|
||||
backgroundColor:"#fff"
|
||||
}
|
||||
color: "#ffffff",
|
||||
// ...
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
const createIncomeOrgin = () => {
|
||||
const createIncomeOrgin = (data) => {
|
||||
if (incomeOrgin.current) {
|
||||
var myChart = echarts.init(incomeOrgin.current, "dark");
|
||||
var option;
|
||||
|
|
@ -100,14 +144,14 @@ export default function IncomeQuerry({ children }) {
|
|||
type: "scroll",
|
||||
orient: "vertical",
|
||||
right: 10,
|
||||
top: 20,
|
||||
top: 32,
|
||||
bottom: 20,
|
||||
color: "#fff",
|
||||
// data: data.legendData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["30%", "50%"],
|
||||
|
|
@ -122,7 +166,7 @@ export default function IncomeQuerry({ children }) {
|
|||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
fontSize: 40,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
|
|
@ -130,13 +174,7 @@ export default function IncomeQuerry({ children }) {
|
|||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: "空间解锁" },
|
||||
{ value: 735, name: "付费贴" },
|
||||
{ value: 580, name: "超粉解锁" },
|
||||
{ value: 484, name: "个人微信" },
|
||||
{ value: 300, name: "其他分成" },
|
||||
],
|
||||
data: data.map(item=>({value:item.income,name:item.desc})),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -144,47 +182,58 @@ export default function IncomeQuerry({ children }) {
|
|||
}
|
||||
};
|
||||
|
||||
const getDateStr = () => {
|
||||
const currentDay = new Date();
|
||||
return Array(7).fill(null).map((it,index)=>{
|
||||
const days = (6-index)
|
||||
return (currentDay.getMonth()+1)+"."+(currentDay.getDate()-days)
|
||||
})
|
||||
}
|
||||
const getDateStr = (data) => {
|
||||
return data.map(item=>{
|
||||
let newTimeStr = `${item.date.slice(0,4)}-${item.date.slice(4,6)}-${item.date.slice(6,8)}`
|
||||
return (new Date(newTimeStr).getMonth() + 1)+"."+(new Date(newTimeStr).getDate())
|
||||
})
|
||||
|
||||
};
|
||||
return (
|
||||
<div className="w-full">
|
||||
<p className="text-xs my-2">*当前页面所有统计单位均为钻石</p>
|
||||
<div className="rounded-2xl bg-gradient-to-r from-[#FF668B] to-[#FF66F0] text-white p-4 h-max mb-4">
|
||||
<div className="mb-4">
|
||||
<p className="text-md mb-4">可提现钻石</p>
|
||||
<p className="text-md mb-4 font-medium">可提现钻石</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-3xl font-bold">{39900}</span>
|
||||
<Link href={"#"} className="text-sm text-[#7d304c]">
|
||||
<span className="text-3xl font-bold">{data.withdraw_diamonds}</span>
|
||||
{/* <Link href={"#"} className="text-sm text-[#7d304c]">
|
||||
<span>前往提现</span>
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="grid grid-cols-3 items-center">
|
||||
<div className="text-center">
|
||||
<p className="text-sm">今日收益</p>
|
||||
<p className="text-lg font-bold">{9900}</p>
|
||||
<p className="text-lg font-bold">{data.today_income}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">待结算</p>
|
||||
<p className="text-lg font-bold">{1500}</p>
|
||||
<p className="text-sm">待结算收益</p>
|
||||
<p className="text-lg font-bold">{data.wait_deal_income}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">近一周收益</p>
|
||||
<p className="text-lg font-bold">{15200}</p>
|
||||
<p className="text-lg font-bold">{data.weekIncom}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4">数据看板</p>
|
||||
<div className="h-40" ref={databoard}></div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4">收益来源</p>
|
||||
<div className="h-40" ref={incomeOrgin}></div>
|
||||
|
||||
<div className="mt-4">
|
||||
<p className="text-xs my-2">*以下所有数据均为次日00:10更新</p>
|
||||
{
|
||||
data.week_dashboard &&
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4 font-medium">数据看板</p>
|
||||
<div className="h-40" ref={databoard}></div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
data.income_from_dashboard &&
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4 font-medium text-white">收益来源</p>
|
||||
<div className="h-40" ref={incomeOrgin}></div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5777,6 +5777,126 @@
|
|||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.2.tgz",
|
||||
"integrity": "sha512-i+jQY0fOb8L5gvGvojWyZMfQoQtDVB2kYe7fufOEiST6sicvzI2W5/EXo4lX5bLUjapHKe+nFxuVv7BA+Pd7LQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.2.tgz",
|
||||
"integrity": "sha512-tSJmiaon8YaKsVhi7GgRizZoV0N1Sx5+i+hFTrCKKQN7s3tuqW0Rov+RYdPhAv/pJl4qiG+XfSX4eJXqpNg3dA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.2.tgz",
|
||||
"integrity": "sha512-dXJLMSEOwqJKcag1BeX1C+ekdPPJ9yXbWIt3nAadhbLx5CjACoB2NQj9Xcqu2tmdr5L6m34fR+fjGPs+ZVPLzA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.2.tgz",
|
||||
"integrity": "sha512-WC9KAPSowj6as76P3vf1J3mf2QTm3Wv3FBzQi7UJ+dxWjK3MhHVWsWUo24AnmHx9qDcEtHM58okgZkXVqeLB+Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.2.tgz",
|
||||
"integrity": "sha512-KSSAwvUcjtdZY4zJFa2f5VNJIwuEVnOSlqYqbQIawREJA+gUI6egeiRu290pXioQXnQHYYdXmnVNZ4M+VMB7KQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.2.tgz",
|
||||
"integrity": "sha512-2/O0F1SqJ0bD3zqNuYge0ok7OEWCQwk55RPheDYD0va5ij7kYwrFkq5ycCRN0TLjLfxSF6xI5NM6nC5ux7svEQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.2.tgz",
|
||||
"integrity": "sha512-vJI/x70Id0oN4Bq/R6byBqV1/NS5Dl31zC+lowO8SDu1fHmUxoAdILZR5X/sKbiJpuvKcCrwbYgJU8FF/Gh50Q==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "14.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.2.tgz",
|
||||
"integrity": "sha512-Ut4LXIUvC5m8pHTe2j0vq/YDnTEyq6RSR9vHYPqnELrDapPhLNz9Od/L5Ow3J8RNDWpEnfCiQXuVdfjlNEJ7ug==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue