feat: 客服: 地接社接团信息: 改统计与HT一致; +站外好评, 投诉, 东道主等

refactor: `urils/commons` --> `@haina/utils-commons, `@haina/utils-request`, `@haina/utils-pagespy`

package-lock.json

@@ -10,6 +10,9 @@
       "dependencies": {
         "@ant-design/charts": "^1.4.2",
         "@ant-design/pro-components": "^2.6.16",
+        "@haina/utils-commons": "https://research.hainatravel.com/npm/utils-commons-0.1.1.tgz",
+        "@haina/utils-pagespy": "https://research.hainatravel.com/npm/utils-pagespy-0.1.1.tgz",
+        "@haina/utils-request": "https://research.hainatravel.com/npm/utils-request-0.1.1.tgz",
         "antd": "^4.22.6",
         "dingtalk-jsapi": "^3.0.9",
         "docx": "^9.5.1",
@@ -3843,6 +3846,24 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@haina/utils-commons": {
+      "version": "0.1.1",
+      "resolved": "https://research.hainatravel.com/npm/utils-commons-0.1.1.tgz",
+      "integrity": "sha512-I3Ll5iNLtrnOCzs0IB3OXGQa0l75aQT740NKCUFwR1DHRx9vjeoqestS/PamZN1fuiodxWHkOao3JXOPRwSSfw==",
+      "hasInstallScript": true
+    },
+    "node_modules/@haina/utils-pagespy": {
+      "version": "0.1.1",
+      "resolved": "https://research.hainatravel.com/npm/utils-pagespy-0.1.1.tgz",
+      "integrity": "sha512-aMyp8QPDM1URGOn0Bw1z1zUM7MDUDuHiPT8U5Zmusb6EIka+7XVmunQGy7HMPSgrfByD5DlNFkF/l5ej45PRtA==",
+      "hasInstallScript": true
+    },
+    "node_modules/@haina/utils-request": {
+      "version": "0.1.1",
+      "resolved": "https://research.hainatravel.com/npm/utils-request-0.1.1.tgz",
+      "integrity": "sha512-p+0ApwEf+lcSOr7tS9kdgZmW+vZc0Gol6+8IejNv/qfMk6cmuBJYn5khvcSR1mblBPMag+464YpoBI32R9OMDQ==",
+      "hasInstallScript": true
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -24391,6 +24412,18 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
       "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA=="
     },
+    "@haina/utils-commons": {
+      "version": "https://research.hainatravel.com/npm/utils-commons-0.1.1.tgz",
+      "integrity": "sha512-I3Ll5iNLtrnOCzs0IB3OXGQa0l75aQT740NKCUFwR1DHRx9vjeoqestS/PamZN1fuiodxWHkOao3JXOPRwSSfw=="
+    },
+    "@haina/utils-pagespy": {
+      "version": "https://research.hainatravel.com/npm/utils-pagespy-0.1.1.tgz",
+      "integrity": "sha512-aMyp8QPDM1URGOn0Bw1z1zUM7MDUDuHiPT8U5Zmusb6EIka+7XVmunQGy7HMPSgrfByD5DlNFkF/l5ej45PRtA=="
+    },
+    "@haina/utils-request": {
+      "version": "https://research.hainatravel.com/npm/utils-request-0.1.1.tgz",
+      "integrity": "sha512-p+0ApwEf+lcSOr7tS9kdgZmW+vZc0Gol6+8IejNv/qfMk6cmuBJYn5khvcSR1mblBPMag+464YpoBI32R9OMDQ=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",

package.json

@@ -5,6 +5,9 @@
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
     "@ant-design/pro-components": "^2.6.16",
+    "@haina/utils-commons": "https://research.hainatravel.com/npm/utils-commons-0.1.1.tgz",
+    "@haina/utils-pagespy": "https://research.hainatravel.com/npm/utils-pagespy-0.1.1.tgz",
+    "@haina/utils-request": "https://research.hainatravel.com/npm/utils-request-0.1.1.tgz",
     "antd": "^4.22.6",
     "dingtalk-jsapi": "^3.0.9",
     "docx": "^9.5.1",

src/components/Data.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Tag, Button, message } from 'antd';
 import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons';
 import { utils, writeFile } from "xlsx";
-import { isEmpty, getNestedValue } from "../utils/commons";
+import { isEmpty, getNestedValue, fixTo2Decimals } from "@haina/utils-commons";
 
 /**
  * @property diffPercent
@@ -28,6 +28,36 @@ export const VSTag = (props) => {
   );
 };
 
+/**
+ * @property {number} [diffPercent=0]
+ * @property {number} diffData
+ * @property {number} data1
+ * @property {number} data2
+ * @property {string} dataSuffix
+ */
+export const VSDataTag = ({ diffPercent=0, diffData=0, data1=0, data2=0, dataSuffix='' }) => {
+  const _diffPercent = diffPercent || (data2) ? fixTo2Decimals((data1-data2)/data2*100) : 100;
+  const _diffData = diffData || isNaN(data2) ? fixTo2Decimals(data1-0) : (fixTo2Decimals(data1-data2));
+  const CaretIcon = parseInt(_diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
+  const tagColor = parseInt(_diffPercent) < 0 ? 'gold' : 'lime';
+  // parseInt(_diffPercent) === 0 ? (
+  //   '-'
+  // ) :
+  return (
+    <span>
+      <div>
+        {data1}{dataSuffix} <b>VS</b> {data2}{dataSuffix}
+      </div>
+      {_diffData !== 0 && (
+        <Tag icon={<CaretIcon />} color={tagColor}>
+          {_diffPercent}
+          <span>%</span>&nbsp;&nbsp;<span>{_diffData}{dataSuffix}</span>
+        </Tag>
+      )}
+    </span>
+  );
+};
+
 /**
  * 导出表格数据存为xlsx
  * @property label 文件名字

src/stores/CustomerServices.js

@@ -37,6 +37,9 @@ class CustomerServices {
         });
     }
 
+    /**
+     * @deprecated 已迁移到zustand
+     */
     fetchAgentGroupCount() {
       this.inProgress = true;
       const fetchUrl = prepareUrl(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL')
@@ -327,6 +330,9 @@ class CustomerServices {
         });
     }
 
+    /**
+     * @deprecated 已迁移到zustand
+     */
     fetchGroupListByAgentId(agentId) {
       this.inProgress = true;
       this.agentCompany = '...';

src/views/AgentGroupCount.jsx

@@ -1,32 +1,245 @@
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
+import { NavLink } from "react-router-dom";
 import { Row, Col, Typography, Space, Table, Divider } from 'antd';
 import { stores_Context } from '../config';
 import { observer } from 'mobx-react';
+import { toJS } from 'mobx';
 import 'moment/locale/zh-cn';
-import { utils, writeFileXLSX } from 'xlsx';
 import SearchForm from './../components/search/SearchForm';
-import { TableExportBtn } from './../components/Data';
+import { TableExportBtn, VSDataTag } from './../components/Data';
+import useCustomerServicesStore  from '../zustand/CustomerServices';
+import { useShallow } from 'zustand/shallow';
+import { fixTo2Decimals } from "@haina/utils-commons";
+
+const sorter = (a, b, key) => a[key] - b[key];
+// 注意TdCell要提到DataTable作用域外声明
+const TdCell = (tdprops) => {
+  // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
+  const { onMouseEnter, onMouseLeave, ...restProps } = tdprops;
+  return <td {...restProps} />;
+};
+
+const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData }) => {
+  if (showDiffData) {
+    return <VSDataTag data1={data1} data2={data2} dataSuffix={dataSuffix} />;
+  }
+  return <div>{data1}{dataSuffix}</div>;
+};
 
 const AgentGroupCount = () => {
   const { customerServicesStore, date_picker_store } = useContext(stores_Context);
-  const agentGroupList = customerServicesStore.agentGroupList;
+  const [loading, searchValues, setSearchValues, searchValuesToSub] = useCustomerServicesStore(useShallow((state) => [state.loading, state.searchValues, state.setSearchValues, state.searchValuesToSub]));
-  const agentGroupListColumns = customerServicesStore.agentGroupListColumns;
+
-  const { inProgress } = customerServicesStore;
+  const [agentGroupList, total1] = useCustomerServicesStore(useShallow((state) => [state.agentCountList, state.agentCountTotal]));
+  const getAgentGroupCount = useCustomerServicesStore((state) => state.getAgentGroupCount);
 
-  useEffect(() => {
+  const columns = [
-    customerServicesStore.fetchAllAgent();
+    {
-  }, []);
+      title: '地接社名称',
+      dataIndex: 'VendorName',
+      fixed: 'left',
+      children: [
+        {
+          // title: this.startDate.format(config.DATE_FORMAT) + '~' + this.endDate.format(config.DATE_FORMAT),
+          dataIndex: 'VendorName',
+          fixed: 'left',
+          render: (text, record) => <NavLink to={`/agent/${record.EOI_ObjSN}/group/list`}>{record.VendorName}</NavLink>,
+        },
+      ],
+    },
+    {
+      title: '团数',
+      dataIndex: 'GroupCount',
+      sorter: (a, b) => sorter(a, b, 'GroupCount'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.GroupCount} data2={total1.diff?.GroupCount} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.GroupCount,
+          dataIndex: 'GroupCount',
+          render: (text, r) => <DataRenderCell data1={r.GroupCount} data2={r.diff?.GroupCount} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '人数',
+      dataIndex: 'PersonNum',
+      sorter: (a, b) => sorter(a, b, 'PersonNum'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.PersonNum} data2={total1.diff?.PersonNum} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.PersonNum,
+          dataIndex: 'PersonNum',
+          render: (text, r) => <DataRenderCell data1={r.PersonNum} data2={r.diff?.PersonNum} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '团天数',
+      dataIndex: 'GroupDays',
+      sorter: (a, b) => sorter(a, b, 'GroupDays'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.GroupDays} data2={total1.diff?.GroupDays} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.GroupDays,
+          dataIndex: 'GroupDays',
+          render: (text, r) => <DataRenderCell data1={r.GroupDays} data2={r.diff?.GroupDays} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '交易额',
+      dataIndex: 'totalcost',
+      sorter: (a, b) => sorter(a, b, 'totalcost'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.totalcost} data2={total1.diff?.totalcost} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.totalcost,
+          dataIndex: 'totalcost',
+          render: (text, r) => <DataRenderCell data1={r.totalcost} data2={r.diff?.totalcost} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '反馈表团数',
+      dataIndex: 'FKBTS',
+      sorter: (a, b) => sorter(a, b, 'FKBTS'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.FKBTS} data2={total1.diff?.FKBTS} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.FKBTS,
+          dataIndex: 'FKBTS',
+          render: (text, r) => <DataRenderCell data1={r.FKBTS} data2={r.diff?.FKBTS} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '东道主团数',
+      dataIndex: 'DDZTS',
+      sorter: (a, b) => sorter(a, b, 'DDZTS'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.DDZTS} data2={total1.diff?.DDZTS} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.DDZTS,
+          dataIndex: 'DDZTS',
+          render: (text, r) => <DataRenderCell data1={r.DDZTS} data2={r.diff?.DDZTS} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '东道主案例数',
+      dataIndex: 'DDZCases',
+      sorter: (a, b) => sorter(a, b, 'DDZCases'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.DDZCases} data2={total1.diff?.DDZCases} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.DDZCases,
+          dataIndex: 'DDZCases',
+          render: (text, r) => <DataRenderCell data1={r.DDZCases} data2={r.diff?.DDZCases} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '东道主案例比例',
+      dataIndex: 'DDZRate',
+      sorter: (a, b) => sorter(a, b, 'DDZRate'),
+      children: [
+        {
+          title: <DataRenderCell data1={fixTo2Decimals(total1.DDZRate*100)} data2={fixTo2Decimals(total1.diff?.DDZRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.DDZRate,
+          dataIndex: 'DDZRate',
+          render: (text, r) => <DataRenderCell data1={fixTo2Decimals(r.DDZRate*100)} data2={fixTo2Decimals(r.diff?.DDZRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '站外好评团数',
+      dataIndex: 'ZWHP',
+      sorter: (a, b) => sorter(a, b, 'ZWHP'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.ZWHP} data2={total1.diff?.ZWHP} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.ZWHP,
+          dataIndex: 'ZWHP',
+          render: (text, r) => <DataRenderCell data1={r.ZWHP} data2={r.diff?.ZWHP} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '站外好评数',
+      dataIndex: 'ZWHPCases',
+      sorter: (a, b) => sorter(a, b, 'ZWHPCases'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.ZWHPCases} data2={total1.diff?.ZWHPCases} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.ZWHPCases,
+          dataIndex: 'ZWHPCases',
+          render: (text, r) => <DataRenderCell data1={r.ZWHPCases} data2={r.diff?.ZWHPCases} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '站外好评率',
+      dataIndex: 'ZWHPRate',
+      sorter: (a, b) => sorter(a, b, 'ZWHPRate'), // parseInt(a.ZWHPRate) - parseInt(b.ZWHPRate),
+      children: [
+        {
+          title: <DataRenderCell data1={fixTo2Decimals(total1.ZWHPRate*100)} data2={fixTo2Decimals(total1.diff?.ZWHPRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.ZWHPRate,
+          dataIndex: 'ZWHPRate',
+          render: (text, r) => <DataRenderCell data1={fixTo2Decimals(r.ZWHPRate*100)} data2={fixTo2Decimals(r.diff?.ZWHPRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '不满数',
+      dataIndex: 'BMS',
+      sorter: (a, b) => sorter(a, b, 'BMS'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.BMS} data2={total1.diff?.BMS} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.BMS,
+          dataIndex: 'BMS',
+          render: (text, r) => <DataRenderCell data1={r.BMS} data2={r.diff?.BMS} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '不满率',
+      dataIndex: 'BMRate',
+      sorter: (a, b) => sorter(a, b, 'BMRate'), // parseInt(a.BMRate) - parseInt(b.BMRate),
+      children: [
+        {
+          title: <DataRenderCell data1={fixTo2Decimals(total1.BMRate*100)} data2={fixTo2Decimals((total1.diff?.BMRate || 0)*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.BMRate,
+          dataIndex: 'BMRate',
+          render: (text, r) => <DataRenderCell data1={fixTo2Decimals(r.BMRate*100)} data2={fixTo2Decimals(r.diff?.BMRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '投诉数',
+      dataIndex: 'TS',
+      sorter: (a, b) => sorter(a, b, 'TS'),
+      children: [
+        {
+          title: <DataRenderCell data1={total1.TS} data2={total1.diff?.TS} showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.TS,
+          dataIndex: 'TS',
+          render: (text, r) => <DataRenderCell data1={r.TS} data2={r.diff?.TS} showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+    {
+      title: '投诉率',
+      dataIndex: 'TSRate',
+      sorter: (a, b) => sorter(a, b, 'TSRate'), // parseInt(a.TSRate) - parseInt(b.TSRate),
+      children: [
+        {
+          title: <DataRenderCell data1={fixTo2Decimals(total1.TSRate*100)} data2={fixTo2Decimals(total1.diff?.TSRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />, // total1.TSRate,
+          dataIndex: 'TSRate',
+          render: (text, r) => <DataRenderCell data1={fixTo2Decimals(r.TSRate*100)} data2={fixTo2Decimals(r.diff?.TSRate*100)} dataSuffix='%' showDiffData={!!searchValuesToSub.DateDiff1} />,
+        },
+      ],
+    },
+  ];
 
   return (
     <>
       <Space direction="vertical" style={{ width: '100%' }}>
-        <Row gutter={16} className={date_picker_store.siderBroken ? "" : "sticky-top"} >
+        <Row gutter={16} className={toJS(date_picker_store.siderBroken) ? "" : "sticky-top"} >
           <Col className="gutter-row" span={24}>
             <SearchForm
               defaultValue={{
                 initialValue: {
-                  ...date_picker_store.formValues,
+                  ...toJS(date_picker_store.formValues),
                   ...customerServicesStore.searchValues,
+                  ...searchValues,
                 },
                 shows: ['agency', 'departureDateType', 'DepartmentList', 'countryArea', 'dates'],
                 fieldProps: {
@@ -38,7 +251,8 @@ const AgentGroupCount = () => {
               }}
               onSubmit={(_err, obj, form) => {
                 customerServicesStore.setSearchValues(obj, form);
-                customerServicesStore.fetchAgentGroupCount();
+                setSearchValues(obj, form);
+                getAgentGroupCount(obj);
               }}
             />
           </Col>
@@ -47,18 +261,19 @@ const AgentGroupCount = () => {
           <Col span={24}>
             <Typography.Title level={3}>地接社团信息</Typography.Title>
             <Divider orientation="right" plain>
-              <TableExportBtn label={'地接社团信息'} {...{ columns: agentGroupListColumns, dataSource: agentGroupList }} />
+              <TableExportBtn label={'地接社团信息'} {...{ columns, dataSource: agentGroupList }} />
             </Divider>
             <Table
               sticky
               id="agentGroupList"
+              components={{ body: { cell: TdCell } }}
               dataSource={agentGroupList}
-              columns={agentGroupListColumns}
+              columns={columns}
               size="small"
-              rowKey={(record) => record.key}
+              rowKey={(record) => record.EOI_ObjSN}
-              loading={inProgress}
+              loading={loading}
               pagination={false}
-              scroll={{ x: 1000 }}
+              scroll={{ x: 2000 }}
             />
           </Col>
         </Row>

src/views/AgentGroupList.jsx

@@ -1,22 +1,161 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { Row, Col, Typography, Space, Table, List } from 'antd';
 import { stores_Context } from '../config';
 import { observer } from 'mobx-react';
 import { NavLink, useParams } from 'react-router-dom';
 import 'moment/locale/zh-cn';
 import SearchForm from './../components/search/SearchForm';
+import useCustomerServicesStore from '../zustand/CustomerServices';
+import { useShallow } from 'zustand/shallow';
+import { isEmpty } from '@haina/utils-commons';
+import { toJS } from 'mobx';
+
+const buildColumns = (total) => [
+  {
+    title: '团名',
+    dataIndex: 'GRI_Name',
+    children: [
+      {
+        title: '',
+        dataIndex: 'GRI_Name',
+      },
+    ],
+  },
+  {
+    title: '人数',
+    dataIndex: 'COLI_PersonNum',
+    sorter: (a, b) => a.COLI_PersonNum - b.COLI_PersonNum,
+    children: [
+      {
+        title: total.COLI_PersonNum,
+        dataIndex: 'COLI_PersonNum',
+      },
+    ],
+  },
+  {
+    title: '天数',
+    dataIndex: 'COLI_Days',
+    sorter: (a, b) => a.COLI_Days - b.COLI_Days,
+    children: [
+      {
+        title: total.COLI_Days,
+        dataIndex: 'COLI_Days',
+      },
+    ],
+  },
+  {
+    title: '交易额',
+    dataIndex: 'totalcost',
+    sorter: (a, b) => a.totalcost - b.totalcost,
+    children: [
+      {
+        title: total.totalcost,
+        dataIndex: 'totalcost',
+      },
+    ],
+  },
+  {
+    title: '导游',
+    dataIndex: 'GuideName',
+    children: [
+      {
+        title: '-',
+        dataIndex: 'GuideName',
+      },
+    ],
+  },
+  {
+    title: '反馈表',
+    dataIndex: 'FKB',
+    sorter: (a, b) => a.FKB - b.FKB,
+    children: [
+      {
+        title: total.FKB,
+        dataIndex: 'FKB',
+      },
+    ],
+  },
+  {
+    title: '东道主',
+    dataIndex: 'DDZCases',
+    sorter: (a, b) => a.DDZCases - b.DDZCases,
+    children: [
+      {
+        title: total.DDZCases,
+        dataIndex: 'DDZCases',
+      },
+    ],
+  },
+  {
+    title: '前勤分',
+    dataIndex: 'qianqin',
+    children: [
+      {
+        title: total.qianqin,
+        dataIndex: 'qianqin',
+      },
+    ],
+  },
+  {
+    title: '好评',
+    dataIndex: 'Good',
+    sorter: (a, b) => a.Good - b.Good,
+    children: [
+      {
+        title: total.Good,
+        dataIndex: 'Good',
+      },
+    ],
+  },
+  {
+    title: '差评',
+    dataIndex: 'Bad',
+    sorter: (a, b) => a.Bad - b.Bad,
+    children: [
+      {
+        title: total.Bad,
+        dataIndex: 'Bad',
+      },
+    ],
+  },
+  {
+    title: '投诉',
+    dataIndex: 'TS',
+    sorter: (a, b) => a.TS - b.TS,
+    children: [
+      {
+        title: total.TS,
+        dataIndex: 'TS',
+      },
+    ],
+  },
+  {
+    title: '不满',
+    dataIndex: 'BM',
+    sorter: (a, b) => a.BM - b.BM,
+    children: [
+      {
+        title: total.BM,
+        dataIndex: 'BM',
+      },
+    ],
+  },
+];
 
 const AgentGroupList = () => {
   const { agentId } = useParams();
   const { customerServicesStore, date_picker_store } = useContext(stores_Context);
+  const [loading, searchValues, setSearchValues] = useCustomerServicesStore(useShallow((state) => [state.loading, state.searchValues, state.setSearchValues]));
+
+  const [{ result1, result2, total1, total2, title1, title2 }, agencyName] = useCustomerServicesStore(useShallow((state) => [state.agencyGroups, state.agencyName]));
+  const getGroupListByAgentId = useCustomerServicesStore((state) => state.getGroupListByAgentId);
 
   useEffect(() => {
-    customerServicesStore.fetchGroupListByAgentId(agentId);
+    getGroupListByAgentId(agentId);
   }, []);
 
-  const groupList = customerServicesStore.groupList;
+  const columns1 = useMemo(() => buildColumns(total1), [total1]);
-  const groupListColumns = customerServicesStore.groupListColumns;
+  const columns2 = useMemo(() => buildColumns(total2), [total2]);
-  const { startDate, endDate, dateType, inProgress } = customerServicesStore;
 
   return (
     <>
@@ -29,34 +168,61 @@ const AgentGroupList = () => {
             <SearchForm
               defaultValue={{
                 initialValue: {
-                  ...date_picker_store.formValues,
+                  ...toJS(date_picker_store.formValues),
-                  ...customerServicesStore.searchValues,
+                  ...toJS(customerServicesStore.searchValues),
+                  ...searchValues,
                 },
                 shows: ['departureDateType', 'DepartmentList', 'dates'],
                 fieldProps: {
                   DepartmentList: { show_all: true },
                   WebCode: { show_all: false, mode: 'multiple' },
-                  dates: { hide_vs: true },
+                  dates: { hide_vs: false },
                   departureDateType: { disabledKeys: ['applyDate'] },
                 },
               }}
               onSubmit={(_err, obj, form, str) => {
                 customerServicesStore.setSearchValues(obj, form);
-                customerServicesStore.fetchGroupListByAgentId(agentId);
+                setSearchValues(obj, form);
+                getGroupListByAgentId(agentId);
               }}
             />
           </Col>
         </Row>
         <Row>
           <Col span={24}>
-            <Typography.Title level={3}>{customerServicesStore.agentCompany}</Typography.Title>
+            <Typography.Title level={3}>{agencyName}</Typography.Title>
+            <Table
+              title={() => title1}
+              sticky
+              dataSource={result1}
+              columns={columns1}
+              size="small"
+              rowKey={(record) => record.GRI_SN}
+              loading={loading}
+              pagination={false}
+              scroll={{ x: 1000 }}
+              expandable={{
+                expandedRowRender: (record) => (
+                  <List itemLayout="horizontal">
+                    <List.Item>
+                      <List.Item.Meta title="经过城市" description={record.PassCity} />
+                    </List.Item>
+                    <List.Item>
+                      <List.Item.Meta title="评论内容" description={record.ECI_Content} />
+                    </List.Item>
+                  </List>
+                ),
+              }}
+            />
+            {isEmpty(result2) ? null : (
               <Table
+                title={() => title2}
                 sticky
-              dataSource={groupList}
+                dataSource={result2}
-              columns={groupListColumns}
+                columns={columns2}
                 size="small"
-              rowKey={(record) => record.key}
+                rowKey={(record) => record.GRI_SN}
-              loading={inProgress}
+                loading={loading}
                 pagination={false}
                 scroll={{ x: 1000 }}
                 expandable={{
@@ -72,6 +238,7 @@ const AgentGroupList = () => {
                   ),
                 }}
               />
+            )}
           </Col>
         </Row>
       </Space>