efats

src/pages/dashboard/components/ABPart.jsx

@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react'
 import { Row, Col } from 'antd'
 
 export default props => {
+
+  const left = props.left || 16
+  const right = 24 - left
+
   return (
-    <Row type="flex" align={props.align || "top"} justify="space-around" gutter={24}>
-      <Col span={16}>{props.a}</Col>
-      <Col span={8}>{props.b}</Col>
+    <Row type="flex" align={props.align || "top"} justify="space-around" gutter={props.gutter || 24}>
+      <Col span={left}>{props.a}</Col>
+      <Col span={right}>{props.b}</Col>
     </Row>
   )
 }

src/pages/dashboard/components/ScrollAlert.jsx

@@ -7,12 +7,14 @@ import { fetch, apis } from '@/utils/request'
 const getDynamic = fetch(apis.dashboard.dynamic)
 
 const Item = props => (
-  <Row gutter={24} type="flex" align="middle" style={{ marginTop: 8, marginBottom: 8 }}>
+  <Row gutter={16} type="flex" align="middle" style={{ marginTop: 8, marginBottom: 8 }}>
     <Col span={8}>{props.dataSource.createDate}</Col>
     <Col span={16}>{`${props.dataSource.nickname} ${props.dataSource.desc}`}</Col>
   </Row>
 )
 
+const showMax = 10
+
 export default props => {
   const [loading, setLoading] = useState(false)
   const [list, setList] = useState([])
@@ -31,15 +33,15 @@ export default props => {
 
       // 组合list
       const compList = [
-        ...(ticketList || []).map(x => ({...x, createDate: moment(x.createDate).format('YYYY-MM-DD HH:mm'), desc: '提了一个工单'})),
-        ...(propList || []).map(x => ({...x, createDate: moment(x.createDate).format('YYYY-MM-DD HH:mm'), desc: '申请了一个业主认证'})),
-        ...(billList || []).map(x => ({...x, createDate: moment(x.createDate).format('YYYY-MM-DD HH:mm'), desc: '缴了一笔费用'})),
+        ...(ticketList || []).map(x => ({...x, createDate: moment(x.createDate).format('MM-DD HH:mm'), desc: '提了一个工单'})),
+        ...(propList || []).map(x => ({...x, createDate: moment(x.createDate).format('MM-DD HH:mm'), desc: '申请了一个业主认证'})),
+        ...(billList || []).map(x => ({...x, createDate: moment(x.createDate).format('MM-DD HH:mm'), desc: '缴了一笔费用'})),
       ]
       
       if (compList.length === 0) {
         setShowSlides(0)
       } else {
-        setShowSlides(compList.length > 10 ? 10 : compList.length - 1)
+        setShowSlides(compList.length > showMax ? showMax : compList.length - 1)
       }
 
       // 按照时间倒叙

src/pages/dashboard/components/ShortCut.jsx

@@ -6,7 +6,7 @@ import { fetch, apis } from '@/utils/request'
 import ABPart from './ABPart'
 
 const Title = props => <div> <Icon type={props.icon} style={{color: props.color, fontSize: '1.2em'}} /> <span style={{display: 'inline-block', marginLeft: 8}}>{props.children}</span></div>
-const StatNum = props => <Spin spinning={props.loading}><div style={{textAlign: 'center'}}><span style={{fontSize: '2em'}}>{props.value}</span> {props.unit}</div></Spin>
+const StatNum = props => <Spin spinning={props.loading}><div style={{textAlign: 'center'}}><span style={{fontSize: '1.6em'}}>{props.value}</span> {props.unit}</div></Spin>
 
 const getStatis = fetch(apis.dashboard.statis)
 
@@ -37,6 +37,8 @@ export default props => {
           <Card title={false}>
             <ABPart
               align="middle"
+              gutter={8}
+              left={12}
               a={<Title icon="home" color="#f50">楼栋管理</Title>}
               b={<StatNum loading={loading} value={data.buildingNum} unit="栋" />}
             />
@@ -48,6 +50,8 @@ export default props => {
           <Card title={false}>
             <ABPart
               align="middle"
+              gutter={8}
+              left={12}
               a={<Title icon="user" color="#2db7f5">业主管理</Title>}
               b={<StatNum loading={loading} value={data.propNum} unit="人" />}
             />
@@ -59,7 +63,9 @@ export default props => {
           <Card title={false}>
             <ABPart
               align="middle"
-              a={<Title icon="bank" color="#87d068">缴费管理(本月)</Title>}
+              gutter={8}
+              left={12}
+              a={<Title icon="bank" color="#87d068">缴费(本月)</Title>}
               b={<StatNum loading={loading} value={data.houseNum} unit="单" />}
             />
           </Card>
@@ -70,7 +76,9 @@ export default props => {
           <Card title={false}>
             <ABPart
               align="middle"
-              a={<Title icon="bell" color="#108ee9">工单管理(本月)</Title>}
+              gutter={8}
+              left={12}
+              a={<Title icon="bell" color="#108ee9">工单(本月)</Title>}
               b={<StatNum loading={loading} value={data.ticketNum} unit="条" />}
             />
           </Card>