educoder/public/react/src/modules/competitions/Competitioncommon/CompetitionContentsChart.js

import React, { Component } from 'react';
import {Button,Layout,Tabs,Icon, Card, Avatar, Row, Col ,Table} from 'antd';
import {markdownToHTML,getImageUrl} from 'educoder';
import NoneData from "../../courses/shixunHomework/shixunHomework";

const { Content } = Layout;
const { TabPane } = Tabs;
const { Meta } = Card;

class CompetitionContents extends Component{
	constructor(props) {
		super(props)
		this.state={

		}
	}

	componentDidMount(){
		window.document.title = '竞赛';
	}

	render() {
		const operations =
			<div>
				<Button className={"fr"} type="primary" ghost onClick={()=>this.props.Competitionedit()}>编辑</Button>
				<Button className={"fr mr20"} type="primary" ghost>
					<a href={`/competitions/${this.props.match.params.identifier}/charts.xlsx`}>导出</a>
				</Button>
			</div>
		const columns = [
			{
				title: 'usersum',
				dataIndex: 'usersum',
				key: 'name',
				render: text => <a className={"color-blue"}>{text}</a>,
			},
			{
				title: 'userimg',
				dataIndex: 'userimg',
				key: 'userimg',
				render: text => <img className={"Competitionuserimg"} src={getImageUrl("images/avatars/User/60969?t=1569488691")}/>,
			},
			{
				title: 'username',
				dataIndex: 'username',
				key: 'username',
				render: text => <a>{text}</a>,
			},
			{
				title: 'school',
				dataIndex: 'school',
				key: 'school',
				render: text => <a>{text}</a>,
			},
			{
				title: 'spendtime',
				dataIndex: 'spendtime',
				key: 'spendtime',
				render: text => <a>{text}</a>,
			},
			{
				title: 'score',
				dataIndex: 'score',
				key: 'score',
				render: text => <a className={"color-blue"}>{text}</a>,
			},
		];

		const data = [];
		let {chart_rules,chartdata}=this.props;
		 chartdata===undefined?"":chartdata.teams.length===0?"":chartdata.teams.map((item,key)=>{
		 	if(key>3){
				let list={
					usersum:key,
				  userimg:item.user_image,
					username:item.record_user_name,
					school:item.school_name,
					spendtime:item.spend_time,
					score:item.score,
					user_login:item.user_login
				}
				data.push(list)
			}
		 })



    console.log(this.props.chartdata&&this.props.chartdata.user_ranks)
    return (
			<div>
				{chart_rules===undefined?"":<Tabs  onChange={(e)=>this.props.Competitioncallback(e)} activeKey={this.props.tabkey} tabBarExtraContent={this.props.current_user&&this.props.current_user.admin===true||this.props.current_user&&this.props.current_user.business===true?this.props.Competitionedittype===false?operations:"":""}>
					{chart_rules.stages.map((item,key)=>{
						return(
							<TabPane tab={item.name} key={item.id===null?0:item.id}>
								{chart_rules.rule_contents.map((items,keys)=>{
									if(item.id===items.competition_stage_id){
										return(
											<Content key={keys} className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML(items.content).replace(/▁/g, "▁▁▁")}}></Content>
										)
									}else if(item.id===null&&items.competition_stage_id===0){
										return(
											<Content key={keys} className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML(items.content).replace(/▁/g, "▁▁▁")}}></Content>
										)
									}
								})}
							</TabPane>
							)
					})}
				</Tabs>}


				<Col className="gutter-row Competitioncharts mt30 mb30">总排名</Col>

				<Row calssName={"Competition399"}>
					{chartdata===undefined?"":chartdata.teams.length===0?"":chartdata.teams.map((item,key)=>{

						if(key===1){
							return(
								<Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 1 }}>
									<Card
										className={"Competitionfirst"}
										cover={
											<div className={"Competitionfirstbox center"}>
												<li className="pr Competitioncenter">
													<img src={getImageUrl("images/educoder/huangguan.png")}/>
													<div className={"mt10"}>
														<a href={`/users/${item.user_login}`} className="color-dark">
															<img className={"rankingimg"} src={getImageUrl(item.user_image)} />
															<p className="task-hide rankName mt5 jinshaifont">{item.record_user_name}</p>
														</a>
													</div>
												</li>
											</div>
										}
									>
										<Meta
											title={<div className={"center"}>
												<div className={"rankfonttop"}>{item.school_name}</div>
												<div className={"rankfontmid"}>{item.spend_time}</div>
											</div>}
											description={
												<div className={"rankfontbottoms"}>{item.score}分</div>
											}

										/>
									</Card>

								</Col>
							)
						}

						if(key===2){
							return(
								<Col className="mt30" xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 1 }}>
									<Card
										className={"Competitionsecondary "}
										cover={
											<div className={"Competitionsecondarybox center"}>
												<li className=" pr Competitioncenter ">
													<img src={getImageUrl("images/educoder/huangguan-three.png")}/>
													<div className={"mt10"}>
														<a href={`/users/${item.user_login}`} className="color-dark">
															<img className={"rankingimg"} src={getImageUrl(item.user_image)} />
															<p className="task-hide rankName mt5 jinshaifont">{item.record_user_name}</p>
														</a>
													</div>
												</li>
											</div>
										}
									>
										<Meta
											title={<div className={"center"}>
												<div className={"rankfonttop"}>{item.school_name}</div>
												<div className={"rankfontmid"}>{item.spend_time}</div>
											</div>}
											description={
												<div className={"rankfontbottom"}>{item.score}分</div>
											}

										/>
									</Card>
								</Col>
							)
						}

						if(key===3){
							return(
								<Col className="mt40" xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
									<Card
										className={"Competitionthird"}
										cover={
											<div className={"Competitionthirdbox center"}>
												<li className="pr Competitioncenter">
													<img src={getImageUrl("images/educoder/huangguan-two.png")}/>
													<div className={"mt10"}>
														<a href={`/users/${item.user_login}`} className="color-dark">
															<img className={"rankingimg"} src={getImageUrl(item.user_image)} />
															<p className="task-hide rankName mt5 jinshaifont">{item.user_name}</p>
														</a>
													</div>
												</li>
											</div>
										}
									>
										<Meta
											title={<div className={"center"}>
												<div className={"rankfonttop"}>{item.school_name}</div>
												<div className={"rankfontmid"}>{item.spend_time}</div>
											</div>}
											description={
												<div className={"rankfontbottom"}>{item.score}分</div>
											}
										/>
									</Card>
								</Col>

							)
						}

					})}

				</Row>

				<Row className={"mt80 mb80"}>
					{chartdata===undefined?"":chartdata.teams.length===0?"":<Table className="Competitiontransparent" columns={columns} dataSource={data} showHeader={false} pagination={false}/>}
				</Row>


			</div>

		)
	}
}
export default CompetitionContents;