From 5a887acf1924950715086633d329db045223b5c4 Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Tue, 09 Jun 2020 14:47:27 +0800 Subject: [PATCH] test --- SunshineIns/src/page/SignIn.jsx | 58 +++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 39 insertions(+), 19 deletions(-) diff --git a/SunshineIns/src/page/SignIn.jsx b/SunshineIns/src/page/SignIn.jsx index 539dd09..e865382 100644 --- a/SunshineIns/src/page/SignIn.jsx +++ b/SunshineIns/src/page/SignIn.jsx @@ -17,6 +17,7 @@ { name: '六号' }, { name: '七号' }, ] +const { Meta } = Card; export default class SignIn extends React.Component { constructor(props) { super(props); @@ -29,15 +30,18 @@ } componentDidMount() { - document.title = '签到上墙'; - this.getData(); + setInterval(() => this.getData(), 5000) + } + + componentWillMount() { + this.getData() } getData = () => { // signinfo const { id } = this.props.match.params; - this.setState({ loading: true }) + // this.setState({ loading: true }) Fetch.signinfo(id) .then(res => { console.log(res) @@ -45,7 +49,7 @@ code: res.data.code, personList: res.data.personList, activityName: res.data.activityName, - loading: false, + // loading: false, }); }) } @@ -56,38 +60,54 @@ return ( <div className="app-page"> <Spin spinning={loading}> - <Affix style={{ position: 'absolute', top: 520, right: 20 }}> + {/* <Affix style={{ position: 'absolute', top: 520, right: 20 }}> <Card> < img style={{ width: '150px', height: '150px' }} src={`data:image/png;base64,${code}`} alt=""></img> </Card> - </Affix> + </Affix> */} <Card style={{ margin: "8%" }}> <div> - <Row type="flex" justify="center" align="middle" style={{ borderBottom: '1px solid #D8D8D8' }}> - <Col style={{ color: '#3D444D', fontSize: 26, fontWeight: 'bold', lineHeight: '75px' }}> - {activityName} + <Row type="flex" align="middle" style={{ borderBottom: '1px solid #D8D8D8' }}> + <Col span={20} style={{ color: '#3D444D', fontSize: 26, fontWeight: 'bold', lineHeight: '75px' }}> + 活动标题:{activityName} </Col> + <Col>< img style={{ width: '150px', height: '150px' }} src={`data:image/png;base64,${code}`} alt=""></img></Col> </Row> </div> - <div style={{ display: 'flex' }}> + <div style={{ display: 'flex', }}> { personList.length > 0 ? personList.map((item, index) => ( - <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column', width: '168px', height: '168px', justifyContent: 'center', alignItems: 'center',color:'#fff',textAlign:'center',lineHeight:'150px' }} key={index}> - <img src={item.imgUrl} style={{ width: '150px', height: '150px' }} /> - { - item.signStatus !== 3 ? - <div style={{ width: '150px', height: '150px', backgroundColor: '#000', opacity: '0.2', position: 'absolute' }}>未签到</div> : '' - } + <div style={{ border: '1px solid #eee', borderRadius: '4px', margin: '6px 0', padding: '6px 0' }} key={index}> + <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column', width: '168px', height: '168px', justifyContent: 'center', alignItems: 'center', color: '#fff', textAlign: 'center', lineHeight: '150px' }} > + <img src={item.imgUrl} style={{ width: '150px', height: '150px' }} /> + { + item.signStatus !== 3 ? + <div style={{ width: '150px', height: '150px', backgroundColor: '#000', opacity: '0.2', position: 'absolute' }}>未签到</div> : '' + } + { + item.signStatus == 3 ? + // <div style={{ width: '150px', height: '50px', color:'#000', position: 'absolute' }}>签到时间:{moment(item.updateTime).format(format)}</div> : '' + <div style={{ width: '150px', height: '150px', color: '#000', position: 'absolute', display: 'flex', justifyContent: 'flex-end' }}><Icon type="check-circle" style={{ fontSize: '32px' }} theme="twoTone" twoToneColor="#52c41a" /></div> : '' + } + </div> { item.signStatus == 3 ? - // <div style={{ width: '150px', height: '50px', color:'#000', position: 'absolute' }}>签到时间:{moment(item.updateTime).format(format)}</div> : '' - <div style={{ width: '150px', height: '150px', color:'#000', position: 'absolute', display:'flex',justifyContent:'flex-end' }}><Icon type="check-circle" style={{fontSize:'32px'}} theme="twoTone" twoToneColor="#52c41a" /></div> : '' + <div style={{ padding: '0 12px', width: '168px' }}> + <div>签到人:{item.proposerName}</div> + <div>签到时间:{moment(item.updateTime).format(format)}</div> + </div> : '' } + {/* <Card hoverablestyle={{ width: 240 }} cover={<img alt='example' src={item.imgUrl} />}> + <Meta title={item.proposerName} description={item.updatetime} /> + </Card> */} </div> - )) : <span>暂无数据</span> + + )) : <div style={{ height: '150px' }}>暂无人员签到</div> } </div> + + </Card> </Spin> </div> -- Gitblit v1.8.0