156 lines
3.8 KiB
TypeScript
156 lines
3.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
import { PageContainer, ProTable } from '@ant-design/pro-components';
|
|
import { Card, Col, Row, Statistic, Divider, Tag, Image } from 'antd';
|
|
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
|
|
|
|
import { statMallStatistics, getAmountAndGoodsCount } from '@/services/home/index'
|
|
import { Line } from '@ant-design/charts';
|
|
|
|
export default () => {
|
|
const [deviceData, setDeviceData] = useState([]);
|
|
const [profit, setProfit] = useState([]);
|
|
const [shop, setShop] = useState([]);
|
|
|
|
|
|
|
|
const config = {
|
|
title: {
|
|
visible: true,
|
|
text: '商城(商品数量/金额)-折线图',
|
|
},
|
|
padding: 'auto',
|
|
forceFit: true,
|
|
data:deviceData,
|
|
xField: 'date',
|
|
yField: 'value',
|
|
yAxis: { label: { formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) } },
|
|
legend: { position: 'right-top' },
|
|
seriesField: 'type',
|
|
color: (d) => {
|
|
return d === 'register' ? '#93D072' : '#2D71E7';
|
|
},
|
|
responsive: true,
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
statMallStatistics().then((res) => {
|
|
setProfit(res.data)
|
|
})
|
|
getAmountAndGoodsCount().then((res) => {
|
|
let list = []
|
|
res.data.map((item, index) => {
|
|
list.push({
|
|
"date": item.createTime,
|
|
"type": "shop",
|
|
"value": Number(item.goodsCount),
|
|
})
|
|
list.push({
|
|
"date": item.createTime,
|
|
"type": "money",
|
|
"value": Number(item.amountCount),
|
|
})
|
|
})
|
|
console.log(list);
|
|
setDeviceData(list)
|
|
})
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Divider>充电桩</Divider>
|
|
<Row gutter={10}>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="今日充电"
|
|
value={profit?.device_count?.today}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="昨日充电"
|
|
value={profit?.device_count?.yesterday}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="上周充电"
|
|
value={profit?.device_count?.week}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="上月充电"
|
|
value={profit?.device_count?.month}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
<Divider>商城</Divider>
|
|
<Row gutter={10}>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="今天成交"
|
|
value={profit?.todayTransaction}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="昨天成交"
|
|
value={profit?.yesterdayTransaction}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="上周成交"
|
|
value={profit?.lastWeekTransaction}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="上月成交"
|
|
value={profit?.lastMonthTransaction}
|
|
precision={2}
|
|
prefix="￥"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
<Divider>商城(商品数量/金额)-折线图</Divider>
|
|
{
|
|
deviceData.length != 0 ? <Line {...config} /> : <></>
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|