Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

表格添加边框

Browse Source
release
YCC 2 years ago
parent 74e169a166
commit 52cd2728a6
1 changed files with 249 additions and 324 deletions
Show Stats Download Patch File Download Diff File

401
src/views/report/Index.jsx
Unescape Escape View File

@ -125,9 +125,7 @@ function Index() {
return ( return (
<Space direction="vertical" style={{ width: "100%" }}> <Space direction="vertical" style={{ width: "100%" }}>
<Typography.Title level={3}> <Typography.Title level={3}></Typography.Title>
<div></div>
</Typography.Title>
<Row gutter={16}> <Row gutter={16}>
<Col md={24} lg={8} xxl={6}> <Col md={24} lg={8} xxl={6}>
<Space direction="horizontal"> <Space direction="horizontal">
@ -175,54 +173,41 @@ function Index() {
<Row ref={targetRef}> <Row ref={targetRef}>
<Col md={24} lg={24} xxl={16}> <Col md={24} lg={24} xxl={16}>
<div className="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ant-spin-container"> <Divider orientation="left">Primary Data</Divider>
<div className="ant-table ant-table-bordered"> <div className="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ">
<div className="ant-table-container ant-table-content"> <div className="ant-spin-container ant-table ant-table-bordered">
<div className="ant-table-container">
<div className="ant-table-content">
<table style={{ textAlign: "center" }}> <table style={{ textAlign: "center" }}>
<thead className="ant-table-thead"> <thead className="ant-table-thead">
<tr> <tr>
<th className="ant-table-cell" scope="col"> <th scope="col">Groups</th>
Groups <th scope="col">Number of People</th>
</th> <th scope="col">Transaction Amount（USD)</th>
<th className="ant-table-cell" scope="col"> <th scope="col">Evaluation Score</th>
Number of People <th scope="col">TP Reviews</th>
</th> <th scope="col">TP Reviews Rate</th>
<th className="ant-table-cell" scope="col"> <th scope="col">Complaints</th>
Transaction Amount（USD) <th scope="col">Complaint Rate</th>
</th>
<th className="ant-table-cell" scope="col">
Evaluation Score
</th>
<th className="ant-table-cell" scope="col">
TP Reviews
</th>
<th className="ant-table-cell" scope="col">
TP Reviews Rate
</th>
<th className="ant-table-cell" scope="col">
Complaints
</th>
<th className="ant-table-cell" scope="col">
Complaint Rate
</th>
</tr> </tr>
</thead> </thead>
<tbody className="ant-table-tbody"> <tbody className="ant-table-tbody">
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">{evaluationScores.Groups}</td> <td>{evaluationScores.Groups}</td>
<td className="ant-table-cell">{evaluationScores.PersonNum}</td> <td>{evaluationScores.PersonNum}</td>
<td className="ant-table-cell">{evaluationScores.AmountUSD}</td> <td>{evaluationScores.AmountUSD}</td>
<td className="ant-table-cell">{evaluationScores.EvaluationScore}</td> <td>{evaluationScores.EvaluationScore}</td>
<td className="ant-table-cell">{evaluationScores.TPReviews}</td> <td>{evaluationScores.TPReviews}</td>
<td className="ant-table-cell">{evaluationScores.TPReviewRate}</td> <td>{evaluationScores.TPReviewRate}</td>
<td className="ant-table-cell">{evaluationScores.Complaints}</td> <td>{evaluationScores.Complaints}</td>
<td className="ant-table-cell">{evaluationScores.ComplaintRate}</td> <td>{evaluationScores.ComplaintRate}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div>
</Col> </Col>
<Col md={24} lg={24} xxl={16}> <Col md={24} lg={24} xxl={16}>
@ -231,84 +216,65 @@ function Index() {
</Col> </Col>
<Col md={24} lg={24} xxl={16}> <Col md={24} lg={24} xxl={16}>
<Divider orientation="center"> <Divider orientation="left">
地接考核分数 Final Scores: 地接考核分数 Final Scores:
<Typography.Title level={3} type="danger"> <Typography.Title level={3} type="danger">
{evaluationScores.FinalScores} {evaluationScores.FinalScores}
</Typography.Title> </Typography.Title>
</Divider> </Divider>
<div className="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ant-spin-container"> <div className="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ">
<div className="ant-table ant-table-bordered"> <div className="ant-spin-container ant-table ant-table-bordered">
<div className="ant-table-container ant-table-content"> <div className="ant-table-container">
<div className="ant-table-content">
<table style={{ textAlign: "center" }}> <table style={{ textAlign: "center" }}>
<thead className="ant-table-thead"> <thead className="ant-table-thead">
<tr> <tr>
<th className="ant-table-cell" scope="col"> <th scope="col">Customer Satisfaction</th>
Customer Satisfaction <th scope="col">3 scores</th>
</th> <th scope="col">4 scores</th>
<th className="ant-table-cell" scope="col"> <th scope="col">5 scores</th>
3 scores <th scope="col">Your Scores</th>
</th> <th scope="col">Final Scores</th>
<th className="ant-table-cell" scope="col"> <th scope="col">备注</th>
4 scores
</th>
<th className="ant-table-cell" scope="col">
5 scores
</th>
<th className="ant-table-cell" scope="col">
Your Scores
</th>
<th className="ant-table-cell" scope="col">
Final Scores
</th>
<th className="ant-table-cell" scope="col">
备注
</th>
</tr> </tr>
</thead> </thead>
<tbody className="ant-table-tbody"> <tbody className="ant-table-tbody">
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">TP review rating</td> <td>TP review rating</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">30%</td> <td>30%</td>
<td className="ant-table-cell">60%</td> <td>60%</td>
<td className="ant-table-cell">{evaluationScores.TPReviewRating}</td> <td>{evaluationScores.TPReviewRating}</td>
<td className="ant-table-cell" rowSpan="5"> <td rowSpan="5">{evaluationScores.AvgCusSatisfaction}</td>
{evaluationScores.AvgCusSatisfaction} <td>{evaluationScores.TPReviewRatingText}</td>
</td>
<td className="ant-table-cell">{evaluationScores.TPReviewRatingText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Post tour complaints</td> <td>Post tour complaints</td>
<td className="ant-table-cell">1</td> <td>1</td>
<td className="ant-table-cell">0</td> <td>0</td>
<td className="ant-table-cell">0</td> <td>0</td>
<td className="ant-table-cell">{evaluationScores.PostTourComplaints}</td> <td>{evaluationScores.PostTourComplaints}</td>
<td className="ant-table-cell">{evaluationScores.PostTourComplaintsText}</td> <td>{evaluationScores.PostTourComplaintsText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Complaints resolved during the tour</td> <td>Complaints resolved during the tour</td>
<td className="ant-table-cell" colSpan={3}> <td colSpan={3}>3</td>
3 <td>{evaluationScores.ComplaintsDuringTour}</td>
</td> <td>{evaluationScores.ComplaintsDuringTourText}</td>
<td className="ant-table-cell">{evaluationScores.ComplaintsDuringTour}</td>
<td className="ant-table-cell">{evaluationScores.ComplaintsDuringTourText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Customer photos</td> <td>Customer photos</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">30%</td> <td>30%</td>
<td className="ant-table-cell">50%</td> <td>50%</td>
<td className="ant-table-cell">{evaluationScores.CustomerPhotoRate}</td> <td>{evaluationScores.CustomerPhotoRate}</td>
<td className="ant-table-cell">{evaluationScores.CustomerPhotoRateText}</td> <td>{evaluationScores.CustomerPhotoRateText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Evaluation scores</td> <td>Evaluation scores</td>
<td className="ant-table-cell" colSpan={3}> <td colSpan={3}>4.5</td>
4.5 <td>{evaluationScores.EvaluationFormScore}</td>
</td> <td>{evaluationScores.EvaluationFormScoreText}</td>
<td className="ant-table-cell">{evaluationScores.EvaluationFormScore}</td>
<td className="ant-table-cell">{evaluationScores.EvaluationFormScoreText}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -316,80 +282,64 @@ function Index() {
<table style={{ textAlign: "center" }}> <table style={{ textAlign: "center" }}>
<thead className="ant-table-thead"> <thead className="ant-table-thead">
<tr> <tr>
<th className="ant-table-cell" scope="col"> <th scope="col">Operator Support & Local resources</th>
Operator Support & Local resources <th scope="col">3 scores</th>
</th> <th scope="col">4 scores</th>
<th className="ant-table-cell" scope="col"> <th scope="col">5 scores</th>
3 scores <th scope="col">Your Scores</th>
</th> <th scope="col">Final Scores</th>
<th className="ant-table-cell" scope="col"> <th scope="col">备注</th>
4 scores
</th>
<th className="ant-table-cell" scope="col">
5 scores
</th>
<th className="ant-table-cell" scope="col">
Your Scores
</th>
<th className="ant-table-cell" scope="col">
Final Scores
</th>
<th className="ant-table-cell" scope="col">
备注
</th>
</tr> </tr>
</thead> </thead>
<tbody className="ant-table-tbody"> <tbody className="ant-table-tbody">
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Response efficiency</td> <td>Response efficiency</td>
<td className="ant-table-cell">1d</td> <td>1d</td>
<td className="ant-table-cell">6hrs</td> <td>6hrs</td>
<td className="ant-table-cell">3hrs</td> <td>3hrs</td>
<td className="ant-table-cell">{evaluationScores.ResponseEfficiency}</td> <td>{evaluationScores.ResponseEfficiency}</td>
<td className="ant-table-cell" rowSpan="6"> <td rowSpan="6">{evaluationScores.AvgLocalResources}</td>
{evaluationScores.AvgLocalResources} <td>{evaluationScores.ResponseEfficiencyText}</td>
</td>
<td className="ant-table-cell">{evaluationScores.ResponseEfficiencyText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Provide suggestions and alternatives</td> <td>Provide suggestions and alternatives</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">{evaluationScores.ProvideSuggestions}</td> <td>{evaluationScores.ProvideSuggestions}</td>
<td className="ant-table-cell">{evaluationScores.ProvideSuggestionsText}</td> <td>{evaluationScores.ProvideSuggestionsText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Provide local tourism information</td> <td>Provide local tourism information</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">{evaluationScores.ProvideLocalInfo}</td> <td>{evaluationScores.ProvideLocalInfo}</td>
<td className="ant-table-cell">{evaluationScores.ProvideLocalInfoText}</td> <td>{evaluationScores.ProvideLocalInfoText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Assist in developing exclusive products</td> <td>Assist in developing exclusive products</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">{evaluationScores.ExclusiveProducts}</td> <td>{evaluationScores.ExclusiveProducts}</td>
<td className="ant-table-cell">{evaluationScores.ExclusiveProductsText}</td> <td>{evaluationScores.ExclusiveProductsText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Dedicated tour guide team for AH</td> <td>Dedicated tour guide team for AH</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">{evaluationScores.DedicatedTourGuide}</td> <td>{evaluationScores.DedicatedTourGuide}</td>
<td className="ant-table-cell">{evaluationScores.DedicatedTourGuideText}</td> <td>{evaluationScores.DedicatedTourGuideText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Partner hotels with contracted rate</td> <td>Partner hotels with contracted rate</td>
<td className="ant-table-cell">\</td> <td>\</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">√</td> <td>√</td>
<td className="ant-table-cell">{evaluationScores.PartnerHotels}</td> <td>{evaluationScores.PartnerHotels}</td>
<td className="ant-table-cell">{evaluationScores.PartnerHotelsText}</td> <td>{evaluationScores.PartnerHotelsText}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -397,66 +347,53 @@ function Index() {
<table style={{ textAlign: "center" }}> <table style={{ textAlign: "center" }}>
<thead className="ant-table-thead"> <thead className="ant-table-thead">
<tr> <tr>
<th className="ant-table-cell" scope="col"> <th scope="col">Pricing & Settlement （20%）</th>
Pricing & Settlement （20%） <th scope="col">3 scores</th>
</th> <th scope="col">4 scores</th>
<th className="ant-table-cell" scope="col"> <th scope="col">5 scores</th>
3 scores <th scope="col">Your Scores</th>
</th> <th scope="col">Final Scores</th>
<th className="ant-table-cell" scope="col"> <th scope="col">备注</th>
4 scores
</th>
<th className="ant-table-cell" scope="col">
5 scores
</th>
<th className="ant-table-cell" scope="col">
Your Scores
</th>
<th className="ant-table-cell" scope="col">
Final Scores
</th>
<th className="ant-table-cell" scope="col">
备注
</th>
</tr> </tr>
</thead> </thead>
<tbody className="ant-table-tbody"> <tbody className="ant-table-tbody">
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Quotation</td> <td>Quotation</td>
<td className="ant-table-cell">Package</td> <td>Package</td>
<td className="ant-table-cell">Day tours</td> <td>Day tours</td>
<td className="ant-table-cell">Individual services</td> <td>Individual services</td>
<td className="ant-table-cell">{evaluationScores.Quotation}</td> <td>{evaluationScores.Quotation}</td>
<td className="ant-table-cell" rowSpan="3"> <td rowSpan="3">{evaluationScores.AvgPricingAndSettlement}</td>
{evaluationScores.AvgPricingAndSettlement} <td>{evaluationScores.QuotationText}</td>
</td>
<td className="ant-table-cell">{evaluationScores.QuotationText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Settlement</td> <td>Settlement</td>
<td className="ant-table-cell">Prepayment</td> <td>Prepayment</td>
<td className="ant-table-cell">Monthly Prepayment</td> <td>Monthly Prepayment</td>
<td className="ant-table-cell">Monthly settlement after the tours</td> <td>Monthly settlement after the tours</td>
<td className="ant-table-cell">{evaluationScores.Settlement}</td> <td>{evaluationScores.Settlement}</td>
<td className="ant-table-cell">{evaluationScores.SettlementText}</td> <td>{evaluationScores.SettlementText}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">Cancellation policy</td> <td>Cancellation policy</td>
<td className="ant-table-cell">30 days</td> <td>30 days</td>
<td className="ant-table-cell">21 days</td> <td>21 days</td>
<td className="ant-table-cell">1 day</td> <td>1 day</td>
<td className="ant-table-cell">{evaluationScores.CancellationPolicy}</td> <td>{evaluationScores.CancellationPolicy}</td>
<td className="ant-table-cell">{evaluationScores.CancellationPolicyText}</td> <td>{evaluationScores.CancellationPolicyText}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div>
<br /> <br />
<Typography> <Typography>
<Typography.Title level={3}>Scoring Rules</Typography.Title> <Typography.Title level={3} type="success">
<Typography.Paragraph> Scoring Rules
</Typography.Title>
<Typography.Paragraph type="success">
<ol> <ol>
<li>The maximum score is 5</li> <li>The maximum score is 5</li>
<li> <li>
@ -475,71 +412,59 @@ function Index() {
<br /> <br />
<Divider orientation="left">反馈表分析</Divider> <Divider orientation="left">反馈表分析</Divider>
<div className="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ant-spin-container"> <div className="ant-table-wrapper ant-spin-nested-loading css-dev-only-do-not-override-3op25v ">
<div className="ant-table ant-table-bordered"> <div className="ant-spin-container ant-table ant-table-bordered">
<div className="ant-table-container ant-table-content"> <div className="ant-table-container">
<div className="ant-table-content">
<table style={{ textAlign: "center" }}> <table style={{ textAlign: "center" }}>
<thead className="ant-table-thead"> <thead className="ant-table-thead">
<tr> <tr>
<th className="ant-table-cell" scope="col"> <th scope="col">项目</th>
项目 <th scope="col">产品</th>
</th> <th scope="col">得分</th>
<th className="ant-table-cell" scope="col"> <th scope="col">备注说明</th>
产品
</th>
<th className="ant-table-cell" scope="col">
得分
</th>
<th className="ant-table-cell" scope="col">
备注说明
</th>
</tr> </tr>
</thead> </thead>
<tbody className="ant-table-tbody"> <tbody className="ant-table-tbody">
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell" rowSpan="4"> <td rowSpan="4">地接接待</td>
地接接待 <td>导游</td>
</td> <td>{evaluationScores.FRTGuide}</td>
<td className="ant-table-cell">导游</td> <td rowSpan="7">{evaluationScores.FRTText}</td>
<td className="ant-table-cell">{evaluationScores.FRTGuide}</td>
<td className="ant-table-cell" rowSpan="7">
{evaluationScores.FRTText}
</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">司机+车</td> <td>司机+车</td>
<td className="ant-table-cell">{evaluationScores.FRTGriver}</td> <td>{evaluationScores.FRTGriver}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">餐</td> <td>餐</td>
<td className="ant-table-cell">{evaluationScores.FRTMeal}</td> <td>{evaluationScores.FRTMeal}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">产品体验</td> <td>产品体验</td>
<td className="ant-table-cell">{evaluationScores.FRTProduct}</td> <td>{evaluationScores.FRTProduct}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell" rowSpan="3"> <td rowSpan="3">线路安排</td>
线路安排 <td>酒店</td>
</td> <td>{evaluationScores.FRTHotel}</td>
<td className="ant-table-cell">酒店</td>
<td className="ant-table-cell">{evaluationScores.FRTHotel}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">游船</td> <td>游船</td>
<td className="ant-table-cell">{evaluationScores.FRTCruise}</td> <td>{evaluationScores.FRTCruise}</td>
</tr> </tr>
<tr className="ant-table-row ant-table-row-level-0"> <tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">顾问服务</td> <td>顾问服务</td>
<td className="ant-table-cell">{evaluationScores.FRTAdvisor}</td> <td>{evaluationScores.FRTAdvisor}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div>
</Col> </Col>
<Col md={24} lg={24} xxl={16}> <Col md={24} lg={24} xxl={16}>
<Divider orientation="left">导游接待情况</Divider> <Divider orientation="left">导游接待情况</Divider>

Write Preview
Loading…
Cancel
Save