/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-19 11:22:26
|
* @LastEditTime: 2023-12-22 15:33:17
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 工作台
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import { useLocation, useNavigate, useOutletContext } from 'react-router-dom';
|
import { Col, Row, List, Button, Calendar, Space, Tooltip, Typography, Select } from 'antd';
|
import { LeftCircleFilled, RightCircleFilled, EnvironmentOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
import { Chart } from '@antv/g2';
|
import * as $$ from '../../utils/utility';
|
import Page from '../../components/Page';
|
import { group1, group2, group3, group4, group5, group6, group7, group8, group9, workbench_screen } from '../../assets/images/icon';
|
import MyTabs from '../../components/MyTabs';
|
import MyDrawer from '../../components/MyDrawer';
|
|
const { Option } = Select;
|
|
// 获取各类型案件数
|
function getCaseNumDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/countCase', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取待办事项数据
|
function getTaskDataApi() {
|
return $$.ax.request({ url: 'caseInfo/myToDoList1', type: 'get', service: 'mediate' });
|
}
|
|
// 获取所有案件的预约信息
|
function getOrderDataApi() {
|
return $$.ax.request({ url: 'caseInfo/listOrderMeet', type: 'get', service: 'mediate' });
|
}
|
|
// 获取统计图数据
|
function getChartDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/countOneYear', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取附件列表
|
function getAttachmentListApi(submitData) {
|
return $$.ax.request({ url: 'fileRelate/listNewSysFile', type: 'get', data: submitData, service: 'sys' });
|
}
|
|
// 图表
|
const MyChart = ({ searchChart, roleId }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
if (!roleId) return;
|
async function getChartData() {
|
if (myChart) myChart.changeData([]);
|
const res = await getChartDataApi({ countRange: searchChart });
|
if (res.type) {
|
let data = res.data || [];
|
if (!myChart) {
|
const chart = new Chart({ container: 'container', autoFit: true });
|
chart.data(data);
|
chart.scale({ month: { range: [0, 1] }, num: { min: 0, nice: true } });
|
chart.tooltip({ showCrosshairs: true, shared: true });
|
chart.line().position('month*num').color('type').shape('smooth');
|
chart.point().position('month*num').color('type').shape('circle');
|
chart.render();
|
setMyChart(chart);
|
} else {
|
myChart.changeData(data);
|
}
|
}
|
}
|
getChartData();
|
}, [searchChart, roleId]);
|
|
useEffect(() => {
|
if (myChart && myChartRef.current.clientHeight !== 0) {
|
myChart.forceFit();
|
}
|
});
|
|
return <div id="container" ref={myChartRef} style={{ height: '100%' }} />;
|
};
|
|
const Workbench = () => {
|
let location = useLocation();
|
|
let navigate = useNavigate();
|
|
// 统计口径
|
const [searchTotal, setSearchTotal] = useState('1');
|
|
// 预约信息
|
const [orderData, setOrderData] = useState({ time: [], data: [] });
|
|
// 预约抽屉
|
const [orderDrawer, setOrderDrawer] = useState({ visible: false, data: [] });
|
|
// tab切换
|
const [tabKey, setTabKey] = useState('1');
|
|
// 纠纷登记modal显隐
|
const [registerChooseModalVisible, setRegisterChooseModalVisible] = useState();
|
|
const { powerMap, roleId } = useOutletContext();
|
|
|
const [attachmentList, setAttachmentList] = useState([]);
|
|
// 案件总数
|
const [caseNumData, setCaseNumData] = useState([
|
{
|
title: '案件总数',
|
num: '0',
|
class: 'mediaAll',
|
key: 'countZsProcess',
|
url: '/mediate/mediateAll',
|
},
|
{
|
title: '调解成功',
|
num: '0',
|
class: 'mediaSuccess',
|
key: 'countTjcgResult',
|
url: '/mediate/mediateAll?isBack=true',
|
searchData: ['/mediate/mediateAll', { search: { mediResult: '22_00025-1', page: 1, size: 10 } }],
|
},
|
{
|
title: '司法确认',
|
num: '0',
|
class: 'mediaConfirm',
|
key: 'countSfqrJudic',
|
url: '/mediate/judicialOverview',
|
searchData: ['/mediate/judicialOverview'],
|
},
|
{
|
title: '调解中',
|
num: '0',
|
class: 'mediaIng',
|
key: 'countTjzProcess',
|
url: '/mediate/mediateAll?isBack=true',
|
searchData: ['/mediate/mediateAll', { search: { process: '22_00006-3', page: 1, size: 10 } }],
|
},
|
{
|
title: '调解不成功',
|
num: '0',
|
class: 'mediaFail',
|
key: 'countTjsbResult',
|
url: '/mediate/mediateAll?isBack=true',
|
searchData: ['/mediate/mediateAll', { search: { mediResult: '22_00025-2', page: 1, size: 10 } }],
|
},
|
{
|
title: '其他',
|
num: '0',
|
class: 'mediaGrey',
|
key: 'countOther',
|
url: '',
|
searchData: ['/mediate/mediateAll', { search: { mediResult: '22_00025-2', page: 1, size: 10 } }],
|
},
|
]);
|
|
// 常用的操作
|
const commonOperations = [
|
{ icon: group1, title: '纠纷登记', url: '/mediate/register' },
|
{ icon: group2, title: '我的调解', url: '/mediate/myAdjust' },
|
{ icon: group3, title: '草稿箱', url: '/mediate/registerList' },
|
{ icon: group4, title: '我的待办', url: '/mediate/taskProcessingMyWaitFoCase' },
|
{ icon: group5, title: '签收列表', url: '/mediate/signForList' },
|
{ icon: group6, title: '调解档案', url: '/mediate/mediateArchives' },
|
{ icon: group7, title: '调解总览', url: '/mediate/mediateAll' },
|
{ icon: group8, title: '调度中心', url: '/mediate/mediateList' },
|
{ icon: group9, title: '司法确认', url: '/mediate/myConfirmation' },
|
];
|
|
// 待办事项数据
|
const [taskData, setTaskData] = useState({});
|
|
// 待办事项列表
|
const [taskList, setTaskList] = useState([]);
|
|
// 统计跳转
|
function handleTotalNavigate(url, searchData) {
|
if (url && !searchData) {
|
navigate(url);
|
return;
|
}
|
if (!url || !powerMap[searchData[0]]) return;
|
if (searchData[1]) {
|
$$.setSessionStorage(searchData[0], searchData[1]);
|
}
|
navigate(url);
|
}
|
|
// 切换月份面板
|
function handleChangeMonth(num, value, onChange) {
|
let newValue = $$.myMoment(value).subtract(num, 'month');
|
onChange(newValue);
|
}
|
|
// 跳转
|
function handleNavigate(url) {
|
if (url === '/mediate/register') {
|
setRegisterChooseModalVisible($$.timeFormat(new Date()));
|
} else {
|
navigate(url);
|
}
|
}
|
|
// 点击查看预约记录
|
function handleShowOrder(date) {
|
let data = orderData.data.filter((item) => $$.dateFormat(item.orderStartTime) === date);
|
setOrderDrawer({ visible: true, data });
|
}
|
|
// 预约信息跳转到调解或司法确认视窗
|
function handleJumpWindow(type, value) {
|
if (type === '22_00020-1') {
|
navigate(
|
`/mediate/myAdjust/mediationWindow?caseId=${value.caseId}&taskId=${value.taskId}&taskType=${value.taskType}&back=${location.pathname}`
|
);
|
} else {
|
navigate(
|
`/mediate/myConfirmation/judicialWindow?caseId=${value.caseId}&judicialId=${value.judicId}&taskId=${value.taskId}&back=${location.pathname}`
|
);
|
}
|
}
|
|
// 待办处理跳转
|
function handleGoToHandle(activeKey, type, caseNo, judicNo) {
|
console.log(type, caseNo, judicNo);
|
let url = '';
|
let searchObj = {};
|
switch (activeKey) {
|
case '1':
|
url = 'taskProcessingMyWaitFoCase';
|
searchObj = { caseNo };
|
break;
|
case '2':
|
url = 'signForList';
|
searchObj = { caseNo };
|
break;
|
case '3':
|
url = 'myAdjust';
|
searchObj = { caseNo };
|
break;
|
case '4':
|
url = 'taskProcessingMyWaitFoCase';
|
searchObj = { caseNo };
|
break;
|
default:
|
break;
|
}
|
$$.setSessionStorage(`/mediate/${url}`, { search: { ...searchObj, page: 1, size: 10 } });
|
url = `/mediate/${url}?isBack=true`;
|
navigate(url);
|
}
|
|
// 切换tabs页
|
function tabsOnchange(activeKey) {
|
console.log(activeKey);
|
setTabKey(activeKey);
|
if (activeKey !== tabKey) {
|
if (activeKey === '1') {
|
setTaskList(taskData.dzpList || [])
|
} else if (activeKey === '2') {
|
setTaskList(taskData.dqsList || [])
|
} else if (activeKey === '3') {
|
setTaskList(taskData.dtjList || [])
|
} else if (activeKey === '4') {
|
setTaskList(taskData.dgdList || [])
|
}
|
}
|
}
|
|
function loadMoreClick() {
|
if (tabKey == '1') {
|
navigate(`/mediate/taskProcessingMyWaitFoCase?isBack=true`);
|
} else if (tabKey == '2') {
|
navigate(`/mediate/signForList?isBack=true`);
|
} else if (tabKey == '3') {
|
navigate(`/mediate/myAdjust?isBack=true`);
|
} else if (tabKey == '4') {
|
navigate(`/mediate/taskProcessingMyWaitFoCase?isBack=true`);
|
}
|
}
|
|
async function getCaseNumData(submitData) {
|
global.setSpinning(true);
|
const res = await getCaseNumDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
let sum = caseNumData.map((item) => {
|
item.num = res.data[item.key] || '0';
|
return item;
|
});
|
setSearchTotal(submitData.countRange);
|
setCaseNumData(sum);
|
}
|
}
|
|
// 获取附件列表
|
async function getAttachmentList(submitData) {
|
global.setSpinning(true);
|
const res = await getAttachmentListApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
// attachmentList,
|
setAttachmentList(res.data || [])
|
}
|
}
|
|
function handleShowAttachment(item) {
|
// window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileShowUrl}${item.id}`);
|
window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileDownUrl}${item.id}`);
|
|
}
|
|
useEffect(() => {
|
if (!roleId) return;
|
// 获取平台案件数量数据 and 待办事项
|
async function getAllData() {
|
global.setSpinning(true);
|
$$.ax.ax.all([getCaseNumDataApi({ countRange: '1' }), getTaskDataApi(), getOrderDataApi()]).then(
|
$$.ax.ax.spread(function (res1, res2, res3) {
|
global.setSpinning(false);
|
if (res1.type) {
|
let sum = caseNumData.map((item) => {
|
item.num = res1.data[item.key] || '0';
|
return item;
|
});
|
setCaseNumData(sum);
|
}
|
if (res2.type) {
|
setTaskData(res2.data || {});
|
setTaskList(res2.data.dzpList || [])
|
}
|
if (res3.type) {
|
let arr = [];
|
res3.data.forEach((x) => arr.push($$.dateFormat(x.orderStartTime)));
|
setOrderData({ time: arr, data: res3.data || [] });
|
}
|
})
|
);
|
}
|
getAllData();
|
getAttachmentList({ ownerType: '22_00018-505', ownerId: '10001', size: '10' })
|
}, [roleId]);
|
|
const loadMore =
|
taskList.length === 3 ? (
|
<div
|
style={{
|
borderTop: '1px solid #e8e8e8',
|
textAlign: 'center',
|
height: '38px',
|
lineHeight: '38px',
|
fontSize: '14px',
|
}}
|
>
|
|
<Typography.Link onClick={() => loadMoreClick()}>查看更多</Typography.Link>
|
</div>
|
) : null;
|
|
console.log(attachmentList.length, 'attachmentList')
|
|
return (
|
<Page registerChooseModalVisible={registerChooseModalVisible}>
|
<div className="workbench">
|
<Row gutter={[16, 16]}>
|
<Col span={17} style={{ display: 'flex', flexDirection: 'column' }}>
|
<div className="workbench-card workbench-headCard">
|
<Row gutter={[16, 8]}>
|
<Col span={6}>
|
<div style={{ borderRight: '1px solid rgba(0,0,0,0.2)', paddingRight: '16px' }}>
|
<h5 style={{ marginBottom: '8px' }}>统计口径</h5>
|
<div style={{ display: 'flex', gap: '8px' }}>
|
<img src={workbench_screen} alt="" />
|
<Select onChange={(value) => getCaseNumData({ countRange: value })} value={searchTotal} style={{ flex: 1 }}>
|
<Option value="1">统计本单位+辖区单位</Option>
|
<Option value="2">仅统计本单位</Option>
|
<Option value="3">仅统计辖区单位</Option>
|
</Select>
|
</div>
|
</div>
|
</Col>
|
{caseNumData.map((x, t) => {
|
return (
|
<Col span={3} key={t}>
|
<div onClick={() => handleTotalNavigate(x.url, x.searchData)} className={`workbench-headCard-${x.class}`}>
|
<div className="workbench-headCard-title">{x.title}</div>
|
<div className="workbench-headCard-text">{x.num}</div>
|
</div>
|
</Col>
|
);
|
})}
|
</Row>
|
</div>
|
<div className="workbench-card workbench-matter" style={{ padding: '0px 16px' }}>
|
{/* <h5>近期待办{taskData.length !== 0 && <div className="workbench-card-titleNum">{taskData.length}</div>}</h5> */}
|
<div className="pageTabs">
|
<MyTabs
|
tabs={[
|
{ key: '1', label: <><div style={{ height: '22px' }}>待指派</div> <span className={tabKey == '1' ? 'workbench-orderItem-tag3' : 'workbench-orderItem-tag3-grey'}>{$$.showMoreNum(taskData.countDzp)}</span></> },
|
{ label: <>待签收 <span className={tabKey == '2' ? 'workbench-orderItem-tag3' : 'workbench-orderItem-tag3-grey'}>{$$.showMoreNum(taskData.countDqs)}</span></>, key: '2' },
|
{ label: <>待调解 <span className={tabKey == '3' ? 'workbench-orderItem-tag3' : 'workbench-orderItem-tag3-grey'}>{$$.showMoreNum(taskData.countDtj)}</span></>, key: '3' },
|
{ label: <>待归档 <span className={tabKey == '4' ? 'workbench-orderItem-tag3' : 'workbench-orderItem-tag3-grey'}>{$$.showMoreNum(taskData.countDgd)}</span></>, key: '4' }]}
|
activeKey={tabKey}
|
onChange={(activeKey) => tabsOnchange(activeKey)}
|
/>
|
</div>
|
<List
|
itemLayout="horizontal"
|
locale={{ emptyText: $$.MyEmpty({ description: '暂无数据' }) }}
|
loadMore={loadMore}
|
dataSource={taskList}
|
renderItem={(item) => (
|
<>
|
<List.Item
|
actions={[
|
<Button type="primary" size="small" onClick={() => handleGoToHandle(tabKey, item.powerTag, item.caseNo, item.judicNo)}>
|
去处理
|
</Button>,
|
]}
|
>
|
<List.Item.Meta
|
title={
|
<span>
|
<span className="public-tag public-tag-default">{item.taskNodeName}</span>
|
<span className="workbench-matter-type">{item.caseTitle}</span>
|
</span>
|
}
|
description={
|
<span className="workbench-matter-text">
|
<span className="workbench-margin">上一级处理人：{item.lastUserName}</span>
|
<span>任务下达时间：{$$.timeFormat(item.createTime)}</span>
|
</span>
|
}
|
/>
|
</List.Item>
|
|
</>
|
)}
|
/>
|
|
</div>
|
<div className="workbench-card workbench-chart">
|
<div style={{ marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '16px' }}>
|
<h5>工作统计</h5>
|
</div>
|
<div style={{ flex: 1 }}>
|
<MyChart searchChart={searchTotal} roleId={roleId} />
|
</div>
|
</div>
|
</Col>
|
<Col span={7}>
|
<div className="workbench-card workbench-action">
|
<h5>常用功能</h5>
|
<div className="workbench-action-main" style={{ minHeight: '268px' }}>
|
<Row gutter={[24, 24]}>
|
{commonOperations.map((x, t) => {
|
let myPower = powerMap || {};
|
return (
|
myPower[x.url]?.show && (
|
<Col span={8} key={t + 1} onClick={() => handleNavigate(x.url)}>
|
<img className="workbench-action-icon" src={x.icon} alt="" />
|
<div className="workbench-action-text">{x.title}</div>
|
</Col>
|
)
|
);
|
})}
|
</Row>
|
</div>
|
</div>
|
<div className="workbench-card workbench-calender" style={{ minHeight: '254px' }}>
|
<Calendar
|
fullscreen={false}
|
headerRender={({ value, onChange }) => {
|
return (
|
<div className="workbench-calender-title">
|
<div>
|
{$$.myTimeFormat(value, 'YYYY')}年{$$.myTimeFormat(value, 'M')}月
|
</div>
|
<Space size="middle">
|
<LeftCircleFilled className="workbench-calender-titleButton" onClick={() => handleChangeMonth(1, value, onChange)} />
|
<RightCircleFilled className="workbench-calender-titleButton" onClick={() => handleChangeMonth(-1, value, onChange)} />
|
</Space>
|
</div>
|
);
|
}}
|
dateFullCellRender={(date) => {
|
let visible = orderData.time.includes($$.dateFormat(date));
|
let num = orderData.time.filter((item) => item === $$.dateFormat(date)).length;
|
const dom = (
|
<div
|
style={{ position: 'relative', zIndex: 99 }}
|
onClick={() => {
|
if (visible) handleShowOrder($$.dateFormat(date));
|
}}
|
>
|
<div className={date.format('YYYY-MM-DD') === $$.myMoment().format('YYYY-MM-DD') ? 'workbench-calender-time' : ''}>
|
{date.format('DD')}
|
</div>
|
{visible && <div className="workbench-calender-active" />}
|
</div>
|
);
|
return visible ? <Tooltip title={`${num}条预约记录`}>{dom}</Tooltip> : dom;
|
}}
|
/>
|
</div>
|
{/* TODO:暂无此功能 */}
|
<div className="workbench-card workbench-service">
|
<h5>使用教程</h5>
|
<ul style={{ minHeight: '77px', maxHeight: '200px', overflowY: 'auto', }}>
|
{
|
attachmentList.length ? attachmentList.map((item, index) => {
|
return (
|
<li key={index}>
|
<div onClick={() => handleShowAttachment(item)}>{item.trueName}</div>
|
</li>
|
);
|
}) : $$.MyEmpty({ description: '暂无数据' })
|
}
|
{/* <li>
|
<div>白云区矛盾纠纷多元化解平台2.0版本用户手册</div>
|
</li>
|
<li>
|
<div>调度中心的规则如何配置更加合理？</div>
|
</li>
|
<li>
|
<div>已经调解成功的案件如何通过平台下载案件档案？</div>
|
</li>
|
*/}
|
</ul>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
<MyDrawer
|
title="预约详情"
|
visible={orderDrawer.visible}
|
width={350}
|
onClose={() => setOrderDrawer({ visible: false })}
|
mainStyle={{ padding: '12px 0 0' }}
|
>
|
{orderDrawer.data?.map((x, t) => {
|
// 22_00020-1调解会议，22_00020-2司法确认会议
|
let str = x.meetType === '22_00020-1' ? '调解' : '司法确认';
|
return (
|
<div className="workbench-orderItem" key={t}>
|
<div className="workbench-orderItem-header">
|
<Space>
|
<div>{$$.myTimeFormat(x.orderStartTime, 'YYYY/MM/DD')}</div>
|
<div className={`workbench-orderItem-${x.meetType === '22_00020-1' ? 'tag1' : 'tag2'}`}>
|
{x.meetWayName}
|
{str}
|
</div>
|
</Space>
|
<Typography.Link className="workbench-orderItem-action" onClick={() => handleJumpWindow(x.meetType, x)}>
|
进入
|
</Typography.Link>
|
</div>
|
<div className="workbench-orderItem-content">
|
<ClockCircleOutlined className="workbench-orderItem-icon" />
|
<span>
|
{$$.myTimeFormat(x.orderStartTime, 'HH:mm')} ~ {$$.myTimeFormat(x.orderEndTime, 'HH:mm')}
|
</span>
|
</div>
|
<div>
|
<EnvironmentOutlined className="workbench-orderItem-icon" />
|
<span>{x.meetAddr || '-'}</span>
|
</div>
|
</div>
|
);
|
})}
|
</MyDrawer>
|
</Page>
|
);
|
};
|
|
export default Workbench;
|
