achievement.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. import React from 'react';
  2. import { Rate, Icon, message, Row, Col, Radio, Checkbox, Input, InputNumber, Button, Pagination, Spin } from 'antd';
  3. import '../portal.less';
  4. import logoImg from '../../../../image/logo.png';
  5. import searchImg from '../../../../image/search.png';
  6. import demand_ico_5 from '../../../../image/demand_ico_5.png';
  7. import demand_ico_3 from '../../../../image/demand_ico_3.png';
  8. import demand_ico_2 from '../../../../image/demand_ico_2.png';
  9. import demand_ico_1 from '../../../../image/demand_ico_1.png';
  10. import achievement_ico_1 from '../../../../image/achievement_ico_1.png';
  11. import achievement_ico_2 from '../../../../image/achievement_ico_2.png';
  12. import uncertify from '../../../../image/demand_ico_6.png';
  13. import certify from '../../../../image/demand_ico_6_atv.png';
  14. import score_ioc from '../../../../image/score_ioc.png';
  15. import { IndustryObject, getIndustryCategory } from '../../DicIndustryList';
  16. import { achievementCategoryList, transferModeList, maturityList } from '../../dataDic';
  17. import { getAchievementCategory, getTransferMode, getMaturity } from '../../tools';
  18. import ajax from 'jquery/src/ajax/xhr.js'
  19. import $ from 'jquery/src/ajax';
  20. const Content = React.createClass({
  21. loadData(pageNo) {
  22. this.setState({
  23. loading: true
  24. });
  25. switch (this.state.transferPrice) {
  26. case 1:
  27. this.state.transferPriceLower = 1;
  28. this.state.transferPriceUpper = 10;
  29. break;
  30. case 2:
  31. this.state.transferPriceLower = 10;
  32. this.state.transferPriceUpper = 50;
  33. break;
  34. case 3:
  35. this.state.transferPriceLower = 50;
  36. this.state.transferPriceUpper = 100;
  37. break;
  38. case 4:
  39. this.state.transferPriceLower = 100;
  40. this.state.transferPriceUpper = 500;
  41. break;
  42. case 5:
  43. this.state.transferPriceLower = 500;
  44. this.state.transferPriceUpper = 1000;
  45. break;
  46. case 6:
  47. this.state.bargainingMode = 0;
  48. break;
  49. case 999:
  50. this.state.transferPriceLower = null;
  51. this.state.transferPriceUpper = null;
  52. this.state.bargainingMode = null;
  53. break;
  54. }
  55. $.ajax({
  56. method: "get",
  57. dataType: "json",
  58. url: globalConfig.context + "/portal/search/achievementList",
  59. data: {
  60. pageNo: pageNo || 1,
  61. pageSize: this.state.pagination.pageSize,
  62. category: this.state.category == 999 ? null : this.state.category, //技术类型
  63. keyword: this.state.keyword,
  64. maturity: this.state.maturity == 999 ? null : this.state.maturity, //成熟度
  65. transferPriceLower: this.state.transferPriceLower, //交易金额下限
  66. transferPriceUpper: this.state.transferPriceUpper, //交易金额上限
  67. bargainingMode: this.state.bargainingMode,
  68. transferMode: this.state.transferMode == 999 ? null : this.state.transferMode, //交易方式
  69. fieldA: this.state.fieldA, //技术领域(行业类别A)
  70. fieldB: this.state.fieldB == 999 ? null : this.state.fieldB, //技术领域(行业类别B)
  71. },
  72. success: function (data) {
  73. let theArr = [];
  74. if (!data.data || !data.data.list) {
  75. if (data.error && data.error.length) {
  76. message.warning(data.error[0].message);
  77. };
  78. } else {
  79. for (let i = 0; i < data.data.list.length; i++) {
  80. let thisdata = data.data.list[i];
  81. theArr.push({
  82. key: i,
  83. id: thisdata.id,
  84. serialNumber: thisdata.serialNumber,
  85. keyword: thisdata.keyword,
  86. level: thisdata.level,
  87. name: thisdata.name,
  88. dataCategory: thisdata.dataCategory,
  89. category: thisdata.category,
  90. ownerName: thisdata.ownerName,
  91. releaseDate: thisdata.releaseDate,
  92. ownerType: thisdata.ownerType,
  93. fieldA: thisdata.fieldA,
  94. fieldB: thisdata.fieldB,
  95. field: [thisdata.fieldA, thisdata.fieldB],
  96. transferPrice: thisdata.transferPrice,
  97. maturity: thisdata.maturity,
  98. transferMode: thisdata.transferMode,
  99. releaseDateFormattedDate: thisdata.releaseDateFormattedDate
  100. });
  101. };
  102. };
  103. this.state.pagination.pageNo = data.data.pageNo;
  104. this.state.pagination.total = data.data.totalCount;
  105. this.setState({
  106. dataSource: theArr,
  107. pagination: this.state.pagination
  108. });
  109. }.bind(this),
  110. }).done(function (data) {
  111. if (data.error && data.error.length) {
  112. message.warning(data.error[0].message);
  113. };
  114. this.setState({
  115. loading: false
  116. });
  117. this.state.bargainingMode = 1;
  118. }.bind(this));
  119. },
  120. getInitialState() {
  121. return {
  122. loading: false,
  123. showDesc: false,
  124. industryRadioB: [],
  125. transferPrice: 999,
  126. pagination: {
  127. pageNo: 1,
  128. pageSize: 12,
  129. total: 0
  130. },
  131. dataSource: []
  132. };
  133. },
  134. componentWillMount() {
  135. let theArr = [];
  136. let theCategoryArr = [], theTransferModeArr = [], theMaturityArr = [];
  137. //行业分类单选项
  138. theArr.push(
  139. <Radio.Button key={999} value={999}>不限</Radio.Button>
  140. );
  141. IndustryObject.map(function (item) {
  142. theArr.push(
  143. <Radio.Button key={item.value} value={item.value}>{item.label}</Radio.Button>
  144. );
  145. });
  146. //技术类型单选项目
  147. theCategoryArr.push(
  148. <Radio.Button key={999} value={999}>不限</Radio.Button>
  149. );
  150. achievementCategoryList.map(function (item) {
  151. theCategoryArr.push(
  152. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  153. );
  154. });
  155. //交易方式单选项目
  156. theTransferModeArr.push(
  157. <Radio.Button key={999} value={999}>不限</Radio.Button>
  158. );
  159. transferModeList.map(function (item) {
  160. theTransferModeArr.push(
  161. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  162. );
  163. });
  164. //成熟度单选项目
  165. theMaturityArr.push(
  166. <Radio.Button key={999} value={999}>不限</Radio.Button>
  167. );
  168. maturityList.map(function (item) {
  169. theMaturityArr.push(
  170. <Radio.Button key={item.value} value={item.value}>{item.key}</Radio.Button>
  171. );
  172. });
  173. this.state.industryRadioA = theArr;
  174. this.state.categoryRadio = theCategoryArr;
  175. this.state.transferModeRadio = theTransferModeArr;
  176. this.state.maturityRadio = theMaturityArr;
  177. if (window.location.search) {
  178. let theUrl = window.location.search
  179. this.state.keyword = theUrl.substring(1, theUrl.length);
  180. };
  181. this.loadData();
  182. },
  183. industryChange(e) {
  184. let theArr = [];
  185. if (e.target.value !== 999) {
  186. theArr.push(
  187. <Radio.Button key={999} value={999}>不限</Radio.Button>
  188. );
  189. IndustryObject.map(function (item1) {
  190. if (item1.value == e.target.value) {
  191. item1.children.map(function (item2) {
  192. theArr.push(
  193. <Radio.Button key={item2.value} value={item2.value}>{item2.label}</Radio.Button>
  194. );
  195. });
  196. }
  197. });
  198. this.state.fieldA = e.target.value;
  199. } else {
  200. this.state.fieldA = null;
  201. this.state.fieldB = null;
  202. };
  203. this.loadData();
  204. this.setState({ industryRadioB: theArr });
  205. },
  206. tableRowClick(record, index) {
  207. window.open(globalConfig.context + '/portal/detail/achievementDetail.html?id=' + record.id + '&type=' + record.ownerType);
  208. },
  209. closeDesc(e) {
  210. this.setState({
  211. showDesc: e
  212. });
  213. },
  214. render() {
  215. const { pageNo, pageSize, total } = this.state.pagination;
  216. const _me = this;
  217. return (
  218. <div className="portal-body">
  219. <div className="portal-content">
  220. <Row className="search-criteria">
  221. <Col className="search-title" span={2}>
  222. <span>行业分类</span>
  223. </Col>
  224. <Col className="search-select" span={22}>
  225. <Radio.Group defaultValue={999} onChange={this.industryChange}>
  226. {this.state.industryRadioA}
  227. </Radio.Group>
  228. </Col>
  229. </Row>
  230. {this.state.industryRadioB.length > 1 ? <Row className="search-criteria">
  231. <Col className="search-title" span={2}>
  232. <span>行业子分类</span>
  233. </Col>
  234. <Col className="search-select" span={22}>
  235. <Radio.Group defaultValue={999} onChange={(e) => { this.state.fieldB = e.target.value; this.loadData() }}>
  236. {this.state.industryRadioB}
  237. </Radio.Group>
  238. </Col>
  239. </Row> : <div></div>}
  240. <Row className="search-criteria">
  241. <Col className="search-title" span={2}>
  242. <span>交易价格</span>
  243. </Col>
  244. <Col className="search-select" span={13}>
  245. <Radio.Group value={this.state.transferPrice}
  246. onChange={(e) => {
  247. this.setState({
  248. transferPrice: e.target.value
  249. });
  250. this.state.transferPrice = e.target.value;
  251. this.loadData();
  252. }}>
  253. <Radio.Button value={999}>不限</Radio.Button>
  254. <Radio.Button value={1}>1-10万元</Radio.Button>
  255. <Radio.Button value={2}>10-50万元</Radio.Button>
  256. <Radio.Button value={3}>50-100万元</Radio.Button>
  257. <Radio.Button value={4}>100-500万元</Radio.Button>
  258. <Radio.Button value={5}>500-1000万元</Radio.Button>
  259. <Radio.Button value={6}>面议</Radio.Button>
  260. </Radio.Group>
  261. </Col>
  262. <Col span={9}>
  263. <Checkbox checked={!this.state.transferPrice} onChange={(e) => { if (e.target.checked) { this.setState({ transferPrice: null }) } }}>自定义金额</Checkbox>
  264. <InputNumber style={{ width: 80 }}
  265. disabled={Boolean(this.state.transferPrice)}
  266. onChange={(e) => { this.state.transferPriceLower = e; }} />
  267. <span> 到 </span>
  268. <InputNumber style={{ width: 80 }}
  269. disabled={Boolean(this.state.transferPrice)}
  270. onChange={(e) => { this.state.transferPriceUpper = e; }} />
  271. <span> 万元</span>
  272. <Button style={{ marginLeft: '20px' }} disabled={Boolean(this.state.transferPrice)} onClick={() => { this.loadData() }}>确定</Button>
  273. </Col>
  274. </Row>
  275. <Row className="search-criteria">
  276. <Col className="search-title" span={2}>
  277. <span>技术类型</span>
  278. </Col>
  279. <Col className="search-select" span={22}>
  280. <Radio.Group defaultValue={999} onChange={(e) => {
  281. this.setState({
  282. category: e.target.value
  283. });
  284. this.state.category = e.target.value;
  285. this.loadData();
  286. }}>
  287. {this.state.categoryRadio}
  288. </Radio.Group>
  289. </Col>
  290. </Row>
  291. <Row className="search-criteria">
  292. <Col className="search-title" span={2}>
  293. <span>交易方式</span>
  294. </Col>
  295. <Col className="search-select" span={22}>
  296. <Radio.Group defaultValue={999} onChange={(e) => {
  297. this.setState({
  298. transferMode: e.target.value
  299. });
  300. this.state.transferMode = e.target.value
  301. this.loadData();
  302. }}>
  303. {this.state.transferModeRadio}
  304. </Radio.Group>
  305. </Col>
  306. </Row>
  307. <Row className="search-criteria">
  308. <Col className="search-title" span={2}>
  309. <span>成熟度</span>
  310. </Col>
  311. <Col className="search-select" span={12}>
  312. <Radio.Group defaultValue={999} onChange={(e) => {
  313. this.setState({
  314. maturity: e.target.value
  315. });
  316. this.state.maturity = e.target.value
  317. this.loadData();
  318. }}>
  319. {this.state.maturityRadio}
  320. </Radio.Group>
  321. </Col>
  322. <Col span={10}>
  323. <div className="nav-search">
  324. <Input onChange={(e) => { this.state.keyword = e.target.value; }} />
  325. <Button onClick={() => { this.loadData() }}>
  326. <img src={searchImg} alt="" />
  327. </Button>
  328. </div>
  329. </Col>
  330. </Row>
  331. <Spin spinning={this.state.loading} style={{ marginBottom: '40px' }}>
  332. <ul className='detail_interest_sub clearfix' style={{ padding: 0 }}>
  333. {this.state.dataSource.map((item) => {
  334. return <li key={item.id} onClick={() => { this.tableRowClick(item) }}
  335. style={{ float: 'left', marginLeft: '20px', width: '48%' }}>
  336. <div className="interest_list_title" style={{ paddingLeft: '20px' }}>
  337. <span>{item.name}</span>
  338. </div>
  339. <div className="interest_list_name" style={{ paddingLeft: '20px' }}>
  340. <p>{item.ownerName}</p>
  341. <div className="interest_list_confirm">
  342. <span>{item.level ? '身份已验证' : '身份未验证'}</span>
  343. <img src={item.level ? certify : uncertify} alt="" />
  344. </div>
  345. </div>
  346. <div className="detial_sub">
  347. <span className="detial_sub_icon">
  348. <img src={demand_ico_5} alt="成果" />
  349. </span>
  350. <span className="detial_sub_title">关键词: </span>
  351. <span className="detial_sub_text">{item.keyword}</span>
  352. </div>
  353. <div className="detial_sub">
  354. <span className="detial_sub_icon">
  355. <img src={demand_ico_2} alt="类型" />
  356. </span>
  357. <span className="detial_sub_title">技术类型: </span>
  358. <span className="detial_sub_text">{getAchievementCategory(item.category)}</span>
  359. </div>
  360. <div className="detial_sub">
  361. <span className="detial_sub_icon">
  362. <img src={demand_ico_1} alt="行业" />
  363. </span>
  364. <span className="detial_sub_title">行业分类: </span>
  365. <span className="detial_sub_text">{getIndustryCategory(item.fieldA, item.fieldB)}</span>
  366. </div>
  367. <div className="detial_sub">
  368. <span className="detial_sub_icon">
  369. <img src={demand_ico_3} alt="标价" />
  370. </span>
  371. <span className="detial_sub_title">标价: </span>
  372. <span className="money_text">{item.transferPrice ? (item.transferPrice + '万元') : '价格面议'}</span>
  373. </div>
  374. <div className="detial_sub">
  375. <span className="detial_sub_icon">
  376. <img src={achievement_ico_1} alt="交易方式" />
  377. </span>
  378. <span className="detial_sub_title">交易方式: </span>
  379. <span className="money_text">{getTransferMode(item.transferMode)}</span>
  380. </div>
  381. <div className="detial_sub">
  382. <span className="detial_sub_icon">
  383. <img src={achievement_ico_2} alt="成熟度" />
  384. </span>
  385. <span className="detial_sub_title">技术成熟度: </span>
  386. <span className="detial_sub_score" >
  387. <span style={{ width: (item.maturity ? Number(item.maturity) * 20 : 0) + '%' }}>
  388. <img src={score_ioc} alt={getMaturity(item.maturity)} />
  389. </span>
  390. </span>
  391. </div>
  392. </li>
  393. })}
  394. </ul>
  395. <Pagination style={{ float: 'right' }}
  396. onChange={(e) => { this.loadData(e); }}
  397. total={total}
  398. showTotal={() => { return '共' + total + '条数据' }}
  399. current={pageNo}
  400. pageSize={pageSize} />
  401. </Spin>
  402. </div >
  403. </div>
  404. )
  405. }
  406. });
  407. export default Content;