feat: 任务详情显示安防拍摄图片

src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -1,5 +1,9 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
+import {
+  IColumn,
+  IMandateChildTypes,
+} from '@/pages/TaskManage/Detail/TaskDetail/taskDetail.types';
 import {
   IMandateDetailType,
   IUserType,
@@ -12,13 +16,15 @@ import {
   OrderStatus,
   OrderType,
 } from '@/pages/TaskManage/constent';
-import { getMandateDetail } from '@/services/TaskManage';
+import { getDiagnosticDetail, getMandateDetail } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
 import { UpOutlined } from '@ant-design/icons';
 import { connect, useRequest } from '@umijs/max';
-import { Col, Collapse, CollapseProps, Divider, Row } from 'antd';
+import { Col, Collapse, CollapseProps, Divider, Row, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
+import ReactZmage from 'react-zmage';
 import { useNavigate } from 'umi';
 import styles from './taskDetail.less';
 
@@ -38,9 +44,49 @@ function TaskDetail(props: IPropsType) {
   const navigate = useNavigate();
 
   const [mandateDetail, setMandateDetail] = useState<IMandateDetailType>();
+  const [mandateChild, setMandateChild] = useState<IMandateChildTypes[]>([]);
   const [handledWorkOrder, setHandledWorkOrder] = useState<
     CollapseProps['items']
   >([]);
+  const [mandateTable, setMandateTable] = useState<IColumn[]>([]);
+
+  const columnDef: ColumnsType<IColumn> = [
+    {
+      title: '详情',
+      dataIndex: 'detail',
+      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>
+        );
+      },
+    },
+  ];
 
   const { refresh: refreshDetail } = useRequest(getMandateDetail, {
     defaultParams: [
@@ -73,6 +119,8 @@ function TaskDetail(props: IPropsType) {
           Responsible: userList.find((user) => user.ID === item.Responsible),
         };
       });
+      const children = result.data.MandateChild;
+
       const tempOrder = [
         {
           key: '1',
@@ -97,11 +145,16 @@ function TaskDetail(props: IPropsType) {
                     <Col className={styles.fontS24} span={12}>
                       工单状态：
                       <span style={{ color: '#5697e4' }}>
-                        {record.Status?.label}
+                        {typeof record.Status === 'number'
+                          ? '-'
+                          : record.Status.label}
                       </span>
                     </Col>
                     <Col className={styles.fontS24} span={12}>
-                      工单负责人：{record.Responsible?.CName}
+                      工单负责人：
+                      {typeof record.Responsible === 'number'
+                        ? '-'
+                        : record.Responsible.CName}
                     </Col>
                   </Row>
                 </div>
@@ -110,6 +163,10 @@ function TaskDetail(props: IPropsType) {
                   className={styles.rightButton}
                   style={{ color: '#5697e4' }}
                   onClick={() => {
+                    if (typeof record.RecordType === 'number') {
+                      return;
+                    }
+                    // @ts-ignore
                     goTaskOrder(record.Id, record.RecordType?.value);
                   }}
                 >
@@ -123,6 +180,9 @@ function TaskDetail(props: IPropsType) {
 
       setMandateDetail(tempMandate);
       setHandledWorkOrder(tempOrder);
+      if (children && children.length) {
+        setMandateChild(children);
+      }
     },
   });
 
@@ -135,6 +195,58 @@ function TaskDetail(props: IPropsType) {
     }
   }, []);
 
+  useEffect(() => {
+    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));
+  }, [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}`,
@@ -179,8 +291,12 @@ function TaskDetail(props: IPropsType) {
               任务内容
             </Col>
             <Col className={styles.fontS24} span={20}>
-              {mandateDetail?.Detail}
-              {/*<Table />*/}
+              {/*{mandateDetail?.Detail}*/}
+              <Table
+                columns={columnDef}
+                dataSource={mandateTable}
+                pagination={false}
+              />
             </Col>
           </Row>
         </div>
@@ -202,8 +318,14 @@ function TaskDetail(props: IPropsType) {
   );
 }
 
-export default connect(({ taskUser }: any): { userList: IUserType[] } => {
-  return {
-    userList: taskUser.userList,
-  };
-})(TaskDetail);
+export default connect(
+  ({
+    taskUser,
+  }: any): {
+    userList: IUserType[];
+  } => {
+    return {
+      userList: taskUser.userList,
+    };
+  },
+)(TaskDetail);

src/pages/TaskManage/Detail/TaskDetail/taskDetail.types.ts

@@ -0,0 +1,15 @@
+export interface IMandateChildTypes {
+  Content: string;
+  CreateTime: string;
+  ExtendId: number;
+  Id: number;
+  MandateClass: number;
+  MandateId: number;
+  ProjectId: number;
+  Status: number;
+  Title: string;
+}
+
+export interface IColumn {
+  detail: {text: string, image: string, key: number};
+}

src/pages/TaskManage/Detail/TaskList/TaskList.tsx

@@ -277,7 +277,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
             justify="space-between"
             style={{
               paddingBottom: '10px',
-              borderBottom: '1px solid rgba(0,0,0,10%)',
+              borderBottom: '1px solid #D5D5D5',
             }}
           >
             <Col className={styles.fontS24}>

src/services/TaskManage.js

@@ -116,3 +116,8 @@ export async function getCraftRecordList(data) {
     'GET',
   );
 }
+
+export async function getDiagnosticDetail(detailId) {
+  const res = await request(`/api/v1/dumu/detail/${detailId}`);
+  return res.data
+}