educoder/public/react/src/modules/courses/signin/Signinstatistics/Signinstatistics.js

import "../css/Signinstatistics.css";
import React,{ Component } from "react";
import { Row, Col,Card,Select} from 'antd';
import {getImageUrl} from 'educoder';
import axios from 'axios';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
} from "bizcharts";
import LoadingSpin from "../../../../common/LoadingSpin";
const { Option } = Select;

class Signinstatistics extends Component {
  constructor(props) {
    super(props)
    this.state={
      datas:null,
      newlist:[],
      course_groups:[{id:"全部",name:"全部"}],
			spal:false,
    }
  }
  getdata=(group_id)=>{

    const coursesId=this.props.match.params.coursesId;
    let url=`/weapps/courses/${coursesId}/attendances.json`
    axios.get(url,{params:{
        group_id:group_id==="全部"?undefined:group_id
    }
    }).then((response) => {

      if(response){
        if(response.data){
          let newlists=[]

          if(response.data.history_attendances.length>0){
            response.data.history_attendances.map((item,key)=>{
              newlists.push({
                month: item.index,
                name: item.name+" "+item.attendance_date+" "+item.start_time+"-"+item.end_time,
                // month:item.name,
                city:"到课率",
                temperature: (item.normal_rate*100).toFixed(0)
              })
              newlists.push({
                month: item.index,
                name: item.name+" "+item.attendance_date+" "+item.start_time+"-"+item.end_time,
                // month:item.name,
                city: "旷课率",
                temperature: (item.absence_rate*100).toFixed(0)
              })
              newlists.push({
                month: item.index,
                name: item.name+" "+item.attendance_date+" "+item.start_time+"-"+item.end_time,
                // month:item.name,
                city: "请假率",
                temperature: (item.leave_rate*100).toFixed(0)
              })
            })
          }

          this.setState({
            datas:response.data,
            newlist:newlists
          })


        }
      }
			this.setState({
				spal:false
			})
    }).catch((error) => {
			this.setState({
				spal:false
			})

		})
  }

  componentDidMount() {
    this.setState({
      spal:true
    })
    const coursesId=this.props.match.params.coursesId;
    let newurl=`/courses/${coursesId}/all_course_groups.json`;
    axios.get(newurl).then((response) => {
      let newlist=this.state.course_groups;
      response.data.course_groups.map((item,key)=>{
        newlist.push(item)
      })
      this.setState({
        course_groups:newlist
      })
    })

    this.getdata()
  }

  handleChange=(value)=>{
    this.getdata(value)
  }

  render() {
    let {datas,newlist,course_groups,spal}=this.state;

    const cols = {
      month:{
        range: [0, 1]
      },
      temperature: {
        type: 'log',
        base: 10
      }
    };


    return(
      <React.Fragment >
				<div>
					{
						spal===true?
							<div style={{
								minHeight:"500px",
							}}>
								<LoadingSpin></LoadingSpin>
							</div>

							:
							<div>

								<Row type="flex" justify="space-between" className={"mt20"}>
									<style>
										{
											`
              .lishiqiandao{
                background-image: url(${getImageUrl(`images/qiandao/lishi.png`)});
              }
                  .daokeqiandao{
                background-image: url(${getImageUrl(`images/qiandao/daoke.png`)});
              }
                  .kuangkeqiandao{
                background-image: url(${getImageUrl(`images/qiandao/kuangke.png`)});
              }
                  .qingjiaqiandao{
                background-image: url(${getImageUrl(`images/qiandao/qingjia.png`)});
              }
              `
										}
									</style>
									<Col span={6}>
										<Card style={{ width: 209 }} className={"gutterrowbox lishiqiandao"}>
											<div className={"gutterrowboxcontent ml5"}>{datas&&datas.all_history_count}</div>
										</Card>
									</Col>
									<Col span={6}>
										<Card style={{ width: 209 }} className={"ml8 gutterrowbox daokeqiandao"}>
											<div className={"gutterrowboxcontent ml5"}>{datas?(datas&&datas.avg_normal_rate*100).toFixed(0)+"%":""}</div>
										</Card>
									</Col>
									<Col span={6}>
										<Card style={{ width: 209 }} className={"ml14 gutterrowbox kuangkeqiandao"}>
											<div className={"gutterrowboxcontent ml5"}>{datas?(datas&&datas.avg_absence_rate*100).toFixed(0)+"%":""}</div>
										</Card>
									</Col>
									<Col span={6} >
										<Card style={{ width: 209 }}  className={"ml20 gutterrowbox qingjiaqiandao"}>
											<div className={"gutterrowboxcontent ml5"}>{datas?(datas&&datas.avg_leave_rate*100).toFixed(0)+"%":""}</div>
										</Card>
									</Col>
								</Row>

								<div className={"SigninstatisticsChart mt20"}>
									<div className={"pd30"}>
										<Row>
											<Col span={14}>
												<Row type="flex" justify="start">
													<Col span={5}>
														<Row>
															<Col span={12} className={"mindaoke mr5"}></Col>
															<Col>到课率</Col>
														</Row>
													</Col>
													<Col span={5}>
														<Row>
															<Col span={12} className={"minkuangke mr5"}></Col>
															<Col>旷课率</Col>
														</Row>
													</Col>
													<Col span={5}>
														<Row>
															<Col span={12} className={"minqingjia mr5"}></Col>
															<Col>请假率</Col>
														</Row>
													</Col>
												</Row>
											</Col>
											<Col span={10}><Row type="flex" justify="end">
												<Col span={8} className={"Signinstatisticsfont"}>显示最近十次签到</Col>
												<Col span={10}>
													<Select  defaultValue={"全部"} onChange={(e)=>this.handleChange(e)} style={{width:"130px"}} className={"Signinstatisticsfontselect"}>
														{course_groups&&course_groups.map((item,key)=>{
															return(
																<Option value={item.id} title={item.name} >{item.name}</Option>
															)
														})}
													</Select>
												</Col>
											</Row></Col>
										</Row>
									</div>

									<div className={"padding03000"}>
										<Chart height={400} data={newlist} scale={cols} forceFit>
											{/*<Legend />*/}
											<Axis name="month" />
											<Axis
												name="temperature"
												label={{
													formatter: val => `${val}%`
												}}
											/>
											<Tooltip
												crosshairs={{
													type: "y"
												}}
											/>
											<Geom
												type="line"
												position="month*temperature"
												size={2}
												// color={"city"}
												shape={"smooth"}
												color={["city", ["#26C7C9", "#FF835C","#EDBA6F"]]}
                        tooltip={['name*temperature*city', (name, temperature,city) => {
                          return {
                            //自定义 tooltip 上显示的 title 显示内容等。
                            name: city,
                            title: name,
                            value: temperature+"%"
                          };
                        }]}
											/>
											<Geom
												type="point"
												position="month*temperature"
												size={4}
												shape={"circle"}
												color={["city", ["#26C7C9", "#FF835C","#EDBA6F"]]}
												style={{
													stroke: "#fff",
													lineWidth: 1
												}}
                        // tooltip={['month*sold', (month, temperature) => {
                        //   return {
                        //     //自定义 tooltip 上显示的 title 显示内容等。
                        //     name: 'sold1',
                        //     title: 'dddd' + month,
                        //     value: temperature
                        //   };
                        // }]}
											/>
										</Chart>
									</div>

								</div>
							</div>
					}
				</div>

      </React.Fragment>

    )
  }

}






export default Signinstatistics;