master
Swanky
2 years ago
parent
ed2b91f3bb
commit
34e8f10747
@ -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; |
||||
} |
||||
@ -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>; |
||||
} |
||||
@ -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) |
||||
} |
||||
}) |
||||
}; |
||||
} |
||||
@ -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> |
||||
</> |
||||
} |
||||
@ -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>; |
||||
} |
||||
@ -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`); |
||||
} |
||||
} |
||||
@ -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 |
||||
}); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue