m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

教师端图标详情调整

Browse Source
PCqiandao
杨树明 5 years ago
parent f40728e51b
commit cc9f8eea5d
6 changed files with 475 additions and 42 deletions
Show Stats Download Patch File Download Diff File

238
public/react/src/modules/courses/signin/Signinstatistics/Signinstatistics.js
Unescape View File

@ -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;

4
public/react/src/modules/courses/signin/css/Signinstatistics.css
Unescape View File

@ -0,0 +1,4 @@
.gutterrowbox{
width:209px;
height:150px;
}

79
public/react/src/modules/courses/signin/model/Createsignmodel.js
Unescape View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { Modal , Form, Input, Radio,DatePicker, TimePicker,Select} from 'antd'; import { Modal , Form, Input, Radio,DatePicker, TimePicker,Select,Button} from 'antd';
const CollectionCreateForm = Form.create({ name: 'form_in_modal' })( const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
@ -7,31 +7,6 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
constructor(props){ constructor(props){
super(props); super(props);
this.state = { this.state = {
index:1,
addGroup:true,
navid:undefined,
sandiantype:undefined,
twosandiantype:undefined,
addCheckboxGroup:[],
Navmodalname:"",
Navmodalnametype:false,
Navmodaltypename:"",
setnavid:"",
NavmodalValue:"",
ModalsType:false,
Modalstopval:"",
loadtype:false,
selectnavid:false,
newselectnavid:undefined,
positiontype:undefined,
toopvisible:false,
toopvisibleindex:undefined,
toopvisibleindexs:undefined,
sandiantypes:undefined,
antIcon:false,
chapterupdate:false,
successFunc:undefined
} }
} }
@ -44,6 +19,21 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
wrapperCol: { span: 19}, wrapperCol: { span: 19},
}; };
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",
}
const format = 'HH:mm';
return ( return (
<Modal <Modal
visible={visible} visible={visible}
@ -55,13 +45,13 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
<Form {...formItemLayout}> <Form {...formItemLayout}>
<Form.Item label="签到名称："> <Form.Item label="签到名称：">
{getFieldDecorator('title', { {getFieldDecorator('name', {
rules: [{ required: true, message: 'Please input the title of collection!' }], rules: [{ required: true, message: 'Please input the title of collection!' }],
})(<Input />)} })(<Input />)}
</Form.Item> </Form.Item>
<Form.Item label="签到班级："> <Form.Item label="签到班级：">
{getFieldDecorator('select-multiple')( {getFieldDecorator('group_ids')(
<Select mode="multiple" placeholder="Please select favourite colors"> <Select mode="multiple" placeholder="Please select favourite colors">
<Option value="red">Red</Option> <Option value="red">Red</Option>
<Option value="green">Green</Option> <Option value="green">Green</Option>
@ -71,7 +61,7 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
</Form.Item> </Form.Item>
<Form.Item label="签到方式：" > <Form.Item label="签到方式：" >
{getFieldDecorator('modifier', { {getFieldDecorator('mode', {
rules: [{ required: true, message: 'Please input the title of collection!' }], rules: [{ required: true, message: 'Please input the title of collection!' }],
})( })(
<Radio.Group onChange={setRadio}> <Radio.Group onChange={setRadio}>
@ -84,11 +74,13 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
style={{color:"#E6A23C", style={{color:"#E6A23C",
height:"15px", height:"15px",
lineHeight: "15px"}}>学生点击签到按钮即可完成签到</div>:""} lineHeight: "15px"}}>学生点击签到按钮即可完成签到</div>:""}
{Radiolist==="NUMBER"?<div {Radiolist==="NUMBER"?<div
style={{color:"#E6A23C", style={{color:"#E6A23C",
height:"15px", height:"15px",
lineHeight: "15px"}} lineHeight: "15px"}}
>学生需要输入签到码才能完成签到</div>:""} >学生需要输入签到码才能完成签到</div>:""}
{Radiolist==="QRCODE"?<div {Radiolist==="QRCODE"?<div
style={{color:"#E6A23C", style={{color:"#E6A23C",
height:"15px", height:"15px",
@ -97,23 +89,40 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
</Form.Item> </Form.Item>
<Form.Item label="签到日期："> <Form.Item label="签到日期：">
{getFieldDecorator('date-picker', { {getFieldDecorator('attendance_date', {
rules: [{ type: 'object', required: true, message: 'Please select time!' }], rules: [{ type: 'object', required: true, message: 'Please select time!' }],
})(<DatePicker />)} })(<DatePicker style={{width:"413px"}} />)}
</Form.Item> </Form.Item>
<Form.Item label="开始时间："> <Form.Item label="开始时间：">
{getFieldDecorator('time-picker', { {getFieldDecorator('start_time', {
rules: [{ type: 'object', required: true, message: 'Please select time!' }], rules: [{ type: 'object', required: true, message: 'Please select time!' }],
})(<TimePicker />)} })(<TimePicker style={{width:"413px"}} format={format} />)}
</Form.Item> </Form.Item>
<Form.Item label="结束时间："> <Form.Item label="结束时间：">
{getFieldDecorator('time-picker', { {getFieldDecorator('end_time', {
rules: [{ type: 'object', required: true, message: 'Please select time!' }], rules: [{ type: 'object', required: true, message: 'Please select time!' }],
})(<TimePicker />)} })(<TimePicker style={{width:"413px"}} format={format} />)}
</Form.Item> </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> </Form>
</Modal> </Modal>
); );

74
public/react/src/modules/courses/signin/model/Qrcodesignin.js
Unescape View File

@ -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

76
public/react/src/modules/courses/signin/model/Studentssignmodel.js
Unescape View File

@ -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

40
public/react/src/modules/courses/signin/teacher/Teachers_signin.js
Unescape View File

@ -2,8 +2,10 @@ import React,{ Component } from "react";
import '../css/signincdi.css'; import '../css/signincdi.css';
import { Tabs,Pagination} from 'antd'; import { Tabs,Pagination} from 'antd';
import Teaccomponent from '../component/teachercomponent/Teaccomponent'; import Teaccomponent from '../component/teachercomponent/Teaccomponent';
import Histeacomponent from '../component/teachercomponent/Histeacomponent';
import Createsignmodel from '../model/Createsignmodel'; import Createsignmodel from '../model/Createsignmodel';
import Studentssignmodels from "../model/Studentssignmodel";
import Qrcodesignin from "../model/Qrcodesignin";
import Signinstatistics from "../Signinstatistics/Signinstatistics";
const { TabPane } = Tabs; const { TabPane } = Tabs;
//在线学习 //在线学习
class Students_signin extends Component{ class Students_signin extends Component{
@ -40,6 +42,21 @@ class Students_signin extends Component{
visible:true visible:true
}) })
} }
Studentsbottom=()=>{
this.setState({
Studentssigntype:true
})
}
Qrcodesignintypefun=()=>{
this.setState({
Qrcodesignintype:true
})
}
paginationonChange = (pageNumber) => { paginationonChange = (pageNumber) => {
this.setState({ this.setState({
page: pageNumber, page: pageNumber,
@ -52,11 +69,23 @@ class Students_signin extends Component{
let {page,per_page,count,defaultActiveKey} =this.state let {page,per_page,count,defaultActiveKey} =this.state
return( return(
<React.Fragment> <React.Fragment>
<div className="">
{/*创建实训*/}
<Createsignmodel <Createsignmodel
{...this.state} {...this.state}
{...this.props} {...this.props}
/> />
<div className=""> {/*签到*/}
<Studentssignmodels
{...this.state}
{...this.props}
/>
{/*二维码*/}
<Qrcodesignin
{...this.state}
{...this.props}
/>
<div className="clearfix yslmaxheigthk" > <div className="clearfix yslmaxheigthk" >
<div className="ws100s" style={{ <div className="ws100s" style={{
@ -83,12 +112,15 @@ class Students_signin extends Component{
</div> </div>
</TabPane> </TabPane>
<TabPane tab="签到统计" key="3"> <TabPane tab="签到统计" key="3">
Content of Tab Pane 3 <Signinstatistics
{...this.props}
{...this.state}
/>
</TabPane> </TabPane>
</Tabs> </Tabs>
<div className="positiondivs sortinxdirection xiaoshou"> <div className="positiondivs sortinxdirection xiaoshou">
<i className="iconfont icon-bianji5 posiivsicon"></i> <i className="iconfont icon-bianji5 posiivsicon"></i>
<p className="posiivs xiaoshou" onClick={()=>this.Createsign()}>创建签到</p> <p className="posiivs xiaoshou" onClick={()=>this.Qrcodesignintypefun()}>创建签到</p>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save