feats

config/routes.js

@@ -25,7 +25,7 @@ export default [
           {
             path: '/index',
             name: '首页',
-            component: './Index',
+            component: './dashboard',
           },
           // {
           //   path: '/',

src/pages/dashboard/components/ABPart.jsx

@@ -0,0 +1,11 @@
+import React, { useEffect, useState } from 'react'
+import { Row, Col } from 'antd'
+
+export default props => {
+  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>
+  )
+}

src/pages/dashboard/components/BuildingStatic.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+import { Row, Col, Statistic, Icon, Spin } from 'antd'
+import { apis, fetch } from '@/utils/request'
+
+const getHouseVerified = fetch(apis.dashboard.houseVerified)
+
+export default props => {
+  const [loading, setLoading] = useState({})
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    setLoading(true)
+    getHouseVerified().then(res => {
+      setData(res)
+      setLoading(false)
+    }).catch(e => console.error(e) || setLoading(false))
+  }, [])
+
+
+  return (
+    <Spin spinning={loading}>
+      <Row gutter={16}>
+        <Col span={4}>
+          {/* <Statistic title={<div><Icon type="bell" style={{fontSize: '1.2em'}} /> 工单 </div>} value={112893} /> */}
+        </Col>
+        <Col span={10}>
+          <Statistic title={<div><Icon type="home" style={{fontSize: '1.2em'}} /> 已认证(户) </div>} value={data.valid} />
+        </Col>
+        <Col span={10}>
+          <Statistic title={<div><Icon type="home" style={{fontSize: '1.2em'}} /> 未认证(户) </div>} value={data.total - data.valid} />
+        </Col>
+      </Row>
+    </Spin>
+  )
+}

src/pages/dashboard/components/CommAlert.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react'
+import { Card, Alert, Icon } from 'antd'
+import { fetch, apis } from '@/utils/request'
+import Link from 'umi/link'
+
+const getTips = fetch(apis.dashboard.tips)
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    setLoading(true)
+    getTips().then(res => {
+      setData(res)
+      setLoading(false)
+    }).catch(e => console.error(e) || setLoading(false))
+  }, [])
+
+  const ticket = data.ticketNum ? `您有 ${data.ticketNum} 个待处理工单, 点击处理` : '暂无未处理工单'
+  const verify = data.verifyNum ? `您有 ${data.verifyNum} 条待审核记录, 点击处理` : '暂无业主申请'
+  const exchange = data.exchangeNum ? `累计有 ${data.exchangeNum} 条兑换记录, 点击查看` : '暂兑换记录'
+  const enlistNum = data.enlistNum && data.enlistNum.dynamicId ? `总计 ${data.enlistNum.num} 人报名参与 ${data.enlistNum.title} 活动, 点击查看` : '暂进行中活动'
+
+  return (
+    <Card title="日常工作" bordered={false} loading={loading}>
+      <Link to="/property/ticket">
+        <Alert
+          message="工单报修"
+          description={ticket}
+          type="success"
+          showIcon
+          icon={<Icon type="snippets" />}
+          style={{marginBottom: 16}}
+        />
+      </Link>
+      <Link to="/property/proprietor/audit">
+        <Alert
+          message="业主审核"
+          description={verify}
+          type="info"
+          showIcon
+          icon={<Icon type="user-add" />}
+          style={{marginBottom: 16}}
+        />
+      </Link>
+      <Link to="/integralMall/exchangeRecords">
+        <Alert
+          message="商品兑换"
+          description={exchange}
+          type="warning"
+          showIcon
+          icon={<Icon type="gift" />}
+          style={{marginBottom: 16}}
+        />
+      </Link>
+      <Link to={data.enlistNum && data.enlistNum.dynamicId ? `/activity/detailActivity?dynamicId=${data.enlistNum.dynamicId}` : '/activity/ActivityList'}>
+        <Alert
+          message="活动报名"
+          description={enlistNum}
+          type="error"
+          showIcon
+          icon={<Icon type="crown" />}
+          // style={{marginBottom: 16}}
+        />
+      </Link>
+    </Card>
+  )
+}

src/pages/dashboard/components/ScrollAlert.jsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import { Card, Carousel, Row, Col } from 'antd'
+import moment from 'moment'
+import { orderBy } from 'lodash'
+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 }}>
+    <Col span={8}>{props.dataSource.createDate}</Col>
+    <Col span={16}>{`${props.dataSource.nickname} ${props.dataSource.desc}`}</Col>
+  </Row>
+)
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [list, setList] = useState([])
+  const [showSlides, setShowSlides] = useState(0)
+
+  useEffect(() => {
+    const today = moment()
+    // 取最近 15 天的记录
+    const endDate = today.format('YYYY-MM-DD')
+    today.subtract(15, 'days')
+    const startDate = today.format('YYYY-MM-DD')
+
+    setLoading(true)
+    getDynamic({params: {startDate, endDate}}).then(res => {
+      const { ticketList, propList, billList } = res
+
+      // 组合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: '缴了一笔费用'})),
+      ]
+      
+      if (compList.length === 0) {
+        setShowSlides(0)
+      } else {
+        setShowSlides(compList.length > 10 ? 10 : compList.length - 1)
+      }
+
+      // 按照时间倒叙
+      const newList = orderBy(compList, ['createDate'], ['desc'])
+      setList(newList)
+
+      setLoading(false)
+    }).catch(e => console.error(e) || setLoading(false))
+
+  }, [])
+
+  return (
+    <Card title="最新动态" loading={loading}>
+      <Carousel
+        dots={false}
+        autoplay={true}
+        lazyLoad={true}
+        infinite={true}
+        speed={500}
+        slidesToShow={showSlides}
+        slidesToScroll={1}
+        dotPosition="right"
+      >
+        {
+          list.map(x => <Item key={x.createDate} dataSource={x} />)
+        }
+      </Carousel>
+    </Card>
+  )
+}

src/pages/dashboard/components/ShortCut.jsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react'
+import { Card, Row, Col, Icon, Spin } from 'antd'
+import moment from 'moment'
+import Link from 'umi/link'
+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 getStatis = fetch(apis.dashboard.statis)
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    const today = moment()
+    // 当月第一天
+    const startDate = today.format('YYYY-MM-01')
+
+    // 当月最后一天,
+    // 因为当前日期是业务数据最大值, 因此当天的数据跟月末是一致的
+    const endDate = today.format(`YYYY-MM-DD`)
+
+    setLoading(true)
+    getStatis({params: {startDate, endDate}}).then(res => {
+      setData(res)
+      setLoading(false)
+    }).catch(er => setLoading(false))
+  }, [])
+
+  return (
+    <Row gutter={24}>
+      <Col span={6}>
+        <Link to="/property/buildingInfo">
+          <Card title={false}>
+            <ABPart
+              align="middle"
+              a={<Title icon="home" color="#f50">楼栋管理</Title>}
+              b={<StatNum loading={loading} value={data.buildingNum} unit="栋" />}
+            />
+          </Card>
+        </Link>
+      </Col>
+      <Col span={6}>
+        <Link to="/property/proprietor">
+          <Card title={false}>
+            <ABPart
+              align="middle"
+              a={<Title icon="user" color="#2db7f5">业主管理</Title>}
+              b={<StatNum loading={loading} value={data.propNum} unit="人" />}
+            />
+          </Card>
+        </Link>
+      </Col>
+      <Col span={6}>
+        <Link to="/property/bill/management">
+          <Card title={false}>
+            <ABPart
+              align="middle"
+              a={<Title icon="bank" color="#87d068">缴费管理(本月)</Title>}
+              b={<StatNum loading={loading} value={data.houseNum} unit="单" />}
+            />
+          </Card>
+        </Link>
+      </Col>
+      <Col span={6}>
+        <Link to="/property/bill/ticket">
+          <Card title={false}>
+            <ABPart
+              align="middle"
+              a={<Title icon="bell" color="#108ee9">工单管理(本月)</Title>}
+              b={<StatNum loading={loading} value={data.ticketNum} unit="条" />}
+            />
+          </Card>
+        </Link>
+      </Col>
+    </Row>
+  )
+}

src/pages/dashboard/index.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+import { PageHeader, Row, Col, Card, Icon } from 'antd'
+import ABPart from './components/ABPart'
+import BuildingStatic from './components/BuildingStatic'
+import ShortCut from './components/ShortCut'
+import CommAlert from './components/CommAlert'
+import ScrollAlert from './components/ScrollAlert'
+
+export default props => {
+  // const [] = useState()
+
+
+  // useEffect(() => {
+
+  // }, [])
+
+  const randText = `精铸致远，盛道自来。
+  今天的远道集团，以卓越的产品和服务创造高品质生活与理想工作为使命，建设家园，服务社会，创造美好生活。
+  我们相信，致远需要我们时刻创新奋进，而盛道的来临也正因为我们每一天为创造美好而不懈的努力！`
+
+  return (
+    <div>
+      <PageHeader
+        title="工作台"
+        backIcon={false}
+        ghost={false}
+      >
+        <ABPart
+          align="middle"
+          a={<div style={{verticalAlign: 'center'}}><p>管理员您好, 祝您开心每一天! </p><p>{randText}</p></div>}
+          b={<BuildingStatic />}
+        />
+      </PageHeader>
+
+      <div style={{marginTop: 24}}><ShortCut /></div>
+      
+      <div style={{marginTop: 24}}>
+        <ABPart
+          a={<CommAlert />}
+          b={<ScrollAlert />}
+        />
+      </div>
+    </div>
+  )
+}

src/services/apis.js

@@ -5,6 +5,7 @@ import propUser from './prop_user_api'
 import announcement from './announcement_api'
 import ticket from './ticket_api'
 import propNews from './prop_news_api'
+import dashboard from './dashboard_api'
 
 const prefix = `${APIBaseURL}api/admin`
 
@@ -19,6 +20,7 @@ export default {
   announcement: announcement(prefix),
   ticket: ticket(prefix),
   propNews: propNews(prefix),
+  dashboard: dashboard(prefix),
   mp: {
     detail: {
       url: `${prefix}/taMpInfo`,

src/services/dashboard_api.js

@@ -0,0 +1,25 @@
+
+export default prefix => {
+  return {
+    statis: {
+      url: `${prefix}/dashboard/statis`,
+      method: 'get',
+      action: `admin.dashboard.statis`
+    },
+    dynamic: {
+      url: `${prefix}/dashboard/dynamic`,
+      method: 'get',
+      action: `admin.dashboard.dynamic`
+    },
+    houseVerified: {
+      url: `${prefix}/dashboard/house-verified`,
+      method: 'get',
+      action: `admin.dashboard.house-verified`
+    },
+    tips: {
+      url: `${prefix}/dashboard/tips`,
+      method: 'get',
+      action: `admin.dashboard.tips`
+    }
+  }
+}