From bd4e6eb3d29de84c00f5e448f5839300873a6abe Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Sat, 21 Jun 2025 16:17:30 +0800
Subject: [PATCH] fix:优化统计功能
---
src/views/comprehensive/index.jsx | 771 +++++---
src/assets/images/workDash_29.png | 0
src/assets/images/index.js | 8
src/api/appUrl.js | 6
src/utils/selectOption.js | 177 +
src/assets/images/workDash_27.png | 0
src/views/workDash/index copy 2.jsx | 3016 +++++++++++++++++++++++++++++++++++++
src/views/workDash/index.jsx | 497 +++--
src/views/disputeLedger/index.jsx | 104
src/views/workDash/index.less | 25
src/components/SelectObjModal/newSelectPerson.jsx | 144 +
src/utils/utility.js | 2
src/assets/images/workDash_28.png | 0
src/assets/images/workDash_30.png | 0
14 files changed, 4,072 insertions(+), 678 deletions(-)
diff --git a/src/api/appUrl.js b/src/api/appUrl.js
index e06879c..7940105 100644
--- a/src/api/appUrl.js
+++ b/src/api/appUrl.js
@@ -2,7 +2,7 @@
* @Company: hugeInfo
* @Author: ldh
* @Date: 2022-02-16 11:25:57
- * @LastEditTime: 2025-06-10 17:33:34
+ * @LastEditTime: 2025-06-20 10:59:40
* @LastEditors: lwh
* @Version: 1.0.0
* @Description: api地址
@@ -12,12 +12,12 @@
// baseUrl: 'http://gz.hugeinfo.com.cn',
// baseUrl: "http://192.168.3.131:9002",
// baseUrl: 'http://192.168.1.101:9002',
- baseUrl: 'http://10.202.1.71:80',
+ baseUrl: 'http://10.200.1.89:9002',
// baseUrl: 'http://192.168.1.158:9002',
// 附件服务
// fileUrl: 'http://192.168.1.101:9002',
- fileUrl: 'http://localhost:9002',
+ fileUrl: 'http://10.200.1.89:9002',
// fileUrl: 'http://192.168.1.158:9002',
// fileUrl: 'http://gz.hugeinfo.com.cn',
diff --git a/src/assets/images/index.js b/src/assets/images/index.js
index bbef21f..4fce06e 100644
--- a/src/assets/images/index.js
+++ b/src/assets/images/index.js
@@ -118,6 +118,10 @@
import workDash_24 from './workDash_24.png';
import workDash_25 from './workDash_25.png';
import workDash_26 from './workDash_26.png';
+import workDash_27 from './workDash_27.png';
+import workDash_28 from './workDash_28.png';
+import workDash_29 from './workDash_29.png';
+import workDash_30 from './workDash_30.png';
import visitWorkBench_1 from './visitWorkBench_1.png';
import visitWorkBench_2 from './visitWorkBench_2.png';
@@ -278,6 +282,10 @@
workDash_24,
workDash_25,
workDash_26,
+ workDash_27,
+ workDash_28,
+ workDash_29,
+ workDash_30,
visitWorkBench_1,
visitWorkBench_2,
visitWorkBench_3,
diff --git a/src/assets/images/workDash_27.png b/src/assets/images/workDash_27.png
new file mode 100644
index 0000000..fb30641
--- /dev/null
+++ b/src/assets/images/workDash_27.png
Binary files differ
diff --git a/src/assets/images/workDash_28.png b/src/assets/images/workDash_28.png
new file mode 100644
index 0000000..83f4f58
--- /dev/null
+++ b/src/assets/images/workDash_28.png
Binary files differ
diff --git a/src/assets/images/workDash_29.png b/src/assets/images/workDash_29.png
new file mode 100644
index 0000000..91adf57
--- /dev/null
+++ b/src/assets/images/workDash_29.png
Binary files differ
diff --git a/src/assets/images/workDash_30.png b/src/assets/images/workDash_30.png
new file mode 100644
index 0000000..d1cda78
--- /dev/null
+++ b/src/assets/images/workDash_30.png
Binary files differ
diff --git a/src/components/SelectObjModal/newSelectPerson.jsx b/src/components/SelectObjModal/newSelectPerson.jsx
index 07b3c3f..e9d8125 100644
--- a/src/components/SelectObjModal/newSelectPerson.jsx
+++ b/src/components/SelectObjModal/newSelectPerson.jsx
@@ -2,7 +2,7 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-08-29 17:41:09
* @LastEditors: lwh
- * @LastEditTime: 2025-06-06 09:48:10
+ * @LastEditTime: 2025-06-21 11:56:05
* @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx
* @Description: 选择经办人
*/
@@ -48,7 +48,7 @@
/**
* visible, // 传入参数控制modal显示
- * checkKeys, // 选中，数据格式 [{value:'',label:''}]
+ * checkKeys, // 选中，数据格式 [{value:'',label':''}]
* type, // 'person': 选择人员 'unit': 选择组织 'dept': 选择部门 'supUnit': 督办组织
* isCheckbox, // 是否多选
* searchData, // 搜索条件
@@ -65,8 +65,13 @@
const [autoExpandParent, setAutoExpandParent] = useState(true);
const [dataList, setDataList] = useState([]);
const [loading, setLoading] = useState(false);
+ // 新增状态：用于区分是否为搜索状态
+ const [isSearchMode, setIsSearchMode] = useState(false);
-
+ // 获取第一层级的key
+ const getFirstLevelKeys = (treeData) => {
+ return treeData.map(item => item.value);
+ };
// tree复选框选择
function handleCheck(checkedKeys, e) {
@@ -116,44 +121,84 @@
return parents;
};
+ // 检查节点或其子节点是否包含搜索值
+ const hasMatchingChild = (node, searchValue) => {
+ if (node.label.indexOf(searchValue) > -1) {
+ return true;
+ }
+ if (node.children) {
+ return node.children.some(child => hasMatchingChild(child, searchValue));
+ }
+ return false;
+ };
+
+ // 获取搜索时需要展开的所有节点key
+ const getExpandedKeysForSearch = (searchValue, treeData) => {
+ const expandedKeys = [];
+
+ const traverse = (nodes, parentKeys = []) => {
+ nodes.forEach(node => {
+ const currentPath = [...parentKeys, node.value];
+
+ // 如果当前节点匹配搜索值
+ if (node.label.indexOf(searchValue) > -1) {
+ // 添加所有父节点到展开列表
+ expandedKeys.push(...parentKeys);
+ // 添加当前节点到展开列表
+ expandedKeys.push(node.value);
+ }
+
+ // 如果当前节点有子节点，继续遍历
+ if (node.children && node.children.length > 0) {
+ traverse(node.children, currentPath);
+ }
+ });
+ };
+
+ traverse(treeData);
+ return Array.from(new Set(expandedKeys));
+ };
+
function handleSearch(value, dataList) {
- let newExpandedKeys = [];
- // 找到所有包含关键字的节点
- const matchedKeys = dataList
- .filter((item) => item.label.indexOf(value) > -1)
- .map((item) => item.value);
+ if (!value.trim()) {
+ // 如果搜索值为空，恢复到初始状态
+ const firstLevelKeys = getFirstLevelKeys(data);
+ setExpandedKeys(firstLevelKeys);
+ setSearchValue('');
+ setAutoExpandParent(false);
+ setIsSearchMode(false);
+ return;
+ }
- // 获取所有相关父节点
- matchedKeys.forEach((key) => {
- const parents = getAllParentKeys(key, data);
- newExpandedKeys = newExpandedKeys.concat(parents);
- });
-
- // 去重
- newExpandedKeys = Array.from(new Set(newExpandedKeys));
+ // 使用新的函数来精确计算需要展开的节点
+ const newExpandedKeys = getExpandedKeysForSearch(value, data);
setExpandedKeys(newExpandedKeys);
setSearchValue(value);
setAutoExpandParent(true);
+ // 设置为搜索模式
+ setIsSearchMode(true);
}
function handleSearch1(value, dataList) {
- let newExpandedKeys = [];
- // 找到所有包含关键字的节点
- const matchedKeys = dataList
- .filter((item) => item.label.indexOf(value) > -1)
- .map((item) => item.value);
+ if (!value.trim()) {
+ // 如果搜索值为空，恢复到初始状态
+ const firstLevelKeys = getFirstLevelKeys(data);
+ setExpandedKeys(firstLevelKeys);
+ setSearchValue('');
+ setAutoExpandParent(false);
+ setIsSearchMode(false);
+ return;
+ }
- // 获取所有相关父节点
- matchedKeys.forEach((key) => {
- const parents = getAllParentKeys(key, data);
- newExpandedKeys = newExpandedKeys.concat(parents);
- });
+ // 使用新的函数来精确计算需要展开的节点
+ const newExpandedKeys = getExpandedKeysForSearch(value, data);
- // 去重
- newExpandedKeys = Array.from(new Set(newExpandedKeys));
+ setExpandedKeys(newExpandedKeys);
setSearchValue(value);
setAutoExpandParent(true);
+ // 设置为搜索模式
+ setIsSearchMode(true);
}
useEffect(() => {
@@ -172,11 +217,12 @@
} else {
setCheckedKeys({ keys: [], items: [] });
}
+ // 重置搜索模式
+ setIsSearchMode(false);
getData();
}, [type, visible]);
console.log('checkedKeys', checkedKeys);
-
// 搜索
useEffect(() => {
@@ -194,7 +240,13 @@
};
generateList(data);
setDataList(arr);
- handleSearch('', arr);
+
+ // 初始化时只展开第一层级，不调用handleSearch
+ if (data.length > 0 && !isSearchMode) {
+ const firstLevelKeys = getFirstLevelKeys(data);
+ setExpandedKeys(firstLevelKeys);
+ setAutoExpandParent(false);
+ }
}, [data]);
const treeData = useMemo(() => {
@@ -204,8 +256,8 @@
const strTitle = item.label;
const index = strTitle.indexOf(searchValue);
- // 只保留包含 searchValue 的项
- if (index <= -1 && !item.children) {
+ // 如果有搜索值，只保留包含 searchValue 的项或有匹配子节点的项
+ if (searchValue && index <= -1 && !hasMatchingChild(item, searchValue)) {
return null; // 返回 null 表示不包含在最终结果中
}
@@ -259,20 +311,42 @@
<div className="selectObjModal-main">
<div style={{ width: "100%" }}>
<div className="selectObjModal-left-search" style={{ paddingRight: '0px' }}>
- <Search placeholder={`查询${nameStr}名称`} onSearch={(e) => handleSearch1(e, dataList)} />
+ <Search
+ placeholder={`查询${nameStr}名称`}
+ value={searchValue}
+ onChange={(e) => {
+ const value = e.target.value;
+ if (!value.trim()) {
+ // 清空搜索时恢复到初始状态
+ const firstLevelKeys = getFirstLevelKeys(data);
+ setExpandedKeys(firstLevelKeys);
+ setSearchValue('');
+ setAutoExpandParent(false);
+ setIsSearchMode(false);
+ } else {
+ // 实时搜索，使用相同的展开逻辑
+ const newExpandedKeys = getExpandedKeysForSearch(value, data);
+ setExpandedKeys(newExpandedKeys);
+ setSearchValue(value);
+ setAutoExpandParent(true);
+ setIsSearchMode(true);
+ }
+ }}
+ onSearch={(e) => handleSearch1(e, dataList)}
+ />
</div>
<div className="selectObjModal-left-main">
<Spin loading={loading} style={{ width: '100%', height: '100%' }}>
{data.length > 0 ? (
<Tree
checkStrictly
- defaultExpandAll
+ // defaultExpandAll
onExpand={(newExpandedKeys) => {
setExpandedKeys(newExpandedKeys);
setAutoExpandParent(false);
}}
expandedKeys={expandedKeys}
- autoExpandParent={autoExpandParent}
+ // autoExpandParent={autoExpandParent}
onSelect={(checkedKeys, e) => {
handleCheck(checkedKeys, e);
onOk && onOk(e.node)
diff --git a/src/utils/selectOption.js b/src/utils/selectOption.js
index 76c5fa7..03b2c80 100644
--- a/src/utils/selectOption.js
+++ b/src/utils/selectOption.js
@@ -2,7 +2,7 @@
* @Company: hugeInfo
* @Author: ldh
* @Date: 2022-03-07 15:26:41
- * @LastEditTime: 2024-11-13 18:10:52
+ * @LastEditTime: 2025-06-20 11:01:50
* @LastEditors: lwh
* @Version: 1.0.0
* @Description: 公共下拉框数据
@@ -21,10 +21,30 @@
{
value: '22_00001-3',
label: '自行排查',
+ children: [
+ {
+ value: '22_00003-8',
+ label: '部门排查',
+ },
+ {
+ value: '22_00003-2',
+ label: '网格上报',
+ },
+ {
+ value: '22_00003-7',
+ label: '专项治理',
+ },
+ ],
},
{
value: '22_00001-4',
label: '协同推送',
+ children: [
+ {
+ value: '22_00003-1',
+ label: '非警务纠纷',
+ },
+ ],
},
];
// 来访形式
@@ -93,78 +113,78 @@
];
//上传材料类型
const fileOwnerType = [
- {
- value: '22_00018-101',
- label: '申请材料',
- },
- {
- value: '22_00018-102',
- label: '证据材料',
- },
- {
- value: '22_00018-202',
- label: '身份证明材料',
- },
- {
- value: '22_00018-207',
- label: '代理人授权委托书',
- },
- {
- value: '22_00018-203',
- label: '企业(机构)登记材料',
- },
- {
- value: '22_00018-204',
- label: '法定(机构)代表人身份证明材料',
- },
- {
- value: '22_00018-501',
- label: '办理附件',
- },
- {
- value: '22_00018-506',
- label: '督办附件',
- },
- {
- value: '22_00018-507',
- label: '督办回复附件',
- },
- {
- value: '22_00018-508',
- label: '联合处置申请附件',
- },
- {
- value: '22_00018-509',
- label: '联合处置申请审核附件',
- },
- {
- value: '22_00018-520',
- label: '回退申请附件',
- },
- {
- value: '22_00018-511',
- label: '回退审核附件',
- },
- {
- value: '22_00018-512',
- label: '上报申请附件',
- },
- {
- value: '22_00018-513',
- label: '上报审核附件',
- },
- {
- value: '22_00018-302',
- label: '协议文书',
- },
- {
- value: '22_00018-514',
- label: '结案审核附件',
- },
- {
- value: '22_00018-515',
- label: '不予受理附件',
- },
+ {
+ value: '22_00018-101',
+ label: '申请材料',
+ },
+ {
+ value: '22_00018-102',
+ label: '证据材料',
+ },
+ {
+ value: '22_00018-202',
+ label: '身份证明材料',
+ },
+ {
+ value: '22_00018-207',
+ label: '代理人授权委托书',
+ },
+ {
+ value: '22_00018-203',
+ label: '企业(机构)登记材料',
+ },
+ {
+ value: '22_00018-204',
+ label: '法定(机构)代表人身份证明材料',
+ },
+ {
+ value: '22_00018-501',
+ label: '办理附件',
+ },
+ {
+ value: '22_00018-506',
+ label: '督办附件',
+ },
+ {
+ value: '22_00018-507',
+ label: '督办回复附件',
+ },
+ {
+ value: '22_00018-508',
+ label: '联合处置申请附件',
+ },
+ {
+ value: '22_00018-509',
+ label: '联合处置申请审核附件',
+ },
+ {
+ value: '22_00018-520',
+ label: '回退申请附件',
+ },
+ {
+ value: '22_00018-511',
+ label: '回退审核附件',
+ },
+ {
+ value: '22_00018-512',
+ label: '上报申请附件',
+ },
+ {
+ value: '22_00018-513',
+ label: '上报审核附件',
+ },
+ {
+ value: '22_00018-302',
+ label: '协议文书',
+ },
+ {
+ value: '22_00018-514',
+ label: '结案审核附件',
+ },
+ {
+ value: '22_00018-515',
+ label: '不予受理附件',
+ },
];
// 附件上传人类型
const uploaderType = [
@@ -761,7 +781,7 @@
value: '1',
label: '合并',
},
- {
+ {
value: '2',
label: '未合并',
},
@@ -1476,7 +1496,7 @@
value: '2',
label: '未通过',
},
-]
+];
const rmtjList = [
{
@@ -1495,7 +1515,7 @@
value: '4',
label: '转入失败',
},
-]
+];
const inputWay = [
{
@@ -1506,8 +1526,7 @@
value: '2',
label: '案件导入',
},
-]
-
+];
const systemSource = [
{
@@ -1518,7 +1537,7 @@
value: '1',
label: '白云区平台',
},
-]
+];
const obj = {
systemSource,
diff --git a/src/utils/utility.js b/src/utils/utility.js
index 90e9154..332318e 100644
--- a/src/utils/utility.js
+++ b/src/utils/utility.js
@@ -17,7 +17,7 @@
import { pdf, jpg, file, word, excel } from '../assets/images/icon';
import { empty } from '@/assets/images';
-export const isDebug = false; // 是否开发环境
+export const isDebug = true; // 是否开发环境
export const isTest = true; // 是否测试环境
export const appUrl = isDebug ? debug : isTest ? test : web; // api
diff --git a/src/views/comprehensive/index.jsx b/src/views/comprehensive/index.jsx
index 41f5295..0c3ceda 100644
--- a/src/views/comprehensive/index.jsx
+++ b/src/views/comprehensive/index.jsx
@@ -1,4 +1,3 @@
-
import React, { useRef, useEffect, useState } from 'react';
import NewPage from '../../components/NewPage/index';
import { Form, Typography, Space, Tooltip } from 'antd';
@@ -7,350 +6,494 @@
import TableView from '../../components/TableViewCanSort';
import NewTableSearch from '../../components/NewTableSearch';
import SelectObjModal from '@/components/SelectObjModal/newSelectPerson';
-import './index.less'
+import './index.less';
const { Link } = Typography;
// 获取数据
function getCaseInfoDataApi(submitData) {
- return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
+ return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
}
// 区域字典值
function treeByUserIdApi(submitData) {
- return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
+ return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
}
-
const Comprehensive = () => {
- const [form] = Form.useForm();
- const formRef = useRef();
- let location = useLocation();
+ const [form] = Form.useForm();
+ const formRef = useRef();
+ let location = useLocation();
- let navigate = useNavigate();
+ let navigate = useNavigate();
- // 区域字典值
- const [treeList, setTreeList] = useState([]);
- // 筛选区域的中文
- const [labels, setLabels] = useState([]);
- // 默认查询询条件
- const [normalSearch, setNormalSearch] = useState({});
- // 搜索
- const [search, setSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });
+ // 区域字典值
+ const [treeList, setTreeList] = useState([]);
+ // 筛选区域的中文
+ const [labels, setLabels] = useState([]);
+ // 默认查询询条件
+ const [normalSearch, setNormalSearch] = useState({});
+ // 搜索
+ const [search, setSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });
- // 数据
- const [data, setData] = useState({ tableData: [] });
+ // 数据
+ const [data, setData] = useState({ tableData: [] });
- // 承办配合部门select框数据
- const [isModalVisible, setIsModalVisible] = useState(false);
- const [selectObjModalData, setSelectObjModalData] = useState({})
+ // 承办配合部门select框数据
+ const [isModalVisible, setIsModalVisible] = useState(false);
+ const [selectObjModalData, setSelectObjModalData] = useState({});
- // 选择部门弹窗
- function onChange(key) {
- if (key === 'mediateUnitId') {
- setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' })
- } else if (key === 'assistUnitId') {
- setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' })
- } else {
- setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' })
- }
- setIsModalVisible(true)
- }
+ // 选择部门弹窗
+ function onChange(key) {
+ if (key === 'mediateUnitId') {
+ setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' });
+ } else if (key === 'assistUnitId') {
+ setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' });
+ } else {
+ setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' });
+ }
+ setIsModalVisible(true);
+ }
- // 表头
- const columns = () => {
- const columnsData = [
- {
- title: '登记时间', width: 140, dataIndex: 'createTime', defaultSortOrder: 'descend', order: 'ascend',
- sorter: { compare: (a, b) => { } },
- 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: 150, dataIndex: 'inputUnitName' },
- { title: '问题属地', width: 100, dataIndex: 'areaName' },
- { title: '事项来源', width: 100, dataIndex: 'canalName' },
- { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
- { title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
- { title: '承办部门', width: 120, dataIndex: 'mediateUnitName' },
- { title: '配合部门', width: 120, dataIndex: 'assistUnitName' },
- { title: '事项状态', width: 100, dataIndex: 'statusName' },
- {
- 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: '申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map(i => i.trueName)?.join(',') : '-'}</div> },
- { title: '被申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map(i => i.trueName)?.join(',') : '-'}</div> },
+ // 表头
+ const columns = () => {
+ const columnsData = [
+ {
+ title: '登记时间',
+ width: 140,
+ dataIndex: 'createTime',
+ defaultSortOrder: 'descend',
+ order: 'ascend',
+ sorter: { compare: (a, b) => {} },
+ 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: 150, dataIndex: 'inputUnitName' },
+ { title: '问题属地', width: 100, dataIndex: 'areaName' },
+ { title: '事项来源', width: 100, dataIndex: 'canalName' },
+ { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
+ { title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
+ { title: '承办部门', width: 120, dataIndex: 'mediateUnitName' },
+ { title: '配合部门', width: 120, dataIndex: 'assistUnitName' },
+ { title: '事项状态', width: 100, dataIndex: 'statusName' },
+ {
+ 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: '申请方',
+ width: 100,
+ dataIndex: 'action',
+ render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map((i) => i.trueName)?.join(',') : '-'}</div>,
+ },
+ {
+ title: '被申请方',
+ width: 100,
+ dataIndex: 'action',
+ render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map((i) => i.trueName)?.join(',') : '-'}</div>,
+ },
- {
- title: '操作',
- dataIndex: 'action',
- width: 50,
- render: (_, record) => {
- return <Space>
- <span onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)} className='public-color public-a'>详情</span>
- </Space>;
- },
- // render: (_, record) => {
- // return <Link onClick={() => {
- // $$.setSessionStorage(location.pathname, { search: search, treeList: treeList, normalSearch: normalSearch });
- // navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)
- // }}>详情</Link>;
- // },
- },
- ];
- return columnsData;
- };
+ {
+ title: '操作',
+ dataIndex: 'action',
+ width: 50,
+ render: (_, record) => {
+ return (
+ <Space>
+ <span
+ onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)}
+ className="public-color public-a"
+ >
+ 详情
+ </span>
+ </Space>
+ );
+ },
+ // render: (_, record) => {
+ // return <Link onClick={() => {
+ // $$.setSessionStorage(location.pathname, { search: search, treeList: treeList, normalSearch: normalSearch });
+ // navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)
+ // }}>详情</Link>;
+ // },
+ },
+ ];
+ return columnsData;
+ };
- // 页码修改
- function handleChangePage(page, pageSize, field, order) {
- let paramsObj = Object.assign(search, { page, size: pageSize });
- let sortColmn = '';
- let sortType = '';
- sortColmn = field === 'createTime' ? 1 : field === 'closeTime' ? 2 : '';
- sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : ''
- setSearch({ ...paramsObj, sortColmn, sortType });
- getCaseInfoData({ ...paramsObj, sortColmn, sortType });
- }
+ // 页码修改
+ function handleChangePage(page, pageSize, field, order) {
+ let paramsObj = Object.assign(search, { page, size: pageSize });
+ let sortColmn = '';
+ let sortType = '';
+ sortColmn = field === 'createTime' ? 1 : field === 'closeTime' ? 2 : '';
+ sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : '';
+ setSearch({ ...paramsObj, sortColmn, sortType });
+ getCaseInfoData({ ...paramsObj, sortColmn, sortType });
+ }
+ // 导出数据
+ function downloadXls() {
+ const keysToFilter = ['page', 'size'];
+ const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));
- // 导出数据
- 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)}`);
+ }
- window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
- };
+ // 搜索 or 重置
+ function handleSearch(type, session) {
+ if (type === 'search') {
+ let values = form.getFieldsValue();
+ $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
+ $$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
+ $$.changeTimNeweFormat(values, 'fileTime', 'fileStart', 'fileEnd');
+ $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
+ $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
+ $$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType']);
+ $$.searchCascader(values, 'canal', 1, ['canal', 'canalSecond']);
+ $$.searchCascader(search, 'canal', 1, ['canal', 'canalSecond']);
- // 搜索 or 重置
- function handleSearch(type, session) {
- if (type === 'search') {
- let values = form.getFieldsValue();
- $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
- $$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
- $$.changeTimNeweFormat(values, 'fileTime', 'fileStart', 'fileEnd');
- $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage'])
- $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType'])
- $$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType'])
- if (form.getFieldsValue()?.caseType) {
- values.caseType1 = form.getFieldsValue()?.caseType[0]
- }
- 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 (values.mediatorId) {
- values.mediatorId = selectObjModalData?.mediatorId?.key
- } else {
- delete values.mediatorId;
- delete search.mediatorId;
- }
- getCaseInfoData({ page: search.page, size: search.size, sortColmn: search.sortColmn, sortType: search.sortType, ...values });
- }
- if (type === 'reset') {
- let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
- getCaseInfoData({ ...paramsObj, [session.key]: session.value[0], createStart: $$.dateFormat(session.createStart), createEnd: $$.dateFormat(session.createEnd) });
- return;
- }
- if (type === 'recurrent') {
- let paramsObj = { ...search, ...session.search };
- let copyObj = { ...paramsObj };
- if (copyObj.createStart) {
- copyObj.createTime = [$$.dateFormat($$.myMoment(copyObj.createStart)), $$.dateFormat($$.myMoment(copyObj.createEnd))];
- }
- if (copyObj.closeTime) {
- copyObj.closeTime = [$$.dateFormat($$.myMoment(copyObj.closeStart)), $$.dateFormat($$.myMoment(copyObj.closeEnd))];
- }
- if (copyObj.fileTime) {
- copyObj.fileTime = [$$.dateFormat($$.myMoment(copyObj.fileStart)), $$.dateFormat($$.myMoment(copyObj.fileEnd))];
- }
- if (copyObj.queCity) {
- copyObj.queCode = [copyObj.queCity];
- }
- if (copyObj.queArea) {
- let arrayList = $$.convertStringToArray(copyObj.queArea)
- console.log('arrayList', arrayList);
+ if (form.getFieldsValue()?.caseType) {
+ values.caseType1 = form.getFieldsValue()?.caseType[0];
+ }
+ if (form.getFieldsValue()?.canal) {
+ values.caseType1 = form.getFieldsValue()?.canal[0];
+ }
+ 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 (values.mediatorId) {
+ values.mediatorId = selectObjModalData?.mediatorId?.key;
+ } else {
+ delete values.mediatorId;
+ delete search.mediatorId;
+ }
+ getCaseInfoData({ page: search.page, size: search.size, sortColmn: search.sortColmn, sortType: search.sortType, ...values });
+ }
+ if (type === 'reset') {
+ let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
+ getCaseInfoData({
+ ...paramsObj,
+ [session.key]: session.value[0],
+ createStart: $$.dateFormat(session.createStart),
+ createEnd: $$.dateFormat(session.createEnd),
+ });
+ return;
+ }
+ if (type === 'recurrent') {
+ let paramsObj = { ...search, ...session.search };
+ let copyObj = { ...paramsObj };
+ if (copyObj.createStart) {
+ copyObj.createTime = [$$.dateFormat($$.myMoment(copyObj.createStart)), $$.dateFormat($$.myMoment(copyObj.createEnd))];
+ }
+ if (copyObj.closeTime) {
+ copyObj.closeTime = [$$.dateFormat($$.myMoment(copyObj.closeStart)), $$.dateFormat($$.myMoment(copyObj.closeEnd))];
+ }
+ if (copyObj.fileTime) {
+ copyObj.fileTime = [$$.dateFormat($$.myMoment(copyObj.fileStart)), $$.dateFormat($$.myMoment(copyObj.fileEnd))];
+ }
+ if (copyObj.queCity) {
+ copyObj.queCode = [copyObj.queCity];
+ }
+ if (copyObj.queArea) {
+ let arrayList = $$.convertStringToArray(copyObj.queArea);
+ console.log('arrayList', arrayList);
- copyObj.queCode = arrayList
- }
- if (copyObj.queRoad) {
- let arrayList = $$.convertStringToArray(copyObj.queRoad)
- console.log('arrayList', arrayList);
- copyObj.queCode = arrayList
- }
- if (copyObj.queVillage) {
- let arrayList = $$.convertStringToArray(copyObj.queVillage)
- copyObj.queCode = arrayList
- }
- if (copyObj.caseType) {
- copyObj.caseType = [copyObj.caseType1, copyObj.caseType]
- }
- form.setFieldsValue(copyObj);
- getCaseInfoData(paramsObj);
- return;
- }
+ copyObj.queCode = arrayList;
+ }
+ if (copyObj.queRoad) {
+ let arrayList = $$.convertStringToArray(copyObj.queRoad);
+ console.log('arrayList', arrayList);
+ copyObj.queCode = arrayList;
+ }
+ if (copyObj.queVillage) {
+ let arrayList = $$.convertStringToArray(copyObj.queVillage);
+ copyObj.queCode = arrayList;
+ }
+ if (copyObj.caseType) {
+ copyObj.caseType = [copyObj.caseType1, copyObj.caseType];
+ }
+ if (copyObj.canal) {
+ copyObj.canal = [copyObj.canalSecond, copyObj.canal];
+ }
+ form.setFieldsValue(copyObj);
+ getCaseInfoData(paramsObj);
+ return;
+ }
+ }
- }
+ // 获取数据
+ async function getCaseInfoData(submitData) {
+ global.setSpinning(true);
+ const res = await getCaseInfoDataApi(submitData);
+ global.setSpinning(false);
+ if (res.type) {
+ setSearch(submitData);
+ setData({
+ total: res?.data?.totalElements || 0,
+ tableData: res?.data?.content || [],
+ });
+ }
+ }
- // 获取数据
- async function getCaseInfoData(submitData) {
- global.setSpinning(true);
- const res = await getCaseInfoDataApi(submitData);
- global.setSpinning(false);
- if (res.type) {
- setSearch(submitData);
- setData({
- total: res?.data?.totalElements || 0,
- tableData: res?.data?.content || [],
- });
- }
- }
+ // 获取区域字典值
+ 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 = levelKey(list[0].level || '1');
+ 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]);
+ 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 levelKey(KeyIndex) {
+ return {
+ 1: 'queCity',
+ 2: 'queArea',
+ 3: 'queRoad',
+ 4: 'queVillage',
+ }[KeyIndex];
+ }
- // 获取区域字典值
- 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 = levelKey(list[0].level || '1');
- 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]);
- 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') });
- }
- }
+ // 初始化
+ useEffect(() => {
+ let values = $$.getSessionStorage(location.pathname);
+ console.log('values', values);
- function levelKey(KeyIndex) {
- return {
- 1: 'queCity',
- 2: 'queArea',
- 3: 'queRoad',
- 4: 'queVillage'
- }[KeyIndex]
- }
+ if (!!values) {
+ setTreeList(values?.treeList || []);
+ setNormalSearch(values?.normalSearch || {});
+ handleSearch('recurrent', values);
+ $$.clearSessionStorage(location.pathname);
+ } else {
+ treeByUserId();
+ }
+ }, []);
- // 初始化
- useEffect(() => {
- let values = $$.getSessionStorage(location.pathname);
- console.log('values', values);
+ return (
+ <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }}>
+ <div className="comprehensive">
+ <div className="pageSearch">
+ <div className="comprehensive-title">查询条件</div>
+ <NewTableSearch
+ exportButton={downloadXls}
+ labelLength={6}
+ form={form}
+ itemData={[
+ {
+ type: 'Cascader',
+ name: 'queCode',
+ label: '问题属地',
+ placeholder: '请选择',
+ changeSelect: true,
+ allowClear: false,
+ treedata: treeList || [],
+ },
+ {
+ type: 'RangePicker',
+ name: 'createTime',
+ label: '登记时间',
+ shortcutsPlacementLeft: true,
+ allowClear: false,
+ shortcuts: $$.shortcutsList(),
+ span: 8,
+ },
+ { type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
+ { type: 'RangePicker', name: 'fileTime', label: '归档时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
+ {
+ type: 'Cascader',
+ name: 'caseType',
+ label: '纠纷类型',
+ placeholder: '请选择',
+ span: 8,
+ changeSelect: true,
+ treedata: $$.caseTypeSelect.caseTypeSelect,
+ },
+ { type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
+ { type: 'Input', name: 'caseRef', label: '事项编号' },
+ {
+ type: 'Cascader',
+ name: 'canal',
+ label: '事项来源',
+ placeholder: '请选择',
+ span: 8,
+ changeSelect: true,
+ treedata: $$.options.caseCanal,
+ },
+ { type: 'Select', name: 'status', label: '事项状态', placeholder: '请选择', span: 8, selectdata: $$.options.caseStatus },
+ { type: 'Select', name: 'caseLevel', label: '事项等级', placeholder: '请选择', span: 8, selectdata: $$.options.caseLevelList },
+ { type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
+ { type: 'Input', name: 'inputUnitName', label: '登记机构' },
+ {
+ type: 'searchButton',
+ name: 'mediateUnitId',
+ maxLength: 0,
+ onClear: () => {
+ console.log('clear');
+ setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} });
+ form.setFieldValue('mediateUnitId', '');
+ },
+ onSearch: () => {
+ onChange('mediateUnitId');
+ },
+ searchButton: '选择',
+ placeholder: '请选择',
+ label: '承办部门',
+ },
+ {
+ type: 'searchButton',
+ name: 'assistUnitId',
+ maxLength: 0,
+ onClear: () => {
+ setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} });
+ form.setFieldValue('assistUnitId', '');
+ },
+ onSearch: () => {
+ onChange('assistUnitId');
+ },
+ searchButton: '选择',
+ placeholder: '请选择',
+ label: '配合部门',
+ },
+ { type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
+ { type: 'Input', name: 'defendants', label: '被申请方' },
+ { type: 'Select', name: 'peopleNum', placeholder: '请选择', label: '涉及人数', selectdata: $$.options.peopleNum },
+ { type: 'Select', name: 'amount', placeholder: '请选择', label: '涉及金额', selectdata: $$.options.amount },
+ { type: 'Select', name: 'evaluateGrade', placeholder: '请选择', label: '评价等级', selectdata: $$.options.evaluateGrade },
+ {
+ type: 'Select',
+ name: 'majorStatus',
+ placeholder: '请选择',
+ label: '是否重大矛盾',
+ selectdata: [
+ { label: '是', value: '1' },
+ { label: '否', value: '0' },
+ ],
+ },
+ {
+ type: 'searchButton',
+ name: 'mediatorId',
+ maxLength: 0,
+ onClear: () => {
+ setSelectObjModalData({ ...selectObjModalData, mediatorId: {} });
+ form.setFieldValue('mediatorId', '');
+ },
+ onSearch: () => {
+ onChange('mediatorId');
+ },
+ searchButton: '选择',
+ placeholder: '请选择',
+ label: '经办人',
+ },
+ {
+ type: 'Select',
+ name: 'isRisk',
+ placeholder: '请选择',
+ label: '是否扬言极端',
+ selectdata: [
+ { label: '是', value: '1' },
+ { label: '否', value: '0' },
+ ],
+ },
+ { type: 'Select', name: 'agreeType', placeholder: '请选择', label: '结案协议类型', selectdata: $$.options.caseAgreeType },
+ { type: 'Select', name: 'repeatCase', placeholder: '请选择', label: '合并事项', selectdata: $$.options.repeatCase },
+ { type: 'Input', name: 'caseCityCode', label: '市民编号' },
+ ]}
+ handleReset={() => {
+ form.resetFields();
+ form.setFieldsValue({
+ queCode: [normalSearch.value[0]],
+ createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)],
+ });
+ setLabels([treeList[0].label]);
+ handleSearch('reset', normalSearch);
+ }}
+ handleSearch={() => handleSearch('search')}
+ />
+ </div>
- if (!!values) {
- setTreeList(values?.treeList || [])
- setNormalSearch(values?.normalSearch || {})
- handleSearch('recurrent', values)
- $$.clearSessionStorage(location.pathname);
- } else {
- treeByUserId();
- }
- }, []);
-
-
- return (
- <NewPage
- pageHead={
- { breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }
- }
- >
- <div className="comprehensive">
- <div className="pageSearch">
- <div className='comprehensive-title'>查询条件</div>
- <NewTableSearch
- exportButton={downloadXls}
- labelLength={6}
- form={form}
- itemData={[
- { type: 'Cascader', name: 'queCode', label: '问题属地', placeholder: '请选择', changeSelect: true, allowClear: false, treedata: treeList || [] },
- { type: 'RangePicker', name: 'createTime', label: '登记时间', shortcutsPlacementLeft: true, allowClear: false, shortcuts: $$.shortcutsList(), span: 8 },
- { type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
- { type: 'RangePicker', name: 'fileTime', label: '归档时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
- { type: 'Cascader', name: 'caseType', label: '纠纷类型', placeholder: '请选择', span: 8, changeSelect: true, treedata: $$.caseTypeSelect.caseTypeSelect },
- { type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
- { type: 'Input', name: 'caseRef', label: '事项编号' },
- { type: 'Select', name: 'canal', label: '事项来源', placeholder: '请选择', span: 8, selectdata: $$.options.caseCanal },
- { type: 'Select', name: 'status', label: '事项状态', placeholder: '请选择', span: 8, selectdata: $$.options.caseStatus },
- { type: 'Select', name: 'caseLevel', label: '事项等级', placeholder: '请选择', span: 8, selectdata: $$.options.caseLevelList },
- { type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
- { type: 'Input', name: 'inputUnitName', label: '登记机构' },
- { type: 'searchButton', name: 'mediateUnitId', maxLength: 0, onClear: () => { console.log('clear'); setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} }); form.setFieldValue('mediateUnitId', '') }, onSearch: () => { onChange('mediateUnitId') }, searchButton: '选择', placeholder: '请选择', label: '承办部门' },
- { type: 'searchButton', name: 'assistUnitId', maxLength: 0, onClear: () => { setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} }); form.setFieldValue('assistUnitId', '') }, onSearch: () => { onChange('assistUnitId') }, searchButton: '选择', placeholder: '请选择', label: '配合部门' },
- { type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
- { type: 'Input', name: 'defendants', label: '被申请方' },
- { type: 'Select', name: 'peopleNum', placeholder: '请选择', label: '涉及人数', selectdata: $$.options.peopleNum },
- { type: 'Select', name: 'amount', placeholder: '请选择', label: '涉及金额', selectdata: $$.options.amount },
- { type: 'Select', name: 'evaluateGrade', placeholder: '请选择', label: '评价等级', selectdata: $$.options.evaluateGrade },
- { type: 'Select', name: 'majorStatus', placeholder: '请选择', label: '是否重大矛盾', selectdata: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
- { type: 'searchButton', name: 'mediatorId', maxLength: 0, onClear: () => { setSelectObjModalData({ ...selectObjModalData, mediatorId: {} }); form.setFieldValue('mediatorId', '') }, onSearch: () => { onChange('mediatorId') }, searchButton: '选择', placeholder: '请选择', label: '经办人' },
- { type: 'Select', name: 'isRisk', placeholder: '请选择', label: '是否扬言极端', selectdata: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
- { type: 'Select', name: 'agreeType', placeholder: '请选择', label: '结案协议类型', selectdata: $$.options.caseAgreeType },
- { type: 'Select', name: 'repeatCase', placeholder: '请选择', label: '合并事项', selectdata: $$.options.repeatCase },
- { type: 'Input', name: 'caseCityCode', label: '市民编号' },
- ]}
- handleReset={() => {
- form.resetFields();
- form.setFieldsValue({ queCode: [normalSearch.value[0]], createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)] });
- setLabels([treeList[0].label]);
- handleSearch('reset', normalSearch)
- }}
- handleSearch={() => handleSearch('search')}
- />
- </div>
-
- <div style={{ marginTop: '8px' }} className="comprehensive-table">
- <TableView
- showHeader
- title="查询结果"
- columns={columns()}
- dataSource={data.tableData}
- onChange={(pagination, filters, sorter) => {
- handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order)
- }}
- pagination={{
- current: search.page,
- pageSize: search.size,
- total: data.total,
- }}
- />
- </div>
- <SelectObjModal
- visible={isModalVisible}
- nameStr={selectObjModalData.title}
- checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
- onOk={(item) => {
- setIsModalVisible(false);
- setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item })
- form.setFieldValue(selectObjModalData?.key, item.name)
- }}
- type={selectObjModalData.type || 'dept'}
- onClose={() => setIsModalVisible(false)}
- isCheckbox={false}
- />
- </div>
- </NewPage>
- );
+ <div style={{ marginTop: '8px' }} className="comprehensive-table">
+ <TableView
+ showHeader
+ title="查询结果"
+ columns={columns()}
+ dataSource={data.tableData}
+ onChange={(pagination, filters, sorter) => {
+ handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order);
+ }}
+ pagination={{
+ current: search.page,
+ pageSize: search.size,
+ total: data.total,
+ }}
+ />
+ </div>
+ <SelectObjModal
+ visible={isModalVisible}
+ nameStr={selectObjModalData.title}
+ checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
+ onOk={(item) => {
+ setIsModalVisible(false);
+ setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item });
+ form.setFieldValue(selectObjModalData?.key, item.name);
+ }}
+ type={selectObjModalData.type || 'dept'}
+ onClose={() => setIsModalVisible(false)}
+ isCheckbox={false}
+ />
+ </div>
+ </NewPage>
+ );
};
export default Comprehensive;
diff --git a/src/views/disputeLedger/index.jsx b/src/views/disputeLedger/index.jsx
index 88bd32e..50e2e93 100644
--- a/src/views/disputeLedger/index.jsx
+++ b/src/views/disputeLedger/index.jsx
@@ -2,7 +2,7 @@
* @Company: hugeInfo
* @Author: lwh
* @Date: 2024-09-14 15:59:17
- * @LastEditTime: 2025-06-14 11:35:43
+ * @LastEditTime: 2025-06-20 18:48:05
* @LastEditors: lwh
* @Version: 1.0.0
* @Description:
@@ -43,6 +43,11 @@
// 调度中心列表
function getListDataApi(submitData) {
return $$.ax.request({ url: 'caseInfo/ledger', type: 'get', data: submitData, service: 'mediate' });
+}
+
+//
+function ledgerCountApi(submitData) {
+ return $$.ax.request({ url: 'caseInfo/ledgerCount', type: 'get', data: submitData, service: 'mediate' });
}
// 区域字典值
@@ -86,7 +91,7 @@
data4: { value1: 24, value2: 30, value3: 46 },
});
- const [allNum, setAllNum] = useState(0);
+ const [allData, setAllData] = useState({});
// 搜索 or 重置
function handleSearch(type, session) {
@@ -100,8 +105,24 @@
},
activeKey
);
+ ledgerCount(
+ {
+ [session.key]: session.value[0],
+ createStart: $$.dateFormat(session.createStart),
+ createEnd: $$.dateFormat(session.createEnd),
+ },
+ activeKey
+ );
} else {
getListData(
+ {
+ [normalSearch.key]: normalSearch.value[0],
+ createStart: $$.dateFormat(normalSearch.createStart),
+ createEnd: $$.dateFormat(normalSearch.createEnd),
+ },
+ activeKey
+ );
+ ledgerCount(
{
[normalSearch.key]: normalSearch.value[0],
createStart: $$.dateFormat(normalSearch.createStart),
@@ -119,6 +140,7 @@
$$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
$$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
getListData({ ...values }, session);
+ ledgerCount({ ...values }, session);
return;
}
}
@@ -131,6 +153,7 @@
if (res.type) {
let nowData = res.data || {};
setData({ ...data, ...nowData });
+ // !allData.hasOwnProperty('sysNum') && ledgerCount(submitData, ledgerType);
// setSearch(submitData);
}
}
@@ -186,6 +209,15 @@
3: 'queRoad',
4: 'queVillage',
}[KeyIndex];
+ }
+
+ async function ledgerCount(submitData, ledgerType) {
+ global.setSpinning(true);
+ const res = await ledgerCountApi({ ...submitData, ledgerType });
+ global.setSpinning(false);
+ if (res.type) {
+ setAllData({ ...res.data });
+ }
}
useEffect(() => {
@@ -281,7 +313,7 @@
{
icon: disputeLedger_8,
title: '全部',
- value: data?.totalNum || 0,
+ value: allData?.allNum || 0,
backgroundColor: '#e8f7ff',
borderColor: '#3491fa',
color: '#3491FA',
@@ -290,56 +322,56 @@
{
icon: disputeLedger_9,
title: '本系统',
- value: data?.sysNum || 0,
+ value: allData?.sysNum || 0,
backgroundColor: '#fff7e6',
borderColor: '#FA8C16',
color: '#FA8C16',
- per: `${data?.sysRate || 0}%`,
+ per: `${allData?.sysRate || 0}%`,
},
{
icon: disputeLedger_10,
title: '12345',
- value: data?.ottffNum || 0,
+ value: allData?.ottffNum || 0,
backgroundColor: '#F9F0FF',
borderColor: '#722ED1',
color: '#722ED1',
- per: `${data?.ottffRate || 0}%`,
+ per: `${allData?.ottffRate || 0}%`,
},
{
icon: disputeLedger_11,
title: '非警务纠纷',
- value: data?.fjwjfNum || 0,
+ value: allData?.tzfjwjfNum || 0,
backgroundColor: 'rgba(182,221,241,0.24)',
borderColor: '#1A6FB8',
color: '#1A6FB8',
- per: `${data?.fjwjfRate || 0}%`,
+ per: `${allData?.tzfjwjfRate || 0}%`,
},
{
icon: disputeLedger_12,
title: '人民调解',
- value: data?.rmtjNum || 0,
+ value: allData?.rmtjNum || 0,
backgroundColor: 'rgba(253,205,197,0.24)',
borderColor: '#F53F3F',
color: '#F53F3F',
- per: `${data?.rmtjRate || 0}%`,
+ per: `${allData?.rmtjRate || 0}%`,
},
{
icon: disputeLedger_13,
title: '信访',
- value: data?.xfNum || 0,
+ value: allData?.xfNum || 0,
backgroundColor: 'rgba(175,240,181,0.24)',
borderColor: '#00B42A',
color: '#00B42A',
- per: `${data?.xfRate || 0}%`,
+ per: `${allData?.xfRate || 0}%`,
},
{
icon: disputeLedger_14,
title: '劳动争议',
- value: data?.ldzcNum || 0,
+ value: allData?.ldzcNum || 0,
backgroundColor: 'rgba(181,245,236,0.24)',
borderColor: '#08979c',
color: '#08979c',
- per: `${data?.ldzcRate || 0}%`,
+ per: `${allData?.ldzcRate || 0}%`,
},
].map((item, index) => (
<div
@@ -347,26 +379,9 @@
setActiveKey(index);
setActiveName(item.title);
if (index === 0) {
- setAllNum(data?.allNum || 0);
handleSearch('search', '');
- } else if (index === 1) {
- setAllNum(data?.sysNum || 0);
- handleSearch('search', 1);
- } else if (index === 2) {
- setAllNum(data?.ottffNum || 0);
- handleSearch('search', 2);
- } else if (index === 3) {
- setAllNum(data?.rmtjNum || 0);
- handleSearch('search', 3);
- } else if (index === 4) {
- setAllNum(data?.xfNum || 0);
- handleSearch('search', 4);
- } else if (index === 5) {
- setAllNum(data?.ldzcNum || 0);
- handleSearch('search', 5);
- } else if (index === 6) {
- setAllNum(data?.fjwjfNum || 0);
- handleSearch('search', 6);
+ } else {
+ handleSearch('search', index);
}
}}
className={`disputeLedger-card ${activeKey === index ? 'disputeLedger-card-active' : ''}`}
@@ -441,7 +456,26 @@
{ value: data.finishNum, name: '化解成功' },
{ value: data.failNum, name: '化解不成功' },
]}
- allNum={allNum}
+ allNum={(() => {
+ switch (activeKey) {
+ case 0:
+ return allData?.allNum || 0;
+ case 1:
+ return allData?.sysNum || 0;
+ case 2:
+ return allData?.ottffNum || 0;
+ case 3:
+ return allData?.tzfjwjfNum || 0;
+ case 4:
+ return allData?.rmtjNum || 0;
+ case 5:
+ return allData?.xfNum || 0;
+ case 6:
+ return allData?.ldzcNum || 0;
+ default:
+ return allData?.sysNum || 0;
+ }
+ })()}
/>
</div>
</div>
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%' }} />;
+};
diff --git a/src/views/workDash/index.jsx b/src/views/workDash/index.jsx
index ae0547c..f2da821 100644
--- a/src/views/workDash/index.jsx
+++ b/src/views/workDash/index.jsx
@@ -2,7 +2,7 @@
* @Company: hugeInfo
* @Author: lwh
* @Date: 2024-09-14 15:59:17
- * @LastEditTime: 2025-05-09 14:20:13
+ * @LastEditTime: 2025-06-21 11:32:31
* @LastEditors: lwh
* @Version: 1.0.0
* @Description:
@@ -40,6 +40,10 @@
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';
@@ -376,6 +380,14 @@
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);
}
}
}
@@ -783,6 +795,14 @@
return '自行排查';
case '5':
return '协同推送';
+ case '6':
+ return '部门排查';
+ case '7':
+ return '网格排查';
+ case '8':
+ return '非警务纠纷';
+ case '9':
+ return '专项纠纷';
default:
break;
}
@@ -1083,7 +1103,7 @@
{tabKey === '4' && (
<Button
className="source-button source-button-color"
- icon={<img className="source-icon" src={workDash_22} alt="" srcset="" />}
+ icon={<img className="source-icon" src={workDash_29} alt="" srcset="" />}
type="secondary"
>
自行排查
@@ -1097,6 +1117,94 @@
>
协同推送
</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>
)}
@@ -1122,7 +1230,7 @@
/>
<div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', width: '100%' }}></div> */}
<div style={{ marginTop: '16px' }} className="disputeLedger-row">
- <div className="comprehensive-title">数据总览</div>
+ <div className="comprehensive-title">数据总览{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
<div>
<Space className="workDash-d" align="center" split={<Divider type="vertical" style={{ height: '48px' }} />}>
<div
@@ -1134,10 +1242,154 @@
<div className="workDash-item-img">
<img src={workDash_1} alt="" srcset="" />
</div>
- <div className="workDash-item-div">
- <div className="workDash-item-title">总登记</div>
- <div className="workDash-item-value">{data?.totalNum || 0}</div>
- </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={() => {
@@ -1170,14 +1422,15 @@
<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>
+ 化解成功：{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: '50px' }}>{data?.finishNum + data?.failNum || 0}</div>
<div style={{ width: '36px' }}></div>
<Space split={<Divider type="vertical" />}>
<div>
@@ -1218,13 +1471,13 @@
</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"
+ 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>
@@ -1267,13 +1520,13 @@
</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"
+ 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>
@@ -1316,17 +1569,14 @@
</div>
<div className="workDash-main-card">
- <div className="workDash-main-card-head">
+ <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"
- onClick={() => {
- tabsOnchange('4');
- }}
- >
+ <div className="workDash-main-card-head-l-img-title">
详情
</div>
</div>
@@ -1367,13 +1617,10 @@
</div>
<div className="workDash-main-card">
- <div className="workDash-main-card-head">
- <div
- className="workDash-main-card-head-l workDash-bg_4"
- onClick={() => {
+ <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>
@@ -1527,178 +1774,6 @@
</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%' }}>
@@ -1813,7 +1888,7 @@
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 className="disputeLedger-green-title">化解统计{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
<div style={{ paddingRight: '24px' }}>
<Select
style={{ width: '180px' }}
@@ -1833,7 +1908,7 @@
</Option>
))}
</Select>
- <Button type="outline" onClick={downloadAreaXls}>
+ <Button style={{ marginLeft: '12px' }} type="outline" onClick={downloadAreaXls}>
导出
</Button>
</div>
@@ -1998,7 +2073,7 @@
<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>
+ <div>实时动态{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
{/* 导出 */}
<Button type="outline" onClick={downloadXls}>
导出
diff --git a/src/views/workDash/index.less b/src/views/workDash/index.less
index 6cc541e..ee6c7ca 100644
--- a/src/views/workDash/index.less
+++ b/src/views/workDash/index.less
@@ -47,6 +47,14 @@
background-color: #f53f3f;
margin-right: 8px;
}
+ &-blue {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: #1A6FB8;
+ margin-right: 8px;
+ }
}
&-value {
color: #1d2129;
@@ -113,6 +121,7 @@
}
}
&-r {
+ cursor: pointer;
background: linear-gradient(271deg, #13c2c2 0%, rgba(5, 174, 174, 0.8) 14%);
color: #fff;
display: flex;
@@ -465,6 +474,22 @@
color: #1a6fb8 !important;
}
}
+.source-button1 {
+ cursor: pointer;
+ border: 1px solid #c9cdd4 !important;
+ border-radius: 4px !important;
+ padding: 8px 16px !important;
+ display: flex !important;
+ align-items: center !important;
+ height: 38px !important;
+ width: 126px !important;
+ color: #1d2129 !important;
+ gap: 8px !important;
+ &-color {
+ background-color: rgba(182, 221, 241, 0.48) !important;
+ color: #1a6fb8 !important;
+ }
+}
.source-icon {
cursor: pointer;
--
Gitblit v1.8.0