diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js index 66baf58..0ed662f 100644 --- a/src/stores/SaleStore.js +++ b/src/stores/SaleStore.js @@ -1,425 +1,442 @@ -import { makeAutoObservable, runInAction } from "mobx"; -import moment from "moment"; -import * as config from "../config"; -import * as comm from "../utils/commons"; -import { NavLink } from "react-router-dom"; +import { makeAutoObservable, runInAction } from 'mobx'; +import moment from 'moment'; +import * as config from '../config'; +import * as comm from '../utils/commons'; +import { NavLink } from 'react-router-dom'; import { groupsMappedByCode } from './../libs/ht'; // 销售数据 class SaleStore { - constructor(rootStore) { - this.rootStore = rootStore; - makeAutoObservable(this); - } + constructor(rootStore) { + this.rootStore = rootStore; + makeAutoObservable(this); + } - loading = false; - loading_table = false; - spinning = false; // 加载状态 - active_tab_key = "All"; // 当前选择的标签 - group_select_mode = false; - groups = [groupsMappedByCode.GH.key]; // 默认GH事业部 - filter_country=[];// 筛选国籍 - filter_guest_type=[];// 筛选客户关系 - site_select_mode = false; // 是否多选站点 - include_tickets = "1"; // 是否包含门票，1是含有，0不含 - webcode = "ALL"; - date_type = "ConfirmDate"; - ml_data = []; // 毛利数据 - type_data = []; // 类型的数据 - type_data_sub = []; // 类型的子维度数据 - date_title = "date_title"; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新 + loading = false; + loading_table = false; + spinning = false; // 加载状态 + active_tab_key = 'All'; // 当前选择的标签 + group_select_mode = false; + groups = [groupsMappedByCode.GH.key]; // 默认GH事业部 + filter_country = []; // 筛选国籍 + filter_guest_type = []; // 筛选客户关系 + site_select_mode = false; // 是否多选站点 + include_tickets = '1'; // 是否包含门票，1是含有，0不含 + webcode = 'ALL'; + date_type = 'ConfirmDate'; + ml_data = []; // 毛利数据 + type_data = []; // 类型的数据 + type_data_sub = []; // 类型的子维度数据 + date_title = 'date_title'; // 日期段，只用于显示，防止日期选择控件的变化导致页面刷新 - // 是否包含门票 - handleChange_include_tickets = value => { - this.include_tickets = value; - }; + // 是否包含门票 + handleChange_include_tickets = (value) => { + this.include_tickets = value; + }; - // 选择事业部 - group_handleChange(value) { - this.groups = value; - } + // 选择事业部 + group_handleChange(value) { + this.groups = value; + } - // 选择站点 - handleChange_webcode = value => { - this.webcode = value; - }; + // 选择站点 + handleChange_webcode = (value) => { + this.webcode = value; + }; - // 切换标签页 - onChange_Tabs(active_key) { - this.active_tab_key = active_key; - } + // 切换标签页 + onChange_Tabs(active_key) { + this.active_tab_key = active_key; + } - // 下单日期或者出发日期 - onChange_datetype(value) { - this.date_type = value; - } + // 下单日期或者出发日期 + onChange_datetype(value) { + this.date_type = value; + } - // 选择客源国 - onChange_Country(value) { - this.filter_country = value; - } + // 选择客源国 + onChange_Country(value) { + this.filter_country = value; + } - // 选择成员关系 - onChange_GuestGroupType(value) { - this.filter_guest_type = value; - } + // 选择成员关系 + onChange_GuestGroupType(value) { + this.filter_guest_type = value; + } - // 获取业绩信息 - get_department_order_ml(date_moment) { - let result = []; - const date1_start = date_moment.start_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_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT); - this.loading = true; - this.date_title = `${date1_start}~${date1_end}`; - let url = "/service-web/QueryData/GetDepartmentOrderML"; - 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`; - if (date2_start && date2_end) { - url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; - this.date_title += ` ${date2_start}~${date2_end}`; - } - fetch(config.HT_HOST + url) - .then(response => response.json()) - .then(json => { - result = json.result1; - // 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"); - // for (let item of json.result2) { - // result.push({ - // COLI_Date: moment(item.COLI_Date).add(diff_days, "days").format(config.DATE_FORMAT), - // COLI_YJLY: item.COLI_YJLY, - // groups: item.groups, - // key: item.key, - // }); - // } - // } - runInAction(() => { - this.ml_data = result; - this.loading = false; - }); - }) - .catch(error => { - this.loading = false; - console.log("fetch data failed", error); - }); - } + // 获取业绩信息 + get_department_order_ml(date_moment) { + let result = []; + const date1_start = date_moment.start_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_end = comm.empty(date_moment.end_date_cp) ? '' : date_moment.end_date_cp.format(config.DATE_FORMAT); + this.loading = true; + this.date_title = `${date1_start}~${date1_end}`; + let url = '/service-web/QueryData/GetDepartmentOrderML'; + 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`; + if (date2_start && date2_end) { + url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; + this.date_title += ` ${date2_start}~${date2_end}`; + } + fetch(config.HT_HOST + url) + .then((response) => response.json()) + .then((json) => { + result = json.result1; + // 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"); + // for (let item of json.result2) { + // result.push({ + // COLI_Date: moment(item.COLI_Date).add(diff_days, "days").format(config.DATE_FORMAT), + // COLI_YJLY: item.COLI_YJLY, + // groups: item.groups, + // key: item.key, + // }); + // } + // } + runInAction(() => { + this.ml_data = result; + this.loading = false; + }); + }) + .catch((error) => { + this.loading = false; + console.log('fetch data failed', error); + }); + } - // 按类型获取业绩 - get_department_order_ml_by_type(date_moment) { - const result = { dataSource: [], columns: [] }; - const date1_start = date_moment.start_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_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT); - this.loading_table = true; - this.date_title = `${date1_start}~${date1_end}`; - 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 += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; - if (date2_start && date2_end) { - url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; - this.date_title += ` ${date2_start}~${date2_end}`; - } - fetch(config.HT_HOST + url) - .then(response => response.json()) - .then(json => { - if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { - } else { - if (this.active_tab_key === "All") { - result.columns = [ - { - title: "", - children: [ - { - title: "", - dataIndex: "OPI_Name", - }, - ], - }, - { - title: "毛利", - 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), - }, - { - 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" }], - sorter: (a, b) => parseInt(b.COLI_CJrate) - parseInt(a.COLI_CJrate), - }, - { - title: "成团数", - children: [{ title: json.result1.reduce((a, b) => a + b.COLI_CJCount, 0), dataIndex: "COLI_CJCount" }], - sorter: (a, b) => b.COLI_CJCount - a.COLI_CJCount, - }, - { - title: "订单数", - children: [{ title: json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0), dataIndex: "COLI_OrderCount" }], - sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount, - }, - { - title: "单团毛利", - children: [{ title: "", dataIndex: "COLI_SingleML" }], - sorter: (a, b) => comm.price_to_number(b.COLI_SingleML) - comm.price_to_number(a.COLI_SingleML), - }, - { - title: "成团周期", - children: [{ title: "", dataIndex: "COLI_Cycle" }], - sorter: (a, b) => b.COLI_Cycle - a.COLI_Cycle, - }, - ]; - result.dataSource = json.result1; - } else if (this.active_tab_key === "ResponseRateByWL") { - result.columns = [ - { - title: "", - children: [ - { - title: "", - dataIndex: "OPI_Name", - }, - ], - }, - { - title: "报价次数", - children: [{ title: json.result1.reduce((a, b) => a + b.PriceTime, 0), dataIndex: "PriceTime" }], - sorter: (a, b) => b.PriceTime - a.PriceTime, - }, - { - title: "邮件发送次数", - children: [{ title: json.result1.reduce((a, b) => a + b.mailSendTime, 0), dataIndex: "mailSendTime" }], - sorter: (a, b) => b.mailSendTime - a.mailSendTime, - }, - { - title: "WhatsApp客人会话次数", - children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppGuestChatCount, 0), dataIndex: "WhatsAppGuestChatCount" }], - sorter: (a, b) => b.WhatsAppGuestChatCount - a.WhatsAppGuestChatCount, - }, - { - title: "WhatsApp外联会话次数", - children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppWLChatCount, 0), dataIndex: "WhatsAppWLChatCount" }], - sorter: (a, b) => b.WhatsAppWLChatCount - a.WhatsAppWLChatCount, - }, - { - title: "WhatsApp新增客户数", - children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppNewGuestCount, 0), dataIndex: "WhatsAppNewGuestCount" }], - sorter: (a, b) => b.WhatsAppNewGuestCount - a.WhatsAppNewGuestCount, - }, - { - title: "微信客人会话次数", - children: [{ title: json.result1.reduce((a, b) => a + b.WXGuestChatCount, 0), dataIndex: "WXGuestChatCount" }], - sorter: (a, b) => b.WXGuestChatCount - a.WXGuestChatCount, - }, - { - title: "微信外联会话次数", - children: [{ title: json.result1.reduce((a, b) => a + b.WXWLChatCount, 0), dataIndex: "WXWLChatCount" }], - sorter: (a, b) => b.WXWLChatCount - a.WXWLChatCount, - }, - { - title: "微信新增客户数", - children: [{ title: json.result1.reduce((a, b) => a + b.WXNewGuestCount, 0), dataIndex: "WXNewGuestCount" }], - sorter: (a, b) => b.WXNewGuestCount - a.WXNewGuestCount, - }, - ]; - result.dataSource = json.result1; - } else if (this.active_tab_key === "ResponseRateWhatsApp") { - result.columns = [ - { - title: "", - children: [ - { - title: "", - dataIndex: "OPI_Name", - }, - ], - }, - { - title: "首次回复率", - children: [{ title: "", dataIndex: "firstReplayRate", render: (text, record) => {text} }], - sorter: (a, b) => parseInt(b.firstReplayRate) - parseInt(a.firstReplayRate), - }, - { - title: "一次报价率", - children: [{ title: "", dataIndex: "FirstQuotationRate", render: (text, record) => {text} }], - sorter: (a, b) => parseInt(b.FirstQuotationRate) - parseInt(a.FirstQuotationRate), - }, - { - title: "一次报价回复率", - children: [{ title: "", dataIndex: "FirstQuotationReplayRate", render: (text, record) => {text} }], - sorter: (a, b) => parseInt(b.FirstQuotationReplayRate) - parseInt(a.FirstQuotationReplayRate), - }, - { - title: "一次报价回复周期", - children: [{ title: "", dataIndex: "FirstQuotationReplaytimeAVG" }], - sorter: (a, b) => b.FirstQuotationReplaytimeAVG - a.FirstQuotationReplaytimeAVG, - }, - { - title: "二次报价率", - children: [{ title: "", dataIndex: "SecondQuotationRate", render: (text, record) => {text} }], - sorter: (a, b) => parseInt(b.SecondQuotationRate) - parseInt(a.SecondQuotationRate), - }, - { - title: "二次报价回复率", - children: [{ title: "", dataIndex: "SecondQuotationReplayRate", render: (text, record) => {text} }], - sorter: (a, b) => parseInt(b.SecondQuotationReplayRate) - parseInt(a.SecondQuotationReplayRate), - }, - { - title: "二次报价回复周期", - children: [{ title: "", dataIndex: "SecondQuotationReplaytimeAVG" }], - sorter: (a, b) => b.SecondQuotationReplaytimeAVG - a.SecondQuotationReplaytimeAVG, - }, - { - 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 }; + // 按类型获取业绩 + get_department_order_ml_by_type(date_moment) { + const result = { dataSource: [], columns: [] }; + const date1_start = date_moment.start_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_end = comm.empty(date_moment.end_date_cp) ? '' : date_moment.end_date_cp.format(config.DATE_FORMAT); + this.loading_table = true; + this.date_title = `${date1_start}~${date1_end}`; + 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 += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; + if (date2_start && date2_end) { + url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; + this.date_title += ` ${date2_start}~${date2_end}`; + } + fetch(config.HT_HOST + url) + .then((response) => response.json()) + .then((json) => { + if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { + } else { + if (this.active_tab_key === 'All') { + result.columns = [ + { + title: '', + children: [ + { + title: '', + dataIndex: 'OPI_Name', + }, + ], + }, + { + title: '毛利', + 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), + }, + { + 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' }], + sorter: (a, b) => parseInt(b.COLI_CJrate) - parseInt(a.COLI_CJrate), + }, + { + title: '成团数', + children: [{ title: json.result1.reduce((a, b) => a + b.COLI_CJCount, 0), dataIndex: 'COLI_CJCount' }], + sorter: (a, b) => b.COLI_CJCount - a.COLI_CJCount, + }, + { + title: '订单数', + children: [{ title: json.result1.reduce((a, b) => a + b.COLI_OrderCount, 0), dataIndex: 'COLI_OrderCount' }], + sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount, + }, + { + title: '单团毛利', + children: [{ title: '', dataIndex: 'COLI_SingleML' }], + sorter: (a, b) => comm.price_to_number(b.COLI_SingleML) - comm.price_to_number(a.COLI_SingleML), + }, + { + title: '成团周期', + children: [{ title: '', dataIndex: 'COLI_Cycle' }], + sorter: (a, b) => b.COLI_Cycle - a.COLI_Cycle, + }, + ]; + result.dataSource = json.result1; + } else if (this.active_tab_key === 'ResponseRateByWL') { + result.columns = [ + { + title: '', + children: [ + { + title: '', + dataIndex: 'OPI_Name', + }, + ], + }, + { + title: '报价次数', + children: [{ title: json.result1.reduce((a, b) => a + b.PriceTime, 0), dataIndex: 'PriceTime' }], + sorter: (a, b) => b.PriceTime - a.PriceTime, + }, + { + title: '邮件发送次数', + children: [{ title: json.result1.reduce((a, b) => a + b.mailSendTime, 0), dataIndex: 'mailSendTime' }], + sorter: (a, b) => b.mailSendTime - a.mailSendTime, + }, + { + title: 'WhatsApp客人会话次数', + children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppGuestChatCount, 0), dataIndex: 'WhatsAppGuestChatCount' }], + sorter: (a, b) => b.WhatsAppGuestChatCount - a.WhatsAppGuestChatCount, + }, + { + title: 'WhatsApp外联会话次数', + children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppWLChatCount, 0), dataIndex: 'WhatsAppWLChatCount' }], + sorter: (a, b) => b.WhatsAppWLChatCount - a.WhatsAppWLChatCount, + }, + { + title: 'WhatsApp新增客户数', + children: [{ title: json.result1.reduce((a, b) => a + b.WhatsAppNewGuestCount, 0), dataIndex: 'WhatsAppNewGuestCount' }], + sorter: (a, b) => b.WhatsAppNewGuestCount - a.WhatsAppNewGuestCount, + }, + { + title: '微信客人会话次数', + children: [{ title: json.result1.reduce((a, b) => a + b.WXGuestChatCount, 0), dataIndex: 'WXGuestChatCount' }], + sorter: (a, b) => b.WXGuestChatCount - a.WXGuestChatCount, + }, + { + title: '微信外联会话次数', + children: [{ title: json.result1.reduce((a, b) => a + b.WXWLChatCount, 0), dataIndex: 'WXWLChatCount' }], + sorter: (a, b) => b.WXWLChatCount - a.WXWLChatCount, + }, + { + title: '微信新增客户数', + children: [{ title: json.result1.reduce((a, b) => a + b.WXNewGuestCount, 0), dataIndex: 'WXNewGuestCount' }], + sorter: (a, b) => b.WXNewGuestCount - a.WXNewGuestCount, + }, + ]; + result.dataSource = json.result1; + } else if (this.active_tab_key === 'ResponseRateWhatsApp') { + result.columns = [ + { + title: '', + children: [ + { + title: '', + dataIndex: 'OPI_Name', + }, + ], + }, + { + title: '首次回复率', + children: [{ title: '', dataIndex: 'firstReplayRate', render: (text, record) => {text} }], + sorter: (a, b) => parseInt(b.firstReplayRate) - parseInt(a.firstReplayRate), + }, + { + title: '一次报价率', + children: [{ title: '', dataIndex: 'FirstQuotationRate', render: (text, record) => {text} }], + sorter: (a, b) => parseInt(b.FirstQuotationRate) - parseInt(a.FirstQuotationRate), + }, + { + title: '一次报价回复率', + children: [ + { + title: '', + dataIndex: 'FirstQuotationReplayRate', + render: (text, record) => {text}, + }, + ], + sorter: (a, b) => parseInt(b.FirstQuotationReplayRate) - parseInt(a.FirstQuotationReplayRate), + }, + { + title: '一次报价回复周期', + children: [{ title: '', dataIndex: 'FirstQuotationReplaytimeAVG' }], + sorter: (a, b) => b.FirstQuotationReplaytimeAVG - a.FirstQuotationReplaytimeAVG, + }, + { + title: '二次报价率', + children: [ + { + title: '', + dataIndex: 'SecondQuotationRate', + render: (text, record) => {text}, + }, + ], + sorter: (a, b) => parseInt(b.SecondQuotationRate) - parseInt(a.SecondQuotationRate), + }, + { + title: '二次报价回复率', + children: [ + { + title: '', + dataIndex: 'SecondQuotationReplayRate', + render: (text, record) => {text}, + }, + ], + sorter: (a, b) => parseInt(b.SecondQuotationReplayRate) - parseInt(a.SecondQuotationReplayRate), + }, + { + title: '二次报价回复周期', + children: [{ title: '', dataIndex: 'SecondQuotationReplaytimeAVG' }], + sorter: (a, b) => b.SecondQuotationReplaytimeAVG - a.SecondQuotationReplaytimeAVG, + }, + { + 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; - }); + }); - const type_data = []; - const type_data_arr = []; + const type_data = []; + const type_data_arr = []; - for (const item of json.result1) { - const op_sn = "OP_" + item.OPI_SN; // 顾问的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) : ""; // 记录累加 - 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].push({ ["T_" + item.SubTypeSN]: item.COLI_YJLY }); - } - Object.values(type_data).map(item => { - type_data_arr.push( - Object.assign( - ...item.map(it => { - return it; - }) - ) - ); + for (const item of json.result1) { + const op_sn = 'OP_' + item.OPI_SN; // 顾问的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) : ''; // 记录累加 + 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].push({ ['T_' + item.SubTypeSN]: item.COLI_YJLY }); + } + Object.values(type_data).map((item) => { + type_data_arr.push( + Object.assign( + ...item.map((it) => { + return it; + }) + ) + ); return item; - }); - result.columns.push( - { title: "顾问", children: [{ title: "", dataIndex: "T_name", render: (text, record) => {text} }] }, - { 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) => { - const data_index = "T_" + item.SubTypeSN; - 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) : ""; // 记录累加 - result.columns.push({ - title: item.SubTypeName, - children: [{ title: total_data_value, dataIndex: data_index }], - sorter: (a, b) => b[data_index] - a[data_index], - }); + }); + result.columns.push( + { title: '顾问', children: [{ title: '', dataIndex: 'T_name', render: (text, record) => {text} }] }, + { 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) => { + const data_index = 'T_' + item.SubTypeSN; + 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) : ''; // 记录累加 + result.columns.push({ + title: item.SubTypeName, + children: [{ title: total_data_value, dataIndex: data_index }], + sorter: (a, b) => b[data_index] - a[data_index], + }); return item; - }); - result.dataSource = type_data_arr; - } - } - runInAction(() => { - this.type_data = result; - this.loading_table = false; - }); - }) - .catch(error => { - this.loading_table = false; - console.log("fetch data failed", error); - }); - } + }); + result.dataSource = type_data_arr; + } + } + runInAction(() => { + this.type_data = result; + this.loading_table = false; + }); + }) + .catch((error) => { + this.loading_table = false; + console.log('fetch data failed', error); + }); + } - // 子维度查询 - get_department_order_ml_by_type_sub(date_moment, type_sub) { - this.spinning = true; - const result = { dataSource: [], columns: [] }; - const date1_start = date_moment.start_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_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT); - 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 += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; - if (date2_start && date2_end) { - url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; - this.date_title += ` ${date2_start}~${date2_end}`; - } - fetch(config.HT_HOST + url) - .then(response => response.json()) - .then(json => { - if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { - } else { - result.columns = [ - { - title: "", - dataIndex: "OPI_Name", - }, - { - title: "毛利", - dataIndex: "COLI_ML", - sorter: (a, b) => b.COLI_ML - a.COLI_ML, - }, - { - title: "成行率", - dataIndex: "COLI_CJrate", - sorter: (a, b) => parseFloat(b.COLI_CJrate) - parseFloat(a.COLI_CJrate), - }, - { - title: "成团数", - dataIndex: "COLI_CJCount", - }, - { - title: "订单数", - dataIndex: "COLI_OrderCount", - sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount, - }, - { - title: "单团毛利", - dataIndex: "COLI_SingleML", - }, - { - title: "成团周期", - dataIndex: "COLI_Cycle", - }, - ]; - // 数据处理，把相同类型放入同一个数组 - const type_data = []; - !comm.empty(json.result1) && - Object.values(json.result1).map(item => { - const subtype_sn = "type_" + item.subType; - if (comm.empty(type_data[subtype_sn])) { - type_data[subtype_sn] = { subType: item.subType, subType_name: item.subTypeVal, data: [item] }; - } else { - type_data[subtype_sn].data.push(item); - } + // 子维度查询 + get_department_order_ml_by_type_sub(date_moment, type_sub) { + this.spinning = true; + const result = { dataSource: [], columns: [] }; + const date1_start = date_moment.start_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_end = comm.empty(date_moment.end_date_cp) ? '' : date_moment.end_date_cp.format(config.DATE_FORMAT); + 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 += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`; + if (date2_start && date2_end) { + url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`; + this.date_title += ` ${date2_start}~${date2_end}`; + } + fetch(config.HT_HOST + url) + .then((response) => response.json()) + .then((json) => { + if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { + } else { + result.columns = [ + { + title: '', + dataIndex: 'OPI_Name', + }, + { + title: '毛利', + dataIndex: 'COLI_ML', + sorter: (a, b) => b.COLI_ML - a.COLI_ML, + }, + { + title: '成行率', + dataIndex: 'COLI_CJrate', + sorter: (a, b) => parseFloat(b.COLI_CJrate) - parseFloat(a.COLI_CJrate), + }, + { + title: '成团数', + dataIndex: 'COLI_CJCount', + }, + { + title: '订单数', + dataIndex: 'COLI_OrderCount', + sorter: (a, b) => b.COLI_OrderCount - a.COLI_OrderCount, + }, + { + title: '单团毛利', + dataIndex: 'COLI_SingleML', + }, + { + title: '成团周期', + dataIndex: 'COLI_Cycle', + }, + ]; + // 数据处理，把相同类型放入同一个数组 + const type_data = []; + !comm.empty(json.result1) && + Object.values(json.result1).map((item) => { + const subtype_sn = 'type_' + item.subType; + if (comm.empty(type_data[subtype_sn])) { + type_data[subtype_sn] = { subType: item.subType, subType_name: item.subTypeVal, data: [item] }; + } else { + type_data[subtype_sn].data.push(item); + } return item; - }); - 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); - }); - } + }); + 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); + }); + } } export default SaleStore; diff --git a/src/views/Sale.jsx b/src/views/Sale.jsx index 09be56c..7452982 100644 --- a/src/views/Sale.jsx +++ b/src/views/Sale.jsx @@ -1,122 +1,197 @@ -import React, { useContext, useEffect } from "react"; -import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from "antd"; -import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from "@ant-design/icons"; -import { stores_Context } from "../config"; -import { Column, Pie } from "@ant-design/charts"; -import { observer } from "mobx-react"; -import DatePickerCharts from "../components/search/DatePickerCharts"; -import DataTypeSelect from "../components/search/DataTypeSelect"; -import { NavLink, useParams } from "react-router-dom"; -import * as comm from "../utils/commons"; -import * as config from "../config"; -import SiteSelect from "../components/search/SiteSelect"; -import GroupSelect from "../components/search/GroupSelect"; -import { utils, writeFileXLSX } from "xlsx"; +import React, { useContext, useEffect } from 'react'; +import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from 'antd'; +import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons'; +import { stores_Context } from '../config'; +import { Column, Pie, Treemap } from '@ant-design/charts'; +import { observer } from 'mobx-react'; +import DatePickerCharts from '../components/search/DatePickerCharts'; +import DataTypeSelect from '../components/search/DataTypeSelect'; +import { NavLink, useParams } from 'react-router-dom'; +import * as comm from '../utils/commons'; +import * as config from '../config'; +import SiteSelect from '../components/search/SiteSelect'; +import GroupSelect from '../components/search/GroupSelect'; +import { utils, writeFileXLSX } from 'xlsx'; 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 type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; // 毛利数据 + //const ml_data = sale_store.ml_data; // 毛利数据 + const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; // 毛利数据 - const column_config = { - data: ml_data, - xField: "COLI_Date", - yField: "COLI_YJLY", - seriesField: "groups", - label: { - position: "top", - }, - 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_YJLY, 0) : ""; // 计算总数 - }, - }, - }, - tooltip: { - // customContent: (title, items) => { - // const data = items[0]?.data || {}; - // return `
${title}
${data.seriesField} ${data.yField}
`; - // } - title: (title, datum) => { - return title + " " + comm.getWeek(datum.COLI_Date); // 显示周几 - }, - }, - }; + // const column_config = { + // data: type_data.dataSource, + // xField: 'OPI_Name', + // yField: 'COLI_ML2', + // //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 `
${title}
wwwwwww
`; + // // }, + // // title: (title, datum) => { + // // return title; // + " " + comm.getWeek(datum.COLI_Date); // 显示周几 + // // }, + // // }, + // }; - // 格式化数据，饼图只支持数字模式 - const format_data_for_pie = (data = []) => { - return data.map(item => ({...item, COLI_ML_number: comm.price_to_number(item.COLI_ML)})); - }; + const column_config_create = (tab_name) => { + let config_data = { + //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 `
${title}
wwwwwww
`; + // }, + // 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, - data: format_data_for_pie(type_data.dataSource), - angleField: "COLI_ML_number", - colorField: "OPI_Name", - radius: 0.8, - label: { - type: "outer", - content: "{name} {value} \n {percentage}", - }, - legend: false, // 不显示图例 - interactions: [ - { - type: "element-selected", - }, - { - type: "element-active", - }, - ], - }; + // 直方图，先隐藏 + // const format_data_for_treemap=(data=[])=>{ + // const children_array= data.map(item => ({...item, name: item.OPI_Name,value:item.COLI_ML2})); + // return { + // name: 'root', + // children:children_array, + // }; + // }; - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - + // const treemap_config={ + // data:format_data_for_treemap(type_data.dataSource), + // colorField: 'OPI_Name', + // }; + + //格式化数据，饼图只支持数字模式 + const format_data_for_pie = (data = []) => { + return data.map((item) => ({ ...item, COLI_ML_number: comm.price_to_number(item.COLI_ML) })); + }; + + const pie_config = { + appendPadding: 10, + data: format_data_for_pie(type_data.dataSource), + angleField: 'COLI_ML_number', + colorField: 'OPI_Name', + radius: 0.8, + label: { + type: 'outer', + content: '{name} {value} \n {percentage}', + }, + legend: false, // 不显示图例 + interactions: [ + { + type: 'element-selected', + }, + { + type: 'element-active', + }, + ], + }; - {/* + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + {/* */} + + - - - - - - - + + + + - - { - sale_store.onChange_Tabs(active_key); - sale_store.get_department_order_ml_by_type(date_picker_store); - }}> - - 总览 - - } - key="All"> - - 回复率 - - } - key="ResponseRateWhatsApp"> - - 沟通数据 - - } - key="ResponseRateByWL"> - - 国籍 - - } - key="Country"> - - - 产品类型 - - } - key="Product"> - - - 出行目的 - - } - key="TravelMotivation"> - - - 成员关系 - - } - key="GuestGroupType"> - - - - record.key} - loading={sale_store.loading_table} - pagination={false} - scroll={{ x: "100%" }} - /> - - { - const wb = utils.table_to_book(document.getElementById("table_to_xlsx_sale").getElementsByTagName("table")[0]); - writeFileXLSX(wb, "sale.xlsx"); - }}> - 导出excel - - - - - {sale_store.active_tab_key === "All" ? : ""} - - - - - - ); + + { + sale_store.onChange_Tabs(active_key); + sale_store.get_department_order_ml_by_type(date_picker_store); + }} + > + + 总览 + + } + key="All" + > + + 回复率 + + } + key="ResponseRateWhatsApp" + > + + 沟通数据 + + } + key="ResponseRateByWL" + > + + 国籍 + + } + key="Country" + > + + + 产品类型 + + } + key="Product" + > + + + 出行目的 + + } + key="TravelMotivation" + > + + + 成员关系 + + } + key="GuestGroupType" + > + + + +
record.key} + loading={sale_store.loading_table} + pagination={false} + scroll={{ x: '100%' }} + /> + + { + const wb = utils.table_to_book(document.getElementById('table_to_xlsx_sale').getElementsByTagName('table')[0]); + writeFileXLSX(wb, 'sale.xlsx'); + }} + > + 导出excel + + + + + {sale_store.active_tab_key === 'All' ? : ''} + + {/* + + */} + + + + + ); }; export default observer(Sale);