orderStatistics.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809
  1. import React from 'react';
  2. import { Select, Spin, Input, Table, Button ,DatePicker, Form , Tabs , Switch,message} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './report.less';
  6. import { post,taskStatus,publishStatus } from '../../../dataDic.js';
  7. import moment from 'moment';
  8. const TabPane = Tabs.TabPane;
  9. const DiurnalStatistics = React.createClass({
  10. loadData(timeTypes) {
  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/technicalDepStatistics",
  19. data: {
  20. type:'1',
  21. timeType:this.state.releaseDate[0]?4:timeTypes,
  22. startTime: this.state.releaseDate[0],
  23. endTime: this.state.releaseDate[1],
  24. depId:this.state.superId,//部门机构
  25. taskStatus:this.state.taskStatus,//任务状态
  26. publishStatus:this.state.publishStatus,//公示状态
  27. },
  28. success: function(data) {
  29. let thedata = data.data;
  30. let theArr = [];
  31. if(!thedata) {
  32. if(data.error && data.error.length) {
  33. message.warning(data.error[0].message);
  34. };
  35. thedata = {};
  36. } else {
  37. thedata.map(function(item, index) {
  38. let nub=index+1;
  39. theArr.push({
  40. key: index,
  41. theNumber:false,
  42. nub:nub,
  43. orderDep: item.orderDep,//订单部门
  44. signTotalAmount:item.signTotalAmount,//项目签单金额
  45. signTime:item.signTime,//签单日期
  46. contractNo:item.contractNo,//合同编号
  47. orderRemarks:item.orderRemarks, //订单留言
  48. contacts:item.contacts,//企业联系人
  49. contactMobile:item.contactMobile,//联系人电话
  50. commodityName:item.commodityName,//任务名称
  51. taskDistributionTime:item.taskDistributionTime,//派单时间
  52. dutyDep:item.dutyDep, //任务责任部门
  53. dutyName:item.dutyName,//任务责任人
  54. dutyContactMobile:item.dutyContactMobile,//责任人联系电话
  55. taskStatus:item.taskStatus,//任务状态
  56. finishTime:item.finishTime, //完成时间
  57. taskComment:item.taskComment,//任务说明
  58. publishStatus:item.publishStatus, //公示状态
  59. publishTime:item.publishTime,//公示时间
  60. salesmanName:item.salesmanName, //营销员
  61. orgName:item.orgName,//公司名称
  62. })
  63. })
  64. }
  65. this.setState({
  66. dataSource: theArr,
  67. })
  68. }.bind(this),
  69. }).always(function() {
  70. this.setState({
  71. loading: false
  72. });
  73. }.bind(this));
  74. },
  75. totalData(timeTypes) {
  76. this.setState({
  77. loading: true
  78. });
  79. $.ajax({
  80. method: "get",
  81. dataType: "json",
  82. crossDomain: false,
  83. url: globalConfig.context + "/api/admin/report/sales/countsometimeMarketingStatistics",
  84. data: {
  85. type:'1',
  86. timeType:this.state.releaseDate[0]?4:timeTypes,
  87. startTime: this.state.releaseDate[0],
  88. endTime: this.state.releaseDate[1],
  89. depId:this.state.superId,//部门机构
  90. },
  91. success: function(data) {
  92. let thedata = data.data;
  93. let theArr = [];
  94. if(!thedata) {
  95. if(data.error && data.error.length) {
  96. message.warning(data.error[0].message);
  97. };
  98. thedata = {};
  99. }
  100. this.loadData(timeTypes)
  101. this.selectSuperId();
  102. }.bind(this),
  103. }).always(function() {
  104. this.setState({
  105. loading: false
  106. });
  107. }.bind(this));
  108. },
  109. //时间选择
  110. selTime(value,index){
  111. this.setState({
  112. Dtime:value,
  113. selTime:index
  114. })
  115. },
  116. //获取上级组织
  117. selectSuperId() {
  118. this.state.data = []
  119. $.ajax({
  120. method: "post",
  121. dataType: "json",
  122. crossDomain: false,
  123. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  124. data:{
  125. },
  126. success: function (data) {
  127. let theArr = [];
  128. let theId=[];//用于保存上级组织的ID和名称
  129. let thedata=data.data;
  130. if (!thedata) {
  131. if (data.error && data.error.length) {
  132. message.warning(data.error[0].message);
  133. };
  134. thedata = {};
  135. };
  136. var contactIds=[];
  137. for(var i=0;i<data.data.length;i++){
  138. let theData = data.data[i];
  139. theArr.push(
  140. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  141. );
  142. theId.push(
  143. [theData.id,theData.name]
  144. );
  145. };
  146. this.setState({
  147. SuperArr:thedata,
  148. contactsOption: theArr,
  149. theId: theId,
  150. orderStatusOptions:data.data,
  151. });
  152. }.bind(this),
  153. }).always(function () {
  154. this.setState({
  155. loading: false
  156. });
  157. }.bind(this));
  158. },
  159. //判断浏览器类型
  160. getExplorer() {
  161. var explorer = window.navigator.userAgent;
  162. //ie
  163. if(explorer.indexOf("MSIE") >= 0) {
  164. return 'ie';
  165. }
  166. //firefox
  167. else if(explorer.indexOf("Firefox") >= 0) {
  168. return 'Firefox';
  169. }
  170. //Chrome
  171. else if(explorer.indexOf("Chrome") >= 0) {
  172. return 'Chrome';
  173. }
  174. //Opera
  175. else if(explorer.indexOf("Opera") >= 0) {
  176. return 'Opera';
  177. }
  178. //Safari
  179. else if(explorer.indexOf("Safari") >= 0) {
  180. return 'Safari';
  181. }
  182. },
  183. //导出为exel表格
  184. tabExel() {
  185. var table = document.querySelector('#daochu');
  186. var idTmr;
  187. //debugger;
  188. //整个表格拷贝到EXCEL中
  189. if(this.getExplorer() == 'ie') {
  190. var curTbl = document.getElementById(tableid);
  191. var oXL = new ActiveXObject("Excel.Application");
  192. //创建AX对象excel
  193. var oWB = oXL.Workbooks.Add();
  194. //获取workbook对象
  195. var xlsheet = oWB.Worksheets(1);
  196. //激活当前sheet
  197. var sel = document.body.createTextRange();
  198. sel.moveToElementText(curTbl);
  199. //把表格中的内容移到TextRange中
  200. sel.select();
  201. //全选TextRange中内容
  202. sel.execCommand("Copy");
  203. //复制TextRange中内容
  204. xlsheet.Paste();
  205. //粘贴到活动的EXCEL中
  206. oXL.Visible = true;
  207. //设置excel可见属性
  208. try {
  209. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  210. } catch(e) {
  211. print("Nested catch caught " + e);
  212. } finally {
  213. oWB.SaveAs(fname);
  214. oWB.Close(savechanges = false);
  215. //xls.visible = false;
  216. oXL.Quit();
  217. oXL = null;
  218. //结束excel进程,退出完成
  219. //window.setInterval("Cleanup();",1);
  220. idTmr = window.setInterval("Cleanup();", 1);
  221. }
  222. } else {
  223. this.tableToExcel(table,this.getExplorer());
  224. }
  225. function Cleanup() {
  226. window.clearInterval(idTmr);
  227. CollectGarbage();
  228. }
  229. },
  230. tableToExcel(table,name) {
  231. var uri = 'data:application/vnd.ms-excel;base64,',
  232. 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>',
  233. base64 = function(s) {
  234. return window.btoa(unescape(encodeURIComponent(s)))
  235. },
  236. format = function(s, c) {
  237. return s.replace(/{(\w+)}/g,
  238. function(m, p) {
  239. return c[p];
  240. })
  241. }
  242. if(!table.nodeType) table = document.getElementById(table);
  243. var ctx = {
  244. worksheet: name || 'Worksheet',
  245. table: table.innerHTML
  246. };
  247. window.location.href = uri + base64(format(template, ctx))
  248. },
  249. getInitialState() {
  250. return {
  251. releaseDate: [],
  252. selectedRowKeys: [],
  253. selectedRows: [],
  254. loading: false,
  255. visible: false,
  256. showDesc: false,
  257. timeState:false,
  258. weekColor:true,
  259. monthColor:false,
  260. quarterColor:false,
  261. yearColor:false,
  262. Dtime:undefined,
  263. selTime:'',
  264. columns: [
  265. {
  266. title: '序号',
  267. dataIndex: 'nub',
  268. width:50,
  269. key: 'nub',
  270. fixed:false,
  271. render:(text,record)=>{
  272. if(!record.theNumber){
  273. return text
  274. }else{
  275. return {
  276. children: text,
  277. props: {
  278. colSpan:0
  279. },
  280. }
  281. }
  282. }
  283. },
  284. {
  285. title: '公司名称',
  286. dataIndex: 'orgName',
  287. key: 'orgName',
  288. width:100,
  289. fixed:false,
  290. render:(text,record)=>{
  291. if(!record.theNumber){
  292. return text//&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  293. }else{
  294. return {
  295. children: text,
  296. props: {
  297. colSpan:3
  298. },
  299. }
  300. }
  301. }
  302. }, {
  303. title: '订单部门',
  304. fixed:false,
  305. width:100,
  306. dataIndex: 'orderDep',
  307. key: 'orderDep',
  308. render:(text,record)=>{
  309. if(!record.theNumber){
  310. return text
  311. }else{
  312. return {
  313. children: text,
  314. props: {
  315. colSpan:0
  316. },
  317. }
  318. }
  319. }
  320. },
  321. {
  322. title: '项目签单金额',
  323. fixed:false,
  324. dataIndex: 'signTotalAmount',
  325. key: 'signTotalAmount',
  326. sorter: (a, b) => a.signTotalAmount - b.signTotalAmount,
  327. render:(text,record)=>{
  328. if(!record.theNumber){
  329. return text
  330. }else{
  331. return {
  332. children: text,
  333. props: {
  334. colSpan:1
  335. },
  336. }
  337. }
  338. }
  339. }, {
  340. title: '签单日期',
  341. fixed:false,
  342. width:50,
  343. dataIndex: 'signTime',
  344. key: 'signTime',
  345. render:(text,record)=>{
  346. if(!record.theNumber){
  347. return text
  348. }else{
  349. return {
  350. children: text,
  351. props: {
  352. colSpan:0
  353. },
  354. }
  355. }
  356. }
  357. }, {
  358. title: '合同编号',
  359. fixed:false,
  360. dataIndex: 'contractNo',
  361. key: 'contractNo',
  362. render:(text,record)=>{
  363. if(!record.theNumber){
  364. return text
  365. }else{
  366. return {
  367. children: text,
  368. props: {
  369. colSpan:0
  370. },
  371. }
  372. }
  373. }
  374. },{
  375. title: '订单留言',
  376. fixed:false,
  377. width:200,
  378. dataIndex: 'orderRemarks',
  379. key: 'orderRemarks',
  380. render:(text,record)=>{
  381. if(!record.theNumber){
  382. return text
  383. }else{
  384. return {
  385. children: text,
  386. props: {
  387. colSpan:0
  388. },
  389. }
  390. }
  391. }
  392. },{
  393. title: '企业联系人',
  394. fixed:false,
  395. dataIndex: 'contacts',
  396. key: 'contacts',
  397. render:(text,record)=>{
  398. if(!record.theNumber){
  399. return text
  400. }else{
  401. return {
  402. children: text,
  403. props: {
  404. colSpan:0
  405. },
  406. }
  407. }
  408. }
  409. },{
  410. title: '联系人电话',
  411. fixed:false,
  412. dataIndex: 'contactMobile',
  413. key: 'contactMobile',
  414. render:(text,record)=>{
  415. if(!record.theNumber){
  416. return text
  417. }else{
  418. return {
  419. children: text,
  420. props: {
  421. colSpan:0
  422. },
  423. }
  424. }
  425. }
  426. },{
  427. title: '任务名称',
  428. fixed:false,
  429. dataIndex: 'commodityName',
  430. key: 'commodityName',
  431. render:(text,record)=>{
  432. if(!record.theNumber){
  433. return text
  434. }else{
  435. return {
  436. children: text,
  437. props: {
  438. colSpan:0
  439. },
  440. }
  441. }
  442. }
  443. },{
  444. title: '派单时间',
  445. fixed:false,
  446. dataIndex: 'taskDistributionTime',
  447. key: 'taskDistributionTime',
  448. render:(text,record)=>{
  449. if(!record.theNumber){
  450. return text
  451. }else{
  452. return {
  453. children: text,
  454. props: {
  455. colSpan:0
  456. },
  457. }
  458. }
  459. }
  460. },{
  461. title: '部门',
  462. fixed:false,
  463. dataIndex: 'dutyDep',
  464. key: 'dutyDep',
  465. render:(text,record)=>{
  466. if(!record.theNumber){
  467. return text
  468. }else{
  469. return {
  470. children: text,
  471. props: {
  472. colSpan:0
  473. },
  474. }
  475. }
  476. }
  477. },{
  478. title: '负责人',
  479. fixed:false,
  480. dataIndex: 'dutyName',
  481. key: 'dutyName',
  482. render:(text,record)=>{
  483. if(!record.theNumber){
  484. return text
  485. }else{
  486. return {
  487. children: text,
  488. props: {
  489. colSpan:0
  490. },
  491. }
  492. }
  493. }
  494. },{
  495. title: '负责人电话',
  496. fixed:false,
  497. dataIndex: 'dutyContactMobile',
  498. key: 'dutyContactMobile',
  499. render:(text,record)=>{
  500. if(!record.theNumber){
  501. return text
  502. }else{
  503. return {
  504. children: text,
  505. props: {
  506. colSpan:0
  507. },
  508. }
  509. }
  510. }
  511. },{
  512. title: '任务状态',
  513. fixed:false,
  514. dataIndex: 'taskStatus',
  515. key: 'taskStatus',
  516. render:(text,record)=>{
  517. if(!record.theNumber){
  518. return text
  519. }else{
  520. return {
  521. children: text,
  522. props: {
  523. colSpan:0
  524. },
  525. }
  526. }
  527. }
  528. },{
  529. title: '项目完成时间',
  530. fixed:false,
  531. dataIndex: 'finishTime',
  532. key: 'finishTime',
  533. render:(text,record)=>{
  534. if(!record.theNumber){
  535. return text
  536. }else{
  537. return {
  538. children: text,
  539. props: {
  540. colSpan:0
  541. },
  542. }
  543. }
  544. }
  545. },{
  546. title: '任务说明',
  547. fixed:false,
  548. width:200,
  549. dataIndex: 'taskComment',
  550. key: 'taskComment',
  551. render:(text,record)=>{
  552. if(!record.theNumber){
  553. return text
  554. }else{
  555. return {
  556. children: text,
  557. props: {
  558. colSpan:0
  559. },
  560. }
  561. }
  562. }
  563. },{
  564. title: '公示状态',
  565. fixed:false,
  566. dataIndex: 'publishStatus',
  567. key: 'publishStatus',
  568. render:(text,record)=>{
  569. if(!record.theNumber){
  570. return text
  571. }else{
  572. return {
  573. children: text,
  574. props: {
  575. colSpan:0
  576. },
  577. }
  578. }
  579. }
  580. },{
  581. title: '公示时间',
  582. fixed:false,
  583. dataIndex: 'publishTime',
  584. key: 'publishTime',
  585. render:(text,record)=>{
  586. if(!record.theNumber){
  587. return text
  588. }else{
  589. return {
  590. children: text,
  591. props: {
  592. colSpan:0
  593. },
  594. }
  595. }
  596. }
  597. },
  598. {
  599. title: '营销员',
  600. fixed:false,
  601. dataIndex: 'salesmanName',
  602. key: 'salesmanName',
  603. render:(text,record)=>{
  604. if(!record.theNumber){
  605. return text
  606. }else{
  607. return {
  608. children: text,
  609. props: {
  610. colSpan:1
  611. },
  612. }
  613. }
  614. }
  615. }
  616. ],
  617. dataSource: [],
  618. };
  619. },
  620. search() {
  621. this.loadData(0)
  622. },
  623. reset() {
  624. this.state.superId = undefined;//部门机构清零
  625. this.loadData(0)
  626. this.setState({
  627. order:"false",
  628. weekColor:true,
  629. monthColor:false,
  630. quarterColor:false,
  631. yearColor:false
  632. })
  633. },
  634. week(){
  635. this.state.releaseDate[0] = undefined;//开始时间清零
  636. this.state.releaseDate[1] = undefined;//结束时间清零
  637. this.loadData(0);
  638. this.setState({
  639. weekColor:true,
  640. monthColor:false,
  641. quarterColor:false,
  642. yearColor:false
  643. })
  644. },
  645. month(){
  646. this.state.releaseDate[0] = undefined;//开始时间清零
  647. this.state.releaseDate[1] = undefined;//结束时间清零
  648. this.loadData(1);
  649. this.setState({
  650. weekColor:false,
  651. monthColor:true,
  652. quarterColor:false,
  653. yearColor:false
  654. })
  655. },
  656. quarter(){
  657. this.state.releaseDate[0] = undefined;//开始时间清零
  658. this.state.releaseDate[1] = undefined;//结束时间清零
  659. this.loadData(2);
  660. this.setState({
  661. weekColor:false,
  662. monthColor:false,
  663. quarterColor:true,
  664. yearColor:false
  665. })
  666. },
  667. year(){
  668. this.state.releaseDate[0] = undefined;//开始时间清零
  669. this.state.releaseDate[1] = undefined;//结束时间清零
  670. this.loadData(3);
  671. this.setState({
  672. weekColor:false,
  673. monthColor:false,
  674. quarterColor:false,
  675. yearColor:true
  676. })
  677. },
  678. //重构排序
  679. tabChange(pagination,filter,sorter){
  680. console.log(pagination)
  681. console.log(sorter)
  682. },
  683. componentWillMount() {
  684. //this.loadData();
  685. this.totalData(0);
  686. let times=new Date();
  687. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  688. this.setState({
  689. Nowtime:nowTime
  690. })
  691. },
  692. render() {
  693. const { RangePicker } = DatePicker;
  694. let departmentArr = this.state.departmentArr || [];
  695. return(
  696. <div className='set-content'>
  697. <p style={{fontSize:'20px',marginBottom:'10px'}}>订单统计报表</p>
  698. <div className="clearfix">
  699. <Button type="primary" onClick={this.tabExel} style={{ float:'right' }}>导出到表格</Button>
  700. <span style={{fontSize:'16px'}}>部门机构 : </span>
  701. <Select placeholder="选择部门"
  702. style={{ width:'200px',marginRight:'10px' }}
  703. value={this.state.superId}
  704. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  705. {this.state.contactsOption}
  706. </Select>
  707. <Select placeholder="任务状态"
  708. style={{ width: 150 ,marginRight:'10px'}}
  709. value={this.state.taskStatus}
  710. onChange={(e) => { this.setState({ taskStatus: e }) }}>
  711. {
  712. taskStatus.map(function (item) {
  713. return <Select.Option key={item.value} >{item.key}</Select.Option>
  714. })
  715. }
  716. </Select>
  717. <Select placeholder="公示状态"
  718. style={{ width: 150 ,marginRight:'10px'}}
  719. value={this.state.publishStatus}
  720. onChange={(e) => { this.setState({ publishStatus: e }) }}>
  721. {
  722. publishStatus.map(function (item) {
  723. return <Select.Option key={item.value} >{item.key}</Select.Option>
  724. })
  725. }
  726. </Select>
  727. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  728. <Button onClick={this.reset}>重置</Button>
  729. <div className="clearfix" style={{marginTop:"10px"}}>
  730. <Button onClick={this.week} style={{marginRight:'5px'}} type={this.state.weekColor?"primary":''}>本周</Button>
  731. <Button onClick={this.month} style={{marginRight:'5px'}} type={this.state.monthColor?"primary":''}>本月</Button>
  732. <Button onClick={this.quarter} style={{marginRight:'5px'}} type={this.state.quarterColor?"primary":''}>本季</Button>
  733. <Button onClick={this.year} style={{marginRight:'5px'}} type={this.state.yearColor?"primary":''}>本年</Button>
  734. <span className="titleTime" style={{marginRight:'5px',marginTop:"0px"}}>起止时间:</span>
  735. <RangePicker style={{marginRight:'5px',marginTop:"0px"}}
  736. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  737. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  738. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  739. </div>
  740. </div>
  741. <div id='daochu'>
  742. <div className="surfaceTitle">
  743. <span style={{marginTop:"10px"}}>订单统计报表</span>
  744. </div>
  745. <div className="patent-table" id='daochu'>
  746. <div className="scroll">
  747. <Spin spinning={this.state.loading}>
  748. <Table columns={this.state.columns}
  749. dataSource={this.state.dataSource}
  750. //scroll={{ x: 600,y:500}}
  751. bordered
  752. onChange={this.tabChange}
  753. pagination={false}
  754. />
  755. </Spin>
  756. </div>
  757. </div>
  758. </div>
  759. </div>
  760. )
  761. }
  762. });
  763. export default DiurnalStatistics;