83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 智能算薪-接口流量统计
|
|
* Description:
|
|
* Date: 2023/8/29
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { apiflowStatisticsInfo } from "../../../apis/intelligentCalculateSalarySettings";
|
|
|
|
class InterfaceFlowStatistics extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
statisticsInfo: {
|
|
lastUpdateTime: "",
|
|
staticData: [
|
|
{
|
|
key: "total", label: "购买接口总流量", value: "", icon: require("../../../common/purchased.png")
|
|
},
|
|
{
|
|
key: "remain", label: "剩余总流量", value: "", icon: require("../../../common/remaining.png")
|
|
},
|
|
{
|
|
key: "used", label: "已使用总流量", value: "", icon: require("../../../common/traffic.png")
|
|
}
|
|
]
|
|
}
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.apiflowStatisticsInfo();
|
|
}
|
|
|
|
apiflowStatisticsInfo = () => {
|
|
const { statisticsInfo } = this.state;
|
|
apiflowStatisticsInfo().then(({ status, data }) => {
|
|
if (status) {
|
|
const { lastUpdateTime, ...extraData } = data;
|
|
this.setState({
|
|
statisticsInfo: {
|
|
...statisticsInfo,
|
|
lastUpdateTime,
|
|
staticData: _.map(statisticsInfo.staticData, item => ({
|
|
...item,
|
|
value: extraData[item["key"]]
|
|
}))
|
|
}
|
|
}, () => this.props.updateTime(this.state.statisticsInfo));
|
|
}
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { statisticsInfo } = this.state;
|
|
const { staticData } = statisticsInfo;
|
|
|
|
return (
|
|
<div className="statisticsInfo-layout">
|
|
<div className="static-data">
|
|
{
|
|
_.map(staticData, item => {
|
|
const { label, icon, value } = item;
|
|
return (
|
|
<div className="item">
|
|
<div className="left"><img src={icon} alt=""/></div>
|
|
<div className="right">
|
|
<div className="data">{value}</div>
|
|
<div className="title">{label}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
<div className="detail-area"></div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default InterfaceFlowStatistics;
|