GHHub/src/views/report/Index.jsx

import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Divider, Typography, List, Descriptions, DatePicker, Card } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
import * as comm from "@/utils/commons";
import dayjs from "dayjs";
import { usePDF } from "react-to-pdf";

const { Title } = Typography;

function Index() {
	const { reportStore, authStore } = useStore();
	const { search_date_start, search_date_end, vendorScoresData, productScoresData, commendScoresData } = reportStore;
	const evaluationScores = vendorScoresData.EvaluationScores ? vendorScoresData.EvaluationScores[0] : [];
	useEffect(() => {}, []);

	const columns_month = [
		{
			title: "Date",
			dataIndex: "VMonth",
			key: "VMonth",
		},
		{
			title: "Groups",
			dataIndex: "GroupsNum",
			key: "GroupsNum",
		},
		{
			title: "Number of People",
			dataIndex: "PersonNum",
			key: "PersonNum",
		},
		{
			title: "Transaction Amount（USD)",
			dataIndex: "AmountUSD",
			key: "AmountUSD",
		},
		{
			title: "Evaluation Score",
			dataIndex: "EvaluationScore",
			key: "EvaluationScore",
		},
		{
			title: "TP Reviews",
			dataIndex: "TPReviews",
			key: "TPReviews",
		},
		{
			title: "TP Reviews Rate",
			dataIndex: "TPReviewRate",
			key: "TPReviewRate",
		},
		{
			title: "Complaints",
			dataIndex: "Complaints",
			key: "Complaints",
		},
		{
			title: "Complaint Rate",
			dataIndex: "ComplaintRate",
			key: "ComplaintRate",
		},
	];

	const columns_dmc = [
		{
			title: "Category",
			dataIndex: "Category",
			key: "Category",
			onCell: (_, index) => {
				if (index === 0) {
					return {
						rowSpan: 3,
						//colSpan:0,
					};
				}
				if (index >= 1 && index <= 2) {
					return {
						rowSpan: 0,
						colSpan: 0,
					};
				}
			},
		},
		{
			title: "Item",
			dataIndex: "Item",
			key: "Item",
		},
		{
			title: "Your Scores",
			dataIndex: "Your Scores",
			key: "Your Scores",
		},
		{
			title: "Final Scores",
			dataIndex: "Final Scores",
			key: "Final Scores",
			onCell: (_, index) => {
				if (index === 0) {
					return {
						rowSpan: 5, //合并五行
						//colSpan: 5,
					};
				} else {
					return {
						rowSpan: 0, //不显示其他数据
						colSpan: 0,
					};
				}
			},
		},
	];

	const columns_guide = [
		{
			title: "导游",
			dataIndex: "TGI2_Name",
			key: "TGI2_Name",
		},
		{
			title: "平均分",
			dataIndex: "VAverage",
			key: "VAverage",
		},
		{
			title: "接团数",
			dataIndex: "ReceptionGroups",
			key: "ReceptionGroups",
		},
		{
			title: "表扬数",
			dataIndex: "CommendNum",
			key: "CommendNum",
		},
		{
			title: "表扬率",
			dataIndex: "CommendRate",
			key: "CommendRate",
		},
		{
			title: "投诉数",
			dataIndex: "Complaints",
			key: "Complaints",
		},
		{
			title: "投诉率",
			dataIndex: "ComplaintRate",
			key: "ComplaintRate",
		},
	];

	const columns_commend = [
		{
			title: "团号",
			dataIndex: "GRI_NO",
			key: "GRI_NO",
		},
		{
			title: "对象",
			dataIndex: "ObjectName",
			key: "ObjectName",
		},
		{
			title: "客人评论",
			dataIndex: "ECI_Content",
			key: "ECI_Content",
		},
	];

	const dataSource_dmc = [
		{
			key: "1",
			Category: "Category1",
			Item: "Item1",
			"Your Scores": "Your Scores1",
			"Final Scores": "Final Scores1",
		},
		{
			key: "2",
			Category: "Category2",
			Item: "Item2",
			"Your Scores": "Your Scores2",
			"Final Scores": "Final Scores2",
		},
		{
			key: "3",
			Category: "Category3",
			Item: "Item3",
			"Your Scores": "Your Scores3",
			"Final Scores": "Final Scores3",
		},
		{
			key: "4",
			Category: "Category4",
			Item: "Item4",
			"Your Scores": "Your Scores4",
			"Final Scores": "Final Scores4",
		},
		{
			key: "5",
			Category: "Category5",
			Item: "Item5",
			"Your Scores": "Your Scores5",
			"Final Scores": "Final Scores5",
		},
	];

	const { toPDF, targetRef } = usePDF({
		method: "save",
		filename: "GHH-Report.pdf",
		page: { margin: "3", format: "letter" }, //margin: Margin.SMALL,
		canvas: { mimeType: "image/jpeg", qualityRatio: 1 },
		overrides: { pdf: { compress: true }, canvas: { useCORS: true } },
	});

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Title level={3}>
				<div></div>
			</Title>
			<Row gutter={16}>
				<Col md={24} lg={8} xxl={6}>
					<Space direction="horizontal">
						Select Date
						<DatePicker.RangePicker
							format={config.DATE_FORMAT_MONTH}
							allowClear={true}
							style={{ width: "100%" }}
							defaultValue={[search_date_start, search_date_end]}
							onChange={reportStore.onDateRangeChange}
							allowEmpty={true}
							picker="month"
						/>
					</Space>
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button
						type="primary"
						loading={reportStore.loading}
						onClick={() => {
							reportStore.getHWVendorScores(
								authStore.login.travelAgencyId,
								search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
								search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT)
							);
							reportStore.getHWProductScores(
								authStore.login.travelAgencyId,
								search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
								search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT)
							);
							reportStore.getHWCommendScores(
								authStore.login.travelAgencyId,
								search_date_start == null ? null : search_date_start.format(config.DATE_FORMAT),
								search_date_end == null ? null : search_date_end.format(config.DATE_FORMAT)
							);
						}}>
						Get Report
					</Button>
				</Col>
				<Col md={24} lg={10} xxl={11}>
					<Button onClick={() => toPDF()}>Download PDF</Button>
				</Col>
			</Row>
			<Title level={3}></Title>

			<Row ref={targetRef}>
				<Col md={24} lg={13} xxl={13}>
					<Descriptions title="Primary Data" layout="vertical" bordered column={8}>
						<Descriptions.Item label="Groups">{evaluationScores.Groups}</Descriptions.Item>
						<Descriptions.Item label="Number of People">{evaluationScores.PersonNum}</Descriptions.Item>
						<Descriptions.Item label="Transaction Amount（USD)">{evaluationScores.AmountUSD}</Descriptions.Item>
						<Descriptions.Item label="Evaluation Score">{evaluationScores.EvaluationScore}</Descriptions.Item>
						<Descriptions.Item label="TP Reviews">{evaluationScores.TPReviews}</Descriptions.Item>
						<Descriptions.Item label="TP Reviews Rate">{evaluationScores.TPReviewRate}</Descriptions.Item>
						<Descriptions.Item label="Complaints">{evaluationScores.Complaints}</Descriptions.Item>
						<Descriptions.Item label="Complaint Rate">{evaluationScores.ComplaintRate}</Descriptions.Item>
					</Descriptions>
				</Col>

				<Col md={24} lg={13} xxl={13}>
					<Divider orientation="left">Monthly Data</Divider>
					<Table dataSource={vendorScoresData.MonthlyData} columns={columns_month} pagination={false} bordered />
				</Col>

				<Col md={24} lg={13} xxl={13}>
					<Divider orientation="center">
						地接考核分数 Final Scores:
						<Typography.Title level={3} type="danger">
							{evaluationScores.FinalScores}
						</Typography.Title>
					</Divider>
					<div class="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ant-spin-container">
						<div class="ant-table ant-table-bordered">
							<div class="ant-table-container ant-table-content">
								<table style={{ textAlign: "center" }}>
									<thead class="ant-table-thead">
										<tr>
											<th class="ant-table-cell" scope="col">
												Customer Satisfaction
											</th>
											<th class="ant-table-cell" scope="col">
												3 scores
											</th>
											<th class="ant-table-cell" scope="col">
												4 scores
											</th>
											<th class="ant-table-cell" scope="col">
												5 scores
											</th>
											<th class="ant-table-cell" scope="col">
												Your Scores
											</th>
											<th class="ant-table-cell" scope="col">
												Final Scores
											</th>
											<th class="ant-table-cell" scope="col">
												备注
											</th>
										</tr>
									</thead>
									<tbody class="ant-table-tbody">
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">TP review rating</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">30%</td>
											<td class="ant-table-cell">60%</td>
											<td class="ant-table-cell">{evaluationScores.TPReviewRating}</td>
											<td class="ant-table-cell" rowspan="5">
												{evaluationScores.AvgCusSatisfaction}
											</td>
											<td class="ant-table-cell">{evaluationScores.TPReviewRatingText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Post tour complaints</td>
											<td class="ant-table-cell">1</td>
											<td class="ant-table-cell">0</td>
											<td class="ant-table-cell">0</td>
											<td class="ant-table-cell">{evaluationScores.PostTourComplaints}</td>
											<td class="ant-table-cell">{evaluationScores.PostTourComplaintsText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Complaints resolved during the tour</td>
											<td class="ant-table-cell" colspan="3">
												3
											</td>
											<td class="ant-table-cell">{evaluationScores.ComplaintsDuringTour}</td>
											<td class="ant-table-cell">{evaluationScores.ComplaintsDuringTourText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Customer photos</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">30%</td>
											<td class="ant-table-cell">50%</td>
											<td class="ant-table-cell">{evaluationScores.CustomerPhotoRate}</td>
											<td class="ant-table-cell">{evaluationScores.CustomerPhotoRateText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Evaluation scores</td>
											<td class="ant-table-cell" colspan="3">
												4.5
											</td>
											<td class="ant-table-cell">{evaluationScores.EvaluationFormScore}</td>
											<td class="ant-table-cell">{evaluationScores.EvaluationFormScoreText}</td>
										</tr>
									</tbody>
								</table>
								<br />
								<table style={{ textAlign: "center" }}>
									<thead class="ant-table-thead">
										<tr>
											<th class="ant-table-cell" scope="col">
												Operator Support & Local resources
											</th>
											<th class="ant-table-cell" scope="col">
												3 scores
											</th>
											<th class="ant-table-cell" scope="col">
												4 scores
											</th>
											<th class="ant-table-cell" scope="col">
												5 scores
											</th>
											<th class="ant-table-cell" scope="col">
												Your Scores
											</th>
											<th class="ant-table-cell" scope="col">
												Final Scores
											</th>
											<th class="ant-table-cell" scope="col">
												备注
											</th>
										</tr>
									</thead>
									<tbody class="ant-table-tbody">
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Response efficiency</td>
											<td class="ant-table-cell">1d</td>
											<td class="ant-table-cell">6hrs</td>
											<td class="ant-table-cell">3hrs</td>
											<td class="ant-table-cell">{evaluationScores.ResponseEfficiency}</td>
											<td class="ant-table-cell" rowspan="6">
												{evaluationScores.AvgLocalResources}
											</td>
											<td class="ant-table-cell">{evaluationScores.ResponseEfficiencyText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Provide suggestions and alternatives</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">{evaluationScores.ProvideSuggestions}</td>
											<td class="ant-table-cell">{evaluationScores.ProvideSuggestionsText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Provide local tourism information</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">{evaluationScores.ProvideLocalInfo}</td>
											<td class="ant-table-cell">{evaluationScores.ProvideLocalInfoText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Assist in developing exclusive products</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">{evaluationScores.ExclusiveProducts}</td>
											<td class="ant-table-cell">{evaluationScores.ExclusiveProductsText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Dedicated tour guide team for AH</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">{evaluationScores.DedicatedTourGuide}</td>
											<td class="ant-table-cell">{evaluationScores.DedicatedTourGuideText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Partner hotels with contracted rate</td>
											<td class="ant-table-cell">\</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">√</td>
											<td class="ant-table-cell">{evaluationScores.PartnerHotels}</td>
											<td class="ant-table-cell">{evaluationScores.PartnerHotelsText}</td>
										</tr>
									</tbody>
								</table>
								<br />
								<table style={{ textAlign: "center" }}>
									<thead class="ant-table-thead">
										<tr>
											<th class="ant-table-cell" scope="col">
												Pricing & Settlement （20%）
											</th>
											<th class="ant-table-cell" scope="col">
												3 scores
											</th>
											<th class="ant-table-cell" scope="col">
												4 scores
											</th>
											<th class="ant-table-cell" scope="col">
												5 scores
											</th>
											<th class="ant-table-cell" scope="col">
												Your Scores
											</th>
											<th class="ant-table-cell" scope="col">
												Final Scores
											</th>
											<th class="ant-table-cell" scope="col">
												备注
											</th>
										</tr>
									</thead>
									<tbody class="ant-table-tbody">
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Quotation</td>
											<td class="ant-table-cell">Package</td>
											<td class="ant-table-cell">Day tours</td>
											<td class="ant-table-cell">Individual services</td>
											<td class="ant-table-cell">{evaluationScores.Quotation}</td>
											<td class="ant-table-cell" rowspan="3">
												{evaluationScores.AvgPricingAndSettlement}
											</td>
											<td class="ant-table-cell">{evaluationScores.QuotationText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Settlement</td>
											<td class="ant-table-cell">Prepayment</td>
											<td class="ant-table-cell">Monthly Prepayment</td>
											<td class="ant-table-cell">Monthly settlement after the tours</td>
											<td class="ant-table-cell">{evaluationScores.Settlement}</td>
											<td class="ant-table-cell">{evaluationScores.SettlementText}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">Cancellation policy</td>
											<td class="ant-table-cell">30 days</td>
											<td class="ant-table-cell">21 days</td>
											<td class="ant-table-cell">1 day</td>
											<td class="ant-table-cell">{evaluationScores.CancellationPolicy}</td>
											<td class="ant-table-cell">{evaluationScores.CancellationPolicyText}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<br />
					<List header={<div>Scoring Rules</div>} bordered>
						<List.Item>1. The maximum score is 5</List.Item>
						<List.Item>
							2. The three categories are:
							<List>
								<List.Item>1). Customer satisfaction (40%)</List.Item>
								<List.Item>2). Operator support & local resources (40%) </List.Item>
								<List.Item>3). Pricing & settlement (20%)</List.Item>
							</List>
						</List.Item>
						<List.Item>3. For each category, you can only get the corresponding score if you meet the standards of all items under the score.</List.Item>
						<List.Item>4. The final score is the sum of the scores of each category multiplied by the proportion of the category.</List.Item>
					</List>
					<br />
					<Divider orientation="left">反馈表分析</Divider>
					<div class="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ant-spin-container">
						<div class="ant-table ant-table-bordered">
							<div class="ant-table-container ant-table-content">
								<table style={{ textAlign: "center" }}>
									<thead class="ant-table-thead">
										<tr>
											<th class="ant-table-cell" scope="col">
												项目
											</th>
											<th class="ant-table-cell" scope="col">
												产品
											</th>
											<th class="ant-table-cell" scope="col">
												得分
											</th>
											<th class="ant-table-cell" scope="col">
												备注说明
											</th>
										</tr>
									</thead>
									<tbody class="ant-table-tbody">
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell" rowspan="4">
												地接接待
											</td>
											<td class="ant-table-cell">导游</td>
											<td class="ant-table-cell">{evaluationScores.FRTGuide}</td>
											<td class="ant-table-cell" rowspan="7">
												{evaluationScores.FRTText}
											</td>
										</tr>

										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">司机+车</td>
											<td class="ant-table-cell">{evaluationScores.FRTGriver}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">餐</td>
											<td class="ant-table-cell">{evaluationScores.FRTMeal}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">产品体验</td>
											<td class="ant-table-cell">{evaluationScores.FRTProduct}</td>
										</tr>

										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell" rowspan="3">
												线路安排
											</td>
											<td class="ant-table-cell">酒店</td>
											<td class="ant-table-cell">{evaluationScores.FRTHotel}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">游船</td>
											<td class="ant-table-cell">{evaluationScores.FRTCruise}</td>
										</tr>
										<tr class="ant-table-row ant-table-row-level-0">
											<td class="ant-table-cell">顾问服务</td>
											<td class="ant-table-cell">{evaluationScores.FRTAdvisor}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</Col>
				<Col md={24} lg={13} xxl={13}>
					<Divider orientation="left">导游接待情况</Divider>
					<Table dataSource={productScoresData.GuideScores} columns={columns_guide} pagination={false} bordered />

					<Divider orientation="left">表扬情况</Divider>
					<Table dataSource={commendScoresData.CommendScores} columns={columns_commend} pagination={false} bordered />

					<Divider orientation="left">投诉情况</Divider>
					<Table dataSource={commendScoresData.ComplaintScores} columns={columns_commend} pagination={false} bordered />

					<Divider orientation="left">批评建议</Divider>
					<Table dataSource={commendScoresData.CriticizeScores} columns={columns_commend} pagination={false} bordered />
				</Col>
			</Row>
		</Space>
	);
}

export default observer(Index);