Merge remote-tracking branch 'origin/feature/2.0' into feature/2.0

# Conflicts:
#	src/libs/ht.js
#	src/mock/2.0/trade.json
#	src/stores/Index.js
#	src/stores/KPI.js
#	src/utils/commons.js
#	src/views/KPI.jsx
feature/2.0-sales-trade
Lei OT 2 years ago
commit 8c5a15bec7

@ -15,7 +15,7 @@ class CustomerStore {
this.potential_data.loading = true; this.potential_data.loading = true;
const date_picker_store = this.rootStore.date_picker_store; const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-tourdesign/PotentialCusOrder'; let url = '/service-tourdesign/PotentialCusOrder';
url += '?Website=' + this.potential_data.webcode + '&DEI_SNList=' + this.potential_data.groups.toString(); url += '?Website=' + this.potential_data.webcode.toString() + '&DEI_SNList=' + this.potential_data.groups.toString();
if (this.potential_data.date_type == 'applyDate') { if (this.potential_data.date_type == 'applyDate') {
url += '&ApplydateCheck=1&EntrancedateCheck=0&ConfirmDateCheck=0'; url += '&ApplydateCheck=1&EntrancedateCheck=0&ConfirmDateCheck=0';
} else if(this.potential_data.date_type == 'ConfirmDate'){ } else if(this.potential_data.date_type == 'ConfirmDate'){
@ -70,7 +70,7 @@ class CustomerStore {
data: [], data: [],
data_detail: [], data_detail: [],
webcode: 'GHKYZG', webcode: 'GHKYZG',
site_select_mode: false,// 站点是否多选 site_select_mode: 'multiple',// 站点是否多选
group_select_mode: 'multiple',// 是否多选分组 group_select_mode: 'multiple',// 是否多选分组
groups: ['1', '2', '7'], groups: ['1', '2', '7'],
date_type: 'applyDate', date_type: 'applyDate',
@ -88,7 +88,7 @@ class CustomerStore {
this.regular_data.loading = true; this.regular_data.loading = true;
const date_picker_store = this.rootStore.date_picker_store; const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-tourdesign/RegularCusOrder'; let url = '/service-tourdesign/RegularCusOrder';
url += '?Website=' + this.regular_data.webcode + '&DEI_SNList=' + this.regular_data.groups.toString(); url += '?Website=' + this.regular_data.webcode.toString() + '&DEI_SNList=' + this.regular_data.groups.toString();
if (this.regular_data.date_type == 'applyDate') { if (this.regular_data.date_type == 'applyDate') {
url += '&ApplydateCheck=1&EntrancedateCheck=0&ConfirmDateCheck=0'; url += '&ApplydateCheck=1&EntrancedateCheck=0&ConfirmDateCheck=0';
} else if(this.regular_data.date_type == 'ConfirmDate'){ } else if(this.regular_data.date_type == 'ConfirmDate'){
@ -143,7 +143,7 @@ class CustomerStore {
data: [], data: [],
data_detail: [], data_detail: [],
webcode: 'ALL', webcode: 'ALL',
site_select_mode: false,// 站点是否多选 site_select_mode: 'multiple',// 站点是否多选
group_select_mode: 'multiple',// 是否多选分组 group_select_mode: 'multiple',// 是否多选分组
groups: ['1', '2', '28', '7'], groups: ['1', '2', '28', '7'],
date_type: 'applyDate', date_type: 'applyDate',
@ -161,7 +161,7 @@ class CustomerStore {
this.inchina_data.loading = true; this.inchina_data.loading = true;
const date_picker_store = this.rootStore.date_picker_store; const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-tourdesign/RegularCusInChinaOrder'; let url = '/service-tourdesign/RegularCusInChinaOrder';
url += '?Website=' + this.inchina_data.webcode + '&DEI_SNList=' + this.inchina_data.groups.toString(); url += '?Website=' + this.inchina_data.webcode.toString() + '&DEI_SNList=' + this.inchina_data.groups.toString();
if (this.inchina_data.date_type == 'applyDate') { if (this.inchina_data.date_type == 'applyDate') {
url += '&ApplydateCheck=1&EntrancedateCheck=0&ConfirmDateCheck=0'; url += '&ApplydateCheck=1&EntrancedateCheck=0&ConfirmDateCheck=0';
} else if(this.inchina_data.date_type == 'ConfirmDate'){ } else if(this.inchina_data.date_type == 'ConfirmDate'){
@ -216,7 +216,7 @@ class CustomerStore {
data: [], data: [],
data_detail: [], data_detail: [],
webcode: 'ALL', webcode: 'ALL',
site_select_mode: false,// 站点是否多选 site_select_mode: 'multiple',// 站点是否多选
group_select_mode: 'multiple',// 是否多选分组 group_select_mode: 'multiple',// 是否多选分组
groups: ['1', '2', '28', '7'], groups: ['1', '2', '28', '7'],
date_type: 'applyDate', date_type: 'applyDate',

@ -1,425 +1,442 @@
import { makeAutoObservable, runInAction } from "mobx"; import { makeAutoObservable, runInAction } from 'mobx';
import moment from "moment"; import moment from 'moment';
import * as config from "../config"; import * as config from '../config';
import * as comm from "../utils/commons"; import * as comm from '../utils/commons';
import { NavLink } from "react-router-dom"; import { NavLink } from 'react-router-dom';
import { groupsMappedByCode } from './../libs/ht'; import { groupsMappedByCode } from './../libs/ht';
// 销售数据 // 销售数据
class SaleStore { class SaleStore {
constructor(rootStore) { constructor(rootStore) {
this.rootStore = rootStore; this.rootStore = rootStore;
makeAutoObservable(this); makeAutoObservable(this);
} }
loading = false; loading = false;
loading_table = false; loading_table = false;
spinning = false; // 加载状态 spinning = false; // 加载状态
active_tab_key = "All"; // 当前选择的标签 active_tab_key = 'All'; // 当前选择的标签
group_select_mode = false; group_select_mode = false;
groups = [groupsMappedByCode.GH.key]; // 默认GH事业部 groups = [groupsMappedByCode.GH.key]; // 默认GH事业部
filter_country=[];// 筛选国籍 filter_country = []; // 筛选国籍
filter_guest_type=[];// 筛选客户关系 filter_guest_type = []; // 筛选客户关系
site_select_mode = false; // 是否多选站点 site_select_mode = false; // 是否多选站点
include_tickets = "1"; // 是否包含门票1是含有0不含 include_tickets = '1'; // 是否包含门票1是含有0不含
webcode = "ALL"; webcode = 'ALL';
date_type = "ConfirmDate"; date_type = 'ConfirmDate';
ml_data = []; // 毛利数据 ml_data = []; // 毛利数据
type_data = []; // 类型的数据 type_data = []; // 类型的数据
type_data_sub = []; // 类型的子维度数据 type_data_sub = []; // 类型的子维度数据
date_title = "date_title"; // 日期段,只用于显示,防止日期选择控件的变化导致页面刷新 date_title = 'date_title'; // 日期段,只用于显示,防止日期选择控件的变化导致页面刷新
// 是否包含门票 // 是否包含门票
handleChange_include_tickets = value => { handleChange_include_tickets = (value) => {
this.include_tickets = value; this.include_tickets = value;
}; };
// 选择事业部 // 选择事业部
group_handleChange(value) { group_handleChange(value) {
this.groups = value; this.groups = value;
} }
// 选择站点 // 选择站点
handleChange_webcode = value => { handleChange_webcode = (value) => {
this.webcode = value; this.webcode = value;
}; };
// 切换标签页 // 切换标签页
onChange_Tabs(active_key) { onChange_Tabs(active_key) {
this.active_tab_key = active_key; this.active_tab_key = active_key;
} }
// 下单日期或者出发日期 // 下单日期或者出发日期
onChange_datetype(value) { onChange_datetype(value) {
this.date_type = value; this.date_type = value;
} }
// 选择客源国 // 选择客源国
onChange_Country(value) { onChange_Country(value) {
this.filter_country = value; this.filter_country = value;
} }
// 选择成员关系 // 选择成员关系
onChange_GuestGroupType(value) { onChange_GuestGroupType(value) {
this.filter_guest_type = value; this.filter_guest_type = value;
} }
// 获取业绩信息 // 获取业绩信息
get_department_order_ml(date_moment) { get_department_order_ml(date_moment) {
let result = []; let result = [];
const date1_start = date_moment.start_date.format(config.DATE_FORMAT); const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
const date1_end = date_moment.end_date.format(config.DATE_FORMAT); const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
const date2_start = comm.empty(date_moment.start_date_cp) ? "" : date_moment.start_date_cp.format(config.DATE_FORMAT); const date2_start = comm.empty(date_moment.start_date_cp) ? '' : date_moment.start_date_cp.format(config.DATE_FORMAT);
const date2_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT); const date2_end = comm.empty(date_moment.end_date_cp) ? '' : date_moment.end_date_cp.format(config.DATE_FORMAT);
this.loading = true; this.loading = true;
this.date_title = `${date1_start}~${date1_end}`; this.date_title = `${date1_start}~${date1_end}`;
let url = "/service-web/QueryData/GetDepartmentOrderML"; let url = '/service-web/QueryData/GetDepartmentOrderML';
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&WebCode=${this.webcode}&IncludeTickets=${this.include_tickets}`; url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&WebCode=${this.webcode}&IncludeTickets=${this.include_tickets}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) { if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
this.date_title += ` ${date2_start}~${date2_end}`; this.date_title += ` ${date2_start}~${date2_end}`;
} }
fetch(config.HT_HOST + url) fetch(config.HT_HOST + url)
.then(response => response.json()) .then((response) => response.json())
.then(json => { .then((json) => {
result = json.result1; result = json.result1;
// if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { // if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) {
// let diff_days = date_moment.start_date.diff(date_moment.start_date_cp, "days"); // let diff_days = date_moment.start_date.diff(date_moment.start_date_cp, "days");
// for (let item of json.result2) { // for (let item of json.result2) {
// result.push({ // result.push({
// COLI_Date: moment(item.COLI_Date).add(diff_days, "days").format(config.DATE_FORMAT), // COLI_Date: moment(item.COLI_Date).add(diff_days, "days").format(config.DATE_FORMAT),
// COLI_YJLY: item.COLI_YJLY, // COLI_YJLY: item.COLI_YJLY,
// groups: item.groups, // groups: item.groups,
// key: item.key, // key: item.key,
// }); // });
// } // }
// } // }
runInAction(() => { runInAction(() => {
this.ml_data = result; this.ml_data = result;
this.loading = false; this.loading = false;
}); });
}) })
.catch(error => { .catch((error) => {
this.loading = false; this.loading = false;
console.log("fetch data failed", error); console.log('fetch data failed', error);
}); });
} }
// 按类型获取业绩 // 按类型获取业绩
get_department_order_ml_by_type(date_moment) { get_department_order_ml_by_type(date_moment) {
const result = { dataSource: [], columns: [] }; const result = { dataSource: [], columns: [] };
const date1_start = date_moment.start_date.format(config.DATE_FORMAT); const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
const date1_end = date_moment.end_date.format(config.DATE_FORMAT); const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
const date2_start = comm.empty(date_moment.start_date_cp) ? "" : date_moment.start_date_cp.format(config.DATE_FORMAT); const date2_start = comm.empty(date_moment.start_date_cp) ? '' : date_moment.start_date_cp.format(config.DATE_FORMAT);
const date2_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT); const date2_end = comm.empty(date_moment.end_date_cp) ? '' : date_moment.end_date_cp.format(config.DATE_FORMAT);
this.loading_table = true; this.loading_table = true;
this.date_title = `${date1_start}~${date1_end}`; this.date_title = `${date1_start}~${date1_end}`;
let url = "/service-web/QueryData/GetDepartmentOrderMLByType"; let url = '/service-web/QueryData/GetDepartmentOrderMLByType';
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&OrderType=${this.active_tab_key}&WebCode=${this.webcode}&IncludeTickets=${this.include_tickets}`; url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&OrderType=${this.active_tab_key}&WebCode=${this.webcode}&IncludeTickets=${this.include_tickets}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) { if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
this.date_title += ` ${date2_start}~${date2_end}`; this.date_title += ` ${date2_start}~${date2_end}`;
} }
fetch(config.HT_HOST + url) fetch(config.HT_HOST + url)
.then(response => response.json()) .then((response) => response.json())
.then(json => { .then((json) => {
if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) {
} else { } else {
if (this.active_tab_key === "All") { if (this.active_tab_key === 'All') {
result.columns = [ result.columns = [
{ {
title: "", title: '',
children: [ children: [
{ {
title: "", title: '',
dataIndex: "OPI_Name", dataIndex: 'OPI_Name',
}, },
], ],
}, },
{ {
title: "毛利", title: '毛利',
children: [{ title: json.result1.reduce((a, b) => a + comm.price_to_number(b.COLI_ML), 0), dataIndex: "COLI_ML" }], children: [{ title: json.result1.reduce((a, b) => a + comm.price_to_number(b.COLI_ML), 0), dataIndex: 'COLI_ML' }],
sorter: (a, b) => comm.price_to_number(b.COLI_ML) - comm.price_to_number(a.COLI_ML), sorter: (a, b) => comm.price_to_number(b.COLI_ML) - comm.price_to_number(a.COLI_ML),
}, },
{ {
title: "成行率", title: '成行率',
children: [{ title: comm.formatPercent(json.result1.reduce((a, b) => a + b.COLI_CJCount, 0) / json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0)), dataIndex: "COLI_CJrate" }], children: [{ title: comm.formatPercent(json.result1.reduce((a, b) => a + b.COLI_CJCount, 0) / json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0)), dataIndex: 'COLI_CJrate' }],
sorter: (a, b) => parseInt(b.COLI_CJrate) - parseInt(a.COLI_CJrate), sorter: (a, b) => parseInt(b.COLI_CJrate) - parseInt(a.COLI_CJrate),
}, },
{ {
title: "成团数", title: '成团数',
children: [{ title: json.result1.reduce((a, b) => a + b.COLI_CJCount, 0), dataIndex: "COLI_CJCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.COLI_CJCount, 0), dataIndex: 'COLI_CJCount' }],
sorter: (a, b) => b.COLI_CJCount - a.COLI_CJCount, sorter: (a, b) => b.COLI_CJCount - a.COLI_CJCount,
}, },
{ {
title: "订单数", title: '订单数',
children: [{ title: json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0), dataIndex: "COLI_OrderCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0), dataIndex: 'COLI_OrderCount' }],
sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount, sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount,
}, },
{ {
title: "单团毛利", title: '单团毛利',
children: [{ title: "", dataIndex: "COLI_SingleML" }], children: [{ title: '', dataIndex: 'COLI_SingleML' }],
sorter: (a, b) => comm.price_to_number(b.COLI_SingleML) - comm.price_to_number(a.COLI_SingleML), sorter: (a, b) => comm.price_to_number(b.COLI_SingleML) - comm.price_to_number(a.COLI_SingleML),
}, },
{ {
title: "成团周期", title: '成团周期',
children: [{ title: "", dataIndex: "COLI_Cycle" }], children: [{ title: '', dataIndex: 'COLI_Cycle' }],
sorter: (a, b) => b.COLI_Cycle - a.COLI_Cycle, sorter: (a, b) => b.COLI_Cycle - a.COLI_Cycle,
}, },
]; ];
result.dataSource = json.result1; result.dataSource = json.result1;
} else if (this.active_tab_key === "ResponseRateByWL") { } else if (this.active_tab_key === 'ResponseRateByWL') {
result.columns = [ result.columns = [
{ {
title: "", title: '',
children: [ children: [
{ {
title: "", title: '',
dataIndex: "OPI_Name", dataIndex: 'OPI_Name',
}, },
], ],
}, },
{ {
title: "报价次数", title: '报价次数',
children: [{ title: json.result1.reduce((a, b) => a + b.PriceTime, 0), dataIndex: "PriceTime" }], children: [{ title: json.result1.reduce((a, b) => a + b.PriceTime, 0), dataIndex: 'PriceTime' }],
sorter: (a, b) => b.PriceTime - a.PriceTime, sorter: (a, b) => b.PriceTime - a.PriceTime,
}, },
{ {
title: "邮件发送次数", title: '邮件发送次数',
children: [{ title: json.result1.reduce((a, b) => a + b.mailSendTime, 0), dataIndex: "mailSendTime" }], children: [{ title: json.result1.reduce((a, b) => a + b.mailSendTime, 0), dataIndex: 'mailSendTime' }],
sorter: (a, b) => b.mailSendTime - a.mailSendTime, sorter: (a, b) => b.mailSendTime - a.mailSendTime,
}, },
{ {
title: "WhatsApp客人会话次数", title: 'WhatsApp客人会话次数',
children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppGuestChatCount, 0), dataIndex: "WhatsAppGuestChatCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppGuestChatCount, 0), dataIndex: 'WhatsAppGuestChatCount' }],
sorter: (a, b) => b.WhatsAppGuestChatCount - a.WhatsAppGuestChatCount, sorter: (a, b) => b.WhatsAppGuestChatCount - a.WhatsAppGuestChatCount,
}, },
{ {
title: "WhatsApp外联会话次数", title: 'WhatsApp外联会话次数',
children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppWLChatCount, 0), dataIndex: "WhatsAppWLChatCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppWLChatCount, 0), dataIndex: 'WhatsAppWLChatCount' }],
sorter: (a, b) => b.WhatsAppWLChatCount - a.WhatsAppWLChatCount, sorter: (a, b) => b.WhatsAppWLChatCount - a.WhatsAppWLChatCount,
}, },
{ {
title: "WhatsApp新增客户数", title: 'WhatsApp新增客户数',
children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppNewGuestCount, 0), dataIndex: "WhatsAppNewGuestCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppNewGuestCount, 0), dataIndex: 'WhatsAppNewGuestCount' }],
sorter: (a, b) => b.WhatsAppNewGuestCount - a.WhatsAppNewGuestCount, sorter: (a, b) => b.WhatsAppNewGuestCount - a.WhatsAppNewGuestCount,
}, },
{ {
title: "微信客人会话次数", title: '微信客人会话次数',
children: [{ title: json.result1.reduce((a, b) => a + b.WXGuestChatCount, 0), dataIndex: "WXGuestChatCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.WXGuestChatCount, 0), dataIndex: 'WXGuestChatCount' }],
sorter: (a, b) => b.WXGuestChatCount - a.WXGuestChatCount, sorter: (a, b) => b.WXGuestChatCount - a.WXGuestChatCount,
}, },
{ {
title: "微信外联会话次数", title: '微信外联会话次数',
children: [{ title: json.result1.reduce((a, b) => a + b.WXWLChatCount, 0), dataIndex: "WXWLChatCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.WXWLChatCount, 0), dataIndex: 'WXWLChatCount' }],
sorter: (a, b) => b.WXWLChatCount - a.WXWLChatCount, sorter: (a, b) => b.WXWLChatCount - a.WXWLChatCount,
}, },
{ {
title: "微信新增客户数", title: '微信新增客户数',
children: [{ title: json.result1.reduce((a, b) => a + b.WXNewGuestCount, 0), dataIndex: "WXNewGuestCount" }], children: [{ title: json.result1.reduce((a, b) => a + b.WXNewGuestCount, 0), dataIndex: 'WXNewGuestCount' }],
sorter: (a, b) => b.WXNewGuestCount - a.WXNewGuestCount, sorter: (a, b) => b.WXNewGuestCount - a.WXNewGuestCount,
}, },
]; ];
result.dataSource = json.result1; result.dataSource = json.result1;
} else if (this.active_tab_key === "ResponseRateWhatsApp") { } else if (this.active_tab_key === 'ResponseRateWhatsApp') {
result.columns = [ result.columns = [
{ {
title: "", title: '',
children: [ children: [
{ {
title: "", title: '',
dataIndex: "OPI_Name", dataIndex: 'OPI_Name',
}, },
], ],
}, },
{ {
title: "首次回复率", title: '首次回复率',
children: [{ title: "", dataIndex: "firstReplayRate", render: (text, record) => <span title={record.firstReplay + "回复数/" + record.OrderCount + "总订单"}>{text}</span> }], children: [{ title: '', dataIndex: 'firstReplayRate', render: (text, record) => <span title={record.firstReplay + '回复数/' + record.OrderCount + '总订单'}>{text}</span> }],
sorter: (a, b) => parseInt(b.firstReplayRate) - parseInt(a.firstReplayRate), sorter: (a, b) => parseInt(b.firstReplayRate) - parseInt(a.firstReplayRate),
}, },
{ {
title: "一次报价率", title: '一次报价率',
children: [{ title: "", dataIndex: "FirstQuotationRate", render: (text, record) => <span title={record.FirstQuotation + "一次报价数/" + record.OrderCount + "总订单"}>{text}</span> }], children: [{ title: '', dataIndex: 'FirstQuotationRate', render: (text, record) => <span title={record.FirstQuotation + '一次报价数/' + record.OrderCount + '总订单'}>{text}</span> }],
sorter: (a, b) => parseInt(b.FirstQuotationRate) - parseInt(a.FirstQuotationRate), sorter: (a, b) => parseInt(b.FirstQuotationRate) - parseInt(a.FirstQuotationRate),
}, },
{ {
title: "一次报价回复率", title: '一次报价回复率',
children: [{ title: "", dataIndex: "FirstQuotationReplayRate", render: (text, record) => <span title={record.FirstQuotationReplay + "一次报价回复数/" + record.FirstQuotation + "一次报价数"}>{text}</span> }], children: [
sorter: (a, b) => parseInt(b.FirstQuotationReplayRate) - parseInt(a.FirstQuotationReplayRate), {
}, title: '',
{ dataIndex: 'FirstQuotationReplayRate',
title: "一次报价回复周期", render: (text, record) => <span title={record.FirstQuotationReplay + '一次报价回复数/' + record.FirstQuotation + '一次报价数'}>{text}</span>,
children: [{ title: "", dataIndex: "FirstQuotationReplaytimeAVG" }], },
sorter: (a, b) => b.FirstQuotationReplaytimeAVG - a.FirstQuotationReplaytimeAVG, ],
}, sorter: (a, b) => parseInt(b.FirstQuotationReplayRate) - parseInt(a.FirstQuotationReplayRate),
{ },
title: "二次报价率", {
children: [{ title: "", dataIndex: "SecondQuotationRate", render: (text, record) => <span title={record.SecondQuotation + "二次报价数/" + record.FirstQuotationReplay + "一次报价回复数"}>{text}</span> }], title: '一次报价回复周期',
sorter: (a, b) => parseInt(b.SecondQuotationRate) - parseInt(a.SecondQuotationRate), children: [{ title: '', dataIndex: 'FirstQuotationReplaytimeAVG' }],
}, sorter: (a, b) => b.FirstQuotationReplaytimeAVG - a.FirstQuotationReplaytimeAVG,
{ },
title: "二次报价回复率", {
children: [{ title: "", dataIndex: "SecondQuotationReplayRate", render: (text, record) => <span title={record.SecondQuotation + "二次报价数/" + record.SecondQuotationReplay + "二次报价回复"}>{text}</span> }], title: '二次报价率',
sorter: (a, b) => parseInt(b.SecondQuotationReplayRate) - parseInt(a.SecondQuotationReplayRate), children: [
}, {
{ title: '',
title: "二次报价回复周期", dataIndex: 'SecondQuotationRate',
children: [{ title: "", dataIndex: "SecondQuotationReplaytimeAVG" }], render: (text, record) => <span title={record.SecondQuotation + '二次报价数/' + record.FirstQuotationReplay + '一次报价回复数'}>{text}</span>,
sorter: (a, b) => b.SecondQuotationReplaytimeAVG - a.SecondQuotationReplaytimeAVG, },
}, ],
{ sorter: (a, b) => parseInt(b.SecondQuotationRate) - parseInt(a.SecondQuotationRate),
title: "成团率", },
children: [{ title: "", dataIndex: "COLI_SuccessRate" }], {
sorter: (a, b) => parseInt(b.COLI_SuccessRate) - parseInt(a.COLI_SuccessRate), title: '二次报价回复率',
}, children: [
{ {
title: "成团周期", title: '',
children: [{ title: "", dataIndex: "COLI_ConfirmTimeAVG" }], dataIndex: 'SecondQuotationReplayRate',
sorter: (a, b) => b.COLI_ConfirmTimeAVG - a.COLI_ConfirmTimeAVG, render: (text, record) => <span title={record.SecondQuotation + '二次报价数/' + record.SecondQuotationReplay + '二次报价回复'}>{text}</span>,
}, },
]; ],
result.dataSource = json.result1; sorter: (a, b) => parseInt(b.SecondQuotationReplayRate) - parseInt(a.SecondQuotationReplayRate),
} else { },
// if (this.active_tab_key == "Country") {
// 获取类型的项目,去掉重复,作为列名 title: '二次报价回复周期',
const type_name_arr = []; children: [{ title: '', dataIndex: 'SecondQuotationReplaytimeAVG' }],
json.result1.map(item => { sorter: (a, b) => b.SecondQuotationReplaytimeAVG - a.SecondQuotationReplaytimeAVG,
type_name_arr[item.SubTypeSN] = { SubTypeSN: item.SubTypeSN, SubTypeName: item.SubTypeName }; },
{
title: '成团率',
children: [{ title: '', dataIndex: 'COLI_SuccessRate' }],
sorter: (a, b) => parseInt(b.COLI_SuccessRate) - parseInt(a.COLI_SuccessRate),
},
{
title: '成团周期',
children: [{ title: '', dataIndex: 'COLI_ConfirmTimeAVG' }],
sorter: (a, b) => b.COLI_ConfirmTimeAVG - a.COLI_ConfirmTimeAVG,
},
];
result.dataSource = json.result1;
} else {
// if (this.active_tab_key == "Country")
// 获取类型的项目,去掉重复,作为列名
const type_name_arr = [];
json.result1.map((item) => {
type_name_arr[item.SubTypeSN] = { SubTypeSN: item.SubTypeSN, SubTypeName: item.SubTypeName };
return item; return item;
}); });
const type_data = []; const type_data = [];
const type_data_arr = []; const type_data_arr = [];
for (const item of json.result1) { for (const item of json.result1) {
const op_sn = "OP_" + item.OPI_SN; // 顾问的SN const op_sn = 'OP_' + item.OPI_SN; // 顾问的SN
const items = json.result1.filter(d => String(d.OPI_SN) === String(item.OPI_SN)); // 筛选出有当前顾问的记录 const items = json.result1.filter((d) => String(d.OPI_SN) === String(item.OPI_SN)); // 筛选出有当前顾问的记录
const total_data_value = items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ""; // 记录累加 const total_data_value = items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ''; // 记录累加
if (comm.empty(type_data[op_sn])) { if (comm.empty(type_data[op_sn])) {
type_data[op_sn] = [{ key: item.OPI_SN }, { T_name: item.OPI_Name }, { T_total: total_data_value }]; type_data[op_sn] = [{ key: item.OPI_SN }, { T_name: item.OPI_Name }, { T_total: total_data_value }];
} }
type_data[op_sn].push({ ["T_" + item.SubTypeSN]: item.COLI_YJLY }); type_data[op_sn].push({ ['T_' + item.SubTypeSN]: item.COLI_YJLY });
} }
Object.values(type_data).map(item => { Object.values(type_data).map((item) => {
type_data_arr.push( type_data_arr.push(
Object.assign( Object.assign(
...item.map(it => { ...item.map((it) => {
return it; return it;
}) })
) )
); );
return item; return item;
}); });
result.columns.push( result.columns.push(
{ title: "顾问", children: [{ title: "", dataIndex: "T_name", render: (text, record) => <NavLink to={`/sale_sub/${this.active_tab_key}`}>{text}</NavLink> }] }, { title: '顾问', children: [{ title: '', dataIndex: 'T_name', render: (text, record) => <NavLink to={`/sale_sub/${this.active_tab_key}`}>{text}</NavLink> }] },
{ title: "合计", children: [{ title: type_data_arr.reduce((a, b) => a + b.T_total, 0), dataIndex: "T_total" }], sorter: (a, b) => b.T_total - a.T_total } { title: '合计', children: [{ title: type_data_arr.reduce((a, b) => a + b.T_total, 0), dataIndex: 'T_total' }], sorter: (a, b) => b.T_total - a.T_total }
); );
Object.values(type_name_arr).map((item, index) => { Object.values(type_name_arr).map((item, index) => {
const data_index = "T_" + item.SubTypeSN; const data_index = 'T_' + item.SubTypeSN;
const items = type_data_arr.filter(d => d[data_index]); // 筛选出有对应类型的记录 const items = type_data_arr.filter((d) => d[data_index]); // 筛选出有对应类型的记录
const total_data_value = items.length ? items.reduce((a, b) => a + b[data_index], 0) : ""; // 记录累加 const total_data_value = items.length ? items.reduce((a, b) => a + b[data_index], 0) : ''; // 记录累加
result.columns.push({ result.columns.push({
title: item.SubTypeName, title: item.SubTypeName,
children: [{ title: total_data_value, dataIndex: data_index }], children: [{ title: total_data_value, dataIndex: data_index }],
sorter: (a, b) => b[data_index] - a[data_index], sorter: (a, b) => b[data_index] - a[data_index],
}); });
return item; return item;
}); });
result.dataSource = type_data_arr; result.dataSource = type_data_arr;
} }
} }
runInAction(() => { runInAction(() => {
this.type_data = result; this.type_data = result;
this.loading_table = false; this.loading_table = false;
}); });
}) })
.catch(error => { .catch((error) => {
this.loading_table = false; this.loading_table = false;
console.log("fetch data failed", error); console.log('fetch data failed', error);
}); });
} }
// 子维度查询 // 子维度查询
get_department_order_ml_by_type_sub(date_moment, type_sub) { get_department_order_ml_by_type_sub(date_moment, type_sub) {
this.spinning = true; this.spinning = true;
const result = { dataSource: [], columns: [] }; const result = { dataSource: [], columns: [] };
const date1_start = date_moment.start_date.format(config.DATE_FORMAT); const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
const date1_end = date_moment.end_date.format(config.DATE_FORMAT); const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
const date2_start = comm.empty(date_moment.start_date_cp) ? "" : date_moment.start_date_cp.format(config.DATE_FORMAT); const date2_start = comm.empty(date_moment.start_date_cp) ? '' : date_moment.start_date_cp.format(config.DATE_FORMAT);
const date2_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT); const date2_end = comm.empty(date_moment.end_date_cp) ? '' : date_moment.end_date_cp.format(config.DATE_FORMAT);
let url = "/service-web/QueryData/GetDepartmentOrderMLByType_sub"; let url = '/service-web/QueryData/GetDepartmentOrderMLByType_sub';
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&subType=${type_sub}&subTypeVal=-1&WebCode=${this.webcode}&IncludeTickets=${this.include_tickets}`; url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&subType=${type_sub}&subTypeVal=-1&WebCode=${this.webcode}&IncludeTickets=${this.include_tickets}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) { if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
this.date_title += ` ${date2_start}~${date2_end}`; this.date_title += ` ${date2_start}~${date2_end}`;
} }
fetch(config.HT_HOST + url) fetch(config.HT_HOST + url)
.then(response => response.json()) .then((response) => response.json())
.then(json => { .then((json) => {
if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) {
} else { } else {
result.columns = [ result.columns = [
{ {
title: "", title: '',
dataIndex: "OPI_Name", dataIndex: 'OPI_Name',
}, },
{ {
title: "毛利", title: '毛利',
dataIndex: "COLI_ML", dataIndex: 'COLI_ML',
sorter: (a, b) => b.COLI_ML - a.COLI_ML, sorter: (a, b) => b.COLI_ML - a.COLI_ML,
}, },
{ {
title: "成行率", title: '成行率',
dataIndex: "COLI_CJrate", dataIndex: 'COLI_CJrate',
sorter: (a, b) => parseFloat(b.COLI_CJrate) - parseFloat(a.COLI_CJrate), sorter: (a, b) => parseFloat(b.COLI_CJrate) - parseFloat(a.COLI_CJrate),
}, },
{ {
title: "成团数", title: '成团数',
dataIndex: "COLI_CJCount", dataIndex: 'COLI_CJCount',
}, },
{ {
title: "订单数", title: '订单数',
dataIndex: "COLI_OrderCount", dataIndex: 'COLI_OrderCount',
sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount, sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount,
}, },
{ {
title: "单团毛利", title: '单团毛利',
dataIndex: "COLI_SingleML", dataIndex: 'COLI_SingleML',
}, },
{ {
title: "成团周期", title: '成团周期',
dataIndex: "COLI_Cycle", dataIndex: 'COLI_Cycle',
}, },
]; ];
// 数据处理,把相同类型放入同一个数组 // 数据处理,把相同类型放入同一个数组
const type_data = []; const type_data = [];
!comm.empty(json.result1) && !comm.empty(json.result1) &&
Object.values(json.result1).map(item => { Object.values(json.result1).map((item) => {
const subtype_sn = "type_" + item.subType; const subtype_sn = 'type_' + item.subType;
if (comm.empty(type_data[subtype_sn])) { if (comm.empty(type_data[subtype_sn])) {
type_data[subtype_sn] = { subType: item.subType, subType_name: item.subTypeVal, data: [item] }; type_data[subtype_sn] = { subType: item.subType, subType_name: item.subTypeVal, data: [item] };
} else { } else {
type_data[subtype_sn].data.push(item); type_data[subtype_sn].data.push(item);
} }
return item; return item;
}); });
result.dataSource = Object.values(type_data); result.dataSource = Object.values(type_data);
} }
runInAction(() => {
this.type_data_sub = result;
this.spinning = false;
});
})
.catch(error => {
this.spinning = false;
console.log("fetch data failed", error);
});
}
runInAction(() => {
this.type_data_sub = result;
this.spinning = false;
});
})
.catch((error) => {
this.spinning = false;
console.log('fetch data failed', error);
});
}
} }
export default SaleStore; export default SaleStore;

@ -36,8 +36,8 @@ const AgentGroupCount = () => {
return ( return (
<> <>
<Space direction="vertical" style={{ width: '100%' }}> <Space direction="vertical" style={{ width: '100%' }}>
<Row gutter={{ md: 24 }} justify="end"> <Row gutter={{ sm: 16, lg: 32 }} justify="end">
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<Select <Select
value={customerServicesStore.selectedAgent} value={customerServicesStore.selectedAgent}
style={{ width: '95%' }} style={{ width: '95%' }}
@ -56,13 +56,13 @@ const AgentGroupCount = () => {
{agentList.map(renderAgentItem)} {agentList.map(renderAgentItem)}
</Select> </Select>
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<GroupSelect value={customerServicesStore.selectedTeam} <GroupSelect value={customerServicesStore.selectedTeam}
onChange={(value) => customerServicesStore.selectTeam(value)} onChange={(value) => customerServicesStore.selectTeam(value)}
style={{ width: '95%' }} show_all={true} style={{ width: '95%' }} show_all={true}
/> />
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<Select <Select
value={customerServicesStore.selectedCountry} value={customerServicesStore.selectedCountry}
style={{ width: '95%' }} style={{ width: '95%' }}
@ -79,7 +79,7 @@ const AgentGroupCount = () => {
</Select.Option> </Select.Option>
</Select> </Select>
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<Select <Select
value={dateType} value={dateType}
style={{ width: '95%' }} style={{ width: '95%' }}
@ -93,7 +93,7 @@ const AgentGroupCount = () => {
</Select.Option> </Select.Option>
</Select> </Select>
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<DatePicker.RangePicker <DatePicker.RangePicker
format={config.DATE_FORMAT} format={config.DATE_FORMAT}
locale={zhCNlocale} locale={zhCNlocale}
@ -120,7 +120,7 @@ const AgentGroupCount = () => {
}} }}
/> />
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<Button <Button
type="primary" type="primary"
icon={<SearchOutlined />} icon={<SearchOutlined />}

@ -30,14 +30,14 @@ const DestinationGroupCount = () => {
return ( return (
<> <>
<Space direction="vertical" style={{ width: '100%' }}> <Space direction="vertical" style={{ width: '100%' }}>
<Row gutter={{ md: 24 }} justify="end"> <Row gutter={{ sm: 16, lg: 32 }} justify="end">
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<GroupSelect value={customerServicesStore.selectedTeam} <GroupSelect value={customerServicesStore.selectedTeam}
onChange={(value) => customerServicesStore.selectTeam(value)} onChange={(value) => customerServicesStore.selectTeam(value)}
style={{ width: '95%' }} show_all={true} style={{ width: '95%' }} show_all={true}
/> />
</Col> </Col>
<Col span={2}> <Col md={24} lg={8} xxl={8}>
<Select value={customerServicesStore.selectedCountry} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectCountry(value)}> <Select value={customerServicesStore.selectedCountry} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectCountry(value)}>
<Select.Option key="china" value="china"> <Select.Option key="china" value="china">
国内 国内
@ -47,7 +47,7 @@ const DestinationGroupCount = () => {
</Select.Option> </Select.Option>
</Select> </Select>
</Col> </Col>
<Col span={2}> <Col md={24} lg={8} xxl={8}>
<Select value={customerServicesStore.selectedOrderStatus} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectStatus(value)}> <Select value={customerServicesStore.selectedOrderStatus} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectStatus(value)}>
<Select.Option key="所有" value="-1"> <Select.Option key="所有" value="-1">
所有 所有
@ -60,7 +60,7 @@ const DestinationGroupCount = () => {
</Select.Option> </Select.Option>
</Select> </Select>
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}> <Select value={dateType} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectDateType(value)}>
<Select.Option key="startDate" value="startDate"> <Select.Option key="startDate" value="startDate">
走团日期 走团日期
@ -70,7 +70,7 @@ const DestinationGroupCount = () => {
</Select.Option> </Select.Option>
</Select> </Select>
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<DatePicker.RangePicker <DatePicker.RangePicker
format={config.DATE_FORMAT} locale={zhCNlocale} format={config.DATE_FORMAT} locale={zhCNlocale}
allowClear={false} allowClear={false}
@ -88,7 +88,7 @@ const DestinationGroupCount = () => {
}} }}
/> />
</Col> </Col>
<Col span={4}> <Col md={24} lg={8} xxl={8}>
<Button <Button
type="primary" type="primary"
icon={<SearchOutlined />} icon={<SearchOutlined />}

@ -1,122 +1,197 @@
import React, { useContext, useEffect } from "react"; import React, { useContext, useEffect } from 'react';
import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from "antd"; import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from 'antd';
import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from "@ant-design/icons"; import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons';
import { stores_Context } from "../config"; import { stores_Context } from '../config';
import { Column, Pie } from "@ant-design/charts"; import { Column, Pie, Treemap } from '@ant-design/charts';
import { observer } from "mobx-react"; import { observer } from 'mobx-react';
import DatePickerCharts from "../components/search/DatePickerCharts"; import DatePickerCharts from '../components/search/DatePickerCharts';
import DataTypeSelect from "../components/search/DataTypeSelect"; import DataTypeSelect from '../components/search/DataTypeSelect';
import { NavLink, useParams } from "react-router-dom"; import { NavLink, useParams } from 'react-router-dom';
import * as comm from "../utils/commons"; import * as comm from '../utils/commons';
import * as config from "../config"; import * as config from '../config';
import SiteSelect from "../components/search/SiteSelect"; import SiteSelect from '../components/search/SiteSelect';
import GroupSelect from "../components/search/GroupSelect"; import GroupSelect from '../components/search/GroupSelect';
import { utils, writeFileXLSX } from "xlsx"; import { utils, writeFileXLSX } from 'xlsx';
const Sale = () => { const Sale = () => {
const { sale_store, date_picker_store } = useContext(stores_Context); const { sale_store, date_picker_store } = useContext(stores_Context);
const ml_data = sale_store.ml_data; // //const ml_data = sale_store.ml_data; //
const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; // const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; //
const column_config = { // const column_config = {
data: ml_data, // data: type_data.dataSource,
xField: "COLI_Date", // xField: 'OPI_Name',
yField: "COLI_YJLY", // yField: 'COLI_ML2',
seriesField: "groups", // //seriesField: "OPI_Name",
label: { // label: {
position: "top", // position: 'top',
}, // },
legend: { // xAxis: {
itemValue: { // label: {
formatter: (text, item) => { // autoHide: false,
const items = ml_data.filter(d => d.groups === item.value); // // autoRotate: true,
return items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ""; // // },
}, // },
}, // // legend: {
}, // // itemValue: {
tooltip: { // // formatter: (text, item) => {
// customContent: (title, items) => { // // const items = ml_data.filter(d => d.groups === item.value); //
// const data = items[0]?.data || {}; // // return items.length ? items.reduce((a, b) => a + b.COLI_ML, 0) : ""; //
// return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`; // // },
// } // // },
title: (title, datum) => { // // },
return title + " " + comm.getWeek(datum.COLI_Date); // // // tooltip: {
}, // // customContent: (title, items) => {
}, // // const data = items[0].data || {};console.log(data);
}; // // return `<div>${title}</div>wwwwwww<div></div>`;
// // },
// // title: (title, datum) => {
// // return title; // + " " + comm.getWeek(datum.COLI_Date); //
// // },
// // },
// };
// const column_config_create = (tab_name) => {
const format_data_for_pie = (data = []) => { let config_data = {
return data.map(item => ({...item, COLI_ML_number: comm.price_to_number(item.COLI_ML)})); //seriesField: "OPI_Name",
}; label: {
position: 'top',
},
xAxis: {
label: {
autoHide: false,
autoRotate: true,
},
},
// legend: {
// itemValue: {
// formatter: (text, item) => {
// const items = ml_data.filter(d => d.groups === item.value); //
// return items.length ? items.reduce((a, b) => a + b.COLI_ML, 0) : ""; //
// },
// },
// },
// tooltip: {
// customContent: (title, items) => {
// const data = items[0].data || {};console.log(data);
// return `<div>${title}</div>wwwwwww<div></div>`;
// },
// title: (title, datum) => {
// return title; // + " " + comm.getWeek(datum.COLI_Date); //
// },
// },};
};
switch (tab_name) {
case 'All':
config_data.data = type_data.dataSource;
config_data.xField = 'OPI_Name';
config_data.yField = 'COLI_ML2';
break;
case 'ResponseRateWhatsApp':
config_data.data = type_data.dataSource;
config_data.xField = 'OPI_Name';
config_data.yField = 'COLI_ConfirmTimeAVG';
break;
case 'ResponseRateByWL':
config_data.data = type_data.dataSource;
config_data.xField = 'OPI_Name';
config_data.yField = 'PriceTime';
break;
default:
config_data.data = [];
break;
}
return config_data;
};
const column_config = column_config_create(sale_store.active_tab_key);
const pie_config = { //
appendPadding: 10, // const format_data_for_treemap=(data=[])=>{
data: format_data_for_pie(type_data.dataSource), // const children_array= data.map(item => ({...item, name: item.OPI_Name,value:item.COLI_ML2}));
angleField: "COLI_ML_number", // return {
colorField: "OPI_Name", // name: 'root',
radius: 0.8, // children:children_array,
label: { // };
type: "outer", // };
content: "{name} {value} \n {percentage}",
},
legend: false, //
interactions: [
{
type: "element-selected",
},
{
type: "element-active",
},
],
};
return ( // const treemap_config={
<div> // data:format_data_for_treemap(type_data.dataSource),
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> // colorField: 'OPI_Name',
<Col md={24} lg={12} xxl={14}></Col> // };
<Col md={24} lg={12} xxl={10}>
<Row> //
<Col md={24} lg={8} xxl={8}> const format_data_for_pie = (data = []) => {
<GroupSelect store={sale_store} /> return data.map((item) => ({ ...item, COLI_ML_number: comm.price_to_number(item.COLI_ML) }));
</Col> };
<Col md={24} lg={8} xxl={8}>
<SiteSelect store={sale_store} show_all={true} /> const pie_config = {
</Col> appendPadding: 10,
<Col md={24} lg={8} xxl={8}> data: format_data_for_pie(type_data.dataSource),
<Select style={{ width: "100%" }} placeholder="是否含门票" value={sale_store.include_tickets} onChange={sale_store.handleChange_include_tickets}> angleField: 'COLI_ML_number',
<Select.Option key="1" value="1"> colorField: 'OPI_Name',
含门票 radius: 0.8,
</Select.Option> label: {
<Select.Option key="0" value="0"> type: 'outer',
不含门票 content: '{name} {value} \n {percentage}',
</Select.Option> },
</Select> legend: false, //
</Col> interactions: [
</Row> {
<Row> type: 'element-selected',
<Col md={24} lg={8} xxl={8}> },
<DataTypeSelect store={sale_store} /> {
</Col> type: 'element-active',
<Col md={24} lg={12} xxl={12}> },
<DatePickerCharts /> ],
</Col> };
<Col md={24} lg={4} xxl={4} className="align_right">
<Button
type="primary"
icon={<SearchOutlined />}
loading={sale_store.loading}
onClick={() => {
sale_store.get_department_order_ml(date_picker_store);
sale_store.get_department_order_ml_by_type(date_picker_store);
}}>
统计
</Button>
</Col>
</Row>
{/* <Row> return (
<div>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col md={24} lg={12} xxl={14}></Col>
<Col md={24} lg={12} xxl={10}>
<Row>
<Col md={24} lg={8} xxl={8}>
<GroupSelect store={sale_store} />
</Col>
<Col md={24} lg={8} xxl={8}>
<SiteSelect store={sale_store} show_all={true} />
</Col>
<Col md={24} lg={8} xxl={8}>
<Select style={{ width: '100%' }} placeholder="是否含门票" value={sale_store.include_tickets} onChange={sale_store.handleChange_include_tickets}>
<Select.Option key="1" value="1">
含门票
</Select.Option>
<Select.Option key="0" value="0">
不含门票
</Select.Option>
</Select>
</Col>
</Row>
<Row>
<Col md={24} lg={8} xxl={8}>
<DataTypeSelect store={sale_store} />
</Col>
<Col md={24} lg={12} xxl={12}>
<DatePickerCharts />
</Col>
<Col md={24} lg={4} xxl={4} className="align_right">
<Button
type="primary"
icon={<SearchOutlined />}
loading={sale_store.loading}
onClick={() => {
// sale_store.get_department_order_ml(date_picker_store);
sale_store.get_department_order_ml_by_type(date_picker_store);
}}
>
统计
</Button>
</Col>
</Row>
{/* <Row>
<Col md={24} lg={12} xxl={12}> <Col md={24} lg={12} xxl={12}>
<Select mode="multiple" style={{ width: "100%" }} placeholder="筛选国籍" value={sale_store.filter_country} onChange={value => sale_store.onChange_Country(value)} allowClear={true}> <Select mode="multiple" style={{ width: "100%" }} placeholder="筛选国籍" value={sale_store.filter_country} onChange={value => sale_store.onChange_Country(value)} allowClear={true}>
<Select.Option key="3" value="3"> <Select.Option key="3" value="3">
@ -150,104 +225,115 @@ const Sale = () => {
</Select> </Select>
</Col> </Col>
</Row> */} </Row> */}
</Col>
</Row>
</Col> <Row>
</Row> <Col className="gutter-row" md={24}>
<Column {...column_config} />
<Row> </Col>
<Col className="gutter-row" md={24}>
<Column {...column_config} />
</Col>
<Col className="gutter-row" md={24}> <Col className="gutter-row" md={24}>
<Tabs <Tabs
activeKey={sale_store.active_tab_key} activeKey={sale_store.active_tab_key}
onChange={active_key => { onChange={(active_key) => {
sale_store.onChange_Tabs(active_key); sale_store.onChange_Tabs(active_key);
sale_store.get_department_order_ml_by_type(date_picker_store); sale_store.get_department_order_ml_by_type(date_picker_store);
}}> }}
<Tabs.TabPane >
tab={ <Tabs.TabPane
<span> tab={
<ContainerOutlined /> 总览 <span>
</span> <ContainerOutlined /> 总览
} </span>
key="All"></Tabs.TabPane> }
<Tabs.TabPane key="All"
tab={ ></Tabs.TabPane>
<span> <Tabs.TabPane
<UserSwitchOutlined /> 回复率 tab={
</span> <span>
} <UserSwitchOutlined /> 回复率
key="ResponseRateWhatsApp"></Tabs.TabPane> </span>
<Tabs.TabPane }
tab={ key="ResponseRateWhatsApp"
<span> ></Tabs.TabPane>
<UserSwitchOutlined /> 沟通数据 <Tabs.TabPane
</span> tab={
} <span>
key="ResponseRateByWL"></Tabs.TabPane> <UserSwitchOutlined /> 沟通数据
<Tabs.TabPane </span>
tab={ }
<span> key="ResponseRateByWL"
<ContainerOutlined /> 国籍 ></Tabs.TabPane>
</span> <Tabs.TabPane
} tab={
key="Country"></Tabs.TabPane> <span>
<Tabs.TabPane <ContainerOutlined /> 国籍
tab={ </span>
<span> }
<ContainerOutlined /> key="Country"
产品类型 ></Tabs.TabPane>
</span> <Tabs.TabPane
} tab={
key="Product"></Tabs.TabPane> <span>
<Tabs.TabPane <ContainerOutlined />
tab={ 产品类型
<span> </span>
<ContainerOutlined /> }
出行目的 key="Product"
</span> ></Tabs.TabPane>
} <Tabs.TabPane
key="TravelMotivation"></Tabs.TabPane> tab={
<Tabs.TabPane <span>
tab={ <ContainerOutlined />
<span> 出行目的
<ContainerOutlined /> </span>
成员关系 }
</span> key="TravelMotivation"
} ></Tabs.TabPane>
key="GuestGroupType"></Tabs.TabPane> <Tabs.TabPane
</Tabs> tab={
<Row> <span>
<Col span={24}> <ContainerOutlined />
<Table 成员关系
id="table_to_xlsx_sale" </span>
dataSource={type_data.dataSource} }
columns={type_data.columns} key="GuestGroupType"
size="small" ></Tabs.TabPane>
rowKey={record => record.key} </Tabs>
loading={sale_store.loading_table} <Row>
pagination={false} <Col span={24}>
scroll={{ x: "100%" }} <Table
/> id="table_to_xlsx_sale"
<Divider orientation="right" plain> dataSource={type_data.dataSource}
<a columns={type_data.columns}
onClick={() => { size="small"
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_sale").getElementsByTagName("table")[0]); rowKey={(record) => record.key}
writeFileXLSX(wb, "sale.xlsx"); loading={sale_store.loading_table}
}}> pagination={false}
导出excel scroll={{ x: '100%' }}
</a> />
</Divider> <Divider orientation="right" plain>
</Col> <a
<Col sm={24} lg={12}> onClick={() => {
{sale_store.active_tab_key === "All" ? <Pie {...pie_config} /> : ""} const wb = utils.table_to_book(document.getElementById('table_to_xlsx_sale').getElementsByTagName('table')[0]);
</Col> writeFileXLSX(wb, 'sale.xlsx');
</Row> }}
</Col> >
</Row> 导出excel
</div> </a>
); </Divider>
</Col>
<Col sm={24} lg={12}>
{sale_store.active_tab_key === 'All' ? <Pie {...pie_config} /> : ''}
</Col>
{/* <Col sm={24} lg={24}>
<Treemap {...treemap_config} />
</Col> */}
</Row>
</Col>
</Row>
</div>
);
}; };
export default observer(Sale); export default observer(Sale);

Loading…
Cancel
Save