增加客服地接数据

src/App.js

@@ -13,6 +13,7 @@ import Customer_care_potential from "./charts/Customer_care_potential";
 import Customer_care_regular from "./charts/Customer_care_regular";
 import Wechat_session from "./charts/Wechat_session";
 import WhatsApp_session from "./charts/WhatsApp_session";
+import AgentGroup from "./charts/AgentGroup";
 import Credit_card_bill from "./views/Credit_card_bill";
 import exchange_rate from "./charts/ExchangeRate";
 import Sale from "./views/Sale";
@@ -53,6 +54,7 @@ const App = () => {
 				{ key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink> },
 				{ key: 34, label: <NavLink to="/wechat_session">微信会话存档</NavLink> },
 				{ key: 35, label: <NavLink to="/whatsapp_session">WhatsApp会话存档</NavLink> },
+				{ key: 36, label: <NavLink to="/AgentGroup">地接社接团</NavLink> },
 			],
 		},
 		{
@@ -95,6 +97,7 @@ const App = () => {
 								<Route path="/customer_care_potential" element={<Customer_care_potential />} />
 								<Route path="/whatsapp_session" element={<WhatsApp_session />} />
 								<Route path="/wechat_session" element={<Wechat_session />} />
+								<Route path="/agentgroup" element={<AgentGroup />} />
 							</Route>
 							<Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}>
 								<Route path="/credit_card_bill" element={<Credit_card_bill />} />

src/charts/AgentGroup.js

@@ -0,0 +1,126 @@
+import React, {Component} from 'react';
+import {Row, Col, List, Avatar, Space, Pagination, Button} from 'antd';
+import {
+  ContainerOutlined, CarryOutOutlined,
+  SmileOutlined, TagsOutlined, GlobalOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+import {stores_Context} from '../config'
+import {Line} from "@ant-design/charts";
+import {observer} from 'mobx-react';
+import 'moment/locale/zh-cn';
+import DatePickerCharts from './DatePickerCharts'
+
+class AgentGroup extends Component {
+
+    static contextType = stores_Context;
+    constructor(props) {
+        super(props);
+    }
+
+    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}]</>
+            )
+        }
+    }
+
+    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) : '';//计算总数
+                  },
+              },
+          },
+      }
+
+      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>
+      );
+  }
+
+}
+
+export default observer(AgentGroup);