统计所有站点订单，并计算总数

src/App.css

@@ -1 +1,5 @@
 @import '~antd/dist/antd.css';
+
+.align_right{
+    text-align: right;
+}

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: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
-            {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>},
+            {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
             {key: 3, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
             {
                 key: 4,

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 (
             <div>
                 <h2>移动成交</h2>
-                <GroupSelect store={mobile_data} />
+                <GroupSelect store={mobile_data}/>
                 <Space size="large">
                     <DatePickerCharts hide_vs={true}/>
 

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 (
+            <div>
+                <h2>全网站订单数统计</h2>
+                <div>
+                    <Space>
+                        <DatePickerCharts hide_vs={true}/>
+                        <Button type="primary" icon={<SearchOutlined/>} loading={orders_data.loading} onClick={() => {
+                            orders_data.getOrderCount_all();
+                        }}>统计</Button>
+                    </Space>
+                </div>
+                <br/>
+                <Line {...line_config}/>
+            </div>
+        );
+    }
+}
+
+export default observer(Orders);

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 (
 
             <div>
                 <h2>临时订单数量</h2>
-                <SiteSelect store={ordersTemp_data} />
+                <SiteSelect store={ordersTemp_data}/>
                 <Space><DatePickerCharts hide_vs={true}/>
-                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading} onClick={() => {
+                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading}
-                        ordersTemp_data.asyncFetch();
+                            onClick={() => {
-                    }}>统计</Button>
+                                ordersTemp_data.asyncFetch();
-                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading_detail} onClick={() => {
+                            }}>统计</Button>
-                        ordersTemp_data.asyncFetch_detail();
+                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading_detail}
-                    }}>查看详情</Button>
+                            onClick={() => {
+                                ordersTemp_data.asyncFetch_detail();
+                            }}>查看详情</Button>
                 </Space>
                 {ordersTemp_data.show_table ? (
                     <Table dataSource={ordersTemp_data.data_detail} columns={ordersTemp_data.columns} size="small"/>
                 ) : (
-                    <Line {...ordersTemp_data.line} data={ordersTemp_data.data} />
+                    <Line {...ordersTemp_data.line} data={ordersTemp_data.data}/>
                 )}
             </div>
         );

src/charts/SiteSelect.js

@@ -15,7 +15,7 @@ class SiteSelect extends Component {
             <div>
                 <Select
                     mode={store.site_select_mode}
-                    style={{width: '100%',}}
+                    style={{width: '100%'}}
                     placeholder="选择网站"
                     defaultValue={store.webcode}
                     onChange={store.handleChange_webcode}

src/stores/DashboardStore.js

@@ -13,16 +13,44 @@ class DashboardStore {
     site_select_mode = 'multiple';//是否多选站点
     webcode = ['CHT', 'AH', 'GH'];
 
+    //订单统计 begin
+    orders_data = {
+        loading: false,
+        data: [],
+        getOrderCount_all: this.getOrderCount_all.bind(this),
+    }
+
+    getOrderCount_all() { //统计所有站点订单数量
+        this.orders_data.loading = true;
+        const date_picker_store = this.rootStore.date_picker_store;
+        let url = '/service-web/QueryData/GetOrderCount'
+        url += '?WebCode=all&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
+
+        fetch(config.HT_HOST + url)
+            .then((response) => response.json())
+            .then((json) => {
+                runInAction(() => {
+                    this.orders_data.data = json.ordercount1;
+                    this.orders_data.loading = false;
+                })
+            })
+            .catch((error) => {
+                this.orders_data.loading = false;
+                console.log('fetch data failed', error);
+            });
+    }
+
+    //订单统计 end
 
     // 临时订单 begin
 
     ordersTemp_data = {
-        data:[],
+        data: [],
-        data_detail:[],
+        data_detail: [],
         loading: false,
         loading_detail: false,
         show_table: false,
-        columns:[
+        columns: [
             {
                 title: '订单号',
                 dataIndex: 'COLI_ID',
@@ -60,8 +88,8 @@ class DashboardStore {
                 ellipsis: true,
             },
         ],
-        line : {
+        line: {
-            data:[],
+            data: [],
             padding: 'auto',
             xField: 'order_date',
             yField: 'order_count',
@@ -77,13 +105,13 @@ class DashboardStore {
         asyncFetch_detail: this.get_CountOrdersData_detail.bind(this),
     }
 
-    handleChange_site_select(value){
+    handleChange_site_select(value) {
         this.ordersTemp_data.webcode = value;
     }
 
-    get_CountOrdersData(){
+    get_CountOrdersData() {
-        this.ordersTemp_data.loading=true;
+        this.ordersTemp_data.loading = true;
-        this.ordersTemp_data.show_table=false;
+        this.ordersTemp_data.show_table = false;
         const date_picker_store = this.rootStore.date_picker_store;
         let url = '/service-baseinfo/QueryWebData?type=orders_temp&db=1';
         const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'";
@@ -102,12 +130,12 @@ class DashboardStore {
             });
     }
 
-    get_CountOrdersData_detail(){
+    get_CountOrdersData_detail() {
-        this.ordersTemp_data.loading_detail=true;
+        this.ordersTemp_data.loading_detail = true;
-        this.ordersTemp_data.show_table=true;
+        this.ordersTemp_data.show_table = true;
         const date_picker_store = this.rootStore.date_picker_store;
         let url = '/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1';
-        const website_code = "'" +  this.ordersTemp_data.webcode.join("','") + "'";
+        const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'";
         url += '&WebSite=' + website_code + '&ApplyDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
         fetch(config.HT_HOST + url)
             .then((response) => response.json())
@@ -118,7 +146,7 @@ class DashboardStore {
                 })
             })
             .catch((error) => {
-                this.ordersTemp_data.loading_detail=false;
+                this.ordersTemp_data.loading_detail = false;
                 console.log('fetch data failed', error);
             });
     }

src/stores/OrdersStore.js

@@ -17,9 +17,10 @@ class OrdersStore {
 
     loading = false;
     site_select_mode=false;//是否多选站点
-    webcode = 'CHT';
+    webcode = 'AH';
     active_tab_key = 'Form';//当前切换的标签页
     orderCountData = [];//订单统计数据源
+    orderCountData_all = [];//所有订单统计数据源
     orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
 
 
@@ -51,12 +52,13 @@ class OrdersStore {
             }
         }
         return result;
-
     }
 
+
+
     //网站订单数量
     getOrderCount() {
-        //this.loading = true;
+        this.loading = true;
         const date_picker_store = this.rootStore.date_picker_store;
         let url = '/service-web/QueryData/GetOrderCount'//?WebCode=cht&COLI_ApplyDate1=2022-08-01&COLI_ApplyDate2=2022-08-31&COLI_ApplyDateold1=2021-08-01&COLI_ApplyDateold2=2021-08-31';
         url += '?WebCode=' + this.webcode + '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';

src/views/Dashboard.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {Col, Row} from "antd";
 import OrdersTempTable from "../charts/OrdersTempTable";
 import MobileDeal from "../charts/MobileDeal";
+import Orders from "../charts/Orders";
 
 class Dashboard extends Component {
 
@@ -16,6 +17,9 @@ class Dashboard extends Component {
                 <div
                 >
                     <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
+                        <Col className="gutter-row" span={24}>
+                            <Orders/>
+                        </Col>
                         <Col className="gutter-row" span={12}>
                             <OrdersTempTable/>
                         </Col>
@@ -23,6 +27,7 @@ class Dashboard extends Component {
                         <Col className="gutter-row" span={12}>
                             <MobileDeal/>
                         </Col>
+
                     </Row>
                 </div>
             </div>

src/views/Orders.js

@@ -37,13 +37,14 @@ class Orders extends Component {
             xAxis: {
                 type: 'timeCat',
             },
+            label: {},//显示标签
             // tooltip: {
             //     customContent: (title, items) => {
             //         const data = items[0]?.data || {};
             //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
             //     }
             // },
-            smooth: false,
+            smooth: true,
         };
 
         return (