update 首页

web-react/src/components/container/index.jsx

@@ -17,7 +17,10 @@ export default class Container extends Component {
     }
 
     render() {
-        const className = this.getMode(this.props.mode)
+        let className = this.getMode(this.props.mode)
+        if (this.props.className) {
+            className += ` ${this.props.className}`
+        }
 
         return (
             <section className={className}>{this.props.children}</section>

web-react/src/pages/home/charts.jsx

@@ -0,0 +1,115 @@
+import React, { Component } from 'react'
+import { Card, Dropdown, Form, Menu } from 'antd'
+import { AntIcon } from 'components'
+import * as echarts from 'echarts'
+
+const options = {
+    tooltip: {
+        trigger: 'axis',
+    },
+    legend: {
+        show: false,
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    },
+    yAxis: {
+        type: 'value',
+    },
+    series: [
+        {
+            name: '邮件营销',
+            type: 'line',
+            stack: '总量',
+            data: [120, 132, 101, 134, 90, 230, 210],
+        },
+        {
+            name: '联盟广告',
+            type: 'line',
+            stack: '总量',
+            data: [220, 182, 191, 234, 290, 330, 310],
+        },
+        {
+            name: '视频广告',
+            type: 'line',
+            stack: '总量',
+            data: [150, 232, 201, 154, 190, 330, 410],
+        },
+        {
+            name: '直接访问',
+            type: 'line',
+            stack: '总量',
+            data: [320, 332, 301, 334, 390, 330, 320],
+        },
+        {
+            name: '搜索引擎',
+            type: 'line',
+            stack: '总量',
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+    ]
+}
+
+export default class charts extends Component {
+
+    componentDidMount() {
+        const chartDom = this.refs.chart
+        const myChart = echarts.init(chartDom)
+        myChart.setOption(options)
+        window.addEventListener('resize', () => {
+            myChart.resize()
+        })
+    }
+
+    render() {
+        return (
+            <Card
+                title="年度项目总完成情况"
+                bordered={false}
+            >
+                <Form layout="inline">
+                    <Form.Item label="区域">
+                        <Dropdown
+                            overlay={
+                                <Menu>
+                                    <Menu.Item>宁波市</Menu.Item>
+                                    <Menu.Item>鄞州区</Menu.Item>
+                                </Menu>
+                            }
+                        >
+                            <span>
+                                宁波市
+                                 <AntIcon type="down" />
+                            </span>
+                        </Dropdown>
+                    </Form.Item>
+                    <Form.Item label="年份">
+                        <Dropdown
+                            overlay={
+                                <Menu>
+                                    <Menu.Item>2021</Menu.Item>
+                                    <Menu.Item>2020</Menu.Item>
+                                    <Menu.Item>2019</Menu.Item>
+                                </Menu>
+                            }
+                        >
+                            <span>
+                                2021
+                                 <AntIcon type="down" />
+                            </span>
+                        </Dropdown>
+                    </Form.Item>
+                </Form>
+                <div ref="chart" style={{ height: '300px' }} />
+            </Card>
+        )
+    }
+}

web-react/src/pages/home/index.jsx

@@ -6,6 +6,12 @@ import { Container, Image, AntIcon } from 'components'
 import moment from 'moment'
 import './index.less'
 
+import Statistics from './statistics'
+import Task from './task'
+import List from './list'
+import Notice from './notice'
+import Charts from './charts'
+
 const { getState, subscribe } = store
 
 const storePath = 'user'
@@ -62,6 +68,21 @@ export default class index extends Component {
                         </Row>
                     </Container>
                 </div>
+                <Container mode="fluid" className="home-container">
+                    <Row gutter={16}>
+                        <Col span={24}>
+                            <Statistics />
+                        </Col>
+                        <Col lg={12} md={24} xl={16}>
+                            <Task />
+                            <List />
+                        </Col>
+                        <Col lg={12} md={24} xl={8}>
+                            <Notice />
+                            <Charts />
+                        </Col>
+                    </Row>
+                </Container>
             </>
         )
     }

web-react/src/pages/home/index.less

@@ -33,7 +33,9 @@
     -webkit-line-clamp: 2;
   }
   .ant-card-meta-description {
-    .ant-row-flex {
+    .ant-row {
+      line-height: 24px;
+
       height: 24px;
     }
   }

web-react/src/pages/home/list.jsx

@@ -0,0 +1,103 @@
+import React, { Component } from 'react'
+import { Card, Table } from 'antd'
+
+const tabList = [
+    {
+        key: '1',
+        tab: '新建项目',
+    },
+    {
+        key: '2',
+        tab: '正在签约项目',
+    },
+    {
+        key: '3',
+        tab: '完成签约项目',
+    },
+    {
+        key: '4',
+        tab: '项目进度',
+    },
+]
+
+const columns = [
+    {
+        title: '区域',
+        dataIndex: 'area',
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'title',
+    },
+    {
+        title: '户数',
+        dataIndex: 'count',
+    },
+    {
+        title: '时间',
+        dataIndex: 'date',
+    },
+]
+
+const data = [
+    {
+        key: '1',
+        area: '海曙区',
+        title: '曙光电影院地块',
+        count: 13,
+        date: '2021-01-01',
+    },
+    {
+        key: '2',
+        area: '江北区',
+        title: '大庆新村地块旧城区改建项目',
+        count: 322,
+        date: '2021-01-01',
+    },
+    {
+        key: '3',
+        area: '宁海县',
+        title: '桥头胡街道旧城区改造华驰文教地块',
+        count: 1,
+        date: '2021-01-01',
+    },
+    {
+        key: '4',
+        area: '慈溪市',
+        title: '七二三南延道路工程',
+        count: 1,
+        date: '2021-01-01',
+    },
+    {
+        key: '5',
+        area: '北仑区',
+        title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
+        count: 32,
+        date: '2021-01-01',
+    },
+]
+
+export default class list extends Component {
+
+    state = {
+        key: '1'
+    }
+
+    render() {
+        return (
+            <Card
+                activeTabKey={this.state.key}
+                tabList={tabList}
+                bordered={false}
+                bodyStyle={{ padding: 0 }}
+                onTabChange={key => this.setState({ key })}
+            >
+                <Table
+                    columns={columns}
+                    dataSource={data}
+                    pagination={false}
+                />
+            </Card>
+        )
+    }
+}

web-react/src/pages/home/notice.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { Card, List } from 'antd'
+import { AntIcon } from 'components'
+import moment from 'moment'
+
+const data = [
+    { title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
+    { title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
+    { title: '关于2020年度房屋征收评估机构信用考核情况的通报' },
+]
+
+export default class notice extends Component {
+    render() {
+        return (
+            <Card
+                bordered={false}
+                title="通知"
+                extra={<a>更多</a>}
+            >
+                <List dataSource={data} itemLayout="horizontal" renderItem={
+                    (item) => (
+                        <List.Item>
+                            <List.Item.Meta
+                                title={item.title}
+                                description={moment().format('YYYY-MM-DD HH:mm:ss')}
+                                avatar={<AntIcon style={{ fontSize: '18px' }} type="MessageTwoTone" />}
+                            />
+                        </List.Item>
+                    )
+                } />
+            </Card>
+        )
+    }
+}

web-react/src/pages/home/statistics.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import { Card, Col, Dropdown, Menu, Row, Statistic } from 'antd'
+import { AntIcon } from 'components'
+
+export default class statistics extends Component {
+    render() {
+        return (
+            <Row gutter={16}>
+                <Col lg={5} md={8} sm={24}>
+                    <Card bordered={false} hoverable={true}>
+                        <Statistic value={0} className="text-center" title="已完成的项目" />
+                    </Card>
+                </Col>
+                <Col lg={5} md={8} sm={24}>
+                    <Card bordered={false} hoverable={true}>
+                        <Statistic value={6} className="text-center" title="正在进行的项目" />
+                    </Card>
+                </Col>
+                <Col lg={5} md={8} sm={24}>
+                    <Card bordered={false} hoverable={true}>
+                        <Statistic value={0} className="text-center" title="还未开始的项目" />
+                    </Card>
+                </Col>
+                <Col lg={9} md={24}>
+                    <Card bordered={false} hoverable={true}>
+                        <Row>
+                            <Col span={12}>
+                                <Statistic value={8893} className="text-center" title="用户总量" />
+                            </Col>
+                            <Col span={12}>
+                                <Statistic
+                                    value={1255}
+                                    valueStyle={{ color: '#3f8600' }}
+                                    className="text-center"
+                                    title={
+                                        <Dropdown
+                                            overlay={
+                                                <Menu>
+                                                    <Menu.Item>当月活跃用户</Menu.Item>
+                                                    <Menu.Item>当年活跃用户</Menu.Item>
+                                                </Menu>
+                                            }
+                                        >
+                                            <span>
+                                                当月活跃用户
+                                                 <AntIcon type="down" />
+                                            </span>
+                                        </Dropdown>
+                                    }
+                                    prefix={
+                                        <AntIcon style={{ fontSize: '13px' }} type="arrow-up" />
+                                    }>
+                                </Statistic>
+                            </Col>
+                        </Row>
+                    </Card>
+                </Col>
+            </Row>
+        )
+    }
+}

web-react/src/pages/home/task.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Avatar, Card, Col, Row, Tooltip } from 'antd'
+
+const data = [
+    {
+        title: '市区雷公巷地块项目选择评估机构及上传相关材料(软件开发人员)',
+        avatar: 'https://tb1.bdstatic.com/tb/steam.jpeg',
+    },
+    {
+        title: '宁海县山河岭6号地块备案(胡靖)',
+        avatar:
+            'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.ac342cde.2vNGrtpPcIUN6lJpSnty3g?t=1615176031',
+    },
+    { title: '宁海县盛宁线力洋至胡陈段公路工程田交朱村 地块备案(胡靖)' },
+    {
+        title: '慈溪市慈溪市危旧房改造一期（西门小区A1区块）项目备案(陆承)',
+        avatar:
+            'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/tb.1.54e2faca.uBtqRshdnVUXL9XFfQMTwg?t=1604074726',
+    },
+    { title: '江北区孔浦成片危旧住宅区改造项目（六号区块）备案(成薇)' },
+    { title: '镇海区宁镇路改扩建工程（庄市段）备案(董力)' },
+    { title: '鄞州区茶桃公路（同谷路—金峨路延伸段）项目备案(软件开发人员)' },
+    { title: '鄞州区咸祥大嵩湖工程备案(软件开发人员)' },
+    { title: '江北区三官堂大桥及接线工程项目备案(成薇)' },
+]
+
+export default class list extends Component {
+    render() {
+        return (
+            <Card bordered={false} title="待办" extra={<a>更多</a>}>
+                {
+                    data.map((item, i) => {
+                        return (
+                            <Card.Grid key={i}>
+                                <Card.Meta
+                                    title={
+                                        <Tooltip placement="top" title={item.title}>
+                                            {item.title}
+                                        </Tooltip>
+                                    }
+                                    description={
+                                        <Row align="middle">
+                                            {
+                                                item.avatar &&
+                                                <Col flex="32px">
+                                                    <Avatar size={24} src={item.avatar} shape="square" />
+                                                </Col>
+                                            }
+                                            <Col flex="auto">
+                                                <Row justify="space-between" type="flex">
+                                                    <Col>软件开发人员</Col>
+                                                    <Col>2020-01-01</Col>
+                                                </Row>
+                                            </Col>
+                                        </Row>
+                                    }
+                                />
+                            </Card.Grid>
+                        )
+                    })
+                }
+            </Card>
+        )
+    }
+}