crmCount.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. import React from 'react';
  2. import { Select, Spin, Input, Table, Button ,DatePicker} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './customer.less';
  6. import { post } from '@/dataDic.js';
  7. import moment from 'moment';
  8. const DiurnalStatisticsOne = React.createClass({
  9. loadData(timeTypes,totalArr) {
  10. let total=totalArr;
  11. this.setState({
  12. loading: true
  13. });
  14. $.ajax({
  15. method: "get",
  16. dataType: "json",
  17. crossDomain: false,
  18. url: globalConfig.context + "/api/admin/report/userDataStatistics",
  19. data: {
  20. depId:this.state.superId,//部门机构
  21. },
  22. success: function(data) {
  23. let thedata = data.data;
  24. let theArr = [];
  25. if(!thedata) {
  26. if(data.error && data.error.length) {
  27. message.warning(data.error[0].message);
  28. };
  29. thedata = {};
  30. } else {
  31. thedata.map(function(item, index) {
  32. let nub=index+1;
  33. theArr.push({
  34. key: index,
  35. theNumber:false,
  36. nub:nub,
  37. depName: item.depName,//部门
  38. name:item.name,//员工姓名
  39. signUser:item.signUser,//签单客户数
  40. fullUser:item.fullUser,//资料完善数
  41. dayFullUser:item.dayFullUser,//今日完善数
  42. dayNewUser:item.dayNewUser, //今日新增数
  43. countUser:item.countUser,//私有客户数
  44. signFullUser:item.signFullUser,//签单客户完善数
  45. })
  46. })
  47. }
  48. if(theArr.length){
  49. theArr.push(
  50. {
  51. key:9999999,
  52. theNumber:true,
  53. name:'合计',
  54. signUser:total.signUser,//签单客户数
  55. fullUser:total.fullUser,//资料完善数
  56. dayFullUser:total.dayFullUser,//今日完善数
  57. dayNewUser:total.dayNewUser,//今日新增数
  58. countUser:total.countUser,//私有客户数
  59. signFullUser:total.signFullUser,//签单客户完整数
  60. }
  61. )
  62. }
  63. this.setState({
  64. dataSource: theArr,
  65. })
  66. }.bind(this),
  67. }).always(function() {
  68. this.setState({
  69. loading: false
  70. });
  71. }.bind(this));
  72. },
  73. totalData(timeTypes) {
  74. this.setState({
  75. loading: true
  76. });
  77. $.ajax({
  78. method: "get",
  79. dataType: "json",
  80. crossDomain: false,
  81. url: globalConfig.context + "/api/admin/report/userDataStatisticsCount",
  82. data: {
  83. depId:this.state.superId,//部门机构
  84. },
  85. success: function(data) {
  86. let thedata = data.data;
  87. let theArr = [];
  88. if(!thedata) {
  89. if(data.error && data.error.length) {
  90. message.warning(data.error[0].message);
  91. };
  92. thedata = {};
  93. }
  94. this.loadData(timeTypes,thedata);
  95. this.selectSuperId();
  96. }.bind(this),
  97. }).always(function() {
  98. this.setState({
  99. loading: false
  100. });
  101. }.bind(this));
  102. },
  103. //时间选择
  104. selTime(value,index){
  105. this.setState({
  106. Dtime:value,
  107. selTime:index
  108. })
  109. },
  110. //获取上级组织
  111. selectSuperId() {
  112. this.state.data = []
  113. $.ajax({
  114. method: "post",
  115. dataType: "json",
  116. crossDomain: false,
  117. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  118. data:{
  119. },
  120. success: function (data) {
  121. let theArr = [];
  122. let theId=[];//用于保存上级组织的ID和名称
  123. let thedata=data.data;
  124. if (!thedata) {
  125. if (data.error && data.error.length) {
  126. message.warning(data.error[0].message);
  127. };
  128. thedata = {};
  129. };
  130. var contactIds=[];
  131. for(var i=0;i<data.data.length;i++){
  132. let theData = data.data[i];
  133. theArr.push(
  134. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  135. );
  136. theId.push(
  137. [theData.id,theData.name]
  138. );
  139. };
  140. this.setState({
  141. SuperArr:thedata,
  142. contactsOption: theArr,
  143. theId: theId,
  144. orderStatusOptions:data.data,
  145. });
  146. }.bind(this),
  147. }).always(function () {
  148. this.setState({
  149. loading: false
  150. });
  151. }.bind(this));
  152. },
  153. //判断浏览器类型
  154. getExplorer() {
  155. var explorer = window.navigator.userAgent;
  156. //ie
  157. if(explorer.indexOf("MSIE") >= 0) {
  158. return 'ie';
  159. }
  160. //firefox
  161. else if(explorer.indexOf("Firefox") >= 0) {
  162. return 'Firefox';
  163. }
  164. //Chrome
  165. else if(explorer.indexOf("Chrome") >= 0) {
  166. return 'Chrome';
  167. }
  168. //Opera
  169. else if(explorer.indexOf("Opera") >= 0) {
  170. return 'Opera';
  171. }
  172. //Safari
  173. else if(explorer.indexOf("Safari") >= 0) {
  174. return 'Safari';
  175. }
  176. },
  177. //导出为exel表格
  178. tabExel() {
  179. var table = document.querySelector('#daochu1');
  180. var idTmr;
  181. //debugger;
  182. //整个表格拷贝到EXCEL中
  183. if(this.getExplorer() == 'ie') {
  184. var curTbl = document.getElementById(tableid);
  185. var oXL = new ActiveXObject("Excel.Application");
  186. //创建AX对象excel
  187. var oWB = oXL.Workbooks.Add();
  188. //获取workbook对象
  189. var xlsheet = oWB.Worksheets(1);
  190. //激活当前sheet
  191. var sel = document.body.createTextRange();
  192. sel.moveToElementText(curTbl);
  193. //把表格中的内容移到TextRange中
  194. sel.select();
  195. //全选TextRange中内容
  196. sel.execCommand("Copy");
  197. //复制TextRange中内容
  198. xlsheet.Paste();
  199. //粘贴到活动的EXCEL中
  200. oXL.Visible = true;
  201. //设置excel可见属性
  202. try {
  203. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  204. } catch(e) {
  205. print("Nested catch caught " + e);
  206. } finally {
  207. oWB.SaveAs(fname);
  208. oWB.Close(savechanges = false);
  209. //xls.visible = false;
  210. oXL.Quit();
  211. oXL = null;
  212. //结束excel进程,退出完成
  213. //window.setInterval("Cleanup();",1);
  214. idTmr = window.setInterval("Cleanup();", 1);
  215. }
  216. } else {
  217. this.tableToExcel(table,this.getExplorer());
  218. }
  219. function Cleanup() {
  220. window.clearInterval(idTmr);
  221. CollectGarbage();
  222. }
  223. },
  224. tableToExcel(table,name) {
  225. var uri = 'data:application/vnd.ms-excel;base64,',
  226. 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>',
  227. base64 = function(s) {
  228. return window.btoa(unescape(encodeURIComponent(s)))
  229. },
  230. format = function(s, c) {
  231. return s.replace(/{(\w+)}/g,
  232. function(m, p) {
  233. return c[p];
  234. })
  235. }
  236. if(!table.nodeType) table = document.getElementById(table);
  237. var ctx = {
  238. worksheet: name || 'Worksheet',
  239. table: table.innerHTML
  240. };
  241. window.location.href = uri + base64(format(template, ctx))
  242. },
  243. getInitialState() {
  244. return {
  245. releaseDate: [],
  246. selectedRowKeys: [],
  247. selectedRows: [],
  248. loading: false,
  249. visible: false,
  250. showDesc: false,
  251. timeState:false,
  252. weekColor:true,
  253. monthColor:false,
  254. quarterColor:false,
  255. yearColor:false,
  256. Dtime:undefined,
  257. selTime:'',
  258. columns: [
  259. {
  260. title: '序号',
  261. dataIndex: 'nub',
  262. width:50,
  263. key: 'nub',
  264. fixed:false,
  265. render:(text,record)=>{
  266. if(!record.theNumber){
  267. return text
  268. }else{
  269. return {
  270. children: text,
  271. props: {
  272. colSpan:0
  273. },
  274. }
  275. }
  276. }
  277. },{
  278. title: '姓名',
  279. fixed:false,
  280. dataIndex: 'name',
  281. key: 'name',
  282. render:(text,record)=>{
  283. if(!record.theNumber){
  284. return text
  285. }else{
  286. return {
  287. children: text,
  288. props: {
  289. colSpan:3
  290. },
  291. }
  292. }
  293. }
  294. },
  295. {
  296. title: '部门',
  297. dataIndex: 'depName',
  298. key: 'depName',
  299. fixed:false,
  300. width:300,
  301. render:(text,record)=>{
  302. if(!record.theNumber){
  303. return text //&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  304. }else{
  305. return {
  306. children: text,
  307. props: {
  308. colSpan:0
  309. },
  310. }
  311. }
  312. }
  313. },{
  314. title: '客户总数',
  315. fixed:false,
  316. dataIndex: 'countUser',
  317. key: 'countUser',
  318. render:(text,record)=>{
  319. if(!record.theNumber){
  320. return text
  321. }else{
  322. return {
  323. children: text,
  324. props: {
  325. colSpan:1
  326. },
  327. }
  328. }
  329. }
  330. },
  331. {
  332. title: '今日新增客户数',
  333. fixed:false,
  334. dataIndex: 'dayNewUser',
  335. key: 'dayNewUser',
  336. sorter: (a, b) => a.dayNewUser - b.dayNewUser,
  337. render:(text,record)=>{
  338. if(!record.theNumber){
  339. return text
  340. }else{
  341. return {
  342. children: text,
  343. props: {
  344. colSpan:1
  345. },
  346. }
  347. }
  348. }
  349. },
  350. {
  351. title: '完整客户总数',
  352. fixed:false,
  353. dataIndex: 'fullUser',
  354. key: 'fullUser',
  355. sorter: (a, b) => a.fullUser - b.fullUser,
  356. render:(text,record)=>{
  357. if(!record.theNumber){
  358. return text
  359. }else{
  360. return {
  361. children: text,
  362. props: {
  363. colSpan:1
  364. },
  365. }
  366. }
  367. }
  368. },
  369. {
  370. title: '今日完整客户数',
  371. fixed:false,
  372. dataIndex: 'dayFullUser',
  373. key: 'dayFullUser',
  374. sorter: (a, b) => a.dayFullUser - b.dayFullUser,
  375. render:(text,record)=>{
  376. if(!record.theNumber){
  377. return text
  378. }else{
  379. return {
  380. children: text,
  381. props: {
  382. colSpan:1
  383. },
  384. }
  385. }
  386. }
  387. },
  388. {
  389. title: '签单客户总数',
  390. fixed:false,
  391. dataIndex: 'signUser',
  392. key: 'signUser',
  393. sorter: (a, b) => a.signUser - b.signUser,
  394. render:(text,record)=>{
  395. if(!record.theNumber){
  396. return text
  397. }else{
  398. return {
  399. children: text,
  400. props: {
  401. colSpan:1
  402. },
  403. }
  404. }
  405. }
  406. },
  407. {
  408. title: '签单完整客户数',
  409. fixed:false,
  410. dataIndex: 'signFullUser',
  411. key: 'signFullUser',
  412. sorter: (a, b) => a.signFullUser - b.signFullUser,
  413. render:(text,record)=>{
  414. if(!record.theNumber){
  415. return text
  416. }else{
  417. return {
  418. children: text,
  419. props: {
  420. colSpan:1
  421. },
  422. }
  423. }
  424. }
  425. }
  426. ],
  427. dataSource: [],
  428. };
  429. },
  430. search() {
  431. this.totalData(0)
  432. },
  433. reset() {
  434. this.state.superId = undefined;//部门机构清零
  435. this.totalData(0);
  436. },
  437. week(){
  438. this.state.releaseDate[0] = undefined;//开始时间清零
  439. this.state.releaseDate[1] = undefined;//结束时间清零
  440. this.totalData(0);
  441. this.setState({
  442. weekColor:true,
  443. monthColor:false,
  444. quarterColor:false,
  445. yearColor:false
  446. })
  447. },
  448. month(){
  449. this.state.releaseDate[0] = undefined;//开始时间清零
  450. this.state.releaseDate[1] = undefined;//结束时间清零
  451. this.totalData(1);
  452. this.setState({
  453. weekColor:false,
  454. monthColor:true,
  455. quarterColor:false,
  456. yearColor:false
  457. })
  458. },
  459. quarter(){
  460. this.state.releaseDate[0] = undefined;//开始时间清零
  461. this.state.releaseDate[1] = undefined;//结束时间清零
  462. this.totalData(2);
  463. this.setState({
  464. weekColor:false,
  465. monthColor:false,
  466. quarterColor:true,
  467. yearColor:false
  468. })
  469. },
  470. year(){
  471. this.state.releaseDate[0] = undefined;//开始时间清零
  472. this.state.releaseDate[1] = undefined;//结束时间清零
  473. this.totalData(3);
  474. this.setState({
  475. weekColor:false,
  476. monthColor:false,
  477. quarterColor:false,
  478. yearColor:true
  479. })
  480. },
  481. componentWillMount() {
  482. this.totalData(0);
  483. let times=new Date();
  484. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  485. this.setState({
  486. Nowtime:nowTime
  487. })
  488. },
  489. render() {
  490. const { RangePicker } = DatePicker;
  491. let departmentArr = this.state.departmentArr || [];
  492. return(
  493. <div className='set-content'>
  494. <p style={{fontSize:'20px',marginBottom:'10px'}}>客户资料填写统计</p>
  495. <div className="clearfix">
  496. <Button type="primary" onClick={this.tabExel} style={{float:'right'}}>导出到表格</Button>
  497. <span style={{fontSize:'16px'}}>部门机构 : </span>
  498. <Select placeholder="选择部门"
  499. style={{ width:'200px',marginRight:'10px' }}
  500. value={this.state.superId}
  501. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  502. {this.state.contactsOption}
  503. </Select>
  504. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  505. <Button onClick={this.reset}>重置</Button>
  506. </div>
  507. <div id='daochu1'>
  508. <div className="surfaceTitle">
  509. <span>客户资料填写统计表</span>
  510. </div>
  511. <div className="patent-table">
  512. <div className="scroll">
  513. <Spin spinning={this.state.loading}>
  514. <Table columns={this.state.columns}
  515. dataSource={this.state.dataSource}
  516. bordered
  517. pagination={false}
  518. />
  519. </Spin>
  520. </div>
  521. </div>
  522. </div>
  523. </div>
  524. )
  525. }
  526. });
  527. export default DiurnalStatisticsOne;