/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-17 09:39:09
|
* @LastEditTime: 2022-09-01 20:17:35
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 网络服务和椰居码历史服务 “步骤条” 组件
|
*/
|
import React from 'react';
|
import './index.less';
|
import { Empty } from 'dingtalk-design-mobile';
|
import { step_jmxxdj, step_ylrkpc, step_sbkbl, step_lnzbl, step_mdjfpc } from '../../assets/icon/index';
|
import { timeFormat } from '../../utils/utility';
|
|
const ServiceStep = ({ stepData = [] }) => {
|
return (
|
<>
|
{stepData.length === 0 && (
|
<div>
|
<Empty type="noContent" title="暂无服务历史" inline />
|
</div>
|
)}
|
{stepData.map((x, t) => (
|
<div className="myStep-item" key={t}>
|
<div className="myStep-item-icon">
|
<img src={step_jmxxdj} alt="" />
|
</div>
|
<div className="myStep-item-content">
|
<div className="myStep-item-content-title">{x.serveTypeDesc}</div>
|
<div className="myStep-item-content-subtitle">
|
<span>服务结果：</span>
|
<span
|
className={`myStep-item-${x.serveResult === '1' ? 'orange' : x.serveResult === '2' ? 'green' : x.serveResult === '3' ? 'red' : ''}`}
|
>
|
<span>{x.serveResultDesc}</span>
|
{x.content && <span>（{x.content}）</span>}
|
</span>
|
</div>
|
<div className="myStep-item-content-subtitle">
|
<span>网格员：</span>
|
<span>{x.editor}</span>
|
</div>
|
<div className="myStep-item-content-subtitle">
|
<span>{timeFormat(x.createTime)}</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</>
|
);
|
};
|
|
export default ServiceStep;
|
