From a7b24d206de43f0891f15919dac89ded5910ebd0 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 11 Apr 2025 11:08:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=BF=87=E7=A8=8B=E6=8C=87=E6=A0=87:?=
 =?UTF-8?q?=20tips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/OPProcess.jsx | 101 ++++++++++++++++++++++++++++++++++------
 1 file changed, 86 insertions(+), 15 deletions(-)

diff --git a/src/views/OPProcess.jsx b/src/views/OPProcess.jsx
index 7303aca..78d2bee 100644
--- a/src/views/OPProcess.jsx
+++ b/src/views/OPProcess.jsx
@@ -1,11 +1,10 @@
-import React, { Children, useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { stores_Context } from '../config';
-import moment from 'moment';
-import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined } from '@ant-design/icons';
-import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Row, Col, Table, Tooltip } from 'antd';
 import SearchForm from '../components/search/SearchForm';
-import { cloneDeep, fixTo2Decimals, sortBy, isEmpty, pick } from '../utils/commons';
+import { pick } from '../utils/commons';
 
 const COLOR_SETS = [
   "#FFFFFF",
@@ -58,6 +57,7 @@ export default observer((props) => {
     rowClassName: (record, rowIndex) => {
       return record.groupType === 'operator' ? '': 'ant-tag-blue';
     },
+    showSorterTooltip: false,
     columns: [
       { title: '', dataIndex: 'groupsLabel', key: 'groupsLabel', width: '6rem',
         filterSearch: true,
@@ -68,18 +68,60 @@ export default observer((props) => {
         title: '顾问动作',
         key: 'date',
         children: [
-          { title: '首次响应率24H', dataIndex: 'firstTouch24', key: 'firstTouch24', render: percentageRender,
+          { title: () => (
+            <>
+              首次响应率24H{' '}
+              <Tooltip title="达到24H内回复的订单数/总订单数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'firstTouch24', key: 'firstTouch24', render: percentageRender,
             sorter: (a, b) => tableSorter(a, b, 'firstTouch24'),
           },
-          { title: '48H内报价率', dataIndex: 'firstQuote48', key: 'firstQuote48',render: percentageRender ,
+          { title: () => (
+            <>
+              48H内报价率{' '}
+              <Tooltip title="达到48H内报价的订单数/总订单数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'firstQuote48', key: 'firstQuote48',render: percentageRender ,
             sorter: (a, b) => tableSorter(a, b, 'firstQuote48'), },
-          { title: '一次报价率', dataIndex: 'quote1', key: 'quote1',render: percentageRender ,
+          { title: () => (
+            <>
+              一次报价率{' '}
+              <Tooltip title="首次报价的订单数/总订单数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'quote1', key: 'quote1',render: percentageRender ,
             sorter: (a, b) => tableSorter(a, b, 'quote1'), },
-          { title: '二次报价率', dataIndex: 'quote2', key: 'quote2',render: percentageRender ,
+          { title: () => (
+            <>
+              二次报价率{' '}
+              <Tooltip title="二次报价的订单数/一次报价后回复数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'quote2', key: 'quote2',render: percentageRender ,
             sorter: (a, b) => tableSorter(a, b, 'quote2'), },
-          { title: '>50条会话', dataIndex: 'turnsGT50', key: 'turnsGT50', render: percentageRender ,
+          { title: () => (
+            <>
+              &gt;50条会话{' '}
+              <Tooltip title=">50条会话的订单数/总订单">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'turnsGT50', key: 'turnsGT50', render: percentageRender ,
             sorter: (a, b) => tableSorter(a, b, 'turnsGT50'), },
-          { title: '违规数', dataIndex: 'violations', key: 'violations',
+          { title: () => (
+            <>
+              违规数{' '}
+              <Tooltip title="未遵循24H回复的订单数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'violations', key: 'violations',
             sorter: (a, b) => tableSorter(a, b, 'violations'), },
         ],
       },
@@ -88,28 +130,56 @@ export default observer((props) => {
         key: 'department',
         children: [
           {
-            title: '首次回复率24H', dataIndex: 'firstReply24', key: 'firstReply24',
+            title: () => (
+            <>
+              首次回复率24H{' '}
+              <Tooltip title="达到24H内回复的订单数/总订单数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'firstReply24', key: 'firstReply24',
             render: (_, r) => ({
               props: { style: { backgroundColor: COLOR_SETS[1]+transparentHex } },
               children: percentageRender(_),
             }),
             sorter: (a, b) => tableSorter(a, b, 'firstReply24'), },
           {
-            title: '48H内报价回复率', dataIndex: 'replyQuote48', key: 'replyQuote48',
+            title: () => (
+            <>
+              48H内报价回复率{' '}
+              <Tooltip title="48H内报价后的回复数/报价的订单数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'replyQuote48', key: 'replyQuote48',
             render: (_, r) => ({
               props: { style: { backgroundColor: COLOR_SETS[1]+transparentHex } },
               children: percentageRender(_),
             }),
             sorter: (a, b) => tableSorter(a, b, 'replyQuote48'), },
           {
-            title: '一次报价回复率', dataIndex: 'replyQuote1', key: 'replyQuote1',
+            title: () => (
+            <>
+              一次报价回复率{' '}
+              <Tooltip title="一次报价后回复率/订单总数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'replyQuote1', key: 'replyQuote1',
             render: (_, r) => ({
               props: { style: { backgroundColor: COLOR_SETS[1]+transparentHex } },
               children: percentageRender(_),
             }),
             sorter: (a, b) => tableSorter(a, b, 'replyQuote1'), },
           {
-            title: '二次报价回复率', dataIndex: 'replyQuote2', key: 'replyQuote2',
+            title: () => (
+            <>
+              二次报价回复率{' '}
+              <Tooltip title="二次报价后回复数/一次报价后回复数">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ), dataIndex: 'replyQuote2', key: 'replyQuote2',
             render: (_, r) => ({
               props: { style: { backgroundColor: COLOR_SETS[1]+transparentHex } },
               children: percentageRender(_),
@@ -127,6 +197,7 @@ export default observer((props) => {
     rowClassName: (record, rowIndex) => {
       return record.groupType === 'operator' ? '': 'ant-tag-blue';
     },
+    showSorterTooltip: false,
     columns: [
       { title: '', dataIndex: 'groupsLabel', key: 'groupsLabel', width: '6rem',
         filterSearch: true,