zxs.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  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 } from 'antd';
  7. import { getToday, ShowModal } from '@/tools';
  8. import ShowModalDiv from "@/showModal.jsx";
  9. import './index.less';
  10. import ReactEcharts from 'echarts-for-react/lib/core';
  11. import echarts from 'echarts/lib/echarts';
  12. import 'echarts/lib/chart/line';
  13. import 'echarts/lib/component/legend';
  14. import 'echarts/lib/component/title';
  15. import 'echarts/lib/component/tooltip';
  16. import 'echarts/lib/component/toolbox';
  17. import 'echarts/lib/component/grid';
  18. const RadioButton = Radio.Button;
  19. const RadioGroup = Radio.Group;
  20. const { RangePicker } = DatePicker
  21. const Statistics = React.createClass({
  22. getInitialState() {
  23. return {
  24. status: 1,
  25. releaseDate: getToday(1),
  26. info: {},
  27. data: {},
  28. htmlMenus: [],
  29. }
  30. },
  31. componentWillMount() {
  32. this.loadData();
  33. this.getData();
  34. this.mainMenu();
  35. },
  36. mainMenu() {
  37. $.ajax({
  38. method: "get",
  39. dataType: "json",
  40. crossDomain: false,
  41. url: globalConfig.context + "/api/admin/selectNavList",
  42. data: {},
  43. success: function (data) {
  44. if (!data.data) {
  45. if (data.error && data.error.length) {
  46. message.warning(data.error[0].message);
  47. return;
  48. }
  49. }
  50. let menu = data.data;
  51. this.setState({
  52. htmlMenus: menu,
  53. });
  54. }.bind(this),
  55. }).always(
  56. function (data) {
  57. this.setState({
  58. loading: false,
  59. });
  60. }.bind(this)
  61. );
  62. },
  63. loadData() {
  64. const { releaseDate } = this.state
  65. this.setState({
  66. loading: true,
  67. });
  68. $.ajax({
  69. method: "get",
  70. dataType: "json",
  71. crossDomain: false,
  72. url: globalConfig.context + "/api/admin/statistics/consultant/info",
  73. data: {
  74. startTime: releaseDate[0],
  75. endTime: releaseDate[1],
  76. },
  77. success: function (data) {
  78. ShowModal(this);
  79. this.setState({
  80. loading: false,
  81. });
  82. if (data.error && data.error.length === 0) {
  83. this.setState({
  84. info: data.data
  85. })
  86. } else {
  87. message.warning(data.error[0].message);
  88. }
  89. }.bind(this),
  90. }).always(
  91. function () {
  92. this.setState({
  93. loading: false,
  94. });
  95. }.bind(this)
  96. );
  97. },
  98. getData() {
  99. $.ajax({
  100. method: "get",
  101. dataType: "json",
  102. crossDomain: false,
  103. url: globalConfig.context + "/api/admin/statistics/consultant/lists",
  104. success: function (data) {
  105. if (data.error && data.error.length === 0) {
  106. this.setState({
  107. data: data.data,
  108. })
  109. } else {
  110. message.warning(data.error[0].message);
  111. }
  112. }.bind(this),
  113. }).always(
  114. function () {
  115. this.setState({
  116. loading: false,
  117. });
  118. }.bind(this)
  119. );
  120. },
  121. search() {
  122. this.loadData();
  123. },
  124. reset() {
  125. this.state.releaseDate = []
  126. this.loadData();
  127. },
  128. getNewUrl(url, cd) {
  129. const { htmlMenus = [] } = this.state
  130. let id = ''
  131. htmlMenus.map(function (item) {
  132. if (item.url == url) {
  133. id = item.id;
  134. }
  135. });
  136. return `${url}?rid=${id}#${cd}`
  137. },
  138. render() {
  139. const { status, info, data } = this.state
  140. let array = window.adminData.shiroList.split(",");
  141. const list = [
  142. { color: "#99FFFF", title: "总项目数:", sum: info.projectCount, tit: "项目数", number: info.rangeProjectCount, url: this.getNewUrl("/admin/project.html", "myTaskZxs"), type: '' },
  143. { color: "#FFFFCC", title: "总进行中数:", sum: info.inProgress, tit: "进行中", number: info.rangeInProgress, url: this.getNewUrl("/admin/project.html", "myTaskZxs"), type: '1' },
  144. { color: "#FFCCCC", title: "总完成数:", sum: info.complete, tit: "完成数", number: info.rangeComplete, url: this.getNewUrl("/admin/project.html", "myTaskZxs"), type: '4' },
  145. { color: "#99CCFF", title: "总未启动数:", sum: info.notStarted, tit: "未启动", number: info.rangeNotStarted, url: this.getNewUrl("/admin/project.html", "myTaskZxs"), type: '0' },
  146. { color: "#99FFCC", title: "总暂停数:", sum: info.stop, tit: "暂停数", number: info.rangeStop, url: this.getNewUrl("/admin/project.html", "myTaskZxs"), type: '29' },
  147. { color: "#CC99CC", title: "总公出数:", sum: info.countPublicRelease, tit: "公出数", number: info.rangeCountPublicRelease, url: '', type: '' },
  148. { color: "#99CCCC", title: "总协单数:", sum: info.countAssist, tit: "协单数", number: info.rangeCountAssist, url: '', type: '' },
  149. {
  150. color: "#FFCC99", title: "待紧急处理事项",
  151. list: [
  152. { key: "待变更订单:", value: info.countChange, url: this.getNewUrl('/admin/project.html', array.includes("9") ? "contractChangeJsjl" : "contractChangeJsy"), },
  153. { key: "待成本付款处理:", value: info.orderPayment, url: '' },]
  154. },
  155. ]
  156. const option = {
  157. title: {
  158. text: ''
  159. },
  160. tooltip: {
  161. trigger: 'axis'
  162. },
  163. legend: {
  164. data: ['项目数', '进行中数', '未发起数', '完成数', '暂停数', '公出数', '协单数',]
  165. },
  166. grid: {
  167. left: '3%',
  168. right: '4%',
  169. bottom: '3%',
  170. containLabel: true
  171. },
  172. toolbox: {
  173. feature: {
  174. saveAsImage: {}
  175. }
  176. },
  177. xAxis: {
  178. type: 'category',
  179. boundaryGap: false,
  180. // axisLabel: {
  181. // interval: 0, // 设置X轴刻度间隔为0
  182. // },
  183. data: data.dates
  184. },
  185. yAxis: {
  186. type: 'value'
  187. },
  188. color: ['#99FFFF', '#cccca3', '#FFCCCC', '#99CCFF', '#99FFCC', '#CC99CC', '#CC99CC', '#99CCCC'],
  189. series: [
  190. {
  191. name: '项目数',
  192. type: 'line',
  193. data: data.projectCountList,
  194. },
  195. {
  196. name: '进行中数',
  197. type: 'line',
  198. data: data.inProgressList,
  199. },
  200. {
  201. name: '未发起数',
  202. type: 'line',
  203. data: data.notStartedList,
  204. },
  205. {
  206. name: '完成数',
  207. type: 'line',
  208. data: data.completeList,
  209. },
  210. {
  211. name: '暂停数',
  212. type: 'line',
  213. data: data.stopList,
  214. },
  215. {
  216. name: '公出数',
  217. type: 'line',
  218. data: data.publicReleaseCountList,
  219. },
  220. {
  221. name: '协单数',
  222. type: 'line',
  223. data: data.assistCountList,
  224. }
  225. ]
  226. }
  227. return (
  228. <div className="user-content">
  229. <ShowModalDiv ShowModal={this.state.showModal}
  230. // seeInfo={() => { this.props.handlekey("normal") }}
  231. />
  232. <div className="content-title" style={{ marginBottom: 10 }}>
  233. <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
  234. </div>
  235. <div className="user-search">
  236. <RadioGroup value={status}
  237. onChange={e => {
  238. this.setState({
  239. status: e.target.value
  240. })
  241. if (e.target.value == 0) {
  242. this.setState({
  243. releaseDate: []
  244. })
  245. } else {
  246. this.setState({
  247. releaseDate: getToday(e.target.value)
  248. }, () => {
  249. this.loadData()
  250. })
  251. }
  252. }}
  253. >
  254. <RadioButton value={1}>今日</RadioButton>
  255. <RadioButton value={2}>昨日</RadioButton>
  256. <RadioButton value={3}>近7日</RadioButton>
  257. <RadioButton value={4}>近15日</RadioButton>
  258. <RadioButton value={5}>近30日</RadioButton>
  259. <RadioButton value={0}>自定义</RadioButton>
  260. </RadioGroup>
  261. {
  262. status == 0 &&
  263. <span>
  264. <RangePicker
  265. style={{ width: 200, marginLeft: 15 }}
  266. value={[
  267. this.state.releaseDate[0]
  268. ? moment(this.state.releaseDate[0])
  269. : null,
  270. this.state.releaseDate[1]
  271. ? moment(this.state.releaseDate[1])
  272. : null,
  273. ]}
  274. onChange={(data, dataString) => {
  275. this.setState({ releaseDate: dataString })
  276. }}
  277. />
  278. <Button style={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button>
  279. <Button onClick={this.reset}>重置</Button>
  280. </span>
  281. }
  282. </div>
  283. <div className="patent-table">
  284. <Spin spinning={this.state.loading}>
  285. <div className='plist'>
  286. {
  287. list.map((item, index) =>
  288. <div className='plitem' style={{ background: item.color }} key={index}>
  289. <div className='plititle'>
  290. <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
  291. {/* <span className='plisum'>{item.sum}</span> */}
  292. <a href={globalConfig.context + item.url}
  293. onClick={() => {
  294. localStorage.setItem('typeZxs', item.type);
  295. }}
  296. >
  297. <span className='plisum'>{item.sum}</span>
  298. </a>
  299. </div>
  300. {
  301. item.title == "待紧急处理事项"
  302. ? <div className='list'>
  303. {
  304. item.list.map((t, i) =>
  305. <div key={i}>
  306. <span>{t.key}</span>
  307. <a href={globalConfig.context + t.url}>
  308. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
  309. </a>
  310. </div>
  311. )
  312. }
  313. </div>
  314. : <div className='count'>
  315. <a href={globalConfig.context + item.url}
  316. onClick={() => {
  317. localStorage.setItem('typeZxs', item.type);
  318. }}
  319. ><div className='plinum'>{item.number}</div></a>
  320. <div className='plitit'>{item.tit}</div>
  321. </div>
  322. }
  323. </div>
  324. )
  325. }
  326. </div>
  327. </Spin>
  328. <ReactEcharts option={option} echarts={echarts} />
  329. </div>
  330. </div>
  331. );
  332. },
  333. });
  334. export default Statistics;