From 92e258fd2f911df1e04d81ea847cfacdc7b8b874 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Wed, 11 Sep 2024 11:54:58 +0800
Subject: [PATCH] feat: 工作台时限组件
---
gz-customerSystem/src/views/register/matterDetail/FileUpLoad.jsx | 6
gz-customerSystem/src/views/register/index.less | 57 +++++++
gz-customerSystem/src/views/register/index.jsx | 318 ++++++++++----------------------------------
3 files changed, 130 insertions(+), 251 deletions(-)
diff --git a/gz-customerSystem/src/views/register/index.jsx b/gz-customerSystem/src/views/register/index.jsx
index 78a9971..7378401 100644
--- a/gz-customerSystem/src/views/register/index.jsx
+++ b/gz-customerSystem/src/views/register/index.jsx
@@ -13,6 +13,7 @@
import { Space } from 'antd';
import { Tabs, Typography, Radio } from '@arco-design/web-react';
import * as $$ from '@/utils/utility';
+import './index.less';
const TabPane = Tabs.TabPane;
@@ -115,221 +116,7 @@
},
]
- const [fakeData1, setFakeData1] = useState(
- [
- {
- id: 1,
- caseNo: 'A20230101',
- judicNo: '申请材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 2,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 3,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 4,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 5,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 6,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 7,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 8,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 9,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
- {
- id: 10,
- caseNo: 'A20230101',
- judicNo: '证据材料',
- perClassName: '李晓明的纠纷化解申请表、身份证...',
- inputUserName: '0',
- mediateUserName: '2024-7-12 12:00',
- judgeName: '王五',
- mediator: '赵六',
- handlerUserName: '钱七',
- returnUserName: '孙八',
- expireTime: '2023-08-10T08:00:00.000Z',
- processName: '进行中',
- otherMediator: '周九',
- canalName: '网络',
- judicResult: '通过',
- assistName: '吴十',
- mediTypeName: '民事调解',
- serieStatus: '1', // 1 表示非系列案，2 表示系列案
- // 更多字段...
- },
-
- // 更多数据...
- ])
+ const [fakeData1, setFakeData1] = useState([])
const [columnType, setColumnType] = useState([
{
@@ -342,13 +129,16 @@
title: '分派时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -400,13 +190,16 @@
title: '分派时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -456,13 +249,16 @@
title: '分派时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -511,13 +307,16 @@
title: '签收时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -567,13 +366,16 @@
title: '签收时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -623,13 +425,16 @@
title: '受理时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -679,13 +484,16 @@
title: '受理时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '事项等级',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '事项来源',
@@ -793,7 +601,7 @@
width: 180,
render: (text, record) => (
<Space>
- <div onClick={() => navigate(`/mediate/visit/fileMessage?caseTaskId=${record.ownerId}&caseId=${record.caseId}`)} style={{ cursor: 'pointer',color: '#1A6FB8' }}>详情</div>
+ <div onClick={() => navigate(`/mediate/visit/fileMessage?caseTaskId=${record.ownerId}&caseId=${record.caseId}`)} style={{ cursor: 'pointer', color: '#1A6FB8' }}>详情</div>
<div onClick={() => navigate(`/mediate/visit/handleFeedback?caseTaskId=${record.ownerId}&caseId=${record.caseId}`)} style={{ cursor: 'pointer', color: '#1A6FB8' }}>处理</div>
</Space>
),
@@ -881,13 +689,16 @@
title: '回复时限',
dataIndex: 'timeLimit',
key: 'timeLimit',
- width: 60,
+ width: 190,
+ render: (text, record, index) => {
+ return getDiffTime(record.timeLimit)
+ }
},
{
title: '督办部门',
dataIndex: 'caseGrade',
key: 'caseGrade',
- width: 180,
+ width: 80,
},
{
title: '督办意见',
@@ -1068,6 +879,7 @@
}
}
+ //改变tab
const handleColumnType = (type) => {
console.log(type, 'type')
if (type === '2') {
@@ -1101,9 +913,7 @@
}
-
-
-
+ //改变工作总览
const tabActive = (key) => {
console.log(key, 'key')
setTabActivekey(key);
@@ -1144,6 +954,7 @@
}
}
+ //获取工作总览数据
const getCountList = async () => {
const res = await getCountListApi()
if (res.type) {
@@ -1152,16 +963,35 @@
}
}
-
-
-
-
-
-
-
+ //获取时间差，返回表格时限组件
+ const getDiffTime = (timeLimit) => {
+ if (timeLimit) {
+ // 转换为Date对象
+ let targetDate = new Date(timeLimit);
+ // 获取当前时间
+ let now = new Date();
+ // 计算时间差（毫秒）
+ let diff = Math.abs(targetDate - now);
+ // 将时间差转换为小时和分钟
+ let hours = Math.floor(diff / (1000 * 60 * 60));
+ let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+ // 比较两个时间
+ if (targetDate.getTime() <= now.getTime()) {
+ return <>
+ <span className='timeTip-red'>
+ <span className='timeTip-red-drop'></span>{`超${hours}小时${minutes}分钟`}
+ </span>
+ <span className='timeTip-red-tips'>督</span>
+ </>
+ } else {
+ return <span className='timeTip-green'><span className='timeTip-green-drop'></span>{`剩${hours}小时${minutes}分钟`}</span>
+ }
+ } else {
+ return <span>-</span>
+ }
+ }
useEffect(() => {
-
pageMyTaskFpNew()
// pageMyTaskBl();
getCountList();
@@ -1288,7 +1118,7 @@
自行排查
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
<div className='bottomTab1'>
- <div className='VisitWorkBench-bottom-title' onClick={() => navigate(`/mediate/visit`)} style={{ color: '#206BCD',cursor:'pointer' }}>大厅来访</div>
+ <div className='VisitWorkBench-bottom-title' onClick={() => navigate(`/mediate/visit`)} style={{ color: '#206BCD', cursor: 'pointer' }}>大厅来访</div>
<img src={visitInto} alt='' className='VisitWorkBench-bottom-img' />
</div>
<div className='bottomTab2'>
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 71d05d2..21c7963 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/gz-customerSystem/src/views/register/index.less
@@ -845,7 +845,7 @@
background: #ffffff;
padding: 12px 16px 16px 16px;
margin-top: 12px;
- height: 54vh;
+ height: 54vh;
}
&-bottom {
@@ -853,7 +853,7 @@
padding: 12px 16px 16px 16px;
margin-top: 12px;
- &-title{
+ &-title {
width: 140px;
font-family: DingTalk;
font-size: 22px;
@@ -873,16 +873,65 @@
align-items: center;
}
-.bottomTab1{
+.bottomTab1 {
// display: 'flex', background: linear-gradient(to right, #6a1b9a, #e040fb)
display: flex;
background: linear-gradient(to right, #E8F7FF, #9FD4FD);
padding: 12px 16px 16px 16px;
}
-.bottomTab2{
+.bottomTab2 {
display: flex;
background: linear-gradient(to right, #FFF7E6, #FFD591);
padding: 12px 16px 16px 16px;
+}
+
+.timeTip {
+ display: inline-block;
+
+ &-red {
+ color: #F53F3F;
+ background: #ffece8;
+ border-radius: 4px;
+ padding: 2px 8px 4px 8px;
+
+ &-drop {
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ background: #F53F3F;
+ border-radius: 2px;
+ margin: 0 5px 2px 0;
+ }
+
+ &-tips {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ background: #f53f3f;
+ border-radius: 6px;
+ color: #fff;
+ text-align: center;
+ margin-left: 5px;
+ font-size: 12px;
+ line-height: 24px;
+ }
+ }
+
+ &-green {
+ color: #00b42a;
+ background: #E8FFEA;
+ border-radius: 4px;
+ padding: 2px 8px 4px 8px;
+
+ &-drop {
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ background: #00b42a;
+ border-radius: 2px;
+ margin: 0 5px 2px 0;
+ }
+ }
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/matterDetail/FileUpLoad.jsx b/gz-customerSystem/src/views/register/matterDetail/FileUpLoad.jsx
index 97f1cba..4afdef4 100644
--- a/gz-customerSystem/src/views/register/matterDetail/FileUpLoad.jsx
+++ b/gz-customerSystem/src/views/register/matterDetail/FileUpLoad.jsx
@@ -53,7 +53,7 @@
<>
<Modal
- style={{ width: '944px' }}
+ // style={{ width: '944px' }}
visible={scanImage}
onCancel={() => setScanImage(false)}
footer={null}
@@ -76,7 +76,7 @@
<div><Button type="primary" onClick={() => handleScaned()} style={{ marginTop: '20px' }}>开始识别</Button></div>
</Modal>
<Modal
- style={{ width: '1200px' }}
+ // style={{ width: '1200px' }}
visible={visible}
onCancel={onCancel}
title='识别上传材料'
@@ -132,7 +132,7 @@
</Modal >
<Modal
className='scan-modal'
- style={{ width: '1200px' }}
+ // style={{ width: '1200px' }}
wrapStyle={{ zIndex: 1002 }}
visible={scaned}
onCancel={() => setScaned(false)}
--
Gitblit v1.8.0