初步完成客服数据统计界面

src/charts/AgentGroup.js

@@ -1,15 +1,17 @@
 import React, {Component} from 'react';
-import {Row, Col, List, Avatar, Space, Pagination, Button} from 'antd';
+import {Row, Col, List, Avatar, Space, DatePicker, Button, Select, Table} from 'antd';
 import {
   ContainerOutlined, CarryOutOutlined,
   SmileOutlined, TagsOutlined, GlobalOutlined,
   SearchOutlined,
 } from '@ant-design/icons';
 import {stores_Context} from '../config'
+import * as config from "../config";
 import {Line} from "@ant-design/charts";
 import {observer} from 'mobx-react';
 import 'moment/locale/zh-cn';
-import DatePickerCharts from './DatePickerCharts'
+import moment from "moment";
+import locale from 'antd/es/date-picker/locale/zh_CN';
 
 class AgentGroup extends Component {
 
@@ -20,105 +22,79 @@ class AgentGroup extends Component {
 
     componentDidMount() {
         console.info('AgentGroup.componentDidMount');
-        const {wechatStore} = this.context;
-        wechatStore.fetchWechatUserList();
-    }
-
-    handleUserClick(user) {
-        const {wechatStore} = this.context;
-        wechatStore.fetchContactList(user);
-    }
-    handleContactClick(contact) {
-        const {wechatStore} = this.context;
-        wechatStore.fetchChatMsgList(contact, 0, 20);
-    }
-    handlePageChanged(page, pageSize) {
-        const {wechatStore} = this.context;
-        wechatStore.fetchChatMsgList(wechatStore.selectedContact, page, pageSize);
-    }
-
-    renderMsgItem(chatMsg) {
-        const msgDate = new Date(chatMsg.msgtime);
-        const msgDateText = msgDate.toLocaleDateString() + ' ' + msgDate.toLocaleTimeString();
-        return (
-        <List.Item className='ant-list-item-no-flex'>
-            <List.Item.Meta
-                avatar={<Avatar src={chatMsg.from_avatar} />}
-                title={chatMsg.from_name}
-                description={msgDateText}
-            />
-            {this.renderMsgContent(chatMsg)}
-        </List.Item>
-        )
-    }
-
-    renderMsgContent(chatMsg) {
-        if (chatMsg.msgtype === 'file') {
-            return (
-                <a href={chatMsg.content.fileurl}>{chatMsg.content.filename}</a>
-            )
-        } else if (chatMsg.msgtype === 'image') {
-            return (
-                <img style={{width: '50%', height: '50%'}} alt={chatMsg.msgid} src={chatMsg.content.imageurl} /> 
-            )
-        } else if (chatMsg.msgtype === 'text') {
-            return (
-                    <>{chatMsg.content.text}</>
-            )
-        } else if (chatMsg.msgtype === 'link') {
-            return (
-                <a href={chatMsg.content.link_url}>{chatMsg.content.title}</a>
-            )
-        } else {
-            return (
-                <>未知消息[{chatMsg.msgtype}]</>
-            )
-        }
+        const {customerServicesStore} = this.context;
+        customerServicesStore.fetchAgentList();
     }
 
     render() {
-      const {dashboard_store} = this.context;
-      const orders_data = dashboard_store.orders_data;
-      const line_config = {
-          data: orders_data.data,
-          padding: 'auto',
-          xField: 'ApplyDate',
-          yField: 'orderCount',
-          seriesField: 'WebCode',
-          xAxis: {
-              type: 'timeCat',
-          },
-          smooth: true,
-          legend: {
-              position: 'right-top',
-              title: {
-                  text: '总合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0),
-              },
-              itemMarginBottom: 12,//垂直间距
-              itemValue: {
-                  formatter: (text, item) => {
-                      const items = orders_data.data.filter((d) => d.WebCode === item.value);//按站点筛选
-                      return items.length ? items.reduce((a, b) => a + b.orderCount, 0) : '';//计算总数
-                  },
-              },
-          },
-      }
+      const {customerServicesStore} = this.context;
+      const agentList = customerServicesStore.agentList;    
+      const agentListColumns = customerServicesStore.agentListColumns;
+      const groupList = customerServicesStore.groupList;    
+      const groupListColumns = customerServicesStore.groupListColumns;
 
       return (
-          <div>
-              <h2>全网站订单数统计</h2>
-              <div>
-                  <Space>
-                      <DatePickerCharts hide_vs={true}/>
-                      <Button type="primary" icon={<SearchOutlined/>} loading={orders_data.loading} onClick={() => {
-                          orders_data.getOrderCount_all();
-                      }}>统计</Button>
-                  </Space>
-              </div>
-              <br/>
-              <Line {...line_config}/>
-          </div>
-      );
+        <>
+          <Row>
+          <Col md={24} lg={14} xxl={12}>
+            <Row>
+              <Col md={8} lg={7} xxl={6}>
+                <Select value={"ConfirmDate"} style={{ width: "95%" }} onChange={(value) => console.info(value)}>
+                  <Select.Option key="1" value="ConfirmDate">
+                    确认日期
+                  </Select.Option>
+                  <Select.Option key="2" value="applyDate">
+                    下单日期
+                  </Select.Option>
+                  <Select.Option key="3" value="startDate">
+                    走团日期
+                  </Select.Option>
+                </Select>
+              </Col>
+              <Col span={8}>
+                <DatePicker.RangePicker 
+                  format={config.DATE_FORMAT} locale={locale}
+                  allowClear={false}
+                  value={[moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')]}
+                  onChange={(dates) => {console.info(dates)}}
+                  ranges={{
+                      '本周': [moment().startOf('week'), moment().endOf('week')],
+                      '上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
+                      '本月': [moment().startOf('month'), moment().endOf('month')],
+                      '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
+                      '近30天': [moment().subtract(30, 'days'), moment()],
+                      '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
+                      '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
+                      '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
+                  }}
+                />
+              </Col>
+              <Col md={8} lg={5} xxl={8}>
+                <Button
+                  type="primary"
+                  icon={<SearchOutlined />}
+                  loading={false}
+                  onClick={() => {
+                    console.info('click...');
+                  }}>
+                  统计
+                </Button>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <Table dataSource={agentList} columns={agentListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
+          </Col>
+        </Row>
+      </>
+    );
   }
 
 }

src/stores/CustomerServices.js

@@ -0,0 +1,163 @@
+import {makeAutoObservable, runInAction} from "mobx"
+import * as config from "../config";
+import * as req from '../utils/request';
+
+class CustomerServices {
+
+    constructor(rootStore) {
+        this.rootStore = rootStore;
+        makeAutoObservable(this);
+    }
+
+    fetchAgentList() {
+        
+      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL?DateType=applyDate&Date1=2022-08-01&Date2=2022-08-31%2023:59&OldDate1=2022-07-01&OldDate2=2022-07-31%2023:59')
+        .then(json => {
+          console.info(json);
+          if (json.errcode === 0) {
+            runInAction(() => {
+              this.agentList = json.result1;
+            });
+           }
+        });
+
+        
+        
+      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=1262&DateType=applyDate&Date1=2022-08-01&Date2=2022-08-31%2023:59&OldDate1=2022-07-01&OldDate2=2022-07-31%2023:59')
+      .then(json => {
+        console.info(json);
+        if (json.errcode === 0) {
+          runInAction(() => {
+            this.groupList = json.result1;
+          });
+         }
+      });
+    }
+
+    fetchGroupListByAgent() {
+        
+      req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=1262&DateType=applyDate&Date1=2022-08-01&Date2=2022-08-31%2023:59&OldDate1=2022-07-01&OldDate2=2022-07-31%2023:59')
+        .then(json => {
+          console.info(json);
+          if (json.errcode === 0) {
+            runInAction(() => {
+              this.groupList = json.result1;
+            });
+           }
+        });
+    }
+    
+    groupList = [{
+      EOI_ObjSN: 1,
+      GRI_SN: '---',
+      GRI_Name: 0,
+      COLI_PersonNum: 0,
+      COLI_Days: 0,
+      PassCity: 0,
+      VendorName: 0,
+      GuideName: '-',
+      Good: 0,
+      Bad: '-',
+      ECI_Content: '-',
+      totalcost: 0,
+      key: 1
+    }];
+
+    groupListColumns = [
+      {
+        title: '团名',
+        dataIndex: 'GRI_Name'
+      },
+      {
+        title: '人数',
+        dataIndex: 'COLI_PersonNum'
+      },
+      {
+        title: '天数',
+        dataIndex: 'COLI_Days'
+      },
+      {
+        title: '经过城市',
+        dataIndex: 'PassCity'
+      },
+      {
+        title: '地接社名称',
+        dataIndex: 'VendorName'
+      },
+      {
+        title: '导游',
+        dataIndex: 'GuideName'
+      },
+      {
+        title: '好评',
+        dataIndex: 'Good'
+      },
+      {
+        title: '差评',
+        dataIndex: 'Bad'
+      },
+      {
+        title: '评论内容',
+        dataIndex: 'ECI_Content'
+      },
+      {
+        title: '交易额',
+        dataIndex: 'totalcost'
+      }
+    ];
+
+    agentList = [{
+      EOI_ObjSN: 1,
+      VendorName: '---',
+      GroupCount: 0,
+      PersonNum: 0,
+      GroupDays: 0,
+      totalcost: 0,
+      GoodCount: 0,
+      GoodRate: '-',
+      BadCount: 0,
+      BadRate: '-',
+      key: 1
+    }];
+
+    agentListColumns = [
+      {
+        title: '地接社名称',
+        dataIndex: 'VendorName'
+      },
+      {
+        title: '团数',
+        dataIndex: 'GroupCount'
+      },
+      {
+        title: '人数',
+        dataIndex: 'PersonNum'
+      },
+      {
+        title: '团天数',
+        dataIndex: 'GroupDays'
+      },
+      {
+        title: '交易额',
+        dataIndex: 'totalcost'
+      },
+      {
+        title: '好评数',
+        dataIndex: 'GoodCount'
+      },
+      {
+        title: '好评率',
+        dataIndex: 'GoodRate'
+      },
+      {
+        title: '差评数',
+        dataIndex: 'BadCount'
+      },
+      {
+        title: '差评率',
+        dataIndex: 'BadRate'
+      }
+    ];
+}
+
+export default CustomerServices;

src/stores/Index.js

@@ -9,7 +9,7 @@ import FinancialStore from "./FinancialStore";
 import SaleStore from "./SaleStore";
 import WechatStore from "./Wechat";
 import WhatsAppStore from "./WhatsApp";
-
+import CustomerServicesStore from "./CustomerServices";
 
 class Index {
     constructor() {
@@ -23,6 +23,7 @@ class Index {
         this.sale_store = new SaleStore(this);
         this.wechatStore = new WechatStore(this);
         this.whatsAppStore = new WhatsAppStore(this);
+        this.customerServicesStore = new CustomerServicesStore(this);
         makeAutoObservable(this);
     }