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 axios from 'axios';
import {markdownToHTML,getImageUrl} from 'educoder';
import NoneData from "../../courses/shixunHomework/shixunHomework";

const { Header, Footer, Sider, Content } = Layout;
const { TabPane } = Tabs;
const { Meta } = Card;

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

		}
	}

	componentDidMount(){
		window.document.title = '竞赛';
		this.gettitledata()
	}
	gettitledata=()=>{
		let url=`/competitions/${this.props.match.params.identifier}/chart_rules.json`;
		axios.get(url)
			.then((response) => {
	     console.log(response)
			}).catch((error) => {
			console.log(error)
		})
	}


	render() {
		const operations = <Button className={"fr"} type="primary" ghost>编辑</Button>;
		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 = [
			{
				usersum: '1',
				userimg: 'John Brown',
				username: "小头鹰",
				school: '吉首大学',
				spendtime: '15：00：00',
				score:123123
			}
		];


		return (
			<div>
				<Tabs tabBarExtraContent={this.props.current_user&&this.props.current_user.admin===true||this.props.current_user&&this.props.current_user.business===true?operations:""}>
					<TabPane tab="总排行榜" key="1">
						<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML("Content of tab 1").replace(/▁/g, "▁▁▁")}}>
						</Content>
					</TabPane>
					<TabPane tab="决赛排行榜" key="2">
						<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML("Content of tab 2").replace(/▁/g, "▁▁▁")}}>
						</Content>
					</TabPane>
					<TabPane tab="预赛排行榜" key="3">
						<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML("Content of tab 3").replace(/▁/g, "▁▁▁")}}>
						</Content>
					</TabPane>
				</Tabs>


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

				<Row calssName={"Competition399"}>
					<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/p45296381" className="color-dark">
													<img className={"rankingimg"} src={getImageUrl("/images/avatars/User/45459?t=1566570434")} />
													<p className="task-hide rankName mt5 jinshaifont">蒙睿</p>
												</a>
											</div>
										</li>
								</div>
							}
						>
							<Meta
								title={<div className={"center"}>
									<div className={"rankfonttop"}>吉首大学</div>
									<div className={"rankfontmid"}>78:01:02</div>
								</div>}
								description={
									<div className={"rankfontbottom"}>3423.45分</div>
								}
							/>
						</Card>
					</Col>
					<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/p37219480" className="color-dark">
										  <img className={"rankingimg"} src={getImageUrl("/images/avatars/User/46128?t=1561087919")} />
											<p className="task-hide rankName mt5 jinshaifont">李羿锟</p>
										</a>
									</div>
									</li>
								</div>
							}
						>
							<Meta
								title={<div className={"center"}>
									<div className={"rankfonttop"}>吉首大学</div>
									<div className={"rankfontmid"}>78:01:02</div>
								</div>}
								description={
									<div className={"rankfontbottoms"}>3423.45分</div>
								}

							/>
						</Card>

					</Col>
					<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/p53601847" className="color-dark">
												<img className={"rankingimg"} src={getImageUrl("/images/avatars/User/26650?t=1561087884")} />
												<p className="task-hide rankName mt5 jinshaifont">陈翊</p>
											</a>
										</div>
									</li>
								</div>
							}
						>
							<Meta
								title={<div className={"center"}>
									<div className={"rankfonttop"}>吉首大学</div>
									<div className={"rankfontmid"}>78:01:02</div>
								</div>}
								description={
									<div className={"rankfontbottom"}>3423.45分</div>
								}

							/>
						</Card>
					</Col>
				</Row>

				<Row className={"mt80 mb80"}>
					<Table className="Competitiontransparent" columns={columns} dataSource={data} showHeader={false} pagination={false}/>
				</Row>


			</div>

		)
	}
}
export default CompetitionContents;