Browse Source

营销员数据统计

dev01 1 year ago
parent
commit
e57d3a5e4a

File diff suppressed because it is too large
+ 719 - 711
js/component/manageCenter/index/content.jsx


+ 34 - 31
js/component/manageCenter/index/leftTab.jsx

@@ -5,37 +5,40 @@ const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
 
 const LeftTab = React.createClass({
-    getInitialState() {
-        return {
-            current: 'normal'
-        };
-    },
-    handleClick(e) {
-        this.props.handlekey(e.key);
-        this.setState({
-            current: e.key,
-        });
-    },
-    componentWillMount() {
-        if (window.location.hash) {
-            this.state.current = window.location.hash.substr(1);
-        };
-    },
-    render() {
-        return (
-            <Menu onClick={this.handleClick}
-                selectedKeys={[this.state.current]}
-                mode="vertical"
-                className="account-left" >
-                <Menu.Item key="normal">
-                    常用功能
-                </Menu.Item>
-                <Menu.Item key="contacts">
-                    常用联系人
-                </Menu.Item>
-            </Menu>
-        );
-    },
+  getInitialState() {
+    return {
+      current: 'statistics'
+    };
+  },
+  handleClick(e) {
+    this.props.handlekey(e.key);
+    this.setState({
+      current: e.key,
+    });
+  },
+  componentWillMount() {
+    if (window.location.hash) {
+      this.state.current = window.location.hash.substr(1);
+    };
+  },
+  render() {
+    return (
+      <Menu onClick={this.handleClick}
+        selectedKeys={[this.state.current]}
+        mode="vertical"
+        className="account-left" >
+        <Menu.Item key="statistics">
+          数据统计
+        </Menu.Item>
+        <Menu.Item key="normal">
+          常用功能
+        </Menu.Item>
+        <Menu.Item key="contacts">
+          常用联系人
+        </Menu.Item>
+      </Menu>
+    );
+  },
 });
 
 export default LeftTab;

+ 240 - 0
js/component/manageCenter/index/statistics/index.jsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import ajax from 'jquery/src/ajax/xhr.js';
+import $ from 'jquery/src/ajax';
+import moment from 'moment';
+import '@/manageCenter/financialManage/distribute/public.less';
+import { Button, Spin, DatePicker, Radio, message } from 'antd';
+import './index.less';
+import ReactEcharts from 'echarts-for-react/lib/core';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/grid';
+
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+const { RangePicker } = DatePicker
+
+const Statistics = React.createClass({
+
+  getInitialState() {
+    return {
+      releaseDate: [],
+      info: {}
+    }
+  },
+
+  componentWillMount() {
+    const now = new Date();
+    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+    console.log("-----------", yesterday)
+  },
+
+  loadData() {
+    const { releaseDate } = this.state
+    console.log("====", releaseDate)
+    this.setState({
+      loading: true,
+    });
+    $.ajax({
+      method: "get",
+      dataType: "json",
+      crossDomain: false,
+      url: globalConfig.context + "/api/admin/statistics/info",
+      data: {
+        startTime: releaseDate[0],
+        endTime: releaseDate[1],
+      },
+      success: function (data) {
+        ShowModal(this);
+        this.setState({
+          loading: false,
+        });
+        if (data.error && data.error.length === 0) {
+          this.setState({
+            info: data.data
+          })
+        } else {
+          message.warning(data.error[0].message);
+        }
+      }.bind(this),
+    }).always(
+      function () {
+        this.setState({
+          loading: false,
+        });
+      }.bind(this)
+    );
+  },
+
+  search() {
+    this.loadData();
+  },
+
+  reset() {
+    this.state.releaseDate = []
+    this.loadData();
+  },
+
+  render() {
+    const { status } = this.state
+    const list = [
+      { color: "#99FFFF", title: "全部签单客户数:", sum: 200, tit: "签单客户数", number: 50 },
+      { color: "#FFFFCC", title: "全部私有客户数:", sum: 200, tit: "私有客户数", number: 50 },
+      { color: "#FFCCCC", title: "全部渠道数:", sum: 200, tit: "私有渠道数", number: 50 },
+      { color: "#99CCFF", title: "全部公出数:", sum: 200, tit: "公出企业数", number: 50 },
+      { color: "#99FFCC", title: "全部跟进客户数:", sum: 200, tit: "跟进客户数", number: 50 },
+      { color: "#CC99CC", title: "全部订单数:", sum: 200, tit: "订单数", number: 50 },
+      { color: "#99CCCC", title: "全部应收款:", sum: 10.54, tit: "应收款", number: 0.25 },
+      {
+        color: "#FFCC99", title: "待紧急处理事项", sum: "", tit: "签单客户数", number: "",
+        list: [{ key: "被驳回订单:", value: 2 }, { key: "待变更订单:", value: 2 }, { key: "待核对订单:", value: 2 }, { key: "暂停项目:", value: 2 },]
+      },
+    ]
+    const option = {
+      title: {
+        text: ''
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      legend: {
+        data: ['签单客户数', '私有客户数', '私有渠道数', '公出企业数', '跟进客户数', '订单数',]
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: '签单客户数',
+          type: 'line',
+          data: [1, 2, 0, 2, 5, 3, 9]
+        },
+        {
+          name: '私有客户数',
+          type: 'line',
+          data: [0, 0, 1, 2, 3, 4, 5]
+        },
+        {
+          name: '私有渠道数',
+          type: 'line',
+          data: [1, 2, 5, 4, 8, 9, 1]
+        },
+        {
+          name: '公出企业数',
+          type: 'line',
+          data: [1, 2, 5, 7, 8, 5, 2]
+        },
+        {
+          name: '跟进客户数',
+          type: 'line',
+          data: [0, 4, 6, 3, 2, 7, 9]
+        },
+        {
+          name: '订单数',
+          type: 'line',
+          data: [1, 2, 3, 5, 8, 6, 7]
+        }
+      ]
+    }
+    return (
+      <div className="user-content">
+        <div className="content-title" style={{ marginBottom: 10 }}>
+          <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
+        </div>
+        <div className="user-search">
+          <RadioGroup defaultValue="a"
+            onChange={e => {
+              this.setState({
+                status: e.target.value
+              })
+              console.log("e==", e.target.value)
+            }}
+          >
+            <RadioButton value={1}>今日</RadioButton>
+            <RadioButton value={2}>昨日</RadioButton>
+            <RadioButton value={3}>近7日</RadioButton>
+            <RadioButton value={4}>近15日</RadioButton>
+            <RadioButton value={5}>近30日</RadioButton>
+            <RadioButton value={0}>自定义</RadioButton>
+          </RadioGroup>
+          {
+            status == 0 &&
+            <RangePicker
+              style={{ width: 200, marginLeft: 15 }}
+              value={[
+                this.state.releaseDate[0]
+                  ? moment(this.state.releaseDate[0])
+                  : null,
+                this.state.releaseDate[1]
+                  ? moment(this.state.releaseDate[1])
+                  : null,
+              ]}
+              onChange={(data, dataString) => {
+                this.setState({ releaseDate: dataString })
+              }}
+            />
+          }
+          <Button style={{ marginLeft: 15 }} type="primary" onClick={this.search}>搜索</Button>
+          <Button onClick={this.reset}>重置</Button>
+        </div>
+        <div className="patent-table">
+          {/* <Spin spinning={this.state.loading}>
+
+          </Spin> */}
+          <ReactEcharts option={option} echarts={echarts} />
+          <div className='plist'>
+            {
+              list.map((item, index) =>
+                <div className='plitem' style={{ background: item.color }} key={index}>
+                  <div className='plititle'>
+                    <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
+                    <span className='plisum'>{item.sum}</span>
+                  </div>
+                  {
+                    item.title == "待紧急处理事项"
+                      ? <div className='list'>
+                        {
+                          item.list.map((t, i) =>
+                            <div key={i}>
+                              <span>{t.key}</span>
+                              <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
+                            </div>
+                          )
+                        }
+                      </div>
+                      : <div className='count'>
+                        <div className='plinum'>{item.number}</div>
+                        <div className='plitit'>{item.tit}</div>
+                      </div>
+                  }
+                </div>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+
+export default Statistics;

+ 51 - 0
js/component/manageCenter/index/statistics/index.less

@@ -0,0 +1,51 @@
+.patent-table {
+  display: flex;
+  flex-direction: column;
+
+  .plist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .plitem {
+      width: 23%;
+      margin: 20px 1%;
+      border-radius: 20px;
+      padding: 30px;
+
+      .plititle {
+        font-size: 16px;
+
+        .plisum {
+          color: #0000FF;
+          text-decoration: underline;
+          
+        }
+
+      }
+
+      .count {
+        .plinum {
+          color: #0000FF;
+          font-size: 32px;
+          margin-top: 30px;
+          text-decoration: underline;
+
+        }
+
+        .plitit {
+          font-size: 16px;
+
+        }
+      }
+
+      .list{
+        font-size: 16px;
+        margin-top: 15px;
+      }
+
+    }
+
+  }
+
+}