广州市综治平台前端
xusd
5 days ago 252aa74034db281a07c9fe9df5000cc07ffe4950
src/views/disputeLedger/index.jsx
@@ -9,7 +9,7 @@
 */
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;
@@ -48,6 +57,11 @@
//
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' });
}
// 区域字典值
@@ -93,6 +107,11 @@
   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') {
@@ -113,6 +132,13 @@
               },
               activeKey
            );
            // 更新实时动态数据
            getCaseInfoData({
               [session.key]: session.value[0],
               createStart: $$.dateFormat(session.createStart),
               createEnd: $$.dateFormat(session.createEnd),
               ...listDataSearch
            });
         } else {
            getListData(
               {
@@ -130,6 +156,13 @@
               },
               activeKey
            );
            // 更新实时动态数据
            getCaseInfoData({
               [normalSearch.key]: normalSearch.value[0],
               createStart: $$.dateFormat(normalSearch.createStart),
               createEnd: $$.dateFormat(normalSearch.createEnd),
               ...listDataSearch
            });
         }
         return;
      }
@@ -141,6 +174,8 @@
         $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
         getListData({ ...values }, session);
         ledgerCount({ ...values }, session);
         // 更新实时动态数据
         getCaseInfoData({ ...values, ...listDataSearch });
         return;
      }
   }
@@ -149,6 +184,15 @@
   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 || {};
@@ -156,6 +200,7 @@
         // !allData.hasOwnProperty('sysNum') && ledgerCount(submitData, ledgerType);
         // setSearch(submitData);
      }
   }
   // 饼图点击进入下一层级
@@ -220,8 +265,142 @@
      }
   }
   // 实时动态相关函数
   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 (
@@ -378,10 +557,28 @@
                        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' : ''}`}
@@ -493,6 +690,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>
   );