|
@@ -22,8 +22,9 @@ import { UpOutlined } from '@ant-design/icons';
|
|
|
import { connect, useRequest } from '@umijs/max';
|
|
|
import { Col, Collapse, CollapseProps, Divider, Row, Table } from 'antd';
|
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
|
-import moment from 'moment';
|
|
|
+import dayjs from 'dayjs';
|
|
|
import { useEffect, useState } from 'react';
|
|
|
+// @ts-ignore
|
|
|
import ReactZmage from 'react-zmage';
|
|
|
import { useNavigate } from 'umi';
|
|
|
import styles from './taskDetail.less';
|
|
@@ -54,40 +55,30 @@ function TaskDetail(props: IPropsType) {
|
|
|
{
|
|
|
title: '详情',
|
|
|
dataIndex: 'detail',
|
|
|
+ key: 'key',
|
|
|
render: (value, record) => {
|
|
|
return (
|
|
|
- <div
|
|
|
- key={value.key}
|
|
|
- style={{ display: 'flex', alignItems: 'center' }}
|
|
|
- >
|
|
|
- <div style={{ width: value.image === '' ? '100%' : '200px' }}>
|
|
|
- {value.text}
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <ReactZmage
|
|
|
- controller={{
|
|
|
- // 关闭按钮
|
|
|
- close: true,
|
|
|
- // 缩放按钮
|
|
|
- zoom: false,
|
|
|
- // 下载按钮
|
|
|
- download: false,
|
|
|
- // 翻页按钮
|
|
|
- flip: false,
|
|
|
- // 多页指示
|
|
|
- pagination: false,
|
|
|
- }}
|
|
|
- backdrop="rgba(255,255,255,0.5)"
|
|
|
- style={{ width: '320px', marginLeft: '20px' }}
|
|
|
- src={value.image}
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
+ <div style={{ width: '100%' }}>{value.text}</div>
|
|
|
</div>
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+ const base64ToImageUrl = (base64String: string) => {
|
|
|
+ const byteCharacters = atob(base64String);
|
|
|
+ const byteArrays = [];
|
|
|
+
|
|
|
+ for (let i = 0; i < byteCharacters.length; i++) {
|
|
|
+ byteArrays.push(byteCharacters.charCodeAt(i));
|
|
|
+ }
|
|
|
+
|
|
|
+ const byteArray = new Uint8Array(byteArrays);
|
|
|
+ const blob = new Blob([byteArray], { type: 'image/png' });
|
|
|
+ return URL.createObjectURL(blob);
|
|
|
+ };
|
|
|
+
|
|
|
const { refresh: refreshDetail } = useRequest(getMandateDetail, {
|
|
|
defaultParams: [
|
|
|
{
|
|
@@ -95,7 +86,7 @@ function TaskDetail(props: IPropsType) {
|
|
|
project_id,
|
|
|
},
|
|
|
],
|
|
|
- formatResult: (result) => {
|
|
|
+ formatResult: async (result) => {
|
|
|
const tempMandate: IMandateDetailType = {
|
|
|
...result.data,
|
|
|
Status: MandateStatus.find((item) => item.value === result.data.Status),
|
|
@@ -108,12 +99,12 @@ function TaskDetail(props: IPropsType) {
|
|
|
ResponsiblePeople: userList.find(
|
|
|
(item) => item.ID === result.data.ResponsiblePeople,
|
|
|
),
|
|
|
- CreateTime: moment(result.data.CreateTime).format('YYYY-MM-DD HH:mm'),
|
|
|
+ CreateTime: dayjs(result.data.CreateTime).format('YYYY-MM-DD HH:mm'),
|
|
|
};
|
|
|
const workOrder = result.data.Records.map((item: IWorkOrderType) => {
|
|
|
return {
|
|
|
...item,
|
|
|
- CreateTime: moment(item.CreateTime).format('YYYY-MM-DD HH:mm'),
|
|
|
+ CreateTime: dayjs(item.CreateTime).format('YYYY-MM-DD HH:mm'),
|
|
|
Status: OrderStatus.find((status) => status.value === item.Status),
|
|
|
RecordType: OrderType.find((type) => type.value === item.RecordType),
|
|
|
Responsible: userList.find((user) => user.ID === item.Responsible),
|
|
@@ -135,7 +126,13 @@ function TaskDetail(props: IPropsType) {
|
|
|
<div className={styles.leftInfo}>
|
|
|
<Row style={{ marginBottom: '15px' }}>
|
|
|
<Col className={styles.fontS24} span={12}>
|
|
|
- 工单编号:{record.Id || '-'}
|
|
|
+ {/*// @ts-ignore*/}
|
|
|
+ 工单类型:
|
|
|
+ {record.RecordType === 1
|
|
|
+ ? '工艺'
|
|
|
+ : record.RecordType === 2
|
|
|
+ ? '维修'
|
|
|
+ : '保养'}
|
|
|
</Col>
|
|
|
<Col className={styles.fontS24} span={12}>
|
|
|
时间:{record.CreateTime || '-'}
|
|
@@ -178,6 +175,18 @@ function TaskDetail(props: IPropsType) {
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+ if (
|
|
|
+ tempMandate.MandateClass &&
|
|
|
+ tempMandate.ExtendId &&
|
|
|
+ /* @ts-ignore */
|
|
|
+ tempMandate.MandateClass.value === 7
|
|
|
+ ) {
|
|
|
+ const image = await getDiagnosticDetail(tempMandate.ExtendId);
|
|
|
+ if (image?.event_bg) {
|
|
|
+ tempMandate.img = base64ToImageUrl(image.event_bg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
setMandateDetail(tempMandate);
|
|
|
setHandledWorkOrder(tempOrder);
|
|
|
if (children && children.length) {
|
|
@@ -199,54 +208,18 @@ function TaskDetail(props: IPropsType) {
|
|
|
if (!mandateChild.length) {
|
|
|
return;
|
|
|
}
|
|
|
- const requestList: any = [];
|
|
|
- for (let i = 0; i < mandateChild.length; i++) {
|
|
|
- const child: IMandateChildTypes = mandateChild[i];
|
|
|
- if (child.ExtendId !== 0) {
|
|
|
- requestList.push(getDiagnosticDetail(child.ExtendId));
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- Promise.all(requestList)
|
|
|
- .then((res) => {
|
|
|
- const images: {
|
|
|
- id: number;
|
|
|
- img: string;
|
|
|
- }[] = [];
|
|
|
- for (let i = 0; i < res.length; i++) {
|
|
|
- images.push({
|
|
|
- id: res[i].id,
|
|
|
- img: base64ToImageUrl(res[i].event_bg),
|
|
|
- });
|
|
|
- }
|
|
|
- const dataSource = mandateChild.map((item) => {
|
|
|
- const img = images.find((i) => i.id === item.ExtendId);
|
|
|
- return {
|
|
|
- detail: {
|
|
|
- text: item.Title + item.Content,
|
|
|
- image: img !== undefined ? img.img : '',
|
|
|
- key: item.ExtendId,
|
|
|
- },
|
|
|
- };
|
|
|
- });
|
|
|
- setMandateTable(dataSource);
|
|
|
- })
|
|
|
- .catch((err) => console.log(err));
|
|
|
+ const dataSource = mandateChild.map((item, index) => {
|
|
|
+ return {
|
|
|
+ detail: {
|
|
|
+ text: item.Title + item.Content,
|
|
|
+ key: item.Title + index + item.Content,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ setMandateTable(dataSource);
|
|
|
}, [mandateChild]);
|
|
|
|
|
|
- function base64ToImageUrl(base64String: string) {
|
|
|
- const byteCharacters = atob(base64String);
|
|
|
- const byteArrays = [];
|
|
|
-
|
|
|
- for (let i = 0; i < byteCharacters.length; i++) {
|
|
|
- byteArrays.push(byteCharacters.charCodeAt(i));
|
|
|
- }
|
|
|
-
|
|
|
- const byteArray = new Uint8Array(byteArrays);
|
|
|
- const blob = new Blob([byteArray], { type: 'image/png' });
|
|
|
- return URL.createObjectURL(blob);
|
|
|
- }
|
|
|
-
|
|
|
const goTaskOrder = (orderID: number, orderType: number) => {
|
|
|
navigate(
|
|
|
`/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}`,
|
|
@@ -286,6 +259,33 @@ function TaskDetail(props: IPropsType) {
|
|
|
</Col>
|
|
|
<Col className={styles.fontS24}>{mandateDetail?.Summary}</Col>
|
|
|
</Row>
|
|
|
+ {mandateDetail?.img && (
|
|
|
+ <Row className={styles.infoRow}>
|
|
|
+ <Col className={styles.fontS24} span={4}>
|
|
|
+ 预警图片
|
|
|
+ </Col>
|
|
|
+ <Col className={styles.fontS24}>
|
|
|
+ <ReactZmage
|
|
|
+ controller={{
|
|
|
+ // 关闭按钮
|
|
|
+ close: true,
|
|
|
+ // 缩放按钮
|
|
|
+ zoom: false,
|
|
|
+ // 下载按钮
|
|
|
+ download: false,
|
|
|
+ // 翻页按钮
|
|
|
+ flip: false,
|
|
|
+ // 多页指示
|
|
|
+ pagination: false,
|
|
|
+ }}
|
|
|
+ backdrop="rgba(255,255,255,0.5)"
|
|
|
+ style={{ width: '350px' }}
|
|
|
+ src={mandateDetail?.img}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
<Row>
|
|
|
<Col className={styles.fontS24} span={4}>
|
|
|
任务内容
|
|
@@ -293,6 +293,7 @@ function TaskDetail(props: IPropsType) {
|
|
|
<Col className={styles.fontS24} span={20}>
|
|
|
{/*{mandateDetail?.Detail}*/}
|
|
|
<Table
|
|
|
+ rowKey="key"
|
|
|
columns={columnDef}
|
|
|
dataSource={mandateTable}
|
|
|
pagination={false}
|