|
@@ -0,0 +1,551 @@
|
|
|
+import React from 'react';
|
|
|
+import { Select, Spin, Input, Table, Button ,DatePicker} from 'antd';
|
|
|
+import ajax from 'jquery/src/ajax/xhr.js';
|
|
|
+import $ from 'jquery/src/ajax';
|
|
|
+import './customer.less';
|
|
|
+import { post } from '@/dataDic.js';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+const DiurnalStatisticsOne = React.createClass({
|
|
|
+ loadData(timeTypes,totalArr) {
|
|
|
+ let total=totalArr;
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/report/userDataStatistics",
|
|
|
+ data: {
|
|
|
+
|
|
|
+ depId:this.state.superId,//部门机构
|
|
|
+ },
|
|
|
+ success: function(data) {
|
|
|
+ let thedata = data.data;
|
|
|
+ let theArr = [];
|
|
|
+ if(!thedata) {
|
|
|
+ if(data.error && data.error.length) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ };
|
|
|
+ thedata = {};
|
|
|
+ } else {
|
|
|
+ thedata.map(function(item, index) {
|
|
|
+ let nub=index+1;
|
|
|
+ theArr.push({
|
|
|
+ key: index,
|
|
|
+ theNumber:false,
|
|
|
+ nub:nub,
|
|
|
+ depName: item.depName,//部门
|
|
|
+ name:item.name,//员工姓名
|
|
|
+ signUser:item.signUser,//签单客户数
|
|
|
+ fullUser:item.fullUser,//资料完善数
|
|
|
+ dayFullUser:item.dayFullUser,//今日完善数
|
|
|
+ dayNewUser:item.dayNewUser, //今日新增数
|
|
|
+ countUser:item.countUser,//私有客户数
|
|
|
+ signFullUser:item.signFullUser,//签单客户完善数
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(theArr.length){
|
|
|
+ theArr.push(
|
|
|
+ {
|
|
|
+ key:9999999,
|
|
|
+ theNumber:true,
|
|
|
+ name:'合计',
|
|
|
+ signUser:total.signUser,//签单客户数
|
|
|
+ fullUser:total.fullUser,//资料完善数
|
|
|
+ dayFullUser:total.dayFullUser,//今日完善数
|
|
|
+ dayNewUser:total.dayNewUser,//今日新增数
|
|
|
+ countUser:total.countUser,//私有客户数
|
|
|
+ signFullUser:total.signFullUser,//签单客户完整数
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ dataSource: theArr,
|
|
|
+ })
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function() {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ totalData(timeTypes) {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/report/userDataStatisticsCount",
|
|
|
+ data: {
|
|
|
+ depId:this.state.superId,//部门机构
|
|
|
+ },
|
|
|
+ success: function(data) {
|
|
|
+ let thedata = data.data;
|
|
|
+ let theArr = [];
|
|
|
+ if(!thedata) {
|
|
|
+ if(data.error && data.error.length) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ };
|
|
|
+ thedata = {};
|
|
|
+ }
|
|
|
+ this.loadData(timeTypes,thedata);
|
|
|
+ this.selectSuperId();
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function() {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ //时间选择
|
|
|
+ selTime(value,index){
|
|
|
+ this.setState({
|
|
|
+ Dtime:value,
|
|
|
+ selTime:index
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取上级组织
|
|
|
+ selectSuperId() {
|
|
|
+ this.state.data = []
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/organization/selectSuperId",
|
|
|
+ data:{
|
|
|
+
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ let theArr = [];
|
|
|
+ let theId=[];//用于保存上级组织的ID和名称
|
|
|
+ let thedata=data.data;
|
|
|
+ if (!thedata) {
|
|
|
+ if (data.error && data.error.length) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ };
|
|
|
+ thedata = {};
|
|
|
+ };
|
|
|
+ var contactIds=[];
|
|
|
+ for(var i=0;i<data.data.length;i++){
|
|
|
+ let theData = data.data[i];
|
|
|
+ theArr.push(
|
|
|
+ <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
|
|
|
+ );
|
|
|
+ theId.push(
|
|
|
+ [theData.id,theData.name]
|
|
|
+ );
|
|
|
+ };
|
|
|
+ this.setState({
|
|
|
+ SuperArr:thedata,
|
|
|
+ contactsOption: theArr,
|
|
|
+ theId: theId,
|
|
|
+ orderStatusOptions:data.data,
|
|
|
+ });
|
|
|
+
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ //判断浏览器类型
|
|
|
+ getExplorer() {
|
|
|
+ var explorer = window.navigator.userAgent;
|
|
|
+ //ie
|
|
|
+ if(explorer.indexOf("MSIE") >= 0) {
|
|
|
+ return 'ie';
|
|
|
+ }
|
|
|
+ //firefox
|
|
|
+ else if(explorer.indexOf("Firefox") >= 0) {
|
|
|
+ return 'Firefox';
|
|
|
+ }
|
|
|
+ //Chrome
|
|
|
+ else if(explorer.indexOf("Chrome") >= 0) {
|
|
|
+ return 'Chrome';
|
|
|
+ }
|
|
|
+ //Opera
|
|
|
+ else if(explorer.indexOf("Opera") >= 0) {
|
|
|
+ return 'Opera';
|
|
|
+ }
|
|
|
+ //Safari
|
|
|
+ else if(explorer.indexOf("Safari") >= 0) {
|
|
|
+ return 'Safari';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //导出为exel表格
|
|
|
+ tabExel() {
|
|
|
+ var table = document.querySelector('#daochu1');
|
|
|
+ var idTmr;
|
|
|
+ //debugger;
|
|
|
+ //整个表格拷贝到EXCEL中
|
|
|
+ if(this.getExplorer() == 'ie') {
|
|
|
+ var curTbl = document.getElementById(tableid);
|
|
|
+ var oXL = new ActiveXObject("Excel.Application");
|
|
|
+ //创建AX对象excel
|
|
|
+ var oWB = oXL.Workbooks.Add();
|
|
|
+ //获取workbook对象
|
|
|
+ var xlsheet = oWB.Worksheets(1);
|
|
|
+ //激活当前sheet
|
|
|
+ var sel = document.body.createTextRange();
|
|
|
+ sel.moveToElementText(curTbl);
|
|
|
+ //把表格中的内容移到TextRange中
|
|
|
+ sel.select();
|
|
|
+ //全选TextRange中内容
|
|
|
+ sel.execCommand("Copy");
|
|
|
+ //复制TextRange中内容
|
|
|
+ xlsheet.Paste();
|
|
|
+ //粘贴到活动的EXCEL中
|
|
|
+ oXL.Visible = true;
|
|
|
+ //设置excel可见属性
|
|
|
+ try {
|
|
|
+ var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
|
|
|
+ } catch(e) {
|
|
|
+ print("Nested catch caught " + e);
|
|
|
+ } finally {
|
|
|
+ oWB.SaveAs(fname);
|
|
|
+
|
|
|
+ oWB.Close(savechanges = false);
|
|
|
+ //xls.visible = false;
|
|
|
+ oXL.Quit();
|
|
|
+ oXL = null;
|
|
|
+ //结束excel进程,退出完成
|
|
|
+ //window.setInterval("Cleanup();",1);
|
|
|
+ idTmr = window.setInterval("Cleanup();", 1);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.tableToExcel(table,this.getExplorer());
|
|
|
+ }
|
|
|
+ function Cleanup() {
|
|
|
+ window.clearInterval(idTmr);
|
|
|
+ CollectGarbage();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tableToExcel(table,name) {
|
|
|
+ var uri = 'data:application/vnd.ms-excel;base64,',
|
|
|
+ template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
|
|
|
+ base64 = function(s) {
|
|
|
+ return window.btoa(unescape(encodeURIComponent(s)))
|
|
|
+ },
|
|
|
+ format = function(s, c) {
|
|
|
+ return s.replace(/{(\w+)}/g,
|
|
|
+ function(m, p) {
|
|
|
+ return c[p];
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(!table.nodeType) table = document.getElementById(table);
|
|
|
+ var ctx = {
|
|
|
+ worksheet: name || 'Worksheet',
|
|
|
+ table: table.innerHTML
|
|
|
+ };
|
|
|
+ window.location.href = uri + base64(format(template, ctx))
|
|
|
+ },
|
|
|
+ getInitialState() {
|
|
|
+ return {
|
|
|
+ releaseDate: [],
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRows: [],
|
|
|
+ loading: false,
|
|
|
+ visible: false,
|
|
|
+ showDesc: false,
|
|
|
+ timeState:false,
|
|
|
+ weekColor:true,
|
|
|
+ monthColor:false,
|
|
|
+ quarterColor:false,
|
|
|
+ yearColor:false,
|
|
|
+ Dtime:undefined,
|
|
|
+ selTime:'',
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'nub',
|
|
|
+ width:50,
|
|
|
+ key: 'nub',
|
|
|
+ fixed:false,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:0
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '部门',
|
|
|
+ dataIndex: 'depName',
|
|
|
+ key: 'depName',
|
|
|
+ fixed:false,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:0
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ title: '姓名',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:3
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ title: '客户总数',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'countUser',
|
|
|
+ key: 'countUser',
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:1
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '今日新增客户数',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'dayNewUser',
|
|
|
+ key: 'dayNewUser',
|
|
|
+ sorter: (a, b) => a.dayNewUser - b.dayNewUser,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:1
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '完整客户总数',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'fullUser',
|
|
|
+ key: 'fullUser',
|
|
|
+ sorter: (a, b) => a.fullUser - b.fullUser,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:1
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '今日完整客户数',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'dayFullUser',
|
|
|
+ key: 'dayFullUser',
|
|
|
+ sorter: (a, b) => a.dayFullUser - b.dayFullUser,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:1
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '签单客户总数',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'signUser',
|
|
|
+ key: 'signUser',
|
|
|
+ sorter: (a, b) => a.signUser - b.signUser,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:1
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '签单完整客户数',
|
|
|
+ fixed:false,
|
|
|
+ dataIndex: 'signFullUser',
|
|
|
+ key: 'signFullUser',
|
|
|
+ sorter: (a, b) => a.signFullUser - b.signFullUser,
|
|
|
+ render:(text,record)=>{
|
|
|
+ if(!record.theNumber){
|
|
|
+ return text
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ children: text,
|
|
|
+ props: {
|
|
|
+ colSpan:1
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataSource: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.totalData(0)
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.state.superId = undefined;//部门机构清零
|
|
|
+ this.totalData(0);
|
|
|
+ },
|
|
|
+ week(){
|
|
|
+ this.state.releaseDate[0] = undefined;//开始时间清零
|
|
|
+ this.state.releaseDate[1] = undefined;//结束时间清零
|
|
|
+ this.totalData(0);
|
|
|
+ this.setState({
|
|
|
+ weekColor:true,
|
|
|
+ monthColor:false,
|
|
|
+ quarterColor:false,
|
|
|
+ yearColor:false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ month(){
|
|
|
+ this.state.releaseDate[0] = undefined;//开始时间清零
|
|
|
+ this.state.releaseDate[1] = undefined;//结束时间清零
|
|
|
+ this.totalData(1);
|
|
|
+ this.setState({
|
|
|
+ weekColor:false,
|
|
|
+ monthColor:true,
|
|
|
+ quarterColor:false,
|
|
|
+ yearColor:false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ quarter(){
|
|
|
+ this.state.releaseDate[0] = undefined;//开始时间清零
|
|
|
+ this.state.releaseDate[1] = undefined;//结束时间清零
|
|
|
+ this.totalData(2);
|
|
|
+ this.setState({
|
|
|
+ weekColor:false,
|
|
|
+ monthColor:false,
|
|
|
+ quarterColor:true,
|
|
|
+ yearColor:false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ year(){
|
|
|
+ this.state.releaseDate[0] = undefined;//开始时间清零
|
|
|
+ this.state.releaseDate[1] = undefined;//结束时间清零
|
|
|
+ this.totalData(3);
|
|
|
+ this.setState({
|
|
|
+ weekColor:false,
|
|
|
+ monthColor:false,
|
|
|
+ quarterColor:false,
|
|
|
+ yearColor:true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ componentWillMount() {
|
|
|
+ this.totalData(0);
|
|
|
+ let times=new Date();
|
|
|
+ let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
|
|
|
+ this.setState({
|
|
|
+ Nowtime:nowTime
|
|
|
+ })
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ const { RangePicker } = DatePicker;
|
|
|
+ let departmentArr = this.state.departmentArr || [];
|
|
|
+ return(
|
|
|
+ <div className='set-content'>
|
|
|
+ <p style={{fontSize:'20px',marginBottom:'10px'}}>客户资料填写统计</p>
|
|
|
+ <div className="clearfix">
|
|
|
+ <Button type="primary" onClick={this.tabExel} style={{float:'right'}}>导出到表格</Button>
|
|
|
+ <span style={{fontSize:'16px'}}>部门机构 : </span>
|
|
|
+ <Select placeholder="选择部门"
|
|
|
+ style={{ width:'200px',marginRight:'10px' }}
|
|
|
+ value={this.state.superId}
|
|
|
+ onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
|
|
|
+ {this.state.contactsOption}
|
|
|
+ </Select>
|
|
|
+
|
|
|
+ <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
|
|
|
+ <Button onClick={this.reset}>重置</Button>
|
|
|
+ </div>
|
|
|
+ <div id='daochu1'>
|
|
|
+ <div className="surfaceTitle">
|
|
|
+ <span>客户资料填写统计表</span>
|
|
|
+ </div>
|
|
|
+ <div className="patent-table">
|
|
|
+ <div className="scroll">
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <Table columns={this.state.columns}
|
|
|
+ dataSource={this.state.dataSource}
|
|
|
+ bordered
|
|
|
+ pagination={false}
|
|
|
+ />
|
|
|
+ </Spin>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+export default DiurnalStatisticsOne;
|