feat: 增加我的任务和工单详情页面

src/pages/Center/MyTask/Detail/TaskDetail.js

@@ -0,0 +1,378 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import {
+  MandateClass,
+  MandateStatus,
+  MandateType,
+  OrderStatus,
+  OrderType,
+} from '@/pages/TaskManage/constent';
+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, Divider, Row, Table } from 'antd';
+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';
+
+function TaskDetail(props) {
+  const { userList, dispatch } = props;
+
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const project_id = Number(queryParams.get('project_id'));
+  const mandate_id = Number(queryParams.get('mandate_id'));
+
+  const navigate = useNavigate();
+
+  const [mandateDetail, setMandateDetail] = useState();
+  const [mandateChild, setMandateChild] = useState([]);
+  const [handledWorkOrder, setHandledWorkOrder] = useState([]);
+  const [mandateTable, setMandateTable] = useState([]);
+
+  const columnDef = [
+    {
+      title: '详情',
+      dataIndex: 'detail',
+      key: 'key',
+      render: (value, record) => {
+        return (
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div style={{ width: '100%' }}>{value.text}</div>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const base64ToImageUrl = (base64String) => {
+    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: [
+      {
+        mandate_id,
+        project_id,
+      },
+    ],
+    formatResult: async (result) => {
+      const tempMandate = {
+        ...result.data,
+        Status: MandateStatus.find((item) => item.value === result.data.Status),
+        MandateClass: MandateClass.find(
+          (item) => item.value === result.data.MandateClass,
+        ),
+        MandateType: MandateType.find(
+          (item) => item.value === result.data.MandateType,
+        ),
+        ResponsiblePeople: userList.find(
+          (item) => item.ID === result.data.ResponsiblePeople,
+        ),
+        CreateTime: dayjs(result.data.CreateTime).format('YYYY-MM-DD HH:mm'),
+      };
+      const workOrder = result.data.Records.map((item) => {
+        return {
+          ...item,
+          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),
+        };
+      });
+      const children = result.data.MandateChild;
+
+      const tempOrder = [
+        {
+          key: '1',
+          label: (
+            <span style={{ color: '#5697e4' }}>
+              关联工单({workOrder.length})
+            </span>
+          ),
+          children: workOrder.map((record) => {
+            return (
+              <div key={record.Id} className={styles.workOrderCard}>
+                <div className={styles.leftInfo}>
+                  <Row style={{ marginBottom: '15px' }}>
+                    <Col className={styles.fontS24} span={12}>
+                      <>
+                        工单类型：
+                        {record.RecordType?.label?.replace('工单', '')}
+                      </>
+                    </Col>
+                    <Col className={styles.fontS24} span={12}>
+                      时间：{record.CreateTime || '-'}
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col className={styles.fontS24} span={12}>
+                      工单状态：
+                      <span style={{ color: '#5697e4' }}>
+                        {typeof record.Status === 'number'
+                          ? '-'
+                          : record.Status?.label}
+                      </span>
+                    </Col>
+                    <Col className={styles.fontS24} span={12}>
+                      工单负责人：
+                      {typeof record.Responsible === 'number'
+                        ? '-'
+                        : record.Responsible?.CName}
+                    </Col>
+                  </Row>
+                </div>
+                <Divider type="vertical" style={{ height: '40px' }} />
+                <div
+                  className={styles.rightButton}
+                  style={{ color: '#5697e4' }}
+                  onClick={() => {
+                    if (typeof record.RecordType === 'number') {
+                      return;
+                    }
+                    // @ts-ignore
+                    goTaskOrder(
+                      record.Id,
+                      record.RecordType?.value,
+                      tempMandate?.MandateClass.value,
+                    );
+                  }}
+                >
+                  查看工单
+                </div>
+              </div>
+            );
+          }),
+        },
+      ];
+
+      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) {
+        setMandateChild(children);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (userList.length === 0) {
+      dispatch({
+        type: 'taskUser/fetchUserList',
+        payload: { project_id },
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mandateChild.length) {
+      return;
+    }
+
+    if (mandateDetail?.MandateClass?.value === 2) {
+      const dataSource = [];
+      dataSource.push({
+        detail: {
+          text: mandateChild[0].Title,
+          key: 'title',
+        },
+      });
+      dataSource.push(
+        ...Object.entries(JSON.parse(mandateChild[0].Content)).map((item) => {
+          const [key, value] = item;
+          return {
+            detail: {
+              text:
+                value['item_alias'] +
+                ' 现有数值：' +
+                value['old_value'] +
+                ' 建议调整数值' +
+                value['new_value'],
+              key: key,
+            },
+          };
+        }),
+      );
+      setMandateTable(dataSource);
+      return;
+    }
+
+    const dataSource = mandateChild.map((item, index) => {
+      if (item.MandateClass === 2) {
+      }
+
+      return {
+        detail: {
+          text: item.Title + item.Content,
+          key: item.Title + index + item.Content,
+        },
+      };
+    });
+    setMandateTable(dataSource);
+  }, [mandateChild]);
+
+  const goTaskOrder = (orderID, orderType, mandateClass) => {
+    navigate(
+      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
+    );
+  };
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle returnable>任务详情</PageTitle>
+      <div className={`${styles.cardContainer} card-box`}>
+        <div className={styles.normalInfo}>
+          <Row className={styles.infoRow} justify="space-between">
+            <Col className={styles.fontS24}>
+              时间：{mandateDetail?.CreateTime}
+            </Col>
+            {/*// @ts-ignore*/}
+            <Col className={styles.fontS24}>
+              {/*//@ts-ignore*/}
+              任务类别：{mandateDetail?.MandateClass?.label}
+            </Col>
+          </Row>
+          <Row justify="space-between">
+            <Col className={styles.fontS24}>
+              {/*//@ts-ignore*/}
+              任务状态：{mandateDetail?.Status?.label}
+            </Col>
+            <Col className={styles.fontS24}>
+              {/*// @ts-ignore*/}
+              任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
+            </Col>
+          </Row>
+        </div>
+        <div className={styles.detailInfo}>
+          <Row className={styles.infoRow}>
+            <Col className={styles.fontS24} span={4}>
+              任务总结
+            </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>
+          )}
+
+          {mandateDetail?.Files.length > 0 && (
+            <Row className={styles.infoRow}>
+              <Col className={styles.fontS24} span={4}>
+                截图
+              </Col>
+              <Col className={styles.fontS24}>
+                <ReactZmage
+                  controller={{
+                    // 关闭按钮
+                    close: true,
+                    // 缩放按钮
+                    zoom: false,
+                    // 下载按钮
+                    download: false,
+                    // 翻页按钮
+                    flip: true,
+                    // 多页指示
+                    pagination: true,
+                  }}
+                  backdrop="rgba(255,255,255,0.5)"
+                  style={{ width: '350px' }}
+                  src={mandateDetail?.Files[0].url}
+                  set={mandateDetail?.Files.map((item) => {
+                    if (item) {
+                      return {
+                        src: item.url,
+                      };
+                    }
+                    return {};
+                  })}
+                />
+              </Col>
+            </Row>
+          )}
+
+          <Row>
+            <Col className={styles.fontS24} span={4}>
+              任务内容
+            </Col>
+            <Col className={styles.fontS24} span={20}>
+              {/*{mandateDetail?.Detail}*/}
+              <Table
+                rowKey="key"
+                columns={columnDef}
+                dataSource={mandateTable}
+                pagination={false}
+              />
+            </Col>
+          </Row>
+        </div>
+        <div className={styles.relatedOrder}>
+          <Collapse
+            className={styles.collapseLabel}
+            ghost
+            expandIcon={({ isActive }) => (
+              <UpOutlined
+                style={{ color: '#5697e4' }}
+                rotate={isActive ? 180 : 0}
+              />
+            )}
+            items={handledWorkOrder}
+          />
+        </div>
+      </div>
+    </PageContent>
+  );
+}
+
+export default connect(({ taskUser }) => {
+  return {
+    userList: taskUser.userList,
+  };
+})(TaskDetail);

src/pages/Center/MyTask/Detail/WorkOrderDetail.js

@@ -0,0 +1,431 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import SubTitle from '@/pages/TaskManage/components/SubTitle';
+import { OrderStatus, OrderType } from '@/pages/TaskManage/constent';
+import {
+  getCraftRecordList,
+  getMaintainRecordList,
+  getPatrolMandateRecord,
+  getRepairRecordList,
+  getWorkOrderFlow,
+  queryReagentDetail,
+} from '@/services/TaskManage';
+import { useLocation } from '@@/exports';
+import { connect, useRequest } from '@umijs/max';
+import { Col, Row, Steps } from 'antd';
+import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
+import 'react-photo-view/dist/react-photo-view.css';
+import styles from './workOrderDetail.less';
+
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+
+const WorkOrderDetail = (props) => {
+  const { userList, dispatch } = props;
+
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const project_id = Number(queryParams.get('project_id'));
+  const order_id = Number(queryParams.get('order_id'));
+  const order_type = Number(queryParams.get('order_type'));
+  // const mandate_class = Number(queryParams.get('mandate_class'));
+
+  const [orderInfo, setOrderInfo] = useState();
+  const [additionalInfo, setAdditionalInfo] = useState({});
+  const [stepInfo, setStepInfo] = useState();
+
+  // 根据type请求详情
+  const { run: getMaintainDetail } = useRequest(getMaintainRecordList, {
+    manual: true,
+    formatResult: (result) => {
+      const temp = result.data.list[0];
+      const tempDetail = {
+        CreateTime: temp?.CreateTime
+          ? dayjs(temp?.CreateTime).format('YYYY-MM-DD HH:mm')
+          : '-',
+        PlanTime: temp?.PlanTime
+          ? dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm')
+          : '-',
+        RepairTime: temp?.RepairTime
+          ? dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm')
+          : '-',
+        Reason: temp.Note,
+        Lubrication: temp.Lubrication,
+        Fasten: temp.Fasten,
+        RustRemoval: temp.RustRemoval,
+        AntiCorrosive: temp.Anticorrosive,
+        Clean: temp.Clean,
+        Check: temp.Check,
+        Repairman:
+          userList.find((item) => item.ID === temp.MaintenancePerson) || '-',
+        DispatchMan:
+          userList.find(
+            (item) => (item.ID = temp.Operators[0]?.Operator?.ID),
+          ) || '-',
+        OrderStatus:
+          OrderStatus.find((item) => item.value === temp.Status) || '-',
+        MandateImages:
+          temp?.mandate_images?.length > 0
+            ? temp.mandate_images.map((item) => {
+                if (item.type === 2) {
+                  return {
+                    src: item.val,
+                  };
+                }
+                return {
+                  src: `data:image/png;base64,${item.val}`,
+                };
+              })
+            : [],
+      };
+      setOrderInfo(tempDetail);
+    },
+  });
+
+  // 根据type请求详情
+  const { run: getRepairDetail } = useRequest(getRepairRecordList, {
+    manual: true,
+    formatResult: (result) => {
+      const temp = result.data.list[0];
+      if (temp === undefined) {
+        return;
+      }
+      const tempDetail = {
+        CreateTime: temp.CreateTime
+          ? dayjs(temp.CreateTime).format('YYYY-MM-DD HH:mm')
+          : '-',
+        PlanTime: temp.PlanTime
+          ? dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm')
+          : '-',
+        RepairTime: temp.RepairTime
+          ? dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm')
+          : '-',
+        Reason: temp.Reason,
+        Repairman: userList.find((item) => item.ID === temp.Repairman) || '-',
+        DispatchMan:
+          userList.find((item) => item.ID === temp.operator_id) || '-',
+        OrderStatus:
+          OrderStatus.find((item) => item.value === temp.AcceptanceStatus) ||
+          '-',
+        MandateImages:
+          temp?.mandate_images?.length > 0
+            ? temp.mandate_images.map((item) => {
+                console.log(item);
+                if (item.type === 2) {
+                  return {
+                    src: item.val,
+                  };
+                }
+                return {
+                  src: `data:image/png;base64,${item.val}`,
+                };
+              })
+            : [],
+      };
+      setOrderInfo(tempDetail);
+    },
+  });
+
+  // 根据type请求详情
+  const { run: getCraftDetail } = useRequest(getCraftRecordList, {
+    manual: true,
+    formatResult: (result) => {
+      const temp = result.data.list[0];
+      const tempDetail = {
+        CreateTime: dayjs(temp.start_time).format('YYYY-MM-DD HH:mm'),
+        PlanTime: dayjs(temp.plan_end_time).format('YYYY-MM-DD HH:mm'),
+        RepairTime:
+          (temp.actual_end_time &&
+            dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')) ||
+          '-',
+        Reason: temp.detail,
+        Repairman: userList.find((item) => item.ID === temp.checker_id) || '-',
+        DispatchMan:
+          userList.find((item) => item.ID === temp.operator_id) || '-',
+        OrderStatus:
+          OrderStatus.find((item) => item.value === temp.status) || '-',
+        MandateImages:
+          temp?.mandate_images?.length > 0
+            ? temp.mandate_images.map((item) => {
+                console.log(item);
+                if (item.type === 2) {
+                  return {
+                    src: item.val,
+                  };
+                }
+                return {
+                  src: `data:image/png;base64,${item.val}`,
+                };
+              })
+            : [],
+      };
+
+      setOrderInfo(tempDetail);
+    },
+  });
+
+  const { run: getDosingOrder } = useRequest(queryReagentDetail, {
+    manual: true,
+    formatResult: (result) => {
+      const temp = {
+        ...result,
+        CreateTime: result?.start_time?.Valid
+          ? dayjs(result?.start_time?.Time).format('YYYY-MM-DD HH:mm')
+          : '-',
+        PlanTime: result?.plan_end_time?.Valid
+          ? dayjs(result.plan_end_time.Time).format('YYYY-MM-DD HH:mm')
+          : '-',
+        RepairTime: result?.actual_end_time?.Valid
+          ? dayjs(result.actual_end_time.Time).format('YYYY-MM-DD HH:mm')
+          : '-',
+        Reason: result.note,
+        Repairman: '-',
+        DispatchMan:
+          userList.find((user) => user.ID === result.operator_id) || '-',
+        OrderStatus:
+          OrderStatus.find((status) => status.value === result.status) || '-',
+      };
+      setOrderInfo(temp);
+      setAdditionalInfo(temp);
+    },
+  });
+
+  const { run: getPatrolOrderList } = useRequest(getPatrolMandateRecord, {
+    manual: true,
+    formatResult: (result) => {
+      if (result?.data?.list) {
+        const temp = result.data.list[0];
+        const tempDetail = {
+          ...temp,
+          CreateTime: temp?.CreatedTime
+            ? dayjs(temp.CreatedTime).format('YYYY-MM-DD HH:mm')
+            : '-',
+          PlanTime: temp.plan_end_time
+            ? dayjs(temp.plan_end_time).format('YYYY-MM-DD HH:mm')
+            : '-',
+          RepairTime: temp?.actual_end_time
+            ? dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')
+            : '-',
+          Reason: temp.detail,
+          Repairman: '-',
+          DispatchMan:
+            userList.find((user) => user.ID === temp.operator_id) || '-',
+          OrderStatus:
+            OrderStatus.find((status) => status.value === temp.status) || '-',
+        };
+        setOrderInfo(tempDetail);
+      }
+    },
+  });
+
+  // 获取工单流程信息
+  useRequest(getWorkOrderFlow, {
+    // manual: true,
+    defaultParams: [{ work_type: order_type, work_id: order_id }],
+    formatResult(res) {
+      if (res && res?.length) {
+        setStepInfo(res);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (userList.length === 0) {
+      dispatch({
+        type: 'taskUser/fetchUserList',
+        payload: { project_id },
+      });
+    }
+    switch (order_type) {
+      // 工艺
+      case 1:
+      case 6:
+        getCraftDetail({ project_id, work_id: order_id });
+        break;
+      // 维修
+      case 2:
+        getRepairDetail({ project_id, id: order_id });
+        break;
+      // 保养
+      case 3:
+        getMaintainDetail({ project_id, id: order_id });
+        break;
+      // 巡检
+      case 4:
+        getPatrolOrderList({ project_id, id: order_id });
+        break;
+      // 加药
+      case 5:
+        getDosingOrder({ id: order_id });
+        break;
+    }
+  }, []);
+
+  const renderImg = () => {
+    return (
+      <PhotoProvider>
+        <Col className={styles.fontS28} span={18}>
+          {orderInfo?.MandateImages?.map((photo, index) => (
+            <PhotoView key={index} src={photo.src}>
+              <img
+                style={{
+                  maxWidth: `${Math.floor(
+                    100 / (orderInfo?.MandateImages?.length || 1),
+                  )}%`,
+                }}
+                src={photo.src}
+                alt=""
+              />
+            </PhotoView>
+          ))}
+        </Col>
+      </PhotoProvider>
+    );
+  };
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle returnable>工单详情</PageTitle>
+      <div className={styles.selfCardBox}>
+        <div className={styles.orderInfo}>
+          <SubTitle
+            title="工单信息"
+            // @ts-ignore
+            showStatus={orderInfo?.OrderStatus.value === 2}
+            radius
+          />
+          <div style={{ padding: '15px', letterSpacing: '1.5px' }}>
+            <Row className={styles.rowMargin}>
+              <Col className={styles.fontS28} span={15}>
+                {/* @ts-ignore */}
+                工单类型：
+                {OrderType.find((item) => item.value === order_type)?.label ||
+                  '-'}
+              </Col>
+              <Col className={styles.fontS28} span={9}>
+                {/* @ts-ignore */}
+                工单负责人：{orderInfo?.Repairman?.CName || '-'}
+              </Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col className={styles.fontS28} span={15}>
+                {/*  @ts-ignore */}
+                工单状态：{orderInfo?.OrderStatus?.label}
+              </Col>
+              <Col className={styles.fontS28} span={9}>
+                {/* @ts-ignore */}
+                派单人员：{orderInfo?.DispatchMan?.CName || '-'}
+              </Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col className={styles.fontS28}>
+                派单时间：{orderInfo?.CreateTime || '-'}
+              </Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col className={styles.fontS28}>
+                计划完成时间：{orderInfo?.PlanTime || '-'}
+              </Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col className={styles.fontS28}>
+                实际完成时间：{orderInfo?.RepairTime || '-'}
+              </Col>
+            </Row>
+            <Row>
+              <Col className={styles.fontS28}>工单详情：</Col>
+              <Col className={styles.fontS28} span={18}>
+                {orderInfo?.Reason}
+              </Col>
+            </Row>
+
+            {/* @ts-ignore */}
+            {orderInfo?.MandateImages?.length > 0 && (
+              <Row className={styles.rowMarginTop}>
+                <Col className={styles.fontS28}>任务图片：</Col>
+                {renderImg()}
+              </Row>
+            )}
+          </div>
+        </div>
+        {order_type === 3 && (
+          <div>
+            <SubTitle title="维修内容" />
+            <div style={{ padding: '15px' }}>
+              <Row className={styles.rowMargin} justify={'space-around'}>
+                <Col className={styles.fontS28} span={8}>
+                  是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
+                </Col>
+                <Col className={styles.fontS28} span={8}>
+                  是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
+                </Col>
+                <Col className={styles.fontS28} span={8}>
+                  是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
+                </Col>
+              </Row>
+              <Row justify={'space-around'}>
+                <Col className={styles.fontS28} span={8}>
+                  是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
+                </Col>
+                <Col className={styles.fontS28} span={8}>
+                  是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
+                </Col>
+                <Col className={styles.fontS28} span={8}>
+                  是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
+                </Col>
+              </Row>
+            </div>
+          </div>
+        )}
+
+        {order_type === 5 && (
+          <div>
+            <SubTitle title="加药详情" />
+            <div style={{ padding: '15px' }}>
+              <Row>
+                <Col className={styles.fontS28} span={8}>
+                  药剂名称：{additionalInfo?.name || '-'}
+                </Col>
+                <Col className={styles.fontS28} span={8}>
+                  加药量：{additionalInfo?.dosage || '-'}升
+                </Col>
+                <Col className={styles.fontS28} span={8}>
+                  浓度：{additionalInfo?.concentration || '-'}
+                </Col>
+              </Row>
+            </div>
+          </div>
+        )}
+        {/* @ts-ignore */}
+        {stepInfo?.length > 0 && (
+          <div>
+            <SubTitle title="工单流程" />
+            <div style={{ padding: '15px 20px' }}>
+              <Steps
+                direction="vertical"
+                current={stepInfo?.length ? stepInfo.length - 1 : 0}
+                progressDot
+                items={stepInfo?.map((item) => {
+                  return {
+                    title: (
+                      <span className={styles.fontS28}>{item.content}</span>
+                    ),
+                    description: (
+                      <span className={styles.fontS24}>{item.time}</span>
+                    ),
+                  };
+                })}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </PageContent>
+  );
+};
+
+export default connect(({ taskUser }) => {
+  return {
+    userList: taskUser.userList,
+  };
+})(WorkOrderDetail);

src/pages/Center/MyTask/Detail/taskDetail.less

@@ -0,0 +1,125 @@
+.cardContainer {
+  margin-top: 15px;
+  padding: 20px 20px;
+  background-color: white;
+
+  .normalInfo {
+    padding: 25px 15px;
+    background-color: #fdf2df;
+  }
+
+  .infoRow {
+    margin-bottom: 25px;
+  }
+
+  .detailInfo {
+    padding: 25px 15px;
+    border-bottom: 1px solid rgba(0, 0, 0, 10%);
+  }
+
+  .relatedOrder {
+    padding: 0 15px;
+    margin-top: 15px;
+
+    .collapseLabel {
+      width: 100%;
+
+      .ant-collapse-arrow {
+        font-size: 24px;
+      }
+
+      :global {
+        .ant-collapse-item {
+          margin-bottom: 0;
+        }
+
+        .ant-collapse-header {
+          justify-content: center;
+          flex-direction: row-reverse;
+          align-items: center;
+          margin-top: 10px;
+
+          .ant-collapse-header-text {
+            font-size: 24px;
+            flex: unset;
+            margin-inline-end: unset;
+          }
+
+          .ant-collapse-arrow {
+            font-size: 24px;
+          }
+        }
+      }
+
+      .workOrderCard {
+        margin-bottom: 20px;
+        padding: 20px 10px;
+        border-radius: 8px;
+        background-color: #e5effa;
+        display: flex;
+        align-items: center;
+
+        .leftInfo {
+          width: 80%;
+        }
+
+        .rightButton {
+          flex: auto;
+          color: #5697e4;
+          font-size: 24px;
+          text-align: center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  .workOrderCard {
+    margin-bottom: 25px;
+    padding: 20px 10px;
+    border-radius: 8px;
+    background-color: #e5effa;
+    display: flex;
+    align-items: center;
+
+    .leftInfo {
+      width: 80%;
+    }
+
+    .rightButton {
+      flex: auto;
+      color: #5697e4;
+      font-size: 24px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.fontS28 {
+  font-size: 28px;
+}
+
+.fontS24 {
+  font-size: 24px;
+}
+
+.fontS22 {
+  font-size: 22px;
+}
+
+.fontS20 {
+  font-size: 20px;
+}
+
+.fontS18 {
+  font-size: 18px;
+}
+
+.fontS16 {
+  font-size: 16px;
+}

src/pages/Center/MyTask/Detail/workOrderDetail.less

@@ -0,0 +1,47 @@
+.selfCardBox {
+  margin-top: 15px;
+  border-radius: 8px;
+  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 30%);
+  background-color: white;
+}
+
+.orderInfo {
+  border: 0;
+  margin: 0;
+}
+
+.rowMargin {
+  margin-bottom: 30px;
+}
+
+.rowMarginTop {
+  margin-top: 30px;
+}
+
+.fontS28 {
+  font-size: 28px;
+}
+
+.fontS26 {
+  font-size: 26px;
+}
+
+.fontS24 {
+  font-size: 24px;
+}
+
+.fontS22 {
+  font-size: 22px;
+}
+
+.fontS20 {
+  font-size: 20px;
+}
+
+.fontS18 {
+  font-size: 18px;
+}
+
+.fontS16 {
+  font-size: 16px;
+}

src/pages/Center/MyTask/List/TaskList.js

@@ -127,7 +127,7 @@ const MyTaskList = (props) => {
 
   const goMyTaskDetail = (mandate) => {
     navigate(
-      `/task-manage/list/detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
+      `/center/my-task/task-detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
     );
   };
 
@@ -136,7 +136,7 @@ const MyTaskList = (props) => {
       return;
     }
     navigate(
-      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
+      `/center/my-task/work-order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
     );
   };
 

src/pages/Center/MyTask/List/WorkOrderList.js

@@ -37,7 +37,7 @@ const WorkOrderList = (props) => {
   const goWorkOrderDetail = (order) => {
     const orderID = order.id || order.Id;
     navigate(
-      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${order_type}`,
+      `/center/my-task/work-order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${order_type}`,
     );
   };