/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-09-14 15:59:17
|
* @LastEditTime: 2025-06-21 11:32:31
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useState, useEffect, useRef, useMemo, Children } from 'react';
|
import * as $$ from '../../utils/utility';
|
import { Form, Typography, Row, Col, Space, Divider, Table, Empty, Breadcrumb } from 'antd';
|
import { Alert, Select, Tooltip, Modal, Button } from '@arco-design/web-react';
|
import { IconUndo, IconCaretRight } from '@arco-design/web-react/icon';
|
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
|
import {
|
workDash_1,
|
workDash_2,
|
workDash_3,
|
workDash_4,
|
workDash_5,
|
workDash_6,
|
workDash_7,
|
workDash_8,
|
huo,
|
workDash_9,
|
workDash_10,
|
workDash_11,
|
workDash_12,
|
workDash_13,
|
workDash_14,
|
workDash_16,
|
workDash_17,
|
workDash_18,
|
workDash_19,
|
workDash_20,
|
workDash_21,
|
workDash_22,
|
workDash_23,
|
workDash_24,
|
workDash_25,
|
workDash_26,
|
workDash_27,
|
workDash_28,
|
workDash_29,
|
workDash_30,
|
} from '../../assets/images';
|
import NewPage from '../../components/NewPage/index';
|
import * as echarts from 'echarts';
|
import MyTabsNew from '../../components/MyTabsNew';
|
import TableView from '../../components/TableViewCanSort';
|
import NewTableSearch from '../../components/NewTableSearch';
|
import SupervisingViews from '../../views/register/matterDetail/SupervisingViews';
|
import Response from '../../views/register/matterDetail/response';
|
import ResponseDetail from '../../views/register/matterDetail/responseDetail';
|
import SelectObjModal from '@/components/SelectObjModal/newSelectPerson';
|
import { empty } from '@/assets/images';
|
import './index.less';
|
|
const { Link } = Typography;
|
const Option = Select.Option;
|
// 调度中心列表
|
function getListDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/statistics', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
function treeByUserIdApi() {
|
return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', service: 'sys' });
|
}
|
|
function caseSuperviseInfoApi(data) {
|
return $$.ax.request({ url: `caseSupervise/getById`, type: 'get', service: 'mediate', data });
|
}
|
|
// 解纷态势-纠纷类型子集
|
function statisticsCaseTypeApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/statisticsCaseType', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取实时动态数据
|
function getCaseInfoDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 扬言极端分组统计
|
function getAnalysisApi(submitData) {
|
return $$.ax.request({ url: 'analysis/statisticsYYJDQuantity', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
//督办次数
|
function pageCaseSuperviseApi(data) {
|
return $$.ax.request({ url: 'caseSupervise/pageCaseSupervise', type: 'get', service: 'mediate', data });
|
}
|
|
//风险评估
|
function pageExtremeCaseApi(data) {
|
return $$.ax.request({ url: `caseTask/pageExtremeCase`, type: 'get', service: 'mediate', data });
|
}
|
|
//督办添加id
|
function getNewTimeIdApi(id) {
|
return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
|
}
|
|
// 在文件顶部添加新的API请求函数
|
function pageQueryAreaApi(data) {
|
return $$.ax.request({ url: 'caseInfo/pageQueryArea', type: 'get', data, service: 'mediate' });
|
}
|
|
const WorkDash = () => {
|
const navigate = useNavigate();
|
const [form] = Form.useForm();
|
const [modalForm] = Form.useForm();
|
// 搜索
|
const [search, setSearch] = useState({});
|
// 默认查询询条件
|
const [normalSearch, setNormalSearch] = useState({});
|
// 筛选区域的中文
|
const [labels, setLabels] = useState([]);
|
const [yYjds, setYYjds] = useState([]);
|
|
const [region, setRegion] = useState({});
|
const [temporary, setTemporary] = useState([]);
|
// 筛选纠纷类型的中文
|
const [caseTypeNames, setCaseTypeNames] = useState([]);
|
const [temporaryCaseType, setTemporaryCaseType] = useState([]);
|
// 数据
|
const [data, setData] = useState({});
|
|
const [listData, setListData] = useState({ tableData: [] }); //实时动态数据表
|
const [listDataSearch, setListDataSearch] = useState({ page: 1, size: 10, sortColmn: '1', sortType: '2' }); //实时动态数据表
|
|
// 调解组织select框数据
|
const [adjustOrgData, setAdjustOrgData] = useState([]);
|
// tab切换
|
const [tabKey, setTabKey] = useState('1');
|
// 区域字典值
|
const [treeList, setTreeList] = useState([]);
|
// 纠纷类型、化解状况、事项等级切换
|
const [rightTag, setRightTag] = useState('1');
|
// 纠纷类型饼图所在层级
|
const [caseTypeLevel, setCaseTypeLevel] = useState(1);
|
// 纠纷类型饼图2层，3层数据
|
const [caseTypeList, setCaseTypeList] = useState([]);
|
|
// 化解统计切换
|
const [province, setProvince] = useState('');
|
|
// 承办配合部门select框数据
|
const [selectModalVisible, setSelectModalVisible] = useState(false);
|
const [selectObjModalData, setSelectObjModalData] = useState({});
|
|
// 扬言极端
|
const [extremeData, setExtremeData] = useState([]);
|
const [extremeTotal, setExtremeTotal] = useState(0);
|
const [yYjdData, setYYjdData] = useState({ visible: false, data: {} });
|
const [SuperviseListData, setSuperviseListData] = useState([]);
|
const [supervisingList, setSupervisingList] = useState(false);
|
const [tableData, setTableData] = useState({ list: [] }); //表格数据
|
const [yYJDSortType, setYYJDSortType] = useState('2'); //事件数量默认排序
|
const [pageData, setPageData] = useState({ sortType: 2, sortColmn: 1, page: 1, size: 10 });
|
const [searchSupervise, setSearchSupervise] = useState({ page: '1', size: 20, caseId: '', type: 0 });
|
|
const [response, setResponse] = useState(false);
|
const [detail, setDetail] = useState(false);
|
const [responseId, setResponseId] = useState('');
|
const [superviseInfo, setSuperviseInfo] = useState({});
|
const [responseDetail, setResponseDetail] = useState({});
|
const [supervisingId, setSupervisingId] = useState('');
|
const [supervising, setSupervising] = useState(false); //督办弹窗控制
|
const [supervisingAddId, setSupervisingAddId] = useState('');
|
|
// 添加modalData和modalVisible的state
|
const [modalData, setModalData] = useState({});
|
const [modalSearch, setModalSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });
|
const [modalVisible, setModalVisible] = useState(false);
|
|
//排序
|
const handleSortModal = (page, pageSize, sort) => {
|
console.log('sort', page, pageSize, sort);
|
let sortColmn = sort.column ? sort.column.sortNumber : 1;
|
let sortType = sort.order === 'descend' ? 2 : 1; //1：正序；2：倒序
|
handleModal({
|
...modalSearch,
|
...pageData,
|
sortType,
|
sortColmn,
|
page,
|
size: pageSize,
|
});
|
};
|
|
// 搜索 or 重置
|
function handleModalSearch(type, session) {
|
if (type === 'search') {
|
let values = modalForm.getFieldsValue();
|
handleModal({ ...modalSearch, ...values });
|
}
|
if (type === 'reset') {
|
let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
|
handleModal({
|
...search,
|
...paramsObj,
|
});
|
return;
|
}
|
}
|
|
async function handleModal(params) {
|
global.setSpinning(true);
|
const res = await pageQueryAreaApi({ ...params });
|
global.setSpinning(false);
|
if (res.type) {
|
// 设置弹窗数据
|
setModalData({
|
name: params.areaName,
|
tableData: res.data?.content || [], // 接口返回的列表数据
|
total: res.data?.totalElements || 0,
|
});
|
setModalSearch({
|
...params,
|
});
|
}
|
}
|
|
// 选择部门弹窗
|
function onSelectModalChange(key) {
|
if (key === 'mediateUnitId') {
|
setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' });
|
} else {
|
setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' });
|
}
|
setSelectModalVisible(true);
|
}
|
|
// 返回区域查询所需要的字段
|
function queCodeSearch(obj, firstLevel, queCode) {
|
// 第一层级 queCity 第二层级 queArea 第三层级 queRoad 第四层级 queVillage
|
// firstLevel 用户的最高权限属于哪一级 1：市，2：区，3：街道，4：村居
|
// values 搜索区域的值
|
let queCodeLength = queCode.length;
|
let keyList =
|
firstLevel === '1'
|
? ['queCity', 'queArea', 'queRoad', 'queVillage']
|
: firstLevel === '2'
|
? ['queArea', 'queRoad', 'queVillage']
|
: firstLevel === '3'
|
? ['queRoad', 'queVillage']
|
: ['queVillage'];
|
let key = keyList[queCodeLength - 1];
|
obj[key] = queCode[queCodeLength - 1];
|
}
|
|
// 搜索 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.createStart) {
|
obj.createTime = [$$.myMoment(obj.createStart), $$.myMoment(obj.createEnd)];
|
}
|
form.setFieldsValue(obj);
|
getListData(data.search, listDataSearch);
|
return;
|
}
|
if (type === 'reset') {
|
setListDataSearch({ ...listDataSearch, page: 1 });
|
getListData(
|
{ [session.key]: session.value[0], createStart: $$.dateFormat(session.createStart), createEnd: $$.dateFormat(session.createEnd) },
|
{ ...listDataSearch, page: 1 }
|
);
|
return;
|
}
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
$$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
|
$$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
|
|
$$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
|
$$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
|
if (values.mediateUnitId) {
|
values.mediateUnitId = selectObjModalData?.mediateUnitId?.key;
|
} else {
|
delete values.mediateUnitId;
|
delete search.mediateUnitId;
|
}
|
if (values.assistUnitId) {
|
values.assistUnitId = selectObjModalData?.assistUnitId?.key;
|
} else {
|
delete values.assistUnitId;
|
delete search.assistUnitId;
|
}
|
if (temporary?.length > 0) {
|
setLabels(temporary);
|
setTemporary([]);
|
}
|
if (temporaryCaseType?.length > 0) {
|
setCaseTypeNames(temporaryCaseType);
|
setTemporaryCaseType([]);
|
}
|
getListData({ ...values, canal: search.canal || '' }, listDataSearch);
|
return;
|
}
|
if (type === 'changeTabs' || type === 'changePage') {
|
getListData({ ...search }, listDataSearch);
|
}
|
}
|
|
// 表头
|
const columns = () => {
|
const columnsData = [
|
{
|
title: '登记时间',
|
width: 120,
|
dataIndex: 'createTime',
|
render: (text, record, index) => {
|
return (
|
<div style={{ display: 'flex', gap: '8px' }}>
|
<div>{$$.dateFormat(text)}</div>
|
{record?.isRisk === '1' && <div className="public-tag public-tag-tagRed">扬言</div>}
|
</div>
|
);
|
},
|
},
|
{ title: '事项来源', width: 100, dataIndex: 'canalName' },
|
{ title: '事项状态', width: 100, dataIndex: 'statusName' },
|
{ title: '事项等级', width: 80, dataIndex: 'caseLevel' },
|
{ title: '事项类型', width: 150, dataIndex: 'caseTypeName' },
|
{ title: '问题属地', width: 170, dataIndex: 'areaName' },
|
{ title: '登记机构', width: 130, dataIndex: 'inputUnitName' },
|
{ title: '承办部门', width: 100, dataIndex: 'mediateUnitName' },
|
{ title: '办结时间', width: 100, dataIndex: 'closeTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
|
{
|
title: '化解结果',
|
width: 80,
|
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>;
|
},
|
},
|
];
|
return columnsData;
|
};
|
|
// 跳转详情页
|
function handleJump(record) {
|
// 仅在gz/index.html路径下生效
|
const newWindow = window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`);
|
// const newWindow = window.open(`#/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`, "_blank", "noreferrer");
|
// 在新窗口的上下文中注入脚本，用于读取 sessionStorage 数据
|
// navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&ss=${record.id}`)
|
}
|
|
// 切换tabs页
|
function tabsOnchange(activeKey) {
|
console.log(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);
|
} else if (activeKey === '4') {
|
getListData({ ...search, canal: '22_00001-3' }, listDataSearch);
|
} else if (activeKey === '5') {
|
getListData({ ...search, canal: '22_00001-4' }, listDataSearch);
|
} else if (activeKey === '6') {
|
getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-8' }, listDataSearch);
|
} else if (activeKey === '7') {
|
getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-2' }, listDataSearch);
|
} else if (activeKey === '8') {
|
getListData({ ...search, canal: '22_00001-4', canalSecond: '22_00003-1' }, listDataSearch);
|
} else if (activeKey === '9') {
|
getListData({ ...search, canal: '22_00001-4', canalSecond: '22_00003-7' }, listDataSearch);
|
}
|
}
|
}
|
|
//督办次数
|
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);
|
}
|
};
|
|
// 用于扬言极端功能选择下一级后，在查询条件中显示
|
function getParentCodes(treeList, code) {
|
let parentCodes = [];
|
function findParent(node, targetCode) {
|
if (node.value === targetCode) {
|
return true;
|
}
|
if (node.children && node.children.length > 0) {
|
for (let child of node.children) {
|
if (findParent(child, targetCode)) {
|
parentCodes.unshift(node.value);
|
return true;
|
}
|
}
|
}
|
return false;
|
}
|
|
for (let node of treeList) {
|
if (findParent(node, code)) {
|
break;
|
}
|
}
|
return [...parentCodes, code];
|
}
|
|
//督办次数
|
const supervisingColumns = [
|
{
|
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: 50,
|
render: (text) => <span>{text === 3 ? '三级' : text === 2 ? '二级' : text === 1 ? '一级' : '-'}</span>,
|
},
|
{
|
title: '回复状态',
|
dataIndex: 'supStatus',
|
key: 'supStatus',
|
width: 50,
|
render: (text, record) => (
|
<div style={{ color: record.supStatus === 0 ? '#F53F3F' : '#00B42A' }}>{record.supStatus === 0 ? '未回复' : '已回复'}</div>
|
),
|
},
|
{
|
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 fxColumns = [
|
{
|
title: '',
|
dataIndex: 'index',
|
key: 'index',
|
width: 75,
|
render: (text, record, index) => {
|
return <div className="public-tag public-tag-tagRed">扬言</div>;
|
},
|
},
|
{
|
title: '登记时间',
|
dataIndex: 'turnaroundTime',
|
key: 'turnaroundTime',
|
width: 150,
|
defaultSortOrder: 'descend',
|
sorter: true,
|
sortNumber: 1, //设置这个传给后端的
|
render: (text) => {
|
return <span>{$$.myTimeFormat(text, 'YYYY-M-D')}</span>;
|
},
|
},
|
{
|
title: '问题属地',
|
dataIndex: 'queAddress',
|
key: 'queAddress',
|
width: 180,
|
},
|
{
|
title: '事项来源',
|
dataIndex: 'caseSource',
|
key: 'caseSource',
|
width: 120,
|
},
|
{
|
title: '事项等级',
|
dataIndex: 'caseGrade',
|
key: 'caseGrade',
|
width: 100,
|
render: (text) => <span>{text === 3 ? '三级' : text === 2 ? '二级' : text === 1 ? '一级' : '-'}</span>,
|
},
|
{
|
title: '涉及人数',
|
dataIndex: 'peopleNum',
|
key: 'peopleNum',
|
width: 100,
|
},
|
{
|
title: '纠纷类型',
|
dataIndex: 'caseType',
|
key: 'caseType',
|
width: 150,
|
render: (text) => (
|
<span>
|
{' '}
|
<Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
|
</span>
|
),
|
},
|
{
|
title: '申请方',
|
dataIndex: 'plaintiffs',
|
key: 'plaintiffs',
|
width: 180,
|
},
|
{
|
title: '被申请方',
|
dataIndex: 'defendants',
|
key: 'defendants',
|
width: 120,
|
render: (text) => (
|
<span>
|
{' '}
|
<Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
|
</span>
|
),
|
},
|
{
|
title: '事项状态',
|
dataIndex: 'statusName',
|
key: 'statusName',
|
sorter: true,
|
sortNumber: 2, //设置这个传给后端的
|
width: 120,
|
},
|
{
|
title: '承办部门',
|
dataIndex: 'organizingUnit',
|
key: 'organizingUnit',
|
width: 120,
|
render: (text) => (
|
<span>
|
{' '}
|
<Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
|
</span>
|
),
|
},
|
{
|
title: '经办人',
|
dataIndex: 'mediator',
|
key: 'mediator',
|
width: 180,
|
},
|
{
|
title: '化解结果',
|
dataIndex: 'mediResultName',
|
key: 'mediResultName',
|
width: 100,
|
render: (text, record, index) => <div style={{ color: text == '化解成功' ? '#00b42a' : '#f53f3f' }}>{text}</div>,
|
},
|
{
|
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 handleResponse = (id, type) => {
|
if (type === 'response') {
|
setResponse(!response);
|
setResponseId(id);
|
caseSuperviseInfo(id, 'response');
|
}
|
if (type === 'responseDetail') {
|
setDetail(!detail);
|
caseSuperviseInfo(id, 'responseDetail');
|
}
|
};
|
|
//回复
|
const caseSuperviseInfo = async (id, type) => {
|
const res = await caseSuperviseInfoApi({ id: id });
|
if (type === 'response') {
|
if (res.type) {
|
setSuperviseInfo(res.data);
|
}
|
}
|
if (type === 'responseDetail') {
|
if (res.type) {
|
setResponseDetail(res.data);
|
}
|
}
|
};
|
|
//添加督办
|
const handleSupervisingAdd = (caseId) => {
|
setSupervising(!supervising);
|
setSupervisingAddId(caseId);
|
getNewTimeId();
|
};
|
|
//获取添加督办id
|
const getNewTimeId = async () => {
|
const res = await getNewTimeIdApi();
|
if (res.type) {
|
setSupervisingId(res.data);
|
}
|
};
|
|
//排序
|
const handleSort = (page, pageSize, sort) => {
|
let sortColmn = sort.column ? sort.column.sortNumber : 1;
|
let sortType = sort.order == 'descend' ? 2 : 1; //1：正序；2：倒序
|
let newData = region ? { [region.key]: region.value } : {};
|
pageExtremeCase(
|
{
|
...search,
|
...pageData,
|
...newData,
|
sortType,
|
sortColmn,
|
page,
|
size: pageSize,
|
},
|
true
|
);
|
};
|
|
// 扬言极端列表
|
async function pageExtremeCase(submitData, visible) {
|
global.setSpinning(true);
|
const res = await pageExtremeCaseApi({ ...submitData });
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data.content || [];
|
let total = res?.data?.totalElements || 0;
|
setTableData({ list: data, total });
|
setYYjdData({ visible: visible || false });
|
}
|
}
|
|
// 获取区域字典值
|
async function treeByUserId() {
|
global.setSpinning(true);
|
const res = await treeByUserIdApi();
|
global.setSpinning(false);
|
if (res.type) {
|
let list = res.data || [];
|
setTreeList(list);
|
let values = form.getFieldsValue();
|
let key =
|
list[0].level === '1'
|
? 'queCity'
|
: list[0].level === '2'
|
? 'queArea'
|
: list[0].level === '3'
|
? 'queRoad'
|
: list[0].level === '4'
|
? 'queVillage'
|
: 'queRoad';
|
values.queCode = [list[0].value];
|
values.createTime = [
|
$$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
|
$$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
|
];
|
form.setFieldsValue(values);
|
setLabels([list[0].label]);
|
setYYjds([{ label: list[0].label, value: list[0].value, key }]);
|
setNormalSearch({
|
key,
|
value: [list[0].value],
|
level: list[0].level,
|
createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
|
createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
|
});
|
handleSearch('reset', {
|
key,
|
value: [list[0].value],
|
createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
|
createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
|
});
|
}
|
}
|
|
function tabKeyTitles(type) {
|
switch (type) {
|
case '2':
|
return '大厅来访';
|
case '3':
|
return '线上来访';
|
case '4':
|
return '自行排查';
|
case '5':
|
return '协同推送';
|
case '6':
|
return '部门排查';
|
case '7':
|
return '网格排查';
|
case '8':
|
return '非警务纠纷';
|
case '9':
|
return '专项纠纷';
|
default:
|
break;
|
}
|
}
|
|
const onChange = (value, selectedOptions) => {
|
const labels = selectedOptions.map((option) => option.label);
|
setTemporary(labels);
|
setYYjds(
|
selectedOptions.map((option) => ({
|
label: option.label,
|
value: option.value,
|
key:
|
option.level === '1'
|
? 'queCity'
|
: option.level === '2'
|
? 'queArea'
|
: option.level === '3'
|
? 'queRoad'
|
: option.level === '4'
|
? 'queVillage'
|
: 'queRoad',
|
}))
|
);
|
};
|
|
const onLastChange = (value, selectedOptions) => {
|
const Names = selectedOptions.map((option) => option.label);
|
setTemporaryCaseType(Names);
|
};
|
|
// 饼图点击进入下一层级
|
async function onMyLTopChartPie(params) {
|
console.log('params', params);
|
let caseTypeFirst = params?.data?.caseType;
|
global.setSpinning(true);
|
const res = await statisticsCaseTypeApi({ ...search, caseTypeFirst });
|
global.setSpinning(false);
|
if (res.type) {
|
setCaseTypeList(res.data || []);
|
setCaseTypeLevel(caseTypeLevel + 1);
|
}
|
}
|
|
async function onClickProvince(value) {
|
if (province !== value) {
|
setProvince(value);
|
}
|
}
|
|
// 获取数据
|
async function getListData(submitData, tableSearch) {
|
console.log('submitData', submitData);
|
global.setSpinning(true);
|
const res = await getListDataApi({ ...submitData });
|
const res1 = await getCaseInfoDataApi({ ...submitData, ...tableSearch }); //获取实时动态数据
|
const res2 = await getAnalysisApi({ ...submitData, sortType: yYJDSortType });
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
setSearch(submitData);
|
}
|
if (res1.type) {
|
setListData({
|
total: res1?.data?.totalElements || 0,
|
tableData: res1?.data?.content || [],
|
});
|
}
|
if (res2.type) {
|
let data = res2.data || [];
|
let total = data?.map((i) => i.total)?.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
console.log('total', total);
|
setExtremeData(data);
|
setExtremeTotal(total);
|
}
|
}
|
|
// 页码修改
|
function handleChangePage(page, pageSize) {
|
let paramsObj = Object.assign({ ...search, ...listDataSearch }, { page, size: pageSize });
|
getCaseInfoData({ ...paramsObj });
|
}
|
|
// 获取数据
|
async function getCaseInfoData(submitData) {
|
global.setSpinning(true);
|
const res = await getCaseInfoDataApi({ ...submitData });
|
global.setSpinning(false);
|
setListDataSearch({ ...listDataSearch, page: submitData.page, size: submitData.size });
|
if (res.type) {
|
setListData({
|
total: res?.data?.totalElements || 0,
|
tableData: res?.data?.content || [],
|
});
|
}
|
}
|
|
async function onModalChange(key, value) {
|
let paramsObj = Object.assign({ ...search, ...listDataSearch, [key]: value }, { page: 1, size: 10 });
|
global.setSpinning(true);
|
const res = await getCaseInfoDataApi({ ...paramsObj });
|
global.setSpinning(false);
|
if (res.type) {
|
setModalVisible(true);
|
setModalData({ name: '事项详情', total: res?.data?.totalElements || 0, tableData: res?.data?.content || [] });
|
}
|
}
|
|
// 添加onModalClick处理函数
|
const onModalClick = async (params) => {
|
console.log('params', params);
|
let newSearch = {
|
...search,
|
...modalSearch,
|
queArea: params.queArea,
|
queCity: params.queCity,
|
queRoad: params.queRoad,
|
queVillage: params.queVillage,
|
areaType: params.areaType,
|
unitGrades: params.unitGrades,
|
// 1-化解中，2-已结案，3-不予受理
|
resolveType: province,
|
};
|
try {
|
const res = await pageQueryAreaApi({
|
...newSearch, // 传入当前的查询条件'
|
});
|
|
if (res.type) {
|
// 设置弹窗数据
|
setModalData({
|
name: params.areaName,
|
tableData: res.data?.content || [], // 接口返回的列表数据
|
total: res.data?.totalElements || 0,
|
});
|
setModalSearch({
|
...newSearch,
|
});
|
// 显示弹窗
|
setModalVisible(true);
|
}
|
} catch (err) {
|
console.error('获取区域详情失败:', err);
|
}
|
};
|
|
// 导出数据
|
function downloadXls() {
|
const keysToFilter = ['page', 'size'];
|
const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));
|
|
window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
|
}
|
|
// 导出镇街统计
|
function downloadAreaXls() {
|
const keysToFilter = ['page', 'size'];
|
const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));
|
|
window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportStatisticsArea?${$$.useQueryParams(filteredObj)}`);
|
}
|
async function getAnalysis(submitData) {
|
global.setSpinning(true);
|
const res = await getAnalysisApi({ ...submitData });
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data || [];
|
let total = data?.map((i) => i.total)?.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
setExtremeData(data);
|
setExtremeTotal(total);
|
}
|
}
|
|
// 初始化
|
useEffect(() => {
|
treeByUserId();
|
}, []);
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '解纷态势' }], title: '解纷态势' }}>
|
<div className="comprehensive">
|
<div className="pageSearch">
|
<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: '纠纷类型',
|
changeSelect: true,
|
placeholder: '请选择',
|
onChange: onLastChange,
|
span: 8,
|
treedata: $$.caseTypeSelect.caseTypeSelect,
|
},
|
{
|
type: 'searchButton',
|
name: 'mediateUnitId',
|
maxLength: 0,
|
onClear: () => {
|
setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} });
|
form.setFieldValue('mediateUnitId', '');
|
},
|
onSearch: () => {
|
onSelectModalChange('mediateUnitId');
|
},
|
searchButton: '选择',
|
placeholder: '请选择',
|
label: '承办部门',
|
},
|
{
|
type: 'searchButton',
|
name: 'assistUnitId',
|
maxLength: 0,
|
onClear: () => {
|
setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} });
|
form.setFieldValue('assistUnitId', '');
|
},
|
onSearch: () => {
|
onSelectModalChange('assistUnitId');
|
},
|
searchButton: '选择',
|
placeholder: '请选择',
|
label: '配合部门',
|
},
|
{ type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
|
]}
|
handleReset={() => {
|
form.resetFields();
|
form.setFieldsValue({
|
queCode: [normalSearch.value[0]],
|
createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)],
|
});
|
setLabels([treeList[0].label]);
|
setYYjds([{ label: treeList[0].label, value: treeList[0].value }]);
|
handleSearch('reset', normalSearch);
|
}}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
{/* <div style={{ marginTop: '12px' }}>
|
<Alert
|
type='success'
|
content={<span>已为您生成<span className='public-color'>{labels?.filter(i => i !== '本级').join('/')}</span><span>{search.createStart && '在'}</span>
|
{search.createStart && <span className='public-color'>登记时间({$$.myTimeFormat(search.createStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.createEnd, 'YYYY.M.D')})</span>}
|
{search.closeStart && <span className='public-color'>{search.createStart && '、'}办结时间({$$.myTimeFormat(search.createStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.createEnd, 'YYYY.M.D')})</span>}
|
{search.caseType && <span className='public-color'>{(search.createStart || search.closeStart) && '、'}纠纷类型({caseTypeNames.join('/')})</span>}
|
的解纷态势数据</span>}
|
/>
|
</div> */}
|
{tabKey !== '1' && (
|
<div style={{ marginTop: '16px', display: 'flex', gap: '8px', alignItems: 'center' }}>
|
<Button
|
className="source-button"
|
onClick={() => {
|
tabsOnchange('1');
|
}}
|
icon={<img className="source-icon" src={workDash_19} alt="" srcset="" />}
|
type="secondary"
|
>
|
全部来源
|
</Button>
|
<IconCaretRight />
|
{tabKey === '2' && (
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_20} alt="" srcset="" />}
|
type="secondary"
|
>
|
大厅来访
|
</Button>
|
)}
|
{tabKey === '3' && (
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_21} alt="" srcset="" />}
|
type="secondary"
|
>
|
线上来访
|
</Button>
|
)}
|
{tabKey === '4' && (
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_29} alt="" srcset="" />}
|
type="secondary"
|
>
|
自行排查
|
</Button>
|
)}
|
{tabKey === '5' && (
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
|
type="secondary"
|
>
|
协同推送
|
</Button>
|
)}
|
{tabKey === '6' && (
|
<Space>
|
<Button
|
onClick={() => {
|
tabsOnchange('4');
|
}}
|
className="source-button"
|
icon={<img className="source-icon" src={workDash_28} alt="" srcset="" />}
|
type="secondary"
|
>
|
自行排查
|
</Button>
|
<IconCaretRight />
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
|
type="secondary"
|
>
|
部门排查
|
</Button>
|
</Space>
|
)}
|
{tabKey === '7' && (
|
<Space>
|
<Button
|
onClick={() => {
|
tabsOnchange('4');
|
}}
|
className="source-button"
|
icon={<img className="source-icon" src={workDash_28} alt="" srcset="" />}
|
type="secondary"
|
>
|
自行排查
|
</Button>
|
<IconCaretRight />
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
|
type="secondary"
|
>
|
网格排查
|
</Button>
|
</Space>
|
)}
|
{tabKey === '8' && (
|
<Space>
|
<Button
|
onClick={() => {
|
tabsOnchange('5');
|
}}
|
className="source-button"
|
icon={<img className="source-icon" src={workDash_27} alt="" srcset="" />}
|
type="secondary"
|
>
|
协同推送
|
</Button>
|
<IconCaretRight />
|
<Button
|
className="source-button1 source-button-color"
|
icon={<img className="source-icon" src={workDash_30} alt="" srcset="" />}
|
type="secondary"
|
>
|
非警务纠纷
|
</Button>
|
</Space>
|
)}
|
{tabKey === '9' && (
|
<Space>
|
<Button
|
onClick={() => {
|
tabsOnchange('5');
|
}}
|
className="source-button"
|
icon={<img className="source-icon" src={workDash_27} alt="" srcset="" />}
|
type="secondary"
|
>
|
协同推送
|
</Button>
|
<IconCaretRight />
|
<Button
|
className="source-button source-button-color"
|
icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
|
type="secondary"
|
>
|
专项纠纷
|
</Button>
|
</Space>
|
)}
|
</div>
|
)}
|
|
{/* <MyTabsNew
|
tabs={[
|
{
|
key: '1',
|
icon: <img className="workDash-tabs" src={workDash_13}></img>,
|
label: (
|
<>
|
<div style={{ height: '24px' }}>全部</div>
|
</>
|
),
|
},
|
{ label: <div style={{ height: '24px' }}>大厅来访</div>, icon: <img className="workDash-tabs" src={workDash_14}></img>, key: '2' },
|
{ label: <div style={{ height: '24px' }}>线上来访</div>, icon: <img className="workDash-tabs" src={workDash_16}></img>, key: '3' },
|
{ label: <div style={{ height: '24px' }}>自行排查</div>, icon: <img className="workDash-tabs" src={workDash_17}></img>, key: '4' },
|
{ label: <div style={{ height: '24px' }}>协同推送</div>, icon: <img className="workDash-tabs" src={workDash_18}></img>, key: '5' },
|
]}
|
activeKey={tabKey}
|
onChange={(activeKey) => tabsOnchange(activeKey)}
|
/>
|
<div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', width: '100%' }}></div> */}
|
<div style={{ marginTop: '16px' }} className="disputeLedger-row">
|
<div className="comprehensive-title">数据总览{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
|
<div>
|
<Space className="workDash-d" align="center" split={<Divider type="vertical" style={{ height: '48px' }} />}>
|
<div
|
onClick={() => {
|
province !== '' && onClickProvince('');
|
}}
|
className="workDash-item public-a"
|
>
|
<div className="workDash-item-img">
|
<img src={workDash_1} alt="" srcset="" />
|
</div>
|
{['1', '2', '3', '6', '7', '8', '9'].includes(tabKey) && (
|
<div className="workDash-item-div">
|
<div className="workDash-item-title">总登记</div>
|
<div className="workDash-item-value">{data?.totalNum || 0}</div>
|
</div>
|
)}
|
{tabKey === '4' && (
|
<div className="workDash-item-div">
|
<div className="workDash-item-title">
|
<div style={{ width: '50px' }}>总登记</div>
|
<div style={{ width: '36px' }}></div>{' '}
|
<Space split={<Divider type="vertical" />}>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<span className="workDash-item-title-blue"></span>
|
<span
|
style={{
|
color: '#4E5969',
|
fontSize: '14px',
|
display: 'flex',
|
alignItems: 'center',
|
display: 'inline-block',
|
width: '150px',
|
}}
|
>
|
部门排查：{data?.bmpcNum || 0}件
|
</span>
|
<span
|
onClick={() => {
|
tabsOnchange('6');
|
}}
|
style={{
|
color: '#1A6FB8',
|
border: '1px solid #1A6FB8',
|
fontSize: '12px',
|
borderRadius: '2px',
|
padding: '0px 4px',
|
display: 'flex',
|
alignItems: 'center',
|
marginLeft: '12px',
|
}}
|
>
|
查看
|
</span>
|
</div>
|
</Space>
|
</div>
|
<div className="workDash-item-value" style={{ marginTop: '4px' }}>
|
<div style={{ width: '50px' }}>{data?.totalNum || 0}</div>
|
<div style={{ width: '36px' }}></div>
|
<Space split={<Divider type="vertical" />}>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<span className="workDash-item-title-blue"></span>
|
<span style={{ color: '#4E5969', fontSize: '14px', display: 'inline-block', width: '150px' }}>
|
网格排查：{data?.wgpcNum || 0}件
|
</span>
|
<span
|
onClick={() => {
|
tabsOnchange('7');
|
}}
|
style={{
|
color: '#1A6FB8',
|
border: '1px solid #1A6FB8',
|
fontSize: '12px',
|
borderRadius: '2px',
|
padding: '0px 4px',
|
display: 'flex',
|
alignItems: 'center',
|
marginLeft: '12px',
|
}}
|
>
|
查看
|
</span>
|
</div>
|
</Space>
|
</div>
|
</div>
|
)}
|
{tabKey === '5' && (
|
<div className="workDash-item-div">
|
<div className="workDash-item-title">
|
<div style={{ width: '50px' }}>总登记</div>
|
<div style={{ width: '36px' }}></div>{' '}
|
<Space split={<Divider type="vertical" />}>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<span className="workDash-item-title-blue"></span>
|
<span
|
style={{
|
color: '#4E5969',
|
fontSize: '14px',
|
display: 'flex',
|
alignItems: 'center',
|
display: 'inline-block',
|
width: '150px',
|
}}
|
>
|
非警务纠纷：{data?.fjwjfNum || 0}件
|
</span>
|
<span
|
onClick={() => {
|
tabsOnchange('8');
|
}}
|
style={{
|
color: '#1A6FB8',
|
border: '1px solid #1A6FB8',
|
fontSize: '12px',
|
borderRadius: '2px',
|
padding: '0px 4px',
|
display: 'flex',
|
alignItems: 'center',
|
marginLeft: '12px',
|
}}
|
>
|
查看
|
</span>
|
</div>
|
</Space>
|
</div>
|
<div className="workDash-item-value" style={{ marginTop: '4px' }}>
|
<div style={{ width: '50px' }}>{data?.totalNum || 0}</div>
|
<div style={{ width: '36px' }}></div>
|
<Space split={<Divider type="vertical" />}>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<span className="workDash-item-title-blue"></span>
|
<span style={{ color: '#4E5969', fontSize: '14px', display: 'inline-block', width: '150px' }}>
|
专项纠纷：{data?.zxjfNum || 0}件
|
</span>
|
<span
|
onClick={() => {
|
tabsOnchange('9');
|
}}
|
style={{
|
color: '#1A6FB8',
|
border: '1px solid #1A6FB8',
|
fontSize: '12px',
|
borderRadius: '2px',
|
padding: '0px 4px',
|
display: 'flex',
|
alignItems: 'center',
|
marginLeft: '12px',
|
}}
|
>
|
查看
|
</span>
|
</div>
|
</Space>
|
</div>
|
</div>
|
)}
|
</div>
|
<div
|
onClick={() => {
|
province !== '1' && onClickProvince('1');
|
}}
|
className="workDash-item public-a"
|
>
|
<div className="workDash-item-img">
|
<img src={workDash_2} alt="" srcset="" />
|
</div>
|
<div className="workDash-item-div">
|
<div className="workDash-item-title">化解中</div>
|
<div className="workDash-item-value">{data?.processNum || 0}</div>
|
</div>
|
</div>
|
<div
|
onClick={() => {
|
province !== '2' && onClickProvince('2');
|
}}
|
className="workDash-item1 public-a"
|
>
|
<div className="workDash-item-img">
|
<img src={workDash_3} alt="" srcset="" />
|
</div>
|
<div className="workDash-item-div">
|
<div className="workDash-item-title">
|
<div style={{ width: '50px' }}>已结案</div>
|
<div style={{ width: '36px' }}></div>{' '}
|
<Space split={<Divider type="vertical" />}>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<span className="workDash-item-title-green"></span>
|
<span style={{ color: '#4E5969', fontSize: '14px', display: 'flex', alignItems: 'center' }}>
|
化解成功：{data?.finishNum || 0}件 | 成功率：
|
<span style={{ color: '#00B42A' }}>{((data?.finishNum * 100) / (data?.finishNum + data?.failNum) || 0).toFixed(2)}%</span>
|
<img style={{ width: '14px', height: '14px', marginLeft: '8px' }} src={workDash_5} alt="" srcset="" />
|
</span>
|
</div>
|
</Space>
|
</div>
|
<div className="workDash-item-value">
|
<div style={{ width: '50px' }}>{data?.finishNum + data?.failNum || 0}</div>
|
<div style={{ width: '36px' }}></div>
|
<Space split={<Divider type="vertical" />}>
|
<div>
|
<span className="workDash-item-title-red"></span>
|
<span style={{ color: '#4E5969', fontSize: '14px' }}>化解不成功：{data?.failNum || 0}件</span>
|
</div>
|
</Space>
|
</div>
|
</div>
|
</div>
|
<div
|
onClick={() => {
|
province !== '3' && onClickProvince('3');
|
}}
|
className="workDash-item public-a"
|
>
|
<div className="workDash-item-img">
|
<img src={workDash_4} alt="" srcset="" />
|
</div>
|
<div className="workDash-item-div">
|
<div className="workDash-item-title">不予受理</div>
|
<div className="workDash-item-value">{data?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</Space>
|
</div>
|
</div>
|
|
{/* 事项来源 */}
|
{tabKey === '1' && (
|
<div style={{ marginTop: '12px' }}>
|
<Row gutter={24}>
|
<Col span={16}>
|
<div className="workDash-main">
|
<div style={{ width: '100%', height: '295px' }}>
|
<div className="big-green-main-title-display">
|
<div className="disputeLedger-green-title">事项来源</div>
|
</div>
|
<div className="workDash-main-card-one">
|
<div className="workDash-main-card">
|
<div
|
className="workDash-main-card-head"
|
onClick={() => {
|
tabsOnchange('2');
|
}}
|
>
|
<div className="workDash-main-card-head-l">
|
<div className="workDash-main-card-head-l-img">
|
<img src={workDash_6} alt="" srcset="" />
|
</div>
|
<div className="workDash-main-card-head-l-img-title">详情</div>
|
</div>
|
<div className="workDash-main-card-head-r">
|
<div className="workDash-main-card-head-r-title">大厅来访</div>
|
<div className="workDash-main-card-head-r-value">
|
{data?.oneSource?.caseNum || 0}
|
<span className="workDash-main-card-head-r-subValue"> | {data?.oneSource?.caseRate || 0}%</span>
|
</div>
|
</div>
|
</div>
|
<div style={{ margin: '0 6px' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解中</div>
|
<div className="workDash-main-card-body-flex-value">{data?.oneSource?.resolveingNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.oneSource?.resolveNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解不成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.oneSource?.unResolveNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功率</div>
|
<div className="workDash-main-card-body-flex-value">{data?.oneSource?.resolveRate || 0}%</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">不予受理</div>
|
<div className="workDash-main-card-body-flex-value">{data?.oneSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div className="workDash-main-card">
|
<div
|
className="workDash-main-card-head"
|
onClick={() => {
|
tabsOnchange('3');
|
}}
|
>
|
<div className="workDash-main-card-head-l workDash-bg_2">
|
<div className="workDash-main-card-head-l-img workDash-bg_2_img">
|
<img src={workDash_7} alt="" srcset="" />
|
</div>
|
<div className="workDash-main-card-head-l-img-title">详情</div>
|
</div>
|
<div className="workDash-main-card-head-r workDash-bg_2_r">
|
<div className="workDash-main-card-head-r-title">线上来访</div>
|
<div className="workDash-main-card-head-r-value">
|
{data?.twoSource?.caseNum || 0}
|
<span className="workDash-main-card-head-r-subValue"> | {data?.twoSource?.caseRate || 0}%</span>
|
</div>
|
</div>
|
</div>
|
<div style={{ margin: '0 6px' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解中</div>
|
<div className="workDash-main-card-body-flex-value">{data?.twoSource?.resolveingNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.twoSource?.resolveNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解不成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.twoSource?.unResolveNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功率</div>
|
<div className="workDash-main-card-body-flex-value">{data?.twoSource?.resolveRate || 0}%</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">不予受理</div>
|
<div className="workDash-main-card-body-flex-value">{data?.twoSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div className="workDash-main-card">
|
<div className="workDash-main-card-head" onClick={() => {
|
tabsOnchange('4');
|
}}>
|
<div className="workDash-main-card-head-l workDash-bg_3">
|
<div className="workDash-main-card-head-l-img workDash-bg_3_img">
|
<img src={workDash_8} alt="" srcset="" />
|
</div>
|
<div className="workDash-main-card-head-l-img-title">
|
详情
|
</div>
|
</div>
|
<div className="workDash-main-card-head-r workDash-bg_3_r">
|
<div className="workDash-main-card-head-r-title">自行排查</div>
|
<div className="workDash-main-card-head-r-value">
|
{data?.threeSource?.caseNum || 0}
|
<span className="workDash-main-card-head-r-subValue"> | {data?.threeSource?.caseRate || 0}%</span>
|
</div>
|
</div>
|
</div>
|
<div style={{ margin: '0 6px' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解中</div>
|
<div className="workDash-main-card-body-flex-value">{data?.threeSource?.resolveingNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.threeSource?.resolveNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解不成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.threeSource?.unResolveNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功率</div>
|
<div className="workDash-main-card-body-flex-value">{data?.threeSource?.resolveRate || 0}%</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">不予受理</div>
|
<div className="workDash-main-card-body-flex-value">{data?.threeSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div className="workDash-main-card">
|
<div className="workDash-main-card-head" onClick={() => {
|
tabsOnchange('5');
|
}}>
|
<div className="workDash-main-card-head-l workDash-bg_4">
|
<div className="workDash-main-card-head-l-img workDash-bg_4_img">
|
<img src={workDash_9} alt="" srcset="" />
|
</div>
|
<div className="workDash-main-card-head-l-img-title">详情</div>
|
</div>
|
<div className="workDash-main-card-head-r workDash-bg_4_r">
|
<div className="workDash-main-card-head-r-title">协同推送</div>
|
<div className="workDash-main-card-head-r-value">
|
{data?.fourSource?.caseNum || 0}
|
<span className="workDash-main-card-head-r-subValue"> | {data?.fourSource?.caseRate || 0}%</span>
|
</div>
|
</div>
|
</div>
|
<div style={{ margin: '0 6px' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解中</div>
|
<div className="workDash-main-card-body-flex-value">{data?.fourSource?.resolveingNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.fourSource?.resolveNum || 0}</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解不成功</div>
|
<div className="workDash-main-card-body-flex-value">{data?.fourSource?.unResolveNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">化解成功率</div>
|
<div className="workDash-main-card-body-flex-value">{data?.fourSource?.resolveRate || 0}%</div>
|
</div>
|
<div className="workDash-main-card-body-flex">
|
<div className="workDash-main-card-body-flex-title">不予受理</div>
|
<div className="workDash-main-card-body-flex-value">{data?.fourSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div className="workDash-main-flex_1">
|
<div style={{ alignItems: 'center', justifyContent: 'space-between' }} className="big-green-main-title-display">
|
<div style={{ color: '#86909C' }} className="disputeLedger-green-title public-a public-color">
|
<span onClick={() => setRightTag('1')} className={`public-a ${rightTag === '1' && 'public-color'}`}>
|
纠纷类型
|
</span>
|
<span>
|
{' '}
|
/{' '}
|
<span onClick={() => setRightTag('2')} className={`public-a ${rightTag === '2' && 'public-color'}`}>
|
化解状况
|
</span>{' '}
|
/{' '}
|
<span onClick={() => setRightTag('3')} className={`public-a ${rightTag === '3' && 'public-color'}`}>
|
事项等级
|
</span>
|
</span>
|
</div>
|
{rightTag === '1' && caseTypeLevel > 1 && (
|
<div
|
onClick={() => {
|
setCaseTypeLevel(caseTypeLevel - 1);
|
}}
|
className="public-a"
|
style={{ padding: '12px 16px' }}
|
>
|
<IconUndo style={{ color: '#1A6FB8' }} /> <span className=" public-color">返回上一级</span>
|
</div>
|
)}
|
</div>
|
<div style={{ width: '100%', height: '247px' }}>
|
{rightTag === '1' && (
|
<MyLTopChartPie
|
data={
|
caseTypeLevel > 1
|
? caseTypeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) || []
|
: data?.typeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) ||
|
[]
|
}
|
onMyLTopChartPie={onMyLTopChartPie}
|
/>
|
)}
|
{rightTag === '2' && (
|
<MyLTopChartPie1
|
data={[
|
{ value: data?.resolveingRate || 0, name: '化解中' },
|
{ value: data?.resolveRate || 0, name: '化解成功' },
|
{ value: data?.unResolveRate || 0, name: '化解不成功' },
|
]}
|
allNum={data.totalNum || 0}
|
/>
|
)}
|
{rightTag === '3' && (
|
<div className="workDash-grade">
|
<div className="workDash-grade-item workDash-grade-item-orange">
|
<div className="workDash-grade-item-t">
|
<div className="workDash-grade-item-t-orange">3级事件</div>
|
<div className="workDash-grade-item-t-value">
|
{data?.threeLevelNum || 0}
|
<span className="workDash-grade-item-t-unit">件</span>
|
</div>
|
</div>
|
<div className="workDash-grade-item-b">
|
<div className="workDash-grade-item-b-bg">
|
<div className="workDash-grade-item-b-bg-orange" style={{ width: `${data?.threeLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.threeLevelRate || 0) - 1}%` }} src={workDash_10} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
<div className="workDash-grade-item workDash-grade-item-blue">
|
<div className="workDash-grade-item-t">
|
<div className="workDash-grade-item-t-blue">2级事件</div>
|
<div className="workDash-grade-item-t-value">
|
{data?.twoLevelNum || 0}
|
<span className="workDash-grade-item-t-unit">件</span>
|
</div>
|
</div>
|
<div className="workDash-grade-item-b">
|
<div className="workDash-grade-item-b-bg">
|
<div className="workDash-grade-item-b-bg-blue" style={{ width: `${data?.twoLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.twoLevelRate || 0) - 1}%` }} src={workDash_11} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
<div className="workDash-grade-item workDash-grade-item-red">
|
<div className="workDash-grade-item-t">
|
<div className="workDash-grade-item-t-red">1级事件</div>
|
<div className="workDash-grade-item-t-value">
|
{data?.oneLevelNum || 0}
|
<span className="workDash-grade-item-t-unit">件</span>
|
</div>
|
</div>
|
<div className="workDash-grade-item-b">
|
<div className="workDash-grade-item-b-bg">
|
<div className="workDash-grade-item-b-bg-red" style={{ width: `${data?.oneLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.oneLevelRate || 0) - 1}%` }} src={workDash_12} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
)}
|
|
{/* 纠纷类型 化解状况 事项等级 */}
|
{tabKey !== '1' && (
|
<div style={{ marginTop: '12px', width: '100%' }}>
|
<Row gutter={16}>
|
<Col span={8}>
|
<div className="workDash-main-flex_1">
|
<div className="big-green-main-title-display">
|
<div className="disputeLedger-green-title">化解状况（{tabKeyTitles(tabKey)}）</div>
|
</div>
|
<div style={{ width: '100%', height: '247px' }}>
|
<MyLTopChartPie1
|
data={[
|
{ value: data?.resolveingRate || 0, name: '化解中' },
|
{ value: data?.resolveRate || 0, name: '化解成功' },
|
{ value: data?.unResolveRate || 0, name: '化解不成功' },
|
]}
|
allNum={data.totalNum || 0}
|
/>
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div className="workDash-main-flex_1">
|
<div className="big-green-main-title-display">
|
<div className="disputeLedger-green-title">事项等级（{tabKeyTitles(tabKey)}）</div>
|
</div>
|
<div style={{ height: '247px' }} className="workDash-grade">
|
<div className="workDash-grade-item workDash-grade-item-orange">
|
<div className="workDash-grade-item-t">
|
<div className="workDash-grade-item-t-orange">3 级事件</div>
|
<div className="workDash-grade-item-t-value">
|
{data?.threeLevelNum || 0}
|
<span className="workDash-grade-item-t-unit"> 件</span>
|
</div>
|
</div>
|
<div className="workDash-grade-item-b">
|
<div className="workDash-grade-item-b-bg">
|
<div className="workDash-grade-item-b-bg-orange" style={{ width: `${data?.threeLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.threeLevelRate || 0) - 1}%` }} src={workDash_10} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
<div className="workDash-grade-item workDash-grade-item-blue">
|
<div className="workDash-grade-item-t">
|
<div className="workDash-grade-item-t-blue">2 级事件</div>
|
<div className="workDash-grade-item-t-value">
|
{data?.twoLevelNum || 0}
|
<span className="workDash-grade-item-t-unit"> 件</span>
|
</div>
|
</div>
|
<div className="workDash-grade-item-b">
|
<div className="workDash-grade-item-b-bg">
|
<div className="workDash-grade-item-b-bg-blue" style={{ width: `${data?.twoLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.twoLevelRate || 0) - 1}%` }} src={workDash_11} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
<div className="workDash-grade-item workDash-grade-item-red">
|
<div className="workDash-grade-item-t">
|
<div className="workDash-grade-item-t-red">1 级事件</div>
|
<div className="workDash-grade-item-t-value">
|
{data?.oneLevelNum || 0}
|
<span className="workDash-grade-item-t-unit"> 件</span>
|
</div>
|
</div>
|
<div className="workDash-grade-item-b">
|
<div className="workDash-grade-item-b-bg">
|
<div className="workDash-grade-item-b-bg-red" style={{ width: `${data?.oneLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.oneLevelRate || 0) - 1}%` }} src={workDash_12} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div className="workDash-main-flex_1">
|
<div style={{ alignItems: 'center', justifyContent: 'space-between' }} className="big-green-main-title-display">
|
<div className="disputeLedger-green-title">纠纷类型（{tabKeyTitles(tabKey)}）</div>
|
{caseTypeLevel > 1 && (
|
<div
|
onClick={() => {
|
setCaseTypeLevel(caseTypeLevel - 1);
|
}}
|
className="public-a"
|
style={{ padding: '12px 16px' }}
|
>
|
<IconUndo style={{ color: '#1A6FB8' }} /> <span className=" public-color">返回上一级</span>
|
</div>
|
)}
|
</div>
|
<div style={{ width: '100%', height: '247px' }}>
|
<MyLTopChartPie
|
data={
|
caseTypeLevel > 1
|
? caseTypeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) || []
|
: data?.typeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) || []
|
}
|
onMyLTopChartPie={onMyLTopChartPie}
|
/>
|
</div>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
)}
|
|
{/* 图表-化解统计 */}
|
<div className="disputeLedger-green">
|
<div style={{ position: 'relative', width: '100%', backgroundColor: '#fff' }}>
|
<div
|
style={{ position: 'absolute', zIndex: '1000', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}
|
className="big-green-main-title-display"
|
>
|
<div className="disputeLedger-green-title">化解统计{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
|
<div style={{ paddingRight: '24px' }}>
|
<Select
|
style={{ width: '180px' }}
|
value={province}
|
onChange={(value) => {
|
onClickProvince(value);
|
}}
|
>
|
{[
|
{ label: '总登记', value: '' },
|
{ label: '化解中', value: '1' },
|
{ label: '已结案', value: '2' },
|
{ label: '不予受理', value: '3' },
|
].map((option, index) => (
|
<Option key={index} value={option.value}>
|
{'统计条件：' + option.label}
|
</Option>
|
))}
|
</Select>
|
<Button style={{ marginLeft: '12px' }} type="outline" onClick={downloadAreaXls}>
|
导出
|
</Button>
|
</div>
|
</div>
|
<div style={{ width: '100%', height: '300px' }}>
|
{province === '' && (
|
<MyChartBar
|
data={data?.areaList || []}
|
status={province}
|
dataAxis={data?.areaList?.map((i) => i.areaName) || []}
|
onMyLTopChartPie={onModalClick}
|
/>
|
)}
|
{province === '1' && (
|
<MyChartBar1
|
data={data?.areaList || []}
|
status={province}
|
dataAxis={data?.areaList?.map((i) => i.areaName) || []}
|
onMyLTopChartPie={onModalClick}
|
/>
|
)}
|
{province === '2' && (
|
<MyChartBar2
|
data={data?.areaList || []}
|
data1={data?.areaList || []}
|
dataAxis={data?.areaList?.map((i) => i.areaName) || []}
|
onMyLTopChartPie={onModalClick}
|
/>
|
)}
|
{province === '3' && (
|
<MyChartBar3 data={data?.areaList || []} dataAxis={data?.areaList?.map((i) => i.areaName) || []} onMyLTopChartPie={onModalClick} />
|
)}
|
</div>
|
</div>
|
</div>
|
{/* 扬言极端 */}
|
{/* <div style={{ width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
|
<div className='workDash-main-flex_1' style={{ marginBottom: '12px', }}>
|
<div className='big-green-main-title-display-table'>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }} className='disputeLedger-green-title'><img src={huo} alt="" srcset="" />扬言极端</div>
|
<div style={{ fontSize: '14px', padding: '0 16px', display: 'flex' }} className='disputeLedger-green-subTitle'>区域查询：
|
<Breadcrumb>{yYjds?.map((i, idx) => <Breadcrumb.Item><span onClick={() => {
|
if (yYjds?.length > 1) {
|
setYYjdData({ visible: false })
|
console.log('yYjds111111', yYjds);
|
setYYjds(yYjds.filter((j, idx2) => idx2 <= idx))
|
delete search.queArea;
|
delete search.queRoad;
|
delete search.queVillage;
|
delete search.queRoad;
|
getAnalysis({ ...search, [i.key]: i.value })
|
}
|
}} className={idx < (yYjds?.length - 1) && 'public-a'}>{i.label}</span></Breadcrumb.Item>)}</Breadcrumb></div>
|
<div style={{ margin: '12px 16px' }}>
|
<Alert
|
type='info'
|
content={<span>点击区域查询文字内容可返回上一级</span>}
|
/>
|
</div>
|
<div style={{ padding: '4px 16px 16px 16px' }}>
|
{
|
yYjdData.visible ?
|
<TableView
|
columns={fxColumns}
|
dataSource={tableData.list}
|
// tableHeight={'100%'}
|
size="small"
|
rowKey='ownerId'
|
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,
|
}}
|
/> :
|
<Table
|
columns={[
|
{ title: '区域', width: 120, dataIndex: 'name' },
|
{
|
title: '事件数量', width: 700, dataIndex: 'total', defaultSortOrder: 'descend',
|
sorter: true, render: (text, record) => (
|
<div className='workDash-extreme-rate'><div className='workDash-extreme-rate-show' style={{ width: `${((Number(text) / Number(extremeTotal)) || 0).toFixed(2) * 100}%` }}>{`${text || 0}件`}</div><div style={{ zIndex: '2' }}></div></div>
|
)
|
},
|
{ title: '极端事件高发纠纷类型', width: 280, dataIndex: 'commonType' },
|
{
|
title: '操作', width: 120, dataIndex: 'actions', render: (text, record) => (
|
<Space>
|
{(record?.region !== 'unitId' && record?.region !== 'queVillage') && <div onClick={() => {
|
// 将code传给查询组件中，并在查询组件中的区域中进行展示
|
// let codes = getParentCodes(treeList, record.code);
|
// form.setFieldValue('queCode', codes)
|
setYYjds([...yYjds, { label: record.name, value: record.code, key: record.region }])
|
setRegion({ key: record.region, value: record.code })
|
delete search.queArea;
|
delete search.queRoad;
|
delete search.queVillage;
|
delete search.queRoad;
|
getAnalysis({ ...search, [record.region]: record.code })
|
}} className='public-a public-color'>查看下级</div>}
|
{<div onClick={() => {
|
setYYjds([...yYjds, { label: record.name, value: record.code, key: record.region }])
|
setRegion({ key: record.region, value: record.code })
|
pageExtremeCase({ ...search, ...pageData, [record.region]: record.code }, true)
|
}} className='public-a public-color'>详情</div>}
|
</Space>
|
)
|
},
|
]}
|
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' : '';
|
setYYJDSortType(sorter?.order || '')
|
let item = yYjds[yYjds.length - 1];
|
delete search.queArea;
|
delete search.queRoad;
|
delete search.queVillage;
|
delete search.queRoad;
|
getAnalysis({ ...search, [item.key]: item.value, sortType })
|
}}
|
dataSource={extremeData}
|
scroll={null}
|
summary={() => (
|
<Table.Summary fixed>
|
<Table.Summary.Row style={{ background: '#EFF8FF' }}>
|
<Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
|
<Table.Summary.Cell index={1}>{extremeTotal}</Table.Summary.Cell>
|
<Table.Summary.Cell index={2}></Table.Summary.Cell>
|
<Table.Summary.Cell index={3}></Table.Summary.Cell>
|
</Table.Summary.Row>
|
</Table.Summary>
|
)}
|
direction="暂无历史记录"
|
pagination={false}
|
size="small"
|
rowKey="applyId"
|
/>
|
}
|
</div>
|
</div>
|
</div>
|
</div> */}
|
|
{/* 实时动态 */}
|
<div style={{ width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }}>
|
<div className="workDash-main-flex_1" style={{ marginBottom: '12px' }}>
|
<div className="big-green-main-title-display-table">
|
<div className="disputeLedger-green-title" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
<div>实时动态{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
|
{/* 导出 */}
|
<Button type="outline" onClick={downloadXls}>
|
导出
|
</Button>
|
</div>
|
<div style={{ padding: '4px 16px 16px' }}>
|
{/* <ScrollTable dataSource={data.caseList || []} columns={columns()} /> */}
|
<div className="workDash-table">
|
<TableView
|
title=""
|
columns={columns()}
|
dataSource={listData.tableData}
|
pagination={{
|
current: listDataSearch.page,
|
pageSize: listDataSearch.size,
|
total: listData.total,
|
onChange: (page, pageSize) => handleChangePage(page, pageSize),
|
}}
|
rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<SupervisingViews
|
visible={supervising}
|
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={`${modalData.name || ''}`}
|
visible={modalVisible}
|
onCancel={() => setModalVisible(false)}
|
footer={null}
|
style={{ width: '80%' }}
|
>
|
<div>
|
{/* <div style={{ marginBottom: '8px' }}>
|
<div className="comprehensive-title">查询条件</div>
|
<NewTableSearch
|
exportButtonShow={false}
|
labelLength={6}
|
form={modalForm}
|
itemData={[
|
// { type: 'Cascader', name: 'queCode', label: '问题属地', placeholder: '请选择', changeSelect: true, allowClear: false, treedata: treeList || [] },
|
{ type: 'Input', name: 'inputUnitName', label: '登记机构' },
|
{ type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
|
{ type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
|
// { type: 'Input', name: 'defendants', label: '被申请方' },
|
]}
|
handleReset={() => {
|
modalForm.resetFields();
|
modalForm.setFieldsValue({});
|
}}
|
handleSearch={() => {
|
handleModalSearch('search');
|
}}
|
/>
|
</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={modalData.tableData}
|
onChange={(pagination, filters, sorter) => {
|
handleSortModal(pagination.current, pagination.pageSize, sorter);
|
}}
|
pagination={{
|
current: modalSearch.page,
|
pageSize: modalSearch.size,
|
total: modalData.total,
|
// onChange: (page, pageSize) => handleModalChangePage(page, pageSize),
|
}}
|
/>
|
</div>
|
</Modal>
|
<Response visible={response} handleOnCancel={() => setResponse(false)} responseId={responseId} data={superviseInfo} />
|
<ResponseDetail visible={detail} handleOnCancel={() => setDetail(false)} data={responseDetail} />
|
<SelectObjModal
|
visible={selectModalVisible}
|
nameStr={selectObjModalData.title}
|
checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
|
onOk={(item) => {
|
setSelectModalVisible(false);
|
setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item });
|
form.setFieldValue(selectObjModalData?.key, item.name);
|
}}
|
onClose={() => setSelectModalVisible(false)}
|
type="dept"
|
isCheckbox={false}
|
/>
|
</div>
|
</NewPage>
|
);
|
};
|
|
export default WorkDash;
|
|
// 柱状图
|
const MyChartBar = ({ data, dataAxis, onMyLTopChartPie }) => {
|
const myChartRef = useRef();
|
// 保存echarts实例的引用
|
const [myChart, setMyChart] = useState(null);
|
|
// 初始化图表
|
useEffect(() => {
|
const chart = echarts.init(document.getElementById('chartBar'), 'dark');
|
setMyChart(chart);
|
|
return () => {
|
// 组件卸载时销毁图表
|
chart.dispose();
|
};
|
}, []);
|
|
// 更新图表数据和事件
|
useEffect(() => {
|
if (!myChart) return;
|
|
// 移除旧的点击事件监听器
|
myChart.off('click');
|
|
// 添加新的点击事件监听器
|
myChart.on('click', (params) => {
|
// 将原始数据对象传递给回调函数
|
onMyLTopChartPie(data[params.dataIndex]);
|
});
|
|
// 设置图表配置
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 60,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c}件',
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisLabel: {
|
interval: 'auto',
|
rotate: 45,
|
color: '#4e5969',
|
},
|
scrollbar: {
|
show: true,
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: '#000',
|
},
|
},
|
},
|
series: [
|
{
|
type: 'bar',
|
name: '总登记',
|
data: data.map((item) => item.caseNum),
|
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: '#57a9fb',
|
borderWidth: 2,
|
},
|
},
|
],
|
});
|
}, [data, dataAxis, myChart, onMyLTopChartPie]);
|
|
return <div id="chartBar" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
// 柱状图化解中
|
const MyChartBar1 = ({ data, dataAxis, onMyLTopChartPie }) => {
|
const myChartRef = useRef();
|
const [myChart, setMyChart] = useState(null);
|
|
useEffect(() => {
|
const chart = echarts.init(document.getElementById('chartBar1'), 'dark');
|
setMyChart(chart);
|
return () => {
|
chart.dispose();
|
};
|
}, []);
|
|
useEffect(() => {
|
if (!myChart) return;
|
|
myChart.off('click');
|
myChart.on('click', (params) => {
|
onMyLTopChartPie(data[params.dataIndex]);
|
});
|
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 60,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c}件',
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisLabel: {
|
interval: 'auto',
|
rotate: 45,
|
color: '#4e5969',
|
},
|
scrollbar: {
|
show: true,
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: '#000',
|
},
|
},
|
},
|
series: [
|
{
|
type: 'bar',
|
name: '化解中',
|
data: data.map((item) => item.resolveingNum),
|
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: '#57a9fb',
|
borderWidth: 2,
|
},
|
},
|
],
|
});
|
}, [data, dataAxis, myChart, onMyLTopChartPie]);
|
|
return <div id="chartBar1" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
|
// 柱状图化解成功，化解不成功
|
const MyChartBar2 = ({ data, data1, dataAxis, onMyLTopChartPie }) => {
|
const myChartRef = useRef();
|
const [myChart, setMyChart] = useState(null);
|
|
useEffect(() => {
|
const chart = echarts.init(document.getElementById('chartBar2'), 'dark');
|
setMyChart(chart);
|
return () => {
|
chart.dispose();
|
};
|
}, []);
|
|
useEffect(() => {
|
if (!myChart) return;
|
|
myChart.off('click');
|
myChart.on('click', (params) => {
|
const isSuccess = params.seriesName === '化解成功';
|
onMyLTopChartPie({
|
...data[params.dataIndex],
|
type: isSuccess ? 'success' : 'fail',
|
});
|
});
|
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 60,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c}件',
|
},
|
legend: {
|
orient: 'horizontal',
|
top: 12,
|
right: 224,
|
data: [
|
{ name: '化解成功', icon: 'circle' },
|
{ name: '化解不成功', icon: 'circle' },
|
],
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisLabel: {
|
interval: 'auto',
|
rotate: 45,
|
color: '#4e5969',
|
},
|
scrollbar: {
|
show: true,
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: '#000',
|
},
|
},
|
},
|
series: [
|
{
|
type: 'bar',
|
name: '化解成功',
|
data: data.map((item) => item.resolveNum),
|
barWidth: 24,
|
label: {
|
show: true,
|
position: 'top',
|
color: 'rgba(0, 0, 0, 0.85)',
|
fontSize: '14px',
|
valueAnimation: false,
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7,
|
},
|
},
|
itemStyle: {
|
color: '#23c343',
|
borderWidth: 2,
|
},
|
},
|
{
|
type: 'bar',
|
name: '化解不成功',
|
data: data1.map((item) => item.unResolveNum),
|
barWidth: 24,
|
label: {
|
show: true,
|
position: 'top',
|
color: 'rgba(0, 0, 0, 0.85)',
|
fontSize: '14px',
|
valueAnimation: false,
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7,
|
},
|
},
|
itemStyle: {
|
color: '#F76560',
|
borderWidth: 2,
|
},
|
},
|
],
|
});
|
}, [data, data1, dataAxis, myChart, onMyLTopChartPie]);
|
|
return <div id="chartBar2" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
|
// 柱状图不予受理
|
const MyChartBar3 = ({ data, dataAxis, onMyLTopChartPie }) => {
|
const myChartRef = useRef();
|
const [myChart, setMyChart] = useState(null);
|
|
useEffect(() => {
|
const chart = echarts.init(document.getElementById('chartBar3'), 'dark');
|
setMyChart(chart);
|
return () => {
|
chart.dispose();
|
};
|
}, []);
|
|
useEffect(() => {
|
if (!myChart) return;
|
|
myChart.off('click');
|
myChart.on('click', (params) => {
|
onMyLTopChartPie(data[params.dataIndex]);
|
});
|
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 60,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c}件',
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: dataAxis,
|
axisLabel: {
|
interval: 'auto',
|
rotate: 45,
|
color: '#4e5969',
|
},
|
scrollbar: {
|
show: true,
|
},
|
},
|
],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: '#000',
|
},
|
},
|
},
|
series: [
|
{
|
type: 'bar',
|
name: '不予受理',
|
data: data.map((item) => item.rejectNum),
|
barWidth: 24,
|
label: {
|
show: true,
|
position: 'top',
|
color: 'rgba(0, 0, 0, 0.85)',
|
fontSize: '14px',
|
valueAnimation: false,
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7,
|
},
|
},
|
itemStyle: {
|
color: '#FFA940',
|
borderWidth: 2,
|
},
|
},
|
],
|
});
|
}, [data, dataAxis, myChart, onMyLTopChartPie]);
|
|
return <div id="chartBar3" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
|
};
|
|
const MyLTopChartPie = ({ data, onMyLTopChartPie }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartLTopPie'), 'dark');
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 5,
|
y: 12,
|
x2: 20,
|
y2: 0,
|
},
|
legend: {
|
orient: 'vertical', // 垂直排列
|
top: 'center',
|
textStyle: {
|
color: 'rgba(0, 0, 0, 0.85)', // 设置图例文字颜色为红色
|
},
|
right: 20,
|
data: data?.map((i) => ({ name: i.name, icon: 'circle' })),
|
formatter: function (name) {
|
return name.length > 7 ? name.slice(0, 7) + '...' : name;
|
},
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: function (params) {
|
return `纠纷类型<br/>${params.name}: ${params?.data?.caseNum}件（${params.value}%）`;
|
},
|
},
|
// tooltip: {
|
// trigger: 'item',
|
// formatter: "{a} <br/>{b}: ({d}%)"
|
// },
|
series: [
|
{
|
name: '纠纷类型',
|
type: 'pie',
|
radius: '90%',
|
center: ['40%', '50%'],
|
color: ['#FCE996', '#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD'],
|
labelLine: {
|
// 关闭引导线
|
show: false,
|
},
|
label: {
|
show: true,
|
position: 'inside', // 设置文字在扇形区域内
|
formatter: '{d}%', // 标签文本格式器
|
rich: {
|
a: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
b: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
c: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
d: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
e: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
f: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
},
|
// normal: {
|
// show: false,
|
// },
|
},
|
data: data,
|
},
|
],
|
});
|
|
// 移除旧的事件监听器
|
myChart.off('click');
|
|
// 为饼图添加点击事件
|
myChart.on('click', onPieClick);
|
|
// 事件处理函数
|
function onPieClick(params) {
|
onMyLTopChartPie(params);
|
}
|
}, [data]);
|
|
return <div id="chartLTopPie" ref={myChartRef} style={{ height: '232px', width: '100%' }} />;
|
};
|
|
const MyLTopChartPie1 = ({ data, allNum }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartLTopPie1'), 'dark');
|
// let data = [123, 98, 245, 234, 356, 148];
|
// let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 5,
|
y: 12,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
legend: {
|
orient: 'vertical', // 垂直排列
|
top: 'center',
|
right: 20,
|
data: [
|
{
|
name: '化解中',
|
icon: 'circle', // 图例标记的形状
|
},
|
{
|
name: '化解成功',
|
icon: 'circle',
|
},
|
{
|
name: '化解不成功',
|
icon: 'circle',
|
},
|
],
|
},
|
series: [
|
{
|
name: '化解状况',
|
type: 'pie',
|
radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
|
center: ['center', 'center'],
|
color: ['#B6DDF1', '#3A8AC6', '#094282'],
|
data: data,
|
label: {
|
show: true,
|
position: 'inside', // 设置文字在扇形区域内
|
formatter: '{d}%', // 标签文本格式器
|
rich: {
|
a: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
b: {
|
lineHeight: 25,
|
align: 'center',
|
},
|
},
|
},
|
},
|
],
|
graphic: {
|
type: 'group',
|
left: 'center',
|
top: '45%',
|
children: [
|
{
|
type: 'text',
|
left: 'center',
|
style: {
|
text: '事件总数',
|
fill: '#4E5969', // 第一部分文字颜色
|
fontSize: 14,
|
fontWeight: '400',
|
},
|
},
|
{
|
type: 'text',
|
top: '24px',
|
left: 'center',
|
style: {
|
text: allNum + '\r件',
|
textAlign: 'center',
|
fill: '#1D2129', // 第二部分文字颜色
|
fontSize: 18,
|
fontWeight: '400',
|
},
|
},
|
// {
|
// type: 'text',
|
// top: '28px',
|
// left: '65px',
|
// style: {
|
// text: '件',
|
// fill: '#86909C', // 第二部分文字颜色
|
// fontSize: 12,
|
// fontWeight: '400'
|
// }
|
// },
|
],
|
},
|
});
|
}, [data]);
|
|
useEffect(() => {});
|
|
return <div id="chartLTopPie1" ref={myChartRef} style={{ height: '232px', width: '100%' }} />;
|
};
|
