diff --git a/src/App.css b/src/App.css index b562508..cc332be 100644 --- a/src/App.css +++ b/src/App.css @@ -1 +1,5 @@ @import '~antd/dist/antd.css'; + +.align_right{ + text-align: right; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index d87dcd7..5471c47 100644 --- a/src/App.js +++ b/src/App.js @@ -11,10 +11,10 @@ import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom" import Home from "./views/Home" import Dashboard from "./views/Dashboard" import Orders from "./views/Orders" +import Orders_index from "./charts/Orders" import Logo from './logo.png' - class App extends Component { constructor(props) { @@ -28,7 +28,7 @@ class App extends Component { const menu_items = [ {key: 1, label: 主页, icon: }, - {key: 2, label: 订单数据, icon: }, + {key: 2, label: 订单数据, icon: ,}, {key: 3, label: 仪表盘, icon: }, { key: 4, diff --git a/src/charts/MobileDeal.js b/src/charts/MobileDeal.js index edfcf60..47869a8 100644 --- a/src/charts/MobileDeal.js +++ b/src/charts/MobileDeal.js @@ -15,11 +15,11 @@ class MobileDeal extends Component { render() { const {dashboard_store} = this.context; - const mobile_data=dashboard_store.mobile_data; + const mobile_data = dashboard_store.mobile_data; return (

移动成交

- + diff --git a/src/charts/Orders.js b/src/charts/Orders.js new file mode 100644 index 0000000..8c6d32b --- /dev/null +++ b/src/charts/Orders.js @@ -0,0 +1,74 @@ +import React, {Component} from 'react'; +import {Row, Col, Button, Tabs, Table, Space} from 'antd'; +import { + ContainerOutlined, CarryOutOutlined, + SmileOutlined, TagsOutlined, GlobalOutlined, + SearchOutlined, +} from '@ant-design/icons'; +import {stores_Context} from '../config' +import {Line} from "@ant-design/charts"; +import SiteSelect from "./SiteSelect"; +import {observer} from 'mobx-react'; +import DatePickerCharts from './DatePickerCharts' + +class Orders extends Component { + + static contextType = stores_Context; + + constructor(props) { + super(props); + } + + // componentDidMount() { + // const {orders_store} = this.context; + // orders_store.getOrderCount(); + // orders_store.onChange_Tabs(orders_store.active_tab_key); + // } + + render() { + const {dashboard_store} = this.context; + const orders_data = dashboard_store.orders_data; + const line_config = { + data: orders_data.data, + padding: 'auto', + xField: 'ApplyDate', + yField: 'orderCount', + seriesField: 'WebCode', + xAxis: { + type: 'timeCat', + }, + smooth: true, + legend: { + position: 'right-top', + title: { + text: '网站合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0), + }, + itemMarginBottom: 12,//垂直间距 + itemValue: { + formatter: (text, item) => { + const items = orders_data.data.filter((d) => d.WebCode === item.value);//按站点筛选 + return items.length ? items.reduce((a, b) => a + b.orderCount, 0) : '';//计算总数 + }, + }, + }, + } + + return ( +
+

全网站订单数统计

+
+ + + + +
+
+ +
+ ); + } +} + +export default observer(Orders); diff --git a/src/charts/OrdersTempTable.js b/src/charts/OrdersTempTable.js index c23dbc9..e80227f 100644 --- a/src/charts/OrdersTempTable.js +++ b/src/charts/OrdersTempTable.js @@ -22,28 +22,29 @@ class OrdersTempTable extends Component { // } - render() { const {dashboard_store} = this.context; - const ordersTemp_data=dashboard_store.ordersTemp_data; + const ordersTemp_data = dashboard_store.ordersTemp_data; return (

临时订单数量

- + - - + + {ordersTemp_data.show_table ? ( ) : ( - + )} ); diff --git a/src/charts/SiteSelect.js b/src/charts/SiteSelect.js index dd82578..34b0cdf 100644 --- a/src/charts/SiteSelect.js +++ b/src/charts/SiteSelect.js @@ -15,7 +15,7 @@ class SiteSelect extends Component {