import React, { useEffect, useState } from 'react';
|
import NewPage from '../../components/NewPage/index';
|
import { Form, Typography, Space, Tooltip } from 'antd';
|
import { Alert } from '@arco-design/web-react';
|
import * as $$ from '../../utils/utility';
|
import { useLocation, useNavigate } from 'react-router-dom';
|
import TableView from './TableView';
|
import NewTableSearch from '../../components/NewTableSearch';
|
import MyTabs from '../../components/MyTabs';
|
import './index.less'
|
|
// 获取数据
|
function getCaseInfoDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/overview', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 区域字典值
|
function treeByUserIdApi(submitData) {
|
return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
|
}
|
|
const SystemOverview = () => {
|
const [form] = Form.useForm();
|
|
let location = useLocation();
|
|
let navigate = useNavigate();
|
// 区域字典值
|
const [treeList, setTreeList] = useState([]);
|
// 筛选区域的中文
|
const [labels, setLabels] = useState([]);
|
|
const [temporary, setTemporary] = useState([]);
|
|
// 默认查询询条件
|
const [normalSearch, setNormalSearch] = useState({});
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10 });
|
|
// 数据
|
const [data, setData] = useState({ tableData: [] });
|
|
// 导出数据
|
function downloadXls() {
|
window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportOverview?${$$.useQueryParams(search)}`);
|
};
|
|
// 搜索 or 重置
|
function handleSearch(type, session) {
|
if (type === 'recovery') {
|
// 案件详情返回时恢复跳转前查询
|
let obj = Object.assign({}, data.search);
|
if (obj.acceptStart) {
|
obj.acceptTime = [$$.myMoment(obj.acceptStart), $$.myMoment(obj.acceptEnd)];
|
}
|
if (obj.startDate) {
|
obj.createTime = [$$.myMoment(obj.startDate), $$.myMoment(obj.endDate)];
|
}
|
form.setFieldsValue(obj);
|
getListData(data.search, data.tableActive);
|
return;
|
}
|
if (type === 'reset') {
|
if (session) {
|
getListData({ [session.key]: session.value[0], startDate: $$.dateFormat(session.startDate), endDate: $$.dateFormat(session.endDate) });
|
} else {
|
getListData({ [normalSearch.key]: normalSearch.value[0], startDate: $$.dateFormat(normalSearch.startDate), endDate: $$.dateFormat(normalSearch.endDate) });
|
}
|
return;
|
}
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
$$.changeTimNeweFormat(values, 'createTime', 'startDate', 'endDate');
|
$$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage'])
|
if (temporary?.length > 0) {
|
setLabels(temporary);
|
setTemporary([]);
|
}
|
getListData({ ...search, ...values });
|
return;
|
}
|
if (type === 'changeTabs' || type === 'changePage') {
|
getListData({ ...search });
|
}
|
}
|
|
// 获取数据
|
async function getListData(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getCaseInfoDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setData({
|
parentData: res?.data?.parent || {},
|
tableData: res?.data?.childList || [],
|
});
|
}
|
}
|
const onChange = (value, selectedOptions) => {
|
const labels = selectedOptions.map(option => option.label);
|
setTemporary(labels)
|
}
|
|
// 获取区域字典值
|
async function treeByUserId() {
|
global.setSpinning(true);
|
const res = await treeByUserIdApi({ areaType: '2' });
|
global.setSpinning(false);
|
if (res.type) {
|
let list = res.data || []
|
setTreeList(list);
|
let values = form.getFieldsValue();
|
let key = levelKey(list[0].level || '1');
|
values.queCode = [list[0].value]
|
values.createTime = [$$.myMoment().startOf('day').format('YYYY-MM-DD'), $$.myMoment().endOf('day').format('YYYY-MM-DD')]
|
form.setFieldsValue(values);
|
setLabels([list[0].label]);
|
setNormalSearch({ key, value: [list[0].value], level: list[0].level, startDate: $$.myMoment().startOf('day').format('YYYY-MM-DD'), endDate: $$.myMoment().endOf('day').format('YYYY-MM-DD') })
|
handleSearch('reset', { key, value: [list[0].value], startDate: $$.myMoment().startOf('day').format('YYYY-MM-DD'), endDate: $$.myMoment().endOf('day').format('YYYY-MM-DD') });
|
}
|
}
|
|
|
function levelKey(KeyIndex) {
|
return {
|
1: 'queCity',
|
2: 'queArea',
|
3: 'queRoad',
|
4: 'queVillage'
|
}[KeyIndex]
|
}
|
|
// 初始化
|
useEffect(() => {
|
treeByUserId();
|
}, []);
|
|
|
return (
|
<NewPage
|
pageHead={
|
{ breadcrumbData: [{ title: '工作台' }, { title: '系统使用概况' }], title: '系统使用概况' }
|
}
|
>
|
<div className="comprehensive" style={{ height: 'calc(100% - 78px)' }}>
|
<div className="pageSearch">
|
<div className='comprehensive-title'>查询条件</div>
|
<NewTableSearch
|
exportButton={downloadXls}
|
labelLength={4}
|
form={form}
|
itemData={[
|
{ type: 'RangePicker', name: 'createTime', label: '统计时间', allowClear: false, shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{ type: 'Cascader', name: 'queCode', label: '区域', placeholder: '请选择', onChange, changeSelect: true, allowClear: false, treedata: treeList || [] },
|
]}
|
handleReset={() => {
|
form.resetFields();
|
form.setFieldsValue({ queCode: [normalSearch.value[0]], createTime: [$$.dateFormat(normalSearch.startDate), $$.dateFormat(normalSearch.endDate)] });
|
setLabels([treeList[0].label]);
|
handleSearch('reset', normalSearch)
|
}}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
<div style={{ marginTop: '12px' }}>
|
<Alert
|
type='success'
|
content={<span>已为您生成系统在{search.startDate === search.endDate ? <span className='public-color'>{$$.myTimeFormat(search.startDate, 'YYYY.M.D')}</span> : <span className='public-color'>{$$.myTimeFormat(search.startDate, 'YYYY.M.D')}-{$$.myTimeFormat(search.endDate, 'YYYY.M.D')}</span>}的使用概况情况</span>}
|
/>
|
</div>
|
<div style={{ marginTop: '8px', display: 'flex' }} className="comprehensive-table ">
|
<TableView title={'查询结果'} search={search} labels={labels} dataSource={data.tableData || []} parentData={data.parentData} />
|
|
</div>
|
</div>
|
</NewPage>)
|
}
|
|
export default SystemOverview;
|
