diff --git a/src/App.js b/src/App.js index 5471c47..f28fbc1 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ 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_sub from "./views/Orders_sub" import Orders_index from "./charts/Orders" import Logo from './logo.png' @@ -62,6 +63,7 @@ class App extends Component { }/> }/> + }/> }/> diff --git a/src/charts/DatePickerCharts.js b/src/charts/DatePickerCharts.js index 03a2a4d..3537fc5 100644 --- a/src/charts/DatePickerCharts.js +++ b/src/charts/DatePickerCharts.js @@ -28,8 +28,8 @@ class DatePickerCharts extends Component { '本周': [moment().startOf('week'), moment().endOf('week')], '上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')], '本月': [moment().startOf('month'), moment().endOf('month')], - '近30天': [moment().subtract(30, 'days'), moment()], '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')], + '近30天': [moment().subtract(30, 'days'), moment()], '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')], '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')], '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')], diff --git a/src/charts/Orders.js b/src/charts/Orders.js index 8c6d32b..2cfebc3 100644 --- a/src/charts/Orders.js +++ b/src/charts/Orders.js @@ -41,7 +41,7 @@ class Orders extends Component { legend: { position: 'right-top', title: { - text: '网站合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0), + text: '总合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0), }, itemMarginBottom: 12,//垂直间距 itemValue: { diff --git a/src/stores/DashboardStore.js b/src/stores/DashboardStore.js index 21b1ff7..9b04916 100644 --- a/src/stores/DashboardStore.js +++ b/src/stores/DashboardStore.js @@ -236,6 +236,9 @@ class DashboardStore { } // 移动成交 end + + + } diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index d4ea035..664654a 100644 --- a/src/stores/OrdersStore.js +++ b/src/stores/OrdersStore.js @@ -6,6 +6,7 @@ import { import {Tag} from 'antd'; import * as config from "../config"; import moment from "moment"; +import {NavLink} from "react-router-dom"; class OrdersStore { @@ -16,13 +17,13 @@ class OrdersStore { } loading = false; - site_select_mode=false;//是否多选站点 + site_select_mode = false;//是否多选站点 webcode = 'AH'; active_tab_key = 'Form';//当前切换的标签页 orderCountData = [];//订单统计数据源 - orderCountData_all = [];//所有订单统计数据源 + orderCountData_sub = [];//子维度订单统计 orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源 - + orderCountData_Form_sub = [];//子维度类型统计 handleChange_webcode = (value) => { this.webcode = value; @@ -55,7 +56,6 @@ class OrdersStore { } - //网站订单数量 getOrderCount() { this.loading = true; @@ -114,7 +114,9 @@ class OrdersStore { 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' + dataIndex: 'OrderType', + render: (text, record) => {text} }] }, { @@ -166,6 +168,7 @@ class OrdersStore { 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), @@ -181,8 +184,12 @@ class OrdersStore { [ { title: '', - children: [{title:
{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
, - dataIndex: 'OrderType'}] + 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: '数量', diff --git a/src/views/Orders.js b/src/views/Orders.js index 391884c..700c221 100644 --- a/src/views/Orders.js +++ b/src/views/Orders.js @@ -38,6 +38,14 @@ class Orders extends Component { type: 'timeCat', }, 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) : '';//计算总数 + }, + }, + }, // tooltip: { // customContent: (title, items) => { // const data = items[0]?.data || {}; diff --git a/src/views/Orders_sub.js b/src/views/Orders_sub.js new file mode 100644 index 0000000..5661d0f --- /dev/null +++ b/src/views/Orders_sub.js @@ -0,0 +1,104 @@ +import React, {Component} from 'react'; +import {Row, Col, Button, Tabs, Table} 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 "../charts/SiteSelect"; +import {observer} from 'mobx-react'; +import DatePickerCharts from '../charts/DatePickerCharts' + +class Orders_sub extends Component { + + static contextType = stores_Context; + + constructor(props) { + super(props); + } + + + 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', + }, + 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) : '';//计算总数 + }, + }, + }, + smooth: true, + }; + + return ( +
+ + + + + + + + + + + + + + + + + + + + + orders_store.onChange_Tabs(active_key)}> + 来源类型} key="Form"> + + + 产品类型} key="Product"> +
+ + 国籍} key="Country"> +
+ + 线路} key="line"> +
+ + 目的地} key="city"> +
+ + + + + + + ); + } +} + +export default observer(Orders_sub);