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

解决冲突
# Conflicts:
#	.umirc.ts

.umirc.ts

@@ -111,6 +111,21 @@ export default defineConfig({
       path: '/task-manage/:projectID',
       component: './TaskManage',
     },
+    {
+      name: '任务列表',
+      path: '/task-manage/list',
+      component: './TaskManage/Detail/TaskList/TaskList',
+    },
+    {
+      name: '任务详情',
+      path: '/task-manage/list/detail',
+      component: './TaskManage/Detail/TaskDetail/TaskDetail',
+    },
+    {
+      name: '任务关联工单详情',
+      path: '/task-manage/list/order-detail',
+      component: './TaskManage/Detail/TaskOrder/TaskOrder',
+    },
     {
       name: '消息中心',
       path: '/message/:projectId',

src/pages/HardwareController/AirConditioner.js

@@ -1,21 +1,26 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
-import { queryConditionSnapshot } from '@/services/SmartOps';
+import { queryIotList } from '@/services/HardwareController';
 import { useParams, useRequest } from '@umijs/max';
+import { Spin } from 'antd';
 import styles from './index.less';
 
 const Work = (props) => {
   const { projectId } = useParams();
 
-  const { data, loading } = useRequest(queryConditionSnapshot, {
-    defaultParams: [{ project_id: projectId }],
-    initialData: {},
+  const { data, loading } = useRequest(queryIotList, {
+    defaultParams: [projectId],
   });
 
+  const getIconStatus = (status) => {
+    if (status == 1) return '';
+    if (status == 2) return styles.offline;
+    if (status == 3) return styles.error;
+  };
+
   return (
     <PageContent>
       <PageTitle>空调控制</PageTitle>
-      <div className={styles.desc}>当前空间&nbsp;&nbsp;温度：26 湿度：2.4%</div>
       <div className={`card-box ${styles.top}`}>
         <div className={styles.left}>
           <img
@@ -23,31 +28,30 @@ const Work = (props) => {
             src={require('@/assets/air-conditioner.png')}
           />
           <div>
-            <div className={styles.number}>23</div>
+            <div className={styles.number}>{data?.pagination?.total}</div>
             空调数量
           </div>
         </div>
         <div className={styles.right}>
           <div className={styles.row}>
-            <i className={styles.icon}></i> 在线：137
+            <i className={styles.icon}></i> 在线：{data?.online_count}
           </div>
           <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.error}`}></i> 在线：137
+            <i className={`${styles.icon} ${styles.error}`}></i> 故障：{data?.fault_count}
           </div>
           <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.offline}`}></i> 在线：137
+            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：{data?.offline_count}
           </div>
         </div>
       </div>
-      <div className={`card-box ${styles.item}`}>
-        <i className={styles.icon}></i> 空调1
-      </div>
-      <div className={`card-box ${styles.item}`}>
-        <i className={styles.icon}></i> 空调2
-      </div>
-      <div className={`card-box ${styles.item}`}>
-        <i className={`${styles.icon} ${styles.error}`}></i> 空调3
-      </div>
+      <Spin spinning={loading}>
+        {data?.list?.map((item) => (
+          <div key={item.id} className={`card-box ${styles.item}`}>
+            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
+            {item.name}
+          </div>
+        ))}
+      </Spin>
     </PageContent>
   );
 };

src/pages/HardwareController/Light.js

@@ -1,17 +1,23 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
-import { queryConditionSnapshot } from '@/services/SmartOps';
+import { queryLightList } from '@/services/HardwareController';
 import { useParams, useRequest } from '@umijs/max';
+import { Spin } from 'antd';
 import styles from './index.less';
 
 const Work = (props) => {
   const { projectId } = useParams();
 
-  const { data, loading } = useRequest(queryConditionSnapshot, {
-    defaultParams: [{ project_id: projectId }],
-    initialData: {},
+  const { data, loading } = useRequest(queryLightList, {
+    defaultParams: [projectId],
   });
 
+  const getIconStatus = (status) => {
+    if (status == 1) return '';
+    if (status == 2) return styles.offline;
+    if (status == 3) return styles.error;
+  };
+
   return (
     <PageContent>
       <PageTitle>照明控制</PageTitle>
@@ -22,31 +28,30 @@ const Work = (props) => {
             src={require('@/assets/air-conditioner.png')}
           />
           <div>
-            <div className={styles.number}>23</div>
+            <div className={styles.number}>{data?.pagination?.total}</div>
             照明数量
           </div>
         </div>
         <div className={styles.right}>
           <div className={styles.row}>
-            <i className={styles.icon}></i> 在线：137
+            <i className={styles.icon}></i> 在线：{data?.online_count}
           </div>
           <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.error}`}></i> 在线：137
+            <i className={`${styles.icon} ${styles.error}`}></i> 故障：{data?.fault_count}
           </div>
           <div className={styles.row}>
-            <i className={`${styles.icon} ${styles.offline}`}></i> 在线：137
+            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：{data?.offline_count}
           </div>
         </div>
       </div>
-      <div className={`card-box ${styles.item}`}>
-        <i className={styles.icon}></i> 照明1
-      </div>
-      <div className={`card-box ${styles.item}`}>
-        <i className={styles.icon}></i> 照明2
-      </div>
-      <div className={`card-box ${styles.item}`}>
-        <i className={`${styles.icon} ${styles.error}`}></i> 照明3
-      </div>
+      <Spin spinning={loading}>
+        {data?.list?.map((item) => (
+          <div key={item.id} className={`card-box ${styles.item}`}>
+            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
+            {item.name}
+          </div>
+        ))}
+      </Spin>
     </PageContent>
   );
 };

src/pages/TaskManage/Detail/TaskDetail.tsx

@@ -1,143 +0,0 @@
-import PageContent from '@/components/PageContent';
-import PageTitle from '@/components/PageTitle';
-import {
-  MandateChildType,
-  MandateDetailType,
-  PropsType,
-  UserType,
-  WorkOrderType,
-} from '@/pages/TaskManage/Detail/detail.types';
-import {
-  MandateClass,
-  MandateStatus,
-  MandateType,
-  OrderStatus,
-  OrderType,
-} from '@/pages/TaskManage/constent';
-import {
-  dispatchOrder,
-  getMandateChildList,
-  getMandateDetail,
-  ignoreTask,
-  setTaskAutomation,
-} from '@/services/TaskManage';
-import { connect, useLocation, useRequest } from '@umijs/max';
-import React, { useEffect, useState } from 'react';
-
-const TaskDetail: React.FC<PropsType> = (props) => {
-  const { userList, dispatch } = props;
-  const md5 = require('md5');
-  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 [mandateDetail, setMandateDetail] = useState<MandateDetailType>();
-  const [handledWorkOrders, setHandledWorkOrders] = useState<WorkOrderType[]>(
-    [],
-  );
-  const [subMandateList, setSubMandateList] = useState<MandateChildType[]>([]);
-
-  const { run: getDetail, refresh: refreshDetail } = useRequest(
-    getMandateDetail,
-    {
-      defaultParams: [
-        {
-          project_id,
-          mandate_id,
-        },
-      ],
-      formatResult: (result) => {
-        const mandate: MandateDetailType = {
-          ...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,
-          ),
-        };
-        const workOrderList: WorkOrderType[] = result.data.Records.map(
-          (record: WorkOrderType) => {
-            return {
-              ...record,
-              Status: OrderStatus.find(
-                (item) => item.value === record.Status,
-              ),
-              RecordType: OrderType.find(
-                (item) => item.value === record.RecordType,
-              ),
-              Responsible: userList.find(
-                (item: UserType) => item.ID === record.Responsible,
-              ),
-            };
-          },
-        );
-        setMandateDetail(mandate);
-        setHandledWorkOrders(workOrderList);
-      },
-    },
-  );
-
-  const {
-    run: getMandateChild,
-    loading,
-    refresh: refreshMandateChild,
-  } = useRequest(getMandateChildList, {
-    defaultParams: [
-      {
-        mandateId: mandate_id,
-      },
-    ],
-    formatResult: (result) => {
-      setSubMandateList(result.data);
-    },
-  });
-
-  const { run: setAuto } = useRequest(setTaskAutomation, {
-    manual: true,
-    onSuccess: () => {
-      refreshDetail();
-      refreshMandateChild();
-    },
-  });
-
-  const { run: runIgnoreTask } = useRequest(ignoreTask, {
-    manual: true,
-    onSuccess: () => {
-      refreshDetail();
-      refreshMandateChild();
-    },
-  });
-
-  const { run: runDispatch } = useRequest(dispatchOrder, {
-    manual: true,
-    onSuccess: () => {
-      refreshDetail();
-      refreshMandateChild();
-    },
-  });
-
-  useEffect(() => {
-    if (userList.length === 0) {
-      dispatch({
-        type: 'taskUser/fetchUserList',
-        payload: { project_id },
-      });
-    }
-  }, []);
-
-  return (
-    <PageContent>
-      <PageTitle returnable>任务详情</PageTitle>
-
-    </PageContent>
-  );
-};
-
-export default connect(({ taskUser }: any): { userList: UserType[] } => {
-  return {
-    userList: taskUser.userList,
-  };
-})(TaskDetail);

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

@@ -0,0 +1,169 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import {
+  IMandateDetailType,
+  IUserType,
+  IWorkOrderType,
+} from '@/pages/TaskManage/Detail/TaskList/taskList.types';
+import {
+  MandateClass,
+  MandateStatus,
+  MandateType,
+  OrderStatus,
+  OrderType,
+} from '@/pages/TaskManage/constent';
+import { getMandateDetail } from '@/services/TaskManage';
+import { useLocation } from '@@/exports';
+import { connect, useRequest } from '@umijs/max';
+import { Button, Col, Divider, Row, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'umi';
+import styles from './taskDetail.less';
+
+interface IPropsType {
+  userList: IUserType[];
+  dispatch: (args: { type: string; payload: object }) => void;
+}
+
+function TaskDetail(props: IPropsType) {
+  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<IMandateDetailType>();
+  const [handledWorkOrder, setHandledWorkOrder] = useState<IWorkOrderType[]>(
+    [],
+  );
+
+  const { refresh: refreshDetail } = useRequest(getMandateDetail, {
+    defaultParams: [
+      {
+        mandate_id,
+        project_id,
+      },
+    ],
+    formatResult: (result) => {
+      const tempMandate: IMandateDetailType = {
+        ...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,
+        ),
+      };
+      const workOrder = result.data.Records;
+      const tempOrder = workOrder.map((record: 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),
+        };
+      });
+      setMandateDetail(tempMandate);
+      setHandledWorkOrder(tempOrder);
+    },
+  });
+
+  useEffect(() => {
+    if (userList.length === 0) {
+      dispatch({
+        type: 'taskUser/fetchUserList',
+        payload: { project_id },
+      });
+    }
+  }, []);
+
+  const goTaskOrder = (orderID: number) => {
+    navigate(
+      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}`,
+    );
+  };
+
+  return (
+    <PageContent>
+      <PageTitle returnable>任务详情</PageTitle>
+      <div className={`${styles.cardContainer} card-box`}>
+        <div className={styles.normalInfo}>
+          <Row className={styles.infoRow}>
+            <Col span={16}>时间：{mandateDetail?.CreateTime}</Col>
+            <Col span={8}>任务类别：{mandateDetail?.MandateClass?.label}</Col>
+          </Row>
+          <Row>
+            <Col span={16}>任务状态：{mandateDetail?.Status?.label}</Col>
+            <Col span={8}>
+              任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
+            </Col>
+          </Row>
+        </div>
+        <div className={styles.detailInfo}>
+          <Row className={styles.infoRow}>
+            <Col span={4}>任务总结</Col>
+            <Col>{mandateDetail?.Summary}</Col>
+          </Row>
+          <Row>
+            <Col span={4}>任务内容</Col>
+            <Col span={20}>
+              <Table />
+            </Col>
+          </Row>
+        </div>
+        <div>
+          <h3 style={{ marginLeft: '15px' }}>关联工单</h3>
+          {handledWorkOrder.map((order) => {
+            return (
+              <div key={order.Id} className={styles.workOrderCard}>
+                <div className={styles.leftInfo}>
+                  <Row className={styles.infoRow}>
+                    <Col span={12}>工单编号：{order.Id}</Col>
+                    <Col span={12}>时间：{order.CreateTime}</Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>
+                      工单状态：
+                      <span style={{ color: '#5697e4' }}>
+                        {order.Status?.label}
+                      </span>
+                    </Col>
+                    <Col span={12}>工单负责人：{order.Responsible?.CName}</Col>
+                  </Row>
+                </div>
+                <Divider type="vertical" style={{ height: '40px' }} />
+                <div className={styles.rightButton}>
+                  <Button
+                    style={{ color: '#5697e4' }}
+                    type="text"
+                    ghost
+                    onClick={() => {
+                      goTaskOrder(order.Id);
+                    }}
+                  >
+                    查看工单
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </PageContent>
+  );
+}
+
+export default connect(({ taskUser }: any): { userList: IUserType[] } => {
+  return {
+    userList: taskUser.userList,
+  };
+})(TaskDetail);

src/pages/TaskManage/Detail/TaskDetail/taskDetail.less

@@ -0,0 +1,43 @@
+.cardContainer{
+  margin-top: 15px;
+  padding: 20px 20px;
+  background-color: white;
+
+  .normalInfo{
+    padding: 15px 15px;
+    background-color: #fdf2df;
+  }
+
+  .infoRow{
+    margin-bottom: 15px;
+  }
+
+
+  .detailInfo{
+    padding: 15px 15px;
+  }
+
+  .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;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+
+}

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

@@ -0,0 +1,289 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import {
+  IPropsType,
+  ITopFilter,
+  IUserType,
+} from '@/pages/TaskManage/Detail/TaskList/taskList.types';
+import {
+  MandateClass,
+  MandateStatus,
+  MandateType,
+  OrderStatus,
+  OrderType,
+} from '@/pages/TaskManage/constent';
+import { connect, useLocation } from '@umijs/max';
+
+import TopFilter from '@/pages/TaskManage/components/TopFilter';
+import { IMandateType } from '@/pages/TaskManage/index.types';
+import { useNavigate } from '@@/exports';
+import {
+  Button,
+  Col,
+  Collapse,
+  CollapseProps,
+  Divider,
+  List,
+  Row,
+  Spin,
+} from 'antd';
+import React, { 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 location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const project_id = Number(queryParams.get('project_id'));
+  const mandateType = Number(queryParams.get('mandateType'));
+
+  const navigate = useNavigate();
+
+  // 用于展示的任务列表
+  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([
+    ...mandateList.filter((item) => item.MandateType === mandateType),
+  ]);
+  // 顶部选择器配置
+  const [topFilters, setTopFilters] = useState<ITopFilter[]>([]);
+
+  /**
+   * 处理选择器变化
+   * @param value 选择的值，当清空时等于null
+   * @param item
+   * @param index
+   */
+  const onTopFilterChange = (value: any) => {
+    if (topFilters.length === 0) {
+      return;
+    }
+    let tempList = mandateList.filter(
+      (item) => item.MandateType === mandateType,
+    );
+
+    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);
+      }
+    }
+
+    setMandateListShow(tempList);
+  };
+
+  // 获取用户
+  useEffect(() => {
+    if (userList.length === 0) {
+      dispatch({
+        type: 'taskUser/fetchUserList',
+        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),
+    );
+  }, [mandateList]);
+
+  // 顶部下拉过滤器
+  useEffect(() => {
+    const filters: ITopFilter[] = [];
+    filters.push({
+      key: 'MandateClass',
+      placeholder: '任务类别',
+      // @ts-ignore
+      options: MandateClass.map((item) => {
+        if (item.MandateType === mandateType) {
+          return {
+            value: item.value,
+            label: item.label,
+            key: item.value + '任务类别',
+          };
+        }
+        return undefined;
+      }).filter((item) => item),
+    });
+
+    filters.push({
+      key: 'Status',
+      placeholder: '任务状态',
+      options: MandateStatus.map((item) => {
+        return {
+          ...item,
+          key: item.value + '任务状态',
+        };
+      }),
+    });
+    setTopFilters(filters);
+    setMandateListShow(
+      mandateList.filter((item) => item.MandateType === mandateType),
+    );
+  }, [mandateType]);
+
+  const goTaskDetail = (mandate: IMandateType) => {
+    navigate(
+      `/task-manage/list/detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
+    );
+  };
+
+  const goTaskOrder = (orderID: number) => {
+    navigate(
+      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}`,
+    );
+  };
+
+  const buildTaskList = (item: IMandateType) => {
+    const formatItem = {
+      ...item,
+      Status: MandateStatus.find((status) => status.value === item.Status),
+      MandateType: MandateType.find((type) => type.value === item.MandateType),
+      MandateClass: MandateClass.find(
+        (itemClass) => itemClass.value === item.MandateClass,
+      ),
+      ResponsiblePeople: userList.find(
+        (user) => user.ID === item.ResponsiblePeople,
+      ),
+    };
+
+    const workOrder = item.Records.map((record) => {
+      return {
+        ...record,
+        Status: OrderStatus.find((status) => status.value === record.Status),
+        RecordType: OrderType.find((type) => type.value === record.RecordType),
+        Responsible: userList.find((user) => user.ID === record.Responsible),
+      };
+    });
+
+    const collapseData: CollapseProps['items'] = [
+      {
+        key: '1',
+        label: (
+          <span style={{ color: '#5697e4' }}>关联工单({workOrder.length})</span>
+        ),
+        children: workOrder.map((order) => {
+          return (
+            <div key={order.Id} className={styles.workOrderCard}>
+              <div className={styles.leftInfo}>
+                <Row style={{ marginBottom: '15px' }}>
+                  <Col span={12}>工单编号：{order.Id}</Col>
+                  <Col span={12}>时间：{order.CreateTime}</Col>
+                </Row>
+                <Row>
+                  <Col span={12}>
+                    工单状态：
+                    <span style={{ color: '#5697e4' }}>
+                      {order.Status?.label}
+                    </span>
+                  </Col>
+                  <Col span={12}>工单负责人：{order.Responsible?.CName}</Col>
+                </Row>
+              </div>
+              <Divider type="vertical" style={{ height: '40px' }} />
+              <div className={styles.rightButton}>
+                <Button
+                  style={{ color: '#5697e4' }}
+                  type="text"
+                  ghost
+                  onClick={() => {
+                    goTaskOrder(order.Id);
+                  }}
+                >
+                  查看工单
+                </Button>
+              </div>
+            </div>
+          );
+        }),
+      },
+    ];
+
+    return (
+      <List.Item>
+        <div className={`${styles.cardContainer} card-box`}>
+          <Row justify="space-between" style={{ marginBottom: '20px' }}>
+            <Col>时间：{formatItem.CreateTime}</Col>
+            <Col>任务类别：{formatItem.MandateClass?.label}</Col>
+            <Col>任务负责人：{formatItem.ResponsiblePeople?.CName || '-'}</Col>
+          </Row>
+          <Row
+            justify="space-between"
+            style={{ paddingBottom: '10px', borderBottom: '1px solid gray' }}
+          >
+            <Col>任务状态：{formatItem.Status?.label || '-'}</Col>
+            <Col>
+              <div
+                style={{
+                  backgroundColor: '#f5a623',
+                }}
+              >
+                <Button
+                  style={{ color: 'white' }}
+                  type="text"
+                  ghost
+                  onClick={() => {
+                    goTaskDetail(item);
+                  }}
+                >
+                  任务详情
+                </Button>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Collapse
+              className={styles.collapseLabel}
+              ghost
+              items={collapseData}
+            />
+          </Row>
+        </div>
+      </List.Item>
+    );
+  };
+
+  return (
+    <PageContent>
+      <PageTitle returnable>
+        {MandateType.find((item) => item.value === mandateType)?.label}
+      </PageTitle>
+      <TopFilter filters={topFilters} onChange={onTopFilterChange} />
+      <Spin spinning={loading}>
+        <List
+          itemLayout="horizontal"
+          dataSource={mandateListShow}
+          renderItem={buildTaskList}
+        />
+      </Spin>
+    </PageContent>
+  );
+};
+
+export default connect(
+  ({
+    taskUser,
+    mandate,
+    loading,
+  }: any): {
+    userList: IUserType[];
+    mandateList: IMandateType[];
+    loading: boolean;
+  } => {
+    return {
+      userList: taskUser.userList,
+      mandateList: mandate.mandateList,
+      loading: loading.models['taskUser'] || loading.models['mandate'],
+    };
+  },
+)(TaskList);

src/pages/TaskManage/Detail/TaskList/taskList.less

@@ -0,0 +1,43 @@
+.cardContainer {
+  width: 100%;
+  padding: 20px;
+  background-color: white;
+
+  .collapseLabel {
+    width: 100%;
+
+    :global {
+      .ant-collapse-header {
+        justify-content: center;
+        flex-direction: row-reverse;
+
+        .ant-collapse-header-text {
+          flex: unset;
+          margin-inline-end: unset;
+        }
+      }
+    }
+
+    .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;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { IMandateType } from '@/pages/TaskManage/index.types';
+import { BaseOptionType } from 'rc-select/es/Select';
+
+export interface IPropsType {
+  userList: IUserType[];
+  mandateList: IMandateType[];
+  loading: boolean;
+  dispatch: (args: { type: string; payload: object }) => {};
+}
+
+export interface IMandateChildType {
+  Content: string;
+  CreateTime: string;
+  ExtendId: number;
+  Id: number;
+  MandateClass: number;
+  MandateId: number;
+  ProjectId: number;
+  Status: number;
+  Title: string;
+}
+
+export interface IWorkOrderType {
+  ActualDoneTime: string;
+  CreateTime: string;
+  Detail: string;
+  Id: number;
+  Note: string;
+  PlanDoneTime: string;
+  RecordType: number | BaseOptionType;
+  Responsible: number | IUserType;
+  Status: number | BaseOptionType;
+}
+
+export interface IMandateDetailType {
+  Id: number;
+  ProjectId: number;
+  MandateType: number | BaseOptionType;
+  MandateClass: number | BaseOptionType;
+  ResponsiblePeople: number | IUserType;
+  Detail: string;
+  MandateChild: IMandateChildType[];
+  Records: IWorkOrderType[];
+  Summary: string;
+  CreateTime: string;
+  Status: number | BaseOptionType;
+  Note: string;
+  OperationLog: string;
+  OperationPeople: number;
+  ExtendId: number;
+}
+
+export interface IUserType {
+  CName: string;
+  ID: number;
+  RoleID: string;
+  RoleName: string;
+  UserName: string;
+}
+
+export interface ITopFilter {
+  key?: string;
+  placeholder: string;
+  options: { label: string | number; value: any }[];
+}

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

@@ -0,0 +1,84 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import SubTitle from '@/pages/TaskManage/components/SubTitle';
+import { Col, Row, Steps, Table } from "antd";
+import styles from './taskOrder.less';
+
+function TaskOrder() {
+  return (
+    <PageContent>
+      <PageTitle returnable>工单详情</PageTitle>
+      <div className={styles.selfCardBox}>
+        <div className={styles.orderInfo}>
+          <SubTitle title="工单信息" statusStr="已完成" radius />
+          <div style={{ padding: '15px' }}>
+            <Row className={styles.rowMargin}>
+              <Col span={16}>时间：{}</Col>
+              <Col span={8}>工单负责人：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col span={16}>工单状态：{}</Col>
+              <Col span={8}>派单人员：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col>派单时间：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col>计划完成时间：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col>实际完成时间：{}</Col>
+            </Row>
+            <Row>
+              <Col span={4}>工单详情：{}</Col>
+              <Col span={20}>
+                <Table />
+              </Col>
+            </Row>
+          </div>
+        </div>
+        <div>
+          <SubTitle title="维修内容" />
+          <div style={{ padding: '15px' }}>
+            <Row className={styles.rowMargin}>
+              <Col>是否润滑加油：否</Col>
+            </Row>
+            <Row>
+              <Col>是否清洁：否</Col>
+            </Row>
+          </div>
+        </div>
+        <div>
+          <SubTitle title="工单流程" />
+          <div style={{padding: '15px'}}>
+            <Steps
+              direction="vertical"
+              style={{fontSize: '14px'}}
+              current={1}
+              items={[
+                {
+                  title: '工单已派遣至值班人员张**',
+                  description:'2023-08-02 13:23',
+                },
+                {
+                  title: '张**接收工单',
+                  description:'2023-08-02 13:23',
+                },
+                {
+                  title: '张**提交处理结果',
+                  description:'2023-08-02 13:23',
+                },{
+                  title: '工单审批通过',
+                  description:'2023-08-02 13:23',
+                },
+
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </PageContent>
+  );
+}
+
+export default TaskOrder;

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

@@ -0,0 +1,15 @@
+.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: 15px;
+}

src/pages/TaskManage/Detail/detail.types.ts

@@ -1,56 +0,0 @@
-import User from "@/pages/TaskManage/models/user";
-
-export interface PropsType{
-  userList: UserType[],
-  dispatch: (args:{type:string, payload: object})=>{}
-}
-
-export interface MandateChildType {
-  Content: string;
-  CreateTime: string;
-  ExtendId: number;
-  Id: number;
-  MandateClass: number;
-  MandateId: number;
-  ProjectId: number;
-  Status: number;
-  Title: string;
-}
-
-export interface WorkOrderType {
-  ActualDoneTime: string;
-  CreateTime: string;
-  Detail: string;
-  Id: number;
-  Note: string;
-  PlanDoneTime: string;
-  RecordType: number;
-  Responsible: number;
-  Status: number;
-}
-
-export interface MandateDetailType {
-  Id: number;
-  ProjectId: number;
-  MandateType: number;
-  MandateClass: number;
-  ResponsiblePeople: number;
-  Detail: string;
-  MandateChild: MandateChildType[];
-  Records: WorkOrderType[];
-  Summary: string;
-  CreateTime: string;
-  Status: number;
-  Note: string;
-  OperationLog: string;
-  OperationPeople: number;
-  ExtendId: number;
-}
-
-export interface UserType {
-  CName: string;
-  ID: number;
-  RoleID: string;
-  RoleName: string;
-  UserName: string;
-}

src/pages/TaskManage/components/SubTitle.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface IPropsType {
+  title: string;
+  statusStr?: string;
+  radius?: boolean;
+}
+
+const SubTitle: React.FC<IPropsType> = ({ title, statusStr='', radius=false }) => {
+  return (
+    <div
+      style={{
+        border: 0,
+        margin: 0,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        backgroundColor: '#d9e7f9',
+        fontSize: '18px',
+        height: '40px',
+        borderRadius: radius ? '8px 8px 0 0 ' : 'unset',
+      }}
+    >
+      <div>
+        <span style={{ border: '2px solid #4a90e2', marginRight: '5px' }} />
+        {title}
+      </div>
+      <div>{statusStr}</div>
+    </div>
+  );
+};
+
+export default SubTitle;

src/pages/TaskManage/components/TopFilter.tsx

@@ -0,0 +1,47 @@
+import { ITopFilter } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
+import { Divider, Select } from 'antd';
+import { useState } from 'react';
+
+interface IProps {
+  filters: ITopFilter[];
+  onChange: (value: any) => void;
+}
+
+const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
+  const [values, setValues] = useState<any[]>([]);
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      {filters.map((item, index) => {
+        return (
+          <>
+            <Select
+              key={`${index}${item.placeholder}`}
+              style={{ width: 120 }}
+              size="large"
+              bordered={false}
+              placeholder={item.placeholder}
+              options={item.options}
+              allowClear
+              onChange={(value) => {
+                const temp = filters.map((f, i) => {
+                  if (index === i) {
+                    return value !== undefined ? value : null;
+                  }
+                  return values[i] || null;
+                });
+                setValues(temp);
+                onChange(temp);
+              }}
+            />
+            {filters.length > 1 && index !== filters.length - 1 && (
+              <Divider type="vertical" style={{ margin: '0 30px' }} />
+            )}
+          </>
+        );
+      })}
+    </div>
+  );
+};
+
+export default TopFilter;

src/pages/TaskManage/constent.ts

@@ -2,58 +2,86 @@ export const MandateClass = [
   {
     value: 1,
     label: '生产调度类',
+    MandateType: 1,
+    OrderType: 1,
   },
   {
     value: 2,
     label: '成本节约类',
+    MandateType: 1,
+    OrderType: 1,
   },
   {
     value: 3,
     label: '设备自检',
+    MandateType: 2,
+    OrderType: 2,
   },
   {
     value: 4,
     label: '工艺自检',
+    MandateType: 2,
+    OrderType: 1,
   },
   {
     value: 5,
     label: '电气检测',
+    MandateType: 2,
+    OrderType: 2,
   },
   {
     value: 6,
     label: '环境检测',
+    MandateType: 2,
+    OrderType: 2,
   },
   {
     value: 7,
     label: '安防检测',
+    MandateType: 2,
+    OrderType: 2,
   },
   {
     value: 8,
     label: '密闭空间检测',
+    MandateType: 2,
+    OrderType: 2,
   },
   {
     value: 9,
     label: '设备保养',
+    MandateType: 3,
+    OrderType: 3,
   },
   {
     value: 10,
     label: '设备维修',
+    MandateType: 3,
+    OrderType: 2,
   },
   {
     value: 11,
     label: '故障上报',
+    MandateType: 3,
+    OrderType: 2,
   },
   {
     value: 12,
     label: '工艺数据',
+    MandateType: 3,
+    OrderType: 2,
   },
   {
     value: 13,
     label: '设备巡检',
+    MandateType: 3,
+    OrderType: 2,
   },
   {
     value: 14,
     label: '数据超限',
+    MandateType: 3,
+    OrderType: 2,
   },
 ];
 
@@ -64,7 +92,7 @@ export const MandateType = [
   },
   {
     value: 2,
-    label: '系统自检',
+    label: '系统自检任务',
   },
   {
     value: 3,

src/pages/TaskManage/index.less

@@ -1,6 +1,4 @@
 .taskList {
-  height: calc(100vh - 70px);
-  overflow-y: scroll;
   border: none;
 
   .listItem {

src/pages/TaskManage/index.tsx

@@ -1,97 +1,57 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
-import {
-  MandateClass,
-  MandateStatus,
-  MandateType,
-} from '@/pages/TaskManage/constent';
+import { MandateType } from '@/pages/TaskManage/constent';
 import styles from '@/pages/TaskManage/index.less';
-import { PropTypes, mandateType } from '@/pages/TaskManage/index.types';
-import { getMandateList } from '@/services/TaskManage';
+import { IMandateType, IPropTypes } from '@/pages/TaskManage/index.types';
 import { RightOutlined } from '@ant-design/icons';
-import { useParams, useRequest } from '@umijs/max';
+import { connect, 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<PropTypes> = (props) => {
+const TaskManage: React.FC<IPropTypes> = (props) => {
+  const { mandateList, loading, dispatch } = props;
   const { projectID } = useParams();
-  console.log(projectID);
   const project_id = Number(projectID === '' ? '0' : projectID);
 
   const navigate = useNavigate();
+  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
 
-  const [pagination, setPagination] = useState({
-    total: 0,
-    pageSize: 5,
-    current: 1,
-  });
-  const [mandateList, setMandateList] = useState<mandateType[]>([]);
-
-  const {
-    run: runGetMandateList,
-    loading,
-    refresh: refreshMandateList,
-  } = useRequest(getMandateList, {
-    defaultParams: [
-      {
-        project_id,
-        pageSize: pagination.pageSize,
-        currentPage: pagination.current,
-      },
-    ],
-    onSuccess: () => {},
-    formatResult: (result) => {
-      const mandates = result.data.list;
-      mandates.forEach((mandate: mandateType) => {
-        mandate.Status =
-          MandateStatus.find((status) => status.value === mandate.Status) || 0;
-        mandate.MandateClass =
-          MandateClass.find(
-            (classItem) => classItem.value === mandate.MandateClass,
-          ) || 0;
-        mandate.MandateType =
-          MandateType.find((type) => type.value === mandate.MandateType) || 0;
+  useEffect(() => {
+    if (mandateList.length === 0) {
+      dispatch({
+        type: 'mandate/fetchMandateList',
+        payload: { project_id, pageSize: 9999 },
       });
-      setMandateList(result.data.list);
-      setPagination(result.data.pagination);
-    },
-  });
+    }
+  }, []);
 
-  const goToDetail = (item: mandateType) => {
-    navigate(
-      `/task-manage/detail?project_id=${project_id}&mandate_id=${item.Id}`,
-    );
-  };
+  useEffect(() => {
+    const typeCount = [];
+    for (let i = 0; i < 3; i++) {
+      typeCount[i] = mandateList.filter(
+        (item: IMandateType) => item.MandateType === i + 1,
+      ).length;
+    }
+    setMandateCount(typeCount);
+  }, [mandateList]);
 
-  const onPageChange = (page: number, pageSize: number) => {
-    runGetMandateList({ project_id, currentPage: page, pageSize });
+  const goTaskList = (item: number) => {
+    navigate(`/task-manage/list?project_id=${project_id}&mandateType=${item}`);
   };
 
-  useEffect(() => {
-    const bodyStyle = document.body.style.background;
-    document.body.style.background = 'none';
-    return () => {
-      document.body.style.background = bodyStyle;
-    };
-  }, []);
-
-  const makeList = (item: mandateType, index: number) => {
+  const makeList = (item: BaseOptionType, index: number) => {
     return (
       <List.Item
         className={styles.listItem}
         onClick={() => {
-          goToDetail(item);
+          goTaskList(item.value);
         }}
       >
-        <List.Item.Meta
-          title={
-            typeof item.MandateType === 'number' ? '' : item.MandateType.label
-          }
-          description={item.Detail}
-        />
+        <List.Item.Meta title={item.label} />
         <div className={styles.itemCount}>
-          <div className={styles.countNumber}>10</div>
+          <div className={styles.countNumber}>{mandateCount[index]}</div>
           <div>任务数量</div>
         </div>
         <RightOutlined />
@@ -107,24 +67,23 @@ const TaskManage: React.FC<PropTypes> = (props) => {
           className={styles.taskList}
           bordered
           itemLayout="horizontal"
-          dataSource={mandateList}
+          dataSource={MandateType}
           renderItem={makeList}
-          pagination={
-            mandateList.length
-              ? {
-                  position: 'bottom',
-                  align: 'end',
-                  simple: true,
-                  showSizeChanger: false,
-                  onChange: onPageChange,
-                  ...pagination,
-                }
-              : false
-          }
+          pagination={false}
         />
       </Spin>
     </PageContent>
   );
 };
 
-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,24 +1,25 @@
-export interface PropTypes {
-  projectID: string;
-}
+import { IWorkOrderType } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
+import { BaseOptionType } from 'rc-select/es/Select';
 
-export interface selectOption {
-  value: number;
-  label: string;
+export interface IPropTypes {
+  mandateList: IMandateType[];
+  loading: boolean;
+  dispatch: (args: { type: string; payload: object }) => void;
 }
 
-export interface mandateType {
+export interface IMandateType {
   Id: number;
   ProjectId: number;
-  MandateType: number | selectOption;
-  MandateClass: number | selectOption;
+  MandateType: number | BaseOptionType;
+  MandateClass: number | BaseOptionType;
   ResponsiblePeople: number;
   Detail: string;
   Summary: string;
   CreateTime: string;
-  Status: number | selectOption;
+  Status: number | BaseOptionType;
   Note: string;
   OperationLog: string;
   OperationPeople: number;
+  Records: IWorkOrderType[];
   ExtendId: string;
 }

src/pages/TaskManage/models/mandate.js

@@ -0,0 +1,28 @@
+import { getMandateList } from "../../../services/TaskManage";
+
+export default {
+  namespace: 'mandate',
+  state: {
+    mandateList: [],
+  },
+  effects: {
+    *fetchMandateList({ payload }, { call, put }) {
+      const response = yield call(getMandateList, payload);
+      if (response) {
+        yield put({
+          type: 'mandateListHandler',
+          payload: response.data.list,
+        });
+      }
+    },
+  },
+
+  reducers:{
+    mandateListHandler(state, { payload }) {
+      return {
+        ...state,
+        mandateList: payload,
+      };
+    },
+  }
+};

src/services/HardwareController.js

@@ -0,0 +1,12 @@
+import { request } from 'umi';
+
+export async function queryIotList(project_id) {
+  return request(`/api/iot/v1/aircon/list`, {
+    params: { project_id },
+  });
+}
+export async function queryLightList(project_id) {
+  return request(`/api/iot/v1/lamp/list`, {
+    params: { project_id },
+  });
+}

src/services/TaskManage.js

@@ -24,7 +24,7 @@ export async function getMandateChildList(params) {
 
 /**
  * 获取任务详情
- * @param params.mandate_idz
+ * @param params.mandate_id
  * @param params.project_id
  * @returns {Promise<*>}
  */