/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-09-20 10:31:56
|
* @LastEditTime: 2022-12-29 17:48:39
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 我的任务 - 详情 - 事件详情
|
*/
|
import React, { useMemo } from 'react';
|
import { Space } from 'dingtalk-design-mobile';
|
import { LocationOutlined } from 'dd-icons';
|
import Descriptions from '../../components/Descriptions';
|
import ImgShow from '../../components/ImgShow';
|
import { taskHandle_icon_1 } from '../../assets/icon';
|
import { task_img_2 } from '../../assets/img';
|
import { moment, timeFormat } from '../../utils/utility';
|
|
const TaskDetail = ({ data }) => {
|
// 任务到期天数
|
const getExpireDays = useMemo(() => {
|
let now = moment(),
|
target = moment(data.taskExpireTime),
|
diffDay = now.diff(target, 'day');
|
if (diffDay <= 0) {
|
return `${Math.abs(diffDay) || 1}天后到期`;
|
}
|
return '';
|
}, [data.taskExpireTime]);
|
|
return (
|
<div className="taskHandle-main">
|
<div className="taskHandle-explain">
|
<img src={taskHandle_icon_1} alt="" />
|
<div className="taskHandle-explain-content">
|
<div>
|
联系人信息：<span className="taskHandle-explain-color">{data.contacts || '-'}</span>（电话：
|
<span className="taskHandle-explain-color">{data.contactsMobile || '-'}</span>）
|
</div>
|
<div>请在处置时限内完成事件的处置与核实</div>
|
</div>
|
</div>
|
<div className="taskHandle-msg">
|
<div className="taskHandle-msg-title">
|
<img className="taskHandle-msg-title-img" src={task_img_2} alt="" />
|
<div className="taskHandle-msg-title-content">
|
<Space wrap>
|
<div className="taskHandle-msg-title-content-title">{data.eventContent || '-'}</div>
|
{getExpireDays ? <div className="public-tag2">{getExpireDays}</div> : <div className="public-tag2 public-tag2-red">已过期</div>}
|
</Space>
|
<div className="taskHandle-msg-title-content-subtitle">
|
<span>{data.eventSourceDesc || '-'}</span>
|
<span className="public-rightBorder">下达时间：{timeFormat(data.taskCreateTime)}</span>
|
</div>
|
</div>
|
</div>
|
<Descriptions
|
data={[
|
{ label: '事件类型', value: data.eventTypeDesc },
|
{ label: '事件标题', value: data.eventTitle },
|
{ label: '事件编号', value: data.eventNo },
|
{ label: '发生时间', value: timeFormat(data.eventTime) },
|
{
|
label: '区域及所属辖区',
|
value: (
|
<span>
|
{data.districtName || '-'}/{data.subdistrictName || '-'}/{data.communityName || '-'}
|
</span>
|
),
|
},
|
{
|
label: '事件位置',
|
value: (
|
<div style={{ display: 'flex' }}>
|
<div>
|
<LocationOutlined />
|
</div>
|
<div style={{ flex: 1, marginLeft: '4px' }}>{data.addr || '-'}</div>
|
</div>
|
),
|
},
|
{ label: '事件级别', value: `${data.eventLevel || '-'}级` },
|
{
|
label: '事件描述',
|
value: data.eventContent,
|
},
|
{
|
label: '事件附件',
|
type: 'files',
|
value: (
|
<div className="taskHandle-msg-files">
|
{!data.fileList?.length && '-'}
|
{data.fileList?.map((x, t) => (
|
<div className="taskHandle-msg-files-item" key={t}>
|
<ImgShow img={x.showUrl} allImg={data.fileList} noTitle />
|
</div>
|
))}
|
</div>
|
),
|
},
|
]}
|
layout="vertical"
|
columns={1}
|
colon={false}
|
textGap={0}
|
itemGap={8}
|
/>
|
</div>
|
</div>
|
);
|
};
|
|
export default TaskDetail;
|
