From 3304fb2f9258d11b53b79ae58a9820aaf43bd2c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?=
 <188633308@qq.com>
Date: Thu, 17 Jun 2021 19:59:14 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/statistics/summary/index.jsx     |  88 ++++++++
 .../statistics/summary/tab1/charts.jsx        | 202 +++++++++++++++++
 .../statistics/summary/tab1/index.jsx         |  68 ++++++
 .../statistics/summary/tab1/table.jsx         | 209 ++++++++++++++++++
 .../statistics/summary/tab2/charts.jsx        |   0
 .../statistics/summary/tab2/index.jsx         |  11 +
 .../statistics/summary/tab2/table.jsx         |   0
 7 files changed, 578 insertions(+)
 create mode 100644 web-react/src/pages/business/statistics/summary/index.jsx
 create mode 100644 web-react/src/pages/business/statistics/summary/tab1/charts.jsx
 create mode 100644 web-react/src/pages/business/statistics/summary/tab1/index.jsx
 create mode 100644 web-react/src/pages/business/statistics/summary/tab1/table.jsx
 create mode 100644 web-react/src/pages/business/statistics/summary/tab2/charts.jsx
 create mode 100644 web-react/src/pages/business/statistics/summary/tab2/index.jsx
 create mode 100644 web-react/src/pages/business/statistics/summary/tab2/table.jsx

diff --git a/web-react/src/pages/business/statistics/summary/index.jsx b/web-react/src/pages/business/statistics/summary/index.jsx
new file mode 100644
index 0000000..37fba3b
--- /dev/null
+++ b/web-react/src/pages/business/statistics/summary/index.jsx
@@ -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>
+        )
+    }
+}
diff --git a/web-react/src/pages/business/statistics/summary/tab1/charts.jsx b/web-react/src/pages/business/statistics/summary/tab1/charts.jsx
new file mode 100644
index 0000000..c6be21d
--- /dev/null
+++ b/web-react/src/pages/business/statistics/summary/tab1/charts.jsx
@@ -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>
+            </>
+        )
+    }
+}
diff --git a/web-react/src/pages/business/statistics/summary/tab1/index.jsx b/web-react/src/pages/business/statistics/summary/tab1/index.jsx
new file mode 100644
index 0000000..b8329fe
--- /dev/null
+++ b/web-react/src/pages/business/statistics/summary/tab1/index.jsx
@@ -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>
+        )
+    }
+}
diff --git a/web-react/src/pages/business/statistics/summary/tab1/table.jsx b/web-react/src/pages/business/statistics/summary/tab1/table.jsx
new file mode 100644
index 0000000..6c5bd7e
--- /dev/null
+++ b/web-react/src/pages/business/statistics/summary/tab1/table.jsx
@@ -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>
+        )
+    }
+}
diff --git a/web-react/src/pages/business/statistics/summary/tab2/charts.jsx b/web-react/src/pages/business/statistics/summary/tab2/charts.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/web-react/src/pages/business/statistics/summary/tab2/index.jsx b/web-react/src/pages/business/statistics/summary/tab2/index.jsx
new file mode 100644
index 0000000..70b0147
--- /dev/null
+++ b/web-react/src/pages/business/statistics/summary/tab2/index.jsx
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class index extends Component {
+    render() {
+        return (
+            <div>
+                1
+            </div>
+        )
+    }
+}
diff --git a/web-react/src/pages/business/statistics/summary/tab2/table.jsx b/web-react/src/pages/business/statistics/summary/tab2/table.jsx
new file mode 100644
index 0000000..e69de29