From be89af3bf4d7e591ef085f55f1de7c28fcf5f6a8 Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Sat, 21 Jun 2025 19:50:18 +0800
Subject: [PATCH] fix:修改解纷态势问题
---
src/views/workDash/index copy 2.jsx | 3016 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 3,016 insertions(+), 0 deletions(-)
diff --git a/src/views/workDash/index copy 2.jsx b/src/views/workDash/index copy 2.jsx
new file mode 100644
index 0000000..58fb728
--- /dev/null
+++ b/src/views/workDash/index copy 2.jsx
@@ -0,0 +1,3016 @@
+/*
+ * @Company: hugeInfo
+ * @Author: lwh
+ * @Date: 2024-09-14 15:59:17
+ * @LastEditTime: 2025-06-20 16:38:50
+ * @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,
+} 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-3', canalSecond: '22_00003-1' }, listDataSearch);
+ } else if (activeKey === '9') {
+ getListData({ ...search, canal: '22_00001-3', 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_22} 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_22} 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_22} 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_23} 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 === '9' && (
+ <Space>
+ <Button
+ onClick={() => {
+ tabsOnchange('5');
+ }}
+ className="source-button"
+ icon={<img className="source-icon" src={workDash_23} 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">数据总览</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('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>
+ )}
+ {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">
+ <div
+ className="workDash-main-card-head-l"
+ onClick={() => {
+ tabsOnchange('2');
+ }}
+ >
+ <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">
+ <div
+ className="workDash-main-card-head-l workDash-bg_2"
+ onClick={() => {
+ tabsOnchange('3');
+ }}
+ >
+ <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">
+ <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"
+ onClick={() => {
+ tabsOnchange('4');
+ }}
+ >
+ 详情
+ </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">
+ <div
+ className="workDash-main-card-head-l workDash-bg_4"
+ onClick={() => {
+ tabsOnchange('5');
+ }}
+ >
+ <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>
+ )}
+
+ {/* 公安非警务，12345，网格化 */}
+ {tabKey === '5' && (
+ <div style={{ marginTop: '12px' }}>
+ <Row gutter={16}>
+ {/* 公安非警务 */}
+ <Col span={8}>
+ <div className="workDash-public">
+ <div className="workDash-public-head">
+ <div className="workDash-public-head-l">
+ <div className="workDash-public-head-l-img">
+ <img src={workDash_24} alt="" srcset="" />
+ </div>
+ </div>
+ <div className="workDash-public-head-r">
+ <div className="workDash-public-head-r-title">公安非警务</div>
+ <div className="workDash-public-head-r-value">
+ <div className="workDash-public-head-r-value-num">
+ {data?.oneSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="workDash-public-body">
+ <Row gutter={[12, 8]}>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解中</div>
+ <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveingNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">回退</div>
+ <div className="workDash-public-body-item-value">{data?.oneSecondSource?.rejectNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解成功</div>
+ <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解不成功</div>
+ <div className="workDash-public-body-item-value">{data?.oneSecondSource?.unResolveNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解成功率</div>
+ <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveRate || 0}%</div>
+ </div>
+ </Col>
+ </Row>
+ </div>
+ </div>
+ </Col>
+
+ {/* 12345 */}
+ <Col span={8}>
+ <div className="workDash-public">
+ <div className="workDash-public-head">
+ <div className="workDash-public-head-l">
+ <div className="workDash-public-head-l-img workDash-public-head-l-img-green">
+ <img src={workDash_25} alt="" srcset="" />
+ </div>
+ </div>
+ <div className="workDash-public-head-r">
+ <div className="workDash-public-head-r-title">12345</div>
+ <div className="workDash-public-head-r-value">
+ <div className="workDash-public-head-r-value-num">
+ {data?.twoSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="workDash-public-body">
+ <Row gutter={[12, 8]}>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解中</div>
+ <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveingNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">不予受理</div>
+ <div className="workDash-public-body-item-value">{data?.twoSecondSource?.rejectNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解成功</div>
+ <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解不成功</div>
+ <div className="workDash-public-body-item-value">{data?.twoSecondSource?.unResolveNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解成功率</div>
+ <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveRate || 0}%</div>
+ </div>
+ </Col>
+ </Row>
+ </div>
+ </div>
+ </Col>
+
+ {/* 网格化 */}
+ <Col span={8}>
+ <div className="workDash-public">
+ <div className="workDash-public-head">
+ <div className="workDash-public-head-l">
+ <div className="workDash-public-head-l-img workDash-public-head-l-img-blue">
+ <img src={workDash_26} alt="" srcset="" />
+ </div>
+ </div>
+ <div className="workDash-public-head-r">
+ <div className="workDash-public-head-r-title">网格化</div>
+ <div className="workDash-public-head-r-value">
+ <div className="workDash-public-head-r-value-num">
+ {data?.threeSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="workDash-public-body">
+ <Row gutter={[12, 8]}>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解中</div>
+ <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveingNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">不予受理</div>
+ <div className="workDash-public-body-item-value">{data?.threeSecondSource?.rejectNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解成功</div>
+ <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解不成功</div>
+ <div className="workDash-public-body-item-value">{data?.threeSecondSource?.unResolveNum || 0}条</div>
+ </div>
+ </Col>
+ <Col span={12}>
+ <div className="workDash-public-body-item">
+ <div className="workDash-public-body-item-title">化解成功率</div>
+ <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveRate || 0}%</div>
+ </div>
+ </Col>
+ </Row>
+ </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">化解统计</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 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>实时动态</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%' }} />;
+};
--
Gitblit v1.8.0