添加了饼图，汇率走势图
尹诚诚
3 years ago
parent
254ab199c3
commit
4adfb60b22
@ -0,0 +1,76 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { Table, Button, Space, Radio } from "antd";
|
||||||
|
import { SearchOutlined } from "@ant-design/icons";
|
||||||
|
import GroupSelect from "./GroupSelect";
|
||||||
|
import DatePickerCharts from "./DatePickerCharts";
|
||||||
|
import { stores_Context } from "../config";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import * as comm from "../utils/commons";
|
||||||
|
import { Line } from "@ant-design/charts";
|
||||||
|
import * as config from "../config";
|
||||||
|
|
||||||
|
class ExchangeRate extends Component {
|
||||||
|
static contextType = stores_Context;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { dashboard_store, date_picker_store } = this.context;
|
||||||
|
const { exchangeRate_data } = dashboard_store;
|
||||||
|
const line_data_source = comm.empty(exchangeRate_data.data) ? [] : exchangeRate_data.data.CurrencyData1;
|
||||||
|
const line_config = {
|
||||||
|
data: line_data_source,
|
||||||
|
padding: "auto",
|
||||||
|
xField: "er_date",
|
||||||
|
yField: "er_htrate",
|
||||||
|
seriesField: "er_currency",
|
||||||
|
xAxis: {
|
||||||
|
type: "timeCat",
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
size: 4,
|
||||||
|
shape: "cicle",
|
||||||
|
},
|
||||||
|
label: {}, //显示标签
|
||||||
|
tooltip: {
|
||||||
|
// customContent: (title, items) => {
|
||||||
|
// const data = items[0]?.data || {};
|
||||||
|
// return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
|
||||||
|
// },
|
||||||
|
// itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span><span class="g2-tooltip-name">{name}</span>: <span class="g2-tooltip-value">{value}</span></li>',
|
||||||
|
customItems: items => {
|
||||||
|
let result_arr = [];
|
||||||
|
items.forEach(item => {
|
||||||
|
item.value = item.data.er_htrate + " | " + item.data.er_bankrate;
|
||||||
|
return result_arr.push(item);
|
||||||
|
});
|
||||||
|
return result_arr; //return [{color:'red',name:'sss',value:22},{color:'red',name:'aaaa',value:22}];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>汇率 HT|Bank</h2>
|
||||||
|
<Space size="large">
|
||||||
|
<DatePickerCharts hide_vs={true} />
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<SearchOutlined />}
|
||||||
|
loading={exchangeRate_data.loading}
|
||||||
|
onClick={() => {
|
||||||
|
exchangeRate_data.asyncFetch(date_picker_store.start_date.format(config.DATE_FORMAT), date_picker_store.end_date.format(config.DATE_FORMAT));
|
||||||
|
}}>
|
||||||
|
统计
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
<Line {...line_config} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default observer(ExchangeRate);
|
||||||
@ -1,38 +1,39 @@
|
|||||||
import React, {Component} from 'react';
|
import React, { Component } from "react";
|
||||||
import {Col, Row} from "antd";
|
import { Col, Row } from "antd";
|
||||||
import OrdersTempTable from "../charts/OrdersTempTable";
|
import OrdersTempTable from "../charts/OrdersTempTable";
|
||||||
import MobileDeal from "../charts/MobileDeal";
|
import MobileDeal from "../charts/MobileDeal";
|
||||||
import Orders from "../charts/Orders";
|
import Orders from "../charts/Orders";
|
||||||
|
import ExchangeRate from "../charts/ExchangeRate";
|
||||||
|
|
||||||
class Dashboard extends Component {
|
class Dashboard extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
constructor(props) {
|
render() {
|
||||||
super(props);
|
return (
|
||||||
}
|
<div>
|
||||||
|
<div>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Orders />
|
||||||
|
</Col>
|
||||||
|
|
||||||
render() {
|
<Col span={24}>
|
||||||
|
<ExchangeRate />
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<OrdersTempTable />
|
||||||
|
</Col>
|
||||||
|
|
||||||
return (
|
<Col span={12}>
|
||||||
<div>
|
<MobileDeal />
|
||||||
<div
|
</Col>
|
||||||
>
|
</Row>
|
||||||
<Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
|
</div>
|
||||||
<Col className="gutter-row" span={24}>
|
</div>
|
||||||
<Orders/>
|
);
|
||||||
</Col>
|
}
|
||||||
<Col className="gutter-row" span={12}>
|
|
||||||
<OrdersTempTable/>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Col className="gutter-row" span={12}>
|
|
||||||
<MobileDeal/>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Dashboard;
|
export default Dashboard;
|
||||||
|
|||||||
Loading…
Reference in New Issue