Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

src/global.less

@@ -74,6 +74,7 @@ a {
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  background-color: white;
 }
 
 // Remove input styling for IE
@@ -187,7 +188,9 @@ input[type='reset'] {
   padding-top: 0;
   padding-bottom: 0;
 }
-.ant-table,
+.ant-table{
+  background-color: white!important;
+}
 .ant-table-cell,
 .ant-table-placeholder {
   background: transparent !important;
@@ -197,6 +200,7 @@ input[type='reset'] {
 .ant-table-wrapper table {
   border-radius: 0 !important;
 }
+
 .ant-table-container {
   border: none !important;
 }

src/pages/DeviceManager/index.js

@@ -21,7 +21,7 @@ const spareIcon = require('@/assets/deviceManager/spareIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
   const [defaultActiveKey, setDefaultActiveKey] = useState(
-    localStorage.deviceTab || "1"
+    localStorage.deviceTab || '1',
   );
 
   const onChange = (tab) => {
@@ -165,7 +165,9 @@ const Device = ({ projectId }) => {
                   }`}
                   onClick={() => handleItemClick(cur.Code)}
                 >
-                  <span style={{ marginRight: '166px' }}> {cur.Code} </span>
+                  <span style={{ width: '30%', textAlign: 'left' }}>
+                    {cur.Code}
+                  </span>
                   <span> {cur.Name} </span>
                 </List.Item>
               )}
@@ -262,7 +264,7 @@ const Device = ({ projectId }) => {
         <img className={styles.img} src={deviceIcon} />
         <div>
           <div className={styles.num}>{allData?.total}</div>
-          <div className={styles.text}>设备总数</div>
+          <div className={styles.text}>设备总数（个）</div>
         </div>
       </div>
       <Space className={styles.btns} size={28}>

src/pages/DeviceManager/index.less

@@ -47,7 +47,6 @@
     cursor: pointer;
     background: url('@/assets/iconFundFilled.png') no-repeat;
   }
-  
 }
 
 .lineContent {
@@ -70,18 +69,18 @@
   .btns {
     margin: 34px 0;
     .btn {
-      width: 147px;
-      height: 59px;
-      background: #e8e8e8;
-      border-radius: 10px;
+      width: 148px;
+      height: 60px;
       font-size: 30px;
       color: #4a4a4a;
-      line-height: 59px;
+      line-height: 60px;
       text-align: center;
+      background-image: url('@/assets/deviceManager/deviceBtn1.png');
+      background-size: 100% 100%;
     }
     .active {
       color: #4a90e2;
-      background: #cae2ff;
+      background-image: url('@/assets/deviceManager/deviceBtn2.png');
     }
   }
   .itemText {
@@ -134,4 +133,4 @@
 .main {
   padding: 20px;
   margin-top: 40px;
-}
+}

src/pages/MessageCenter/index.js

@@ -34,7 +34,7 @@ const MessageCenter = () => {
 
   const renderItem = (item) => {
     const time = item?.CreatedOn
-      ? dayjs(item.CreatedOn).format('YYYY-MM-DD hh:mm')
+      ? dayjs(item.CreatedOn).format('YYYY-MM-DD HH:mm')
       : '';
     return (
       <div className={`card-box ${styles.itemContent}`}>

src/pages/Smart/components/SimulateDetail.less

@@ -117,6 +117,12 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
+  :global {
+    .ant-select .ant-select-arrow {
+      font-size: 24px;
+      color: black;
+    }
+  }
 }
 
 .dateTabs {

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,11 +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, 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';
 
@@ -36,9 +44,49 @@ function TaskDetail(props: IPropsType) {
   const navigate = useNavigate();
 
   const [mandateDetail, setMandateDetail] = useState<IMandateDetailType>();
-  const [handledWorkOrder, setHandledWorkOrder] = useState<IWorkOrderType[]>(
-    [],
-  );
+  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: [
@@ -60,20 +108,81 @@ function TaskDetail(props: IPropsType) {
         ResponsiblePeople: userList.find(
           (item) => item.ID === result.data.ResponsiblePeople,
         ),
+        CreateTime: moment(result.data.CreateTime).format('YYYY-MM-DD HH:mm'),
       };
-      const workOrder = result.data.Records;
-      const tempOrder = workOrder.map((record: IWorkOrderType) => {
+      const workOrder = result.data.Records.map((item: IWorkOrderType) => {
         return {
-          ...record,
-          RecordType: OrderType.find(
-            (item) => item.value === record.RecordType,
-          ),
-          Status: OrderStatus.find((item) => item.value === record.Status),
-          Responsible: userList.find((item) => item.ID === record.Responsible),
+          ...item,
+          CreateTime: moment(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: IWorkOrderType) => {
+            return (
+              <div key={record.Id} className={styles.workOrderCard}>
+                <div className={styles.leftInfo}>
+                  <Row style={{ marginBottom: '15px' }}>
+                    <Col className={styles.fontS24} span={12}>
+                      工单编号：{record.Id || '-'}
+                    </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);
+                  }}
+                >
+                  查看工单
+                </div>
+              </div>
+            );
+          }),
+        },
+      ];
+
       setMandateDetail(tempMandate);
       setHandledWorkOrder(tempOrder);
+      if (children && children.length) {
+        setMandateChild(children);
+      }
     },
   });
 
@@ -86,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}`,
@@ -93,26 +254,26 @@ function TaskDetail(props: IPropsType) {
   };
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <PageTitle returnable>任务详情</PageTitle>
       <div className={`${styles.cardContainer} card-box`}>
         <div className={styles.normalInfo}>
-          <Row className={styles.infoRow}>
-            <Col className={styles.fontS24} span={16}>
+          <Row className={styles.infoRow} justify="space-between">
+            <Col className={styles.fontS24}>
               时间：{mandateDetail?.CreateTime}
             </Col>
             {/*// @ts-ignore*/}
-            <Col className={styles.fontS24} span={8}>
+            <Col className={styles.fontS24}>
               {/*//@ts-ignore*/}
               任务类别：{mandateDetail?.MandateClass?.label}
             </Col>
           </Row>
-          <Row>
-            <Col className={styles.fontS24} span={16}>
+          <Row justify="space-between">
+            <Col className={styles.fontS24}>
               {/*//@ts-ignore*/}
               任务状态：{mandateDetail?.Status?.label}
             </Col>
-            <Col className={styles.fontS24} span={8}>
+            <Col className={styles.fontS24}>
               {/*// @ts-ignore*/}
               任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
             </Col>
@@ -130,66 +291,41 @@ 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>
         <div className={styles.relatedOrder}>
-          <div
-            className={styles.fontS28}
-            style={{ marginLeft: '5px', marginBottom: '25px' }}
-          >
-            关联工单
-          </div>
-          {handledWorkOrder.map((order) => {
-            return (
-              <div key={order.Id} className={styles.workOrderCard}>
-                <div className={styles.leftInfo}>
-                  <Row className={styles.infoRow}>
-                    <Col className={styles.fontS24} span={12}>
-                      工单编号：{order.Id}
-                    </Col>
-                    <Col className={styles.fontS24} span={12}>
-                      时间：{order.CreateTime}
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col className={styles.fontS24} span={12}>
-                      工单状态：
-                      <span style={{ color: '#5697e4' }}>
-                        {/*// @ts-ignore*/}
-                        {order.Status?.label}
-                      </span>
-                    </Col>
-                    <Col className={styles.fontS24} span={12}>
-                      {/*// @ts-ignore*/}
-                      工单负责人：{order.Responsible?.CName}
-                    </Col>
-                  </Row>
-                </div>
-                <Divider type="vertical" style={{ height: '40px' }} />
-                <div
-                  className={styles.rightButton}
-                  style={{ color: '#5697e4' }}
-                  onClick={() => {
-                    // @ts-ignore
-                    goTaskOrder(order.Id, order.RecordType?.value);
-                  }}
-                >
-                  查看工单
-                </div>
-              </div>
-            );
-          })}
+          <Collapse
+            className={styles.collapseLabel}
+            ghost
+            expandIcon={({ isActive }) => (
+              <UpOutlined
+                style={{ color: '#5697e4' }}
+                rotate={isActive ? 180 : 0}
+              />
+            )}
+            items={handledWorkOrder}
+          />
         </div>
       </div>
     </PageContent>
   );
 }
 
-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.less

@@ -15,12 +15,67 @@
 
   .detailInfo {
     padding: 25px 15px;
-    border-bottom: 1px solid gray;
+    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 {

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

@@ -12,19 +12,32 @@ import {
   OrderStatus,
   OrderType,
 } from '@/pages/TaskManage/constent';
-import { connect, useLocation } from '@umijs/max';
+import { connect, useLocation, useRequest } from '@umijs/max';
 
 import TopFilter from '@/pages/TaskManage/components/TopFilter';
 import { IMandateType } from '@/pages/TaskManage/index.types';
 import { useNavigate } from '@@/exports';
-import { Col, Collapse, CollapseProps, Divider, List, Row, Spin } from 'antd';
-import React, { useEffect, useState } from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Col,
+  Collapse,
+  CollapseProps,
+  Divider,
+  List,
+  Row,
+  Spin,
+} from 'antd';
+
+import { getMandateList } from '@/services/TaskManage';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import styles from './taskList.less';
 
 const TaskList: React.FC<IPropsType> = (props) => {
-  const { userList, mandateList, loading, dispatch } = props;
-  // const md5 = require('md5');
+  const { userList, loading, dispatch } = props;
   const location = useLocation();
+
   const queryParams = new URLSearchParams(location.search);
   const project_id = Number(queryParams.get('project_id'));
   const mandateType = Number(queryParams.get('mandateType'));
@@ -32,36 +45,42 @@ const TaskList: React.FC<IPropsType> = (props) => {
   const navigate = useNavigate();
 
   // 用于展示的任务列表
-  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([
-    ...mandateList.filter((item) => item.MandateType === mandateType),
-  ]);
+  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([]);
   // 顶部选择器配置
-  const [topFilters, setTopFilters] = useState<ITopFilter[]>([]);
-
-  /**
-   * 处理选择器变化
-   * @param value 选择的值，当清空时等于null
-   */
-  const onTopFilterChange = (value: any) => {
-    if (topFilters.length === 0) {
-      return;
-    }
-    let tempList = mandateList.filter(
-      (item) => item.MandateType === mandateType,
-    );
+  const [topFiltersConfig, setTopFiltersConfig] = useState<ITopFilter[]>([]);
+  const [mandateList, setMandateList] = useState<IMandateType[]>([]);
+  const [mandatePage, setMandatePage] = useState({
+    pageSize: 20,
+    total: 0,
+    current: 1,
+  });
+  const [currentParams, setCurrentParams] = useState({
+    project_id,
+    mandate_type: mandateType,
+    pageSize: 20,
+    currentPage: 2,
+  });
 
-    for (let i = 0; i < value.length; i++) {
-      if (value[i] !== null) {
-        tempList = tempList.filter(
-          // @ts-ignore
-          (item) => item[topFilters[i].key] === value[i],
-        );
-        console.log(tempList.length);
+  const { run: getList, loading: loadData } = useRequest(getMandateList, {
+    defaultParams: [
+      {
+        project_id,
+        mandate_type: mandateType,
+        pageSize: mandatePage.pageSize,
+        currentPage: mandatePage.current,
+      },
+    ],
+    formatResult: (result) => {
+      if (result.data.pagination.current === 1) {
+        setMandateList(result.data.list);
+      } else {
+        setMandateList([...mandateList, ...result.data.list]);
       }
-    }
-
-    setMandateListShow(tempList);
-  };
+      const pageInfo = result.data.pagination;
+      pageInfo.current += 1;
+      setMandatePage(pageInfo);
+    },
+  });
 
   // 获取用户
   useEffect(() => {
@@ -71,26 +90,19 @@ const TaskList: React.FC<IPropsType> = (props) => {
         payload: { project_id },
       });
     }
-    if (mandateList.length === 0) {
-      dispatch({
-        type: 'mandate/fetchMandateList',
-        payload: { project_id, mandate_type: mandateType, pageSize: 9999 },
-      });
-    }
   }, []);
 
-  // 获取列表
+  // 首次获取任务数据
+
   useEffect(() => {
-    setMandateListShow(
-      mandateList.filter((item) => item.MandateType === mandateType),
-    );
+    setMandateListShow(mandateList);
   }, [mandateList]);
 
-  // 顶部下拉过滤器
+  // 顶部下拉过滤器配置
   useEffect(() => {
     const filters: ITopFilter[] = [];
     filters.push({
-      key: 'MandateClass',
+      key: 'mandate_class',
       placeholder: '任务类别',
       // @ts-ignore
       options: MandateClass.map((item) => {
@@ -106,7 +118,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
     });
 
     filters.push({
-      key: 'Status',
+      key: 'status',
       placeholder: '任务状态',
       options: MandateStatus.map((item) => {
         return {
@@ -114,12 +126,57 @@ const TaskList: React.FC<IPropsType> = (props) => {
         };
       }),
     });
-    setTopFilters(filters);
-    setMandateListShow(
-      mandateList.filter((item) => item.MandateType === mandateType),
-    );
+    setTopFiltersConfig(filters);
+    // setMandateListShow(
+    //   mandateList.filter((item) => item.MandateType === mandateType),
+    // );
   }, [mandateType]);
 
+  /**
+   * 处理选择器变化
+   * @param value 选择的值，当清空时等于null
+   */
+  const onTopFilterChange = (value: any) => {
+    if (topFiltersConfig.length === 0) {
+      return;
+    }
+    const params: any = {
+      project_id,
+      mandate_type: mandateType,
+      pageSize: mandatePage.pageSize,
+      currentPage: 1,
+    };
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] !== null && topFiltersConfig[i] !== undefined) {
+        params[topFiltersConfig[i].key] = value[i];
+      }
+    }
+    getList(params);
+    params.currentPage += 1;
+    setCurrentParams(params);
+  };
+
+  const loadMoreMandate =
+    !loadData && mandateListShow.length > mandatePage.total ? (
+      <div
+        style={{
+          textAlign: 'center',
+          marginTop: 12,
+          height: 32,
+          lineHeight: '32px',
+          fontSize: '28px',
+        }}
+      >
+        <Button
+          type="text"
+          size="large"
+          style={{ fontSize: '28px', height: '56px', width: '160px' }}
+        >
+          加载更多
+        </Button>
+      </div>
+    ) : null;
+
   const goTaskDetail = (mandate: IMandateType) => {
     navigate(
       `/task-manage/list/detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
@@ -146,6 +203,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
       ResponsiblePeople: userList.find(
         (user) => user.ID === item.ResponsiblePeople,
       ),
+      CreateTime: moment(item.CreateTime).format('YYYY-MM-DD HH:mm'),
     };
 
     const workOrder = item.Records.map((record) => {
@@ -155,6 +213,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
         Status: OrderStatus.find((status) => status.value === record.Status),
         RecordType: OrderType.find((type) => type.value === record.RecordType),
         Responsible: userList.find((user) => user.ID === record.Responsible),
+        CreateTime: moment(record.CreateTime).format('YYYY-MM-DD HH:mm'),
       };
     });
 
@@ -170,7 +229,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
               <div className={styles.leftInfo}>
                 <Row style={{ marginBottom: '15px' }}>
                   <Col className={styles.fontS24} span={12}>
-                    工单编号：{order.Id}
+                    工单类型：{order.RecordType?.label || '-'}
                   </Col>
                   <Col className={styles.fontS24} span={12}>
                     时间：{order.CreateTime}
@@ -208,17 +267,20 @@ const TaskList: React.FC<IPropsType> = (props) => {
       <List.Item>
         <div className={`${styles.cardContainer} card-box`}>
           <Row justify="space-between" style={{ marginBottom: '20px' }}>
-            <Col className={styles.fontS24}>时间：{formatItem.CreateTime}</Col>
+            <Col className={styles.fontS24}>时间:{formatItem.CreateTime}</Col>
             <Col className={styles.fontS24}>
-              任务类别：{formatItem.MandateClass?.label}
+              任务类别:{formatItem.MandateClass?.label}
             </Col>
             <Col className={styles.fontS24}>
-              任务负责人：{formatItem.ResponsiblePeople?.CName || '-'}
+              任务负责人:{formatItem.ResponsiblePeople?.CName || '-'}
             </Col>
           </Row>
           <Row
             justify="space-between"
-            style={{ paddingBottom: '10px', borderBottom: '1px solid gray' }}
+            style={{
+              paddingBottom: '10px',
+              borderBottom: '1px solid #D5D5D5',
+            }}
           >
             <Col className={styles.fontS24}>
               任务状态：{formatItem.Status?.label || '-'}
@@ -247,6 +309,12 @@ const TaskList: React.FC<IPropsType> = (props) => {
             <Collapse
               className={styles.collapseLabel}
               ghost
+              expandIcon={({ isActive }) => (
+                <DownOutlined
+                  style={{ color: '#5697e4' }}
+                  rotate={isActive ? 180 : 0}
+                />
+              )}
               items={collapseData}
             />
           </Row>
@@ -256,22 +324,22 @@ const TaskList: React.FC<IPropsType> = (props) => {
   };
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <PageTitle returnable>
         {MandateType.find((item) => item.value === mandateType)?.label}
       </PageTitle>
-      <TopFilter filters={topFilters} onChange={onTopFilterChange} />
-      <Spin spinning={loading}>
+      <TopFilter filters={topFiltersConfig} onChange={onTopFilterChange} />
+      <Spin spinning={loading || loadData}>
         <List
           itemLayout="horizontal"
           dataSource={mandateListShow}
           renderItem={buildTaskList}
+          loadMore={loadMoreMandate}
         />
       </Spin>
     </PageContent>
   );
 };
-
 export default connect(
   ({
     taskUser,
@@ -279,13 +347,11 @@ export default connect(
     loading,
   }: any): {
     userList: IUserType[];
-    mandateList: IMandateType[];
     loading: boolean;
   } => {
     return {
       userList: taskUser.userList,
-      mandateList: mandate.mandateList,
-      loading: loading.models['taskUser'] || loading.models['mandate'],
+      loading: loading.models['taskUser'],
     };
   },
 )(TaskList);

src/pages/TaskManage/Detail/TaskList/taskList.types.ts

@@ -3,7 +3,6 @@ import { DefaultOptionType } from 'rc-select/es/Select';
 
 export interface IPropsType {
   userList: IUserType[];
-  mandateList: IMandateType[];
   loading: boolean;
   dispatch: (args: { type: string; payload: object }) => {};
 }
@@ -59,7 +58,7 @@ export interface IUserType {
 }
 
 export interface ITopFilter {
-  key?: string;
+  key: string;
   placeholder: string;
   options: { label: string | number; value: any }[];
 }

src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -11,6 +11,7 @@ import {
 import { useLocation } from '@@/exports';
 import { connect, useRequest } from '@umijs/max';
 import { Col, Row } from 'antd';
+import moment from 'moment';
 import { DefaultOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
 import styles from './taskOrder.less';
@@ -26,6 +27,7 @@ interface IOrderInfo {
   RepairTime: string;
   Reason: string;
   Repairman: string | IUserType;
+  DispatchMan: string | IUserType;
   OrderStatus: string | DefaultOptionType;
   Lubrication?: number;
   Fasten?: number;
@@ -52,9 +54,9 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
     formatResult: (result) => {
       const temp = result.data.list[0];
       const tempDetail = {
-        CreateTime: temp.CreateTime,
-        PlanTime: temp.PlanTime,
-        RepairTime: '-',
+        CreateTime: moment(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
+        PlanTime: moment(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
+        RepairTime: moment(temp.RepairTime).format('YYYY-MM-DD HH:mm') || '-',
         Reason: temp.Note,
         Lubrication: temp.Lubrication,
         Fasten: temp.Fasten,
@@ -64,6 +66,9 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
         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) || '-',
       };
@@ -77,11 +82,15 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
     formatResult: (result: any) => {
       const temp = result.data.list[0];
       const tempDetail: IOrderInfo = {
-        CreateTime: temp.CreateTime,
-        PlanTime: temp.PlanTime,
-        RepairTime: temp.RepairTime,
+        CreateTime: moment(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
+        PlanTime: moment(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
+        RepairTime: temp.RepairTime && moment(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) ||
           '-',
@@ -96,11 +105,16 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
     formatResult: (result) => {
       const temp = result.data.list[0];
       const tempDetail = {
-        CreateTime: temp.start_time,
-        PlanTime: temp.plan_end_time,
-        RepairTime: temp.actual_end_time || '-',
+        CreateTime: moment(temp.start_time).format('YYYY-MM-DD HH:mm'),
+        PlanTime: moment(temp.plan_end_time).format('YYYY-MM-DD HH:mm'),
+        RepairTime:
+          (temp.actual_end_time &&
+            moment(temp.actual_end_time).format('YYYY-MM-DD HH:mm')) ||
+          '-',
         Reason: temp.detail,
-        Repairman: userList.find((item) => item.ID === temp.operator_id) || '-',
+        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) || '-',
       };
@@ -132,7 +146,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
   }, []);
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <PageTitle returnable>工单详情</PageTitle>
       <div className={styles.selfCardBox}>
         <div className={styles.orderInfo}>
@@ -142,43 +156,46 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
             showStatus={orderInfo?.OrderStatus.value === 2}
             radius
           />
-          <div style={{ padding: '15px' }}>
+          <div style={{ padding: '15px', letterSpacing: '1.5px' }}>
             <Row className={styles.rowMargin}>
-              <Col className={styles.fontS24} span={16}>
-                时间：{'-'}
+              <Col className={styles.fontS28} span={16}>
+                {/*// @ts-ignore*/}
+                工单类型：
+                {order_type === 1 ? '工艺' : order_type === 2 ? '维修' : '保养'}
               </Col>
-              <Col className={styles.fontS24} span={8}>
+              <Col className={styles.fontS28} span={8}>
                 {/*// @ts-ignore*/}
                 工单负责人：{orderInfo?.Repairman?.CName || '-'}
               </Col>
             </Row>
             <Row className={styles.rowMargin}>
-              <Col className={styles.fontS24} span={16}>
+              <Col className={styles.fontS28} span={16}>
                 {/*// @ts-ignore*/}
                 工单状态：{orderInfo?.OrderStatus?.label}
               </Col>
-              <Col className={styles.fontS24} span={8}>
-                派单人员：{'-'}
+              <Col className={styles.fontS28} span={8}>
+                {/*// @ts-ignore*/}
+                派单人员：{orderInfo?.DispatchMan?.CName}
               </Col>
             </Row>
             <Row className={styles.rowMargin}>
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS28}>
                 派单时间：{orderInfo?.CreateTime || '-'}
               </Col>
             </Row>
             <Row className={styles.rowMargin}>
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS28}>
                 计划完成时间：{orderInfo?.PlanTime || '-'}
               </Col>
             </Row>
             <Row className={styles.rowMargin}>
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS28}>
                 实际完成时间：{orderInfo?.RepairTime || '-'}
               </Col>
             </Row>
             <Row>
-              <Col className={styles.fontS24}>工单详情：</Col>
-              <Col className={styles.fontS24} span={20}>
+              <Col className={styles.fontS28}>工单详情：</Col>
+              <Col className={styles.fontS28} span={18}>
                 {orderInfo?.Reason}
                 {/*<Table />*/}
               </Col>
@@ -189,25 +206,25 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
           <div>
             <SubTitle title="维修内容" />
             <div style={{ padding: '15px' }}>
-              <Row className={styles.rowMargin} justify={"space-between"}>
-                <Col className={styles.fontS24}>
+              <Row className={styles.rowMargin} justify={'space-around'}>
+                <Col className={styles.fontS28} span={8}>
                   是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS24}>
+                <Col className={styles.fontS28} span={8}>
                   是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS24}>
+                <Col className={styles.fontS28} span={8}>
                   是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
                 </Col>
               </Row>
-              <Row>
-                <Col className={styles.fontS24}>
+              <Row justify={'space-around'}>
+                <Col className={styles.fontS28} span={8}>
                   是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS24}>
+                <Col className={styles.fontS28} span={8}>
                   是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS24}>
+                <Col className={styles.fontS28} span={8}>
                   是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
                 </Col>
               </Row>

src/pages/TaskManage/Detail/TaskOrder/taskOrder.less

@@ -11,13 +11,17 @@
 }
 
 .rowMargin {
-  margin-bottom: 15px;
+  margin-bottom: 30px;
 }
 
 .fontS28 {
   font-size: 28px;
 }
 
+.fontS26{
+  font-size: 26px;
+}
+
 .fontS24 {
   font-size: 24px;
 }

src/pages/TaskManage/components/SubTitle.tsx

@@ -25,8 +25,8 @@ const SubTitle: React.FC<IPropsType> = ({
         paddingLeft: '20px',
         paddingRight: '10px',
         backgroundColor: '#d9e7f9',
-        fontSize: '26px',
-        height: '66px',
+        fontSize: '30px',
+        height: '80px',
         borderRadius: radius ? '8px 8px 0 0 ' : 'unset',
       }}
     >

src/pages/TaskManage/components/TopFilter.tsx

@@ -1,7 +1,9 @@
 import { ITopFilter } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
-import { Col,  Row, Select } from 'antd';
-import {  useState } from "react";
-import '../index.less'
+import { CaretDownFilled, CloseCircleFilled } from '@ant-design/icons';
+import { Col, Row, Select } from 'antd';
+
+import { useState } from 'react';
+import '../index.less';
 
 interface IProps {
   filters: ITopFilter[];
@@ -9,10 +11,12 @@ interface IProps {
 }
 
 const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
-  const [values, setValues] = useState<any[]>([]);
+  const [values, setValues] = useState<any[]>(
+    new Array(filters.length).fill(undefined),
+  );
 
   return (
-    <Row justify="space-around" style={{marginTop:'30px'}}>
+    <Row justify="space-around" style={{ marginTop: '30px' }}>
       {filters.map((item, index) => {
         return (
           <Col
@@ -21,11 +25,12 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
             style={{ textAlign: 'center' }}
           >
             <Select
-              className='antdSelect'
+              className="antdSelect"
               size="large"
               bordered={false}
               placeholder={item.placeholder}
               options={item.options}
+              popupMatchSelectWidth={250}
               allowClear
               onChange={(value) => {
                 const temp = filters.map((f, i) => {
@@ -37,6 +42,16 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
                 setValues(temp);
                 onChange(temp);
               }}
+              onClear={() => {
+                const temp = filters.map((f, i) => {
+                  if (index === i) {
+                    return null;
+                  }
+                  return values[i];
+                });
+                setValues(temp);
+                onChange(temp);
+              }}
             />
           </Col>
         );

src/pages/TaskManage/constent.ts

@@ -83,12 +83,6 @@ export const MandateClass = [
     MandateType: 3,
     OrderType: 2,
   },
-  {
-    value: 14,
-    label: '数据超限',
-    MandateType: 3,
-    OrderType: 2,
-  },
   {
     value: 15,
     label: '备品预警',

src/pages/TaskManage/index.less

@@ -6,6 +6,7 @@
     height: 12vh;
     box-shadow: 0 0 6px 3px rgba(0, 150, 255, 10%);
     border-radius: 10px;
+    background-color: #ffffff;
 
     .itemCount {
       display: flex;
@@ -23,47 +24,54 @@
   }
 }
 
+.ant-select-clear {
+  opacity: 1 !important;
+  margin-top: -12px!important;
+  width: 24px!important;
+  height: 24px!important;
+  font-size: 24px!important;
+  color: black!important;
+}
+
 .antdSelect .ant-select-selection-item,
 .antdSelect .ant-select-selection-placeholder,
-.ant-select-item-option-content
-{
+.ant-select-item-option-content {
   font-size: 28px;
-  width: 10rem;
-  text-align: center;
+  color: black;
+  margin-right: 10px;
 }
-
-.antdSelect .ant-select-selection-placeholder{
-  color: rgba(0,0,0,0.75);
+.ant-select-item-option{
+  padding: 8px!important;
 }
-
-.ant-select-dropdown{
-  width: unset;
+.ant-select-arrow {
+  font-size: 24px!important;
+  color: black!important;
 }
 
-.fontS28{
+.fontS28 {
   font-size: 28px;
 }
 
-.fontS26{
+.fontS26 {
   font-size: 26px;
 }
 
-.fontS24{
+.fontS24 {
   font-size: 24px;
 }
 
-.fontS22{
+.fontS22 {
   font-size: 22px;
 }
 
-.fontS20{
+.fontS20 {
   font-size: 20px;
 }
 
-.fontS18{
+.fontS18 {
   font-size: 18px;
 }
 
-.fontS16{
+.fontS16 {
   font-size: 16px;
 }

src/pages/TaskManage/index.tsx

@@ -2,40 +2,52 @@ import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { MandateType } from '@/pages/TaskManage/constent';
 import styles from '@/pages/TaskManage/index.less';
-import { IMandateType, IPropTypes } from '@/pages/TaskManage/index.types';
+import { getMandateList } from '@/services/TaskManage';
 import { RightOutlined } from '@ant-design/icons';
-import { connect, useParams } from '@umijs/max';
-import { List, Spin } from 'antd';
+import { useParams } from '@umijs/max';
+import { List, Spin } from "antd";
 import { BaseOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'umi';
 
-const TaskManage: React.FC<IPropTypes> = (props) => {
-  const { mandateList, loading, dispatch } = props;
+const TaskManage = () => {
   const { projectID } = useParams();
   const project_id = Number(projectID === '' ? '0' : projectID);
-
   const navigate = useNavigate();
-  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
 
-  useEffect(() => {
-    if (mandateList.length === 0) {
-      dispatch({
-        type: 'mandate/fetchMandateList',
-        payload: { project_id, pageSize: 9999 },
-      });
-    }
-  }, []);
+  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    const typeCount = [];
+    const requests = [];
     for (let i = 0; i < 3; i++) {
-      typeCount[i] = mandateList.filter(
-        (item: IMandateType) => item.MandateType === i + 1,
-      ).length;
+      requests.push(
+        getMandateList({
+          project_id,
+          pageSize: 1,
+          currentPage: 1,
+          mandate_type: i + 1,
+        }),
+      );
     }
-    setMandateCount(typeCount);
-  }, [mandateList]);
+    setLoading(true)
+    Promise.all(requests)
+      .then((resList) => {
+        if (resList.filter((item) => item.code !== 200).length) {
+          throw new Error('请求错误');
+        }
+        const typeCount = [0, 0, 0];
+        resList.forEach((item, index) => {
+          typeCount[index] = item.data.pagination?.total;
+        });
+        setMandateCount(typeCount);
+      })
+      .catch((err) => {
+        console.log(err);
+      }).finally(()=>{
+        setLoading(false)
+    });
+  }, []);
 
   const goTaskList = (item: number) => {
     navigate(`/task-manage/list?project_id=${project_id}&mandateType=${item}`);
@@ -49,7 +61,9 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
           goTaskList(item.value);
         }}
       >
-        <List.Item.Meta title={<span className={styles.fontS28}>{item.label}</span>} />
+        <List.Item.Meta
+          title={<span className={styles.fontS28}>{item.label}</span>}
+        />
         <div className={styles.itemCount}>
           <div className={styles.countNumber}>{mandateCount[index]}</div>
           <div className={styles.fontS22}>任务数量</div>
@@ -61,7 +75,7 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
 
   return (
     <PageContent>
-      <PageTitle>任务管理</PageTitle>
+      <PageTitle clo>任务管理</PageTitle>
       <Spin spinning={loading}>
         <List
           className={styles.taskList}
@@ -72,18 +86,21 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
           pagination={false}
         />
       </Spin>
+
     </PageContent>
   );
 };
 
-export default connect(
-  ({
-    mandate,
-    loading,
-  }: any): { mandateList: IMandateType[]; loading: boolean } => {
-    return {
-      mandateList: mandate.mandateList,
-      loading: loading.models['mandate'],
-    };
-  },
-)(TaskManage);
+export default TaskManage;
+
+// export default connect(
+//   ({
+//     mandate,
+//     loading,
+//   }: any): { mandateList: IMandateType[]; loading: boolean } => {
+//     return {
+//       mandateList: mandate.mandateList,
+//       loading: loading.models['mandate'],
+//     };
+//   },
+// )(TaskManage);

src/pages/TaskManage/index.types.ts

@@ -1,11 +1,11 @@
 import { IWorkOrderType } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
 import { DefaultOptionType } from 'rc-select/es/Select';
 
-export interface IPropTypes {
-  mandateList: IMandateType[];
-  loading: boolean;
-  dispatch: (args: { type: string; payload: object }) => void;
-}
+// export interface IPropTypes {
+//   mandateList: IMandateType[];
+//   loading: boolean;
+//   dispatch: (args: { type: string; payload: object }) => void;
+// }
 
 export interface IMandateType {
   Id: number;

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
+}