ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 首页

Browse Source
This commit is contained in:
自带大佬气场
2021-06-17 15:12:33 +08:00
parent 70112b5c51
commit 47f83048b0
8 changed files with 406 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
web-react/src/pages/home/charts.jsx Normal file
View File

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

21
web-react/src/pages/home/index.jsx
View File

@@ -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>
</>
)
}

4
web-react/src/pages/home/index.less
View File

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

103
web-react/src/pages/home/list.jsx Normal file
View File

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

34
web-react/src/pages/home/notice.jsx Normal file
View File

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

61
web-react/src/pages/home/statistics.jsx Normal file
View File

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

65
web-react/src/pages/home/task.jsx Normal file
View File

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