| | |
| | | */ |
| | | 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 { |
| | |
| | | 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; |
| | |
| | | // |
| | | 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' }); |
| | | } |
| | | |
| | | // 区域字典值 |
| | |
| | | |
| | | 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') { |
| | |
| | | }, |
| | | activeKey |
| | | ); |
| | | // 更新实时动态数据 |
| | | getCaseInfoData({ |
| | | [session.key]: session.value[0], |
| | | createStart: $$.dateFormat(session.createStart), |
| | | createEnd: $$.dateFormat(session.createEnd), |
| | | ...listDataSearch |
| | | }); |
| | | } else { |
| | | getListData( |
| | | { |
| | |
| | | }, |
| | | activeKey |
| | | ); |
| | | // 更新实时动态数据 |
| | | getCaseInfoData({ |
| | | [normalSearch.key]: normalSearch.value[0], |
| | | createStart: $$.dateFormat(normalSearch.createStart), |
| | | createEnd: $$.dateFormat(normalSearch.createEnd), |
| | | ...listDataSearch |
| | | }); |
| | | } |
| | | return; |
| | | } |
| | |
| | | $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']); |
| | | getListData({ ...values }, session); |
| | | ledgerCount({ ...values }, session); |
| | | // 更新实时动态数据 |
| | | getCaseInfoData({ ...values, ...listDataSearch }); |
| | | return; |
| | | } |
| | | } |
| | |
| | | async function getListData(submitData, ledgerType) { |
| | | global.setSpinning(true); |
| | | const res = await getListDataApi({ ...submitData, ledgerType }); |
| | | if (ledgerType === 0 || ledgerType === 1) { |
| | | const res1 = await getCaseInfoDataApi({ ...submitData, ...listDataSearch }); //获取实时动态数据 |
| | | if (res1.type) { |
| | | setListData({ |
| | | total: res1?.data?.totalElements || 0, |
| | | tableData: res1?.data?.content || [], |
| | | }); |
| | | } |
| | | } |
| | | global.setSpinning(false); |
| | | if (res.type) { |
| | | let nowData = res.data || {}; |
| | |
| | | // !allData.hasOwnProperty('sysNum') && ledgerCount(submitData, ledgerType); |
| | | // setSearch(submitData); |
| | | } |
| | | |
| | | } |
| | | |
| | | // 饼图点击进入下一层级 |
| | |
| | | } |
| | | } |
| | | |
| | | // 实时动态相关函数 |
| | | 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 paramsObj = Object.assign({ ...normalSearch, ...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 || [], |
| | | }); |
| | | } |
| | | } |
| | | |
| | | // 导出数据 |
| | | 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(() => { |
| | | treeByUserId(); |
| | | // 初始化时获取实时动态数据 |
| | | getCaseInfoData({ ...listDataSearch }); |
| | | }, []); |
| | | |
| | | return ( |
| | |
| | | onClick={() => { |
| | | setActiveKey(index); |
| | | setActiveName(item.title); |
| | | 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' : ''}`} |
| | |
| | | </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> |
| | | ); |