dashboard/src/views/Orders.jsx

import React, { Component } from "react";
import { Row, Col, Tabs, Table, Divider, Spin } from "antd";
import { ContainerOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, FullscreenOutlined, DingtalkOutlined, CarryOutOutlined, CoffeeOutlined, ClockCircleOutlined, HeartOutlined, IdcardOutlined, ContactsOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line, Pie } from "@ant-design/charts";
import { observer } from "mobx-react";
import * as config from "../config";
import { NavLink } from "react-router-dom";
import * as comm from "../utils/commons";
import { utils, writeFileXLSX } from "xlsx";
import DateGroupRadio from '../components/DateGroupRadio';
import SearchForm from './../components/search/SearchForm';
import { TableExportBtn } from './../components/Data';

class Orders extends Component {
	static contextType = stores_Context;

	constructor(props) {
		super(props);
	}

	format_data(data) {
		const { date_picker_store, orders_store } = this.context;
		const result = { dataSource: [], columns: [] };
		if (!comm.empty(data)) {
			const ordercountTotal1 = data.ordercountTotal1;
			const ordercountTotal2 = data.ordercountTotal2;
			if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
				// 有比较的数据
				result.columns = [
          {
            title: '#',
            fixed: 'left',
            children: [
              {
                title: (
                  <span>
                    <div>
                      {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
                    </div>
                    <div>
                      {date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}
                    </div>
                  </span>
                ),
                titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)} vs ${date_picker_store.start_date_cp.format(
                  config.DATE_FORMAT
                )}~${date_picker_store.end_date_cp.format(config.DATE_FORMAT)}`,
                dataIndex: 'OrderType',
                fixed: 'left',
                render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>,
              },
            ],
          },
          {
            title: '数量',
            children: [
              {
                title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
                titleX: [ordercountTotal1.OrderCount, ordercountTotal2.OrderCount].join(' vs '),
                dataIndex: 'OrderCount',
              },
            ],
          },
          {
            title: '成交数',
            children: [
              {
                title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
                titleX: [ordercountTotal1.CJCount, ordercountTotal2.CJCount].join(' vs '),
                dataIndex: 'CJCount',
              },
            ],
          },
          {
            title: '成交人数',
            children: [
              {
                title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
                titleX: [ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum].join(' vs '),
                dataIndex: 'CJPersonNum',
              },
            ],
          },
          {
            title: '成交率',
            children: [
              {
                title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
                titleX: [ordercountTotal1.CJrate, ordercountTotal2.CJrate].join(' vs '),
                dataIndex: 'CJrate',
              },
            ],
          },
          {
            title: '成交毛利（预计）',
            children: [
              {
                title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
                titleX: [ordercountTotal1.YJLY, ordercountTotal2.YJLY].join(' vs '),
                dataIndex: 'YJLY',
              },
            ],
          },

          {
            title: '单个订单价值',
            children: [
              {
                title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
                titleX: [ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue].join(' vs '),
                dataIndex: 'Ordervalue',
              },
            ],
          },
        ];
				// 1.找出两个数组OrderType相同的数据做比较显示 2.找出两组数据OrderType都不相同的数据做显示
				let has_same_type = false; // 数组1在数组2中是否找到相同的类型
				for (const item of data.ordercount1) {
					has_same_type = false;
					// 数组1在数组2中相同的类型
					for (const item2 of data.ordercount2) {
						if (item.OrderType === item2.OrderType) {
							has_same_type = true;
							result.dataSource.push({
								key: item.key,
								OrderType: item.OrderType,
								OrderTypeSN: item.OrderTypeSN,
								OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount),
								OrderCount_X: ([item.OrderCount, item2.OrderCount].join(' vs ')),
								CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount),
								CJCount_X: ([item.CJCount, item2.CJCount].join(' vs ')),
								CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum),
								CJPersonNum_X: ([item.CJPersonNum, item2.CJPersonNum].join(' vs ')),
								CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate),
								CJrate_X: ([item.CJrate, item2.CJrate].join(' vs ')),
								YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY),
								YJLY_X: ([item.YJLY, item2.YJLY].join(' vs ')),
								Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue),
								Ordervalue_X: ([item.Ordervalue, item2.Ordervalue].join(' vs ')),
							});
						}
					}
					// 数组1中不在数组2的类型
					if (has_same_type === false) {
						result.dataSource.push({
							key: item.key,
							OrderType: item.OrderType,
							OrderTypeSN: item.OrderTypeSN,
							OrderCount: comm.show_vs_tag(comm.formatPercent(item.OrderCount), item.OrderCount, item.OrderCount, 0),
							OrderCount_X: ([item.OrderCount, 0].join(' vs ')),
							CJCount: comm.show_vs_tag(comm.formatPercent(item.CJCount), item.CJCount, item.CJCount, 0),
							CJCount_X: ([item.CJCount, 0].join(' vs ')),
							CJPersonNum: comm.show_vs_tag(comm.formatPercent(item.CJPersonNum), item.CJPersonNum, item.CJPersonNum, 0),
							CJPersonNum_X: ([item.CJPersonNum, 0].join(' vs ')),
							CJrate: comm.show_vs_tag(item.CJrate, item.CJrate, item.CJrate, 0),
							CJrate_X: ([item.CJrate, 0].join(' vs ')),
							YJLY: comm.show_vs_tag(comm.formatPercent(item.YJLY), item.YJLY, item.YJLY, 0),
							YJLY_X: ([item.YJLY, 0].join(' vs ')),
							Ordervalue: comm.show_vs_tag(comm.formatPercent(item.Ordervalue), item.Ordervalue, item.Ordervalue, 0),
							Ordervalue_X: ([item.Ordervalue, 0].join(' vs ')),
						});
					}
				}
				// 数组2中不在数组1的类型
				for (const item2 of data.ordercount2) {
					has_same_type = false;
					for (const item of data.ordercount1) {
						if (item.OrderType === item2.OrderType) {
							has_same_type = true;
						}
					}
					if (has_same_type === false) {
						result.dataSource.push({
							key: item2.key,
							OrderType: item2.OrderType,
							OrderTypeSN: item2.OrderTypeSN,
							OrderCount: comm.show_vs_tag(comm.formatPercent(-item2.OrderCount), -item2.OrderCount, 0, item2.OrderCount),
							OrderCount_X: ([ 0, item2.OrderCount].join(' vs ')),
							CJCount: comm.show_vs_tag(comm.formatPercent(-item2.CJCount), -item2.CJCount, 0, item2.CJCount),
							CJCount_X: ([ 0, item2.CJCount].join(' vs ')),
							CJPersonNum: comm.show_vs_tag(comm.formatPercent(-item2.CJPersonNum), -item2.CJPersonNum, 0, item2.CJPersonNum),
							CJPersonNum_X: ([0, item2.CJPersonNum].join(' vs ')),
							CJrate: comm.show_vs_tag(-item2.CJrate, -item2.CJrate, 0, item2.CJrate),
							CJrate_X: ([ 0, item2.CJrate].join(' vs ')),
							YJLY: comm.show_vs_tag(comm.formatPercent(-item2.YJLY), -item2.YJLY, 0, item2.YJLY),
							YJLY_X: ([0, item2.YJLY].join(' vs ')),
							Ordervalue: comm.show_vs_tag(comm.formatPercent(-item2.Ordervalue), -item2.Ordervalue, 0, item2.Ordervalue),
							Ordervalue_X: ([ 0, item2.Ordervalue].join(' vs ')),
						});
					}
				}
			} else {
				result.columns = [
					{
						title: "#",
            fixed: 'left',
						children: [
							{
								title: (
									<span>
										<div>
											{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
										</div>
									</span>
								),
                titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)}`,
                fixed: 'left',
                dataIndex: "OrderType",
								render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>,
							},
						],
					},
					{
						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) => parseFloat(b.YJLY.replace(/,/g, "")) - parseFloat(a.YJLY.replace(/,/g, "")),
					},

					{
						title: "单个订单价值",
						children: [{ title: ordercountTotal1.Ordervalue, dataIndex: "Ordervalue" }],
						sorter: (a, b) => parseFloat(b.Ordervalue.replace(/,/g, "")) - parseFloat(a.Ordervalue.replace(/,/g, "")),
					},
				];
				result.dataSource = data.ordercount1;
			}
		}
		return result;
	}

	render() {
		const { orders_store, date_picker_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 avg_line_y = Math.round(orders_store.avgLine1);
		const pie_data = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount1; // 饼图的显示
		const pie_data2 = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount2;

		const config = {
			data: data_source,
			padding: "auto",
			xField: "xField",
			yField: "yField",
			seriesField: "seriesField",
			// xAxis: {
			// 	type: "timeCat",
			// },
			point: {
				size: 4,
				shape: "cicle",
			},
			annotations: [
				{
					type: "text",
					position: ["start", avg_line_y],
					content: avg_line_y,
					offsetX: -15,
					style: {
						fill: "#F4664A",
						textBaseline: "bottom",
					},
				},
				{
					type: "line",
					start: [-10, avg_line_y],
					end: ["max", avg_line_y],
					style: {
						stroke: "#F4664A",
						lineDash: [2, 2],
					},
				},
			],
			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: {
        customItems: (originalItems) => {
          // process originalItems,
          return originalItems.map(ele => ({...ele, name: ele.data?.seriesField || ele.data?.xField}));
        },
				title: (title, datum) => {
          let ret = title;
          switch (orders_store.lineChartXGroup) {
            case 'day':
              ret = `${title} ${comm.getWeek(datum.xField)}`; // 显示周几
              break;

            default:
              break;
          }
					return ret;
				},
			},
			// smooth: true,
		};
		const pie_config = {
			appendPadding: 10,
			data: [],
			angleField: "OrderCount",
			colorField: "OrderType",
			radius: 0.8,
			label: {
				type: "outer",
				content: "{name} {value} \n {percentage}",
			},
			legend: false, // 不显示图例
			interactions: [
				{
					type: "element-selected",
				},
				{
					type: "element-active",
				},
			],
		};

    const tableProps = {
      dataSource: table_data.dataSource,
      columns: table_data.columns,
      size: 'small',
      pagination: false,
      scroll: { x: (100*(table_data.columns.length)) },
      loading: orders_store.loading,
    };

    return (
      <div>
        <Row gutter={16} className={date_picker_store.siderBroken ? "" : "sticky-top"} >
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...date_picker_store.formValues,
                  ...orders_store.searchValues,
                },
                shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: false, mode: 'multiple' },
                  WebCode: { show_all: false, mode: 'multiple' },
                  years: { hide_vs: true },
                },
              }}
              onSubmit={(_err, obj, form, str) => {
                orders_store.setSearchValues(obj, form);
                orders_store.getOrderCount();
                orders_store.onChange_Tabs(orders_store.active_tab_key);
              }}
            />
          </Col>
        </Row>
        <Row gutter={[16, { sm: 16, lg: 32 }]}>
          <Col span={24} style={{ textAlign: 'right' }}>
            <DateGroupRadio
              visible={data_source.length !== 0}
              dataRaw={orders_store.orderCountDataRaw}
              onChange={orders_store.onChangeDateGroup}
              value={orders_store.lineChartXGroup}
              dataMapper={orders_store.orderCountDataMapper}
              fieldMapper={orders_store.orderCountDataFieldMapper}
            />
          </Col>
          <Col span={24}>
            <Spin spinning={orders_store.loading}>
              <Line {...config} />
            </Spin>
          </Col>

          <Col span={24}>
            <Tabs
              activeKey={orders_store.active_tab_key}
              onChange={(active_key) => orders_store.onChange_Tabs(active_key)}
              items={[
                {
                  key: 'Form',
                  label: (
                    <span>
                      <ContainerOutlined />
                      来源类型
                    </span>
                  ),
                },
                {
                  key: 'Product',
                  label: (
                    <span>
                      <CarryOutOutlined />
                      产品类型
                    </span>),
                },
                {
                  key: 'Country',
                  label: (
                    <span>
                      <SmileOutlined />
                      国籍
                    </span>
                  ),
                },
                {
                  key: 'line',
                  label: (
                    <span>
                      <TagsOutlined />
                      线路
                    </span>
                  ),
                },
                {
                  key: 'city',
                  label: (
                    <span>
                      <GlobalOutlined />
                      目的地
                    </span>
                  ),
                },
                {
                  key: 'LineClass',
                  label: (
                    <span>
                      <BlockOutlined />
                      页面类型
                    </span>
                  ),
                },
                {
                  key: 'GuestGroupType',
                  label: (
                    <span>
                      <FullscreenOutlined />
                      客群类别
                    </span>
                  ),
                },
                {
                  key: 'TravelMotivation',
                  label: (
                    <span>
                      <DingtalkOutlined />
                      出行动机
                    </span>
                  ),
                },
                {
                  key: 'ToB',
                  label: (
                    <span>
                      <ContactsOutlined />
                      客运类别
                    </span>
                  ),
                },
                {key: 'FoodRequirement',label: (<span><CoffeeOutlined />饮食要求</span>),},
                {key: 'hobbies',label: (<span><HeartOutlined/>兴趣爱好</span>),},
                {key: 'ages',label: (<span><IdcardOutlined/>年龄段</span>),},
              ].map((ele) => {
                return {
                  ...ele,
                  children: (
                    <>
                      <Table sticky id={`table_to_xlsx_${ele.key}`} {...tableProps} />
                      <Divider orientation="right" plain>
                        <TableExportBtn label={ele.key} {...{ columns: tableProps.columns, dataSource: tableProps.dataSource }} />
                      </Divider>
                    </>
                  ),
                };
              })}
            />
            <Row>
              <Col sm={24} lg={12}>
                <Pie {...pie_config} data={pie_data} />
              </Col>
              <Col sm={24} lg={12}>
                <Pie {...pie_config} data={pie_data2} />
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    );
	}
}

export default observer(Orders);