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";
const { Option } = Select;

class Signinstatistics extends Component {
  constructor(props) {
    super(props)
    this.state={
      datas:null,
      newlist:[],
      course_groups:[{id:"全部",name:"全部"}]
    }
  }
  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,
                city:"到课率",
                temperature: (item.normal_rate).toFixed(0)
              })
              newlists.push({
                month: item.index,
                city: "旷课率",
                temperature: (item.absence_rate).toFixed(0)
              })
              newlists.push({
                month: item.index,
                city: "请假率",
                temperature: (item.leave_rate).toFixed(0)
              })
            })
          }

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


        }
      }
    })
  }

  componentDidMount() {
    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}=this.state;

    const cols = {
      month: {
        range: [0, 1]
      }
    };


    return(
      <React.Fragment >

        <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"}}>
                    {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"]]}
              />
              <Geom
                type="point"
                position="month*temperature"
                size={4}
                shape={"circle"}
                color={["city", ["#26C7C9", "#FF835C","#EDBA6F"]]}
                style={{
                  stroke: "#fff",
                  lineWidth: 1
                }}
              />
            </Chart>
          </div>

        </div>
      </React.Fragment>

    )
  }

}






export default Signinstatistics;