客户类别，出行动机，销售指标界面开发
尹诚诚
3 years ago
parent
c76065be63
commit
254ab199c3
@ -1,122 +1,114 @@
|
|||||||
import './App.css';
|
import "./App.css";
|
||||||
import React, {useContext} from 'react';
|
import React, { useContext } from "react";
|
||||||
import {
|
import { HomeOutlined, TeamOutlined, DashboardOutlined, FileProtectOutlined, CustomerServiceTwoTone, SnippetsTwoTone, DollarOutlined, AreaChartOutlined, WechatOutlined, UserOutlined } from "@ant-design/icons";
|
||||||
HomeOutlined,
|
import { Layout, Menu, Image, Spin } from "antd";
|
||||||
TeamOutlined,
|
import { BrowserRouter, Route, Routes, NavLink } from "react-router-dom";
|
||||||
DashboardOutlined,
|
import Home from "./views/Home";
|
||||||
FileProtectOutlined,
|
import Dashboard from "./views/Dashboard";
|
||||||
CustomerServiceTwoTone,
|
import Orders from "./views/Orders";
|
||||||
DollarOutlined,
|
import Orders_sub from "./views/Orders_sub";
|
||||||
AreaChartOutlined,
|
import ProtectedRoute from "./views/ProtectedRoute";
|
||||||
WechatOutlined,
|
import Customer_care_inchina from "./charts/Customer_care_inchina";
|
||||||
UserOutlined
|
import Customer_care_potential from "./charts/Customer_care_potential";
|
||||||
} from '@ant-design/icons';
|
import Customer_care_regular from "./charts/Customer_care_regular";
|
||||||
import {Layout, Menu, Image, Spin} from 'antd';
|
import Wechat_session from "./charts/Wechat_session";
|
||||||
import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
|
import WhatsApp_session from "./charts/WhatsApp_session";
|
||||||
import Home from "./views/Home"
|
import Credit_card_bill from "./views/Credit_card_bill";
|
||||||
import Dashboard from "./views/Dashboard"
|
import Sale from "./views/Sale";
|
||||||
import Orders from "./views/Orders"
|
import Logo from "./logo.png";
|
||||||
import Orders_sub from "./views/Orders_sub"
|
import { stores_Context } from "./config";
|
||||||
import ProtectedRoute from "./views/ProtectedRoute"
|
import { observer } from "mobx-react";
|
||||||
import Customer_care_inchina from "./charts/Customer_care_inchina"
|
|
||||||
import Customer_care_potential from "./charts/Customer_care_potential"
|
|
||||||
import Customer_care_regular from "./charts/Customer_care_regular"
|
|
||||||
import Wechat_session from "./charts/Wechat_session"
|
|
||||||
import WhatsApp_session from "./charts/WhatsApp_session"
|
|
||||||
import Credit_card_bill from "./views/Credit_card_bill"
|
|
||||||
import Logo from './logo.png'
|
|
||||||
import {stores_Context} from "./config";
|
|
||||||
import {observer} from "mobx-react";
|
|
||||||
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
const { Content, Footer, Sider } = Layout;
|
||||||
|
const { auth_store } = useContext(stores_Context);
|
||||||
const {Content, Footer, Sider} = Layout;
|
|
||||||
const {auth_store} = useContext(stores_Context);
|
|
||||||
|
|
||||||
const menu_items = [
|
const menu_items = [
|
||||||
{key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
|
{ key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined /> },
|
||||||
{
|
{
|
||||||
key: 2, label: '市场', icon: <AreaChartOutlined/>,
|
key: 2,
|
||||||
|
label: "市场",
|
||||||
|
icon: <AreaChartOutlined />,
|
||||||
children: [
|
children: [
|
||||||
{key: 21, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
|
{ key: 21, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined /> },
|
||||||
{key: 22, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
|
{ key: 22, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined /> },
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 3, label: '客运', icon: <WechatOutlined/>,
|
key: 5,
|
||||||
|
label: "销售",
|
||||||
|
icon: <SnippetsTwoTone />,
|
||||||
|
children: [{ key: 51, label: <NavLink to="/sale">业绩数据</NavLink> }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3,
|
||||||
|
label: "客运",
|
||||||
|
icon: <WechatOutlined />,
|
||||||
children: [
|
children: [
|
||||||
{key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>},
|
{ key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink> },
|
||||||
{key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>},
|
{ key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink> },
|
||||||
{key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>},
|
{ key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink> },
|
||||||
{key: 34, label: <NavLink to="/wechat_session">微信会话存档</NavLink>},
|
{ key: 34, label: <NavLink to="/wechat_session">微信会话存档</NavLink> },
|
||||||
{key: 35, label: <NavLink to="/whatsapp_session">WhatsApp会话存档</NavLink>},
|
{ key: 35, label: <NavLink to="/whatsapp_session">WhatsApp会话存档</NavLink> },
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 4,
|
key: 4,
|
||||||
label: '财务',
|
label: "财务",
|
||||||
icon: <DollarOutlined/>,
|
icon: <DollarOutlined />,
|
||||||
children: [
|
children: [{ key: 41, label: <NavLink to="/credit_card_bill">信用卡账单</NavLink> }],
|
||||||
{key: 41, label: <NavLink to="/credit_card_bill">信用卡账单</NavLink>},
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Layout
|
<Layout
|
||||||
style={{
|
style={{
|
||||||
minHeight: '100vh',
|
minHeight: "100vh",
|
||||||
}}
|
}}>
|
||||||
>
|
<Sider collapsible={true} breakpoint="lg">
|
||||||
<Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
|
<Image src={Logo} preview={false} />
|
||||||
collapsedWidth="0">
|
<Menu theme="dark" defaultSelectedKeys={["1"]} defaultOpenKeys={["2", "3", "4", "5"]} mode="inline" items={menu_items} />
|
||||||
<Image src={Logo} preview={false}/>
|
|
||||||
<Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['2', '3','4']} mode="inline"
|
|
||||||
items={menu_items}/>
|
|
||||||
</Sider>
|
</Sider>
|
||||||
<Layout className="site-layout">
|
<Layout className="site-layout">
|
||||||
<Content style={{
|
<Content
|
||||||
|
style={{
|
||||||
padding: 16,
|
padding: 16,
|
||||||
minHeight: 480,
|
minHeight: 480,
|
||||||
}}>
|
}}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Home/>}/>
|
<Route path="/" element={<Home />} />
|
||||||
<Route element={<ProtectedRoute auth={['admin', 'director_bu', 'marketing']}/>}>
|
<Route element={<ProtectedRoute auth={["admin", "director_bu", "marketing"]} />}>
|
||||||
<Route path="/orders" element={<Orders/>}/>
|
<Route path="/orders" element={<Orders />} />
|
||||||
<Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title"
|
<Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub />} />
|
||||||
element={<Orders_sub/>}/>
|
<Route path="/dashboard" element={<Dashboard />} />
|
||||||
<Route path="/dashboard" element={<Dashboard/>}/>
|
|
||||||
</Route>
|
</Route>
|
||||||
<Route element={<ProtectedRoute auth={['admin', 'director_bu', 'customer_care']}/>}>
|
<Route element={<ProtectedRoute auth={["admin", "director_bu", "customer_care"]} />}>
|
||||||
<Route path="/customer_care_inchina" element={<Customer_care_inchina/>}/>
|
<Route path="/customer_care_inchina" element={<Customer_care_inchina />} />
|
||||||
<Route path="/customer_care_regular" element={<Customer_care_regular/>}/>
|
<Route path="/customer_care_regular" element={<Customer_care_regular />} />
|
||||||
<Route path="/customer_care_potential" element={<Customer_care_potential/>}/>
|
<Route path="/customer_care_potential" element={<Customer_care_potential />} />
|
||||||
<Route path="/whatsapp_session" element={<WhatsApp_session/>}/>
|
<Route path="/whatsapp_session" element={<WhatsApp_session />} />
|
||||||
<Route path="/wechat_session" element={<Wechat_session/>}/>
|
<Route path="/wechat_session" element={<Wechat_session />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']}/>}>
|
<Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}>
|
||||||
<Route path="/credit_card_bill" element={<Credit_card_bill/>}/>
|
<Route path="/credit_card_bill" element={<Credit_card_bill />} />
|
||||||
|
</Route>
|
||||||
|
<Route element={<ProtectedRoute auth={["admin", "director_bu", "sale"]} />}>
|
||||||
|
<Route path="/sale" element={<Sale />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</Content>
|
</Content>
|
||||||
<Footer
|
<Footer
|
||||||
style={{
|
style={{
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
}}
|
}}>
|
||||||
>
|
<UserOutlined /> {auth_store.user.name} ({auth_store.user.userid})<br />
|
||||||
<UserOutlined/> {auth_store.user.name} ({auth_store.user.userid})<br/>
|
|
||||||
Hainatravel Dashboard ©2022 Created by IT
|
Hainatravel Dashboard ©2022 Created by IT
|
||||||
</Footer>
|
</Footer>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Layout>
|
</Layout>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default observer(App);
|
export default observer(App);
|
||||||
|
|||||||
@ -0,0 +1,61 @@
|
|||||||
|
import { makeAutoObservable, runInAction } from "mobx";
|
||||||
|
import * as dd from "dingtalk-jsapi";
|
||||||
|
import * as config from "../config";
|
||||||
|
import * as comm from "../utils/commons";
|
||||||
|
|
||||||
|
//销售数据
|
||||||
|
class SaleStore {
|
||||||
|
constructor(rootStore) {
|
||||||
|
this.rootStore = rootStore;
|
||||||
|
makeAutoObservable(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
loading = false;
|
||||||
|
active_tab_key = "overview"; //当前选择的标签
|
||||||
|
group_select_mode = false;
|
||||||
|
date_type = "applyDate";
|
||||||
|
groups = ["1,2,28,7"];
|
||||||
|
date_title='date_title';//日期段，只用于显示，防止日期选择控件的变化导致页面刷新
|
||||||
|
|
||||||
|
//选择事业部
|
||||||
|
group_handleChange(value) {
|
||||||
|
this.groups = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
//切换标签页
|
||||||
|
onChange_Tabs(active_key) {
|
||||||
|
this.active_tab_key = active_key;
|
||||||
|
//this.getOrderCountByType_sub(ordertype, ordertype_sub, this.active_tab_key_sub);
|
||||||
|
}
|
||||||
|
|
||||||
|
//下单日期或者出发日期
|
||||||
|
onChange_datetype(e) {
|
||||||
|
this.date_type = e.target.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取业绩信息
|
||||||
|
getxxxxx(ordertype, ordertype_sub) {
|
||||||
|
// this.loading = true;
|
||||||
|
// const date_picker_store = this.rootStore.date_picker_store;
|
||||||
|
// let url = '/service-web/QueryData/GetOrderCount'
|
||||||
|
// url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`;
|
||||||
|
// url += '&WebCode=' + this.webcode + '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
|
||||||
|
// if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
|
||||||
|
// url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
|
||||||
|
// }
|
||||||
|
// fetch(config.HT_HOST + url)
|
||||||
|
// .then((response) => response.json())
|
||||||
|
// .then((json) => {
|
||||||
|
// runInAction(() => {
|
||||||
|
// this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
|
||||||
|
// this.loading = false;
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// this.loading = false;
|
||||||
|
// console.log('fetch data failed', error);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SaleStore;
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import React, { useContext, useEffect } from "react";
|
||||||
|
import { Row, Col, Button, Tabs, Table, Space, Radio } from "antd";
|
||||||
|
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
|
||||||
|
import { stores_Context } from "../config";
|
||||||
|
import { Line } from "@ant-design/charts";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import DatePickerCharts from "../charts/DatePickerCharts";
|
||||||
|
import { NavLink, useParams } from "react-router-dom";
|
||||||
|
import * as comm from "../utils/commons";
|
||||||
|
import * as config from "../config";
|
||||||
|
import GroupSelect from "../charts/GroupSelect";
|
||||||
|
|
||||||
|
const Sale = () => {
|
||||||
|
const { sale_store, date_picker_store } = useContext(stores_Context);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Row>
|
||||||
|
<Col span={13}></Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<GroupSelect store={sale_store} />
|
||||||
|
<Radio.Group value={sale_store.date_type} onChange={e => sale_store.onChange_datetype(e)}>
|
||||||
|
<Radio value="applyDate">下单日期</Radio>
|
||||||
|
<Radio value="startDate">走团日期</Radio>
|
||||||
|
</Radio.Group>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<DatePickerCharts />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
<Col span={1}></Col>
|
||||||
|
<Col span={2}>
|
||||||
|
<Button type="primary" icon={<SearchOutlined />} loading={sale_store.loading} onClick={() => {}}>
|
||||||
|
统计
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
{/* <Line {...line} /> */}
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
<Tabs activeKey={sale_store.active_tab_key} onChange={active_key => sale_store.onChange_Tabs(active_key)}>
|
||||||
|
<Tabs.TabPane
|
||||||
|
tab={
|
||||||
|
<span>
|
||||||
|
<ContainerOutlined />
|
||||||
|
概览
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
key="overview">
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
{sale_store.date_title}
|
||||||
|
{/* <Table
|
||||||
|
dataSource={table_data.dataSource}
|
||||||
|
columns={table_data.columns}
|
||||||
|
size="small"
|
||||||
|
rowKey={record => record.key}
|
||||||
|
expandable={{
|
||||||
|
expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
|
||||||
|
}}
|
||||||
|
/> */}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Tabs.TabPane>
|
||||||
|
<Tabs.TabPane
|
||||||
|
tab={
|
||||||
|
<span>
|
||||||
|
<ContainerOutlined />
|
||||||
|
国籍
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
key="page">
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
{sale_store.date_title}
|
||||||
|
{/* <Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" /> */}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Tabs.TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default observer(Sale);
|
||||||
Loading…
Reference in New Issue