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

add 统计

Browse Source
This commit is contained in:
自带大佬气场
2021-06-17 19:59:14 +08:00
parent d3385102f2
commit 3304fb2f92
7 changed files with 578 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web-react/src/pages/business/statistics/summary/index.jsx Normal file
View 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
View 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>
</>
)
}
}

68
web-react/src/pages/business/statistics/summary/tab1/index.jsx Normal file
View File

@@ -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
View 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
web-react/src/pages/business/statistics/summary/tab2/charts.jsx Normal file
View File

11
web-react/src/pages/business/statistics/summary/tab2/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React, { Component } from 'react'
export default class index extends Component {
render() {
return (
<div>
1
</div>
)
}
}

0
web-react/src/pages/business/statistics/summary/tab2/table.jsx Normal file
View File