index.jsx 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import moment from 'moment';
  5. import '@/manageCenter/financialManage/distribute/public.less';
  6. import { Button, Spin, DatePicker, Radio, message, Icon } from 'antd';
  7. import { getToday, ShowModal } from '@/tools';
  8. import ShowModalDiv from "@/showModal.jsx";
  9. import './index.less';
  10. const RadioButton = Radio.Button;
  11. const RadioGroup = Radio.Group;
  12. const { RangePicker } = DatePicker
  13. const Outbound = React.createClass({
  14. getInitialState() {
  15. return {
  16. status: 1,
  17. releaseDate: getToday(1),
  18. dataList: [],
  19. htmlMenus: [],
  20. }
  21. },
  22. componentWillMount() {
  23. this.loadData();
  24. this.mainMenu();
  25. },
  26. mainMenu() {
  27. $.ajax({
  28. method: "get",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + "/api/admin/selectNavList",
  32. data: {},
  33. success: function (data) {
  34. if (!data.data) {
  35. if (data.error && data.error.length) {
  36. message.warning(data.error[0].message);
  37. return;
  38. }
  39. }
  40. let menu = data.data;
  41. this.setState({
  42. htmlMenus: menu,
  43. });
  44. }.bind(this),
  45. }).always(
  46. function (data) {
  47. this.setState({
  48. loading: false,
  49. });
  50. }.bind(this)
  51. );
  52. },
  53. loadData() {
  54. const { releaseDate } = this.state
  55. this.setState({
  56. loading: true,
  57. });
  58. $.ajax({
  59. method: "get",
  60. dataType: "json",
  61. crossDomain: false,
  62. url: globalConfig.context + "/api/admin/statistics/salesTeam",
  63. data: {
  64. startTime: releaseDate[0],
  65. endTime: releaseDate[1],
  66. },
  67. success: function (data) {
  68. ShowModal(this);
  69. this.setState({
  70. loading: false,
  71. });
  72. if (data.error && data.error.length === 0) {
  73. this.setState({
  74. dataList: data.data
  75. })
  76. } else {
  77. message.warning(data.error[0].message);
  78. }
  79. }.bind(this),
  80. }).always(
  81. function () {
  82. this.setState({
  83. loading: false,
  84. });
  85. }.bind(this)
  86. );
  87. },
  88. clean() {
  89. this.setState({
  90. loading: true,
  91. });
  92. $.ajax({
  93. method: "get",
  94. dataType: "json",
  95. crossDomain: false,
  96. url: globalConfig.context + "/api/admin/statistics/salesTeam/clean",
  97. success: function (data) {
  98. if (data.error && data.error.length === 0) {
  99. ShowModal(this);
  100. this.setState({
  101. loading: false,
  102. });
  103. this.loadData();
  104. } else {
  105. message.warning(data.error[0].message);
  106. }
  107. }.bind(this),
  108. }).always(
  109. function () {
  110. this.setState({
  111. loading: false,
  112. });
  113. }.bind(this)
  114. );
  115. },
  116. search() {
  117. this.loadData();
  118. },
  119. reset() {
  120. this.state.releaseDate = []
  121. this.loadData();
  122. },
  123. getNewUrl(url, cd) {
  124. const { htmlMenus = [] } = this.state
  125. let id = ''
  126. htmlMenus.map(function (item) {
  127. if (item.url == url) {
  128. id = item.id;
  129. }
  130. });
  131. return `${url}?rid=${id}#${cd}`
  132. },
  133. isTime(second) {
  134. let time = "0秒"
  135. if (second > 3600) {
  136. time = moment.utc(second * 1000).format('h小时m分s秒')
  137. } else if (second > 60) {
  138. time = moment.utc(second * 1000).format('m分s秒')
  139. } else if (second > 0) {
  140. time = moment.utc(second * 1000).format('s秒')
  141. }
  142. return time
  143. },
  144. setParametersInCookies(params) {
  145. for (let paramName in params) {
  146. if (params.hasOwnProperty(paramName)) {
  147. let paramValue = params[paramName];
  148. let expires = "";
  149. let now = new Date();
  150. let date = new Date(now.getTime() + 5 * 1000);
  151. expires = "; expires=" + date.toUTCString();
  152. document.cookie = paramName + "=" + encodeURIComponent(paramValue) + expires + "; path=/";
  153. }
  154. }
  155. },
  156. onOpen(teamId) {
  157. // const url = "outboundDetail"
  158. // this.props.handlekey(url)
  159. const { releaseDate } = this.state
  160. const params = {
  161. teamId,
  162. startTime: releaseDate[0],
  163. endTime: releaseDate[1]
  164. };
  165. this.setParametersInCookies(params)
  166. const url = this.getNewUrl("/admin/customer.html", `outboundDetail`)
  167. window.open(url, '_blank')
  168. },
  169. render() {
  170. const { status, dataList } = this.state
  171. return (
  172. <div className="user-content">
  173. <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
  174. <div className="content-title" style={{ marginBottom: 10 }}>
  175. <span style={{ fontWeight: 900, fontSize: 16 }}>外呼统计</span>
  176. </div>
  177. <div className="user-search">
  178. <RadioGroup value={status}
  179. onChange={e => {
  180. this.setState({
  181. status: e.target.value
  182. })
  183. if (e.target.value == 0) {
  184. this.setState({
  185. releaseDate: []
  186. })
  187. } else {
  188. this.setState({
  189. releaseDate: getToday(e.target.value)
  190. }, () => {
  191. this.loadData()
  192. })
  193. }
  194. }}
  195. >
  196. <RadioButton value={1}>今日</RadioButton>
  197. <RadioButton value={2}>昨日</RadioButton>
  198. <RadioButton value={3}>近7日</RadioButton>
  199. <RadioButton value={4}>近15日</RadioButton>
  200. <RadioButton value={5}>近30日</RadioButton>
  201. <RadioButton value={0}>自定义</RadioButton>
  202. </RadioGroup>
  203. {
  204. status == 0 &&
  205. <span>
  206. <RangePicker
  207. style={{ width: 200, marginLeft: 15 }}
  208. value={[
  209. this.state.releaseDate[0]
  210. ? moment(this.state.releaseDate[0])
  211. : null,
  212. this.state.releaseDate[1]
  213. ? moment(this.state.releaseDate[1])
  214. : null,
  215. ]}
  216. onChange={(data, dataString) => {
  217. this.setState({ releaseDate: dataString })
  218. }}
  219. />
  220. <Button style={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button>
  221. <Button onClick={this.reset}>重置</Button>
  222. </span>
  223. }
  224. <Button style={{ margin: "0 15px" }} type="primary" onClick={this.clean}>刷新</Button>
  225. </div>
  226. <div className="patent-table">
  227. <Spin spinning={this.state.loading}>
  228. <div className='plist'>
  229. {
  230. dataList.map(item =>
  231. <div className='plitems' style={{ background: ["", "#99FFCC", "#FFCC99", "#99CCFF"][item.lvl] }} key={item.id}>
  232. <div className='pleft'>
  233. <div className='round'><Icon type="phone" style={{ fontSize: 40, color: "#fff" }} /></div>
  234. <div>{item.name}</div>
  235. <div>({["", "一级", "二级", "三级"][item.lvl]})</div>
  236. </div>
  237. <div>
  238. <div>
  239. <span>• 团队人数:</span>
  240. <a onClick={this.onOpen.bind(this,item.id)}>
  241. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{item.teamPeopleSum}</span>
  242. </a>
  243. </div>
  244. <div>
  245. <span>• 拨出次数:</span>
  246. <a onClick={this.onOpen.bind(this,item.id)}>
  247. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{item.teamCallSum}</span>
  248. </a>
  249. </div>
  250. <div>
  251. <span>• 接通次数:</span>
  252. <a onClick={this.onOpen.bind(this,item.id)}>
  253. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{item.teamConnectSum}</span>
  254. </a>
  255. </div>
  256. <div>
  257. <span>• 有效次数:</span>
  258. <a onClick={this.onOpen.bind(this,item.id)}>
  259. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{item.teamValidSum}</span>
  260. </a>
  261. </div>
  262. <div>
  263. <span>• 时长:</span>
  264. <a onClick={this.onOpen.bind(this,item.id)}>
  265. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{this.isTime(item.teamCallDurationSum)}</span>
  266. </a>
  267. </div>
  268. </div>
  269. </div>
  270. )
  271. }
  272. </div>
  273. </Spin>
  274. </div>
  275. </div>
  276. );
  277. },
  278. });
  279. export default Outbound;