dashboard/src/views/Orders_sub.jsx

import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Select, Divider } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
import SiteSelect from "../charts/SiteSelect";
import GroupSelect from "../charts/GroupSelect";
import DataTypeSelect from "../charts/DataTypeSelect";
import { NavLink, useParams } from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import { utils, writeFileXLSX } from "xlsx";

const Orders_sub = () => {
	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, orders_store.active_tab_key_sub);
	}, []);

	const data_source = orders_store.orderCountData_type;
	const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; //平均值，显示一条平均线
	const line = {
		data: data_source,
		padding: "auto",
		xField: "xField",
		yField: "yField",
		seriesField: "seriesField",
		xAxis: {
			type: "timeCat",
		},
		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],
				},
			},
		],
		tooltip: {
			title: (title, datum) => {
				return title + " " + comm.getWeek(datum.xField); //显示周几
			},
		},
		label: {}, //显示标签
		legend: {
			title: {
				text: ordertype_title,
			},
			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,
	};

	const format_data = data => {
		let result = { dataSource: [], columns: [] };
		if (!comm.empty(data)) {
			result.columns = [
				{
					title: "页面",
					children: [
						{
							title: "",
							dataIndex: "request_uri",
						},
					],
				},
				{
					title: "访问量",
					children: [
						{
							title: data.reduce((a, b) => a + b.viewCount, 0),
							dataIndex: "viewCount",
						},
					],
				},
			];
			result.dataSource = data;
		}
		return result;
	};

	const format_data_detail = data => {
		let result = { dataSource: [], columns: [] };
		if (!comm.empty(data)) {
			result.columns = [
				{
					title: "订单号",
					dataIndex: "COLI_ID",
					key: "COLI_ID",
				},
				{
					title: "网站",
					dataIndex: "COLI_WebCode",
					key: "COLI_WebCode",
				},
				{
					title: "成行",
					dataIndex: "COLI_Success",
					key: "COLI_Success",
					render: (text, record) => <span>{text == 1 ? "是" : "否"}</span>,
					sorter: (a, b) => b.COLI_Success - a.COLI_Success,
				},
				// {
				// 	title: "人数(成/童/婴)",
				// 	dataIndex: "COLI_PersonNum",
				// 	key: "COLI_PersonNum",
				// 	render: (text, record) => (
				// 		<span>
				// 			{record.COLI_PersonNum}/{record.COLI_ChildNum}/{record.COLI_BabyNum}
				// 		</span>
				// 	),
				// },
				{
					title: "预计利润",
					dataIndex: "CGI_YJLY",
					key: "CGI_YJLY",
				},
				{
					title: "预定时间",
					dataIndex: "COLI_ApplyDate",
					key: "COLI_ApplyDate",
				},
				{
					title: "出发日期",
					dataIndex: "COLI_OrderStartDate",
					key: "COLI_OrderStartDate",
				},
				{
					title: "客人需求",
					dataIndex: "COLI_CustomerRequest",
					key: "COLI_CustomerRequest",
					ellipsis: true,
				},
				{
					title: "订单内容",
					dataIndex: "COLI_OrderDetailText",
					key: "COLI_OrderDetailText",
					ellipsis: true,
				},
				Table.EXPAND_COLUMN,
			];
			result.dataSource = data;
		}
		return result;
	};

	const table_data = format_data_detail(orders_store.orderCountData_Form_sub.ordercount1);
	const table_data2 = format_data_detail(orders_store.orderCountData_Form_sub.ordercount2);
	const table_data_p = format_data(orders_store.orderCountData_Form_sub.ordercount1);
	const table_data2_p = format_data(orders_store.orderCountData_Form_sub.ordercount2);

	return (
		<div>
			<Row gutter={{ sm: 16, lg: 32 }}>
				<Col md={24} lg={12} xxl={14}>
					<NavLink to={`/orders`}>返回</NavLink>
				</Col>
				<Col md={24} lg={12} xxl={10}>
					<Row>
						<Col md={24} lg={8} xxl={8}>
							<GroupSelect store={orders_store} />
						</Col>
						<Col md={24} lg={8} xxl={8}>
							<SiteSelect store={orders_store} show_all={true} />
						</Col>
						<Col md={24} lg={8} xxl={8}>
							<Select style={{ width: "100%" }} placeholder="是否含门票" value={orders_store.include_tickets} onChange={orders_store.handleChange_include_tickets}>
								<Select.Option key="1" value="1">
									含门票
								</Select.Option>
								<Select.Option key="0" value="0">
									不含门票
								</Select.Option>
							</Select>
						</Col>
					</Row>
					<Row>
						<Col md={24} lg={8} xxl={8}>
							<DataTypeSelect store={orders_store} />
						</Col>
						<Col md={24} lg={12} xxl={12}>
							<DatePickerCharts />
						</Col>
						<Col md={24} lg={4} xxl={4} className="align_right">
							<Button
								type="primary"
								icon={<SearchOutlined />}
								loading={orders_store.loading}
								onClick={() => {
									orders_store.getOrderCount_type(ordertype, ordertype_sub);
									orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
								}}>
								统计
							</Button>
						</Col>
					</Row>
				</Col>
			</Row>

			<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
				<Col className="gutter-row" span={24}>
					<Line {...line} />
				</Col>

				<Col className="gutter-row" span={24}>
					<Tabs activeKey={orders_store.active_tab_key_sub} onChange={active_key => orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key)}>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									订单内容
								</span>
							}
							key="detail">
							<Row>
								<Col span={24}>
									{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
									<Table
										id="table_to_xlsx_form"
										dataSource={table_data.dataSource}
										columns={table_data.columns}
										size="small"
										pagination={false}
										rowKey={record => record.key}
										expandable={{
											expandedRowRender: record => (
												<pre>
													<Divider orientation="left" plain>
														客户需求
													</Divider>
													{record.COLI_CustomerRequest}
													<Divider orientation="left" plain>
														订单内容
													</Divider>
													{record.COLI_OrderDetailText}
												</pre>
											),
										}}
									/>
									<Divider orientation="right" plain>
										<a
											onClick={() => {
												const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]);
												writeFileXLSX(wb, "订单列表.xlsx");
											}}>
											导出excel
										</a>
									</Divider>
								</Col>

								<Col span={24}>
									{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
									<Table
										dataSource={table_data2.dataSource}
										columns={table_data2.columns}
										size="small"
										rowKey={record => record.key}
										expandable={{
											expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
										}}
									/>
								</Col>
							</Row>
						</Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									访问路径
								</span>
							}
							key="page">
							<Row>
								<Col span={24}>
									{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
									<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" />
								</Col>

								<Col span={24}>
									{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
									<Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" />
								</Col>
							</Row>
						</Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									访问路径（成行）
								</span>
							}
							key="page_cxstate1">
							<Row>
								<Col span={24}>
									{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
									<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" />
								</Col>

								<Col span={24}>
									{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
									<Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" />
								</Col>
							</Row>
						</Tabs.TabPane>
					</Tabs>
				</Col>
			</Row>
		</div>
	);
};
export default observer(Orders_sub);