├── components ├── images │ └── logo.png ├── js │ ├── common │ │ ├── sort.js │ │ ├── select_product.js │ │ ├── select_car.js │ │ ├── select_city.js │ │ ├── fetch.js │ │ ├── form_reg.js │ │ ├── table_data.js │ │ └── echarts.js │ ├── login.js │ ├── message.js │ ├── mail_management_task_log.js │ ├── access_log.js │ ├── warn_phone.js │ ├── week_report_details.js │ ├── mail_management_task_mail.js │ ├── mail_management_template.js │ ├── login_canvas.js │ ├── business_account_info.js │ ├── warn_module.js │ ├── business_active_table.js │ ├── person_ticket_table.js │ ├── business_register_table.js │ ├── person_ticket_daily.js │ ├── realtime_order_half.js │ ├── user_experience.js │ ├── error_order.js │ ├── driver_order_percent.js │ ├── mail_management_task.js │ ├── market_promotion.js │ ├── ctrip_airport.js │ ├── car_analysis.js │ ├── car_market_extension.js │ ├── warn_index.js │ ├── area_income.js │ ├── order_source.js │ ├── product_income.js │ ├── competitor_price.js │ ├── consumer_active_user.js │ ├── message_management.js │ ├── register_driver.js │ ├── product_service.js │ ├── access_active_user.js │ ├── index.js │ ├── complete_order.js │ └── today_forecast.js ├── data │ ├── test_data_8.json │ ├── test_data_3.json │ ├── test_data_4.json │ ├── test_data_5.json │ ├── test_data_2.json │ ├── test_data_6.json │ └── test_data_7.json └── css │ ├── reset.scss │ ├── login.scss │ ├── complete_order.scss │ ├── today_forecast.scss │ ├── table_data.scss │ ├── user_experience.scss │ ├── daily_operation.scss │ ├── index.scss │ └── main.scss ├── index.html ├── login.html ├── package.json ├── webpack.config.js ├── webpack.production.config.js ├── README.md └── dist └── login.min.js /components/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongjunchao/bi_system_pc/HEAD/components/images/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 大数据BI管理系统 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/js/common/sort.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description Sort模块 5 | */ 6 | 7 | class Sort{ 8 | 9 | constructor(){ 10 | } 11 | 12 | getSort(str_1, str_2){ 13 | if(!str_1 || !str_2){ 14 | return; 15 | } 16 | return Number(str_1.replace(/,|%/g, '')) - Number(str_2.replace(/,|%/g, '')); 17 | } 18 | } 19 | 20 | export default Sort; -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 大数据BI管理系统 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /components/data/test_data_8.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "date" : "10-01", 4 | "value" : "2897" 5 | }, 6 | { 7 | "date" : "10-02", 8 | "value" : "5465" 9 | }, 10 | { 11 | "date" : "10-03", 12 | "value" : "9086" 13 | }, 14 | { 15 | "date" : "10-04", 16 | "value" : "1254" 17 | }, 18 | { 19 | "date" : "10-05", 20 | "value" : "4634" 21 | }, 22 | { 23 | "date" : "10-06", 24 | "value" : "3876" 25 | }, 26 | { 27 | "date" : "10-07", 28 | "value" : "6987" 29 | } 30 | ] 31 | -------------------------------------------------------------------------------- /components/js/common/select_product.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 选择产品模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | //选择产品 13 | class SelectProduct extends React.Component{ 14 | 15 | constructor(props){ 16 | super(props); 17 | this.state = { 18 | } 19 | } 20 | 21 | selectProduct(val){ 22 | console.log(val); 23 | } 24 | 25 | componentWillMount(){ 26 | } 27 | 28 | componentDidMount(){ 29 | } 30 | 31 | render(){ 32 | return ( 33 | 41 | ); 42 | } 43 | 44 | } 45 | 46 | export default SelectProduct; -------------------------------------------------------------------------------- /components/js/common/select_car.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 选择车型模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | //选择车型 13 | class SelectCar extends React.Component{ 14 | 15 | constructor(props){ 16 | super(props); 17 | this.state = { 18 | } 19 | } 20 | 21 | selectCity(val){ 22 | console.log(val); 23 | } 24 | 25 | componentWillMount(){ 26 | } 27 | 28 | componentDidMount(){ 29 | } 30 | 31 | render(){ 32 | return ( 33 | 42 | ); 43 | } 44 | 45 | } 46 | 47 | export default SelectCar; -------------------------------------------------------------------------------- /components/css/reset.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | outline: none; 5 | font-weight: normal; 6 | font-size: 12px; 7 | color: #666666; 8 | } 9 | html{ 10 | font-size: 12px; 11 | } 12 | body{ 13 | width: 100%; 14 | font-size: 12px; 15 | background-color: #FFF; 16 | } 17 | h1, h2, h3, h4, h5, h6{ 18 | font-size: 12px; 19 | font-weight: normal; 20 | } 21 | input{ 22 | display: inline-block; 23 | vertical-align: top; 24 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 25 | } 26 | button, input, select, textarea{ 27 | -webkit-appearance: none; 28 | } 29 | textarea{ 30 | resize: none; 31 | } 32 | ul, ol, li{ 33 | list-style: none; 34 | } 35 | a{ 36 | text-decoration: none; 37 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 38 | color: #666666; 39 | &:hover{ 40 | text-decoration: none; 41 | } 42 | } 43 | address, em, i{ 44 | font-style: normal; 45 | } 46 | ::-webkit-input-placeholder{ 47 | color: #bcbcbc; 48 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bi_pc", 3 | "version": "1.0.0", 4 | "description": "大数据BI管理系统", 5 | "main": "login.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --hot --inline", 8 | "build": "webpack --progress --profile --colors --config webpack.production.config.js" 9 | }, 10 | "author": "JUNCHAO KONG", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.17.0", 14 | "babel-loader": "^6.2.5", 15 | "babel-plugin-import": "^1.1.0", 16 | "babel-preset-es2015": "^6.24.1", 17 | "babel-preset-react": "^6.16.0", 18 | "css-loader": "^0.25.0", 19 | "echarts": "^3.2.3", 20 | "extract-text-webpack-plugin": "^1.0.1", 21 | "file-loader": "^0.9.0", 22 | "moment": "^2.15.2", 23 | "node-sass": "^3.13.1", 24 | "sass-loader": "^4.0.2", 25 | "style-loader": "^0.13.1", 26 | "url-loader": "^0.5.7", 27 | "webpack": "^1.13.3" 28 | }, 29 | "dependencies": { 30 | "antd": "^2.4.2", 31 | "react": "^15.3.2", 32 | "react-dom": "^15.3.2", 33 | "react-router": "^2.8.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /components/js/login.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 登录模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import { Input, Button } from 'antd'; 10 | //引入样式表 11 | import 'antd/dist/antd.css'; 12 | import '../css/login.scss'; 13 | require('./login_canvas.js'); 14 | 15 | class Login extends React.Component{ 16 | 17 | constructor(props){ 18 | super(props); 19 | this.state = { 20 | } 21 | } 22 | 23 | handleClick(){ 24 | window.location.href = 'index.html'; 25 | } 26 | 27 | render(){ 28 | return ( 29 |
30 |

31 | 32 |

33 | 46 |
47 | ); 48 | } 49 | 50 | } 51 | 52 | ReactDom.render(, document.getElementById('main')) -------------------------------------------------------------------------------- /components/js/message.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 消息模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import { Collapse } from 'antd'; 10 | const Panel = Collapse.Panel; 11 | 12 | class Message extends React.Component{ 13 | 14 | constructor(props){ 15 | super(props); 16 | this.state = { 17 | } 18 | } 19 | 20 | componentWillMount(){ 21 | } 22 | 23 | componentDidMount(){ 24 | } 25 | 26 | render(){ 27 | return ( 28 |
29 |
30 | 消息 31 |
32 |
33 | 34 | 35 |

新版本BI系统上线啦!!!

36 | 37 | 38 |

系统在调试阶段,有任何问题请随时联系开发人员!!!

39 | 40 | 41 |

建议使用Google Chrome以获得最佳浏览体验

42 | 43 | 44 |
45 |
46 | ); 47 | } 48 | 49 | } 50 | 51 | export default Message; -------------------------------------------------------------------------------- /components/js/common/select_city.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 选择城市模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | //选择城市 13 | class SelectCity extends React.Component{ 14 | 15 | constructor(props){ 16 | super(props); 17 | this.state = { 18 | city : this.props.city 19 | } 20 | } 21 | 22 | componentWillMount(){ 23 | } 24 | 25 | componentDidMount(){ 26 | } 27 | 28 | componentWillReceiveProps(newProps){ 29 | if(this.props.city !== newProps.city){ 30 | this.setState({ 31 | city : newProps.city 32 | }) 33 | } 34 | } 35 | 36 | render(){ 37 | return ( 38 | 53 | ); 54 | } 55 | 56 | } 57 | 58 | export default SelectCity; -------------------------------------------------------------------------------- /components/css/login.scss: -------------------------------------------------------------------------------- 1 | @import 'reset'; 2 | 3 | html, body{ 4 | width: 100%; 5 | height: 100%; 6 | overflow: hidden; 7 | } 8 | .main{ 9 | width: 360px; 10 | padding: 10px 0 30px 0; 11 | position: absolute; 12 | top: 20%; 13 | left: 50%; 14 | margin-left: -200px; 15 | h1{ 16 | width: 100%; 17 | height: 80px; 18 | text-align: center; 19 | img{ 20 | height: 80px; 21 | } 22 | } 23 | ul{ 24 | width: 90%; 25 | margin-left: 5%; 26 | margin-top: 10px; 27 | li{ 28 | height: 40px; 29 | line-height: 40px; 30 | label{ 31 | width: 16%; 32 | float: left; 33 | } 34 | > span{ 35 | width: 84%; 36 | float: right; 37 | input{ 38 | height: 40px; 39 | } 40 | } 41 | &:nth-child(3){ 42 | button{ 43 | width: 84%; 44 | height: 40px; 45 | margin-left: 16%; 46 | span{ 47 | color: #FFF; 48 | } 49 | } 50 | } 51 | &:nth-child(n+2){ 52 | margin-top: 20px; 53 | } 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'), 2 | ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | 4 | var config = { 5 | 6 | entry : { 7 | main : './components/js/main.js', 8 | login : './components/js/login.js', 9 | vendor : ['react', 'react-dom', 'antd'] 10 | }, 11 | 12 | output : { 13 | path : './', 14 | filename : 'dist/[name].min.js' 15 | }, 16 | 17 | devServer : { 18 | inline : true, 19 | port : 7777 20 | }, 21 | 22 | devtool : 'source-map', 23 | 24 | module : { 25 | loaders : [ 26 | { 27 | test : /\.js$/, 28 | exclude : /node_modules/, 29 | loader : 'babel', 30 | query : { 31 | presets : ['es2015', 'react'], 32 | plugins : [["import", {"libraryName" : "antd", "style" : "css"}]] //用于antd按需加载js和css文件 33 | } 34 | }, 35 | { 36 | test : /\.(png|jpg|gif)$/, 37 | loader : 'url-loader?limit=819200' 38 | }, 39 | { 40 | test : /\.(scss|css)$/, 41 | loader : ExtractTextPlugin.extract('style', 'css?sourceMap&' + JSON.stringify({discardComments : {removeAll : true}}) + '!sass?sourceMap') 42 | } 43 | ] 44 | }, 45 | 46 | plugins : [ 47 | new ExtractTextPlugin('dist/[name].min.css', {allChunks : true}), //单独打包css文件 48 | new webpack.optimize.CommonsChunkPlugin('dist/commons.min.js') //单独打包公共js文件 49 | ] 50 | 51 | } 52 | 53 | module.exports = config; -------------------------------------------------------------------------------- /components/css/complete_order.scss: -------------------------------------------------------------------------------- 1 | .collapse-box{ 2 | .ant-collapse-header{ 3 | padding-left: 15px !important; 4 | .arrow{ 5 | left: 0 !important; 6 | } 7 | } 8 | .ant-collapse-content-box{ 9 | padding-top: 0 !important; 10 | } 11 | .ul-3{ 12 | width: 100%; 13 | margin-top: 10px; 14 | li{ 15 | width: 100%; 16 | height: 28px; 17 | line-height: 28px; 18 | > .span-1{ 19 | display: inline-block; 20 | height: 100%; 21 | vertical-align: top; 22 | margin-right: 8px; 23 | &:nth-of-type(n+2){ 24 | margin-left: 14px; 25 | } 26 | } 27 | .ant-input-wrapper{ 28 | display: inline-block; 29 | } 30 | .ant-checkbox-group{ 31 | display: inline-block; 32 | margin-left: 15px; 33 | } 34 | .ant-select, .ant-input-number{ 35 | vertical-align: top; 36 | } 37 | &:nth-child(n+2){ 38 | margin-top: 18px; 39 | } 40 | } 41 | } 42 | .ant-btn-primary{ 43 | vertical-align: top; 44 | margin-top: 5px; 45 | span{ 46 | color: #FFF; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'), 2 | ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | 4 | var config = { 5 | 6 | entry : { 7 | main : './components/js/main.js', 8 | login : './components/js/login.js', 9 | vendor : ['react', 'react-dom', 'antd'] 10 | }, 11 | 12 | output : { 13 | path : './', 14 | filename : 'dist/[name].min.js' 15 | }, 16 | 17 | module : { 18 | loaders : [ 19 | { 20 | test : /\.js$/, 21 | exclude : /node_modules/, 22 | loader : 'babel', 23 | query : { 24 | presets : ['es2015', 'react'], 25 | plugins : [["import", {"libraryName" : "antd", "style" : "css"}]] //用于antd按需加载js和css文件 26 | } 27 | }, 28 | { 29 | test : /\.(png|jpg|gif)$/, 30 | loader : 'url-loader?limit=819200' 31 | }, 32 | { 33 | test : /\.(scss|css)$/, 34 | loader : ExtractTextPlugin.extract('style', 'css?' + JSON.stringify({discardComments : {removeAll : true}}) + '!sass') 35 | } 36 | ] 37 | }, 38 | 39 | plugins : [ 40 | //压缩代码 41 | new webpack.optimize.UglifyJsPlugin({ 42 | compress : { 43 | warnings : false 44 | }, 45 | output : { 46 | comments : false //去除注释 47 | } 48 | }), 49 | new ExtractTextPlugin('dist/[name].min.css', {allChunks : true}), //单独打包css文件 50 | new webpack.optimize.CommonsChunkPlugin('dist/commons.min.js'), //单独打包公共js文件 51 | new webpack.DefinePlugin({ 52 | 'process.env' : { 53 | 'NODE_ENV' : JSON.stringify('production') 54 | } 55 | }) //用于生产环境配置react 56 | ] 57 | 58 | } 59 | 60 | module.exports = config; -------------------------------------------------------------------------------- /components/js/mail_management_task_log.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 邮件管理系统-任务日志模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select } from 'antd'; 12 | const Option = Select.Option; 13 | 14 | const table_option_1 = { 15 | title : '任务日志', 16 | columns : [ 17 | { 18 | title : '任务标题', 19 | dataIndex : 'a', 20 | key : 'a' 21 | }, 22 | { 23 | title : '执行脚本', 24 | dataIndex : 'b', 25 | key : 'b' 26 | }, 27 | { 28 | title : '开始执行时间', 29 | dataIndex : 'c', 30 | key : 'c' 31 | }, 32 | { 33 | title : '执行时长', 34 | dataIndex : 'd', 35 | key : 'd' 36 | }, 37 | { 38 | title : '状态', 39 | dataIndex : 'e', 40 | key : 'e' 41 | }, 42 | { 43 | title : '执行结果', 44 | dataIndex : 'f', 45 | key : 'f' 46 | } 47 | ], 48 | url : './components/data/test_data_1.json', 49 | source : [] 50 | }; 51 | 52 | class MailManagementTaskLog extends React.Component{ 53 | 54 | constructor(props){ 55 | super(props); 56 | this.state = { 57 | params : { 58 | } 59 | } 60 | } 61 | 62 | handleChange(){ 63 | } 64 | 65 | componentWillMount(){ 66 | } 67 | 68 | componentDidMount(){ 69 | } 70 | 71 | render(){ 72 | return ( 73 |
74 |
75 | 工具 > 邮件管理系统 > 任务日志 76 |
77 | 78 |
79 | ); 80 | } 81 | 82 | } 83 | 84 | export default MailManagementTaskLog; -------------------------------------------------------------------------------- /components/js/access_log.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 访问日志模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button } from 'antd'; 12 | 13 | const table_option_1 = { 14 | title : '访问日志', 15 | columns : [ 16 | { 17 | title : '用户ID', 18 | dataIndex : 'a', 19 | key : 'a' 20 | }, 21 | { 22 | title : '用户名称', 23 | dataIndex : 'b', 24 | key : 'b' 25 | }, 26 | { 27 | title : '模块', 28 | dataIndex : 'c', 29 | key : 'c' 30 | }, 31 | { 32 | title : '模块名', 33 | dataIndex : 'd', 34 | key : 'd' 35 | }, 36 | { 37 | title : '链接', 38 | dataIndex : 'e', 39 | key : 'e' 40 | }, 41 | { 42 | title : '访问时间', 43 | dataIndex : 'f', 44 | key : 'f' 45 | } 46 | ], 47 | url : './components/data/test_data_1.json', 48 | source : [] 49 | }; 50 | 51 | class AccessLog extends React.Component{ 52 | 53 | constructor(props){ 54 | super(props); 55 | this.state = { 56 | } 57 | } 58 | 59 | handleChange(){ 60 | } 61 | 62 | componentWillMount(){ 63 | } 64 | 65 | componentDidMount(){ 66 | } 67 | 68 | render(){ 69 | return ( 70 |
71 |
72 | 工具 > 访问日志 73 |
74 |
75 | 用户ID / 名称 76 | 77 | 访问链接 78 | 79 | 80 |
81 | 82 |
83 | ); 84 | } 85 | 86 | } 87 | 88 | export default AccessLog; -------------------------------------------------------------------------------- /components/js/common/fetch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description Fetch模块 5 | */ 6 | 7 | class Fetch{ 8 | 9 | constructor(url, params, successFunc, errorFunc){ 10 | this.url = url; 11 | this.params = params; 12 | this.successFunc = successFunc; 13 | this.errorFunc = errorFunc; 14 | } 15 | 16 | //发送GET请求 17 | getFetch(){ 18 | var that = this; 19 | var str = ''; 20 | if(typeof that.params === 'object' && that.params){ 21 | str += '?'; 22 | Object.keys(that.params).forEach(function(val){ 23 | str += val + '=' + encodeURIComponent(that.params[val]) + '&'; 24 | }) 25 | } 26 | fetch(this.url + str, { 27 | method : 'GET' 28 | }).then(function(res){ 29 | if(res.ok){ 30 | res.json().then(function(data){ 31 | that.successFunc(data); 32 | }) 33 | }else if(res.status === 401){ 34 | console.log('请求失败'); 35 | that.errorFunc(); 36 | } 37 | }, function(e){ 38 | console.log('请求失败'); 39 | that.errorFunc(); 40 | }) 41 | } 42 | 43 | //发送POST请求 44 | postFetch(){ 45 | var that = this; 46 | var formData = new FormData(); 47 | for(let k in that.params){ 48 | formData.append(k, that.params[k]); 49 | } 50 | // formData.append('oper_id', '11'); 51 | // formData.append('oper_name', 'kong'); 52 | fetch(this.url, { 53 | method : 'POST', 54 | mode : 'cors', 55 | body : formData 56 | }).then(function(res){ 57 | if(res.ok){ 58 | res.json().then(function(data){ 59 | that.successFunc(data); 60 | }) 61 | }else{ 62 | console.log('请求失败'); 63 | that.errorFunc(); 64 | } 65 | }, function(e){ 66 | console.log('请求失败'); 67 | that.errorFunc(); 68 | }) 69 | } 70 | } 71 | 72 | export default Fetch; -------------------------------------------------------------------------------- /components/css/today_forecast.scss: -------------------------------------------------------------------------------- 1 | .main-box{ 2 | width: 96%; 3 | margin-left: 2%; 4 | margin-top: 15px; 5 | .top-nav{ 6 | width: 100%; 7 | height: 25px; 8 | line-height: 25px; 9 | background-color: #f7f7f7; 10 | text-indent: 10px; 11 | } 12 | .div-2{ 13 | width: 96%; 14 | height: 100%; 15 | margin-left: 2%; 16 | margin-top: 20px; 17 | ul{ 18 | width: 100%; 19 | display: flex; 20 | display: -webkit-flex; 21 | li{ 22 | width: 15%; 23 | padding-bottom: 15%; 24 | background-color: #43bab1; 25 | border-radius: 100%; 26 | position: relative; 27 | transition: transform .6s; 28 | &:nth-child(n+2){ 29 | margin-left: 2%; 30 | } 31 | &:hover{ 32 | background-color: #46c6bc; 33 | transform: translateY(-10%) scale(1.1); 34 | } 35 | h2{ 36 | text-align: center; 37 | position: absolute; 38 | width: 100%; 39 | top: 27%; 40 | font-size: 12px; 41 | color: #FFF; 42 | } 43 | p{ 44 | text-align: center; 45 | position: absolute; 46 | width: 100%; 47 | top: 41%; 48 | font-size: 22px; 49 | color: #FFF; 50 | } 51 | } 52 | } 53 | } 54 | .table-1{ 55 | width: 100%; 56 | margin-top: 20px; 57 | table{ 58 | width: 100%; 59 | border-collapse: collapse; 60 | tbody{ 61 | width: 100%; 62 | tr{ 63 | line-height: 30px; 64 | &:nth-child(1){ 65 | background-color: #f7f7f7; 66 | } 67 | td{ 68 | border: 1px solid #e9e9e9; 69 | text-align: center; 70 | &:nth-child(1){ 71 | width: 10%; 72 | background-color: #f7f7f7; 73 | } 74 | &:nth-child(n+2){ 75 | width: 15%; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /components/css/table_data.scss: -------------------------------------------------------------------------------- 1 | .table-box{ 2 | width: 100%; 3 | margin-top: 20px; 4 | &:nth-last-of-type(1){ 5 | margin-bottom: 30px; 6 | } 7 | > h2{ 8 | width: 100%; 9 | height: 30px; 10 | line-height: 30px; 11 | font-size: 14px; 12 | text-indent: 5px; 13 | font-weight: bold; 14 | .anticon{ 15 | font-weight: bold; 16 | margin-right: 10px; 17 | } 18 | } 19 | > p{ 20 | width: 100%; 21 | margin-top: 10px; 22 | margin-bottom: 15px; 23 | > span{ 24 | display: inline-block; 25 | width: 90px; 26 | height: 20px; 27 | line-height: 20px; 28 | text-align: center; 29 | vertical-align: top; 30 | background-color: #43bab1; 31 | margin-left: 10px; 32 | border-radius: 5px; 33 | color: #FFF; 34 | &:hover{ 35 | background-color: #ff6355; 36 | cursor: pointer; 37 | } 38 | &.active{ 39 | background-color: #ff6355; 40 | } 41 | } 42 | } 43 | .ant-table-thead tr th{ 44 | text-align: center; 45 | } 46 | .table-a{ 47 | color: #2db7f5; 48 | } 49 | .table-action{ 50 | a{ 51 | color: #2db7f5; 52 | padding: 0 8px; 53 | } 54 | } 55 | .action-column{ 56 | text-align: center; 57 | } 58 | .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td{ 59 | white-space: nowrap; 60 | } 61 | } 62 | .ant-popover .ant-btn-primary span{ 63 | color: #FFF; 64 | } 65 | .ant-modal-content .ant-btn-primary span{ 66 | color: #FFF; 67 | } 68 | .ant-modal-footer .ant-btn .anticon{ 69 | color: #FFF; 70 | } -------------------------------------------------------------------------------- /components/css/user_experience.scss: -------------------------------------------------------------------------------- 1 | .div-3{ 2 | width: 100%; 3 | height: 340px; 4 | margin-top: 20px; 5 | .div-3-left{ 6 | width: 22%; 7 | height: 100%; 8 | float: left; 9 | background-color: #43bab1; 10 | text-align: center; 11 | border-radius: 5px; 12 | overflow: hidden; 13 | i{ 14 | font-size: 35px; 15 | color: #FFF; 16 | margin-top: 70px; 17 | } 18 | h2{ 19 | font-size: 30px; 20 | color: #FFF; 21 | margin-top: 8px; 22 | span{ 23 | font-size: 16px; 24 | color: #FFF; 25 | display: block; 26 | } 27 | } 28 | p{ 29 | font-size: 16px; 30 | color: #FFF; 31 | line-height: 30px; 32 | &:nth-of-type(1){ 33 | margin-top: 15px; 34 | } 35 | } 36 | } 37 | .div-3-right{ 38 | width: 78%; 39 | height: 100%; 40 | float: right; 41 | position: relative; 42 | } 43 | &:nth-last-of-type(1){ 44 | margin-bottom: 40px; 45 | } 46 | } 47 | .div-type{ 48 | height: 25px; 49 | position: absolute; 50 | top: 1%; 51 | left: 7%; 52 | font-size: 0; 53 | z-index: 1; 54 | span{ 55 | display: inline-block; 56 | height: 100%; 57 | font-size: 12px; 58 | line-height: 25px; 59 | text-align: center; 60 | background-color: #43bab1; 61 | color: #FFF; 62 | padding: 0 10px; 63 | border-radius: 5px; 64 | &:nth-child(n+2){ 65 | margin-left: 5px; 66 | } 67 | &:hover{ 68 | background-color: #ff6355; 69 | cursor: pointer; 70 | } 71 | &.active{ 72 | background-color: #ff6355; 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /components/css/daily_operation.scss: -------------------------------------------------------------------------------- 1 | .main-box{ 2 | width: 96%; 3 | margin-left: 2%; 4 | margin-top: 15px; 5 | .top-nav{ 6 | width: 100%; 7 | height: 25px; 8 | line-height: 25px; 9 | background-color: #f7f7f7; 10 | text-indent: 10px; 11 | } 12 | .ul-2{ 13 | width: 100%; 14 | height: 100px; 15 | font-size: 0; 16 | margin-top: 15px; 17 | li{ 18 | width: 11.625%; 19 | height: 100%; 20 | display: inline-block; 21 | box-sizing: border-box; 22 | background-color: #43bab1; 23 | font-size: 14px; 24 | vertical-align: top; 25 | border-radius: 5px; 26 | transition: transform .6s; 27 | &:hover{ 28 | background-color: #46c6bc; 29 | transform: translateY(-10%) scale(1.1); 30 | } 31 | &:not(:nth-child(1)){ 32 | margin-left: 1%; 33 | } 34 | h1{ 35 | width: 100%; 36 | height: 15px; 37 | line-height: 15px; 38 | margin-top: 8px; 39 | text-align: center; 40 | color: #FFF; 41 | } 42 | h2{ 43 | width: 100%; 44 | height: 30px; 45 | line-height: 30px; 46 | text-align: center; 47 | font-size: 22px; 48 | overflow: hidden; 49 | text-overflow: ellipsis; 50 | white-space: nowrap; 51 | color: #FFF; 52 | } 53 | p{ 54 | text-align: center; 55 | color: #FFF; 56 | .anticon{ 57 | color: #FFF; 58 | } 59 | &.up{ 60 | .anticon{ 61 | color: #fd6448; 62 | } 63 | } 64 | &.down{ 65 | .anticon{ 66 | color: #03ab07; 67 | } 68 | } 69 | } 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /components/js/warn_phone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 预警管理系统-预警手机号 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, Popconfirm, message } from 'antd'; 12 | const Option = Select.Option; 13 | 14 | function confirmDelete(){ 15 | message.success('删除成功'); 16 | } 17 | 18 | class WarnPhone extends React.Component{ 19 | 20 | constructor(props){ 21 | super(props); 22 | this.state = { 23 | params : { 24 | } 25 | } 26 | } 27 | 28 | handleChange(){ 29 | } 30 | 31 | componentWillMount(){ 32 | } 33 | 34 | componentDidMount(){ 35 | } 36 | 37 | render(){ 38 | const table_option_1 = { 39 | title : '预警手机号', 40 | columns : [ 41 | { 42 | title : 'ID', 43 | dataIndex : 'a', 44 | key : 'a' 45 | }, 46 | { 47 | title : '模块名称', 48 | dataIndex : 'b', 49 | key : 'b' 50 | }, 51 | { 52 | title : '手机号', 53 | dataIndex : 'c', 54 | key : 'c' 55 | }, 56 | { 57 | title : '操作', 58 | key : 'action', 59 | width : 100, 60 | className : 'action-column', 61 | render : () => ( 62 | 63 | 64 | 删除 65 | 66 | 67 | ) 68 | } 69 | ], 70 | url : './components/data/test_data_1.json', 71 | source : [] 72 | }; 73 | 74 | return ( 75 |
76 |
77 | 工具 > 预警管理系统 > 预警手机号 78 |
79 |
80 | 预警模块 81 | 88 | 手机号 89 | 90 | 91 | 92 |
93 | 94 |
95 | ); 96 | } 97 | 98 | } 99 | 100 | export default WarnPhone; -------------------------------------------------------------------------------- /components/js/week_report_details.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 周报详情模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, DatePicker } from 'antd'; 12 | const Option = Select.Option; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '周报列表', 17 | columns : [ 18 | { 19 | title : '周报名称', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '上传人', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '上传时间', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '操作', 35 | dataIndex : 'd', 36 | key : 'd' 37 | } 38 | ], 39 | url : './components/data/test_data_1.json', 40 | source : [] 41 | }; 42 | 43 | class WeekReportDetails extends React.Component{ 44 | 45 | constructor(props){ 46 | super(props); 47 | this.state = { 48 | params : { 49 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 50 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD') 51 | } 52 | } 53 | } 54 | 55 | //选择日期 56 | selectDate(dates, dateStrings){ 57 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 58 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 59 | return; 60 | } 61 | var params = {}; 62 | for(let k in this.state.params){ 63 | params[k] = this.state.params[k]; 64 | } 65 | params.startDate = dateStrings[0]; 66 | params.endDate = dateStrings[1]; 67 | this.setState({ 68 | params : params 69 | }) 70 | } 71 | 72 | handleChange(){ 73 | 74 | } 75 | 76 | componentWillMount(){ 77 | } 78 | 79 | componentDidMount(){ 80 | } 81 | 82 | render(){ 83 | return ( 84 |
85 |
86 | 周报 > 周报详情 87 |
88 |
89 | 94 |
95 | 96 |
97 | ); 98 | } 99 | 100 | } 101 | 102 | export default WeekReportDetails; -------------------------------------------------------------------------------- /components/js/mail_management_task_mail.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 邮件管理系统-任务邮箱管理模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, Popconfirm, message } from 'antd'; 12 | const Option = Select.Option; 13 | 14 | function confirmDelete(){ 15 | message.success('删除成功'); 16 | } 17 | 18 | const table_option_1 = { 19 | title : '任务邮箱管理', 20 | columns : [ 21 | { 22 | title : '任务ID', 23 | dataIndex : 'a', 24 | key : 'a' 25 | }, 26 | { 27 | title : '任务标题', 28 | dataIndex : 'b', 29 | key : 'b' 30 | }, 31 | { 32 | title : '邮箱', 33 | dataIndex : 'c', 34 | key : 'c' 35 | }, 36 | { 37 | title : '称呼', 38 | dataIndex : 'd', 39 | key : 'd' 40 | }, 41 | { 42 | title : '操作', 43 | key : 'action', 44 | width : 100, 45 | className : 'action-column', 46 | render : () => ( 47 | 48 | 49 | 删除 50 | 51 | 52 | ) 53 | } 54 | ], 55 | url : './components/data/test_data_1.json', 56 | source : [] 57 | }; 58 | 59 | class MailManagementTaskMail extends React.Component{ 60 | 61 | constructor(props){ 62 | super(props); 63 | this.state = { 64 | params : { 65 | } 66 | } 67 | } 68 | 69 | handleChange(){ 70 | } 71 | 72 | componentWillMount(){ 73 | } 74 | 75 | componentDidMount(){ 76 | } 77 | 78 | render(){ 79 | return ( 80 |
81 |
82 | 工具 > 邮件管理系统 > 任务邮箱管理 83 |
84 |
85 | 任务标题 86 | 93 | 邮箱 94 | 95 | 称呼 96 | 97 | 98 | 99 |
100 | 101 |
102 | ); 103 | } 104 | 105 | } 106 | 107 | export default MailManagementTaskMail; -------------------------------------------------------------------------------- /components/css/index.scss: -------------------------------------------------------------------------------- 1 | .main-box{ 2 | width: 96%; 3 | margin-left: 2%; 4 | margin-top: 15px; 5 | .top-nav{ 6 | width: 100%; 7 | height: 25px; 8 | line-height: 25px; 9 | background-color: #f7f7f7; 10 | text-indent: 10px; 11 | } 12 | .div-1{ 13 | width: 100%; 14 | height: 35px; 15 | line-height: 35px; 16 | margin-top: 10px; 17 | overflow: hidden; 18 | > .span-1{ 19 | height: 100%; 20 | display: inline-block; 21 | vertical-align: top; 22 | margin-left: 20px; 23 | margin-right: 8px; 24 | } 25 | .ant-input-wrapper{ 26 | display: inline-block; 27 | margin-top: 4px; 28 | } 29 | .ant-btn{ 30 | vertical-align: top; 31 | margin-top: 4px; 32 | margin-left: 15px; 33 | span{ 34 | color: #FFF; 35 | } 36 | } 37 | .ant-select{ 38 | vertical-align: top; 39 | margin-top: 4px; 40 | } 41 | .ant-calendar-picker{ 42 | vertical-align: top; 43 | } 44 | .right-box{ 45 | float: right; 46 | .anticon{ 47 | font-size: 18px; 48 | &:hover{ 49 | color: #ff6355; 50 | } 51 | } 52 | } 53 | } 54 | .ul-1{ 55 | width: 100%; 56 | height: 100px; 57 | font-size: 0; 58 | margin-top: 15px; 59 | li{ 60 | width: 13%; 61 | height: 100%; 62 | display: inline-block; 63 | box-sizing: border-box; 64 | background-color: #43bab1; 65 | font-size: 14px; 66 | vertical-align: top; 67 | border-radius: 5px; 68 | transition: transform .6s; 69 | &:hover{ 70 | background-color: #46c6bc; 71 | transform: translateY(-10%) scale(1.1); 72 | } 73 | &:not(:nth-child(1)){ 74 | margin-left: 1.5%; 75 | } 76 | span{ 77 | float: right; 78 | margin-right: 5px; 79 | color: #FFF; 80 | } 81 | h2{ 82 | width: 100%; 83 | height: 40px; 84 | line-height: 40px; 85 | margin-top: 22px; 86 | text-align: center; 87 | font-size: 22px; 88 | overflow: hidden; 89 | text-overflow: ellipsis; 90 | white-space: nowrap; 91 | color: #FFF; 92 | } 93 | p{ 94 | text-align: center; 95 | color: #FFF; 96 | } 97 | } 98 | } 99 | .chart-box{ 100 | width: 100%; 101 | display: flex; 102 | display: -webkit-flex; 103 | flex-flow: row wrap; 104 | align-content: flex-start; 105 | margin-top: 50px; 106 | padding-bottom: 50px; 107 | overflow: hidden; 108 | .chart-div{ 109 | height: 340px; 110 | flex: 0 0 48%; 111 | box-sizing: border-box; 112 | overflow: hidden; 113 | &:nth-child(2n+2){ 114 | margin-left: 4%; 115 | } 116 | &:nth-child(n+3){ 117 | margin-top: 50px; 118 | } 119 | > div{ 120 | width: 100%; 121 | height: 100%; 122 | } 123 | } 124 | } 125 | } -------------------------------------------------------------------------------- /components/js/common/form_reg.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 表单正则验证模块 5 | */ 6 | 7 | class FormReg{ 8 | 9 | constructor(){ 10 | } 11 | 12 | //判断是否为空，真为空，假为非空 13 | isEmpty(str){ 14 | return !str.trim() ? true : false; 15 | } 16 | 17 | //限制长度，真为在范围内，假为不在范围内 18 | isLength(str, min, max){ 19 | var str = str.trim(), 20 | min = min || 0, 21 | max = max || 100; 22 | if(str.length >= min && str.length <= max){ 23 | return true; 24 | }else{ 25 | return false; 26 | } 27 | } 28 | 29 | //判断是否为数字，真为数字，假为非数字 30 | isNumber(num){ 31 | var num = num.trim(); 32 | if(!isNaN(num) && num !== ""){ 33 | return true; 34 | }else{ 35 | return false; 36 | } 37 | } 38 | 39 | //判断是否为手机号，真为手机号，假为非手机号 40 | isPhone(str){ 41 | var str = str.trim(); 42 | if(/^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57]|17[0-9])[0-9]{8}$/.test(str)){ 43 | return true; 44 | }else{ 45 | return false; 46 | } 47 | } 48 | 49 | //判断是否为邮箱地址，真为邮箱地址，假为非邮箱地址 50 | isEmail(str){ 51 | var str = str.trim(); 52 | if(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(str)){ 53 | return true; 54 | }else{ 55 | return false; 56 | } 57 | } 58 | 59 | //判断是否为QQ号，真为QQ号，假为非QQ号 60 | isQQ(str){ 61 | var str = str.trim(); 62 | if(/^[1-9]\d{4,}$/.test(str)){ 63 | return true; 64 | }else{ 65 | return false; 66 | } 67 | } 68 | 69 | //判断是否为URL地址，真为URL地址，假为非URL地址 70 | isURL(str){ 71 | var str = str.trim(); 72 | if(/^[a-zA-Z]+[://][^\s]*$/.test(str)){ 73 | return true; 74 | }else{ 75 | return false; 76 | } 77 | } 78 | 79 | //判断是否为汉字，真为汉字，假为非汉字 80 | isChinese(str){ 81 | var str = str.trim(); 82 | if(/^[\u4e00-\u9fa5]+$/.test(str)){ 83 | return true; 84 | }else{ 85 | return false; 86 | } 87 | } 88 | 89 | //判断是否为汉字、字母、数字，真为匹配，假为不匹配 90 | isChineseOrEnglishOrNum(str){ 91 | var str = str.trim(); 92 | if(/^([\u4e00-\u9fa5]|[a-zA-Z]|[0-9])+$/.test(str)){ 93 | return true; 94 | }else{ 95 | return false; 96 | } 97 | } 98 | 99 | //判断是否为邮编，真为邮编，假为非邮编 100 | isPostCode(str){ 101 | var str = str.trim(); 102 | if(/^[1-9]\d{5}$/.test(str)){ 103 | return true; 104 | }else{ 105 | return false; 106 | } 107 | } 108 | 109 | //判断是否为身份证号码，真为身份证号码，假为非身份证号码 110 | isIDNumber(str){ 111 | var str = str.trim(); 112 | if(/^\d{15}(\d\d[0-9xX])?$/.test(str)){ 113 | return true; 114 | }else{ 115 | return false; 116 | } 117 | } 118 | 119 | //判断是否为正整数（不包含0），真为正整数，假为非正整数 120 | isPositiveInteger(str){ 121 | var str = str.trim(); 122 | if(/^[0-9]*[1-9][0-9]*$/.test(str)){ 123 | return true; 124 | }else{ 125 | return false; 126 | } 127 | } 128 | 129 | //判断是否为非负整数（正整数或0），真为匹配，假为不匹配 130 | isPositiveIntegerOrZero(str){ 131 | var str = str.trim(); 132 | if(/^\d+$/.test(str)){ 133 | return true; 134 | }else{ 135 | return false; 136 | } 137 | } 138 | } 139 | 140 | export default FormReg; -------------------------------------------------------------------------------- /components/js/mail_management_template.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 邮件管理系统-模板管理模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Popconfirm, message, Modal } from 'antd'; 12 | 13 | function confirmDelete(){ 14 | message.success('删除成功'); 15 | } 16 | 17 | const table_option_1 = { 18 | title : '模板管理', 19 | columns : [ 20 | { 21 | title : '模板ID', 22 | dataIndex : 'a', 23 | key : 'a' 24 | }, 25 | { 26 | title : '标题', 27 | dataIndex : 'b', 28 | key : 'b' 29 | }, 30 | { 31 | title : '路径', 32 | dataIndex : 'c', 33 | key : 'c' 34 | }, 35 | { 36 | title : '操作', 37 | key : 'action', 38 | width : 100, 39 | className : 'action-column', 40 | render : () => ( 41 | 42 | 43 | 删除 44 | 45 | 46 | ) 47 | } 48 | ], 49 | url : './components/data/test_data_1.json', 50 | source : [] 51 | }; 52 | 53 | class MailManagementTemplate extends React.Component{ 54 | 55 | constructor(props){ 56 | super(props); 57 | this.state = { 58 | visible : false, 59 | confirmLoading : false 60 | } 61 | } 62 | 63 | handleChange(){ 64 | } 65 | 66 | showModal(){ 67 | this.setState({ 68 | visible : true 69 | }) 70 | } 71 | 72 | handleOk(){ 73 | this.setState({ 74 | confirmLoading : true 75 | }) 76 | setTimeout(() => { 77 | this.setState({ 78 | visible : false, 79 | confirmLoading : false 80 | }) 81 | }, 2000) 82 | } 83 | 84 | handleCancel(){ 85 | this.setState({ 86 | visible : false 87 | }) 88 | } 89 | 90 | componentWillMount(){ 91 | } 92 | 93 | componentDidMount(){ 94 | } 95 | 96 | render(){ 97 | return ( 98 |
99 |
100 | 工具 > 邮件管理系统 > 模板管理 101 |
102 |
103 | 104 |
105 | 106 | 112 |
    113 |
  • 114 | 115 | 116 |
    • 117 |
  • 118 | 119 | 120 |
    • 121 |
  • 122 | 123 | 124 |
    • 125 |
  • 126 | 127 | 128 |
    • 129 |
130 | 131 |
132 | ); 133 | } 134 | 135 | } 136 | 137 | export default MailManagementTemplate; -------------------------------------------------------------------------------- /components/js/login_canvas.js: -------------------------------------------------------------------------------- 1 | window.onload = function(){ 2 | var canvas = document.getElementById('canvas'), 3 | context = canvas.getContext('2d'), 4 | canvasWidth, 5 | canvasHeight; 6 | canvas.width = canvasWidth = window.innerWidth; 7 | canvas.height = canvasHeight = window.innerHeight; 8 | 9 | var APP = { 10 | //配置信息 11 | Dots : { 12 | number : 50, //粒子数量 13 | dis : 200, //距离多远会连线 14 | array : [], //存放单个粒子信息 15 | radiusArr : [], //存放单个粒子半径 16 | lineColor : '#eaebec', //连线颜色 17 | cycleColor : '#eaebec' //粒子颜色 18 | }, 19 | init : function(){ 20 | this.drawBg(context); 21 | this.draw(); 22 | }, 23 | //绘制背景 24 | drawBg : function(context){ 25 | context.beginPath(); 26 | context.fillStyle = '#f7fafc'; 27 | context.fillRect(0, 0, canvasWidth, canvasHeight); 28 | context.save(); 29 | }, 30 | //初始化粒子信息 31 | draw : function(){ 32 | //构造函数，创建粒子 33 | function Dot(){ 34 | //圆心坐标 35 | this.x = Math.round(Math.random() * canvasWidth); 36 | this.y = Math.round(Math.random() * canvasHeight); 37 | //移动速度 38 | this.vx = (Math.random() - 0.5) * 3; 39 | this.vy = (Math.random() - 0.5) * 3; 40 | //半径 41 | this.radius = Math.round(Math.random() * 20); 42 | } 43 | Dot.prototype.draw = function(){ 44 | context.beginPath(); 45 | context.fillStyle = APP.Dots.cycleColor; 46 | context.arc(this.x, this.y, this.radius, 0, 360, false); 47 | context.fill(); 48 | } 49 | //创建粒子放入数组 50 | for(var i = 0; i < this.Dots.number; i++){ 51 | var dotObj = new Dot(); 52 | this.Dots.array.push(dotObj); 53 | this.Dots.radiusArr.push(dotObj.radius); 54 | } 55 | this.start(); 56 | }, 57 | //绘制粒子 58 | drawDots : function(){ 59 | this.drawBg(context); 60 | for(var i = 0; i < this.Dots.number; i++){ 61 | this.Dots.array[i].draw(); 62 | } 63 | }, 64 | //移动粒子 65 | moveDots : function(){ 66 | for(var i = 0; i < this.Dots.number; i++){ 67 | var dot = this.Dots.array[i]; 68 | if(dot.x < 0 || dot.x > canvasWidth){ 69 | dot.vx = -dot.vx; 70 | } 71 | if(dot.y < 0 || dot.y > canvasHeight){ 72 | dot.vy = -dot.vy; 73 | } 74 | dot.x += dot.vx; 75 | dot.y += dot.vy; 76 | } 77 | }, 78 | //连线粒子 79 | lineDots : function(){ 80 | for(var i = 0; i < this.Dots.number; i++){ 81 | for(var j = 0; j < this.Dots.number; j++){ 82 | if(Math.abs(this.Dots.array[i].x - this.Dots.array[j].x) <= this.Dots.dis && Math.abs(this.Dots.array[i].y - this.Dots.array[j].y) <= this.Dots.dis){ 83 | context.lineWidth = 0.2; 84 | context.beginPath(); 85 | context.strokeStyle = this.Dots.lineColor; 86 | context.moveTo(this.Dots.array[i].x, this.Dots.array[i].y); 87 | context.lineTo(this.Dots.array[j].x, this.Dots.array[j].y); 88 | context.stroke(); 89 | } 90 | } 91 | } 92 | }, 93 | start : function(){ 94 | var that = this; 95 | setInterval(function(){ 96 | context.clearRect(0, 0, canvasWidth, canvasHeight); 97 | that.moveDots(); 98 | that.drawDots(); 99 | that.lineDots(); 100 | }, 60) 101 | } 102 | } 103 | 104 | APP.init(); 105 | } -------------------------------------------------------------------------------- /components/js/business_account_info.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 企业账户信息模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { DatePicker } from 'antd'; 12 | const RangePicker = DatePicker.RangePicker; 13 | 14 | const table_option_1 = { 15 | title : '企业账户信息', 16 | columns : [ 17 | { 18 | title : '企业名称', 19 | dataIndex : 'a', 20 | key : 'a' 21 | }, 22 | { 23 | title : '创建人', 24 | dataIndex : 'b', 25 | key : 'b' 26 | }, 27 | { 28 | title : '创建人电话', 29 | dataIndex : 'c', 30 | key : 'c' 31 | }, 32 | { 33 | title : '总充值金额', 34 | dataIndex : 'd', 35 | key : 'd' 36 | }, 37 | { 38 | title : '当期充值金额', 39 | dataIndex : 'e', 40 | key : 'e' 41 | }, 42 | { 43 | title : '当期账户充值金额', 44 | dataIndex : 'f', 45 | key : 'f' 46 | }, 47 | { 48 | title : '充值日期', 49 | dataIndex : 'g', 50 | key : 'g' 51 | }, 52 | { 53 | title : '行业', 54 | dataIndex : 'h', 55 | key : 'h' 56 | }, 57 | { 58 | title : '账户余额', 59 | dataIndex : 'i', 60 | key : 'i' 61 | }, 62 | { 63 | title : '发票额度', 64 | dataIndex : 'j', 65 | key : 'j' 66 | }, 67 | { 68 | title : '客户经理', 69 | dataIndex : 'k', 70 | key : 'k' 71 | }, 72 | { 73 | title : '首次充值金额', 74 | dataIndex : 'l', 75 | key : 'l' 76 | }, 77 | { 78 | title : '首次充值日期', 79 | dataIndex : 'm', 80 | key : 'm' 81 | }, 82 | { 83 | title : '城市', 84 | dataIndex : 'n', 85 | key : 'n' 86 | }, 87 | ], 88 | url : './components/data/test_data_1.json', 89 | source : [] 90 | }; 91 | 92 | class BusinessAccountInfo extends React.Component{ 93 | 94 | constructor(props){ 95 | super(props); 96 | this.state = { 97 | params : { 98 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 99 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD') 100 | } 101 | } 102 | } 103 | 104 | //选择日期 105 | selectDate(dates, dateStrings){ 106 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 107 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 108 | return; 109 | } 110 | var params = {}; 111 | for(let k in this.state.params){ 112 | params[k] = this.state.params[k]; 113 | } 114 | params.startDate = dateStrings[0]; 115 | params.endDate = dateStrings[1]; 116 | this.setState({ 117 | params : params 118 | }) 119 | } 120 | 121 | handleChange(){ 122 | 123 | } 124 | 125 | componentWillMount(){ 126 | } 127 | 128 | componentDidMount(){ 129 | } 130 | 131 | render(){ 132 | return ( 133 |
134 |
135 | 财务 > 企业账户信息 136 |
137 |
138 | 143 |
144 | 145 |
146 | ); 147 | } 148 | 149 | } 150 | 151 | export default BusinessAccountInfo; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 数据可视化BI系统 2 | 3 | #### 开发环境 4 | * Node 6.9.4 5 | 6 | #### 开发工具 7 | * Sublime 8 | * HBuilder 7.6.2 9 | 10 | #### 框架 11 | * React 15.3.2 12 | 13 | #### UI 14 | * Ant Design 2.4.2 15 | 16 | #### 插件 17 | * 根目录下-package.json 18 | * 通过“npm install”自动安装package.json中的所有依赖插件，需要注意的是，各插件工具的版本一直在迭代更新，会出现不兼容的可能性，有时需要自己修改下webpack配置文件中的一些语法规则，install的时候会有报错提示，这个坑我也踩了很多遍了，推荐自己去看一下webpack的使用方法，按照依赖包重新装一遍 19 | 20 | #### 打包工具 21 | * Webpack 1.13.3 22 | 23 | #### 数据请求 24 | * 项目是使用Fetch作为请求方式，但该项目源码只是初期原型，并没有涉及到真正的请求接口，仅有部分随机生成的模拟数据供展示，需要自己写一下这块内容 25 | 26 | #### 预览地址 27 | [点击](http://kongjunchao.com/app/bi_pc/login.html) 28 | 29 | #### 测试环境 30 | webpack.config.js为webpack测试环境下的配置文件，package.json文件存放依赖模块 31 | 项目根目录下执行命令“npm start”，浏览器访问localhost:7777/login.html即可 32 | 33 | #### 生产环境 34 | webpack.production.config.js为webpack生产环境下的配置文件，package.json文件存放依赖模块 35 | 项目根目录下执行命令“npm run build”，dist文件夹中会自动生成压缩合并后的js和css文件，注意vendor.min.js仅用于提取公共js文件，并无用途，实际上线可删除 36 | 37 | #### 组件相关 38 | 项目中所使用的组件存放在components/js文件夹中，其中common文件夹中存放公共组件 39 | 40 | #### 页面结构 41 | 项目入口文件 42 | main.js 43 | 44 | 顶部入口 45 | 消息 46 | message.js 47 | 48 | 左侧导航入口 49 | 报表 50 | 首页 51 | index.js 52 | 53 | 运营日报 54 | daily_operation.js 55 | 56 | 今日预测 57 | today_forecast.js 58 | 59 | 工具 60 | 邮件管理系统 61 | 任务管理 62 | mail_management_task.js 63 | 64 | 任务邮箱管理 65 | mail_management_task_mail.js 66 | 67 | 模板管理 68 | mail_management_template.js 69 | 70 | 任务日志 71 | mail_management_task_log.js 72 | 73 | 预警管理系统 74 | 预警模块 75 | warn_module.js 76 | 77 | 预警指标 78 | warn_index.js 79 | 80 | 预警手机号 81 | warn_phone.js 82 | 83 | 公告管理 84 | message_management.js 85 | 86 | 访问日志 87 | access_log.js 88 | 89 | 项目分析 90 | 充值返现 91 | recharge_return.js 92 | 93 | 用户体验 94 | user_experience.js 95 | 96 | 用户 97 | 市场推广 98 | market_promotion.js 99 | 100 | 消费活跃用户 101 | consumer_active_user.js 102 | 103 | 访问活跃用户 104 | access_active_user.js 105 | 106 | 个人用券监控日报 107 | person_ticket_daily.js 108 | 109 | 个人用券监控报表 110 | person_ticket_table.js 111 | 112 | 企业用户 113 | 企业注册报表 114 | business_register_table.js 115 | 116 | 企业激活报表 117 | business_active_table.js 118 | 119 | 订单 120 | 地域收入 121 | area_income.js 122 | 123 | 产品收入 124 | product_income.js 125 | 126 | 订单来源 127 | order_source.js 128 | 129 | 完成订单 130 | complete_order.js 131 | 132 | 车源 133 | 车源分析 134 | car_analysis.js 135 | 136 | 车源市场推广 137 | car_market_extension.js 138 | 139 | 注册司机 140 | register_driver.js 141 | 142 | 派单 143 | 实时派单半小时 144 | realtime_order_half.js 145 | 146 | 失败订单 147 | error_order.js 148 | 149 | 司机接单率 150 | driver_order_percent.js 151 | 152 | 财务 153 | 企业账户信息 154 | business_account_info.js 155 | 156 | 竞品 157 | 竞品价格 158 | competitor_price.js 159 | 160 | 携程接送机 161 | ctrip_airport.js 162 | 163 | 部门关键指标 164 | 产品部 165 | product_service.js 166 | 167 | 周报 168 | 周报详情 169 | week_report_details.js 170 | 171 | #### 项目展示 172 | ![](http://kongjunchao.com/app/images/img_01.png) 173 | ![](http://kongjunchao.com/app/images/img_03.png) 174 | ![](http://kongjunchao.com/app/images/img_04.png) 175 | ![](http://kongjunchao.com/app/images/img_05.png) -------------------------------------------------------------------------------- /components/js/warn_module.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 预警管理系统-预警模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Radio, Select, Popconfirm, message, Modal } from 'antd'; 12 | 13 | function confirmDelete(){ 14 | message.success('删除成功'); 15 | } 16 | 17 | class WarnModule extends React.Component{ 18 | 19 | constructor(props){ 20 | super(props); 21 | this.state = { 22 | visible : false, 23 | type : 'add', //add or edit 24 | confirmLoading : false 25 | } 26 | } 27 | 28 | handleChange(){ 29 | } 30 | 31 | showModal(type){ 32 | this.setState({ 33 | visible : true, 34 | type : type 35 | }) 36 | } 37 | 38 | handleOk(){ 39 | this.setState({ 40 | confirmLoading : true 41 | }) 42 | setTimeout(() => { 43 | this.setState({ 44 | visible : false, 45 | confirmLoading : false 46 | }) 47 | }, 2000) 48 | } 49 | 50 | handleCancel(){ 51 | this.setState({ 52 | visible : false 53 | }) 54 | } 55 | 56 | componentWillMount(){ 57 | } 58 | 59 | componentDidMount(){ 60 | } 61 | 62 | render(){ 63 | const table_option_1 = { 64 | title : '预警模块', 65 | columns : [ 66 | { 67 | title : 'ID', 68 | dataIndex : 'a', 69 | key : 'a' 70 | }, 71 | { 72 | title : '模块', 73 | dataIndex : 'b', 74 | key : 'b' 75 | }, 76 | { 77 | title : '模块名称', 78 | dataIndex : 'c', 79 | key : 'c' 80 | }, 81 | { 82 | title : 'URL', 83 | dataIndex : 'd', 84 | key : 'd' 85 | }, 86 | { 87 | title : '状态', 88 | dataIndex : 'e', 89 | key : 'e' 90 | }, 91 | { 92 | title : '操作', 93 | key : 'action', 94 | width : 200, 95 | className : 'action-column', 96 | render : () => ( 97 | 98 | 预警指标| 99 | 手机号管理| 100 | 编辑| 101 | 102 | 删除 103 | 104 | 105 | ) 106 | } 107 | ], 108 | url : './components/data/test_data_1.json', 109 | source : [] 110 | }; 111 | 112 | return ( 113 |
114 |
115 | 工具 > 预警管理系统 > 预警模块 116 |
117 |
118 | 119 |
120 | 121 | 127 |
    128 |
  • 129 | 130 | 131 |
    • 132 |
  • 133 | 134 | 135 |
    • 136 |
  • 137 | 138 | 139 |
    • 140 |
141 | 142 |
143 | ); 144 | } 145 | 146 | } 147 | 148 | export default WarnModule; -------------------------------------------------------------------------------- /components/js/common/table_data.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description Table模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import { Table, Icon } from 'antd'; 10 | import Fetch from './fetch.js'; 11 | import '../../css/table_data.scss'; 12 | 13 | class TableData extends React.Component{ 14 | 15 | constructor(props){ 16 | super(props); 17 | this.state = { 18 | table_data : [], 19 | table_columns : [], 20 | index : 0, 21 | pagination : {}, 22 | loading : false 23 | } 24 | } 25 | 26 | componentWillMount(){ 27 | this.setState({ 28 | table_columns : this.props.tableOptions.columns || this.props.tableOptions.source[0].columns 29 | }) 30 | } 31 | 32 | componentDidMount(){ 33 | this.getTableData(1, this.props.params); 34 | } 35 | 36 | componentWillReceiveProps(newProps){ 37 | if(this.props.params !== newProps.params){ 38 | this.getTableData(1, newProps.params); 39 | } 40 | } 41 | 42 | toggleLoading(){ 43 | this.setState({ 44 | loading : !this.state.loading 45 | }) 46 | } 47 | 48 | //切换表格数据 49 | changeData(e){ 50 | var key = parseInt(e.target.getAttribute('data-key')); 51 | if(!key || key - 1 === this.state.index){ 52 | return; 53 | } 54 | e.target.parentNode.childNodes[this.state.index].className = ''; 55 | e.target.className = 'active'; 56 | this.setState({ 57 | index : key - 1 58 | }) 59 | this.getTableData(key, this.props.params); 60 | } 61 | 62 | getTableData(key, params){ 63 | var that = this, 64 | url = '', 65 | paramsStr = ''; 66 | this.toggleLoading(); 67 | for(let k in params){ 68 | paramsStr += k + '=' + params[k] + '&'; 69 | } 70 | if(this.props.tableOptions.source.length !== 0 && this.props.tableOptions.source[key - 1].columns){ 71 | that.setState({ 72 | table_columns : this.props.tableOptions.source[key - 1].columns 73 | }) 74 | } 75 | if(this.props.tableOptions.url){ 76 | url = this.props.tableOptions.url + '?' + paramsStr; 77 | }else{ 78 | url = this.props.tableOptions.source[key - 1].url + '?' + paramsStr; 79 | } 80 | console.log(url); 81 | const useFetch = new Fetch(url, null, function(data){ 82 | that.setState({ 83 | table_data : data, 84 | pagination : data.length < 11 ? false : { 85 | total : data.length, 86 | showSizeChanger : true, 87 | showQuickJumper : true, 88 | size : 'normal' 89 | } 90 | }) 91 | that.toggleLoading(); 92 | }, function(){ 93 | that.toggleLoading(); 94 | }); 95 | useFetch.getFetch(); 96 | } 97 | 98 | render(){ 99 | return ( 100 |
101 | { 102 | this.props.tableOptions.title ?

{this.props.tableOptions.title}

: '' 103 | } 104 |

105 | { 106 | this.props.tableOptions.source.map(function(data, index){ 107 | return index === 0 ? {data.name} : {data.name} 108 | }) 109 | } 110 |

111 |
119 |
120 | ) 121 | } 122 | 123 | } 124 | 125 | export default TableData; -------------------------------------------------------------------------------- /dist/login.min.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{0:function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var l=(n(1),n(4)),s=r(l),u=(n(270),n(272)),c=r(u),f=function(){function t(t,e){for(var n=0;nt)&&(r.vx=-r.vx),(r.y<0||r.y>e)&&(r.vy=-r.vy),r.x+=r.vx,r.y+=r.vy}},lineDots:function(){for(var t=0;t 119 |
120 | 企业用户 > 企业激活报表 121 |
122 |
123 | 128 | 客户经理 129 | 130 | 客户类型 131 | 140 | 141 |
142 | 143 | 144 | ); 145 | } 146 | 147 | } 148 | 149 | export default BusinessActiveTable; -------------------------------------------------------------------------------- /components/data/test_data_3.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "key" : "1", 4 | "date" : "2016-10-11", 5 | "a" : "356489", 6 | "b" : "356489", 7 | "c" : "356489", 8 | "d" : "356489", 9 | "e" : "356489", 10 | "f" : "356489", 11 | "g" : "356489", 12 | "h" : "356489", 13 | "i" : "356489", 14 | "j" : "356489", 15 | "k" : "356489", 16 | "l" : "356489", 17 | "m" : "356489", 18 | "n" : "356489", 19 | "o" : "356489", 20 | "p" : "356489", 21 | "q" : "356489", 22 | "r" : "356489", 23 | "s" : "356489", 24 | "t" : "356489" 25 | }, 26 | { 27 | "key" : "2", 28 | "date" : "2016-10-12", 29 | "a" : "356489", 30 | "b" : "356489", 31 | "c" : "356489", 32 | "d" : "356489", 33 | "e" : "356489", 34 | "f" : "356489", 35 | "g" : "356489", 36 | "h" : "356489", 37 | "i" : "356489", 38 | "j" : "356489", 39 | "k" : "356489", 40 | "l" : "356489", 41 | "m" : "356489", 42 | "n" : "356489", 43 | "o" : "356489", 44 | "p" : "356489", 45 | "q" : "356489", 46 | "r" : "356489", 47 | "s" : "356489", 48 | "t" : "356489" 49 | }, 50 | { 51 | "key" : "3", 52 | "date" : "2016-10-13", 53 | "a" : "356489", 54 | "b" : "356489", 55 | "c" : "356489", 56 | "d" : "356489", 57 | "e" : "356489", 58 | "f" : "356489", 59 | "g" : "356489", 60 | "h" : "356489", 61 | "i" : "356489", 62 | "j" : "356489", 63 | "k" : "356489", 64 | "l" : "356489", 65 | "m" : "356489", 66 | "n" : "356489", 67 | "o" : "356489", 68 | "p" : "356489", 69 | "q" : "356489", 70 | "r" : "356489", 71 | "s" : "356489", 72 | "t" : "356489" 73 | }, 74 | { 75 | "key" : "4", 76 | "date" : "2016-10-14", 77 | "a" : "356489", 78 | "b" : "356489", 79 | "c" : "356489", 80 | "d" : "356489", 81 | "e" : "356489", 82 | "f" : "356489", 83 | "g" : "356489", 84 | "h" : "356489", 85 | "i" : "356489", 86 | "j" : "356489", 87 | "k" : "356489", 88 | "l" : "356489", 89 | "m" : "356489", 90 | "n" : "356489", 91 | "o" : "356489", 92 | "p" : "356489", 93 | "q" : "356489", 94 | "r" : "356489", 95 | "s" : "356489", 96 | "t" : "356489" 97 | }, 98 | { 99 | "key" : "5", 100 | "date" : "2016-10-15", 101 | "a" : "356489", 102 | "b" : "356489", 103 | "c" : "356489", 104 | "d" : "356489", 105 | "e" : "356489", 106 | "f" : "356489", 107 | "g" : "356489", 108 | "h" : "356489", 109 | "i" : "356489", 110 | "j" : "356489", 111 | "k" : "356489", 112 | "l" : "356489", 113 | "m" : "356489", 114 | "n" : "356489", 115 | "o" : "356489", 116 | "p" : "356489", 117 | "q" : "356489", 118 | "r" : "356489", 119 | "s" : "356489", 120 | "t" : "356489" 121 | }, 122 | { 123 | "key" : "6", 124 | "date" : "2016-10-16", 125 | "a" : "356489", 126 | "b" : "356489", 127 | "c" : "356489", 128 | "d" : "356489", 129 | "e" : "356489", 130 | "f" : "356489", 131 | "g" : "356489", 132 | "h" : "356489", 133 | "i" : "356489", 134 | "j" : "356489", 135 | "k" : "356489", 136 | "l" : "356489", 137 | "m" : "356489", 138 | "n" : "356489", 139 | "o" : "356489", 140 | "p" : "356489", 141 | "q" : "356489", 142 | "r" : "356489", 143 | "s" : "356489", 144 | "t" : "356489" 145 | }, 146 | { 147 | "key" : "7", 148 | "date" : "2016-10-17", 149 | "a" : "356489", 150 | "b" : "356489", 151 | "c" : "356489", 152 | "d" : "356489", 153 | "e" : "356489", 154 | "f" : "356489", 155 | "g" : "356489", 156 | "h" : "356489", 157 | "i" : "356489", 158 | "j" : "356489", 159 | "k" : "356489", 160 | "l" : "356489", 161 | "m" : "356489", 162 | "n" : "356489", 163 | "o" : "356489", 164 | "p" : "356489", 165 | "q" : "356489", 166 | "r" : "356489", 167 | "s" : "356489", 168 | "t" : "356489" 169 | } 170 | ] -------------------------------------------------------------------------------- /components/data/test_data_4.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "key" : "1", 4 | "date" : "2016-10-11", 5 | "a" : "458765", 6 | "b" : "458765", 7 | "c" : "458765", 8 | "d" : "458765", 9 | "e" : "458765", 10 | "f" : "458765", 11 | "g" : "458765", 12 | "h" : "458765", 13 | "i" : "458765", 14 | "j" : "458765", 15 | "k" : "458765", 16 | "l" : "458765", 17 | "m" : "458765", 18 | "n" : "458765", 19 | "o" : "458765", 20 | "p" : "458765", 21 | "q" : "458765", 22 | "r" : "458765", 23 | "s" : "458765", 24 | "t" : "458765" 25 | }, 26 | { 27 | "key" : "2", 28 | "date" : "2016-10-12", 29 | "a" : "458765", 30 | "b" : "458765", 31 | "c" : "458765", 32 | "d" : "458765", 33 | "e" : "458765", 34 | "f" : "458765", 35 | "g" : "458765", 36 | "h" : "458765", 37 | "i" : "458765", 38 | "j" : "458765", 39 | "k" : "458765", 40 | "l" : "458765", 41 | "m" : "458765", 42 | "n" : "458765", 43 | "o" : "458765", 44 | "p" : "458765", 45 | "q" : "458765", 46 | "r" : "458765", 47 | "s" : "458765", 48 | "t" : "458765" 49 | }, 50 | { 51 | "key" : "3", 52 | "date" : "2016-10-13", 53 | "a" : "458765", 54 | "b" : "458765", 55 | "c" : "458765", 56 | "d" : "458765", 57 | "e" : "458765", 58 | "f" : "458765", 59 | "g" : "458765", 60 | "h" : "458765", 61 | "i" : "458765", 62 | "j" : "458765", 63 | "k" : "458765", 64 | "l" : "458765", 65 | "m" : "458765", 66 | "n" : "458765", 67 | "o" : "458765", 68 | "p" : "458765", 69 | "q" : "458765", 70 | "r" : "458765", 71 | "s" : "458765", 72 | "t" : "458765" 73 | }, 74 | { 75 | "key" : "4", 76 | "date" : "2016-10-14", 77 | "a" : "458765", 78 | "b" : "458765", 79 | "c" : "458765", 80 | "d" : "458765", 81 | "e" : "458765", 82 | "f" : "458765", 83 | "g" : "458765", 84 | "h" : "458765", 85 | "i" : "458765", 86 | "j" : "458765", 87 | "k" : "458765", 88 | "l" : "458765", 89 | "m" : "458765", 90 | "n" : "458765", 91 | "o" : "458765", 92 | "p" : "458765", 93 | "q" : "458765", 94 | "r" : "458765", 95 | "s" : "458765", 96 | "t" : "458765" 97 | }, 98 | { 99 | "key" : "5", 100 | "date" : "2016-10-15", 101 | "a" : "458765", 102 | "b" : "458765", 103 | "c" : "458765", 104 | "d" : "458765", 105 | "e" : "458765", 106 | "f" : "458765", 107 | "g" : "458765", 108 | "h" : "458765", 109 | "i" : "458765", 110 | "j" : "458765", 111 | "k" : "458765", 112 | "l" : "458765", 113 | "m" : "458765", 114 | "n" : "458765", 115 | "o" : "458765", 116 | "p" : "458765", 117 | "q" : "458765", 118 | "r" : "458765", 119 | "s" : "458765", 120 | "t" : "458765" 121 | }, 122 | { 123 | "key" : "6", 124 | "date" : "2016-10-16", 125 | "a" : "458765", 126 | "b" : "458765", 127 | "c" : "458765", 128 | "d" : "458765", 129 | "e" : "458765", 130 | "f" : "458765", 131 | "g" : "458765", 132 | "h" : "458765", 133 | "i" : "458765", 134 | "j" : "458765", 135 | "k" : "458765", 136 | "l" : "458765", 137 | "m" : "458765", 138 | "n" : "458765", 139 | "o" : "458765", 140 | "p" : "458765", 141 | "q" : "458765", 142 | "r" : "458765", 143 | "s" : "458765", 144 | "t" : "458765" 145 | }, 146 | { 147 | "key" : "7", 148 | "date" : "2016-10-17", 149 | "a" : "458765", 150 | "b" : "458765", 151 | "c" : "458765", 152 | "d" : "458765", 153 | "e" : "458765", 154 | "f" : "458765", 155 | "g" : "458765", 156 | "h" : "458765", 157 | "i" : "458765", 158 | "j" : "458765", 159 | "k" : "458765", 160 | "l" : "458765", 161 | "m" : "458765", 162 | "n" : "458765", 163 | "o" : "458765", 164 | "p" : "458765", 165 | "q" : "458765", 166 | "r" : "458765", 167 | "s" : "458765", 168 | "t" : "458765" 169 | } 170 | ] -------------------------------------------------------------------------------- /components/data/test_data_5.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "key" : "1", 4 | "date" : "2016-10-11", 5 | "a" : "563421", 6 | "b" : "563421", 7 | "c" : "563421", 8 | "d" : "563421", 9 | "e" : "563421", 10 | "f" : "563421", 11 | "g" : "563421", 12 | "h" : "563421", 13 | "i" : "563421", 14 | "j" : "563421", 15 | "k" : "563421", 16 | "l" : "563421", 17 | "m" : "563421", 18 | "n" : "563421", 19 | "o" : "563421", 20 | "p" : "563421", 21 | "q" : "563421", 22 | "r" : "563421", 23 | "s" : "563421", 24 | "t" : "563421" 25 | }, 26 | { 27 | "key" : "2", 28 | "date" : "2016-10-12", 29 | "a" : "563421", 30 | "b" : "563421", 31 | "c" : "563421", 32 | "d" : "563421", 33 | "e" : "563421", 34 | "f" : "563421", 35 | "g" : "563421", 36 | "h" : "563421", 37 | "i" : "563421", 38 | "j" : "563421", 39 | "k" : "563421", 40 | "l" : "563421", 41 | "m" : "563421", 42 | "n" : "563421", 43 | "o" : "563421", 44 | "p" : "563421", 45 | "q" : "563421", 46 | "r" : "563421", 47 | "s" : "563421", 48 | "t" : "563421" 49 | }, 50 | { 51 | "key" : "3", 52 | "date" : "2016-10-13", 53 | "a" : "563421", 54 | "b" : "563421", 55 | "c" : "563421", 56 | "d" : "563421", 57 | "e" : "563421", 58 | "f" : "563421", 59 | "g" : "563421", 60 | "h" : "563421", 61 | "i" : "563421", 62 | "j" : "563421", 63 | "k" : "563421", 64 | "l" : "563421", 65 | "m" : "563421", 66 | "n" : "563421", 67 | "o" : "563421", 68 | "p" : "563421", 69 | "q" : "563421", 70 | "r" : "563421", 71 | "s" : "563421", 72 | "t" : "563421" 73 | }, 74 | { 75 | "key" : "4", 76 | "date" : "2016-10-14", 77 | "a" : "563421", 78 | "b" : "563421", 79 | "c" : "563421", 80 | "d" : "563421", 81 | "e" : "563421", 82 | "f" : "563421", 83 | "g" : "563421", 84 | "h" : "563421", 85 | "i" : "563421", 86 | "j" : "563421", 87 | "k" : "563421", 88 | "l" : "563421", 89 | "m" : "563421", 90 | "n" : "563421", 91 | "o" : "563421", 92 | "p" : "563421", 93 | "q" : "563421", 94 | "r" : "563421", 95 | "s" : "563421", 96 | "t" : "563421" 97 | }, 98 | { 99 | "key" : "5", 100 | "date" : "2016-10-15", 101 | "a" : "563421", 102 | "b" : "563421", 103 | "c" : "563421", 104 | "d" : "563421", 105 | "e" : "563421", 106 | "f" : "563421", 107 | "g" : "563421", 108 | "h" : "563421", 109 | "i" : "563421", 110 | "j" : "563421", 111 | "k" : "563421", 112 | "l" : "563421", 113 | "m" : "563421", 114 | "n" : "563421", 115 | "o" : "563421", 116 | "p" : "563421", 117 | "q" : "563421", 118 | "r" : "563421", 119 | "s" : "563421", 120 | "t" : "563421" 121 | }, 122 | { 123 | "key" : "6", 124 | "date" : "2016-10-16", 125 | "a" : "563421", 126 | "b" : "563421", 127 | "c" : "563421", 128 | "d" : "563421", 129 | "e" : "563421", 130 | "f" : "563421", 131 | "g" : "563421", 132 | "h" : "563421", 133 | "i" : "563421", 134 | "j" : "563421", 135 | "k" : "563421", 136 | "l" : "563421", 137 | "m" : "563421", 138 | "n" : "563421", 139 | "o" : "563421", 140 | "p" : "563421", 141 | "q" : "563421", 142 | "r" : "563421", 143 | "s" : "563421", 144 | "t" : "563421" 145 | }, 146 | { 147 | "key" : "7", 148 | "date" : "2016-10-17", 149 | "a" : "563421", 150 | "b" : "563421", 151 | "c" : "563421", 152 | "d" : "563421", 153 | "e" : "563421", 154 | "f" : "563421", 155 | "g" : "563421", 156 | "h" : "563421", 157 | "i" : "563421", 158 | "j" : "563421", 159 | "k" : "563421", 160 | "l" : "563421", 161 | "m" : "563421", 162 | "n" : "563421", 163 | "o" : "563421", 164 | "p" : "563421", 165 | "q" : "563421", 166 | "r" : "563421", 167 | "s" : "563421", 168 | "t" : "563421" 169 | } 170 | ] -------------------------------------------------------------------------------- /components/js/person_ticket_table.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 个人用券监控报表模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, DatePicker } from 'antd'; 12 | const RangePicker = DatePicker.RangePicker; 13 | 14 | const table_option_1 = { 15 | title : '个人用券监控报表', 16 | columns : [ 17 | { 18 | title : '优惠券ID', 19 | dataIndex : 'a', 20 | key : 'a' 21 | }, 22 | { 23 | title : '优惠券名称', 24 | dataIndex : 'b', 25 | key : 'b' 26 | }, 27 | { 28 | title : '发放量', 29 | dataIndex : 'c', 30 | key : 'c' 31 | }, 32 | { 33 | title : '使用量', 34 | dataIndex : 'd', 35 | key : 'd' 36 | }, 37 | { 38 | title : '激活用户数', 39 | dataIndex : 'e', 40 | key : 'e' 41 | }, 42 | { 43 | title : '老用户数', 44 | dataIndex : 'f', 45 | key : 'f' 46 | }, 47 | { 48 | title : '激活用户订单数', 49 | dataIndex : 'g', 50 | key : 'g' 51 | }, 52 | { 53 | title : '老用户订单数', 54 | dataIndex : 'h', 55 | key : 'h' 56 | }, 57 | { 58 | title : '激活用户收入', 59 | dataIndex : 'i', 60 | key : 'i' 61 | }, 62 | { 63 | title : '老用户收入', 64 | dataIndex : 'j', 65 | key : 'j' 66 | }, 67 | { 68 | title : '激活用户成本', 69 | dataIndex : 'q', 70 | key : 'q' 71 | }, 72 | { 73 | title : '老用户成本', 74 | dataIndex : 'l', 75 | key : 'l' 76 | }, 77 | { 78 | title : '激活用户实际优惠', 79 | dataIndex : 'm', 80 | key : 'm' 81 | }, 82 | { 83 | title : '老用户实际优惠', 84 | dataIndex : 'n', 85 | key : 'n' 86 | } 87 | ], 88 | url : './components/data/test_data_1.json', 89 | source : [] 90 | }; 91 | 92 | class PersonTicketTable extends React.Component{ 93 | 94 | constructor(props){ 95 | super(props); 96 | this.state = { 97 | params : { 98 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 99 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 100 | ticket : '', 101 | city : this.props.city 102 | } 103 | } 104 | } 105 | 106 | //选择日期 107 | selectDate(dates, dateStrings){ 108 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 109 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 110 | return; 111 | } 112 | var params = {}; 113 | for(let k in this.state.params){ 114 | params[k] = this.state.params[k]; 115 | } 116 | params.startDate = dateStrings[0]; 117 | params.endDate = dateStrings[1]; 118 | this.setState({ 119 | params : params 120 | }) 121 | } 122 | 123 | componentWillMount(){ 124 | } 125 | 126 | componentDidMount(){ 127 | } 128 | 129 | componentWillReceiveProps(newProps){ 130 | if(this.props.city !== newProps.city){ 131 | var params = {}; 132 | for(let k in this.state.params){ 133 | params[k] = this.state.params[k]; 134 | } 135 | params.city = newProps.city; 136 | this.setState({ 137 | params : params 138 | }) 139 | } 140 | } 141 | 142 | render(){ 143 | return ( 144 |
145 |
146 | 用户 > 个人用券监控报表 147 |
148 |
149 | 154 | 优惠券ID 155 | 156 | 157 |
158 | 159 |
160 | ); 161 | } 162 | 163 | } 164 | 165 | export default PersonTicketTable; -------------------------------------------------------------------------------- /components/js/business_register_table.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 企业注册报表模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, DatePicker } from 'antd'; 12 | const Option = Select.Option; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '企业注册报表', 17 | columns : [ 18 | { 19 | title : '企业名称', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '城市', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '创建人', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '创建人ID', 35 | dataIndex : 'd', 36 | key : 'd' 37 | }, 38 | { 39 | title : '注册时间', 40 | dataIndex : 'e', 41 | key : 'e' 42 | }, 43 | { 44 | title : '是否激活', 45 | dataIndex : 'f', 46 | key : 'f' 47 | }, 48 | { 49 | title : '激活时间', 50 | dataIndex : 'g', 51 | key : 'g' 52 | }, 53 | { 54 | title : '客户经理', 55 | dataIndex : 'h', 56 | key : 'h' 57 | }, 58 | { 59 | title : '账户状态', 60 | dataIndex : 'i', 61 | key : 'i' 62 | }, 63 | { 64 | title : '注册来源', 65 | dataIndex : 'j', 66 | key : 'j' 67 | } 68 | ], 69 | url : './components/data/test_data_1.json', 70 | source : [] 71 | }; 72 | 73 | class BusinessRegisterTable extends React.Component{ 74 | 75 | constructor(props){ 76 | super(props); 77 | this.state = { 78 | params : { 79 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 80 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 81 | city : this.props.city 82 | } 83 | } 84 | } 85 | 86 | //选择日期 87 | selectDate(dates, dateStrings){ 88 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 89 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 90 | return; 91 | } 92 | var params = {}; 93 | for(let k in this.state.params){ 94 | params[k] = this.state.params[k]; 95 | } 96 | params.startDate = dateStrings[0]; 97 | params.endDate = dateStrings[1]; 98 | this.setState({ 99 | params : params 100 | }) 101 | } 102 | 103 | handleChange(){ 104 | 105 | } 106 | 107 | componentWillMount(){ 108 | } 109 | 110 | componentDidMount(){ 111 | } 112 | 113 | componentWillReceiveProps(newProps){ 114 | if(this.props.city !== newProps.city){ 115 | var params = {}; 116 | for(let k in this.state.params){ 117 | params[k] = this.state.params[k]; 118 | } 119 | params.city = newProps.city; 120 | this.setState({ 121 | params : params 122 | }) 123 | } 124 | } 125 | 126 | render(){ 127 | return ( 128 |
129 |
130 | 企业用户 > 企业注册报表 131 |
132 |
133 | 138 | 客户经理 139 | 140 | 激活状态 141 | 150 | 151 |
152 | 153 |
154 | ); 155 | } 156 | 157 | } 158 | 159 | export default BusinessRegisterTable; -------------------------------------------------------------------------------- /components/js/person_ticket_daily.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 个人用券监控日报模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, DatePicker } from 'antd'; 12 | const RangePicker = DatePicker.RangePicker; 13 | 14 | const table_option_1 = { 15 | title : '个人用券监控日报', 16 | columns : [ 17 | { 18 | title : '日期', 19 | dataIndex : 'date', 20 | key : 'date' 21 | }, 22 | { 23 | title : '优惠券ID', 24 | dataIndex : 'a', 25 | key : 'a' 26 | }, 27 | { 28 | title : '优惠券名称', 29 | dataIndex : 'b', 30 | key : 'b' 31 | }, 32 | { 33 | title : '发放量', 34 | dataIndex : 'c', 35 | key : 'c' 36 | }, 37 | { 38 | title : '使用量', 39 | dataIndex : 'd', 40 | key : 'd' 41 | }, 42 | { 43 | title : '激活用户数', 44 | dataIndex : 'e', 45 | key : 'e' 46 | }, 47 | { 48 | title : '老用户数', 49 | dataIndex : 'f', 50 | key : 'f' 51 | }, 52 | { 53 | title : '激活用户订单数', 54 | dataIndex : 'g', 55 | key : 'g' 56 | }, 57 | { 58 | title : '老用户订单数', 59 | dataIndex : 'h', 60 | key : 'h' 61 | }, 62 | { 63 | title : '激活用户收入', 64 | dataIndex : 'i', 65 | key : 'i' 66 | }, 67 | { 68 | title : '老用户收入', 69 | dataIndex : 'j', 70 | key : 'j' 71 | }, 72 | { 73 | title : '激活用户成本', 74 | dataIndex : 'q', 75 | key : 'q' 76 | }, 77 | { 78 | title : '老用户成本', 79 | dataIndex : 'l', 80 | key : 'l' 81 | }, 82 | { 83 | title : '激活用户实际优惠', 84 | dataIndex : 'm', 85 | key : 'm' 86 | }, 87 | { 88 | title : '老用户实际优惠', 89 | dataIndex : 'n', 90 | key : 'n' 91 | } 92 | ], 93 | url : './components/data/test_data_1.json', 94 | source : [] 95 | }; 96 | 97 | class PersonTicketDaily extends React.Component{ 98 | 99 | constructor(props){ 100 | super(props); 101 | this.state = { 102 | params : { 103 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 104 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 105 | ticket : '', 106 | city : this.props.city 107 | } 108 | } 109 | } 110 | 111 | //选择日期 112 | selectDate(dates, dateStrings){ 113 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 114 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 115 | return; 116 | } 117 | var params = {}; 118 | for(let k in this.state.params){ 119 | params[k] = this.state.params[k]; 120 | } 121 | params.startDate = dateStrings[0]; 122 | params.endDate = dateStrings[1]; 123 | this.setState({ 124 | params : params 125 | }) 126 | } 127 | 128 | componentWillMount(){ 129 | } 130 | 131 | componentDidMount(){ 132 | } 133 | 134 | componentWillReceiveProps(newProps){ 135 | if(this.props.city !== newProps.city){ 136 | var params = {}; 137 | for(let k in this.state.params){ 138 | params[k] = this.state.params[k]; 139 | } 140 | params.city = newProps.city; 141 | this.setState({ 142 | params : params 143 | }) 144 | } 145 | } 146 | 147 | render(){ 148 | return ( 149 |
150 |
151 | 用户 > 个人用券监控日报 152 |
153 |
154 | 159 | 优惠券ID 160 | 161 | 162 |
163 | 164 |
165 | ); 166 | } 167 | 168 | } 169 | 170 | export default PersonTicketDaily; -------------------------------------------------------------------------------- /components/data/test_data_2.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "key" : "1", 4 | "date" : "2016-10-11", 5 | "a" : "4578654", 6 | "b" : "4578654", 7 | "c" : "4578654", 8 | "d" : "4578654", 9 | "e" : "4578654", 10 | "f" : "4578654", 11 | "g" : "4578654", 12 | "h" : "4578654", 13 | "i" : "4578654", 14 | "j" : "4578654", 15 | "k" : "4578654", 16 | "l" : "4578654", 17 | "m" : "4578654", 18 | "n" : "4578654", 19 | "o" : "4578654", 20 | "p" : "4578654", 21 | "q" : "4578654", 22 | "r" : "4578654", 23 | "s" : "4578654", 24 | "t" : "4578654" 25 | }, 26 | { 27 | "key" : "2", 28 | "date" : "2016-10-12", 29 | "a" : "4578654", 30 | "b" : "4578654", 31 | "c" : "4578654", 32 | "d" : "4578654", 33 | "e" : "4578654", 34 | "f" : "4578654", 35 | "g" : "4578654", 36 | "h" : "4578654", 37 | "i" : "4578654", 38 | "j" : "4578654", 39 | "k" : "4578654", 40 | "l" : "4578654", 41 | "m" : "4578654", 42 | "n" : "4578654", 43 | "o" : "4578654", 44 | "p" : "4578654", 45 | "q" : "4578654", 46 | "r" : "4578654", 47 | "s" : "4578654", 48 | "t" : "4578654" 49 | }, 50 | { 51 | "key" : "3", 52 | "date" : "2016-10-13", 53 | "a" : "4578654", 54 | "b" : "4578654", 55 | "c" : "4578654", 56 | "d" : "4578654", 57 | "e" : "4578654", 58 | "f" : "4578654", 59 | "g" : "4578654", 60 | "h" : "4578654", 61 | "i" : "4578654", 62 | "j" : "4578654", 63 | "k" : "4578654", 64 | "l" : "4578654", 65 | "m" : "4578654", 66 | "n" : "4578654", 67 | "o" : "4578654", 68 | "p" : "4578654", 69 | "q" : "4578654", 70 | "r" : "4578654", 71 | "s" : "4578654", 72 | "t" : "4578654" 73 | }, 74 | { 75 | "key" : "4", 76 | "date" : "2016-10-14", 77 | "a" : "4578654", 78 | "b" : "4578654", 79 | "c" : "4578654", 80 | "d" : "4578654", 81 | "e" : "4578654", 82 | "f" : "4578654", 83 | "g" : "4578654", 84 | "h" : "4578654", 85 | "i" : "4578654", 86 | "j" : "4578654", 87 | "k" : "4578654", 88 | "l" : "4578654", 89 | "m" : "4578654", 90 | "n" : "4578654", 91 | "o" : "4578654", 92 | "p" : "4578654", 93 | "q" : "4578654", 94 | "r" : "4578654", 95 | "s" : "4578654", 96 | "t" : "4578654" 97 | }, 98 | { 99 | "key" : "5", 100 | "date" : "2016-10-15", 101 | "a" : "4578654", 102 | "b" : "4578654", 103 | "c" : "4578654", 104 | "d" : "4578654", 105 | "e" : "4578654", 106 | "f" : "4578654", 107 | "g" : "4578654", 108 | "h" : "4578654", 109 | "i" : "4578654", 110 | "j" : "4578654", 111 | "k" : "4578654", 112 | "l" : "4578654", 113 | "m" : "4578654", 114 | "n" : "4578654", 115 | "o" : "4578654", 116 | "p" : "4578654", 117 | "q" : "4578654", 118 | "r" : "4578654", 119 | "s" : "4578654", 120 | "t" : "4578654" 121 | }, 122 | { 123 | "key" : "6", 124 | "date" : "2016-10-16", 125 | "a" : "4578654", 126 | "b" : "4578654", 127 | "c" : "4578654", 128 | "d" : "4578654", 129 | "e" : "4578654", 130 | "f" : "4578654", 131 | "g" : "4578654", 132 | "h" : "4578654", 133 | "i" : "4578654", 134 | "j" : "4578654", 135 | "k" : "4578654", 136 | "l" : "4578654", 137 | "m" : "4578654", 138 | "n" : "4578654", 139 | "o" : "4578654", 140 | "p" : "4578654", 141 | "q" : "4578654", 142 | "r" : "4578654", 143 | "s" : "4578654", 144 | "t" : "4578654" 145 | }, 146 | { 147 | "key" : "7", 148 | "date" : "2016-10-17", 149 | "a" : "4578654", 150 | "b" : "4578654", 151 | "c" : "4578654", 152 | "d" : "4578654", 153 | "e" : "4578654", 154 | "f" : "4578654", 155 | "g" : "4578654", 156 | "h" : "4578654", 157 | "i" : "4578654", 158 | "j" : "4578654", 159 | "k" : "4578654", 160 | "l" : "4578654", 161 | "m" : "4578654", 162 | "n" : "4578654", 163 | "o" : "4578654", 164 | "p" : "4578654", 165 | "q" : "4578654", 166 | "r" : "4578654", 167 | "s" : "4578654", 168 | "t" : "4578654" 169 | } 170 | ] -------------------------------------------------------------------------------- /components/data/test_data_6.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "key" : "1", 4 | "date" : "2016-10-11", 5 | "a" : "9878788", 6 | "b" : "9878788", 7 | "c" : "9878788", 8 | "d" : "9878788", 9 | "e" : "9878788", 10 | "f" : "9878788", 11 | "g" : "9878788", 12 | "h" : "9878788", 13 | "i" : "9878788", 14 | "j" : "9878788", 15 | "k" : "9878788", 16 | "l" : "9878788", 17 | "m" : "9878788", 18 | "n" : "9878788", 19 | "o" : "9878788", 20 | "p" : "9878788", 21 | "q" : "9878788", 22 | "r" : "9878788", 23 | "s" : "9878788", 24 | "t" : "9878788" 25 | }, 26 | { 27 | "key" : "2", 28 | "date" : "2016-10-12", 29 | "a" : "9878788", 30 | "b" : "9878788", 31 | "c" : "9878788", 32 | "d" : "9878788", 33 | "e" : "9878788", 34 | "f" : "9878788", 35 | "g" : "9878788", 36 | "h" : "9878788", 37 | "i" : "9878788", 38 | "j" : "9878788", 39 | "k" : "9878788", 40 | "l" : "9878788", 41 | "m" : "9878788", 42 | "n" : "9878788", 43 | "o" : "9878788", 44 | "p" : "9878788", 45 | "q" : "9878788", 46 | "r" : "9878788", 47 | "s" : "9878788", 48 | "t" : "9878788" 49 | }, 50 | { 51 | "key" : "3", 52 | "date" : "2016-10-13", 53 | "a" : "9878788", 54 | "b" : "9878788", 55 | "c" : "9878788", 56 | "d" : "9878788", 57 | "e" : "9878788", 58 | "f" : "9878788", 59 | "g" : "9878788", 60 | "h" : "9878788", 61 | "i" : "9878788", 62 | "j" : "9878788", 63 | "k" : "9878788", 64 | "l" : "9878788", 65 | "m" : "9878788", 66 | "n" : "9878788", 67 | "o" : "9878788", 68 | "p" : "9878788", 69 | "q" : "9878788", 70 | "r" : "9878788", 71 | "s" : "9878788", 72 | "t" : "9878788" 73 | }, 74 | { 75 | "key" : "4", 76 | "date" : "2016-10-14", 77 | "a" : "9878788", 78 | "b" : "9878788", 79 | "c" : "9878788", 80 | "d" : "9878788", 81 | "e" : "9878788", 82 | "f" : "9878788", 83 | "g" : "9878788", 84 | "h" : "9878788", 85 | "i" : "9878788", 86 | "j" : "9878788", 87 | "k" : "9878788", 88 | "l" : "9878788", 89 | "m" : "9878788", 90 | "n" : "9878788", 91 | "o" : "9878788", 92 | "p" : "9878788", 93 | "q" : "9878788", 94 | "r" : "9878788", 95 | "s" : "9878788", 96 | "t" : "9878788" 97 | }, 98 | { 99 | "key" : "5", 100 | "date" : "2016-10-15", 101 | "a" : "9878788", 102 | "b" : "9878788", 103 | "c" : "9878788", 104 | "d" : "9878788", 105 | "e" : "9878788", 106 | "f" : "9878788", 107 | "g" : "9878788", 108 | "h" : "9878788", 109 | "i" : "9878788", 110 | "j" : "9878788", 111 | "k" : "9878788", 112 | "l" : "9878788", 113 | "m" : "9878788", 114 | "n" : "9878788", 115 | "o" : "9878788", 116 | "p" : "9878788", 117 | "q" : "9878788", 118 | "r" : "9878788", 119 | "s" : "9878788", 120 | "t" : "9878788" 121 | }, 122 | { 123 | "key" : "6", 124 | "date" : "2016-10-16", 125 | "a" : "9878788", 126 | "b" : "9878788", 127 | "c" : "9878788", 128 | "d" : "9878788", 129 | "e" : "9878788", 130 | "f" : "9878788", 131 | "g" : "9878788", 132 | "h" : "9878788", 133 | "i" : "9878788", 134 | "j" : "9878788", 135 | "k" : "9878788", 136 | "l" : "9878788", 137 | "m" : "9878788", 138 | "n" : "9878788", 139 | "o" : "9878788", 140 | "p" : "9878788", 141 | "q" : "9878788", 142 | "r" : "9878788", 143 | "s" : "9878788", 144 | "t" : "9878788" 145 | }, 146 | { 147 | "key" : "7", 148 | "date" : "2016-10-17", 149 | "a" : "9878788", 150 | "b" : "9878788", 151 | "c" : "9878788", 152 | "d" : "9878788", 153 | "e" : "9878788", 154 | "f" : "9878788", 155 | "g" : "9878788", 156 | "h" : "9878788", 157 | "i" : "9878788", 158 | "j" : "9878788", 159 | "k" : "9878788", 160 | "l" : "9878788", 161 | "m" : "9878788", 162 | "n" : "9878788", 163 | "o" : "9878788", 164 | "p" : "9878788", 165 | "q" : "9878788", 166 | "r" : "9878788", 167 | "s" : "9878788", 168 | "t" : "9878788" 169 | } 170 | ] -------------------------------------------------------------------------------- /components/data/test_data_7.json: -------------------------------------------------------------------------------- 1 | [{"stat_time":"2016\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11","is_na":"1"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"1.11","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"},{"stat_time":"1111\/11\/11","finish_order":"111,111","origin_amount":"11,111,111","chengben":"11,111,111","profile":"1,111,111","profile_rate":"11.11%","add_amount":"111","shudan_amount":"11,111","jifei_chae":"-111,111","jifei_chae_amount":"-111,111","yop_amount":"11,111","amount":"111,111","yunying_profile":"-1,111,111","yunying_profile_rate":"-11.11%","fengkong_amount":"111","rent_amount":"111,111","rent_cost":"111,111","payment":"1,111,111","driver_cost":"1.11","average_order_price":"11.11"}] -------------------------------------------------------------------------------- /components/css/main.scss: -------------------------------------------------------------------------------- 1 | @import 'reset'; 2 | 3 | .ant-menu-item-active, 4 | .ant-menu-submenu-active, 5 | .ant-menu-submenu-title:hover{ 6 | background-color: #46c6bc; 7 | } 8 | .ant-menu{ 9 | background-color: #43bab1; 10 | } 11 | .ant-menu-submenu-title, 12 | .ant-menu-submenu-title span{ 13 | color: #FFF; 14 | } 15 | .ant-menu-sub{ 16 | .ant-menu-submenu-inline{ 17 | .ant-menu-submenu-title{ 18 | color: #666; 19 | span{ 20 | color: #666; 21 | } 22 | } 23 | } 24 | } 25 | .ant-menu-item .anticon, 26 | .ant-menu-submenu-title .anticon{ 27 | color: #FFF; 28 | } 29 | .main{ 30 | width: 100%; 31 | } 32 | .top{ 33 | width: 100%; 34 | height: 45px; 35 | background-color: #FFF; 36 | border-bottom: 1px solid #e9e9e9; 37 | position: fixed; 38 | top: 0; 39 | z-index: 5; 40 | box-shadow: 0 0 12px 0 #e9e9e9; 41 | img{ 42 | width: 75px; 43 | margin-top: 5px; 44 | margin-left: 15px; 45 | } 46 | .tips{ 47 | width: 50%; 48 | height: 20px; 49 | line-height: 20px; 50 | margin-top: 12.5px; 51 | margin-left: 7%; 52 | display: inline-block; 53 | vertical-align: top; 54 | overflow: hidden; 55 | li{ 56 | width: 100%; 57 | height: 100%; 58 | text-overflow: ellipsis; 59 | white-space: nowrap; 60 | text-align: center; 61 | color: #ffa500; 62 | } 63 | } 64 | .top-right{ 65 | float: right; 66 | margin-right: 1%; 67 | line-height: 45px; 68 | > span{ 69 | display: inline-block; 70 | height: 100%; 71 | margin-right: 10px; 72 | margin-left: 10px; 73 | .ant-select{ 74 | vertical-align: top; 75 | margin-top: 8px; 76 | } 77 | &.ant-badge{ 78 | vertical-align: top; 79 | line-height: 45px; 80 | .ant-badge-dot{ 81 | top: 12px; 82 | } 83 | } 84 | &:nth-of-type(n+3){ 85 | cursor: pointer; 86 | } 87 | } 88 | } 89 | } 90 | .left{ 91 | width: 15%; 92 | float: left; 93 | background-color: #43bab1; 94 | margin-bottom: 1000px; 95 | padding-bottom: 1000px; 96 | border-right: 1px solid #e9e9e9; 97 | transition: width .6s; 98 | position: fixed; 99 | top: 45px; 100 | left: 0; 101 | overflow: hidden; 102 | .ant-menu-inline, .ant-menu-vertical{ 103 | border: none; 104 | } 105 | } 106 | .right{ 107 | width: 85%; 108 | float: right; 109 | position: relative; 110 | top: 45px; 111 | transition: width .6s; 112 | // background:url('../../components/images/img_01.png') repeat center center; 113 | .ant-back-top{ 114 | right: 30px; 115 | bottom: 30px; 116 | .ant-back-top-content{ 117 | background-color: rgba(65, 226, 210, .7); 118 | .ant-back-top-icon{ 119 | color: #FFF; 120 | } 121 | } 122 | } 123 | .ant-collapse{ 124 | background-color: #FFF; 125 | border: 0; 126 | } 127 | } 128 | .hide-left-btn{ 129 | width: 5px; 130 | height: 150px; 131 | background-color: #e9e9e9; 132 | position: fixed; 133 | top: 200px; 134 | left: 15%; 135 | transition: left .6s; 136 | cursor: pointer; 137 | &:hover{ 138 | background-color: #43bab1; 139 | } 140 | } 141 | .ul-edit{ 142 | width: 100%; 143 | li{ 144 | width: 100%; 145 | line-height: 30px; 146 | > label{ 147 | width: 15%; 148 | height: 100%; 149 | display: inline-block; 150 | vertical-align: top; 151 | } 152 | .ant-input-wrapper{ 153 | width: 85%; 154 | display: inline-block; 155 | } 156 | &:nth-child(n+2){ 157 | margin-top: 10px; 158 | } 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /components/js/realtime_order_half.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 实时派单半小时模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import moment from 'moment'; 11 | import { Button, Select, DatePicker } from 'antd'; 12 | const Option = Select.Option; 13 | const RangePicker = DatePicker.RangePicker; 14 | import SelectCity from './common/select_city.js'; 15 | import SelectProduct from './common/select_product.js'; 16 | 17 | class RealtimeOrderHalf extends React.Component{ 18 | 19 | constructor(props){ 20 | super(props); 21 | this.state = { 22 | params : { 23 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 24 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 25 | city : this.props.city 26 | }, 27 | chart_option : {}, 28 | index : 0 //默认显示维度为日 29 | } 30 | } 31 | 32 | //选择日期 33 | selectDate(date, dateString){ 34 | console.log(dateString); 35 | if(dateString === ''){ 36 | return; 37 | } 38 | var params = {}; 39 | for(let k in this.state.params){ 40 | params[k] = this.state.params[k]; 41 | } 42 | params.startDate = moment(dateString).subtract(7, 'days').format('YYYY-MM-DD'); 43 | params.endDate = dateString; 44 | this.setState({ 45 | params : params 46 | }) 47 | } 48 | 49 | handleChange(){ 50 | 51 | } 52 | 53 | getChartOption(type){ 54 | 55 | } 56 | 57 | //改变图表显示维度 58 | changeChartType(e){ 59 | var type = parseInt(e.target.getAttribute('data-type')); 60 | if(!type || type - 1 === this.state.index){ 61 | return; 62 | } 63 | e.target.parentNode.childNodes[this.state.index].className = ''; 64 | e.target.className = 'active'; 65 | this.setState({ 66 | index : type - 1 67 | }) 68 | this.getChartOption(type); 69 | } 70 | 71 | componentWillMount(){ 72 | var dateVal = [], 73 | data_1 = []; //访问活跃用户 74 | function getRandomNum(min, max){ 75 | return parseInt(Math.random() * (max - min + 1) + min, 10); 76 | } 77 | //日期和数据（用于测试） 78 | for(let i = 0; i < 14; i++){ 79 | dateVal[i] = '9-' + (i + 1); 80 | data_1[i] = getRandomNum(0, 10000); 81 | } 82 | var chart_option = { 83 | xAxis : { 84 | name : '日期', 85 | data : dateVal 86 | }, 87 | yAxis : { 88 | name : '' 89 | }, 90 | series : [ 91 | { 92 | name : '访问活跃用户', 93 | data : data_1 94 | } 95 | ] 96 | }; 97 | this.setState({ 98 | chart_option : chart_option 99 | }) 100 | } 101 | 102 | componentDidMount(){ 103 | } 104 | 105 | componentWillReceiveProps(newProps){ 106 | if(this.props.city !== newProps.city){ 107 | var params = {}; 108 | for(let k in this.state.params){ 109 | params[k] = this.state.params[k]; 110 | } 111 | params.city = newProps.city; 112 | this.setState({ 113 | params : params 114 | }) 115 | } 116 | } 117 | 118 | render(){ 119 | return ( 120 |
121 |
122 | 派单 > 实时派单半小时 123 |
124 |
125 | 130 | 城市 131 | 132 | 产品 133 | 134 | 135 |
136 |
137 |
138 | 派单成功率 139 | 派单成功数 140 | 派单失败数 141 |
142 | 143 |
144 |
145 | ); 146 | } 147 | 148 | } 149 | 150 | export default RealtimeOrderHalf; -------------------------------------------------------------------------------- /components/js/user_experience.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 用户体验模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import { Icon } from 'antd'; 11 | import '../css/user_experience.scss'; 12 | 13 | class UserExperience extends React.Component{ 14 | 15 | constructor(props){ 16 | super(props); 17 | this.state = { 18 | chart_option_1 : {}, 19 | chart_option_2 : {}, 20 | index : [0, 0] //这里的index[0]=0表示第一个图表的默认维度是0（日） 21 | } 22 | } 23 | 24 | //改变图表显示维度 25 | changeChartType(e){ 26 | var index = parseInt(e.target.parentNode.getAttribute('data-index')), //获取是第几个图表 27 | type = parseInt(e.target.getAttribute('data-type')), //获取是第几个维度 28 | arr = this.state.index.concat(); 29 | if(type === 'undefined' || type === this.state.index[index]){ 30 | return; 31 | } 32 | e.target.parentNode.childNodes[this.state.index[index]].className = ''; 33 | e.target.className = 'active'; 34 | arr[index] = type; 35 | this.setState({ 36 | index : arr 37 | }) 38 | this.getChartOption(type); 39 | } 40 | 41 | getChartOption(type){ 42 | } 43 | 44 | componentWillMount(){ 45 | var dateVal = [], 46 | data_1 = [], //派单成功率 47 | data_2 = []; //派到时间距 48 | function getRandomNum(min, max){ 49 | return parseInt(Math.random() * (max - min + 1) + min, 10); 50 | } 51 | //日期和数据（用于测试） 52 | for(let i = 0; i < 14; i++){ 53 | dateVal[i] = '9-' + (i + 1); 54 | data_1[i] = getRandomNum(0, 10000); 55 | data_2[i] = getRandomNum(0, 10000); 56 | } 57 | var chart_option_1 = { 58 | xAxis : { 59 | name : '日期', 60 | data : dateVal 61 | }, 62 | yAxis : { 63 | name : '' 64 | }, 65 | series : [ 66 | { 67 | name : '派单成功率', 68 | data : data_1 69 | } 70 | ] 71 | }, 72 | chart_option_2 = { 73 | xAxis : { 74 | name : '日期', 75 | data : dateVal 76 | }, 77 | yAxis : { 78 | name : '' 79 | }, 80 | series : [ 81 | { 82 | name : '派到时间距', 83 | data : data_2 84 | } 85 | ] 86 | }; 87 | this.setState({ 88 | chart_option_1 : chart_option_1, 89 | chart_option_2 : chart_option_2 90 | }) 91 | } 92 | 93 | componentDidMount(){ 94 | } 95 | 96 | render(){ 97 | var info = [ 98 | { 99 | title : '派单成功率', 100 | smallTitle : '', 101 | icon : 'smile-o', 102 | nowVal : '97.00%', 103 | targetVal : '100%', 104 | type : ['日', '周', '月'], 105 | echartId : 'chart_1', 106 | echartOption : this.state.chart_option_1 107 | }, 108 | { 109 | title : '派到时间距', 110 | smallTitle : 'ASAP订单', 111 | icon : 'clock-circle-o', 112 | nowVal : '7.66分钟', 113 | targetVal : '5分钟', 114 | type : ['日', '周', '月'], 115 | echartId : 'chart_2', 116 | echartOption : this.state.chart_option_2 117 | } 118 | ], 119 | that = this; 120 | return ( 121 |
122 |
123 | 项目分析 > 用户体验 124 |
125 | { 126 | info.map(function(info, index){ 127 | return ( 128 |
129 |
130 | 131 |

{info.title}{info.smallTitle !== '' ? '（' + info.smallTitle + '）' : ''}

132 |

当前值 : {info.nowVal}

133 |

目标值 : {info.targetVal}

134 |
135 |
136 |
137 | { 138 | info.type.map(function(type, typeIndex){ 139 | return {type} 140 | }) 141 | } 142 |
143 | 144 |
145 |
146 | ) 147 | }) 148 | } 149 |
150 | ); 151 | } 152 | 153 | } 154 | 155 | export default UserExperience; -------------------------------------------------------------------------------- /components/js/error_order.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 失败订单模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, DatePicker } from 'antd'; 12 | const Option = Select.Option; 13 | const RangePicker = DatePicker.RangePicker; 14 | import SelectCity from './common/select_city.js' 15 | 16 | const table_option_1 = { 17 | title : '派单失败报表', 18 | columns : [ 19 | { 20 | title : '订单号', 21 | dataIndex : 'a', 22 | key : 'a' 23 | }, 24 | { 25 | title : '城市', 26 | dataIndex : 'b', 27 | key : 'b' 28 | }, 29 | { 30 | title : '创建时间', 31 | dataIndex : 'c', 32 | key : 'c' 33 | }, 34 | { 35 | title : '来源', 36 | dataIndex : 'd', 37 | key : 'd' 38 | }, 39 | { 40 | title : '订车人', 41 | dataIndex : 'e', 42 | key : 'e' 43 | }, 44 | { 45 | title : '订车人ID', 46 | dataIndex : 'f', 47 | key : 'f' 48 | }, 49 | { 50 | title : '乘车人', 51 | dataIndex : 'g', 52 | key : 'g', 53 | width : 100 54 | }, 55 | { 56 | title : '开始时间', 57 | dataIndex : 'h', 58 | key : 'h', 59 | width : 100 60 | }, 61 | { 62 | title : '产品类型', 63 | dataIndex : 'i', 64 | key : 'i', 65 | width : 100 66 | }, 67 | { 68 | title : '车辆类型', 69 | dataIndex : 'j', 70 | key : 'j', 71 | width : 100 72 | }, 73 | { 74 | title : '是否ASAP', 75 | dataIndex : 'k', 76 | key : 'k', 77 | width : 100 78 | }, 79 | { 80 | title : '取消原因', 81 | dataIndex : 'l', 82 | key : 'l', 83 | width : 100 84 | }, 85 | { 86 | title : '系统派单次数', 87 | dataIndex : 'm', 88 | key : 'm', 89 | width : 100 90 | }, 91 | { 92 | title : '接单司机数', 93 | dataIndex : 'n', 94 | key : 'n', 95 | width : 100 96 | }, 97 | { 98 | title : '上车地点', 99 | dataIndex : 'o', 100 | key : 'o', 101 | width : 100 102 | }, 103 | { 104 | title : '下车地点', 105 | dataIndex : 'p', 106 | key : 'p', 107 | width : 100 108 | } 109 | ], 110 | url : './components/data/test_data_1.json', 111 | source : [] 112 | }; 113 | 114 | class ErrorOrder extends React.Component{ 115 | 116 | constructor(props){ 117 | super(props); 118 | this.state = { 119 | params : { 120 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 121 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 122 | city : this.props.city 123 | }, 124 | chart_option : {} 125 | } 126 | } 127 | 128 | //选择日期 129 | selectDate(dates, dateStrings){ 130 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 131 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 132 | return; 133 | } 134 | var params = {}; 135 | for(let k in this.state.params){ 136 | params[k] = this.state.params[k]; 137 | } 138 | params.startDate = dateStrings[0]; 139 | params.endDate = dateStrings[1]; 140 | this.setState({ 141 | params : params 142 | }) 143 | } 144 | 145 | componentWillMount(){ 146 | } 147 | 148 | componentDidMount(){ 149 | } 150 | 151 | componentWillReceiveProps(newProps){ 152 | if(this.props.city !== newProps.city){ 153 | var params = {}; 154 | for(let k in this.state.params){ 155 | params[k] = this.state.params[k]; 156 | } 157 | params.city = newProps.city; 158 | this.setState({ 159 | params : params 160 | }) 161 | } 162 | } 163 | 164 | render(){ 165 | return ( 166 |
167 |
168 | 派单 > 失败订单 169 |
170 |
171 | 176 | 城市 177 | 178 |
179 | 180 |
181 | ); 182 | } 183 | 184 | } 185 | 186 | export default ErrorOrder; -------------------------------------------------------------------------------- /components/js/driver_order_percent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 司机接单率模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, DatePicker } from 'antd'; 12 | const Option = Select.Option; 13 | const RangePicker = DatePicker.RangePicker; 14 | import SelectCity from './common/select_city.js' 15 | 16 | const table_option_1 = { 17 | title : '司机接单率报表', 18 | columns : [ 19 | { 20 | title : '司机姓名', 21 | dataIndex : 'a', 22 | key : 'a' 23 | }, 24 | { 25 | title : '司机ID', 26 | dataIndex : 'b', 27 | key : 'b' 28 | }, 29 | { 30 | title : '城市', 31 | dataIndex : 'c', 32 | key : 'c' 33 | }, 34 | { 35 | title : '租赁公司', 36 | dataIndex : 'd', 37 | key : 'd' 38 | }, 39 | { 40 | title : '车牌号', 41 | dataIndex : 'e', 42 | key : 'e' 43 | }, 44 | { 45 | title : '车辆级别', 46 | dataIndex : 'f', 47 | key : 'f' 48 | }, 49 | { 50 | title : '车型', 51 | dataIndex : 'g', 52 | key : 'g', 53 | width : 100 54 | }, 55 | { 56 | title : '派单数', 57 | dataIndex : 'h', 58 | key : 'h', 59 | width : 100 60 | }, 61 | { 62 | title : '接单数', 63 | dataIndex : 'i', 64 | key : 'i', 65 | width : 100 66 | }, 67 | { 68 | title : '接单成功数', 69 | dataIndex : 'j', 70 | key : 'j', 71 | width : 100 72 | }, 73 | { 74 | title : '接单率', 75 | dataIndex : 'k', 76 | key : 'k', 77 | width : 100 78 | }, 79 | { 80 | title : '接单成功率', 81 | dataIndex : 'l', 82 | key : 'l', 83 | width : 100 84 | }, 85 | { 86 | title : 'ASAP派单数', 87 | dataIndex : 'm', 88 | key : 'm', 89 | width : 100 90 | }, 91 | { 92 | title : 'ASAP接单数', 93 | dataIndex : 'n', 94 | key : 'n', 95 | width : 100 96 | }, 97 | { 98 | title : 'ASAP接单成功数', 99 | dataIndex : 'o', 100 | key : 'o', 101 | width : 100 102 | }, 103 | { 104 | title : 'ASAP接单率', 105 | dataIndex : 'p', 106 | key : 'p', 107 | width : 100 108 | } 109 | ], 110 | url : './components/data/test_data_1.json', 111 | source : [] 112 | }; 113 | 114 | class DriverOrderPercent extends React.Component{ 115 | 116 | constructor(props){ 117 | super(props); 118 | this.state = { 119 | params : { 120 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 121 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 122 | city : this.props.city 123 | }, 124 | chart_option : {} 125 | } 126 | } 127 | 128 | //选择日期 129 | selectDate(dates, dateStrings){ 130 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 131 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 132 | return; 133 | } 134 | var params = {}; 135 | for(let k in this.state.params){ 136 | params[k] = this.state.params[k]; 137 | } 138 | params.startDate = dateStrings[0]; 139 | params.endDate = dateStrings[1]; 140 | this.setState({ 141 | params : params 142 | }) 143 | } 144 | 145 | componentWillMount(){ 146 | } 147 | 148 | componentDidMount(){ 149 | } 150 | 151 | componentWillReceiveProps(newProps){ 152 | if(this.props.city !== newProps.city){ 153 | var params = {}; 154 | for(let k in this.state.params){ 155 | params[k] = this.state.params[k]; 156 | } 157 | params.city = newProps.city; 158 | this.setState({ 159 | params : params 160 | }) 161 | } 162 | } 163 | 164 | render(){ 165 | return ( 166 |
167 |
168 | 派单 > 司机接单率 169 |
170 |
171 | 176 | 城市 177 | 178 |
179 | 180 |
181 | ); 182 | } 183 | 184 | } 185 | 186 | export default DriverOrderPercent; -------------------------------------------------------------------------------- /components/js/mail_management_task.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 邮件管理系统-任务管理模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Radio, Select, Popconfirm, message, Modal } from 'antd'; 12 | const RadioGroup = Radio.Group; 13 | const Option = Select.Option; 14 | 15 | function confirmDelete(){ 16 | message.success('删除成功'); 17 | } 18 | 19 | class MailManagementTask extends React.Component{ 20 | 21 | constructor(props){ 22 | super(props); 23 | this.state = { 24 | visible : false, 25 | type : 'add', //add or edit 26 | confirmLoading : false, 27 | value : "路径脚本" 28 | } 29 | } 30 | 31 | handleChange(e){ 32 | this.setState({ 33 | value : e.target.value 34 | }) 35 | } 36 | 37 | showModal(type){ 38 | this.setState({ 39 | visible : true, 40 | type : type 41 | }) 42 | } 43 | 44 | handleOk(){ 45 | this.setState({ 46 | confirmLoading : true 47 | }) 48 | setTimeout(() => { 49 | this.setState({ 50 | visible : false, 51 | confirmLoading : false 52 | }) 53 | }, 2000) 54 | } 55 | 56 | handleCancel(){ 57 | this.setState({ 58 | visible : false 59 | }) 60 | } 61 | 62 | componentWillMount(){ 63 | } 64 | 65 | componentDidMount(){ 66 | } 67 | 68 | render(){ 69 | const table_option_1 = { 70 | title : '任务管理', 71 | columns : [ 72 | { 73 | title : '任务ID', 74 | dataIndex : 'a', 75 | key : 'a' 76 | }, 77 | { 78 | title : '标题', 79 | dataIndex : 'b', 80 | key : 'b' 81 | }, 82 | { 83 | title : '执行时间', 84 | dataIndex : 'c', 85 | key : 'c' 86 | }, 87 | { 88 | title : '脚本路径', 89 | dataIndex : 'd', 90 | key : 'd' 91 | }, 92 | { 93 | title : '状态', 94 | dataIndex : 'e', 95 | key : 'e' 96 | }, 97 | { 98 | title : '操作', 99 | key : 'action', 100 | width : 200, 101 | className : 'action-column', 102 | render : () => ( 103 | 104 | 邮箱管理| 105 | 编辑| 106 | 107 | 删除 108 | 109 | 110 | ) 111 | } 112 | ], 113 | url : './components/data/test_data_1.json', 114 | source : [] 115 | }; 116 | return ( 117 |
118 |
119 | 工具 > 邮件管理系统 > 任务管理 120 |
121 |
122 | 123 |
124 | 125 | 131 |
    132 |
  • 133 | 134 | 135 |
    • 136 |
  • 137 | 138 | 139 | 路径脚本 140 | api 141 | 142 |
    • 143 |
  • 144 | 145 | 146 |
    • 147 |
  • 148 | 149 | 150 |
    • 151 |
  • 152 | 153 | 159 |
    • 160 |
  • 161 | 162 | 163 |
    • 164 |
  • 165 | 166 | 167 |
    • 168 |
169 | 170 |
171 | ); 172 | } 173 | 174 | } 175 | 176 | export default MailManagementTask; -------------------------------------------------------------------------------- /components/js/common/echarts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description echarts模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import echarts from 'echarts'; 10 | 11 | const color = ['#ff6355', '#64dcd3', '#f6c54f', '#5fff89', '#9186d5', '#fe59ed', '#3072f8', '#fbeb3c']; 12 | 13 | class Echarts extends React.Component{ 14 | 15 | constructor(props){ 16 | super(props); 17 | } 18 | 19 | componentWillMount(){ 20 | 21 | } 22 | 23 | componentDidMount(){ 24 | var that = this; 25 | setTimeout(function(){ 26 | that.drawCharts(); 27 | }, 600) 28 | } 29 | 30 | drawCharts(){ 31 | var myChart = echarts.init(document.getElementById(this.props.id)), 32 | that = this, 33 | option = { 34 | title : { 35 | text : this.props.option.title || '', 36 | textStyle : { 37 | color : '#666666', 38 | fontSize : '14' 39 | }, 40 | left : '3%' 41 | }, 42 | legend : { 43 | data : (function(){ 44 | var arr = []; 45 | that.props.option.series.map(function(result){ 46 | arr.push(result.name); 47 | }) 48 | return arr; 49 | })(), 50 | textStyle : { 51 | color : '#666666' 52 | }, 53 | right : '3%', 54 | selectedMode : this.props.option.selectedMode || 'single' 55 | }, 56 | tooltip : { 57 | show : true, 58 | trigger : 'axis', 59 | triggerOn : 'mousemove', 60 | lineStyle : { 61 | color : '#666666' 62 | } 63 | }, 64 | grid : { 65 | left : '3%', 66 | right : '3%', 67 | bottom : '14%', 68 | containLabel : true 69 | }, 70 | dataZoom : [ 71 | { 72 | show : true, 73 | type : 'slider', 74 | xAxisIndex : [0], 75 | backgroundColor : '#FFF', 76 | fillerColor : 'rgba(76, 225, 221, .3)', 77 | borderColor : 'rgba(0, 0, 0, 0)', 78 | dataBackground : { 79 | lineStyle : { 80 | color : 'rgba(0, 0, 0, 0)' 81 | }, 82 | areaStyle : { 83 | color : 'rgba(255, 105, 87, .3)' 84 | } 85 | }, 86 | handleIcon : 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', 87 | handleSize : '80%', 88 | handleStyle : { 89 | color : '#64dcd3' 90 | }, 91 | textStyle : { 92 | color : '#666666' 93 | }, 94 | left : '14%', 95 | right : '10%', 96 | bottom : 0 97 | } 98 | ], 99 | xAxis : { 100 | type : 'category', 101 | name : this.props.option.xAxis.name, 102 | nameLocation : 'start', 103 | nameGap : '25', 104 | boundaryGap : false, 105 | data : this.props.option.xAxis.data, 106 | axisLine : { 107 | lineStyle : { 108 | color : '#666666' 109 | } 110 | }, 111 | splitLine : { 112 | show : true, 113 | lineStyle : { 114 | color : '#f7f7f7' 115 | } 116 | } 117 | }, 118 | yAxis : [ 119 | { 120 | type : 'value', 121 | name : this.props.option.yAxis.name || '', 122 | axisLine : { 123 | lineStyle : { 124 | color : '#666666' 125 | } 126 | }, 127 | splitLine : { 128 | show : true, 129 | lineStyle : { 130 | color : '#f7f7f7' 131 | } 132 | } 133 | } 134 | ], 135 | series : (function(){ 136 | var arr = []; 137 | that.props.option.series.map(function(result, index){ 138 | arr.push({ 139 | name : result.name, 140 | type : 'line', 141 | showAllSymbol : true, 142 | smooth : true, 143 | data : result.data, 144 | lineStyle : { 145 | normal : { 146 | color : color[index] 147 | } 148 | }, 149 | itemStyle : { 150 | normal : { 151 | color : color[index], 152 | borderWidth : '1', 153 | borderColor : color[index] 154 | } 155 | } 156 | }) 157 | }) 158 | return arr; 159 | })() 160 | }; 161 | myChart.setOption(option); 162 | } 163 | 164 | render(){ 165 | return ( 166 |
167 | ) 168 | } 169 | 170 | } 171 | 172 | export default Echarts; -------------------------------------------------------------------------------- /components/js/market_promotion.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 市场推广模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '注册来源', 20 | dataIndex : 'date', 21 | key : 'date', 22 | render : text => {text} 23 | }, 24 | { 25 | title : '注册用户数', 26 | dataIndex : 'a', 27 | key : 'a' 28 | }, 29 | { 30 | title : '新用户数', 31 | dataIndex : 'b', 32 | key : 'b' 33 | }, 34 | { 35 | title : '注册当日激活用户数', 36 | dataIndex : 'c', 37 | key : 'c' 38 | } 39 | ], 40 | source : [ 41 | { 42 | key : '1', 43 | name : '注册来源', 44 | url : './components/data/test_data_1.json' 45 | }, 46 | { 47 | key : '2', 48 | name : '注册平台', 49 | url : './components/data/test_data_2.json' 50 | }, 51 | { 52 | key : '3', 53 | name : '激活平台', 54 | url : './components/data/test_data_3.json' 55 | }, 56 | { 57 | key : '4', 58 | name : '注册来源细分', 59 | url : './components/data/test_data_4.json' 60 | } 61 | ] 62 | }; 63 | 64 | class MarketPromotion extends React.Component{ 65 | 66 | constructor(props){ 67 | super(props); 68 | this.state = { 69 | params : { 70 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 71 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 72 | city : this.props.city 73 | }, 74 | chart_option : {} 75 | } 76 | } 77 | 78 | //选择日期 79 | selectDate(dates, dateStrings){ 80 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 81 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 82 | return; 83 | } 84 | var params = {}; 85 | for(let k in this.state.params){ 86 | params[k] = this.state.params[k]; 87 | } 88 | params.startDate = dateStrings[0]; 89 | params.endDate = dateStrings[1]; 90 | this.setState({ 91 | params : params 92 | }) 93 | } 94 | 95 | componentWillMount(){ 96 | var dateVal = [], 97 | data_1 = [], //注册用户数 98 | data_2 = [], //新用户数 99 | data_3 = []; //注册当日激活用户数 100 | function getRandomNum(min, max){ 101 | return parseInt(Math.random() * (max - min + 1) + min, 10); 102 | } 103 | //日期和数据（用于测试） 104 | for(let i = 0; i < 14; i++){ 105 | dateVal[i] = '9-' + (i + 1); 106 | data_1[i] = getRandomNum(0, 10000); 107 | data_2[i] = getRandomNum(0, 10000); 108 | data_3[i] = getRandomNum(0, 10000); 109 | } 110 | var chart_option = { 111 | xAxis : { 112 | name : '日期', 113 | data : dateVal 114 | }, 115 | yAxis : { 116 | name : '' 117 | }, 118 | series : [ 119 | { 120 | name : '注册用户数', 121 | data : data_1 122 | }, 123 | { 124 | name : '新用户数', 125 | data : data_2 126 | }, 127 | { 128 | name : '注册当日激活用户数', 129 | data : data_3 130 | } 131 | ] 132 | }; 133 | this.setState({ 134 | chart_option : chart_option 135 | }) 136 | } 137 | 138 | componentDidMount(){ 139 | } 140 | 141 | componentWillReceiveProps(newProps){ 142 | if(this.props.city !== newProps.city){ 143 | var params = {}; 144 | for(let k in this.state.params){ 145 | params[k] = this.state.params[k]; 146 | } 147 | params.city = newProps.city; 148 | this.setState({ 149 | params : params 150 | }) 151 | } 152 | } 153 | 154 | render(){ 155 | return ( 156 |
157 |
158 | 用户 > 市场推广 159 |
160 |
161 |
162 | 167 |
168 |
169 |
170 | 171 |
172 | 173 |
174 | ); 175 | } 176 | 177 | } 178 | 179 | export default MarketPromotion; -------------------------------------------------------------------------------- /components/js/ctrip_airport.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 携程接送机模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { Input, Button, Select, DatePicker, Radio, Checkbox, Collapse } from 'antd'; 13 | const Option = Select.Option; 14 | const RangePicker = DatePicker.RangePicker; 15 | const RadioButton = Radio.Button; 16 | const RadioGroup = Radio.Group; 17 | const CheckboxGroup = Checkbox.Group; 18 | const Panel = Collapse.Panel; 19 | import SelectCity from './common/select_city.js'; 20 | import SelectCar from './common/select_car.js'; 21 | 22 | const checkbox_2 = [ 23 | { 24 | label : '易到用车', 25 | value : '1' 26 | }, 27 | { 28 | label : '滴滴', 29 | value : '2' 30 | }, 31 | { 32 | label : 'Uber', 33 | value : '3' 34 | }, 35 | { 36 | label : '神州专车', 37 | value : '4' 38 | } 39 | ]; 40 | 41 | const table_option_1 = { 42 | title : '', 43 | columns : [ 44 | { 45 | title : '日期', 46 | dataIndex : 'date', 47 | key : 'date' 48 | }, 49 | { 50 | title : '对象', 51 | dataIndex : 'a', 52 | key : 'a' 53 | }, 54 | { 55 | title : '排名', 56 | dataIndex : 'b', 57 | key : 'b' 58 | }, 59 | { 60 | title : '价格', 61 | dataIndex : 'c', 62 | key : 'c' 63 | }, 64 | { 65 | title : '派单成功率', 66 | dataIndex : 'd', 67 | key : 'd' 68 | }, 69 | { 70 | title : '机场', 71 | dataIndex : 'e', 72 | key : 'e' 73 | }, 74 | { 75 | title : '地点', 76 | dataIndex : 'f', 77 | key : 'f' 78 | } 79 | ], 80 | url : './components/data/test_data_1.json', 81 | source : [] 82 | }; 83 | 84 | class CtripAirport extends React.Component{ 85 | 86 | constructor(props){ 87 | super(props); 88 | this.state = { 89 | params : { 90 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 91 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 92 | city : this.props.city 93 | }, 94 | chart_option : {} 95 | } 96 | } 97 | 98 | //选择日期 99 | selectDate(dates, dateStrings){ 100 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 101 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 102 | return; 103 | } 104 | var params = {}; 105 | for(let k in this.state.params){ 106 | params[k] = this.state.params[k]; 107 | } 108 | params.startDate = dateStrings[0]; 109 | params.endDate = dateStrings[1]; 110 | this.setState({ 111 | params : params 112 | }) 113 | } 114 | 115 | componentWillMount(){ 116 | } 117 | 118 | componentDidMount(){ 119 | } 120 | 121 | componentWillReceiveProps(newProps){ 122 | if(this.props.city !== newProps.city){ 123 | var params = {}; 124 | for(let k in this.state.params){ 125 | params[k] = this.state.params[k]; 126 | } 127 | params.city = newProps.city; 128 | this.setState({ 129 | params : params 130 | }) 131 | } 132 | } 133 | 134 | render(){ 135 | return ( 136 |
137 |
138 | 竞品 > 携程接送机 139 |
140 |
141 | 146 | 城市 147 | 148 |
149 |
150 | 151 | 152 |
    153 |
  • 154 | 产品 155 | 156 | 接机 157 | 送机 158 | 159 | 车辆级别 160 | 161 | 预约用车时间 162 | 163 | 今日 164 | 昨日 165 | 166 |
    • 167 |
168 | 169 | 170 | 171 |
172 | 173 |
174 | ); 175 | } 176 | 177 | } 178 | 179 | export default CtripAirport; -------------------------------------------------------------------------------- /components/js/car_analysis.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 车源分析模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '城市', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '注册司机数', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '激活司机数', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '在线司机数', 35 | dataIndex : 'd', 36 | key : 'd' 37 | }, 38 | { 39 | title : '接单司机数', 40 | dataIndex : 'e', 41 | key : 'e' 42 | }, 43 | { 44 | title : '活跃司机数', 45 | dataIndex : 'f', 46 | key : 'f' 47 | }, 48 | { 49 | title : '接单率', 50 | dataIndex : 'g', 51 | key : 'g' 52 | }, 53 | { 54 | title : '活跃率', 55 | dataIndex : 'h', 56 | key : 'h' 57 | } 58 | ], 59 | url : './components/data/test_data_1.json', 60 | source : [] 61 | }; 62 | 63 | class CarAnalysis extends React.Component{ 64 | 65 | constructor(props){ 66 | super(props); 67 | this.state = { 68 | params : { 69 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 70 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 71 | city : this.props.city 72 | }, 73 | chart_option : {} 74 | } 75 | } 76 | 77 | //选择日期 78 | selectDate(dates, dateStrings){ 79 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 80 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 81 | return; 82 | } 83 | var params = {}; 84 | for(let k in this.state.params){ 85 | params[k] = this.state.params[k]; 86 | } 87 | params.startDate = dateStrings[0]; 88 | params.endDate = dateStrings[1]; 89 | this.setState({ 90 | params : params 91 | }) 92 | } 93 | 94 | componentWillMount(){ 95 | var that = this; 96 | //fetch发送GET请求 97 | fetch('./components/data/test_data_8.json').then(function(res){ 98 | if(res.ok){ 99 | res.json().then(function(data){ 100 | var xData = [], 101 | yData = []; 102 | for(let i = 0, len = data.length; i < len; i++){ 103 | xData.push(data[i].date); 104 | yData.push(data[i].value); 105 | } 106 | var chart_option = { 107 | xAxis : { 108 | name : '日期', 109 | data : xData 110 | }, 111 | yAxis : { 112 | name : '' 113 | }, 114 | series : [ 115 | { 116 | name : '注册司机数', 117 | data : yData 118 | }, 119 | { 120 | name : '加盟司机数', 121 | data : yData 122 | }, 123 | { 124 | name : '激活司机数', 125 | data : yData 126 | }, 127 | { 128 | name : '派单司机数', 129 | data : yData 130 | }, 131 | { 132 | name : '接单司机数', 133 | data : yData 134 | }, 135 | { 136 | name : '活跃司机数', 137 | data : yData 138 | } 139 | ] 140 | }; 141 | that.setState({ 142 | chart_option : chart_option 143 | }) 144 | }) 145 | }else if(res.status === 401){ 146 | console.log('请求失败'); 147 | } 148 | }, function(e){ 149 | console.log('请求失败'); 150 | }) 151 | } 152 | 153 | componentDidMount(){ 154 | } 155 | 156 | componentWillReceiveProps(newProps){ 157 | if(this.props.city !== newProps.city){ 158 | var params = {}; 159 | for(let k in this.state.params){ 160 | params[k] = this.state.params[k]; 161 | } 162 | params.city = newProps.city; 163 | this.setState({ 164 | params : params 165 | }) 166 | } 167 | } 168 | 169 | render(){ 170 | return ( 171 |
172 |
173 | 车源 > 车源分析 174 |
175 |
176 | 181 |
182 |
183 | 184 |
185 | 186 |
187 | ); 188 | } 189 | 190 | } 191 | 192 | export default CarAnalysis; -------------------------------------------------------------------------------- /components/js/car_market_extension.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 车源市场推广模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '城市', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '注册司机数', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '激活司机数', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '在线司机数', 35 | dataIndex : 'd', 36 | key : 'd' 37 | }, 38 | { 39 | title : '接单司机数', 40 | dataIndex : 'e', 41 | key : 'e' 42 | }, 43 | { 44 | title : '活跃司机数', 45 | dataIndex : 'f', 46 | key : 'f' 47 | }, 48 | { 49 | title : '接单率', 50 | dataIndex : 'g', 51 | key : 'g' 52 | }, 53 | { 54 | title : '活跃率', 55 | dataIndex : 'h', 56 | key : 'h' 57 | } 58 | ], 59 | url : './components/data/test_data_1.json', 60 | source : [] 61 | }; 62 | 63 | class CarMarketExtension extends React.Component{ 64 | 65 | constructor(props){ 66 | super(props); 67 | this.state = { 68 | params : { 69 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 70 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 71 | city : this.props.city 72 | }, 73 | chart_option : {} 74 | } 75 | } 76 | 77 | //选择日期 78 | selectDate(dates, dateStrings){ 79 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 80 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 81 | return; 82 | } 83 | var params = {}; 84 | for(let k in this.state.params){ 85 | params[k] = this.state.params[k]; 86 | } 87 | params.startDate = dateStrings[0]; 88 | params.endDate = dateStrings[1]; 89 | this.setState({ 90 | params : params 91 | }) 92 | } 93 | 94 | componentWillMount(){ 95 | var that = this; 96 | //fetch发送GET请求 97 | fetch('./components/data/test_data_8.json').then(function(res){ 98 | if(res.ok){ 99 | res.json().then(function(data){ 100 | var xData = [], 101 | yData = []; 102 | for(let i = 0, len = data.length; i < len; i++){ 103 | xData.push(data[i].date); 104 | yData.push(data[i].value); 105 | } 106 | var chart_option = { 107 | xAxis : { 108 | name : '日期', 109 | data : xData 110 | }, 111 | yAxis : { 112 | name : '' 113 | }, 114 | series : [ 115 | { 116 | name : '注册司机数', 117 | data : yData 118 | }, 119 | { 120 | name : '加盟司机数', 121 | data : yData 122 | }, 123 | { 124 | name : '激活司机数', 125 | data : yData 126 | }, 127 | { 128 | name : '派单司机数', 129 | data : yData 130 | }, 131 | { 132 | name : '接单司机数', 133 | data : yData 134 | }, 135 | { 136 | name : '活跃司机数', 137 | data : yData 138 | } 139 | ] 140 | }; 141 | that.setState({ 142 | chart_option : chart_option 143 | }) 144 | }) 145 | }else if(res.status === 401){ 146 | console.log('请求失败'); 147 | } 148 | }, function(e){ 149 | console.log('请求失败'); 150 | }) 151 | } 152 | 153 | componentDidMount(){ 154 | } 155 | 156 | componentWillReceiveProps(newProps){ 157 | if(this.props.city !== newProps.city){ 158 | var params = {}; 159 | for(let k in this.state.params){ 160 | params[k] = this.state.params[k]; 161 | } 162 | params.city = newProps.city; 163 | this.setState({ 164 | params : params 165 | }) 166 | } 167 | } 168 | 169 | render(){ 170 | return ( 171 |
172 |
173 | 车源 > 车源市场推广 174 |
175 |
176 | 181 |
182 |
183 | 184 |
185 | 186 |
187 | ); 188 | } 189 | 190 | } 191 | 192 | export default CarMarketExtension; -------------------------------------------------------------------------------- /components/js/warn_index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 预警管理系统-预警指标 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Radio, Select, Popconfirm, message, Modal } from 'antd'; 12 | const RadioGroup = Radio.Group; 13 | const Option = Select.Option; 14 | 15 | function confirmDelete(){ 16 | message.success('删除成功'); 17 | } 18 | 19 | class WarnIndex extends React.Component{ 20 | 21 | constructor(props){ 22 | super(props); 23 | this.state = { 24 | visible : false, 25 | type : 'add', //add or edit 26 | confirmLoading : false, 27 | value : "百分比" 28 | } 29 | } 30 | 31 | handleChange(e){ 32 | this.setState({ 33 | value : e.target.value 34 | }) 35 | } 36 | 37 | showModal(type){ 38 | this.setState({ 39 | visible : true, 40 | type : type 41 | }) 42 | } 43 | 44 | handleOk(){ 45 | this.setState({ 46 | confirmLoading : true 47 | }) 48 | setTimeout(() => { 49 | this.setState({ 50 | visible : false, 51 | confirmLoading : false 52 | }) 53 | }, 2000) 54 | } 55 | 56 | handleCancel(){ 57 | this.setState({ 58 | visible : false 59 | }) 60 | } 61 | 62 | componentWillMount(){ 63 | } 64 | 65 | componentDidMount(){ 66 | } 67 | 68 | render(){ 69 | const table_option_1 = { 70 | title : '预警指标', 71 | columns : [ 72 | { 73 | title : 'ID', 74 | dataIndex : 'a', 75 | key : 'a' 76 | }, 77 | { 78 | title : '模块名称', 79 | dataIndex : 'b', 80 | key : 'b' 81 | }, 82 | { 83 | title : '指标参数', 84 | dataIndex : 'c', 85 | key : 'c' 86 | }, 87 | { 88 | title : '指标名称', 89 | dataIndex : 'd', 90 | key : 'd' 91 | }, 92 | { 93 | title : '阀值', 94 | dataIndex : 'e', 95 | key : 'e' 96 | }, 97 | { 98 | title : '城市', 99 | dataIndex : 'f', 100 | key : 'f' 101 | }, 102 | { 103 | title : '状态', 104 | dataIndex : 'g', 105 | key : 'g' 106 | }, 107 | { 108 | title : '操作', 109 | key : 'action', 110 | width : 100, 111 | className : 'action-column', 112 | render : () => ( 113 | 114 | 编辑| 115 | 116 | 删除 117 | 118 | 119 | ) 120 | } 121 | ], 122 | url : './components/data/test_data_1.json', 123 | source : [] 124 | }; 125 | 126 | return ( 127 |
128 |
129 | 工具 > 预警管理系统 > 预警指标 130 |
131 |
132 | 预警模块 133 | 140 | 指标名称 141 | 142 | 143 | 144 |
145 | 146 | 152 |
    153 |
  • 154 | 155 | 161 |
    • 162 |
  • 163 | 164 | 165 |
    • 166 |
  • 167 | 168 | 169 |
    • 170 |
  • 171 | 172 | 173 | 百分比 174 | 数值 175 | 176 |
    • 177 |
  • 178 | 179 | 180 |
    • 181 |
182 | 183 |
184 | ); 185 | } 186 | 187 | } 188 | 189 | export default WarnIndex; -------------------------------------------------------------------------------- /components/js/area_income.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 地域收入模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '城市', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '订单数', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '订单金额', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '单均金额', 35 | dataIndex : 'd', 36 | key : 'd' 37 | }, 38 | { 39 | title : '优惠金额', 40 | dataIndex : 'e', 41 | key : 'e' 42 | }, 43 | { 44 | title : '单均优惠', 45 | dataIndex : 'f', 46 | key : 'f' 47 | }, 48 | { 49 | title : '单均充返优惠', 50 | dataIndex : 'g', 51 | key : 'g' 52 | }, 53 | { 54 | title : '补贴金额', 55 | dataIndex : 'h', 56 | key : 'h' 57 | }, 58 | { 59 | title : '单均补贴', 60 | dataIndex : 'i', 61 | key : 'i' 62 | }, 63 | { 64 | title : '单均加价', 65 | dataIndex : 'j', 66 | key : 'j' 67 | }, 68 | { 69 | title : '运营利润', 70 | dataIndex : 'k', 71 | key : 'k' 72 | }, 73 | { 74 | title : '运营利润率', 75 | dataIndex : 'l', 76 | key : 'l' 77 | } 78 | ], 79 | url : './components/data/test_data_1.json', 80 | source : [] 81 | }; 82 | 83 | class AreaIncome extends React.Component{ 84 | 85 | constructor(props){ 86 | super(props); 87 | this.state = { 88 | params : { 89 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 90 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 91 | city : this.props.city 92 | }, 93 | chart_option : {} 94 | } 95 | } 96 | 97 | //选择日期 98 | selectDate(dates, dateStrings){ 99 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 100 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 101 | return; 102 | } 103 | var params = {}; 104 | for(let k in this.state.params){ 105 | params[k] = this.state.params[k]; 106 | } 107 | params.startDate = dateStrings[0]; 108 | params.endDate = dateStrings[1]; 109 | this.setState({ 110 | params : params 111 | }) 112 | } 113 | 114 | componentWillMount(){ 115 | var that = this; 116 | //fetch发送GET请求 117 | fetch('./components/data/test_data_8.json').then(function(res){ 118 | if(res.ok){ 119 | res.json().then(function(data){ 120 | var xData = [], 121 | yData = []; 122 | for(let i = 0, len = data.length; i < len; i++){ 123 | xData.push(data[i].date); 124 | yData.push(data[i].value); 125 | } 126 | var chart_option = { 127 | xAxis : { 128 | name : '日期', 129 | data : xData 130 | }, 131 | yAxis : { 132 | name : '' 133 | }, 134 | series : [ 135 | { 136 | name : '订单数', 137 | data : yData 138 | }, 139 | { 140 | name : '订单金额', 141 | data : yData 142 | }, 143 | { 144 | name : '优惠金额', 145 | data : yData 146 | }, 147 | { 148 | name : '补贴金额', 149 | data : yData 150 | }, 151 | { 152 | name : '运营利润', 153 | data : yData 154 | } 155 | ] 156 | }; 157 | that.setState({ 158 | chart_option : chart_option 159 | }) 160 | }) 161 | }else if(res.status === 401){ 162 | console.log('请求失败'); 163 | } 164 | }, function(e){ 165 | console.log('请求失败'); 166 | }) 167 | } 168 | 169 | componentDidMount(){ 170 | } 171 | 172 | componentWillReceiveProps(newProps){ 173 | if(this.props.city !== newProps.city){ 174 | var params = {}; 175 | for(let k in this.state.params){ 176 | params[k] = this.state.params[k]; 177 | } 178 | params.city = newProps.city; 179 | this.setState({ 180 | params : params 181 | }) 182 | } 183 | } 184 | 185 | render(){ 186 | return ( 187 |
188 |
189 | 订单 > 地域收入 190 |
191 |
192 | 197 |
198 |
199 | 200 |
201 | 202 |
203 | ); 204 | } 205 | 206 | } 207 | 208 | export default AreaIncome; -------------------------------------------------------------------------------- /components/js/order_source.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 订单来源模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '结算账户类型', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '订单数', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '订单金额', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '单均金额', 35 | dataIndex : 'd', 36 | key : 'd' 37 | }, 38 | { 39 | title : '优惠金额', 40 | dataIndex : 'e', 41 | key : 'e' 42 | }, 43 | { 44 | title : '单均优惠', 45 | dataIndex : 'f', 46 | key : 'f' 47 | }, 48 | { 49 | title : '单均充返优惠', 50 | dataIndex : 'g', 51 | key : 'g' 52 | }, 53 | { 54 | title : '补贴金额', 55 | dataIndex : 'h', 56 | key : 'h' 57 | }, 58 | { 59 | title : '单均补贴', 60 | dataIndex : 'i', 61 | key : 'i' 62 | }, 63 | { 64 | title : '单均加价', 65 | dataIndex : 'j', 66 | key : 'j' 67 | }, 68 | { 69 | title : '运营利润', 70 | dataIndex : 'k', 71 | key : 'k' 72 | }, 73 | { 74 | title : '运营利润率', 75 | dataIndex : 'l', 76 | key : 'l' 77 | } 78 | ], 79 | url : './components/data/test_data_1.json', 80 | source : [] 81 | }; 82 | 83 | class OrderSource extends React.Component{ 84 | 85 | constructor(props){ 86 | super(props); 87 | this.state = { 88 | params : { 89 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 90 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 91 | city : this.props.city 92 | }, 93 | chart_option : {} 94 | } 95 | } 96 | 97 | //选择日期 98 | selectDate(dates, dateStrings){ 99 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 100 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 101 | return; 102 | } 103 | var params = {}; 104 | for(let k in this.state.params){ 105 | params[k] = this.state.params[k]; 106 | } 107 | params.startDate = dateStrings[0]; 108 | params.endDate = dateStrings[1]; 109 | this.setState({ 110 | params : params 111 | }) 112 | } 113 | 114 | componentWillMount(){ 115 | var that = this; 116 | //fetch发送GET请求 117 | fetch('./components/data/test_data_8.json').then(function(res){ 118 | if(res.ok){ 119 | res.json().then(function(data){ 120 | var xData = [], 121 | yData = []; 122 | for(let i = 0, len = data.length; i < len; i++){ 123 | xData.push(data[i].date); 124 | yData.push(data[i].value); 125 | } 126 | var chart_option = { 127 | xAxis : { 128 | name : '日期', 129 | data : xData 130 | }, 131 | yAxis : { 132 | name : '' 133 | }, 134 | series : [ 135 | { 136 | name : '订单数', 137 | data : yData 138 | }, 139 | { 140 | name : '订单金额', 141 | data : yData 142 | }, 143 | { 144 | name : '优惠金额', 145 | data : yData 146 | }, 147 | { 148 | name : '补贴金额', 149 | data : yData 150 | }, 151 | { 152 | name : '运营利润', 153 | data : yData 154 | } 155 | ] 156 | }; 157 | that.setState({ 158 | chart_option : chart_option 159 | }) 160 | }) 161 | }else if(res.status === 401){ 162 | console.log('请求失败'); 163 | } 164 | }, function(e){ 165 | console.log('请求失败'); 166 | }) 167 | } 168 | 169 | componentDidMount(){ 170 | } 171 | 172 | componentWillReceiveProps(newProps){ 173 | if(this.props.city !== newProps.city){ 174 | var params = {}; 175 | for(let k in this.state.params){ 176 | params[k] = this.state.params[k]; 177 | } 178 | params.city = newProps.city; 179 | this.setState({ 180 | params : params 181 | }) 182 | } 183 | } 184 | 185 | render(){ 186 | return ( 187 |
188 |
189 | 订单 > 订单来源 190 |
191 |
192 | 197 |
198 |
199 | 200 |
201 | 202 |
203 | ); 204 | } 205 | 206 | } 207 | 208 | export default OrderSource; -------------------------------------------------------------------------------- /components/js/product_income.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 产品收入模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '产品类型', 20 | dataIndex : 'a', 21 | key : 'a' 22 | }, 23 | { 24 | title : '订单数', 25 | dataIndex : 'b', 26 | key : 'b' 27 | }, 28 | { 29 | title : '订单金额', 30 | dataIndex : 'c', 31 | key : 'c' 32 | }, 33 | { 34 | title : '单均金额', 35 | dataIndex : 'd', 36 | key : 'd' 37 | }, 38 | { 39 | title : '优惠金额', 40 | dataIndex : 'e', 41 | key : 'e' 42 | }, 43 | { 44 | title : '单均优惠', 45 | dataIndex : 'f', 46 | key : 'f' 47 | }, 48 | { 49 | title : '单均充返优惠', 50 | dataIndex : 'g', 51 | key : 'g' 52 | }, 53 | { 54 | title : '补贴金额', 55 | dataIndex : 'h', 56 | key : 'h' 57 | }, 58 | { 59 | title : '单均补贴', 60 | dataIndex : 'i', 61 | key : 'i' 62 | }, 63 | { 64 | title : '单均加价', 65 | dataIndex : 'j', 66 | key : 'j' 67 | }, 68 | { 69 | title : '运营利润', 70 | dataIndex : 'k', 71 | key : 'k' 72 | }, 73 | { 74 | title : '运营利润率', 75 | dataIndex : 'l', 76 | key : 'l' 77 | } 78 | ], 79 | url : './components/data/test_data_1.json', 80 | source : [] 81 | }; 82 | 83 | class ProductIncome extends React.Component{ 84 | 85 | constructor(props){ 86 | super(props); 87 | this.state = { 88 | params : { 89 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 90 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 91 | city : this.props.city 92 | }, 93 | chart_option : {} 94 | } 95 | } 96 | 97 | //选择日期 98 | selectDate(dates, dateStrings){ 99 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 100 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 101 | return; 102 | } 103 | var params = {}; 104 | for(let k in this.state.params){ 105 | params[k] = this.state.params[k]; 106 | } 107 | params.startDate = dateStrings[0]; 108 | params.endDate = dateStrings[1]; 109 | this.setState({ 110 | params : params 111 | }) 112 | } 113 | 114 | componentWillMount(){ 115 | var that = this; 116 | //fetch发送GET请求 117 | fetch('./components/data/test_data_8.json').then(function(res){ 118 | if(res.ok){ 119 | res.json().then(function(data){ 120 | var xData = [], 121 | yData = []; 122 | for(let i = 0, len = data.length; i < len; i++){ 123 | xData.push(data[i].date); 124 | yData.push(data[i].value); 125 | } 126 | var chart_option = { 127 | xAxis : { 128 | name : '日期', 129 | data : xData 130 | }, 131 | yAxis : { 132 | name : '' 133 | }, 134 | series : [ 135 | { 136 | name : '订单数', 137 | data : yData 138 | }, 139 | { 140 | name : '订单金额', 141 | data : yData 142 | }, 143 | { 144 | name : '优惠金额', 145 | data : yData 146 | }, 147 | { 148 | name : '补贴金额', 149 | data : yData 150 | }, 151 | { 152 | name : '运营利润', 153 | data : yData 154 | } 155 | ] 156 | }; 157 | that.setState({ 158 | chart_option : chart_option 159 | }) 160 | }) 161 | }else if(res.status === 401){ 162 | console.log('请求失败'); 163 | } 164 | }, function(e){ 165 | console.log('请求失败'); 166 | }) 167 | } 168 | 169 | componentDidMount(){ 170 | } 171 | 172 | componentWillReceiveProps(newProps){ 173 | if(this.props.city !== newProps.city){ 174 | var params = {}; 175 | for(let k in this.state.params){ 176 | params[k] = this.state.params[k]; 177 | } 178 | params.city = newProps.city; 179 | this.setState({ 180 | params : params 181 | }) 182 | } 183 | } 184 | 185 | render(){ 186 | return ( 187 |
188 |
189 | 订单 > 产品收入 190 |
191 |
192 | 197 |
198 |
199 | 200 |
201 | 202 |
203 | ); 204 | } 205 | 206 | } 207 | 208 | export default ProductIncome; -------------------------------------------------------------------------------- /components/js/competitor_price.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 竞品价格模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { Input, Button, Select, DatePicker, Radio, Checkbox, Collapse } from 'antd'; 13 | const Option = Select.Option; 14 | const RangePicker = DatePicker.RangePicker; 15 | const RadioButton = Radio.Button; 16 | const RadioGroup = Radio.Group; 17 | const CheckboxGroup = Checkbox.Group; 18 | const Panel = Collapse.Panel; 19 | import SelectCity from './common/select_city.js'; 20 | import SelectCar from './common/select_car.js'; 21 | 22 | const checkbox_2 = [ 23 | { 24 | label : '易到用车', 25 | value : '1' 26 | }, 27 | { 28 | label : '滴滴', 29 | value : '2' 30 | }, 31 | { 32 | label : 'Uber', 33 | value : '3' 34 | }, 35 | { 36 | label : '神州专车', 37 | value : '4' 38 | } 39 | ]; 40 | 41 | const table_option_1 = { 42 | title : '', 43 | columns : [ 44 | { 45 | title : '日期', 46 | dataIndex : 'date', 47 | key : 'date' 48 | }, 49 | { 50 | title : '对象', 51 | dataIndex : 'a', 52 | key : 'a' 53 | }, 54 | { 55 | title : '起步/套餐价', 56 | dataIndex : 'b', 57 | key : 'b' 58 | }, 59 | { 60 | title : '时长费', 61 | dataIndex : 'c', 62 | key : 'c' 63 | }, 64 | { 65 | title : '里程费', 66 | dataIndex : 'd', 67 | key : 'd' 68 | }, 69 | { 70 | title : '最低消费', 71 | dataIndex : 'e', 72 | key : 'e' 73 | }, 74 | { 75 | title : '长途节点', 76 | dataIndex : 'f', 77 | key : 'f' 78 | }, 79 | { 80 | title : '长途费用', 81 | dataIndex : 'g', 82 | key : 'g' 83 | }, 84 | { 85 | title : '包含时长', 86 | dataIndex : 'h', 87 | key : 'h' 88 | }, 89 | { 90 | title : '包含里程', 91 | dataIndex : 'i', 92 | key : 'i' 93 | } 94 | ], 95 | url : './components/data/test_data_1.json', 96 | source : [] 97 | }; 98 | 99 | class CompetitorPrice extends React.Component{ 100 | 101 | constructor(props){ 102 | super(props); 103 | this.state = { 104 | params : { 105 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 106 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 107 | city : this.props.city 108 | }, 109 | chart_option : {} 110 | } 111 | } 112 | 113 | //选择日期 114 | selectDate(dates, dateStrings){ 115 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 116 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 117 | return; 118 | } 119 | var params = {}; 120 | for(let k in this.state.params){ 121 | params[k] = this.state.params[k]; 122 | } 123 | params.startDate = dateStrings[0]; 124 | params.endDate = dateStrings[1]; 125 | this.setState({ 126 | params : params 127 | }) 128 | } 129 | 130 | componentWillMount(){ 131 | } 132 | 133 | componentDidMount(){ 134 | } 135 | 136 | componentWillReceiveProps(newProps){ 137 | if(this.props.city !== newProps.city){ 138 | var params = {}; 139 | for(let k in this.state.params){ 140 | params[k] = this.state.params[k]; 141 | } 142 | params.city = newProps.city; 143 | this.setState({ 144 | params : params 145 | }) 146 | } 147 | } 148 | 149 | render(){ 150 | return ( 151 |
152 |
153 | 竞品 > 竞品价格 154 |
155 |
156 | 161 | 城市 162 | 163 |
164 |
165 | 166 | 167 |
    168 |
  • 169 | 竞品对象 170 | 171 |
    • 172 |
  • 173 | 车辆级别 174 | 175 | 筛选 176 | 177 | 全部 178 | 价格有变更 179 | 价格未变更 180 | 181 |
    • 182 |
  • 183 | 提示 184 |

    滴滴调价城市-南宁

    185 |
    • 186 |
187 | 188 | 189 | 190 |
191 | 192 |
193 | ); 194 | } 195 | 196 | } 197 | 198 | export default CompetitorPrice; -------------------------------------------------------------------------------- /components/js/consumer_active_user.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 消费活跃用户模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { DatePicker } from 'antd'; 13 | const RangePicker = DatePicker.RangePicker; 14 | 15 | const table_option_1 = { 16 | title : '', 17 | columns : [ 18 | { 19 | title : '注册来源', 20 | dataIndex : 'date', 21 | key : 'date' 22 | }, 23 | { 24 | title : '新用户数', 25 | dataIndex : 'a', 26 | key : 'a' 27 | }, 28 | { 29 | title : '活跃用户数', 30 | dataIndex : 'b', 31 | key : 'b' 32 | }, 33 | { 34 | title : '新用户人均订单', 35 | dataIndex : 'c', 36 | key : 'c' 37 | }, 38 | { 39 | title : '新用户单均金额', 40 | dataIndex : 'd', 41 | key : 'd' 42 | }, 43 | { 44 | title : '新用户单均优惠', 45 | dataIndex : 'e', 46 | key : 'e' 47 | }, 48 | { 49 | title : '人均订单数', 50 | dataIndex : 'f', 51 | key : 'f' 52 | }, 53 | { 54 | title : '单均金额', 55 | dataIndex : 'g', 56 | key : 'g' 57 | }, 58 | { 59 | title : '单均优惠', 60 | dataIndex : 'h', 61 | key : 'h' 62 | } 63 | ], 64 | url : './components/data/test_data_1.json', 65 | source : [] 66 | }; 67 | 68 | class ConsumerActiveUser extends React.Component{ 69 | 70 | constructor(props){ 71 | super(props); 72 | this.state = { 73 | params : { 74 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 75 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 76 | city : this.props.city 77 | }, 78 | chart_option : {} 79 | } 80 | } 81 | 82 | //选择日期 83 | selectDate(dates, dateStrings){ 84 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 85 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 86 | return; 87 | } 88 | var params = {}; 89 | for(let k in this.state.params){ 90 | params[k] = this.state.params[k]; 91 | } 92 | params.startDate = dateStrings[0]; 93 | params.endDate = dateStrings[1]; 94 | this.setState({ 95 | params : params 96 | }) 97 | } 98 | 99 | componentWillMount(){ 100 | var dateVal = [], 101 | data_1 = [], //新用户 102 | data_2 = [], //活跃用户 103 | data_3 = [], //新用户人均订单 104 | data_4 = [], //新用户单均金额 105 | data_5 = [], //新用户单均优惠 106 | data_6 = [], //人均订单 107 | data_7 = [], //单均金额 108 | data_8 = []; //单均优惠 109 | function getRandomNum(min, max){ 110 | return parseInt(Math.random() * (max - min + 1) + min, 10); 111 | } 112 | //日期和数据（用于测试） 113 | for(let i = 0; i < 14; i++){ 114 | dateVal[i] = '9-' + (i + 1); 115 | data_1[i] = getRandomNum(0, 10000); 116 | data_2[i] = getRandomNum(0, 10000); 117 | data_3[i] = getRandomNum(0, 10000); 118 | data_4[i] = getRandomNum(0, 10000); 119 | data_5[i] = getRandomNum(0, 10000); 120 | data_6[i] = getRandomNum(0, 10000); 121 | data_7[i] = getRandomNum(0, 10000); 122 | data_8[i] = getRandomNum(0, 10000); 123 | } 124 | var chart_option = { 125 | xAxis : { 126 | name : '日期', 127 | data : dateVal 128 | }, 129 | yAxis : { 130 | name : '' 131 | }, 132 | series : [ 133 | { 134 | name : '新用户', 135 | data : data_1 136 | }, 137 | { 138 | name : '活跃用户', 139 | data : data_2 140 | }, 141 | { 142 | name : '新用户人均订单', 143 | data : data_3 144 | }, 145 | { 146 | name : '新用户单均金额', 147 | data : data_4 148 | }, 149 | { 150 | name : '新用户单均优惠', 151 | data : data_5 152 | }, 153 | { 154 | name : '人均订单', 155 | data : data_6 156 | }, 157 | { 158 | name : '单均金额', 159 | data : data_7 160 | }, 161 | { 162 | name : '单均优惠', 163 | data : data_8 164 | } 165 | ] 166 | }; 167 | this.setState({ 168 | chart_option : chart_option 169 | }) 170 | } 171 | 172 | componentDidMount(){ 173 | } 174 | 175 | componentWillReceiveProps(newProps){ 176 | if(this.props.city !== newProps.city){ 177 | var params = {}; 178 | for(let k in this.state.params){ 179 | params[k] = this.state.params[k]; 180 | } 181 | params.city = newProps.city; 182 | this.setState({ 183 | params : params 184 | }) 185 | } 186 | } 187 | 188 | render(){ 189 | return ( 190 |
191 |
192 | 用户 > 消费活跃用户 193 |
194 |
195 | 200 |
201 |
202 | 203 |
204 | 205 |
206 | ); 207 | } 208 | 209 | } 210 | 211 | export default ConsumerActiveUser; -------------------------------------------------------------------------------- /components/js/message_management.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 公告管理模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import TableData from './common/table_data.js'; 10 | import moment from 'moment'; 11 | import { Input, Button, Select, Popconfirm, message, Modal } from 'antd'; 12 | const Option = Select.Option; 13 | import FormReg from './common/form_reg.js'; 14 | const formReg = new FormReg(); 15 | 16 | function confirmDelete(){ 17 | message.success('删除成功'); 18 | } 19 | 20 | class MessageManagement extends React.Component{ 21 | 22 | constructor(props){ 23 | super(props); 24 | this.state = { 25 | visible : false, 26 | type : 'add', //add or edit 27 | confirmLoading : false 28 | } 29 | } 30 | 31 | handleChange(){ 32 | } 33 | 34 | showModal(type){ 35 | this.setState({ 36 | visible : true, 37 | type : type 38 | }) 39 | } 40 | 41 | handleOk(){ 42 | let modal_input_title = this.refs.modal_input_title.refs.input.value.trim(); 43 | let modal_input_time = this.refs.modal_input_time.refs.input.value.trim(); 44 | let modal_input_level = this.refs.modal_input_level.refs.input.value.trim(); 45 | let modal_input_describe = this.refs.modal_input_describe.refs.input.value.trim(); 46 | if(formReg.isEmpty(modal_input_title)){ 47 | message.error('标题不能为空'); 48 | return; 49 | } 50 | if(formReg.isEmpty(modal_input_time)){ 51 | message.error('过期设置不能为空'); 52 | return; 53 | } 54 | if(formReg.isEmpty(modal_input_level)){ 55 | message.error('优先级不能为空'); 56 | return; 57 | } 58 | if(formReg.isEmpty(modal_input_describe)){ 59 | message.error('描述不能为空'); 60 | return; 61 | } 62 | this.setState({ 63 | confirmLoading : true 64 | }) 65 | setTimeout(() => { 66 | this.setState({ 67 | visible : false, 68 | confirmLoading : false 69 | }) 70 | }, 2000) 71 | } 72 | 73 | handleCancel(){ 74 | this.setState({ 75 | visible : false 76 | }) 77 | } 78 | 79 | getData(){ 80 | let input_title = this.refs.input_title.refs.input.value.trim(); 81 | console.log(input_title); 82 | if(formReg.isEmpty(input_title)){ 83 | message.error('标题不能为空'); 84 | return; 85 | } 86 | } 87 | 88 | componentWillMount(){ 89 | } 90 | 91 | componentDidMount(){ 92 | } 93 | 94 | render(){ 95 | const table_option_1 = { 96 | title : '公告管理', 97 | columns : [ 98 | { 99 | title : '公告ID', 100 | dataIndex : 'a', 101 | key : 'a' 102 | }, 103 | { 104 | title : '标题', 105 | dataIndex : 'b', 106 | key : 'b' 107 | }, 108 | { 109 | title : '介绍', 110 | dataIndex : 'c', 111 | key : 'c' 112 | }, 113 | { 114 | title : '过期设置', 115 | dataIndex : 'd', 116 | key : 'd' 117 | }, 118 | { 119 | title : '过期时间', 120 | dataIndex : 'e', 121 | key : 'e' 122 | }, 123 | { 124 | title : '开启展示', 125 | dataIndex : 'f', 126 | key : 'f' 127 | }, 128 | { 129 | title : '优先级', 130 | dataIndex : 'g', 131 | key : 'g' 132 | }, 133 | { 134 | title : '操作', 135 | key : 'action', 136 | width : 100, 137 | className : 'action-column', 138 | render : () => ( 139 | 140 | 编辑| 141 | 142 | 删除 143 | 144 | 145 | ) 146 | } 147 | ], 148 | url : './components/data/test_data_1.json', 149 | source : [] 150 | }; 151 | 152 | return ( 153 |
154 |
155 | 工具 > 公告管理 156 |
157 |
158 | 标题 159 | 160 | 161 | 162 |
163 | 164 | 170 |
    171 |
  • 172 | 173 | 174 |
    • 175 |
  • 176 | 177 | 178 |
    • 179 |
  • 180 | 181 | 182 |
    • 183 |
  • 184 | 185 | 186 |
    • 187 |
188 | 189 |
190 | ); 191 | } 192 | 193 | } 194 | 195 | export default MessageManagement; -------------------------------------------------------------------------------- /components/js/register_driver.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 注册司机模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { Input, Button, Select, DatePicker, Radio, Checkbox, InputNumber, Collapse } from 'antd'; 13 | const Option = Select.Option; 14 | const RangePicker = DatePicker.RangePicker; 15 | const RadioButton = Radio.Button; 16 | const RadioGroup = Radio.Group; 17 | const CheckboxGroup = Checkbox.Group; 18 | const Panel = Collapse.Panel; 19 | import SelectCity from './common/select_city.js' 20 | 21 | const checkbox_2 = [ 22 | { 23 | label : '社会车辆', 24 | value : '1' 25 | }, 26 | { 27 | label : '品牌专车', 28 | value : '2' 29 | }, 30 | { 31 | label : '易人易车', 32 | value : '3' 33 | }, 34 | { 35 | label : '长包车', 36 | value : '4' 37 | }, 38 | { 39 | label : '搭车', 40 | value : '5' 41 | } 42 | ]; 43 | 44 | const table_option_1 = { 45 | title : '注册司机报表', 46 | columns : [ 47 | { 48 | title : '订单编号', 49 | dataIndex : 'a', 50 | key : 'a' 51 | }, 52 | { 53 | title : '城市', 54 | dataIndex : 'b', 55 | key : 'b' 56 | }, 57 | { 58 | title : '评价类型', 59 | dataIndex : 'c', 60 | key : 'c' 61 | }, 62 | { 63 | title : '下单渠道', 64 | dataIndex : 'd', 65 | key : 'd' 66 | }, 67 | { 68 | title : '下单设备号', 69 | dataIndex : 'e', 70 | key : 'e' 71 | }, 72 | { 73 | title : '下单时间', 74 | dataIndex : 'f', 75 | key : 'f' 76 | }, 77 | { 78 | title : '订车人ID', 79 | dataIndex : 'g', 80 | key : 'g' 81 | }, 82 | { 83 | title : '手机号归属地', 84 | dataIndex : 'h', 85 | key : 'h' 86 | }, 87 | { 88 | title : '是否ASAP', 89 | dataIndex : 'i', 90 | key : 'i' 91 | }, 92 | { 93 | title : '开始时间', 94 | dataIndex : 'j', 95 | key : 'j' 96 | }, 97 | { 98 | title : '结束时间', 99 | dataIndex : 'k', 100 | key : 'k' 101 | }, 102 | { 103 | title : '付款状态', 104 | dataIndex : 'l', 105 | key : 'l' 106 | } 107 | ], 108 | url : './components/data/test_data_1.json', 109 | source : [] 110 | }; 111 | 112 | class RegisterDriver extends React.Component{ 113 | 114 | constructor(props){ 115 | super(props); 116 | this.state = { 117 | params : { 118 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 119 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 120 | city : this.props.city 121 | }, 122 | chart_option : {} 123 | } 124 | } 125 | 126 | //选择日期 127 | selectDate(dates, dateStrings){ 128 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 129 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 130 | return; 131 | } 132 | var params = {}; 133 | for(let k in this.state.params){ 134 | params[k] = this.state.params[k]; 135 | } 136 | params.startDate = dateStrings[0]; 137 | params.endDate = dateStrings[1]; 138 | this.setState({ 139 | params : params 140 | }) 141 | } 142 | 143 | componentWillMount(){ 144 | } 145 | 146 | componentDidMount(){ 147 | } 148 | 149 | componentWillReceiveProps(newProps){ 150 | if(this.props.city !== newProps.city){ 151 | var params = {}; 152 | for(let k in this.state.params){ 153 | params[k] = this.state.params[k]; 154 | } 155 | params.city = newProps.city; 156 | this.setState({ 157 | params : params 158 | }) 159 | } 160 | } 161 | 162 | render(){ 163 | return ( 164 |
165 |
166 | 车源 > 注册司机 167 |
168 |
169 | 174 | 城市 175 | 176 |
177 |
178 | 179 | 180 |
    181 |
  • 182 | 是否绑定 183 | 184 | 全部 185 | 是 186 | 否 187 | 188 |
    • 189 |
  • 190 | 司机类型 191 | 192 |
    • 193 |
  • 194 | 激活日期 195 | 200 |
    • 201 |
202 | 203 | 204 | 205 |
206 | 207 |
208 | ); 209 | } 210 | 211 | } 212 | 213 | export default RegisterDriver; -------------------------------------------------------------------------------- /components/js/product_service.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 部门关键指标-产品部模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import { Icon } from 'antd'; 11 | 12 | class ProductService extends React.Component{ 13 | 14 | constructor(props){ 15 | super(props); 16 | this.state = { 17 | chart_option_1 : {}, 18 | chart_option_2 : {}, 19 | index : [0, 0, 0, 0, 0, 0, 0, 0] //这里的index[0]=0表示第一个图表的默认维度是0（日） 20 | } 21 | } 22 | 23 | //改变图表显示维度 24 | changeChartType(e){ 25 | var index = parseInt(e.target.parentNode.getAttribute('data-index')), //获取是第几个图表 26 | type = parseInt(e.target.getAttribute('data-type')), //获取是第几个维度 27 | arr = this.state.index.concat(); 28 | if(type === 'undefined' || type === this.state.index[index]){ 29 | return; 30 | } 31 | e.target.parentNode.childNodes[this.state.index[index]].className = ''; 32 | e.target.className = 'active'; 33 | arr[index] = type; 34 | this.setState({ 35 | index : arr 36 | }) 37 | this.getChartOption(type); 38 | } 39 | 40 | getChartOption(type){ 41 | } 42 | 43 | componentWillMount(){ 44 | var dateVal = [], 45 | data_1 = [], //派单成功率 46 | data_2 = []; //派到时间距 47 | function getRandomNum(min, max){ 48 | return parseInt(Math.random() * (max - min + 1) + min, 10); 49 | } 50 | //日期和数据（用于测试） 51 | for(let i = 0; i < 14; i++){ 52 | dateVal[i] = '9-' + (i + 1); 53 | data_1[i] = getRandomNum(0, 10000); 54 | data_2[i] = getRandomNum(0, 10000); 55 | } 56 | var chart_option_1 = { 57 | xAxis : { 58 | name : '日期', 59 | data : dateVal 60 | }, 61 | yAxis : { 62 | name : '' 63 | }, 64 | series : [ 65 | { 66 | name : '派单成功率', 67 | data : data_1 68 | } 69 | ] 70 | }, 71 | chart_option_2 = { 72 | xAxis : { 73 | name : '日期', 74 | data : dateVal 75 | }, 76 | yAxis : { 77 | name : '' 78 | }, 79 | series : [ 80 | { 81 | name : '派到时间距', 82 | data : data_2 83 | } 84 | ] 85 | }; 86 | this.setState({ 87 | chart_option_1 : chart_option_1, 88 | chart_option_2 : chart_option_2 89 | }) 90 | } 91 | 92 | componentDidMount(){ 93 | } 94 | 95 | render(){ 96 | var info = [ 97 | { 98 | title : '乘客端', 99 | smallTitle : '7日安装下单率', 100 | icon : 'user', 101 | nowVal : '97.00%', 102 | targetVal : '100%', 103 | type : ['日', '周', '月'], 104 | echartId : 'chart_1', 105 | echartOption : this.state.chart_option_1 106 | }, 107 | { 108 | title : '派单成功率', 109 | smallTitle : '', 110 | icon : 'smile-o', 111 | nowVal : '97.00%', 112 | targetVal : '100%', 113 | type : ['日', '周', '月'], 114 | echartId : 'chart_2', 115 | echartOption : this.state.chart_option_2 116 | }, 117 | { 118 | title : '派到时间距', 119 | smallTitle : 'ASAP订单', 120 | icon : 'clock-circle-o', 121 | nowVal : '7.66分钟', 122 | targetVal : '5分钟', 123 | type : ['日', '周', '月'], 124 | echartId : 'chart_3', 125 | echartOption : this.state.chart_option_2 126 | }, 127 | { 128 | title : '司机接单率', 129 | smallTitle : '', 130 | icon : 'heart-o', 131 | nowVal : '97.00%', 132 | targetVal : '100%', 133 | type : ['日', '周', '月'], 134 | echartId : 'chart_4', 135 | echartOption : this.state.chart_option_2 136 | }, 137 | { 138 | title : '接单响应时长', 139 | smallTitle : '', 140 | icon : 'exclamation-circle-o', 141 | nowVal : '7.66分钟', 142 | targetVal : '5分钟', 143 | type : ['日', '周', '月'], 144 | echartId : 'chart_5', 145 | echartOption : this.state.chart_option_2 146 | }, 147 | { 148 | title : '乘客下单时长', 149 | smallTitle : '', 150 | icon : 'reload', 151 | nowVal : '7.66分钟', 152 | targetVal : '5分钟', 153 | type : ['日', '周', '月'], 154 | echartId : 'chart_6', 155 | echartOption : this.state.chart_option_2 156 | }, 157 | { 158 | title : '社会化', 159 | smallTitle : '充值金额占比', 160 | icon : 'pay-circle-o', 161 | nowVal : '7.66分钟', 162 | targetVal : '5分钟', 163 | type : ['日', '周', '月'], 164 | echartId : 'chart_7', 165 | echartOption : this.state.chart_option_2 166 | }, 167 | { 168 | title : '取消率', 169 | smallTitle : '', 170 | icon : 'frown-o', 171 | nowVal : '97.00%', 172 | targetVal : '100%', 173 | type : ['日', '周', '月'], 174 | echartId : 'chart_8', 175 | echartOption : this.state.chart_option_2 176 | } 177 | ], 178 | that = this; 179 | return ( 180 |
181 |
182 | 部门关键指标 > 产品部 183 |
184 | { 185 | info.map(function(info, index){ 186 | return ( 187 |
188 |
189 | 190 |

{info.title}{info.smallTitle !== '' ? '（' + info.smallTitle + '）' : ''}

191 |

当前值 : {info.nowVal}

192 |

目标值 : {info.targetVal}

193 |
194 |
195 |
196 | { 197 | info.type.map(function(type, typeIndex){ 198 | return {type} 199 | }) 200 | } 201 |
202 | 203 |
204 |
205 | ) 206 | }) 207 | } 208 |
209 | ); 210 | } 211 | 212 | } 213 | 214 | export default ProductService; -------------------------------------------------------------------------------- /components/js/access_active_user.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 访问活跃用户模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { Button, Select, DatePicker } from 'antd'; 13 | const Option = Select.Option; 14 | const RangePicker = DatePicker.RangePicker; 15 | 16 | const table_option_1 = { 17 | title : '活跃用户概况', 18 | columns : [ 19 | { 20 | title : '昨日活跃用户', 21 | dataIndex : 'a', 22 | key : 'a' 23 | }, 24 | { 25 | title : '过去7日活跃用户', 26 | dataIndex : 'b', 27 | key : 'b' 28 | }, 29 | { 30 | title : '昨日活跃 / 过去7日', 31 | dataIndex : 'c', 32 | key : 'c' 33 | }, 34 | { 35 | title : '过去30日活跃用户', 36 | dataIndex : 'd', 37 | key : 'd' 38 | }, 39 | { 40 | title : '昨日活跃 / 过去30日', 41 | dataIndex : 'e', 42 | key : 'e' 43 | }, 44 | { 45 | title : '安装总量', 46 | dataIndex : 'f', 47 | key : 'f' 48 | }, 49 | { 50 | title : '昨日活跃 / 安装总量', 51 | dataIndex : 'g', 52 | key : 'g' 53 | } 54 | ], 55 | url : './components/data/test_data_1.json', 56 | source : [] 57 | }; 58 | 59 | const table_option_2 = { 60 | title : '', 61 | columns : [ 62 | { 63 | title : '日期', 64 | dataIndex : 'date', 65 | key : 'date' 66 | }, 67 | { 68 | title : '活跃用户数', 69 | dataIndex : 'a', 70 | key : 'a' 71 | }, 72 | { 73 | title : '活跃用户数占比', 74 | dataIndex : 'b', 75 | key : 'b' 76 | } 77 | ], 78 | url : './components/data/test_data_1.json', 79 | source : [] 80 | }; 81 | 82 | class AccessActiveUser extends React.Component{ 83 | 84 | constructor(props){ 85 | super(props); 86 | this.state = { 87 | params : { 88 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 89 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 90 | city : this.props.city 91 | }, 92 | chart_option : {}, 93 | index : 0 //默认显示维度为日 94 | } 95 | } 96 | 97 | //选择日期 98 | selectDate(dates, dateStrings){ 99 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 100 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 101 | return; 102 | } 103 | var params = {}; 104 | for(let k in this.state.params){ 105 | params[k] = this.state.params[k]; 106 | } 107 | params.startDate = dateStrings[0]; 108 | params.endDate = dateStrings[1]; 109 | this.setState({ 110 | params : params 111 | }) 112 | } 113 | 114 | handleChange(){ 115 | 116 | } 117 | 118 | //改变图表显示维度 119 | changeChartType(e){ 120 | var type = parseInt(e.target.getAttribute('data-type')); 121 | if(!type || type - 1 === this.state.index){ 122 | return; 123 | } 124 | e.target.parentNode.childNodes[this.state.index].className = ''; 125 | e.target.className = 'active'; 126 | this.setState({ 127 | index : type - 1 128 | }) 129 | this.getChartOption(type); 130 | } 131 | 132 | getChartOption(type){ 133 | 134 | } 135 | 136 | componentWillMount(){ 137 | var dateVal = [], 138 | data_1 = []; //访问活跃用户 139 | function getRandomNum(min, max){ 140 | return parseInt(Math.random() * (max - min + 1) + min, 10); 141 | } 142 | //日期和数据（用于测试） 143 | for(let i = 0; i < 14; i++){ 144 | dateVal[i] = '9-' + (i + 1); 145 | data_1[i] = getRandomNum(0, 10000); 146 | } 147 | var chart_option = { 148 | xAxis : { 149 | name : '日期', 150 | data : dateVal 151 | }, 152 | yAxis : { 153 | name : '' 154 | }, 155 | series : [ 156 | { 157 | name : '访问活跃用户', 158 | data : data_1 159 | } 160 | ] 161 | }; 162 | this.setState({ 163 | chart_option : chart_option 164 | }) 165 | } 166 | 167 | componentDidMount(){ 168 | } 169 | 170 | componentWillReceiveProps(newProps){ 171 | if(this.props.city !== newProps.city){ 172 | var params = {}; 173 | for(let k in this.state.params){ 174 | params[k] = this.state.params[k]; 175 | } 176 | params.city = newProps.city; 177 | this.setState({ 178 | params : params 179 | }) 180 | } 181 | } 182 | 183 | render(){ 184 | return ( 185 |
186 |
187 | 用户 > 访问活跃用户 188 |
189 |
190 | 195 | 操作系统 196 | 205 | 版本号 206 | 213 | 214 |
215 |
216 |
217 | 日 218 | 周 219 | 月 220 | 小时 221 | 操作系统 222 | 版本号 223 |
224 | 225 |
226 | 227 | 228 |
229 | ); 230 | } 231 | 232 | } 233 | 234 | export default AccessActiveUser; -------------------------------------------------------------------------------- /components/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 首页模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import moment from 'moment'; 11 | import { DatePicker } from 'antd'; 12 | const RangePicker = DatePicker.RangePicker; 13 | import '../css/index.scss'; 14 | 15 | class Index extends React.Component{ 16 | 17 | constructor(props){ 18 | super(props); 19 | this.state = { 20 | params : { 21 | startDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 22 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD') 23 | }, 24 | data : [], 25 | option_1 : {}, 26 | option_2 : {}, 27 | option_3 : {}, 28 | option_4 : {} 29 | } 30 | } 31 | 32 | //选择日期 33 | selectDate(dates, dateStrings){ 34 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 35 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 36 | return; 37 | } 38 | var params = {}; 39 | for(let k in this.state.params){ 40 | params[k] = this.state.params[k]; 41 | } 42 | params.startDate = dateStrings[0]; 43 | params.endDate = dateStrings[1]; 44 | this.setState({ 45 | params : params 46 | }) 47 | } 48 | 49 | componentWillMount(){ 50 | var dateVal = [], 51 | data_1 = [], //完成订单 52 | data_2 = [], //充值金额 53 | data_3 = [], //派发订单 54 | data_4 = [], //派单成功 55 | data_5 = [], //派单失败 56 | data_6 = [], //派单成功率 57 | data_7 = [], //注册用户 58 | data_8 = [], //激活用户 59 | data_9 = [], //活跃用户 60 | data_10 = [], //注册成功司机 61 | data_11 = [], //激活司机 62 | data_12 = []; //活跃司机 63 | function getRandomNum(min, max){ 64 | return parseInt(Math.random() * (max - min + 1) + min, 10); 65 | } 66 | //日期和数据（用于测试） 67 | for(let i = 0; i < 7; i++){ 68 | dateVal[i] = '9-' + (i + 1); 69 | data_1[i] = getRandomNum(0, 10000); 70 | data_2[i] = getRandomNum(0, 10000); 71 | data_3[i] = getRandomNum(0, 10000); 72 | data_4[i] = getRandomNum(0, 10000); 73 | data_5[i] = getRandomNum(0, 10000); 74 | data_6[i] = getRandomNum(0, 10000); 75 | data_7[i] = getRandomNum(0, 10000); 76 | data_8[i] = getRandomNum(0, 10000); 77 | data_9[i] = getRandomNum(0, 10000); 78 | data_10[i] = getRandomNum(0, 10000); 79 | data_11[i] = getRandomNum(0, 10000); 80 | data_12[i] = getRandomNum(0, 10000); 81 | } 82 | var option_1 = { 83 | title : '订单', 84 | xAxis : { 85 | name : '日期', 86 | data : dateVal 87 | }, 88 | yAxis : { 89 | name : '' 90 | }, 91 | series : [ 92 | { 93 | name : '完成订单', 94 | data : data_1 95 | }, 96 | { 97 | name : '充值金额', 98 | data : data_2 99 | } 100 | ] 101 | }, 102 | option_2 = { 103 | title : '用车需求', 104 | xAxis : { 105 | name : '日期', 106 | data : dateVal 107 | }, 108 | yAxis : { 109 | name : '' 110 | }, 111 | series : [ 112 | { 113 | name : '派发订单', 114 | data : data_3 115 | }, 116 | { 117 | name : '派单成功', 118 | data : data_4 119 | }, 120 | { 121 | name : '派单失败', 122 | data : data_5 123 | }, 124 | { 125 | name : '派单成功率', 126 | data : data_6 127 | } 128 | ] 129 | }, 130 | option_3 = { 131 | title : '用户', 132 | xAxis : { 133 | name : '日期', 134 | data : dateVal 135 | }, 136 | yAxis : { 137 | name : '' 138 | }, 139 | series : [ 140 | { 141 | name : '注册用户', 142 | data : data_7 143 | }, 144 | { 145 | name : '激活用户', 146 | data : data_8 147 | }, 148 | { 149 | name : '活跃用户', 150 | data : data_9 151 | } 152 | ] 153 | }, 154 | option_4 = { 155 | title : '车源', 156 | xAxis : { 157 | name : '日期', 158 | data : dateVal 159 | }, 160 | yAxis : { 161 | name : '' 162 | }, 163 | series : [ 164 | { 165 | name : '注册成功司机', 166 | data : data_10 167 | }, 168 | { 169 | name : '激活司机', 170 | data : data_11 171 | }, 172 | { 173 | name : '活跃司机', 174 | data : data_12 175 | } 176 | ] 177 | }; 178 | this.setState({ 179 | option_1 : option_1, 180 | option_2 : option_2, 181 | option_3 : option_3, 182 | option_4 : option_4 183 | }) 184 | } 185 | 186 | componentDidMount(){ 187 | var data = [ 188 | { 189 | name : '派发订单', 190 | number : '19936665', 191 | float : '13000' 192 | }, 193 | { 194 | name : '派单成功', 195 | number : '19936665', 196 | float : '13000' 197 | }, 198 | { 199 | name : '派单成功率', 200 | number : '100%', 201 | float : '16%' 202 | }, 203 | { 204 | name : '完成订单', 205 | number : '19936665', 206 | float : '13000' 207 | }, 208 | { 209 | name : '激活用户', 210 | number : '19936665', 211 | float : '13000' 212 | }, 213 | { 214 | name : '激活司机', 215 | number : '19936665', 216 | float : '13000' 217 | }, 218 | { 219 | name : '充值金额', 220 | number : '19936665', 221 | float : '13000' 222 | } 223 | ]; 224 | this.setState({ 225 | data : data 226 | }) 227 | } 228 | 229 | render(){ 230 | return ( 231 |
232 |
233 | 报表 > 首页 234 |
235 |
236 | 当前城市：{this.props.city} 237 |
238 | 243 |
244 |
245 |
    246 | { 247 | this.state.data.map(function(data){ 248 | return
  • {data.float}

    {data.number}

    {data.name}

    • 249 | }) 250 | } 251 |
252 |
253 |
254 | 255 |
256 |
257 | 258 |
259 |
260 | 261 |
262 |
263 | 264 |
265 |
266 |
267 | ); 268 | } 269 | 270 | } 271 | 272 | export default Index; -------------------------------------------------------------------------------- /components/js/complete_order.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 完成订单模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import TableData from './common/table_data.js'; 11 | import moment from 'moment'; 12 | import { Input, Button, Select, DatePicker, Radio, Checkbox, InputNumber, Collapse } from 'antd'; 13 | const Option = Select.Option; 14 | const RangePicker = DatePicker.RangePicker; 15 | const RadioButton = Radio.Button; 16 | const RadioGroup = Radio.Group; 17 | const CheckboxGroup = Checkbox.Group; 18 | const Panel = Collapse.Panel; 19 | import SelectCity from './common/select_city.js'; 20 | import SelectProduct from './common/select_product.js'; 21 | import SelectCar from './common/select_car.js'; 22 | import '../css/complete_order.scss'; 23 | 24 | const checkbox_1 = [ 25 | { 26 | label : '已付款', 27 | value : '1' 28 | }, 29 | { 30 | label : '未付款', 31 | value : '2' 32 | }, 33 | { 34 | label : '部分付款', 35 | value : '3' 36 | } 37 | ]; 38 | 39 | const checkbox_2 = [ 40 | { 41 | label : '社会车辆', 42 | value : '1' 43 | }, 44 | { 45 | label : '品牌专车', 46 | value : '2' 47 | }, 48 | { 49 | label : '易人易车', 50 | value : '3' 51 | }, 52 | { 53 | label : '长包车', 54 | value : '4' 55 | }, 56 | { 57 | label : '搭车', 58 | value : '5' 59 | } 60 | ]; 61 | 62 | const table_option_1 = { 63 | title : '完成订单报表', 64 | columns : [ 65 | { 66 | title : '订单编号', 67 | dataIndex : 'a', 68 | key : 'a', 69 | width : 100 70 | }, 71 | { 72 | title : '城市', 73 | dataIndex : 'b', 74 | key : 'b', 75 | width : 100 76 | }, 77 | { 78 | title : '评价类型', 79 | dataIndex : 'c', 80 | key : 'c', 81 | width : 100 82 | }, 83 | { 84 | title : '下单渠道', 85 | dataIndex : 'd', 86 | key : 'd', 87 | width : 100 88 | }, 89 | { 90 | title : '下单设备号', 91 | dataIndex : 'e', 92 | key : 'e', 93 | width : 100 94 | }, 95 | { 96 | title : '下单时间', 97 | dataIndex : 'f', 98 | key : 'f', 99 | width : 100 100 | }, 101 | { 102 | title : '订车人ID', 103 | dataIndex : 'g', 104 | key : 'g', 105 | width : 100 106 | }, 107 | { 108 | title : '手机号归属地', 109 | dataIndex : 'h', 110 | key : 'h', 111 | width : 100 112 | }, 113 | { 114 | title : '是否ASAP', 115 | dataIndex : 'i', 116 | key : 'i', 117 | width : 100 118 | }, 119 | { 120 | title : '开始时间', 121 | dataIndex : 'j', 122 | key : 'j', 123 | width : 100 124 | }, 125 | { 126 | title : '结束时间', 127 | dataIndex : 'k', 128 | key : 'k', 129 | width : 100 130 | }, 131 | { 132 | title : '付款状态', 133 | dataIndex : 'l', 134 | key : 'l', 135 | width : 100 136 | } 137 | ], 138 | url : './components/data/test_data_1.json', 139 | source : [] 140 | }; 141 | 142 | class CompleteOrder extends React.Component{ 143 | 144 | constructor(props){ 145 | super(props); 146 | this.state = { 147 | params : { 148 | startDate : moment().subtract(7, 'days').format('YYYY-MM-DD'), 149 | endDate : moment().subtract(1, 'days').format('YYYY-MM-DD'), 150 | city : this.props.city 151 | }, 152 | chart_option : {} 153 | } 154 | } 155 | 156 | //选择日期 157 | selectDate(dates, dateStrings){ 158 | console.log(dateStrings[0] + ' ' + dateStrings[1]); 159 | if(dateStrings[0] === '' && dateStrings[1] === ''){ 160 | return; 161 | } 162 | var params = {}; 163 | for(let k in this.state.params){ 164 | params[k] = this.state.params[k]; 165 | } 166 | params.startDate = dateStrings[0]; 167 | params.endDate = dateStrings[1]; 168 | this.setState({ 169 | params : params 170 | }) 171 | } 172 | 173 | componentWillMount(){ 174 | } 175 | 176 | componentDidMount(){ 177 | } 178 | 179 | componentWillReceiveProps(newProps){ 180 | if(this.props.city !== newProps.city){ 181 | var params = {}; 182 | for(let k in this.state.params){ 183 | params[k] = this.state.params[k]; 184 | } 185 | params.city = newProps.city; 186 | this.setState({ 187 | params : params 188 | }) 189 | } 190 | } 191 | 192 | render(){ 193 | return ( 194 |
195 |
196 | 订单 > 完成订单 197 |
198 |
199 | 204 | 城市 205 | 206 |
207 |
208 | 209 | 210 |
    211 |
  • 212 | 车型 213 | 214 | 产品 215 | 216 |
    • 217 |
  • 218 | 是否ASAP 219 | 220 | 全部 221 | 是 222 | 否 223 | 224 | 结算账户 225 | 226 | 全部 227 | 企业 228 | 个人 229 | 230 | 定乘分离 231 | 232 | 全部 233 | 是 234 | 否 235 | 236 |
    • 237 |
  • 238 | 订单ID 239 | 240 | 企业ID 241 | 242 |
    • 243 |
  • 244 | 用户ID 245 | 246 | 司机ID 247 | 248 | 优惠券 249 | 250 |
    • 251 |
  • 252 | 付款状态 253 | 254 |
    • 255 |
  • 256 | 车辆类型 257 | 258 |
    • 259 |
  • 260 | 订单原始金额 261 | - 262 | 公里范围 263 | - 264 | 时长范围 265 | - 266 |
    • 267 |
268 | 269 | 270 | 271 |
272 | 273 |
274 | ); 275 | } 276 | 277 | } 278 | 279 | export default CompleteOrder; -------------------------------------------------------------------------------- /components/js/today_forecast.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author JUNCHAO KONG 3 | * @date 2016-10-19 4 | * @description 今日预测模块 5 | */ 6 | 7 | import React from 'react'; 8 | import ReactDom from 'react-dom'; 9 | import Echarts from './common/echarts.js'; 10 | import '../css/today_forecast.scss'; 11 | 12 | class TodayForecast extends React.Component{ 13 | 14 | constructor(props){ 15 | super(props); 16 | this.state = { 17 | option_1 : {}, 18 | option_2 : {}, 19 | option_3 : {}, 20 | option_4 : {}, 21 | option_5 : {}, 22 | option_6 : {} 23 | } 24 | } 25 | 26 | componentWillMount(){ 27 | var timeVal = [], 28 | data_1 = [], //有效订单数 29 | data_2 = [], // 30 | data_3 = [], // 31 | data_4 = [], //派单成功率 32 | data_5 = [], // 33 | data_6 = [], // 34 | data_7 = [], //完成订单 35 | data_8 = [], // 36 | data_9 = [], // 37 | data_10 = [], //充值金额 38 | data_11 = [], // 39 | data_12 = [], // 40 | data_13 = [], //注册用户 41 | data_14 = [], // 42 | data_15 = [], // 43 | data_16 = [], //激活用户 44 | data_17 = [], // 45 | data_18 = []; // 46 | function getRandomNum(min, max){ 47 | return parseInt(Math.random() * (max - min + 1) + min, 10); 48 | } 49 | //时间和数据（用于测试） 50 | for(let i = 0; i < 24; i++){ 51 | timeVal[i] = i; 52 | data_1[i] = getRandomNum(0, 10000); 53 | data_2[i] = getRandomNum(0, 10000); 54 | data_3[i] = getRandomNum(0, 10000); 55 | data_4[i] = getRandomNum(0, 10000); 56 | data_5[i] = getRandomNum(0, 10000); 57 | data_6[i] = getRandomNum(0, 10000); 58 | data_7[i] = getRandomNum(0, 10000); 59 | data_8[i] = getRandomNum(0, 10000); 60 | data_9[i] = getRandomNum(0, 10000); 61 | data_10[i] = getRandomNum(0, 10000); 62 | data_11[i] = getRandomNum(0, 10000); 63 | data_12[i] = getRandomNum(0, 10000); 64 | data_13[i] = getRandomNum(0, 10000); 65 | data_14[i] = getRandomNum(0, 10000); 66 | data_15[i] = getRandomNum(0, 10000); 67 | data_16[i] = getRandomNum(0, 10000); 68 | data_17[i] = getRandomNum(0, 10000); 69 | data_18[i] = getRandomNum(0, 10000); 70 | } 71 | var option_1 = { 72 | title : '有效订单', 73 | selectedMode : 'true', 74 | xAxis : { 75 | name : '时间', 76 | data : timeVal 77 | }, 78 | yAxis : { 79 | name : '' 80 | }, 81 | series : [ 82 | { 83 | name : '上周同一日', 84 | data : data_1 85 | }, 86 | { 87 | name : '昨日', 88 | data : data_2 89 | }, 90 | { 91 | name : '今日', 92 | data : data_3 93 | } 94 | ] 95 | }, 96 | option_2 = { 97 | title : '派单成功率', 98 | selectedMode : 'true', 99 | xAxis : { 100 | name : '时间', 101 | data : timeVal 102 | }, 103 | yAxis : { 104 | name : '' 105 | }, 106 | series : [ 107 | { 108 | name : '上周同一日', 109 | data : data_4 110 | }, 111 | { 112 | name : '昨日', 113 | data : data_5 114 | }, 115 | { 116 | name : '今日', 117 | data : data_6 118 | } 119 | ] 120 | }, 121 | option_3 = { 122 | title : '完成订单', 123 | selectedMode : 'true', 124 | xAxis : { 125 | name : '时间', 126 | data : timeVal 127 | }, 128 | yAxis : { 129 | name : '' 130 | }, 131 | series : [ 132 | { 133 | name : '上周同一日', 134 | data : data_7 135 | }, 136 | { 137 | name : '昨日', 138 | data : data_8 139 | }, 140 | { 141 | name : '今日', 142 | data : data_9 143 | } 144 | ] 145 | }, 146 | option_4 = { 147 | title : '充值金额（万）', 148 | selectedMode : 'true', 149 | xAxis : { 150 | name : '时间', 151 | data : timeVal 152 | }, 153 | yAxis : { 154 | name : '' 155 | }, 156 | series : [ 157 | { 158 | name : '上周同一日', 159 | data : data_10 160 | }, 161 | { 162 | name : '昨日', 163 | data : data_11 164 | }, 165 | { 166 | name : '今日', 167 | data : data_12 168 | } 169 | ] 170 | }, 171 | option_5 = { 172 | title : '注册用户', 173 | selectedMode : 'true', 174 | xAxis : { 175 | name : '时间', 176 | data : timeVal 177 | }, 178 | yAxis : { 179 | name : '' 180 | }, 181 | series : [ 182 | { 183 | name : '上周同一日', 184 | data : data_13 185 | }, 186 | { 187 | name : '昨日', 188 | data : data_14 189 | }, 190 | { 191 | name : '今日', 192 | data : data_15 193 | } 194 | ] 195 | }, 196 | option_6 = { 197 | title : '激活用户', 198 | selectedMode : 'true', 199 | xAxis : { 200 | name : '时间', 201 | data : timeVal 202 | }, 203 | yAxis : { 204 | name : '' 205 | }, 206 | series : [ 207 | { 208 | name : '上周同一日', 209 | data : data_16 210 | }, 211 | { 212 | name : '昨日', 213 | data : data_17 214 | }, 215 | { 216 | name : '今日', 217 | data : data_18 218 | } 219 | ] 220 | }; 221 | this.setState({ 222 | option_1 : option_1, 223 | option_2 : option_2, 224 | option_3 : option_3, 225 | option_4 : option_4, 226 | option_5 : option_5, 227 | option_6 : option_6 228 | }) 229 | } 230 | 231 | render(){ 232 | return ( 233 |
234 |
235 | 报表 > 今日预测 236 |
237 |
238 |
    239 |

  • 有效订单

    76567845

    • 240 |

  • 派单成功率

    76567845

    • 241 |

  • 完成订单

    76567845

    • 242 |

  • 充值金额（万）

    76567845

    • 243 |

  • 注册用户

    76567845

    • 244 |

  • 激活用户

    76567845

    • 245 |
246 |
247 |
248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 |
有效订单派单成功率完成订单充值金额（万）注册用户激活用户
今日预计723723723723723723
昨日实时723723723723723723
昨日累计723723723723723723
288 |
289 |
290 |
291 | 292 |
293 |
294 | 295 |
296 |
297 | 298 |
299 |
300 | 301 |
302 |
303 | 304 |
305 |
306 | 307 |
308 |
309 |
310 | ); 311 | } 312 | 313 | } 314 | 315 | export default TodayForecast; --------------------------------------------------------------------------------