parent
f40728e51b
commit
cc9f8eea5d
@ -0,0 +1,238 @@
|
||||
import React,{ Component } from "react";
|
||||
import { Row, Col,Card } from 'antd';
|
||||
import {
|
||||
G2,
|
||||
Chart,
|
||||
Geom,
|
||||
Axis,
|
||||
Tooltip,
|
||||
Coord,
|
||||
Label,
|
||||
Legend,
|
||||
View,
|
||||
Guide,
|
||||
Shape,
|
||||
Facet,
|
||||
Util
|
||||
} from "bizcharts";
|
||||
class Signinstatistics extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
render() {
|
||||
const data = [
|
||||
{
|
||||
month: "Jan",
|
||||
city: "Tokyo",
|
||||
temperature: 7
|
||||
},
|
||||
{
|
||||
month: "Jan",
|
||||
city: "London",
|
||||
temperature: 3.9
|
||||
},
|
||||
{
|
||||
month: "Feb",
|
||||
city: "Tokyo",
|
||||
temperature: 6.9
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
];
|
||||
const cols = {
|
||||
month: {
|
||||
range: [0, 1]
|
||||
}
|
||||
};
|
||||
return(
|
||||
<React.Fragment>
|
||||
|
||||
<Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">
|
||||
<div className={"gutterrowbox"}>
|
||||
<Card style={{ width: 300 }}>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">
|
||||
<div className={"gutterrowbox"}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">
|
||||
<div className={"gutterrowbox"}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">
|
||||
<div className={"gutterrowbox"}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div>
|
||||
<Chart height={400} data={data} scale={cols} forceFit>
|
||||
<Legend />
|
||||
<Axis name="month" />
|
||||
<Axis
|
||||
name="temperature"
|
||||
label={{
|
||||
formatter: val => `${val}°C`
|
||||
}}
|
||||
/>
|
||||
<Tooltip
|
||||
crosshairs={{
|
||||
type: "y"
|
||||
}}
|
||||
/>
|
||||
<Geom
|
||||
type="line"
|
||||
position="month*temperature"
|
||||
size={2}
|
||||
color={"city"}
|
||||
shape={"smooth"}
|
||||
/>
|
||||
<Geom
|
||||
type="point"
|
||||
position="month*temperature"
|
||||
size={4}
|
||||
shape={"circle"}
|
||||
color={"city"}
|
||||
style={{
|
||||
stroke: "#fff",
|
||||
lineWidth: 1
|
||||
}}
|
||||
/>
|
||||
</Chart>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default Signinstatistics;
|
||||
@ -0,0 +1,4 @@
|
||||
.gutterrowbox{
|
||||
width:209px;
|
||||
height:150px;
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
import React,{ Component } from "react";
|
||||
|
||||
import { Modal , Button} from 'antd';
|
||||
|
||||
class Qrcodesignin extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const leftbuton={
|
||||
"width":"130px",
|
||||
"height":"40px",
|
||||
"border":"1px solid rgba(76,172,255,1)",
|
||||
"border-radius":"4px",
|
||||
}
|
||||
|
||||
const rightbuton={
|
||||
"width":"130px",
|
||||
"height":"40px",
|
||||
"background":"#4CACFF",
|
||||
"border-radius":"4px",
|
||||
}
|
||||
return(
|
||||
<React.Fragment>
|
||||
{this.props.Qrcodesignintype?<Modal
|
||||
title="二维码签到"
|
||||
visible={this.props.Qrcodesignintype}
|
||||
closable={false}
|
||||
footer={null}
|
||||
>
|
||||
|
||||
<div>
|
||||
<div className={" marginauto clearfix edu-txt-center"}>
|
||||
<a><img alt="example" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" style={{"width": "100%"}} /></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"mt20 marginauto clearfix edu-txt-center"}>
|
||||
<a>请打开小程序在课堂的签到模块扫码签到</a>
|
||||
</div>
|
||||
|
||||
<div className={"mt20 marginauto clearfix edu-txt-center"}>
|
||||
<a>
|
||||
<Button type="primary" ghost style={leftbuton}>
|
||||
取消
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<a>
|
||||
<Button type="primary" className={"ml20"} style={rightbuton}>
|
||||
确定
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</Modal>:""}
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default Qrcodesignin
|
||||
@ -0,0 +1,76 @@
|
||||
import React,{ Component } from "react";
|
||||
|
||||
import { Modal , Form, Input,Button} from 'antd';
|
||||
|
||||
class Studentssignmodel extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const formItemLayout = {
|
||||
wrapperCol: { span: 25},
|
||||
};
|
||||
|
||||
const leftbuton={
|
||||
"width":"130px",
|
||||
"height":"40px",
|
||||
"border":"1px solid rgba(76,172,255,1)",
|
||||
"border-radius":"4px",
|
||||
}
|
||||
|
||||
const rightbuton={
|
||||
"width":"130px",
|
||||
"height":"40px",
|
||||
"background":"#4CACFF",
|
||||
"border-radius":"4px",
|
||||
}
|
||||
return(
|
||||
<React.Fragment>
|
||||
{this.props.Studentssigntype?<Modal
|
||||
title="签到码签到"
|
||||
visible={this.props.Studentssigntype}
|
||||
closable={false}
|
||||
footer={null}
|
||||
>
|
||||
|
||||
<Form {...formItemLayout}>
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('name', {
|
||||
rules: [{ required: true, message: 'Please input the title of collection!' }],
|
||||
})(<Input placeholder="请输入签到码"/>)}
|
||||
</Form.Item>
|
||||
|
||||
<div className={"mt20 marginauto clearfix edu-txt-center"}>
|
||||
<a>
|
||||
<Button type="primary" ghost style={leftbuton}>
|
||||
取消
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<a>
|
||||
<Button type="primary" className={"ml20"} style={rightbuton}>
|
||||
确定
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</Form>
|
||||
</Modal>:""}
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const Studentssignmodels = Form.create({ name: 'Studentssignmodel' })(Studentssignmodel);
|
||||
|
||||
export default Studentssignmodels
|
||||
Loading…
Reference in new issue