增加客服地接数据
parent
af57935a08
commit
d7194ba439
@ -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);
|
Loading…
Reference in New Issue