1

src/components/Main/Content/FilterPanel/index.js

@@ -0,0 +1,34 @@
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { useState, useEffect } from 'react'
+export default function FilterPanel(props) {
+    const { visible, title } = props;
+    return visible ? <div style={{
+        position: "absolute",
+        top: 73,
+        left: 292,
+        width: 600,
+        // height: 500,
+        border: "1px solid #157DD0",
+        background: "rgba(2,38,65,0.95)",
+        zIndex: 10
+    }}>
+        <div className='layout-h center' style={{
+            padding: 12,
+            background: "#165CAC99",
+            // opacity: 0.5
+        }}>
+            <div className='fill w0' style={{
+                fontSize: 18
+            }}>{title}</div>
+            <Button onClick={e => {
+                props.onCancel?.()
+            }} type="text" icon={<CloseCircleOutlined />} shape='circle'></Button>
+        </div>
+        <div className='' style={{
+            padding: 24
+        }}>
+            {props.children}
+        </div>
+    </div> : null;
+}

src/components/Main/Content/index.js

@@ -12,12 +12,15 @@ import YhswRight from '../components/Yhsw/YhswRight';
 import StxfgcLeft from '../components/Stxfgc/StxfgcLeft';
 import WlwsbLeft from '../components/Wlwsb/WlwsbLeft';
 import CdzzyLeft from '../components/Cdzzy/CdzzyLeft';
+import FilterPanel from './FilterPanel';
+import CdzyFilter from '../components/Cdzy/CdzyFilter';
 
 const items = [{
     name: '草地资源',
     key: 'cdzy',
     LeftPanel: CdzyLeft,
-    RightPanel: CdzyRight
+    RightPanel: CdzyRight,
+    Filter: CdzyFilter
 }, {
     name: '草地退化',
     key: 'cdth',
@@ -43,10 +46,12 @@ const items = [{
 
 export default function Content(props) {
     const [current, setCurrent] = useState();
+    const [filterVisible, setFilterVisible] = useState();
 
     const currentItem = items.find(item => item.key === current);
     const LeftPanel = currentItem?.LeftPanel;
     const RightPanel = currentItem?.RightPanel;
+    const Filter = currentItem?.Filter;
 
     return <div className='wh100 main-content layout-h'>
         <div className='left-panel layout-v'>
@@ -101,12 +106,20 @@ export default function Content(props) {
                                 marginBottom: 2
                             }}>{item.name}</div>
                         </Checkbox>
-                        <Button style={{
+                        <Button onClick={e => {
+                            setCurrent(item.key);
+                            setFilterVisible(true)
+                        }} style={{
                             marginTop: 2
                         }} type="text" icon={<FilterOutlined />} shape='circle'></Button>
                     </div>
                 })}
             </div>
+            <FilterPanel title={currentItem?.name + '筛选'} visible={filterVisible} onCancel={e => {
+                setFilterVisible(false)
+            }} >
+                {Filter && <Filter />}
+            </FilterPanel>
         </div>
         <div className='right-panel layout-v'>
             {RightPanel ? <RightPanel /> : null}

src/components/Main/components/Cdzy/CdzyFilter/index.js

@@ -0,0 +1,92 @@
+import { Col, Divider, Form, Radio, Row, Select } from 'antd';
+import { useState, useEffect } from 'react'
+import ZoneSelector from '../../../../common/ZoneSelector';
+import CdzyApi from '../../../../../utils/apis/CdzyApi';
+
+const toAlb = (text) => {
+    return text?.replace('一', '1')
+        ?.replace('二', '2')
+        ?.replace('三', '3')
+        ?.replace('四', '4')
+        ?.replace('五', '5')
+        ?.replace('六', '6')
+        ?.replace('七', '7')
+        ?.replace('八', '8')
+        ?.replace('九', '9')
+}
+
+export default function CdzyFilter(props) {
+
+    const [cdxDatas, setCdxDatas] = useState([]);
+    const [cydjDatas, setCydjDatas] = useState([]);
+    const [form] = Form.useForm();
+
+    useEffect(() => {
+        CdzyApi.minTypeAreaProportion().then(resp => {
+            setCdxDatas(resp.data);
+        })
+    }, [])
+    useEffect(() => {
+        CdzyApi.areaProportion().then(resp => {
+            setCydjDatas(resp.data);
+        })
+    }, [])
+
+    useEffect(() => {
+        form.setFieldsValue({
+            area_code: "-1",
+            grass_type: "-1",
+            grass_min_type: "-1",
+            grassland_level: "-1"
+        })
+    }, [form])
+
+    return <Form form={form} layout={"vertical"}>
+        <Form.Item label="行政地域" name="area_code">
+            <ZoneSelector />
+        </Form.Item>
+        <Divider style={{
+            borderColor: "#075C88"
+        }} />
+        <Form.Item label="草地类" name="grass_type">
+            <Radio.Group>
+                <Radio value={"-1"}>全部</Radio>
+                <Radio value={"高寒草甸类"}>高寒草甸类</Radio>
+                <Radio value={"低地草甸类"}>低地草甸类</Radio>
+                <Radio value={"山地草甸类"}>山地草甸类</Radio>
+            </Radio.Group>
+        </Form.Item>
+        <Divider style={{
+            borderColor: "#075C88"
+        }} />
+        <Row>
+            <Col span={11}>
+                <Form.Item label="草原型" name="grass_min_type">
+                    <Select options={[{
+                        label: '全部',
+                        value: "-1"
+                    }, ...cdxDatas?.map(item => {
+                        return {
+                            label: item.grassMinType,
+                            value: item.grassMinType
+                        }
+                    })]} />
+                </Form.Item>
+            </Col>
+            <Col span={2}></Col>
+            <Col span={11}>
+                <Form.Item label="草原等级" name="grassland_level">
+                    <Select options={[{
+                        label: '全部',
+                        value: "-1"
+                    }, ...cydjDatas?.map(item => {
+                        return {
+                            label: item.name,
+                            value: toAlb(item.name)
+                        }
+                    })]} />
+                </Form.Item>
+            </Col>
+        </Row>
+    </Form>;
+}

src/components/Main/components/Cdzzy/CdzzyLeft/Ztmjtj/echartsOptions.js

@@ -0,0 +1,128 @@
+import * as echarts from 'echarts'
+import { } from 'echarts-gl'
+import _ from 'lodash';
+export const getOption = (datas) => {
+    var colorArray = [
+        {
+            top: '#FFB12A', //黄
+            bottom: '#0B2733'
+        },
+        {
+            top: '#00ACFF', //黄
+            bottom: '#0B2733'
+        }
+    ];
+
+    const levelGroupDatas = _.groupBy(datas, 'level');
+
+    let firstDatas, resultDatas = [];
+    _.keys(levelGroupDatas).forEach(key => {
+        if (!firstDatas) {
+            firstDatas = levelGroupDatas[key];
+            resultDatas.push(levelGroupDatas[key])
+        } else {
+            const rs = []
+            firstDatas.forEach(firstData => {
+                const item = levelGroupDatas[key]?.find(d => d.areaName === firstData.areaName);
+                rs.push({
+                    ...item,
+                    areaName: firstData.areaName,
+                    acreage: item?.acreage || 0
+                })
+            })
+            resultDatas.push(rs)
+        }
+    })
+    return {
+        tooltip: {
+            show: true,
+            formatter: "{b}:{c}"
+        },
+        grid: {
+            left: '0',
+            top: '0',
+            right: '0',
+            bottom: '0',
+            containLabel: true
+        },
+
+        xAxis: {
+            type: 'value',
+            show: false,
+            position: 'top',
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: '#fff',
+                }
+            },
+            splitLine: {
+                show: false
+            },
+        },
+        yAxis: [{
+            type: 'category',
+            axisTick: {
+                show: false,
+                alignWithLabel: false,
+                length: 5,
+
+            },
+            "splitLine": { //网格线
+                "show": false
+            },
+            inverse: 'true', //排序
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: '#fff',
+                }
+            },
+            data: resultDatas?.[0]?.map(data => data.areaName)
+        }
+
+        ],
+        series: resultDatas?.map((resultData, i) => {
+            return {
+                name: '',
+                type: 'bar',
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'right',
+                        formatter: '{c}',
+                        textStyle: {
+                            color: 'white' //color of value
+                        }
+                    }
+                },
+                barWidth: 8,
+                itemStyle: {
+                    normal: {
+                        show: true,
+                        color: function (params) {
+                            return {
+                                type: 'linear',
+                                colorStops: [{
+                                    offset: 0,
+                                    color: colorArray[i % 2].bottom
+                                }, {
+                                    offset: 1,
+                                    color: colorArray[i % 2].top
+                                }],
+                                //globalCoord: false
+                            }
+                        },
+                        barBorderRadius: 70,
+                        borderWidth: 0,
+                        borderColor: '#333',
+                    }
+                },
+                data: resultData?.map(d => d.acreage)
+            }
+        })
+    };
+}

src/components/Main/components/Cdzzy/CdzzyLeft/Ztmjtj/index.js

@@ -0,0 +1,30 @@
+import { useState, useEffect, useRef } from 'react'
+import useEcharts from '../../../../../hooks/useEcharts';
+import CdzyApi from '../../../../../../utils/apis/CdzyApi';
+import { getOption } from './echartsOptions';
+import LittleTitle from '../../../../../common/LittleTitle';
+import HomeApi from '../../../../../../utils/apis/HomeApi';
+import CdzzyApi from '../../../../../../utils/apis/CdzzyApi';
+
+export default function Ztmjtj(props) {
+    const [data, setData] = useState();
+    const ref = useRef();
+    const chart = useEcharts(ref.current);
+    useEffect(() => {
+
+        CdzzyApi.acreageCount().then(resp => {
+            setData(resp.data);
+        })
+    }, []);
+    useEffect(() => {
+        if (chart && data) {
+            const options = getOption(data);
+            chart.setOption(options);
+        }
+    }, [chart, data]);
+    return <>
+        <LittleTitle>占用面积统计</LittleTitle>
+        <div ref={ref} className="fill h0" style={{
+        }}></div>
+    </>
+}

src/components/Main/components/Cdzzy/CdzzyLeft/index.js

@@ -5,6 +5,7 @@ import HomeApi from '../../../../../utils/apis/HomeApi';
 import { toPng } from '../../../../../utils/helper/helper';
 import './index.less';
 import Zbsj from './Zbsj';
+import Ztmjtj from './Ztmjtj';
 export default function CdzzyLeft(props) {
 
 
@@ -12,5 +13,6 @@ export default function CdzzyLeft(props) {
         flex: 1
     }}>
         <Zbsj />
+        <Ztmjtj />
     </LeftPanel>;
 }

src/components/common/ZoneSelector/index.js

@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react'
+import CommonApi from '../../../utils/apis/CommonApi';
+import { Select, Space } from 'antd';
+import _ from 'lodash';
+export default function ZoneSelector(props) {
+    const { value, onChange } = props;
+
+    const [firstDatas, setFirstDatas] = useState([]);
+    const [firstValue, setFirstValue] = useState(null);
+    const [secDatas, setSecDatas] = useState([]);
+    const [secValue, setSecValue] = useState(null);
+
+    useEffect(() => {
+        CommonApi.area().then(resp => {
+            setFirstDatas(resp.data);
+        })
+    }, [])
+
+    useEffect(() => {
+        if (firstValue) {
+            CommonApi.area(firstValue).then(resp => {
+                setSecDatas(resp.data);
+            })
+        } else {
+            setSecDatas([]);
+        }
+    }, [firstValue])
+
+    return <Space>
+        <Select value={firstValue} onChange={value => {
+            setFirstValue(value);
+            setSecValue(null);
+            onChange?.(value);
+        }} style={{
+            width: 150
+        }} options={[{
+            label: '全部',
+            value: null
+        }, ..._.uniqBy(firstDatas, 'shortCode')?.map(item => {
+            return {
+                key: item.shortCode,
+                label: item.name,
+                value: item.shortCode
+            }
+        })]}></Select>
+        {firstValue !== null && <Select value={secValue} onChange={value => {
+            setSecValue(value);
+            if (value) {
+                onChange?.(value);
+            } else {
+                onChange?.(firstValue);
+            }
+        }} style={{
+            width: 150
+        }} options={[{
+            label: '全部',
+            value: "-1"
+        }, ..._.uniqBy(secDatas, 'shortCode')?.map(item => {
+            return {
+                key: item.shortCode,
+                label: item.name,
+                value: item.shortCode
+            }
+        })]}></Select>}
+    </Space>;
+}

src/utils/apis/CdzzyApi.js

@@ -0,0 +1,10 @@
+
+
+import _ from 'lodash';
+import FetchHelper from '../helper/fetch-helper';
+
+export default class CdzzyApi {
+    static acreageCount() {
+        return FetchHelper.getJson(`/openApi/cdzhy/acreageCount`);
+    }
+}

src/utils/apis/CommonApi.js

@@ -0,0 +1,12 @@
+
+
+import _ from 'lodash';
+import FetchHelper from '../helper/fetch-helper';
+
+export default class CommonApi {
+    static area(code) {
+        return FetchHelper.getJson(`/openApi/common/area`,{
+            code
+        });
+    }
+}