Merge branch 'main' of github.com:hainatravel/dashboard into main
尹诚诚
3 years ago
commit
ab04a58644
@ -0,0 +1,122 @@
|
|||||||
|
import React, {Component} from 'react';
|
||||||
|
import {Row, Col, List, Typography, 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 moment from "moment";
|
||||||
|
import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
|
||||||
|
|
||||||
|
class AgentGroup extends Component {
|
||||||
|
|
||||||
|
static contextType = stores_Context;
|
||||||
|
|
||||||
|
state = {
|
||||||
|
selectedRowKeys: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
console.info('AgentGroup.componentDidMount');
|
||||||
|
// const {customerServicesStore} = this.context;
|
||||||
|
// customerServicesStore.fetchAgentList();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSearchClick() {
|
||||||
|
const {customerServicesStore} = this.context;
|
||||||
|
customerServicesStore.fetchAgentList();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {customerServicesStore} = this.context;
|
||||||
|
const agentList = customerServicesStore.agentList;
|
||||||
|
const agentListColumns = customerServicesStore.agentListColumns;
|
||||||
|
const groupList = customerServicesStore.groupList;
|
||||||
|
const groupListColumns = customerServicesStore.groupListColumns;
|
||||||
|
const {startDate, endDate, dateType} = customerServicesStore;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Space direction="vertical" style={{width: '100%'}}>
|
||||||
|
<Row gutter={{md: 24}}>
|
||||||
|
<Col md={8} lg={7} xxl={6}>
|
||||||
|
<Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
|
||||||
|
<Select.Option key="1" value="startDate">
|
||||||
|
走团日期
|
||||||
|
</Select.Option>
|
||||||
|
<Select.Option key="2" value="ConfirmDate">
|
||||||
|
成团日期
|
||||||
|
</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<DatePicker.RangePicker
|
||||||
|
format={config.DATE_FORMAT} locale={zhCNlocale}
|
||||||
|
allowClear={false}
|
||||||
|
value={[startDate, endDate]}
|
||||||
|
onChange={(dates) => {customerServicesStore.selectDateRange(dates[0], dates[1])}}
|
||||||
|
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}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<SearchOutlined />}
|
||||||
|
loading={false}
|
||||||
|
onClick={() => {
|
||||||
|
this.handleSearchClick();
|
||||||
|
}}>
|
||||||
|
统计
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Typography.Title level={3}>地接社团信息</Typography.Title>
|
||||||
|
<Table
|
||||||
|
dataSource={agentList}
|
||||||
|
columns={agentListColumns}
|
||||||
|
size="small"
|
||||||
|
rowKey={(record) => record.key}
|
||||||
|
loading={false}
|
||||||
|
pagination={false}
|
||||||
|
scroll={{ x: "100%" }}
|
||||||
|
onRow={(agent) => ({
|
||||||
|
onClick: () => {
|
||||||
|
customerServicesStore.selectAgent(agent);
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Typography.Title level={3}>{customerServicesStore.selectedAgent.VendorName}</Typography.Title>
|
||||||
|
<Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Space>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default observer(AgentGroup);
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
import {makeAutoObservable, runInAction} from "mobx"
|
||||||
|
import moment from "moment";
|
||||||
|
import * as config from "../config";
|
||||||
|
import * as req from '../utils/request';
|
||||||
|
|
||||||
|
class CustomerServices {
|
||||||
|
|
||||||
|
constructor(rootStore) {
|
||||||
|
this.rootStore = rootStore;
|
||||||
|
this.startDate = moment().startOf('week').subtract(7, 'days');
|
||||||
|
this.endDate = moment().endOf('week').subtract(7, 'days');
|
||||||
|
this.startDateString = this.startDate.format(config.DATE_FORMAT);
|
||||||
|
this.endDateString = this.endDate.format(config.DATE_FORMAT) + '%2023:59';
|
||||||
|
this.dateType = 'startDate';
|
||||||
|
this.selectedAgent = {VendorName: '请选择地接社'};
|
||||||
|
makeAutoObservable(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchAgentList() {
|
||||||
|
|
||||||
|
req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfoALL?DateType=' + this.dateType + '&Date1=' + this.startDateString + '&Date2=' + this.endDateString + '&OldDate1=' + this.startDateString + '&OldDate2=' + this.endDateString)
|
||||||
|
.then(json => {
|
||||||
|
console.info(json);
|
||||||
|
if (json.errcode === 0) {
|
||||||
|
runInAction(() => {
|
||||||
|
this.agentList = json.result1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchGroupListByAgent() {
|
||||||
|
|
||||||
|
req.fetchJSON(config.HT_HOST + '/service-web/QueryData/GetAgentGroupInfo?VEI_SN=' + this.selectedAgent.EOI_ObjSN + '&DateType=' + this.dateType + '&Date1=' + this.startDateString + '&Date2=' + this.endDateString + '&OldDate1=' + this.startDateString + '&OldDate2=' + this.endDateString)
|
||||||
|
.then(json => {
|
||||||
|
console.info(json);
|
||||||
|
if (json.errcode === 0) {
|
||||||
|
runInAction(() => {
|
||||||
|
this.groupList = json.result1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
selectDateRange(startDate, endDate) {
|
||||||
|
this.startDate = startDate;
|
||||||
|
this.endDate = endDate;
|
||||||
|
this.startDateString = startDate.format(config.DATE_FORMAT);
|
||||||
|
this.endDateString = endDate.format(config.DATE_FORMAT) + '%2023:59';
|
||||||
|
}
|
||||||
|
|
||||||
|
selectDateType(dateType) {
|
||||||
|
this.dateType = dateType;
|
||||||
|
}
|
||||||
|
|
||||||
|
selectAgent(agent) {
|
||||||
|
this.selectedAgent = agent;
|
||||||
|
this.fetchGroupListByAgent();
|
||||||
|
}
|
||||||
|
|
||||||
|
startDate;
|
||||||
|
endDate;
|
||||||
|
startDateString;
|
||||||
|
endDateString;
|
||||||
|
dateType;
|
||||||
|
selectedAgent;
|
||||||
|
|
||||||
|
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;
|
||||||
Loading…
Reference in New Issue