/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-11-11 14:56:49
|
* @LastEditTime: 2024-12-20 14:58:32
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 统计列表组件
|
*/
|
import React, { useEffect, useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Input, Row, Col, Tooltip } from 'antd';
|
import { useSearchParams } from 'react-router-dom';
|
import './index.less';
|
import * as $$ from '../../utils/utility';
|
import { empty } from '../../assets/images';
|
|
// dataSource 列表数据
|
// columns表头内容
|
|
const TableView = ({ title, search, labels, dataSource, parentData }) => {
|
|
const columns = [
|
{ label: <div className='systemOverview-table-oneHead'>序号</div>, color: 'blue', width: '5.55%' },
|
{ label: <div className='systemOverview-table-oneHead'>{search.queRoad ? '社区' : search.queArea ? '镇街' : '区域'}</div>, color: 'blue', width: '8.11%' },
|
{
|
label:
|
<div className='systemOverview-table-twoHead'>
|
<div className='systemOverview-table-subHead-top'>账号情况</div>
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>登录账号（综治中心）</div>
|
<div className='systemOverview-table-subHead-title'>登录账号（部门）</div>
|
<div className='systemOverview-table-subHead-title'>新增账号</div>
|
</div>
|
</div>,
|
color: 'blue',
|
width: '19.66%'
|
},
|
{
|
label: <div className='systemOverview-table-twoHead'>
|
<div className='systemOverview-table-subHead-top'>纠纷登记情况</div>
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>总登记</div>
|
<div className='systemOverview-table-subHead-title'>大厅来访</div>
|
<div className='systemOverview-table-subHead-title'>自行排查</div>
|
<div className='systemOverview-table-subHead-title'>案件导入</div>
|
<div className='systemOverview-table-subHead-title'>线上来访</div>
|
</div>
|
</div>,
|
color: 'orange',
|
width: '27.77%'
|
},
|
{
|
label: <div className='systemOverview-table-twoHead' >
|
<div className='systemOverview-table-subHead-top'>化解结果</div>
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>化解成功</div>
|
<div className='systemOverview-table-subHead-title'>化解不成功</div>
|
<div className='systemOverview-table-subHead-title'>化解中</div>
|
<div className='systemOverview-table-subHead-title'>不予受理</div>
|
</div>
|
</div>,
|
color: 'blue1',
|
width: '23.22%'
|
},
|
{
|
label: <div className='systemOverview-table-twoHead' >
|
<div className='systemOverview-table-subHead-top'>流转情况</div>
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>自行受理</div>
|
<div className='systemOverview-table-subHead-title'>流转受理</div>
|
<div className='systemOverview-table-subHead-title'>流转中</div>
|
<div className='systemOverview-table-subHead-title'>不予受理</div>
|
</div>
|
</div>,
|
color: 'blue2',
|
width: '21.22%'
|
},
|
]
|
return (
|
<div className="systemOverview-table dataSync" >
|
<div className="tableView-header-title">{title}</div>
|
{
|
dataSource?.length > 0 &&
|
<div className='systemOverview-subTitle'>{search.startDate === search.endDate ? `${$$.myTimeFormat(search.startDate, 'YYYY年MM月DD日')}` : `${$$.myTimeFormat(search.startDate, 'YYYY年MM月DD日')}-${$$.myTimeFormat(search.endDate, 'YYYY年MM月DD日')}`}，系统在<span className='public-color'>{labels[labels.length - 1]}</span>共<span className='public-color'>{(parentData?.accLoginBmNum || 0) + (parentData?.accLoginZzNum || 0)}名</span>用户登录使用系统，登记矛盾纠纷总数<span className='public-color'>{parentData?.caseAllNum || 0}宗</span>，化解情况总数<span className='public-color'>{parentData?.flowAllNum || 0}宗</span></div>
|
}
|
{
|
dataSource?.length > 0 ?
|
<>
|
<div className='systemOverview-table-head'>
|
{
|
columns?.map((item, index) =>
|
<div key={index} style={{ width: item.width || 'auto' }} className={`systemOverview-table-head-item systemOverview-table-${item.color}`} >{item.label}</div>
|
)
|
}
|
</div>
|
<div className='systemOverview-table-i'>
|
{
|
dataSource?.map((item, index) =>
|
<div className='systemOverview-table-body' style={{ backgroundColor: index % 2 === 0 ? '#efeef2' : '#fff' }} key={'body' + index}>
|
<div style={{ color: '#000', width: '5.55%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-oneHead'>{item.sort}</div>
|
</div>
|
<div style={{ color: '#000', width: '8.11%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-oneHead'><Tooltip title={item.areaName}>{$$.ellipsis(item.areaName || '-', '8')}</Tooltip></div>
|
</div>
|
<div style={{ color: '#000', width: '19.66%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>{item.accLoginZzNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.accLoginBmNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.accAddNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ color: '#000', width: '27.77%', backgroundColor: index % 2 === 0 ? '#FFF7E6' : '#fff' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>{item.caseAllNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.caseDtNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.caseZxpcNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.caseAjdrNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.caseXsNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ color: '#000', width: '23.22%', backgroundColor: index % 2 === 0 ? '#E8F7FF' : '#fff' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>{item.sourceHjcgNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.sourceHjbcgNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.sourceHjzNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.sourceByslNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ color: '#000', width: '21.22%', backgroundColor: index % 2 === 0 ? '#E8F7FF' : '#fff' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>{item.flowZxslNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.flowLzslNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.flowLzzNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{item.flowByslNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
)
|
}
|
</div>
|
{
|
dataSource?.length > 0 &&
|
<div className="systemOverview-table-bottom">
|
<div className='systemOverview-table-body' >
|
<div style={{ color: '#000', width: '5.55%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-oneHead'></div>
|
</div>
|
<div style={{ color: '#000', width: '8.11%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-oneHead'>合计</div>
|
</div>
|
<div style={{ color: '#000', width: '19.66%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>{parentData?.accLoginZzNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData?.accLoginBmNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData?.accAddNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ color: '#000', width: '27.77%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div style={{ color: "#EF6C24", fontWeight: 600 }} className='systemOverview-table-subHead-title'>{parentData?.caseAllNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.caseDtNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.caseZxpcNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.caseAjdrNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.caseXsNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ color: '#000', width: '23.22%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div style={{ color: "#3491FA", fontWeight: 600 }} className='systemOverview-table-subHead-title'>{parentData.sourceHjcgNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.sourceHjbcgNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.sourceHjzNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.sourceByslNum || 0}</div>
|
</div>
|
</div>
|
<div style={{ color: '#000', width: '21.22%' }} className={`systemOverview-table-head-item`} >
|
<div className='systemOverview-table-subHead'>
|
<div className='systemOverview-table-subHead-title'>{parentData.flowZxslNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.flowLzslNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.flowLzzNum || 0}</div>
|
<div className='systemOverview-table-subHead-title'>{parentData.flowByslNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
}
|
</>
|
:
|
($$.MyNewEmpty({ description: '暂无数据', style: { margin: '50px auto' } }))
|
}
|
</div >
|
);
|
};
|
|
TableView.propTypes = {
|
dataSource: PropTypes.array,
|
columns: PropTypes.array,
|
};
|
|
export default TableView;
|
