// 新版效能分析
|
import React, { useEffect, useState, useRef } from 'react';
|
import NewPage from '@/components/NewPage';
|
import NewTableSearch from '@/components/NewTableSearch';
|
import * as $$ from '../../utils/utility';
|
import { Form, Typography, Table, Empty, Space, Row, Col } from 'antd';
|
import { analysis, workEfficiency_2, empty, workEfficiency_3, workEfficiency_4, workEfficiency_5 } from '@/assets/images';
|
import { Modal, Alert, Radio, Select, Tooltip } from '@arco-design/web-react';
|
import { IconInfoCircle } from '@arco-design/web-react/icon';
|
import MyTabsNew from '../../components/MyTabsNew';
|
import TableView from '../../components/TableViewCanSort';
|
import SupervisingViews from '../../views/register/matterDetail/SupervisingViews';
|
import * as echarts from 'echarts';
|
import './index.less';
|
import TimeoutDialog from './component/TimeoutDialog.jsx';
|
|
const { Link } = Typography;
|
const RadioGroup = Radio.Group;
|
const Option = Select.Option;
|
function treeByUserIdApi(data) {
|
return $$.ax.request({ url: 'syRegion/treeByUserId2', type: 'get', service: 'sys', data });
|
}
|
|
function getStatisticsData(data) {
|
return $$.ax.request({ url: 'analysis/statistics', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-分组任务流转统计
|
function statisticsCirculationApi(data) {
|
return $$.ax.request({ url: 'analysis/statisticsCirculation', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-办件时长-统计图
|
function AvgDurationChartsGroupApi(data) {
|
return $$.ax.request({ url: 'analysis/AvgDurationChartsGroup', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-流转统计--统计图
|
function statisticsCirculationChartsApi(data) {
|
return $$.ax.request({ url: 'analysis/statisticsCirculationCharts', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-分组统计
|
function listTimeOutTaskGroupApi(data) {
|
return $$.ax.request({ url: 'analysis/listTimeOutTaskGroup', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-分页查询超时列表
|
function pageQuantityApi(data) {
|
return $$.ax.request({ url: 'analysis/pageQuantity', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-超时任务数量查询
|
function timeoutTaskApi(data) {
|
return $$.ax.request({ url: 'analysis/timeoutTask', type: 'get', service: 'mediate', data });
|
}
|
|
// 效能分析-平均时长-分组列表
|
function AvgDurationGroupApi(data) {
|
return $$.ax.request({ url: 'analysis/AvgDurationGroup', type: 'get', service: 'mediate', data });
|
}
|
|
//督办次数
|
function pageCaseSuperviseApi(data) {
|
return $$.ax.request({ url: 'caseSupervise/pageCaseSupervise', type: 'get', service: 'mediate', data });
|
}
|
|
//督办添加id
|
function getNewTimeIdApi(id) {
|
return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
|
}
|
|
//批量添加督办
|
function addBatchCaseApi(data) {
|
return $$.ax.request({ url: `caseSupervise/addBatchCaseSupervise`, type: 'post', service: 'mediate', data });
|
}
|
|
// 流转统计-查看数据列表
|
function listStatisticsCirculationApi(data) {
|
return $$.ax.request({ url: `analysis/listStatisticsCirculation`, type: 'get', service: 'mediate', data });
|
}
|
|
const list = [
|
{
|
name: 'fp',
|
style: {
|
border: '1px solid #B6DDF1',
|
background: '#e8f8ff',
|
},
|
label: '事项分派',
|
className: 'img1',
|
},
|
{
|
name: 'sl',
|
style: {
|
border: '1px solid #ddbef6',
|
background: '#f5e8ff',
|
},
|
label: '事项受理',
|
className: 'img3',
|
},
|
{
|
name: 'blz',
|
style: {
|
border: '1px solid #b5f5ec',
|
background: '#e6fffb',
|
},
|
label: '事项办理',
|
className: 'img4',
|
},
|
{
|
name: 'sp',
|
style: {
|
border: '1px solid #c3e7fe',
|
background: '#e8f7ff',
|
},
|
label: '申请审批',
|
className: 'img5',
|
},
|
{
|
name: 'db',
|
style: {
|
border: '1px solid #ffe7ba',
|
background: '#fff7e6',
|
},
|
label: '督办回复',
|
className: 'img6',
|
},
|
]; //平均时长list
|
|
//督办次数
|
const supervisingColumns = [
|
{
|
title: '督办部门',
|
dataIndex: 'supUnitName',
|
key: 'supUnitName',
|
width: 50,
|
},
|
{
|
title: '督办时间',
|
dataIndex: 'supTime',
|
key: 'supTime',
|
width: 50,
|
},
|
{
|
title: '回复时限',
|
dataIndex: 'timeLimit',
|
key: 'timeLimit',
|
width: 80,
|
render: (text, record) => {
|
return record.supStatus === 1 ? '-' : $$.getDiffTime(record.timeLimit);
|
},
|
},
|
{
|
title: '督办意见',
|
dataIndex: 'supContent',
|
key: 'supContent',
|
width: 100,
|
},
|
{
|
title: '事项等级',
|
dataIndex: 'caseGrade',
|
key: 'caseGrade',
|
width: 30,
|
render: (text) => <span>{text === 3 ? '三级' : text === 2 ? '二级' : text === 1 ? '一级' : '-'}</span>,
|
},
|
{
|
title: '回复状态',
|
dataIndex: 'supStatus',
|
key: 'supStatus',
|
width: 30,
|
render: (text, record) => (
|
<div style={{ color: record.supStatus === 0 ? '#F53F3F' : '#00B42A' }}>{record.supStatus === 0 ? '未回复' : '已回复'}</div>
|
),
|
},
|
{
|
title: '回复时间',
|
dataIndex: 'replyTime',
|
key: 'replyTime',
|
width: 50,
|
},
|
{
|
title: '回复内容',
|
dataIndex: 'replyContent',
|
key: 'replyContent',
|
width: 50,
|
},
|
// {
|
// title: '操作',
|
// dataIndex: 'defendants',
|
// key: 'defendants',
|
// width: 50,
|
// fixed: 'right',
|
// render: (text, record) => (
|
// <Space>
|
// <div onClick={() => handleResponse(record.id, 'responseDetail')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>详情</div>
|
// {record.supStatus == 0 &&
|
// <div onClick={() => handleResponse(record.id, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>回复</div>
|
// }
|
// </Space>
|
// )
|
// },
|
];
|
|
const dialogNameMap = {
|
'fpcs': '分派超时列表',
|
'qscs': '签收超时列表',
|
'slcs': '受理超时列表',
|
'dbcs': '督办回复超时列表',
|
};
|
const WorkEfficiency = () => {
|
const [form] = Form.useForm();
|
|
// tab切换
|
const [tabKey, setTabKey] = useState('1');
|
|
// 列表、统计图切换
|
const [radioData, setRadioData] = useState({ radio1: '1', select1: '1', radio2: '1', tab2: '4', radio3: '1', select3: '1' });
|
const [doChartsData, setDoChartsData] = useState([]);
|
const [doData, setDoData] = useState([]);
|
const [doTotal, setDoTotal] = useState({});
|
const [doDataSearch, setDoDataSearch] = useState({});
|
const [timeoutData, setTimeoutData] = useState({});
|
//响应式数据
|
const [timeoutKey, setTimeoutKey] = useState(''); //超时任务选中key
|
const [visible, setVisible] = useState(false); //超时任务弹窗
|
const [treeList, setTreeList] = useState([]); //查询的区域树数据
|
const [labels, setLabels] = useState([]); // 筛选区域的中文
|
const [temporary, setTemporary] = useState([]);
|
const [search, setSearch] = useState({}); // 搜索数据
|
const [caseTypeNames, setCaseTypeNames] = useState([]); // 显示纠纷类型中文
|
const [temporaryCaseType, setTemporaryCaseType] = useState([]); // 筛选纠纷类型的中文
|
const [avgDurationDTO, setAvgDurationDTO] = useState({}); //平均时长数据
|
const [statisticsGroupDTO, setStatisticsGroupDTO] = useState({}); //超时任务数据
|
const [normalSearch, setNormalSearch] = useState({}); // 默认查询询条件
|
const [supervisingList, setSupervisingList] = useState(false); //督办次数
|
const [searchSupervise, setSearchSupervise] = useState({ page: '1', size: 20, caseId: '', type: 0 });
|
const [SuperviseListData, setSuperviseListData] = useState([]);
|
const [supervising, setSupervising] = useState(false); //督办弹窗控制
|
const [supervisingAddId, setSupervisingAddId] = useState('');
|
const [supervisingId, setSupervisingId] = useState('');
|
const [tableData, setTableData] = useState({ list: [] });
|
const [timeoutSearch, setTimeoutSearch] = useState({ sortType: 2, sortColmn: 2, queryType: '4', page: 1, size: 10 });
|
// table选择数据
|
const [selectedRowsObj, setSelectedRowsObj] = useState({});
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]); //批量id
|
const [selectedRows, setSelectedRows] = useState([]); //批量数据
|
// 超时任务统计图
|
const [listTimeOut, setListTimeOut] = useState([]);
|
const [listTimeOutSearch, setListTimeOutSearch] = useState({ queryType: '4' });
|
const [supervisingTitle, setSupervisingTitle] = useState('督办');
|
|
// 流转
|
const [circulationData, setCirculationData] = useState([]);
|
const [circulationTotal, setCirculationTotal] = useState({});
|
const [circulationChartsData, setCirculationChartsData] = useState([]);
|
|
const [circulationSearch, setCirculationSearch] = useState({ sortType: 2, sortColmn: 1 });
|
|
const [modalSearch, setModalSearch] = useState({ page: 1, size: 10 });
|
const [modalVisible, setModalVisible] = useState(false);
|
const [modalList, setModalList] = useState({ tableData: [], total: 0 });
|
|
useEffect(() => {
|
treeByUserId();
|
}, []);
|
|
useEffect(() => {
|
if (normalSearch.level) {
|
handleAllRequest();
|
}
|
}, [normalSearch]);
|
|
// 流转情况统计
|
async function statisticsCirculation(search, values = {}) {
|
global.setSpinning(true);
|
const res = await statisticsCirculationApi({ ...search, ...values });
|
global.setSpinning(false);
|
if (res.type) {
|
setCirculationData(res.data?.statisticsCirculationDTOList || []);
|
setCirculationTotal(res.data?.statisticsCirculationDTO || []);
|
setCirculationSearch(search);
|
}
|
}
|
|
async function statisticsCirculationCharts(search, values = {}) {
|
global.setSpinning(true);
|
const res = await statisticsCirculationChartsApi({ ...search, ...values });
|
global.setSpinning(false);
|
if (res.type) {
|
setCirculationChartsData(res.data || []);
|
}
|
}
|
|
// 超时办件列表
|
async function pageQuantity(search, values = {}) {
|
global.setSpinning(true);
|
try {
|
const res = await pageQuantityApi({ ...search, ...values });
|
if (res.type) {
|
let data = res.data.content || [];
|
let total = res?.data?.totalElements || 0;
|
setTableData({
|
list: data,
|
total,
|
page: search.page || 1,
|
size: search.size || 10
|
});
|
setTimeoutSearch(search);
|
} else {
|
// API调用失败时，确保数据状态正确
|
setTableData({
|
list: [],
|
total: 0,
|
page: search.page || 1,
|
size: search.size || 10
|
});
|
}
|
} catch (error) {
|
console.error('获取超时办件列表失败:', error);
|
// 异常时，确保数据状态正确
|
setTableData({
|
list: [],
|
total: 0,
|
page: search.page || 1,
|
size: search.size || 10
|
});
|
} finally {
|
global.setSpinning(false);
|
}
|
}
|
|
// 超时办件统计图
|
async function listTimeOutTaskGroup(search, values = {}) {
|
global.setSpinning(true);
|
const res = await listTimeOutTaskGroupApi({ ...search, ...values });
|
global.setSpinning(false);
|
if (res.type) {
|
setListTimeOut(res.data || []);
|
setListTimeOutSearch(search);
|
}
|
}
|
|
async function timeoutTask(data) {
|
global.setSpinning(true);
|
const res = await timeoutTaskApi(data);
|
global.setSpinning(false);
|
if (res.type) {
|
setTimeoutData(res.data || {});
|
}
|
}
|
|
async function AvgDurationChartsGroup(data, values = {}) {
|
global.setSpinning(true);
|
const res = await AvgDurationChartsGroupApi({ ...data, ...values });
|
global.setSpinning(false);
|
if (res.type) {
|
setDoChartsData(res?.data?.avgDurationGroupDTOList || []);
|
}
|
}
|
|
async function AvgDurationGroup(data, values = {}) {
|
global.setSpinning(true);
|
const res = await AvgDurationGroupApi({ ...data, ...values });
|
global.setSpinning(false);
|
if (res.type) {
|
setDoData(res?.data?.avgDurationGroupDTOList || []);
|
setDoTotal(res?.data?.avgDurationDTO || []);
|
setDoDataSearch(data);
|
}
|
}
|
|
// 获取区域字典值
|
const treeByUserId = async () => {
|
const res = await treeByUserIdApi({ areaType: '2' });
|
if (res.type) {
|
let list = res.data || [];
|
setTreeList(list);
|
form.setFieldValue('queCode', [list[0].value]);
|
setLabels([list[0].label]);
|
setNormalSearch({ level: list[0].level });
|
}
|
};
|
|
//查询、重置、请求集合
|
const handleAllRequest = (type) => {
|
global.setSpinning(true);
|
let values = form.getFieldsValue();
|
//删除原本的时间字段，添加开始结束时间
|
$$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
|
$$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
|
//转换成开始时间结束时间字段
|
values.createStart = values.createStart ? $$.dateFormat(values.createStart) : '';
|
values.createEnd = values.createEnd ? $$.dateFormat(values.createEnd) : '';
|
values.closeStart = values.closeStart ? $$.dateFormat(values.closeStart) : '';
|
values.closeEnd = values.closeEnd ? $$.dateFormat(values.closeEnd) : '';
|
//纠纷类型处理
|
values.caseType = values.caseType?.length > 0 ? values.caseType[1] : '';
|
//区域处理
|
if (normalSearch.level === '1') {
|
values.queCity = values.queCode?.length >= 1 ? values.queCode[0] : '';
|
values.queArea = values.queCode?.length >= 2 ? values.queCode[1] : '';
|
values.queRoad = values.queCode?.length >= 3 ? values.queCode[2] : '';
|
} else if (normalSearch.level === '2') {
|
values.queArea = values.queCode?.length >= 1 ? values.queCode[0] : '';
|
values.queRoad = values.queCode?.length >= 2 ? values.queCode[1] : '';
|
} else if (normalSearch.level === '3') {
|
values.queRoad = values.queCode?.length >= 1 ? values.queCode[0] : '';
|
}
|
delete values.queCode;
|
Promise.all([
|
getAnalysisData(values),
|
timeoutTask(values),
|
listTimeOutTaskGroup(listTimeOutSearch, values),
|
AvgDurationGroup(doDataSearch, values),
|
AvgDurationChartsGroup(doDataSearch, values),
|
pageQuantity(timeoutSearch, values),
|
statisticsCirculation(circulationSearch, values),
|
statisticsCirculationCharts(circulationSearch, values),
|
]).then((res) => {
|
setSearch(values);
|
if (temporary?.length > 0) {
|
setLabels(temporary);
|
setTemporary([]);
|
}
|
if (setTemporary?.length > 0) {
|
setCaseTypeNames(temporaryCaseType);
|
setTemporaryCaseType([]);
|
}
|
global.setSpinning(false);
|
});
|
};
|
|
const onChange = (value, selectedOptions) => {
|
const label = selectedOptions.map((option) => option.label);
|
setTemporary(label);
|
};
|
|
//获取效能分析接口
|
async function getAnalysisData(data) {
|
global.setSpinning(true);
|
const res = await getStatisticsData(data);
|
global.setSpinning(false);
|
if (res.type) {
|
setAvgDurationDTO(res.data || {});
|
}
|
}
|
|
// 切换tabs页
|
function tabsOnchange(activeKey) {
|
setTabKey(activeKey);
|
if (activeKey !== tabKey) {
|
if (activeKey === '1') {
|
// delete search.canal;
|
// getListData({ ...search }, listDataSearch)
|
}
|
// else if (activeKey === '2') {
|
// getListData({ ...search, canal: '22_00001-1' }, listDataSearch)
|
// } else if (activeKey === '3') {
|
// getListData({ ...search, canal: '22_00001-2' }, listDataSearch)
|
// }
|
}
|
}
|
|
// 批量督办
|
async function handleBatchDB() {
|
setSupervising(!supervising);
|
// setSupervisingAddId(caseId)
|
// setSupervisingList(!supervisingList)
|
setSupervisingTitle('批量督办');
|
// $$.arcoModalInfo({
|
// icon: <IconInfoCircle style={{ color: '#1A6FB8' }} />,
|
// title: '提醒',
|
// content: <span>确定批量督办选中的<span className='public-color'>{selectedRowKeys?.length}</span>条数据吗？</span>,
|
// okText: '确定',
|
// cancelText: '我再想想',
|
// onOk: async () => {
|
// global.setSpinning(true);
|
// const res = await addBatchCaseApi();
|
// global.setSpinning(false);
|
// if (res.type) {
|
// $$.infoSuccess({ content: '批量督办成功' });
|
// setSelectedRowsObj({});
|
// // handleSearch('reset', '', '', mediateTab);
|
// }
|
// },
|
// });
|
}
|
|
//督办次数
|
const handleSupervising = (caseId) => {
|
// setSupervisingId(caseId)
|
pageCaseSupervise(caseId);
|
setSupervisingList(!supervisingList);
|
};
|
|
//督办次数列表
|
const pageCaseSupervise = async (caseId) => {
|
const res = await pageCaseSuperviseApi({ ...searchSupervise, caseId: caseId });
|
if (res.type) {
|
let data = res.data.content;
|
setSuperviseListData(data);
|
}
|
};
|
|
//添加督办
|
const handleSupervisingAdd = (caseId) => {
|
setSupervisingTitle('督办');
|
setSupervising(!supervising);
|
setSupervisingAddId(caseId);
|
getNewTimeId();
|
};
|
|
//获取添加督办id
|
const getNewTimeId = async () => {
|
const res = await getNewTimeIdApi();
|
if (res.type) {
|
setSupervisingId(res.data);
|
}
|
};
|
|
//排序
|
const handleSort = (page, pageSize, sort) => {
|
console.log(sort);
|
|
let sortColmn =
|
sort.column?.dataIndex === 'timeLimit'
|
? '2'
|
: sort.column?.dataIndex === 'turnaroundTime'
|
? '1'
|
: sort.column?.dataIndex === 'caseGrade'
|
? '3'
|
: sort.column?.dataIndex === 'superviseCount'
|
? '4'
|
: '';
|
let sortType = sort.order == 'descend' ? 2 : 1; //1：正序；2：倒序
|
pageQuantity({ ...timeoutSearch, page, size: pageSize, sortType, sortColmn }, search);
|
// sortType: 2, sortColmn: 1, queryType: '4', page: 1, size: 10
|
};
|
|
const fxColumns = [
|
{
|
title: '流转时间',
|
dataIndex: 'turnaroundTime',
|
width: 150,
|
sorter: true,
|
sortNumber: 1, //设置这个传给后端的
|
render: (text) => {
|
return <span>{$$.myTimeFormat(text, 'YYYY-M-D hh:mm')}</span>;
|
},
|
},
|
{
|
title: '任务节点',
|
dataIndex: 'nodeName',
|
width: 150,
|
sorter: true,
|
sortNumber: 1, //设置这个传给后端的
|
},
|
{
|
title: '处理时限',
|
dataIndex: 'timeLimit',
|
defaultSortOrder: 'descend',
|
width: 150,
|
sorter: true,
|
render: (text, record) => {
|
return (
|
<div className="courtList-flex public-tag-tagRed public-danger">
|
<div className="public-roundDot-red"></div>
|
{`超${$$.formatHoursToDaysAndHours(text)}`}
|
</div>
|
);
|
},
|
},
|
{
|
title: '是否处理',
|
dataIndex: 'taskStatus',
|
width: 80,
|
render: (text) => {
|
return <span>{text === 1 ? '是' : '否'}</span>;
|
},
|
},
|
{
|
title: '事项状态',
|
dataIndex: 'statusName',
|
width: 120,
|
},
|
{
|
title: '承办部门',
|
dataIndex: 'candeUnitName',
|
width: 150,
|
render: (text) => (
|
<span>
|
{' '}
|
<Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
|
</span>
|
),
|
},
|
{
|
title: '经办人',
|
dataIndex: 'mediator',
|
key: 'mediator',
|
width: 180,
|
},
|
{
|
title: '事项等级',
|
dataIndex: 'caseGrade',
|
key: 'caseGrade',
|
sorter: true,
|
sortNumber: 2, //设置这个传给后端的
|
width: 100,
|
render: (text) => <span>{text === 3 ? '三级' : text === 2 ? '二级' : text === 1 ? '一级' : '-'}</span>,
|
},
|
{
|
title: '事项来源',
|
dataIndex: 'caseSource',
|
key: 'caseSource',
|
width: 120,
|
},
|
{
|
title: '问题属地',
|
dataIndex: 'queAddress',
|
key: 'queAddress',
|
width: 180,
|
},
|
{
|
title: '纠纷类型',
|
dataIndex: 'caseType',
|
key: 'caseType',
|
width: 150,
|
render: (text) => (
|
<span>
|
{' '}
|
<Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
|
</span>
|
),
|
},
|
{
|
title: '督办次数',
|
dataIndex: 'superviseCount',
|
key: 'superviseCount',
|
width: 100,
|
render: (text, record, index) => (
|
<div
|
onClick={() => {
|
text !== 0 && handleSupervising(record.caseId);
|
}}
|
style={{ cursor: 'pointer', color: text !== 0 ? '#1A6FB8' : '#000' }}
|
>
|
{text}
|
{/* {text !== 0 && <span className="timeTip-red-tipsRed" style={{ marginLeft: '8px' }}>督</span>} */}
|
</div>
|
),
|
sorter: true,
|
sortNumber: 3,
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 100,
|
render: (_, record) => {
|
return (
|
<Space>
|
<span
|
onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.caseId}`)}
|
className="public-color public-a"
|
>
|
详情
|
</span>
|
{record.statusName === '待分派' && (
|
<div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
|
督办
|
</div>
|
)}
|
{record.statusName === '待签收' && (
|
<div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
|
督办
|
</div>
|
)}
|
{record.statusName === '待受理' && (
|
<div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
|
督办
|
</div>
|
)}
|
{record.statusName === '化解中' && (
|
<div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
|
督办
|
</div>
|
)}
|
{record.statusName === '结案审核' && (
|
<div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
|
督办
|
</div>
|
)}
|
</Space>
|
);
|
},
|
},
|
];
|
|
//批量选择
|
const onSelectChange = (newSelectedRowKeys, selectedRows) => {
|
setSelectedRowKeys(newSelectedRowKeys);
|
setSelectedRows(selectedRows);
|
};
|
|
//草稿 获取table选择数据
|
function handleGetSelectedRowKeys(type) {
|
let arr = [];
|
for (let item in selectedRowsObj) {
|
arr = arr.concat(selectedRowsObj[item][type]);
|
}
|
return arr;
|
}
|
|
// 点击办件时长概况弹窗
|
async function modalListClick(record, type) {
|
console.log(record);
|
console.log('search', search);
|
console.log('modalSearch', modalSearch);
|
let nowSearch = { ...modalSearch, ...search, regionCode: record.groupCode, regionName: record.groupName, caseStatus: type };
|
listStatisticsCirculation(nowSearch);
|
}
|
|
async function listStatisticsCirculation(params) {
|
global.setSpinning(true);
|
const res = await listStatisticsCirculationApi(params);
|
global.setSpinning(false);
|
if (res.type) {
|
// params.caseStatus 0：总登记 1、自行受理 2、流转受理 3、流转中 4、不予受理
|
setModalList({
|
name:
|
params.regionName +
|
'(' +
|
(params.caseStatus === 0
|
? '总登记'
|
: params.caseStatus === 1
|
? '自行受理'
|
: params.caseStatus === 2
|
? '流转受理'
|
: params.caseStatus === 3
|
? '流转中'
|
: params.caseStatus === 4
|
? '不予受理'
|
: '') +
|
')',
|
tableData: res.data?.content || [], // 接口返回的列表数据
|
total: res.data?.totalElements || 0,
|
});
|
setModalVisible(true);
|
setModalSearch(params);
|
}
|
}
|
|
// 跳转详情页
|
function handleJump(record) {
|
const newWindow = window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`);
|
}
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '效能分析' }], title: '效能分析' }}>
|
<div style={{ padding: '0 16px 0 16px' }}>
|
<div>
|
<div className="card">
|
<div className="comprehensive-title">查询条件</div>
|
<NewTableSearch
|
exportButtonShow={false}
|
labelLength={6}
|
rowNum={4.5}
|
form={form}
|
itemData={[
|
{
|
type: 'Cascader',
|
name: 'queCode',
|
label: '区域',
|
placeholder: '请选择',
|
onChange,
|
changeSelect: true,
|
allowClear: false,
|
treedata: treeList,
|
},
|
{ type: 'RangePicker', name: 'createTime', label: '登记时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{ type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{
|
type: 'Cascader',
|
name: 'caseType',
|
label: '纠纷类型',
|
placeholder: '请选择',
|
onChange: (value, selectedOptions) => {
|
const names = selectedOptions.map((option) => option.label);
|
setTemporaryCaseType(names);
|
},
|
span: 8,
|
treedata: $$.caseTypeSelect.caseTypeSelect,
|
},
|
{ type: 'Select', name: 'canal', label: '事项来源', placeholder: '请选择', span: 8, selectdata: $$.options.caseCanal },
|
{ type: 'Select', name: 'taskStatus', label: '任务是否处理', placeholder: '请选择', span: 8, selectdata: $$.options.isOrNot },
|
]}
|
handleReset={() => {
|
form.resetFields();
|
setLabels([treeList[0].label]);
|
handleAllRequest();
|
}}
|
handleSearch={() => {
|
handleAllRequest();
|
}}
|
searchDom={
|
<div style={{}}>
|
<img style={{ width: '14px' }} src={analysis} />
|
分析
|
</div>
|
}
|
initialValues={{
|
queCode: treeList[0] ? [treeList[0]?.value] : '',
|
createTime: [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')],
|
}}
|
/>
|
</div>
|
{/* <div style={{ marginTop: '12px' }}>
|
<Alert
|
type='success'
|
content={<span className='alertTips'>已为您生成
|
<i>{labels.join('/')}</i>{(search.createStart || search.closeStart || search.caseType) && '在'}
|
{search.createStart && <i>登记时间({$$.myTimeFormat(search.createStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.createEnd, 'YYYY.M.D')})</i>}
|
{search.closeStart && <i>{search.createStart && '、'}办结时间({$$.myTimeFormat(search.closeStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.closeEnd, 'YYYY.M.D')})</i>}
|
{search.caseType && <i>{(search.createStart || search.closeStart) && '、'}纠纷类型({caseTypeNames.join('/')})</i>}
|
的效能分析数据
|
</span>}
|
/>
|
</div> */}
|
<div className="workEfficiency-tab-row">
|
<Row gutter={32}>
|
<Col span={8}>
|
<div
|
className={`workEfficiency-tab-title ${tabKey === '1' ? 'workEfficiency-tab-title-active' : ''}`}
|
onClick={() => tabsOnchange('1')}
|
>
|
<div className="workEfficiency-tab-img-box">
|
<img className="workEfficiency-tab-img" src={workEfficiency_3} alt="" srcset="" />
|
</div>
|
<div>办件时长</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div
|
className={`workEfficiency-tab-title ${tabKey === '2' ? 'workEfficiency-tab-title-active' : ''}`}
|
onClick={() => tabsOnchange('2')}
|
>
|
<div className="workEfficiency-tab-img-box">
|
<img className="workEfficiency-tab-img" src={workEfficiency_4} alt="" srcset="" />
|
</div>
|
<div>超时办件</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div
|
className={`workEfficiency-tab-title ${tabKey === '3' ? 'workEfficiency-tab-title-active' : ''}`}
|
onClick={() => tabsOnchange('3')}
|
>
|
<div className="workEfficiency-tab-img-box">
|
<img className="workEfficiency-tab-img" src={workEfficiency_5} alt="" srcset="" />
|
</div>
|
<div>流转情况</div>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
{/* <div style={{ width: '100%', position: 'relative' }}>
|
<MyTabsNew
|
tabs={[
|
{ label: <div style={{ height: '24px' }}>办件时长</div>, key: '1' },
|
{ label: <div style={{ height: '24px' }}>超时办件</div>, key: '2' },
|
{ label: <div style={{ height: '24px' }}>流转情况</div>, key: '3' },]}
|
activeKey={tabKey}
|
onChange={(activeKey) => tabsOnchange(activeKey)}
|
/>
|
<div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', width: '100%' }}></div>
|
</div> */}
|
{tabKey === '1' && (
|
<div>
|
<div className="card">
|
{/* <div className="workEfficiency-title">
|
<img className="workEfficiency-img" src={workEfficiency_2} alt="" srcset="" />
|
<span className="public-color">{labels?.join('/') || '-'}</span>办件平均时长
|
</div> */}
|
<div style={{ marginBottom: '16px' }}>
|
<Space size="small">
|
<div className="MediationInfo-subTitle"></div>
|
<div style={{ fontSize: '16px', fontWeight: '400' }}>办件时长概况（{labels?.join('/') || '-'}）</div>
|
</Space>
|
</div>
|
<div className="cardList">
|
{list?.map((item, index) => {
|
return (
|
<div className="timeCard" key={item.name}>
|
{index !== 0 && <div className="cardLine"></div>}
|
<div style={{ flex: 1 }}>
|
<div className="cardTop">
|
<div className="cardImg" style={{ ...item.style }}>
|
<div className={item.className}></div>
|
</div>
|
<div className="cardText">
|
<div>{item.label}</div>
|
<div>
|
<span>{avgDurationDTO[item.name] || 0}</span>小时/件
|
</div>
|
</div>
|
</div>
|
{labels?.length === 1 && labels[0] === '广州市' ? (
|
''
|
) : (
|
<></>
|
// <div className="cardBottom">
|
// <div
|
// className="cardPoint"
|
// style={{
|
// background:
|
// avgDurationDTO[item.name + 'pjz'] > 0 ? '#F53F3F' : avgDurationDTO[item.name + 'pjz'] < 0 ? '#00B42A' : '#3491FA',
|
// }}
|
// ></div>
|
// <div className="cardTip">
|
// <span style={{ color: '#4E5969' }}>
|
// {avgDurationDTO[item.name + 'pjz'] > 0 ? '低于' : avgDurationDTO[item.name + 'pjz'] < 0 ? '高于' : '等于'}
|
// </span>
|
// <span>全市平均值</span>
|
// <span
|
// style={{
|
// color: avgDurationDTO[item.name + 'pjz'] > 0 ? '#F53F3F' : avgDurationDTO[item.name + 'pjz'] < 0 ? '#00B42A' : '',
|
// }}
|
// >
|
// {avgDurationDTO[item.name + 'pjz'] && avgDurationDTO[item.name + 'pjz'] != 0
|
// ? Math.abs(avgDurationDTO[item.name + 'pjz'] || 0).toFixed(2) + '%'
|
// : ''}
|
// </span>
|
// </div>
|
// </div>
|
)}
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
<div style={{ marginBottom: '16px', display: 'flex' }}>
|
<div className="card" style={{ flex: 2 }}>
|
{/* <div className="workEfficiency-title">
|
<img className="workEfficiency-img" src={workEfficiency_2} alt="" srcset="" />
|
<span className="public-color">{labels?.join('/') || '-'}</span>各区域办件平均时长
|
</div> */}
|
<div style={{ marginBottom: '16px' }}>
|
<Space size="small">
|
<div className="MediationInfo-subTitle"></div>
|
<div style={{ fontSize: '16px', fontWeight: '400' }}>办件时长统计（{labels?.join('/') || '-'}）</div>
|
</Space>
|
</div>
|
<RadioGroup
|
type="button"
|
value={radioData.radio1}
|
onChange={(v) => {
|
setRadioData({ ...radioData, radio1: v });
|
}}
|
style={{ marginBottom: 12 }}
|
>
|
<Radio value="1">列表</Radio>
|
<Radio value="2">统计图</Radio>
|
</RadioGroup>
|
<div>
|
{radioData.radio1 === '1' && (
|
<Table
|
columns={[
|
{ title: '区域', width: 120, dataIndex: 'groupName' },
|
{ title: '分派数', width: 60, className: 'workEfficiency-table', dataIndex: 'fps' },
|
{
|
title: '分派平均时长',
|
width: 170,
|
sorter: true,
|
sortNumber: 1,
|
className: 'workEfficiency-table',
|
dataIndex: 'fp',
|
render: (text, record) => <div>{text ? `${$$.formatNumber(text)}小时` : record.fps === 0 ? '-' : '0'}</div>,
|
},
|
{ title: '受理数', width: 60, className: 'workEfficiency-table-purple', dataIndex: 'sls' },
|
{
|
title: '受理平均时长',
|
width: 170,
|
className: 'workEfficiency-table-purple',
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'sl',
|
render: (text, record) => <div>{text ? `${$$.formatNumber(text)}小时` : record.sls === 0 ? '-' : '0'}</div>,
|
},
|
{ title: '办结数', width: 60, className: 'workEfficiency-table-green', dataIndex: 'bls' },
|
{
|
title: '办结平均时长',
|
width: 170,
|
className: 'workEfficiency-table-green',
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'blz',
|
render: (text, record) => <div>{text ? `${$$.formatNumber(text)}小时` : record.bls === 0 ? '-' : '0'}</div>,
|
},
|
{ title: '审批数', width: 60, className: 'workEfficiency-table-blue', dataIndex: 'sps' },
|
{
|
title: '审批平均时长',
|
width: 170,
|
className: 'workEfficiency-table-blue',
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'sp',
|
render: (text, record) => <div>{text ? `${$$.formatNumber(text)}小时` : record.sps === 0 ? '-' : '0'}</div>,
|
},
|
{ title: '回复数', width: 60, className: 'workEfficiency-table-orange', dataIndex: 'hfs' },
|
{
|
title: '督办回复平均时长',
|
width: 170,
|
className: 'workEfficiency-table-orange',
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'db',
|
render: (text, record) => <div>{text ? `${$$.formatNumber(text)}小时` : record.hfs === 0 ? '-' : '0'}</div>,
|
},
|
]}
|
locale={{
|
emptyText: (
|
<div className="public-noData">
|
<Empty imageStyle={{ height: '160px' }} description={<span style={{ color: '#86909C' }}>暂无数据</span>} image={empty}>
|
<div className="ledger-main-display" style={{ marginTop: '8px' }}></div>
|
</Empty>
|
</div>
|
), // 使用自定义组件作为空状态的展示
|
}}
|
bordered
|
onChange={(pagination, filters, sorter) => {
|
let sortType = sorter?.order === 'descend' ? '2' : sorter?.order === 'ascend' ? '1' : '';
|
let sortColmn =
|
sorter?.column?.dataIndex === 'fp'
|
? '1'
|
: sorter?.column?.dataIndex === 'sl'
|
? '2'
|
: sorter?.column?.dataIndex === 'blz'
|
? '3'
|
: sorter?.column?.dataIndex === 'sp'
|
? '4'
|
: sorter?.column?.dataIndex === 'db'
|
? '5'
|
: '';
|
AvgDurationGroup({ sortType, sortColmn }, search);
|
}}
|
dataSource={doData}
|
scroll={null}
|
summary={() => (
|
<Table.Summary fixed>
|
<Table.Summary.Row style={{ background: '#fff' }}>
|
<Table.Summary.Cell index={0}>
|
<span style={{ fontWeight: '600' }}>平均值</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={1}>
|
<span style={{ fontWeight: '600' }}>{doTotal.fps || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={2}>
|
<span style={{ fontWeight: '600' }}>{doTotal.fp ? `${$$.formatNumber(doTotal.fp)}小时` : 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={3}>
|
<span style={{ fontWeight: '600' }}>{doTotal.sls || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={4}>
|
<span style={{ fontWeight: '600' }}>{doTotal.sl ? `${$$.formatNumber(doTotal.sl)}小时` : 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={5}>
|
<span style={{ fontWeight: '600' }}>{doTotal.bls || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={6}>
|
<span style={{ fontWeight: '600' }}>{doTotal.blz ? `${$$.formatNumber(doTotal.blz)}小时` : 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={7}>
|
<span style={{ fontWeight: '600' }}>{doTotal.sps}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={8}>
|
<span style={{ fontWeight: '600' }}>{doTotal.sp ? `${$$.formatNumber(doTotal.sp)}小时` : 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={9}>
|
<span style={{ fontWeight: '600' }}>{doTotal.hfs || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={10}>
|
<span style={{ fontWeight: '600' }}>{doTotal.db ? `${$$.formatNumber(doTotal.db)}小时` : 0}</span>
|
</Table.Summary.Cell>
|
</Table.Summary.Row>
|
</Table.Summary>
|
)}
|
direction="暂无历史记录"
|
pagination={false}
|
size="small"
|
rowKey="applyId"
|
/>
|
)}
|
{radioData.radio1 === '2' && (
|
<div>
|
<Select
|
style={{ width: '220px' }}
|
value={radioData.select1}
|
onChange={(v) => {
|
setRadioData({ ...radioData, select1: v });
|
}}
|
>
|
{[
|
{ label: '分派平均时长', value: '1' },
|
{ label: '受理平均时长', value: '2' },
|
{ label: '办结平均时长', value: '3' },
|
{ label: '审批平均时长', value: '4' },
|
{ label: '督办回复平均时长', value: '5' },
|
].map((option, index) => (
|
<Option key={index} value={option.value}>
|
{'统计条件：' + option.label}
|
</Option>
|
))}
|
</Select>
|
<div style={{ width: '100%', height: '300px' }}>
|
<MyChartBar
|
data={
|
doChartsData?.map((i) =>
|
radioData.select1 === '1'
|
? i.fp
|
: radioData.select1 === '2'
|
? i.sl
|
: radioData.select1 === '3'
|
? i.blz
|
: radioData.select1 === '4'
|
? i.sp
|
: radioData.select1 === '5'
|
? i.db
|
: ''
|
) || []
|
}
|
dataAxis={doChartsData?.map((i) => i.groupName) || []}
|
/>
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
</div>
|
)}
|
{tabKey === '2' && (
|
<div className="card" style={{ marginTop: '12px' }}>
|
<div style={{ width: '100%', position: 'relative' }}>
|
<MyTabsNew
|
tabs={[
|
{ label: <div style={{ height: '24px' }}>全部（{timeoutData.total || 0}）</div>, key: '4' },
|
{ label: <div style={{ height: '24px' }}>分派超时（{timeoutData.fpcs || 0}）</div>, key: '1' },
|
{ label: <div style={{ height: '24px' }}>受理超时（{timeoutData.slcs || 0}）</div>, key: '2' },
|
{ label: <div style={{ height: '24px' }}>督办回复超时（{timeoutData.dbcs || 0}）</div>, key: '3' },
|
]}
|
activeKey={radioData.tab2}
|
onChange={(v) => {
|
setRadioData({ ...radioData, tab2: v });
|
// 立即清空数据，确保TableView显示清空状态
|
setTableData({ list: [], total: 0, page: 1, size: 10 });
|
// 重置分页状态，避免列表内容重复
|
const resetSearch = {
|
...timeoutSearch,
|
queryType: v,
|
page: 1
|
};
|
pageQuantity(resetSearch, search);
|
listTimeOutTaskGroup({ queryType: v }, search);
|
}}
|
/>
|
<div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', width: '100%' }}></div>
|
</div>
|
<RadioGroup
|
type="button"
|
value={radioData.radio2}
|
onChange={(v) => {
|
setRadioData({ ...radioData, radio2: v });
|
}}
|
style={{ marginBottom: 12, marginTop: 12 }}
|
>
|
<Radio value="1">列表</Radio>
|
<Radio value="2">统计图</Radio>
|
</RadioGroup>
|
<div>
|
{radioData.radio2 === '1' && (
|
<TableView
|
key={`timeout-table-${radioData.tab2}`} // 添加key强制重新渲染
|
columns={fxColumns}
|
dataSource={tableData.list}
|
size="small"
|
rowKey="caseTaskId"
|
// rowSelection={{
|
// selectedRowKeys: selectedRowKeys,
|
// onChange: onSelectChange,
|
// }}
|
bordered={true}
|
isScroll={true} //兼容以前的，当需要表格竖向滚动，请设置这个
|
scroll={{
|
x: 1300,
|
}}
|
offsetHeight={165}
|
onChange={(pagination, filters, sorter) => {
|
handleSort(pagination.current, pagination.pageSize, sorter);
|
}}
|
pagination={{
|
current: tableData.page,
|
pageSize: tableData.size,
|
total: tableData.total,
|
// showTotal: (total, range) => (
|
// <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
|
// {selectedRowKeys.length != 0 && (
|
// <div className="efficiency" style={{ bottom: '0' }}>
|
// <span>已选{selectedRowKeys.length}项</span>
|
// <span
|
// className="linkBtnColor"
|
// onClick={() => {
|
// setSelectedRowKeys([]);
|
// setSelectedRows([]);
|
// }}
|
// >
|
// 取消
|
// </span>
|
// <span className="linkBtnColor" onClick={handleBatchDB}>
|
// 批量督办
|
// </span>
|
// </div>
|
// )}
|
// <span>共 {total} 页</span>
|
// </div>
|
// ),
|
}}
|
/>
|
)}
|
{radioData.radio2 === '2' && (
|
<div style={{ width: '100%', height: '300px' }}>
|
<MyChartBar1 data={listTimeOut?.map((i) => i.quantity) || []} dataAxis={listTimeOut?.map((i) => i.groupName) || []} />
|
</div>
|
)}
|
{/* {selectedRowKeys.length != 0 && <div className='efficiency'>
|
<span>已选{selectedRowKeys.length}项</span>
|
<span className='linkBtnColor' onClick={() => {
|
setSelectedRowKeys([])
|
setSelectedRows([])
|
}}>取消</span>
|
<span className='linkBtnColor' onClick={handleBatchDB}>批量督办</span>
|
</div>} */}
|
</div>
|
</div>
|
)}
|
{tabKey === '3' && (
|
<div className="card" style={{ marginTop: '12px' }}>
|
<RadioGroup
|
type="button"
|
value={radioData.radio3}
|
onChange={(v) => {
|
setRadioData({ ...radioData, radio3: v });
|
}}
|
style={{ marginBottom: 12 }}
|
>
|
<Radio value="1">列表</Radio>
|
<Radio value="2">统计图</Radio>
|
</RadioGroup>
|
<div style={{ marginBottom: '12px', color: '#86909C' }}>流转率 =（流转中 + 流转受理） / 总登记</div>
|
<div>
|
{radioData.radio3 === '1' && (
|
<Table
|
columns={[
|
{ title: '区域', width: 170, dataIndex: 'groupName' },
|
{
|
title: '流转率',
|
width: 140,
|
defaultSortOrder: 'descend',
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'lzl',
|
render: (text) => <div>{text ? `${text}%` : '0%'}</div>,
|
},
|
{
|
title: '总登记',
|
width: 200,
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'zdj',
|
render: (text, record) => (
|
<div
|
onClick={() => {
|
text > 0 && modalListClick(record, 0);
|
}}
|
className={text > 0 ? 'public-color public-a' : ''}
|
>
|
{text || 0}
|
</div>
|
),
|
},
|
{
|
title: '自行受理',
|
width: 200,
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'zxsl',
|
render: (text, record) => (
|
<div
|
onClick={() => {
|
text > 0 && modalListClick(record, 1);
|
}}
|
className={text > 0 ? 'public-color public-a' : ''}
|
>
|
{text || 0}
|
</div>
|
),
|
},
|
{
|
title: '流转受理',
|
width: 200,
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'lzsl',
|
render: (text, record) => (
|
<div
|
onClick={() => {
|
text > 0 && modalListClick(record, 2);
|
}}
|
className={text > 0 ? 'public-color public-a' : ''}
|
>
|
{text || 0}
|
</div>
|
),
|
},
|
{
|
title: '流转中',
|
width: 200,
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'lzz',
|
render: (text, record) => (
|
<div
|
onClick={() => {
|
text > 0 && modalListClick(record, 3);
|
}}
|
className={text > 0 ? 'public-color public-a' : ''}
|
>
|
{text || 0}
|
</div>
|
),
|
},
|
{
|
title: '不予受理',
|
width: 200,
|
sorter: true,
|
sortNumber: 1,
|
dataIndex: 'bysl',
|
render: (text, record) => (
|
<div
|
onClick={() => {
|
text > 0 && modalListClick(record, 4);
|
}}
|
className={text > 0 ? 'public-color public-a' : ''}
|
>
|
{text || 0}
|
</div>
|
),
|
},
|
]}
|
bordered
|
dataSource={circulationData}
|
onChange={(pagination, filters, sorter) => {
|
let sortType = sorter?.order === 'descend' ? '2' : sorter?.order === 'ascend' ? '1' : '';
|
let sortColmn =
|
sorter?.column?.dataIndex === 'lzl'
|
? '1'
|
: sorter?.column?.dataIndex === 'zdj'
|
? '2'
|
: sorter?.column?.dataIndex === 'zxsl'
|
? '3'
|
: sorter?.column?.dataIndex === 'lzsl'
|
? '4'
|
: sorter?.column?.dataIndex === 'lzz'
|
? '5'
|
: sorter?.column?.dataIndex === 'bysl'
|
? '6'
|
: '';
|
statisticsCirculation({ sortType, sortColmn }, search);
|
}}
|
direction="暂无历史记录"
|
pagination={false}
|
size="small"
|
summary={() => (
|
<Table.Summary>
|
{circulationTotal?.map((i) => (
|
<Table.Summary.Row style={{ background: '#fff' }}>
|
<Table.Summary.Cell index={0}>
|
<span style={{ fontWeight: '600' }}>{i.groupName || '-'}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={1}>
|
<span style={{ fontWeight: '600' }}>{i.lzl ? `${$$.formatNumber(i.lzl)}%` : 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={2}>
|
<span style={{ fontWeight: '600' }}>{i.zdj || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={3}>
|
<span style={{ fontWeight: '600' }}>{i.zxsl || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={4}>
|
<span style={{ fontWeight: '600' }}>{i.lzsl || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={5}>
|
<span style={{ fontWeight: '600' }}>{i.lzz || 0}</span>
|
</Table.Summary.Cell>
|
<Table.Summary.Cell index={6}>
|
<span style={{ fontWeight: '600' }}>{i.bysl || 0}</span>
|
</Table.Summary.Cell>
|
</Table.Summary.Row>
|
))}
|
</Table.Summary>
|
)}
|
/>
|
)}
|
{radioData.radio3 === '2' && (
|
<div>
|
<Select
|
style={{ width: '220px' }}
|
value={radioData.select3}
|
onChange={(v) => {
|
setRadioData({ ...radioData, select3: v });
|
}}
|
>
|
{[
|
{ label: '流转率', value: '1' },
|
{ label: '总登记', value: '2' },
|
{ label: '自行受理', value: '3' },
|
{ label: '流转受理', value: '4' },
|
{ label: '流转中', value: '5' },
|
{ label: '不予受理', value: '6' },
|
].map((option, index) => (
|
<Option key={index} value={option.value}>
|
{'统计条件：' + option.label}
|
</Option>
|
))}
|
</Select>
|
<div style={{ width: '100%', height: '300px' }}>
|
<MyChartBar2
|
unit={radioData.select3 === '1' ? '%' : '件'}
|
data={
|
circulationChartsData
|
?.filter((i) => i.groupName !== '平均值')
|
?.map((i) =>
|
radioData.select3 === '1'
|
? i.lzl
|
: radioData.select3 === '2'
|
? i.zdj
|
: radioData.select3 === '3'
|
? i.zxsl
|
: radioData.select3 === '4'
|
? i.lzsl
|
: radioData.select3 === '5'
|
? i.lzz
|
: radioData.select3 === '6'
|
? i.bysl
|
: ''
|
) || []
|
}
|
dataAxis={circulationChartsData?.filter((i) => i.groupName !== '平均值')?.map((i) => i.groupName) || []}
|
/>
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
)}
|
<SupervisingViews
|
visible={supervising}
|
title={supervisingTitle}
|
handleOnCancel={() => setSupervising(false)}
|
caseId={supervisingAddId}
|
supervisingId={supervisingId}
|
getTableData={() => {
|
// let newData = region ? { [region.key]: region.value } : {}
|
// pageExtremeCase({
|
// ...search,
|
// ...pageData,
|
// ...newData,
|
// })
|
}}
|
/>
|
<Modal title="督办信息" style={{ width: '938px' }} onCancel={() => setSupervisingList(false)} visible={supervisingList} footer={null}>
|
<TableView
|
showHeader
|
title=""
|
columns={supervisingColumns}
|
dataSource={SuperviseListData || []}
|
rowKey="id"
|
tableHeight={500}
|
style={{ marginTop: '-40px' }}
|
/>
|
</Modal>
|
<Modal
|
title={<div style={{ textAlign: 'left', fontWeight: '600' }}>{dialogNameMap[timeoutKey]}</div>}
|
style={{ width: '80%' }}
|
onCancel={() => {
|
setVisible(false);
|
}}
|
visible={visible}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<TimeoutDialog timeoutKey={timeoutKey} search={search} />
|
</Modal>
|
<Modal
|
title={`${modalList.name || ''}`}
|
visible={modalVisible}
|
onCancel={() => {
|
setModalVisible(false);
|
setModalSearch({ ...modalSearch, page: 1 });
|
}}
|
footer={null}
|
style={{ width: '80%' }}
|
>
|
<div>
|
<TableView
|
columns={[
|
{
|
title: '登记时间',
|
width: 100,
|
dataIndex: 'createTime',
|
// defaultSortOrder: 'descend',
|
// order: 'ascend',
|
// sorter: { compare: (a, b) => {} },
|
render: (text) => <div>{$$.dateFormat(text)}</div>,
|
},
|
{ title: '事项来源', width: 100, dataIndex: 'canalName' },
|
{ title: '事项状态', width: 100, dataIndex: 'statusName' },
|
{ title: '事项等级', width: 100, dataIndex: 'caseLevel' },
|
{ title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
|
{ title: '问题属地', width: 100, dataIndex: 'areaName' },
|
{ title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
|
{ title: '承办部门', width: 100, dataIndex: 'mediateUnitName' },
|
{
|
title: '办结时间',
|
width: 100,
|
dataIndex: 'closeTime',
|
// order: 'ascend',
|
// sorter: { compare: (a, b) => {} },
|
render: (text) => <span>{$$.dateFormat(text)}</span>,
|
},
|
{
|
title: '化解结果',
|
width: 100,
|
dataIndex: 'mediResult',
|
render: (text) => (
|
<div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'}>
|
{text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}
|
</div>
|
),
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 50,
|
render: (_, record) => {
|
return <Link onClick={() => handleJump(record)}>详情</Link>;
|
},
|
},
|
]}
|
dataSource={modalList.tableData}
|
onChange={(pagination, filters, sorter) => {
|
listStatisticsCirculation({
|
...modalSearch,
|
page: pagination.current,
|
size: pagination.pageSize,
|
});
|
}}
|
pagination={{
|
current: modalSearch.page,
|
pageSize: modalSearch.size,
|
total: modalList.total,
|
// onChange: (page, pageSize) => handleModalChangePage(page, pageSize),
|
}}
|
/>
|
</div>
|
</Modal>
|
</div>
|
</div>
|
</NewPage>
|
);
|
};
|
|
export default WorkEfficiency;
|
|
// 办件时长
|
const MyChartBar = ({ data, dataAxis }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartBar'), 'dark');
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 28,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c}小时',
|
},
|
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisTick: {
|
// 去除X轴刻度线
|
show: false,
|
},
|
axisLabel: {
|
color: '#1D2129',
|
interval: 0, // 强制显示所有标签
|
rotate: 45, // 旋转标签以避免重叠
|
overflow: 'truncate', // 截断过长的标签
|
width: 100, // 设置标签的最大宽度
|
},
|
scrollbar: {
|
show: true, // 显示滚动条
|
type: 'inside', // 内置滚动条
|
showDataShadow: true,
|
backgroundColor: 'rgba(0,0,0,0.05)',
|
fillerColor: 'rgba(0,0,0,0.2)',
|
handleColor: 'rgba(0,0,0,0.8)',
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: 'rgba(0,0,0,0.25)',
|
},
|
},
|
},
|
dataZoom: [
|
{
|
type: 'inside',
|
},
|
],
|
|
series: [
|
{
|
type: 'bar',
|
name: '',
|
data: data,
|
barWidth: 24, // 设置柱子宽度
|
barCategoryGap: '100%', // 固定柱状图之间的间距
|
label: {
|
show: true,
|
color: 'rgba(0, 0, 0, 0.85)',
|
fontSize: '14px',
|
position: 'top',
|
valueAnimation: false,
|
formatter: function (params) {
|
return params.value ? params.value + '小时' : params.value; // 在数值后加上"小时"
|
},
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7,
|
},
|
},
|
itemStyle: {
|
color: '#1a6fb8',
|
borderWidth: 2, // 设置边框宽度
|
},
|
},
|
],
|
});
|
|
const zoomSize = 6;
|
myChart.on('click', function (params) {
|
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
myChart.dispatchAction({
|
type: 'dataZoom',
|
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
|
});
|
});
|
}, [data]);
|
|
return <div id="chartBar" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
|
// 超时办件
|
const MyChartBar1 = ({ data, dataAxis }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartBar1'), 'dark');
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 28,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c}件',
|
},
|
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisTick: {
|
// 去除X轴刻度线
|
show: false,
|
},
|
axisLabel: {
|
color: '#1D2129',
|
interval: 0, // 强制显示所有标签
|
rotate: 45, // 旋转标签以避免重叠
|
overflow: 'truncate', // 截断过长的标签
|
width: 100, // 设置标签的最大宽度
|
},
|
scrollbar: {
|
show: true, // 显示滚动条
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: 'rgba(0,0,0,0.25)',
|
},
|
},
|
},
|
dataZoom: [
|
{
|
type: 'inside',
|
},
|
],
|
series: [
|
{
|
type: 'bar',
|
name: '',
|
data: data,
|
barWidth: 24, // 设置柱子宽度
|
label: {
|
show: true,
|
color: 'rgba(0, 0, 0, 0.85)',
|
fontSize: '14px',
|
position: 'top',
|
valueAnimation: false,
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7,
|
},
|
},
|
itemStyle: {
|
color: '#1a6fb8',
|
borderWidth: 2, // 设置边框宽度
|
},
|
},
|
],
|
});
|
const zoomSize = 6;
|
myChart.on('click', function (params) {
|
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
myChart.dispatchAction({
|
type: 'dataZoom',
|
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
|
});
|
});
|
}, [data]);
|
|
return <div id="chartBar1" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
|
// 流转情况
|
const MyChartBar2 = ({ data, unit = '件', dataAxis }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartBar2'), 'dark');
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 28,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c}' + unit,
|
},
|
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisTick: {
|
// 去除X轴刻度线
|
show: false,
|
},
|
axisLabel: {
|
color: '#1D2129',
|
interval: 0, // 强制显示所有标签
|
rotate: 45, // 旋转标签以避免重叠
|
overflow: 'truncate', // 截断过长的标签
|
width: 100, // 设置标签的最大宽度
|
},
|
scrollbar: {
|
show: true, // 显示滚动条
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: 'rgba(0,0,0,0.25)',
|
},
|
},
|
},
|
dataZoom: [
|
{
|
type: 'inside',
|
},
|
],
|
series: [
|
{
|
type: 'bar',
|
name: '',
|
data: data,
|
barWidth: 24, // 设置柱子宽度
|
label: {
|
show: true,
|
color: 'rgba(0, 0, 0, 0.85)',
|
fontSize: '14px',
|
position: 'top',
|
valueAnimation: false,
|
formatter: function (params) {
|
return unit === '%' ? params.value + '%' : params.value; // 在数值后加上"小时"
|
},
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7,
|
},
|
},
|
itemStyle: {
|
color: '#1a6fb8',
|
borderWidth: 2, // 设置边框宽度
|
},
|
},
|
],
|
});
|
const zoomSize = 6;
|
myChart.on('click', function (params) {
|
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
myChart.dispatchAction({
|
type: 'dataZoom',
|
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
|
});
|
});
|
}, [data]);
|
|
return <div id="chartBar2" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
