add 统计
This commit is contained in:
88
web-react/src/pages/business/statistics/summary/index.jsx
Normal file
88
web-react/src/pages/business/statistics/summary/index.jsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Radio, Tabs } from 'antd'
|
||||
import { ComponentDynamic } from 'components'
|
||||
import AntIcon from 'components/ant-icon'
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: '按房屋等级',
|
||||
component: () => import('./tab1'),
|
||||
},
|
||||
{
|
||||
title: '按房屋结构',
|
||||
component: () => import('./tab2'),
|
||||
},
|
||||
]
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
activeKey: '0',
|
||||
types: ['charts', 'charts']
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { activeKey, types } = this.state
|
||||
|
||||
return (
|
||||
<div className="yo-form-page">
|
||||
<div className="yo-form-page-layout">
|
||||
<div className="yo-tab-external-mount">
|
||||
<Tabs
|
||||
tabBarExtraContent={
|
||||
<Radio.Group
|
||||
buttonStyle="solid"
|
||||
value={types[activeKey]}
|
||||
onChange={(e) => {
|
||||
const t = [...types]
|
||||
t[activeKey] = e.target.value
|
||||
this.setState({
|
||||
types: t
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Radio.Button value="charts">
|
||||
<AntIcon type="bar-chart" />
|
||||
</Radio.Button>
|
||||
<Radio.Button value="table">
|
||||
<AntIcon type="table" />
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
}
|
||||
onChange={(activeKey) => this.setState({ activeKey })}
|
||||
>
|
||||
{
|
||||
tabs.map((item, i) => (
|
||||
<Tabs.TabPane
|
||||
key={i}
|
||||
forceRender={true}
|
||||
tab={item.title}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Tabs>
|
||||
<div className="yo-tab-external-mount-content">
|
||||
{
|
||||
tabs.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={[
|
||||
'yo-tab-external-tabpane',
|
||||
activeKey == i ?
|
||||
'yo-tab-external-tabpane-active'
|
||||
:
|
||||
'yo-tab-external-tabpane-inactive'
|
||||
].join(' ')}
|
||||
>
|
||||
<ComponentDynamic is={item.component} type={types[i]} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
202
web-react/src/pages/business/statistics/summary/tab1/charts.jsx
Normal file
202
web-react/src/pages/business/statistics/summary/tab1/charts.jsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Col, Row } from 'antd'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const echartsColors = [
|
||||
{ from: '#14dbff', to: '#007dff' },
|
||||
{ from: '#45f4a6', to: '#3bb27d' },
|
||||
{ from: '#fbb456', to: '#f1961b' },
|
||||
{ from: '#fa7148', to: '#ef5932' },
|
||||
]
|
||||
|
||||
function itemColor(index) {
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: echartsColors[index % echartsColors.length].from,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: echartsColors[index % echartsColors.length].to,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function initChart1(dom) {
|
||||
const chart = echarts.init(dom);
|
||||
chart.setOption({
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '<b>{b}</b> : {c}幢 ({d}%)',
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '面积模式',
|
||||
type: 'pie',
|
||||
radius: [50, 150],
|
||||
startAngle: 110,
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
label: {
|
||||
formatter: '{d}',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70,
|
||||
name: 'A级',
|
||||
itemStyle: {
|
||||
color: itemColor(0),
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 38,
|
||||
name: 'B级',
|
||||
itemStyle: {
|
||||
color: itemColor(1),
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
name: 'C级',
|
||||
itemStyle: {
|
||||
color: itemColor(2),
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: 'D级',
|
||||
itemStyle: {
|
||||
color: itemColor(3),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function initChart2(dom) {
|
||||
const chart = echarts.init(dom);
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
formatter: '<b>{b}</b> : {c}幢',
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['A级', 'B级', 'C级', 'D级'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: itemColor(0),
|
||||
borderRadius: 10,
|
||||
},
|
||||
data: [120, 200, 150, 80],
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function initChart3(dom) {
|
||||
const chart = echarts.init(dom);
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
formatter: '<b>{b}</b> : {c}幢',
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['A级', 'B级', 'C级', 'D级'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 800, 900],
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 3,
|
||||
shadowColor: echartsColors[0].from,
|
||||
opacity: 0.5,
|
||||
cap: 'round',
|
||||
},
|
||||
itemStyle: {
|
||||
color: itemColor(0),
|
||||
},
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
export default class charts extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
initChart1(this.refs['chart-1'])
|
||||
initChart2(this.refs['chart-2'])
|
||||
initChart3(this.refs['chart-3'])
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Card bordered={false} type="inner">
|
||||
<div style={{ height: '400px' }} ref="chart-1"></div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<Card bordered={false} type="inner">
|
||||
<div style={{ height: '400px' }} ref="chart-2"></div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card bordered={false} type="inner">
|
||||
<div style={{ height: '400px' }} ref="chart-3"></div>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Button, Card, Cascader, Divider, Form, Radio } from 'antd'
|
||||
import { Container } from 'components'
|
||||
|
||||
import StatisticsCharts from './charts'
|
||||
import StatisticsTable from './table'
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
render: 'charts'
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props) {
|
||||
return {
|
||||
render: props.type
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container mode="fluid">
|
||||
<Card bordered={false} type="inner">
|
||||
<Form labelCol={{ flex: '70px' }} wrapperCol={{ flex: '1' }}>
|
||||
<Form.Item className="yo-filter-item" label="房屋性质">
|
||||
<Radio.Group defaultValue={''} buttonStyle="solid" size="small">
|
||||
<Radio.Button value={''}>全部</Radio.Button>
|
||||
<Radio.Button value="1">住宅</Radio.Button>
|
||||
<Radio.Button value="2">非住宅</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Divider className="mt-sm mb-sm" dashed />
|
||||
<Form.Item className="yo-filter-item" label="审核状态">
|
||||
<Radio.Group defaultValue={''} buttonStyle="solid" size="small">
|
||||
<Radio.Button value={''}>全部</Radio.Button>
|
||||
<Radio.Button value="1">待建档</Radio.Button>
|
||||
<Radio.Button value="2">暂存</Radio.Button>
|
||||
<Radio.Button value="3">待提交</Radio.Button>
|
||||
<Radio.Button value="4">退回</Radio.Button>
|
||||
<Radio.Button value="5">待审核</Radio.Button>
|
||||
<Radio.Button value="6">审核通过</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Divider className="mt-sm mb-sm" dashed />
|
||||
<Form.Item className="yo-filter-item" label="土地性质">
|
||||
<Radio.Group defaultValue={''} buttonStyle="solid" size="small">
|
||||
<Radio.Button value={''}>全部</Radio.Button>
|
||||
<Radio.Button value="1">国有土地</Radio.Button>
|
||||
<Radio.Button value="2">集体土地</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Divider className="mt-sm mb-sm" dashed />
|
||||
<Form.Item className="yo-filter-item" label="筛选范围">
|
||||
<Cascader className="w-400" placeholder="请选择区域" />
|
||||
</Form.Item>
|
||||
<Divider className="mt-sm mb-sm" dashed />
|
||||
<div className="text-center">
|
||||
<Button className="mr-xs" type="primary">查询</Button>
|
||||
<Button>导出Excel</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
{this.state.render == 'charts' && <StatisticsCharts />}
|
||||
{this.state.render == 'table' && <StatisticsTable />}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
209
web-react/src/pages/business/statistics/summary/tab1/table.jsx
Normal file
209
web-react/src/pages/business/statistics/summary/tab1/table.jsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Card, Table } from 'antd'
|
||||
import { isEqual } from 'lodash'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '区域',
|
||||
dataIndex: 'area',
|
||||
width: 150,
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
title: '总数',
|
||||
children: [
|
||||
{
|
||||
title: '幢数(占比)',
|
||||
dataIndex: 'z',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '建筑面积(占比)',
|
||||
dataIndex: 'j',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'h',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '房屋等级',
|
||||
children: [
|
||||
{
|
||||
title: '一级',
|
||||
children: [
|
||||
{
|
||||
title: '幢数',
|
||||
dataIndex: 'z1',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
dataIndex: 'j1',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'h1',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '二级',
|
||||
children: [
|
||||
{
|
||||
title: '幢数',
|
||||
dataIndex: 'z2',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
dataIndex: 'j2',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'h2',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '三级',
|
||||
children: [
|
||||
{
|
||||
title: '幢数',
|
||||
dataIndex: 'z3',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
dataIndex: 'j3',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'h3',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '四级',
|
||||
children: [
|
||||
{
|
||||
title: '幢数',
|
||||
dataIndex: 'z4',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
dataIndex: 'j4',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'h4',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'C级',
|
||||
children: [
|
||||
{
|
||||
title: '幢数',
|
||||
dataIndex: 'zc',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
dataIndex: 'jc',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'hc',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'D级',
|
||||
children: [
|
||||
{
|
||||
title: '幢数',
|
||||
dataIndex: 'zd',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
dataIndex: 'jd',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '户数',
|
||||
dataIndex: 'hd',
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const data = []
|
||||
for (let i = 0; i < 30; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
area: 'John Brown',
|
||||
z: 100,
|
||||
j: 1222.33,
|
||||
h: 39,
|
||||
z1: 20,
|
||||
j1: 20,
|
||||
h1: 20,
|
||||
z2: 20,
|
||||
j2: 20,
|
||||
h2: 20,
|
||||
z3: 20,
|
||||
j3: 20,
|
||||
h3: 20,
|
||||
z4: 20,
|
||||
j4: 20,
|
||||
h4: 20,
|
||||
zc: 20,
|
||||
jc: 20,
|
||||
hc: 20,
|
||||
zd: 20,
|
||||
jd: 20,
|
||||
hd: 20,
|
||||
})
|
||||
}
|
||||
|
||||
export default class table extends Component {
|
||||
|
||||
shouldComponentUpdate(props, state) {
|
||||
return !isEqual(this.state, state)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card bordered={false}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
scroll={{ x: 'max-content' }}
|
||||
bordered
|
||||
size="middle"
|
||||
sticky
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
export default class index extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user