src/pages/TaskManage/components/MandateDetail.js

@@ -19,6 +19,7 @@ import {
 } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
+import ReactZmage from 'react-zmage';
 import {
   MandateClass,
   MandateStatus,
@@ -29,6 +30,7 @@ import {
 } from '../constent';
 import styles from './MandateDetail.less';
 
+import { getDiagnosticDetail } from '@/services/TaskManage';
 import zhCN from 'antd/es/locale/zh_CN';
 
 const MandateDetail = (props) => {
@@ -82,7 +84,7 @@ const MandateDetail = (props) => {
 
   const { run: getMandateInfo, loading } = useRequest(queryMandate, {
     manual: true,
-    formatResult: (result) => {
+    formatResult: async (result) => {
       if (result?.data) {
         const tempMandate = {
           ...result.data,
@@ -111,6 +113,15 @@ const MandateDetail = (props) => {
             Responsible: userList.find((user) => user.ID === item.Responsible),
           };
         });
+        if (
+          tempMandate.MandateClass &&
+          tempMandate.ExtendId &&
+          /* @ts-ignore */
+          tempMandate.MandateClass.value === 7
+        ) {
+          const image = await getDiagnosticDetail(tempMandate.ExtendId);
+          tempMandate.img = image.path;
+        }
         setMandateDetail(tempMandate);
         setMandateChild(tempMandate.MandateChild);
         setHandledWorkOrder(workOrder);
@@ -230,6 +241,76 @@ const MandateDetail = (props) => {
               </Col>
             </Row>
           </div>
+          {mandateDetail?.img && (
+            <Row style={{ padding: '0 0.2rem' }} justify="start">
+              <Col
+                className={styles.fontS30}
+                span={4}
+                style={{ fontWeight: 600 }}
+              >
+                预警图片
+              </Col>
+              <Col className={styles.fontS30}>
+                <ReactZmage
+                  controller={{
+                    // 关闭按钮
+                    close: true,
+                    // 缩放按钮
+                    zoom: false,
+                    // 下载按钮
+                    download: false,
+                    // 翻页按钮
+                    flip: false,
+                    // 多页指示
+                    pagination: false,
+                  }}
+                  backdrop="rgba(255,255,255,0.5)"
+                  style={{ width: '3.5rem' }}
+                  src={mandateDetail?.img}
+                />
+              </Col>
+            </Row>
+          )}
+
+          {mandateDetail?.Files !== undefined &&
+            mandateDetail?.Files?.length > 0 && (
+              <Row style={{ padding: '0 0.2rem' }} justify="start">
+                <Col
+                  className={styles.fontS30}
+                  span={4}
+                  style={{ fontWeight: 600 }}
+                >
+                  截图
+                </Col>
+                <Col className={styles.fontS30}>
+                  <ReactZmage
+                    controller={{
+                      // 关闭按钮
+                      close: true,
+                      // 缩放按钮
+                      zoom: false,
+                      // 下载按钮
+                      download: false,
+                      // 翻页按钮
+                      flip: true,
+                      // 多页指示
+                      pagination: true,
+                    }}
+                    backdrop="rgba(255,255,255,0.5)"
+                    style={{ width: '3.5rem' }}
+                    src={mandateDetail?.Files[0].url}
+                    set={mandateDetail?.Files.map((item) => {
+                      if (item) {
+                        return {
+                          src: item.url,
+                        };
+                      }
+                      return {};
+                    })}
+                  />
+                </Col>
+              </Row>
+            )}
           <Row style={{ padding: '0 0.2rem' }} justify="space-between">
             <Col className={styles.fontS32} style={{ fontWeight: '600' }}>
               任务内容：