调整

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

@@ -1,190 +1,119 @@
 import "../css/Signinstatistics.css";
 import React,{ Component } from "react";
-import { Row, Col,Card } from 'antd';
+import { Row, Col,Card,Select} from 'antd';
+import axios from 'axios';
 import {
-  G2,
   Chart,
   Geom,
   Axis,
   Tooltip,
-  Coord,
-  Label,
-  Legend,
-  View,
-  Guide,
-  Shape,
-  Facet,
-  Util
 } 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) => {
 
-  render() {
+      if(response){
-    const data = [
+        if(response.data){
-      {
+          let newlists=[]
-        month: "Jan",
+
-        city: "Tokyo",
+          if(response.data.history_attendances.length>0){
-        temperature: 7
+            response.data.history_attendances.map((item,key)=>{
-      },
+              newlists.push({
-      {
+                month: item.index,
-        month: "Jan",
+                city:"到课率",
-        city: "main",
+                temperature: (item.normal_rate).toFixed(0)
-        temperature:3
+              })
-      },
+              newlists.push({
-      {
+                month: item.index,
-        month: "Jan",
+                city: "旷课率",
-        city: "London",
+                temperature: (item.absence_rate).toFixed(0)
-        temperature: 3.9
+              })
-      },
+              newlists.push({
-      {
+                month: item.index,
-        month: "Feb",
+                city: "请假率",
-        city: "Tokyo",
+                temperature: (item.leave_rate).toFixed(0)
-        temperature: 6.9
+              })
-      },
+            })
-      {
+          }
-        month: "Feb",
+
-        city: "main",
+          this.setState({
-        temperature: 4.5
+            datas:response.data,
-      },
+            newlist:newlists
-      {
+          })
-        month: "Feb",
+
-        city: "London",
+
-        temperature: 4.2
+        }
-      },
-      {
-        month: "Mar",
-        city: "Tokyo",
-        temperature: 9.5
-      },
-      {
-        month: "Mar",
-        city: "London",
-        temperature: 5.7
-      },
-      {
-        month: "Apr",
-        city: "Tokyo",
-        temperature: 14.5
-      },
-      {
-        month: "Apr",
-        city: "London",
-        temperature: 8.5
-      },
-      {
-        month: "May",
-        city: "Tokyo",
-        temperature: 18.4
-      },
-      {
-        month: "May",
-        city: "London",
-        temperature: 11.9
-      },
-      {
-        month: "Jun",
-        city: "Tokyo",
-        temperature: 21.5
-      },
-      {
-        month: "Jun",
-        city: "London",
-        temperature: 15.2
-      },
-      {
-        month: "Jul",
-        city: "Tokyo",
-        temperature: 25.2
-      },
-      {
-        month: "Jul",
-        city: "London",
-        temperature: 17
-      },
-      {
-        month: "Aug",
-        city: "Tokyo",
-        temperature: 26.5
-      },
-      {
-        month: "Aug",
-        city: "London",
-        temperature: 16.6
-      },
-      {
-        month: "Sep",
-        city: "Tokyo",
-        temperature: 23.3
-      },
-      {
-        month: "Sep",
-        city: "London",
-        temperature: 14.2
-      },
-      {
-        month: "Oct",
-        city: "Tokyo",
-        temperature: 18.3
-      },
-      {
-        month: "Oct",
-        city: "London",
-        temperature: 10.3
-      },
-      {
-        month: "Nov",
-        city: "Tokyo",
-        temperature: 13.9
-      },
-      {
-        month: "Nov",
-        city: "London",
-        temperature: 6.6
-      },
-      {
-        month: "Dec",
-        city: "Tokyo",
-        temperature: 9.6
-      },
-      {
-        month: "Dec",
-        city: "London",
-        temperature: 4.8
-      },
-      {
-        month: "Dec",
-        city: "main",
-        temperature: 5
       }
-    ];
+    })
+  }
+
+  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]
       }
     };
+
+    console.log(course_groups)
     return(
       <React.Fragment >
+
         <Row type="flex" justify="space-between" className={"mt20"}>
           <Col span={6}>
             <Card style={{ width: 209 }} className={"gutterrowbox lishiqiandao"}>
-              <div className={"gutterrowboxcontent"}>200</div>
+              <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"}>200</div>
+              <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"}>200</div>
+              <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"}>200</div>
+              <div className={"gutterrowboxcontent ml5"}>{datas?(datas&&datas.avg_leave_rate*100).toFixed(0)+"%":""}</div>
             </Card>
           </Col>
         </Row>
@@ -214,15 +143,23 @@ class Signinstatistics extends Component {
                     </Col>
                 </Row>
               </Col>
-              <Col span={10}>    <Row type="flex" justify="end">
+              <Col span={10}><Row type="flex" justify="end">
-                <Col span={5}>col-4</Col>
+                <Col span={8} className={"Signinstatisticsfont"}>显示最近十次签到</Col>
-                <Col span={5}>col-4</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={data} scale={cols} forceFit>
+            <Chart height={400} data={newlist} scale={cols} forceFit>
               {/*<Legend />*/}
               <Axis name="month" />
               <Axis
@@ -240,21 +177,18 @@ class Signinstatistics extends Component {
                 type="line"
                 position="month*temperature"
                 size={2}
-                color={"city"}
+                // color={"city"}
                 shape={"smooth"}
-                style={{
+                color={["city", ["#26C7C9", "#FF835C","#EDBA6F"]]}
-                  stroke: "#26C7C9",
-                  lineWidth: 1
-                }}
               />
               <Geom
                 type="point"
                 position="month*temperature"
                 size={4}
                 shape={"circle"}
-                color={"city"}
+                color={["city", ["#26C7C9", "#FF835C","#EDBA6F"]]}
                 style={{
-                  stroke: "#FF835C",
+                  stroke: "#fff",
                   lineWidth: 1
                 }}
               />

public/react/src/modules/courses/signin/css/Signinstatistics.css

@@ -99,4 +99,12 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+}
+
+.Signinstatisticsfont{
+    font-weight: 400;
+    color: rgba(153,153,153,1);
+    text-align: right;
+    margin-right: 20px;
+    line-height: 32px;
 }