125 lines
4.2 KiB
JavaScript
125 lines
4.2 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: '行政强制执行'}
|
|
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: ['35%', '50%'],
|
|
// hoverAnimation: true,
|
|
data: plandata,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'outside',
|
|
formatter: '{c}',
|
|
|
|
}
|
|
},
|
|
itemStyle:{
|
|
color: function (colors) {
|
|
var colorList = [
|
|
'#5b8ff9',
|
|
'#5ad8a6',
|
|
'#5d7092',
|
|
'#f6bd16',
|
|
'#6f5ef9',
|
|
];
|
|
return colorList[colors.dataIndex];
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}, [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+2,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 |