/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-11-29 15:38:33
|
* @LastEditTime: 2022-11-29 15:54:13
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 数据分析 - 数据查询
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { Select, Button, DatePicker, Table } from 'antd';
|
import Page from '../../../components/Page';
|
import { ax, myMoment } from '../../../utils/utility';
|
|
const { Option } = Select;
|
|
const { RangePicker } = DatePicker;
|
|
function getCaseCount() {
|
return ax.request({ url: 'api/statistical/caseCount', type: 'get' });
|
}
|
|
function getUnitCaseCount({ submitData }) {
|
return ax.request({ url: 'api/statistical/unitCaseCount', type: 'get', data: submitData });
|
}
|
|
function getCauseCount({ submitData }) {
|
return ax.request({ url: 'api/statistical/causeCount', type: 'get', data: { startTime: submitData.startTime, endTime: submitData.endTime } });
|
}
|
|
const DataSearch = () => {
|
const [search, setSearch] = useState({
|
queryLevel: '',
|
startTime: '',
|
endTime: '',
|
page: 1,
|
size: 10,
|
});
|
|
const [data, setData] = useState({
|
cardData: {},
|
tableData: [],
|
causeCountData: [],
|
totalElements: 0, //表格数据总数
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
const currentMonth = myMoment().format('MM') || '当'; //当前月份
|
|
const channelData = [
|
{
|
name: '微信小程序',
|
dataIndex: 'qdwxCount',
|
monthIndex: 'qdwxMonthCount',
|
},
|
{
|
name: '调解组织窗口',
|
dataIndex: 'qdtjzzCount',
|
monthIndex: 'qdtjzzMonthCount',
|
},
|
{
|
name: '法院立案转调解',
|
dataIndex: 'qdfylaCount',
|
monthIndex: 'qdfylaMonthCount',
|
},
|
{
|
name: '职能部门',
|
dataIndex: 'qdznbmCount',
|
monthIndex: 'qdznbmMonthCount',
|
},
|
];
|
|
//table表头
|
const columns = [
|
{
|
title: '单位名称',
|
dataIndex: 'unitName',
|
},
|
{
|
title: '申请总数',
|
dataIndex: 'zsCount',
|
},
|
{
|
title: '调解成功',
|
dataIndex: 'tjcgCount',
|
},
|
{
|
title: '司法确认',
|
dataIndex: 'sfqrCount',
|
},
|
{
|
title: '调解失败',
|
dataIndex: 'tjsbCount',
|
},
|
{
|
title: '调解失败转诉讼',
|
dataIndex: 'xszsCount',
|
},
|
{
|
title: '调解进行中',
|
dataIndex: 'tjzCount',
|
},
|
];
|
|
//初始化
|
useEffect(() => {
|
//数据获取
|
setLoading(true);
|
ax.ax.all([getCaseCount(), getUnitCaseCount({ submitData: search }), getCauseCount({ submitData: search })]).then(
|
ax.ax.spread(function (data1, data2, data3) {
|
setLoading(false);
|
if (data1) {
|
data.cardData = data1 || {};
|
}
|
if (data2) {
|
let obj = data2 || {};
|
data.tableData = obj.content || [];
|
data.totalElements = obj.totalElements || 0;
|
}
|
if (data3) {
|
data.causeCountData = data3 || [];
|
}
|
setData({ ...data });
|
})
|
);
|
}, []);
|
|
function changeInput(key, value) {
|
if (key == 'time') {
|
search.startTime = value[0];
|
search.endTime = value[1];
|
} else {
|
search[key] = value;
|
}
|
setSearch({ ...search });
|
}
|
|
//搜索 / 重置
|
async function onSearch(type) {
|
let submitData = search;
|
if (type == 'reset') {
|
submitData = {
|
queryLevel: '',
|
startTime: '',
|
endTime: '',
|
page: 1,
|
size: 10,
|
};
|
setSearch(submitData);
|
}
|
setLoading(true);
|
ax.ax.all([getUnitCaseCount({ submitData }), getCauseCount({ submitData })]).then(
|
ax.ax.spread(function (data1, data2) {
|
setLoading(false);
|
if (data1) {
|
let obj = data1 || {};
|
data.tableData = obj.content || [];
|
data.totalElements = obj.totalElements || 0;
|
}
|
if (data2) {
|
data.causeCountData = data2 || [];
|
}
|
setData({ ...data });
|
})
|
);
|
}
|
|
//页码改变
|
async function onChangePage(page, pageSize) {
|
setLoading(true);
|
let submitData = search;
|
submitData.page = page;
|
submitData.size = pageSize;
|
const resData = await getUnitCaseCount({ submitData });
|
setLoading(false);
|
if (resData) {
|
data.tableData = resData?.content || [];
|
setSearch(submitData);
|
setData({ ...data });
|
}
|
}
|
|
useEffect(() => {
|
document.title = '数据查询';
|
}, []);
|
|
return (
|
<Page>
|
<div className="dataSearch-card">
|
<div className="dataSearch-card-item">
|
<div className="dataSearch-card-itemHeader">
|
<span>累计申请/件</span>
|
</div>
|
<div className="dataSearch-card-itemMain">
|
<div className="dataSearch-card-itemMain-title">{data.cardData.zsCount}</div>
|
<div className="dataSearch-card-itemMain-subTitle">
|
<div className="dataSearch-card-itemMain-subTitle-flex">
|
<div style={{ backgroundColor: '#1089ff' }}></div>
|
<span className="dataSearch-spanRight">正在调解</span>
|
<span>{data.cardData.tjzCount}</span>
|
</div>
|
<div className="dataSearch-card-itemMain-subTitle-flex">
|
<div style={{ backgroundColor: '#F5222D' }}></div>
|
<span className="dataSearch-spanRight">失败</span>
|
<span>{data.cardData.tjsbCount}</span>
|
<div className="dataSearch-card-vertical"></div>
|
<span className="dataSearch-spanRight">线上转诉</span>
|
<span>{data.cardData.xszsCount}</span>
|
</div>
|
</div>
|
</div>
|
<div className="dataSearch-card-itemFooter">
|
<div>
|
<span className="dataSearch-spanRight">{currentMonth}月新增</span>
|
<span>{data.cardData.zsMonthCount}</span>
|
</div>
|
</div>
|
</div>
|
<div className="dataSearch-card-item">
|
<div className="dataSearch-card-itemHeader">
|
<span>累计调解成功数/件</span>
|
</div>
|
<div className="dataSearch-card-itemMain">
|
<div className="dataSearch-card-itemMain-title">{data.cardData.tjcgCount}</div>
|
<div className="dataSearch-card-itemMain-subTitle">
|
<div className="dataSearch-card-itemMain-subTitle-flex">
|
<div style={{ backgroundColor: '#52c41a' }}></div>
|
<span className="dataSearch-spanRight">调解成功率</span>
|
<span>{data.cardData.tjcgRate}</span>
|
</div>
|
</div>
|
</div>
|
<div className="dataSearch-card-itemFooter">
|
<div>
|
<span className="dataSearch-spanRight">{currentMonth}月新增</span>
|
<span>{data.cardData.tjcgMonthCount}</span>
|
</div>
|
</div>
|
</div>
|
|
<div className="dataSearch-card-item">
|
<div className="dataSearch-card-itemHeader">
|
<span>在线司法确认/件</span>
|
</div>
|
<div className="dataSearch-card-itemMain">
|
<div className="dataSearch-card-itemMain-title">{data.cardData.sfqrCount}</div>
|
<div className="dataSearch-card-itemMain-subTitle">
|
<div className="dataSearch-card-itemMain-subTitle-flex">
|
<span className="dataSearch-spanRight">司法确认率</span>
|
<span>{data.cardData.sfqrRate}</span>
|
</div>
|
</div>
|
</div>
|
<div className="dataSearch-card-itemFooter">
|
<div>
|
<span className="dataSearch-spanRight">{currentMonth}月新增</span>
|
<span>{data.cardData.sfqrMonthCount}</span>
|
</div>
|
</div>
|
</div>
|
<div className="dataSearch-card-item">
|
<div className="dataSearch-card-itemHeader">
|
<span>渠道统计/件</span>
|
</div>
|
<div className="dataSearch-card-itemMain">
|
{channelData.map((x, t) => {
|
return (
|
<div className="dataSearch-card-itemMain-subTitle-flex dataSearch-card-itemMain-subTitle-bottom" key={t}>
|
<span className="dataSearch-spanRight">{x.name}</span>
|
<span>{data.cardData[x.dataIndex]}</span>
|
<div className="dataSearch-card-vertical"></div>
|
<span className="dataSearch-spanRight">{currentMonth}月新增</span>
|
<span>{data.cardData[x.monthIndex]}</span>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
</div>
|
<div className="dataSearch-main">
|
<div className="dataSearch-main-header">
|
<div style={{ marginRight: '16px' }}>
|
<span className="dataSearch-spanRight">行政区划:</span>
|
<Select
|
allowClear
|
onChange={(value) => changeInput('queryLevel', value)}
|
value={search.queryLevel || undefined}
|
className="dataSearch-inputWeight"
|
placeholder="请选择"
|
>
|
<Option key="town">镇街</Option>
|
<Option key="village">村居</Option>
|
</Select>
|
</div>
|
<div>
|
<span className="dataSearch-spanRight">统计时间:</span>
|
<RangePicker
|
onChange={(dates, dateStrings) => changeInput('time', dateStrings)}
|
value={search.startTime && [myMoment(search.startTime), myMoment(search.endTime)]}
|
className="dataSearch-inputWeight"
|
ranges={{
|
今天: [myMoment(), myMoment()],
|
本月: [myMoment().startOf('month'), myMoment().endOf('month')],
|
}}
|
/>
|
</div>
|
<div>
|
<Button onClick={() => onSearch('search')} type="primary" style={{ margin: '0 8px 0 16px' }}>
|
搜索
|
</Button>
|
<Button onClick={() => onSearch('reset')}>重置</Button>
|
</div>
|
</div>
|
<div className="dataSearch-main-content">
|
<div className="dataSearch-main-content-left common-table-view">
|
<Table
|
columns={columns}
|
dataSource={data.tableData}
|
rowKey="unitName"
|
size="middle"
|
loading={loading}
|
pagination={{
|
total: data.totalElements,
|
current: search.page,
|
pageSize: search.size,
|
showTotal: (total, range) => `共${total}条记录`,
|
onChange: onChangePage,
|
showSizeChanger: true,
|
onShowSizeChange: onChangePage,
|
}}
|
/>
|
</div>
|
<div className="dataSearch-main-content-right">
|
<div className="dataSearch-main-content-rightTitle">前十案由调解数</div>
|
{data.causeCountData.map((x, t) => {
|
return (
|
<div className="dataSearch-main-content-rightLine" key={t}>
|
<div style={{ backgroundColor: t < 3 && '#1089ff', color: t < 3 && '#ffffff' }}>{t + 1}</div>
|
<div className="dataSearch-main-content-rightLine-flex">{x.causeName}</div>
|
<div>{x.causeCount}</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
</div>
|
</Page>
|
);
|
};
|
|
export default DataSearch;
|
