158 lines
5.0 KiB
JavaScript
158 lines
5.0 KiB
JavaScript
import dayjs from 'dayjs';
|
||
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
||
import ReactECharts from 'echarts-for-react';
|
||
import { useEffect, useState, useMemo } from 'react';
|
||
import { httppost } from '../../../../utils/request';
|
||
import apiurl from '../../../../service/apiurl';
|
||
|
||
let obj =
|
||
{
|
||
0: '违建',
|
||
1: '毁林垦荒',
|
||
2: '筑坝拦汊',
|
||
3: '填占库容',
|
||
4: '违法取水',
|
||
5: '其他'
|
||
}
|
||
|
||
const Page = ({ title = '标题' }) => {
|
||
const [echart2, setEchart2] = useState(Object())
|
||
const [inspectordata, setInspectorData] = useState([{}])
|
||
const [plandata, setPlanData] = useState(Object())
|
||
const [problemdata, setProblemData] = useState(Object())
|
||
const [sumTotal, setSum] = useState(0)
|
||
|
||
const getPlanOption = useMemo((name, data) => {
|
||
// let total = 0
|
||
// for (let i = 0; i < data.length; i++) {
|
||
// total = total + Number(data[i].value)
|
||
// }
|
||
return {
|
||
legend: {
|
||
data: Object.values(obj)
|
||
},
|
||
angleAxis: {
|
||
type: 'category',
|
||
data: Object.values(obj)
|
||
},
|
||
// radar: [
|
||
// {
|
||
// indicator: [
|
||
// { text: '' },
|
||
// { text: '' },
|
||
// { text: '' },
|
||
// { text: '' },
|
||
// { text: '' },
|
||
// { text: '' },
|
||
// { text: '' },
|
||
// ],
|
||
// radius: '80%',
|
||
// splitNumber: 12,
|
||
// shape: 'circle',
|
||
// splitArea: {
|
||
// areaStyle: {
|
||
// color: '#fff',
|
||
// }
|
||
// },
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: '#d4d4d4'
|
||
// }
|
||
// },
|
||
// },
|
||
// ],
|
||
radiusAxis: {
|
||
min: 0,
|
||
max: 20,
|
||
interval: 2,
|
||
// 刻度
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//刻度数值
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
// 线
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
},
|
||
polar: {},
|
||
series: [
|
||
{
|
||
stack: 'a',
|
||
type: 'pie',
|
||
center: ['50%', '50%'],
|
||
selectedOffset: 0,
|
||
radius: [0, 140],
|
||
roseType: 'area',
|
||
itemStyle: { //去除饼图的指示折线label
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
borderRadius: 8
|
||
},
|
||
},
|
||
data: plandata
|
||
}
|
||
]
|
||
}
|
||
}, [plandata])
|
||
console.log(getPlanOption);
|
||
|
||
const onOk = (event, index) => {
|
||
if (event !== null) {
|
||
let params = {
|
||
stm: dayjs(new Date(event[0])).format('YYYY-MM-DD HH:mm:ss'),
|
||
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD HH:mm:ss'),
|
||
}
|
||
// getStm(params, index)
|
||
getInfo(params)
|
||
}
|
||
}
|
||
const getInfo = (params) => {
|
||
let obj1 = []
|
||
let sum = 0
|
||
httppost(apiurl.szzf.ajtj.info + 1, params).then(res => {
|
||
res.data.map(item => {
|
||
obj1.push({ value: item.count, name: obj[item.type] })
|
||
sum = sum + item.count
|
||
})
|
||
// debugger;
|
||
setPlanData(obj1)
|
||
setSum(sum)
|
||
|
||
})
|
||
}
|
||
useEffect(() => {
|
||
let params = {
|
||
stm: dayjs().startOf("year").format('YYYY-MM-DD HH:mm:ss'),
|
||
etm: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||
}
|
||
getInfo(params)
|
||
|
||
}, [])
|
||
return (
|
||
<>
|
||
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||
<div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
|
||
<div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
|
||
案件类型
|
||
</div>
|
||
<DatePicker.RangePicker
|
||
style={{ width: 220, }}
|
||
onChange={(e, index) => onOk(e, 2)}
|
||
defaultValue={[dayjs().startOf("year"), dayjs()]}
|
||
></DatePicker.RangePicker>
|
||
</div>
|
||
<ReactECharts
|
||
ref={(e) => setEchart2(e)}
|
||
option={getPlanOption}
|
||
style={{ height: 350 }}
|
||
/>
|
||
</>
|
||
)
|
||
}
|
||
export default Page |