diff --git a/src/App.js b/src/App.js index f28fbc1..8a86e4d 100644 --- a/src/App.js +++ b/src/App.js @@ -63,7 +63,7 @@ class App extends Component { }/> }/> - }/> + }/> }/> diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index 664654a..6c7b350 100644 --- a/src/stores/OrdersStore.js +++ b/src/stores/OrdersStore.js @@ -21,8 +21,8 @@ class OrdersStore { webcode = 'AH'; active_tab_key = 'Form';//当前切换的标签页 orderCountData = [];//订单统计数据源 - orderCountData_sub = [];//子维度订单统计 - orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源 + orderCountData_type = [];//子维度订单统计 + orderCountData_Form = [];//表单类型统计数据源 orderCountData_Form_sub = [];//子维度类型统计 handleChange_webcode = (value) => { @@ -55,6 +55,29 @@ class OrdersStore { return result; } + //网站订单数量，根据类型 + getOrderCount_type(ordertype, ordertype_sub) { + this.loading = true; + const date_picker_store = this.rootStore.date_picker_store; + let url = '/service-web/QueryData/GetOrderCount' + url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`; + 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'; + if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { + url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59'; + } + fetch(config.HT_HOST + url) + .then((response) => response.json()) + .then((json) => { + runInAction(() => { + this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp); + this.loading = false; + }) + }) + .catch((error) => { + this.loading = false; + console.log('fetch data failed', error); + }); + } //网站订单数量 getOrderCount() { @@ -93,144 +116,39 @@ class OrdersStore { //网站订单类型 getOrderCountByType(order_type) { const date_picker_store = this.rootStore.date_picker_store; - let isVS = false;//是否是比较数据，有比较的表格是不一样的 let url = '/service-web/QueryData/GetOrderCountByType' url += '?WebCode=' + this.webcode + '&OrderType=' + order_type; url += '&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'; if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { - isVS = true; url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59'; } fetch(config.HT_HOST + url) .then((response) => response.json()) .then((json) => { - let ordercountTotal1 = json.ordercountTotal1; - let ordercountTotal2 = json.ordercountTotal2; - let data = []; - let columns = []; - if (isVS) { - columns = [ - { - title: '', - children: [{ - title:
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}
, - dataIndex: 'OrderType', - render: (text, record) => {text} - }] - }, - { - title: '数量', - children: [{ - title: this.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), - dataIndex: 'OrderCount' - }], - }, - { - title: '成交数', - children: [{ - title: this.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount), - dataIndex: 'CJCount' - }], - }, - { - title: '成交人数', - children: [{ - title: this.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), - dataIndex: 'CJPersonNum' - }], - }, - { - title: '成交率', - children: [{ - title: this.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate), - dataIndex: 'CJrate' - }], - }, - { - title: '成交毛利（预计）', - children: [{ - title: this.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY), - dataIndex: 'YJLY' - }], - }, - - { - title: '单个订单价值', - children: [{ - title: this.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), - dataIndex: 'Ordervalue' - }], - }, - ]; - for (let item of json.ordercount1) { - for (let item2 of json.ordercount2) { - if (item.OrderType == item2.OrderType) { - data.push({ - OrderType: item.OrderType, - OrderTypeSN: item.OrderTypeSN, - OrderCount: this.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount), - CJCount: this.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount), - CJPersonNum: this.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum), - CJrate: this.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate), - YJLY: this.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY), - Ordervalue: this.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue), - }) - } - } - } - } else { - columns = - [ - { - title: '', - children: [{ - title:
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
, - dataIndex: 'OrderType', - render: (text, record) => {text} - }] - }, - { - title: '数量', - children: [{title: ordercountTotal1.OrderCount, dataIndex: 'OrderCount'}], - sorter: (a, b) => b.OrderCount - a.OrderCount, - }, - { - title: '成交数', - children: [{title: ordercountTotal1.CJCount, dataIndex: 'CJCount'}], - sorter: (a, b) => b.CJCount - a.CJCount, - }, - { - title: '成交人数', - children: [{title: ordercountTotal1.CJPersonNum, dataIndex: 'CJPersonNum'}], - sorter: (a, b) => b.CJPersonNum - a.CJPersonNum, - }, - { - title: '成交率', - children: [{title: ordercountTotal1.CJrate, dataIndex: 'CJrate'}], - sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate), - }, - { - title: '成交毛利（预计）', - children: [{title: ordercountTotal1.YJLY, dataIndex: 'YJLY'}], - sorter: (a, b) => b.YJLY - a.YJLY, - }, - - { - title: '单个订单价值', - children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}], - sorter: (a, b) => b.Ordervalue - a.Ordervalue, - }, - ]; - data = json.ordercount1; - } - runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 - this.orderCountData_Form.dataSource = data; - this.orderCountData_Form.columns = columns; + this.orderCountData_Form = json; }) + }) + .catch((error) => { + console.log('fetch data failed', error); + }); + } + //子维度查询 + getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) { + const date_picker_store = this.rootStore.date_picker_store; + let url = '/service-web/QueryData/GetOrderCountByType_Sub' + url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_type}`; + url += '&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'; + if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { + url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59'; + } + fetch(config.HT_HOST + url) + .then((response) => response.json()) + .then((json) => { + runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 + this.orderCountData_Form_sub = json; + }) }) .catch((error) => { console.log('fetch data failed', error); diff --git a/src/views/Orders.js b/src/views/Orders.js index 700c221..5983154 100644 --- a/src/views/Orders.js +++ b/src/views/Orders.js @@ -10,6 +10,9 @@ import {Line} from "@ant-design/charts"; import SiteSelect from "../charts/SiteSelect"; import {observer} from 'mobx-react'; import DatePickerCharts from '../charts/DatePickerCharts' +import * as config from "../config"; +import {NavLink} from "react-router-dom"; +import * as comm from "../utils/commons" class Orders extends Component { @@ -25,8 +28,138 @@ class Orders extends Component { // orders_store.onChange_Tabs(orders_store.active_tab_key); // } + + format_data(data) { + const {date_picker_store, orders_store} = this.context; + let result = {dataSource: [], columns: []} + if (!comm.empty(data)) { + let ordercountTotal1 = data.ordercountTotal1; + let ordercountTotal2 = data.ordercountTotal2; + if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据 + result.columns = [ + { + title: '', + children: [{ + title:
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}
, + dataIndex: 'OrderType', + render: (text, record) => {text} + }] + }, + { + title: '数量', + children: [{ + title: orders_store.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), + dataIndex: 'OrderCount' + }], + }, + { + title: '成交数', + children: [{ + title: orders_store.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount), + dataIndex: 'CJCount' + }], + }, + { + title: '成交人数', + children: [{ + title: orders_store.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), + dataIndex: 'CJPersonNum' + }], + }, + { + title: '成交率', + children: [{ + title: orders_store.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate), + dataIndex: 'CJrate' + }], + }, + { + title: '成交毛利（预计）', + children: [{ + title: orders_store.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY), + dataIndex: 'YJLY' + }], + }, + + { + title: '单个订单价值', + children: [{ + title: orders_store.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), + dataIndex: 'Ordervalue' + }], + }, + ]; + for (let item of data.ordercount1) { + for (let item2 of data.ordercount2) { + if (item.OrderType == item2.OrderType) { + result.dataSource.push({ + OrderType: item.OrderType, + OrderTypeSN: item.OrderTypeSN, + OrderCount: orders_store.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount), + CJCount: orders_store.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount), + CJPersonNum: orders_store.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum), + CJrate: orders_store.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate), + YJLY: orders_store.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY), + Ordervalue: orders_store.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue), + }) + } + } + } + } else { + result.columns = + [ + { + title: '', + children: [{ + title:
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
, + dataIndex: 'OrderType', + render: (text, record) => {text} + }] + }, + { + title: '数量', + children: [{title: ordercountTotal1.OrderCount, dataIndex: 'OrderCount'}], + sorter: (a, b) => b.OrderCount - a.OrderCount, + }, + { + title: '成交数', + children: [{title: ordercountTotal1.CJCount, dataIndex: 'CJCount'}], + sorter: (a, b) => b.CJCount - a.CJCount, + }, + { + title: '成交人数', + children: [{title: ordercountTotal1.CJPersonNum, dataIndex: 'CJPersonNum'}], + sorter: (a, b) => b.CJPersonNum - a.CJPersonNum, + }, + { + title: '成交率', + children: [{title: ordercountTotal1.CJrate, dataIndex: 'CJrate'}], + sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate), + }, + { + title: '成交毛利（预计）', + children: [{title: ordercountTotal1.YJLY, dataIndex: 'YJLY'}], + sorter: (a, b) => b.YJLY - a.YJLY, + }, + + { + title: '单个订单价值', + children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}], + sorter: (a, b) => b.Ordervalue - a.Ordervalue, + }, + ]; + result.dataSource = data.ordercount1; + } + } + return result; + } + render() { const {orders_store} = this.context; + const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : []; + const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; const config = { data: data_source, @@ -55,6 +188,7 @@ class Orders extends Component { smooth: true, }; + return (
@@ -83,24 +217,19 @@ class Orders extends Component { orders_store.onChange_Tabs(active_key)}> 来源类型} key="Form"> - +
产品类型} key="Product"> -
+
国籍} key="Country"> -
+
线路} key="line"> -
+
目的地} key="city"> -
+
diff --git a/src/views/Orders_sub.js b/src/views/Orders_sub.js index 5661d0f..ee1feaf 100644 --- a/src/views/Orders_sub.js +++ b/src/views/Orders_sub.js @@ -1,104 +1,132 @@ -import React, {Component} from 'react'; -import {Row, Col, Button, Tabs, Table} from 'antd'; +import React, {useContext, useEffect} from 'react'; +import {Row, Col, Button, Tabs, Table, Space} from 'antd'; import { - ContainerOutlined, CarryOutOutlined, - SmileOutlined, TagsOutlined, GlobalOutlined, + ContainerOutlined, SearchOutlined, } from '@ant-design/icons'; import {stores_Context} from '../config' import {Line} from "@ant-design/charts"; -import SiteSelect from "../charts/SiteSelect"; import {observer} from 'mobx-react'; import DatePickerCharts from '../charts/DatePickerCharts' +import {NavLink, useParams} from "react-router-dom"; +import * as comm from "../utils/commons"; +import * as config from "../config"; -class Orders_sub extends Component { +const Orders_sub = () => { - static contextType = stores_Context; - constructor(props) { - super(props); - } + const {ordertype, ordertype_sub, ordertype_title} = useParams(); + const {orders_store, date_picker_store} = useContext(stores_Context); + useEffect(() => { + orders_store.getOrderCount_type(ordertype, ordertype_sub); + orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, 'page'); + }, []) - render() { - const {ordertype, ordertype_sub} = this.props.match.params; - const {orders_store} = this.context; - const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; - const config = { - data: data_source, - padding: 'auto', - xField: 'xField', - yField: 'yField', - seriesField: 'seriesField', - xAxis: { - type: 'timeCat', + const data_source = orders_store.orderCountData_type; + const line = { + data: data_source, + padding: 'auto', + xField: 'xField', + yField: 'yField', + seriesField: 'seriesField', + xAxis: { + type: 'timeCat', + }, + label: {},//显示标签 + legend: { + title: { + text: ordertype_title, }, - label: {},//显示标签 - legend: { - itemValue: { - formatter: (text, item) => { - const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选 - return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数 - }, + itemValue: { + formatter: (text, item) => { + const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选 + return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数 }, }, - smooth: true, - }; - - return ( -
- -
- - - - - - - - - - - - - - - - - - - orders_store.onChange_Tabs(active_key)}> - 来源类型} key="Form"> -
- - 产品类型} key="Product"> -
- - 国籍} key="Country"> -
- - 线路} key="line"> -
- - 目的地} key="city"> -
- - - - - - - ); - } -} + }, + smooth: true, + }; + + const format_data = ((data) => { + let result = {dataSource: [], columns: []} + if (!comm.empty(data)) { + result.columns = [ + { + title: '页面', + children: [{ + title: +
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
, + dataIndex: 'request_uri' + }], + }, + { + title: '访问量', + children: [{ + title: data.reduce((a, b) => a + b.viewCount, 0), + dataIndex: 'viewCount' + }], + } + ]; + result.dataSource = data; + } + return result; + }) + + const table_data = format_data(orders_store.orderCountData_Form_sub.ordercount1); + const table_data2 = format_data(orders_store.orderCountData_Form_sub.ordercount2); + + return ( +
+ +
+ 返回 + + + + + + + + + + + + + + + + + + orders_store.onChange_Tabs(active_key)}> + 访问路径} key="page"> + + +
+ + + +
+ + + + + + + + + + + + ); + +} export default observer(Orders_sub); +