From d1b1fe81218da1736a4308eff981caa7e4ad0f2b Mon Sep 17 00:00:00 2001
From: xusd <330628789@qq.com>
Date: Sun, 06 Jul 2025 11:13:05 +0800
Subject: [PATCH] fix:文案调整
---
src/views/disputeLedger/index.jsx | 351 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 308 insertions(+), 43 deletions(-)
diff --git a/src/views/disputeLedger/index.jsx b/src/views/disputeLedger/index.jsx
index 88bd32e..56defa9 100644
--- a/src/views/disputeLedger/index.jsx
+++ b/src/views/disputeLedger/index.jsx
@@ -2,14 +2,14 @@
* @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:
*/
import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as $$ from '../../utils/utility';
-import { Form, Typography, Row, Col, Space } from 'antd';
+import { Form, Typography, Row, Col, Space, Button } from 'antd';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import { IconUndo } from '@arco-design/web-react/icon';
import {
@@ -28,9 +28,18 @@
disputeLedger_13,
disputeLedger_14,
} from '../../assets/images';
+import {
+ workDash_13,
+ workDash_14,
+ workDash_16,
+ workDash_17,
+ workDash_18,
+} from '../../assets/images';
import NewPage from '../../components/NewPage/index';
import * as echarts from 'echarts';
import NewTableSearch from '../../components/NewTableSearch';
+import TableView from '../../components/TableView';
+import MyTabsNew from '../../components/MyTabsNew';
import './index.less';
const { Link } = Typography;
@@ -43,6 +52,16 @@
// 调度中心列表
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' });
+}
+
+// 获取实时动态数据
+function getCaseInfoDataApi(submitData) {
+ return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
}
// 区域字典值
@@ -86,12 +105,18 @@
data4: { value1: 24, value2: 30, value3: 46 },
});
- const [allNum, setAllNum] = useState(0);
+ const [allData, setAllData] = useState({});
+
+ // 实时动态相关状态
+ const [listData, setListData] = useState({ tableData: [] }); //实时动态数据表
+ const [listDataSearch, setListDataSearch] = useState({ page: 1, size: 10, sortColmn: '1', sortType: '2' }); //实时动态数据表
+ const [tabKey, setTabKey] = useState('1'); // tab切换
// 搜索 or 重置
function handleSearch(type, session) {
if (type === 'reset') {
if (session) {
+ // 获取图标数据
getListData(
{
[session.key]: session.value[0],
@@ -100,7 +125,23 @@
},
activeKey
);
+ ledgerCount(
+ {
+ [session.key]: session.value[0],
+ createStart: $$.dateFormat(session.createStart),
+ createEnd: $$.dateFormat(session.createEnd),
+ },
+ activeKey
+ );
+ // 独立获取实时动态数据
+ getCaseInfoData({
+ [session.key]: session.value[0],
+ createStart: $$.dateFormat(session.createStart),
+ createEnd: $$.dateFormat(session.createEnd),
+ ...listDataSearch
+ });
} else {
+ // 获取图标数据
getListData(
{
[normalSearch.key]: normalSearch.value[0],
@@ -109,6 +150,21 @@
},
activeKey
);
+ ledgerCount(
+ {
+ [normalSearch.key]: normalSearch.value[0],
+ createStart: $$.dateFormat(normalSearch.createStart),
+ createEnd: $$.dateFormat(normalSearch.createEnd),
+ },
+ activeKey
+ );
+ // 独立获取实时动态数据
+ getCaseInfoData({
+ [normalSearch.key]: normalSearch.value[0],
+ createStart: $$.dateFormat(normalSearch.createStart),
+ createEnd: $$.dateFormat(normalSearch.createEnd),
+ ...listDataSearch
+ });
}
return;
}
@@ -118,7 +174,11 @@
$$.changeTimNeweFormat(values, 'endTime', 'closeStart', 'closeEnd');
$$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
$$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
+ // 获取图标数据
getListData({ ...values }, session);
+ ledgerCount({ ...values }, session);
+ // 独立获取实时动态数据
+ getCaseInfoData({ ...values, ...listDataSearch });
return;
}
}
@@ -131,6 +191,7 @@
if (res.type) {
let nowData = res.data || {};
setData({ ...data, ...nowData });
+ // !allData.hasOwnProperty('sysNum') && ledgerCount(submitData, ledgerType);
// setSearch(submitData);
}
}
@@ -186,6 +247,163 @@
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 });
+ }
+ }
+
+ // 实时动态相关函数
+ 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}`);
+ }
+
+ // tab标题映射
+ 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;
+ }
+ }
+
+ // 切换tabs页
+ function tabsOnchange(activeKey) {
+ console.log(activeKey);
+ setTabKey(activeKey);
+ if (activeKey !== tabKey) {
+ if (activeKey === '1') {
+ delete normalSearch.canal;
+ getCaseInfoData({ ...normalSearch, ...listDataSearch });
+ } else if (activeKey === '2') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-1', ...listDataSearch });
+ } else if (activeKey === '3') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-2', ...listDataSearch });
+ } else if (activeKey === '4') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-3', ...listDataSearch });
+ } else if (activeKey === '5') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-4', ...listDataSearch });
+ } else if (activeKey === '6') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-3', canalSecond: '22_00003-8', ...listDataSearch });
+ } else if (activeKey === '7') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-3', canalSecond: '22_00003-2', ...listDataSearch });
+ } else if (activeKey === '8') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-4', canalSecond: '22_00003-1', ...listDataSearch });
+ } else if (activeKey === '9') {
+ getCaseInfoData({ ...normalSearch, canal: '22_00001-4', canalSecond: '22_00003-7', ...listDataSearch });
+ }
+ }
+ }
+
+ // 页码修改
+ function handleChangePage(page, pageSize) {
+ // 获取表单中当前的值
+ let values = form.getFieldsValue();
+
+ // 处理时间格式
+ $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
+ $$.changeTimNeweFormat(values, 'endTime', 'closeStart', 'closeEnd');
+
+ // 处理级联选择器格式
+ $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
+ $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
+
+ // 构建分页参数
+ let paramsObj = {
+ ...values,
+ ...listDataSearch,
+ page,
+ size: pageSize
+ };
+
+ getCaseInfoData({ ...paramsObj });
+ }
+
+ // 获取实时动态数据
+ async function getCaseInfoData(submitData) {
+ const res = await getCaseInfoDataApi({ ...submitData });
+ setListDataSearch({ ...listDataSearch, page: submitData.page, size: submitData.size });
+ if (res.type) {
+ setListData({
+ total: res?.data?.totalElements || 0,
+ tableData: res?.data?.content || [],
+ });
+ }
+ }
+
+ // 导出数据
+ function downloadXls() {
+ const keysToFilter = ['page', 'size'];
+ const filteredObj = Object.fromEntries(Object.entries(normalSearch).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));
+
+ window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
}
useEffect(() => {
@@ -281,7 +499,7 @@
{
icon: disputeLedger_8,
title: '全部',
- value: data?.totalNum || 0,
+ value: allData?.allNum || 0,
backgroundColor: '#e8f7ff',
borderColor: '#3491fa',
color: '#3491FA',
@@ -290,83 +508,84 @@
{
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,
+ title: '12345热线处置的矛盾',
+ 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,
+ title: '公安处置的非警务纠纷',
+ 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,
+ title: '其他部门处置的调解案件',
+ 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,
+ title: '信访部门处置的矛盾纠纷',
+ 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,
+ title: '人社部门处置的劳动争议',
+ 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
onClick={() => {
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);
+ if (index === 0 || index === 1) {
+ // 全部和本系统：重新查询数据
+ if (index === 0) {
+ handleSearch('search', '');
+ } else {
+ handleSearch('search', index);
+ }
+ } else {
+ // 12345热线处置的矛盾及其后面的tab：更新统计数据，清空实时动态数据
+ let values = form.getFieldsValue();
+ $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
+ $$.changeTimNeweFormat(values, 'endTime', 'closeStart', 'closeEnd');
+ $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
+ $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
+
+ // 更新统计图表数据
+ getListData({ ...values }, index);
+ ledgerCount({ ...values }, index);
+
+ // 清空实时动态数据
+ setListData({ tableData: [] });
+ setListDataSearch({ page: 1, size: 10, sortColmn: '1', sortType: '2' });
}
}}
className={`disputeLedger-card ${activeKey === index ? 'disputeLedger-card-active' : ''}`}
@@ -441,7 +660,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>
@@ -459,6 +697,33 @@
</div>
</Space>
</div>
+
+ {/* 实时动态 */}
+ <div style={{ marginTop: '-10px' }}>
+ <div className="workDash-main-flex_1">
+ <div className="big-green-main-title-display-table">
+ <div className="disputeLedger-green-title" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+ <div>实时动态{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
+
+ </div>
+ <div style={{ padding: '4px 16px 16px' }}>
+ <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),
+ }}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</NewPage>
);
--
Gitblit v1.8.0