achievement.jsx 21 KB

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