125 lines
4.1 KiB
JavaScript
125 lines
4.1 KiB
JavaScript
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
|
import ReactECharts from 'echarts-for-react';
|
|
import { useEffect, useState, useMemo } from 'react';
|
|
import { httpget, httppost } from '../../../../utils/request';
|
|
import apiurl from '../../../../service/apiurl';
|
|
import dayjs from 'dayjs';
|
|
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
import localeData from 'dayjs/plugin/localeData'
|
|
import weekday from 'dayjs/plugin/weekday'
|
|
import weekOfYear from 'dayjs/plugin/weekOfYear'
|
|
import weekYear from 'dayjs/plugin/weekYear'
|
|
|
|
dayjs.extend(customParseFormat)
|
|
dayjs.extend(advancedFormat)
|
|
dayjs.extend(weekday)
|
|
dayjs.extend(localeData)
|
|
dayjs.extend(weekOfYear)
|
|
dayjs.extend(weekYear)
|
|
|
|
let obj={0:'巡查上报',1:'自主发现',2:'公共举报',3:'电话举报',4:'其他'}
|
|
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 {
|
|
title: {},
|
|
tooltip: {},
|
|
legend: {
|
|
data:Object.values(obj)
|
|
},
|
|
graphic: {
|
|
type: 'text',
|
|
top: 'center',
|
|
left: 'center',
|
|
style: {
|
|
text: `总计\n${sumTotal}`,
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center'
|
|
}
|
|
},
|
|
series: {
|
|
name: '圆环图系列名称',
|
|
type: 'pie',
|
|
center: ['50%', '50%'],
|
|
radius: ['60%', '80%'],
|
|
hoverAnimation: true,
|
|
data: plandata,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'outside',
|
|
formatter: '{c}'
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}, [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+0,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 |