diff --git a/src/components/Main/Content/FilterPanel/index.js b/src/components/Main/Content/FilterPanel/index.js new file mode 100644 index 0000000..1c4e78d --- /dev/null +++ b/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 ?
+
+
{title}
+ +
+
+ {props.children} +
+
: null; +} \ No newline at end of file diff --git a/src/components/Main/Content/index.js b/src/components/Main/Content/index.js index b2839b8..47c478a 100644 --- a/src/components/Main/Content/index.js +++ b/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
@@ -101,12 +106,20 @@ export default function Content(props) { marginBottom: 2 }}>{item.name}
-
})} + { + setFilterVisible(false) + }} > + {Filter && } +
{RightPanel ? : null} diff --git a/src/components/Main/components/Cdzy/CdzyFilter/index.js b/src/components/Main/components/Cdzy/CdzyFilter/index.js new file mode 100644 index 0000000..2a4db36 --- /dev/null +++ b/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
+ + + + + + + 全部 + 高寒草甸类 + 低地草甸类 + 山地草甸类 + + + + + + + { + return { + label: item.name, + value: toAlb(item.name) + } + })]} /> + + + + ; +} \ No newline at end of file diff --git a/src/components/Main/components/Cdzzy/CdzzyLeft/Ztmjtj/echartsOptions.js b/src/components/Main/components/Cdzzy/CdzzyLeft/Ztmjtj/echartsOptions.js new file mode 100644 index 0000000..1ffde6f --- /dev/null +++ b/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) + } + }) + }; +} \ No newline at end of file diff --git a/src/components/Main/components/Cdzzy/CdzzyLeft/Ztmjtj/index.js b/src/components/Main/components/Cdzzy/CdzzyLeft/Ztmjtj/index.js new file mode 100644 index 0000000..ec5d5bc --- /dev/null +++ b/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 <> + 占用面积统计 +
+ +} \ No newline at end of file diff --git a/src/components/Main/components/Cdzzy/CdzzyLeft/index.js b/src/components/Main/components/Cdzzy/CdzzyLeft/index.js index f84c974..cee617b 100644 --- a/src/components/Main/components/Cdzzy/CdzzyLeft/index.js +++ b/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 }}> + ; } \ No newline at end of file diff --git a/src/components/common/ZoneSelector/index.js b/src/components/common/ZoneSelector/index.js new file mode 100644 index 0000000..a038322 --- /dev/null +++ b/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 + + {firstValue !== null && } + ; +} \ No newline at end of file diff --git a/src/utils/apis/CdzzyApi.js b/src/utils/apis/CdzzyApi.js new file mode 100644 index 0000000..310fe2b --- /dev/null +++ b/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`); + } +} \ No newline at end of file diff --git a/src/utils/apis/CommonApi.js b/src/utils/apis/CommonApi.js new file mode 100644 index 0000000..b20d9c0 --- /dev/null +++ b/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 + }); + } +} \ No newline at end of file