{
}}
/>
-
+
}
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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- 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);
- }}>
- 统计
-
-
-
+ // 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ 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);
+ }}
+ >
+ 统计
+
+
+
+
+ {/*
*/}
+
+
-
-
-
-
-
-
-
+
+
+
+
-
- {
- 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">
-
-
-
-