系统自检模块

.umirc.ts

@@ -59,6 +59,11 @@ export default defineConfig({
       path: '/self-inspection/:projectId',
       component: './EqSelfInspection',
     },
+    {
+      name: '自检列表',
+      path: '/self-inspection/list/:projectId',
+      component: './EqSelfInspection/List',
+    },
     {
       name: '自检报告',
       path: '/self-inspection/detail/:projectId/:routeId',

src/components/PageTitle/index.js

@@ -5,15 +5,22 @@ import styles from './index.less';
 export default (props) => {
   const { children, returnable = false } = props;
 
+  const handleOnClick = () => {
+    returnable && history.back();
+  };
+
   return (
-    <div className={styles.titleBox}>
+    <div className={styles.titleBox} onClick={handleOnClick}>
       {returnable ? (
-        <LeftOutlined style={{ fontSize: 22 }} onClick={() => history.back()} />
+        <LeftOutlined style={{ fontSize: 22, cursor: 'pointer' }} />
       ) : (
         <span className={styles.titleBar} />
       )}
 
-      <span className={styles.title} style={{ fontSize: 22, paddingLeft: 12 }}>
+      <span
+        className={styles.title}
+        style={returnable ? { cursor: 'pointer' } : null}
+      >
         {children}
       </span>
     </div>

src/pages/EqSelfInspection/PatrolArtificialRecord/index.js

@@ -0,0 +1,327 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { UnityAction } from '@/utils/utils';
+import { connect, history, useParams } from '@umijs/max';
+import { Button, Col, DatePicker, Form, Row, Select, Table } from 'antd';
+import dayjs from 'dayjs';
+import { Fragment, useEffect, useState } from 'react';
+import style from './index.less';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const statusList = [
+  { key: 1, value: '0', label: '正常' },
+  { key: 2, value: '1', label: '异常' },
+];
+
+function PatrolArtificialRecord(props) {
+  const { loading, list, processList = [], dispatch } = props;
+
+  const { projectId } = useParams();
+  const [form] = Form.useForm();
+  const [pagination, setPagination] = useState({ pageSize: 10, current: 1 });
+  const [groupId, setGroupId] = useState('');
+  const [rowId, setRowId] = useState();
+
+  const getColumns = () => {
+    var arr = [
+      {
+        title: '巡检时间',
+        dataIndex: 'CreatedTime',
+        width: '26%',
+        render: (text) => {
+          return text ? dayjs(text).format('YYYY-MM-DD HH:mm') : null;
+        },
+      },
+      {
+        title: '巡检路线',
+        dataIndex: 'RouteInfo',
+        width: '24%',
+        render: (record) => {
+          return record.Name;
+        },
+      },
+      {
+        title: '工艺段',
+        // dataIndex: 'RouteInfo',
+        width: '24%',
+        render: (record) => {
+          // GroupID
+          const name = processList?.find(
+            (item) => item.group_id == record?.RouteInfo?.GroupID,
+          )?.name;
+          return name || '-';
+        },
+      },
+      {
+        title: '状态',
+        width: '10%',
+        dataIndex: 'Status',
+        render: (text) => {
+          return text == 0 ? (
+            '正常'
+          ) : (
+            <div style={{ color: '#FF8600' }}>异常</div>
+          );
+        },
+      },
+    ];
+    arr.push({
+      title: '操作',
+      width: '16%',
+      render: (text, record) => {
+        return (
+          <Fragment>
+            {
+              <>
+                <a
+                  style={{ color: '#7BFFFB' }}
+                  onClick={(e) => {
+                    goToDetail(record, e);
+                  }}
+                >
+                  详情
+                </a>
+              </>
+            }
+          </Fragment>
+        );
+      },
+    });
+    arr = [
+      {
+        title: '自检时间',
+        dataIndex: 'CreatedTime',
+        width: '26%',
+        render: (text) => {
+          return text ? dayjs(text).format('YYYY-MM-DD HH:mm') : null;
+        },
+      },
+      {
+        title: '工艺段',
+        // dataIndex: 'RouteInfo',
+        width: '24%',
+        render: (record) => {
+          // GroupID
+          const name = processList?.find(
+            (item) => item.group_id == record?.RouteInfo?.GroupID,
+          )?.name;
+          return name || '-';
+        },
+      },
+      {
+        title: '状态',
+        width: '10%',
+        dataIndex: 'Status',
+        render: (text) => {
+          return text == 0 ? (
+            '正常'
+          ) : (
+            <div style={{ color: '#FF8600' }}>异常</div>
+          );
+        },
+      },
+      {
+        title: '操作',
+        width: '16%',
+        render: (text, record) => {
+          return (
+            <Fragment>
+              {
+                <>
+                  <a
+                    style={{ color: '#7BFFFB' }}
+                    onClick={(e) => {
+                      goToDetail(record, e);
+                    }}
+                  >
+                    详情
+                  </a>
+                </>
+              }
+            </Fragment>
+          );
+        },
+      },
+    ];
+    return arr;
+  };
+
+  const getRecord = (pagination) => {
+    setRowId(null);
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      fieldsValue.projectId = projectId;
+      fieldsValue.auto = 1;
+      fieldsValue.startDate = dayjs(fieldsValue.startDate).format('YYYY-MM-DD');
+      fieldsValue.endDate = dayjs(fieldsValue.endDate).format('YYYY-MM-DD');
+      fieldsValue.pageSize = pagination.pageSize;
+      fieldsValue.currentPage = pagination.current;
+      dispatch({
+        type: 'patrolArtificialRecord/queryPatrol',
+        payload: { ...fieldsValue },
+        callback: (data) => {
+          setPagination(data.pagination);
+        },
+      });
+    });
+  };
+
+  const handleSearch = (e) => {
+    e?.preventDefault();
+    getRecord(pagination);
+  };
+  const TableOnChange = (tempPagination) => {
+    getRecord(tempPagination);
+  };
+  const goToDetail = (record, e) => {
+    e.stopPropagation();
+    UnityAction.sendMsg('reportDetail', '');
+    history.push(
+      `/unity/eq-self-ins-statistics/detail/${projectId}/${record.Id}?JWT-TOKEN=`,
+    );
+  };
+  const setRowClassName = (record) => {
+    return record.Id === rowId ? style.clickRow : '';
+  };
+
+  const onRowClick = (event, record) => {
+    setRowId(record.Id);
+    dispatch({
+      type: 'patrolArtificialRecord/queryPatrolRecord',
+      payload: { recordId: record.Id },
+      callback: (data) => {
+        UnityAction.sendMsg('recordData', data);
+      },
+    });
+  };
+
+  useEffect(() => {
+    UnityAction.sendMsg('type', 2);
+    handleSearch();
+
+    dispatch({
+      type: 'patrolArtificialRecord/queryRouteInfoList',
+      payload: { ProjectId: projectId },
+    });
+    dispatch({
+      type: 'patrolArtificialRecord/queryProcessSection',
+      payload: projectId,
+    });
+
+    UnityAction.addEventListener('group_id', (e) => {
+      setGroupId(e);
+    });
+
+    return () => {
+      UnityAction.off('group_id');
+    };
+  }, []);
+  return (
+    <PageContent>
+      <PageTitle></PageTitle>
+      <Form
+        layout="vertical"
+        labelAlign="left"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        onSubmit={handleSearch}
+        form={form}
+      >
+        <Row gutter={16}>
+          <Col span={12}>
+            <FormItem
+              label="开始时间"
+              name="startDate"
+              initialValue={dayjs().subtract(1, 'M')}
+            >
+              <div style={{ width: '95%' }}>
+                <DatePicker allowClear={false} placeholder="选择开始日期" />
+              </div>
+            </FormItem>
+          </Col>
+          <Col span={12}>
+            <FormItem label="结束时间" name="endDate" initialValue={dayjs()}>
+              <div style={{ width: '95%' }}>
+                <DatePicker allowClear={false} placeholder="选择结束日期" />
+              </div>
+            </FormItem>
+          </Col>
+        </Row>
+        <Row gutter={16}>
+          <Col span={12}>
+            <FormItem label="状态" name="status">
+              <Select
+                placeholder="选择状态"
+                allowClear
+                style={{ width: '95%' }}
+              >
+                {statusList.map((item) => {
+                  return (
+                    <Option key={item.key} value={item.value}>
+                      {item.label}
+                    </Option>
+                  );
+                })}
+              </Select>
+            </FormItem>
+          </Col>
+          <Col span={12}>
+            <FormItem label="工艺段" name="groupId">
+              <Select
+                placeholder="选择工艺段"
+                allowClear
+                style={{ width: '95%' }}
+              >
+                {processList?.map((item) => {
+                  return (
+                    <Option key={item.id} value={item.group_id}>
+                      {item.name}
+                    </Option>
+                  );
+                })}
+              </Select>
+            </FormItem>
+          </Col>
+        </Row>
+        <div style={{ overflow: 'hidden' }}>
+          <Button
+            type="primary"
+            htmlType="submit"
+            style={{ float: 'right', marginBottom: 10 }}
+          >
+            查询
+          </Button>
+        </div>
+      </Form>
+      <div className="table-total">当前列表总数 {pagination?.total || 0}</div>
+      <Table
+        bordered
+        loading={loading}
+        columns={getColumns()}
+        dataSource={list.filter((item) => {
+          if (!groupId) return true;
+          if (groupId == item.RouteInfo.GroupID) return true;
+          return false;
+        })}
+        pagination={pagination}
+        onChange={TableOnChange}
+        onRow={(record) => {
+          return {
+            onClick: (event) => {
+              onRowClick(event, record);
+            }, // 点击行
+          };
+        }}
+        rowClassName={setRowClassName}
+      />
+    </PageContent>
+  );
+}
+
+export default connect(({ patrolArtificialRecord, loading }) => ({
+  list: patrolArtificialRecord.list,
+  routeInfoList: patrolArtificialRecord.routeInfoList,
+  loading: loading.models.patrolArtificialRecord,
+  processList: patrolArtificialRecord.processList,
+}))(PatrolArtificialRecord);

src/pages/EqSelfInspection/PatrolArtificialRecord/index.less

@@ -0,0 +1,6 @@
+.clickRow {
+  background-color: #225ea8;
+}
+.ant-table-tbody > .clickRow:hover > td {
+  background-color: #225ea8;
+}

src/pages/EqSelfInspection/PatrolArtificialRecord/models/patrolRecord.js

@@ -0,0 +1,122 @@
+import {
+  getRouteList,
+  queryPatrol,
+  queryPatrolRecord,
+} from '@/services/eqSelfInspection';
+import { queryProcessSection } from '@/services/SmartOps';
+export default {
+  namespace: 'patrolArtificialRecord',
+  state: {
+    list: [],
+    routeInfoList: [],
+    processList: [],
+  },
+  effects: {
+    *queryPatrol({ payload, callback }, { call, put }) {
+      let response = yield call(queryPatrol, payload);
+      if (response) {
+        yield put({
+          type: 'save',
+          payload: { list: response?.data?.list },
+        });
+        callback?.(response?.data);
+      }
+    },
+    *queryRouteInfoList({ payload }, { call, put }) {
+      let response = yield call(getRouteList, payload);
+      if (response) {
+        yield put({
+          type: 'save',
+          payload: { routeInfoList: response?.data },
+        });
+      }
+    },
+    *queryPatrolRecord({ payload, callback }, { call }) {
+      let { data } = yield call(queryPatrolRecord, payload);
+      if (data) {
+        const creatorName = data.CreatorUser && data.CreatorUser.CName;
+        var status = {};
+        let Items = [],
+          sensor = [];
+        const getItems = (item, patrolType) => {
+          let key;
+          if (patrolType == 1) {
+            key = item.PatrolName;
+          } else {
+            key = item.DeviceCode + '-' + item.DeviceName;
+          }
+          item.TemplateItem = item.TemplateItem || {};
+          item.patrolType = patrolType;
+          item.ThresholdEnum = item.TemplateItem.ThresholdEnum;
+          item.Type = item.TemplateItem.Type;
+          if (!status[key]) status[key] = { normal: 0, error: 0 };
+          if (item.Status == 1) {
+            status[key].error++;
+          } else {
+            status[key].normal++;
+          }
+          return item;
+        };
+        data.ItemsExtend.forEach((item) => {
+          console.log(Items);
+          if (item.PatrolCardRecordItemAssocThreshold) {
+            var arr = item.PatrolCardRecordItemAssocThreshold.map((i) =>
+              getItems(i, 1),
+            );
+            Items = Items.concat(arr);
+          } else {
+            Items.push(getItems(item, 0));
+          }
+        });
+        data.ItemsSensor.forEach((item) => {
+          if (item.PatrolCardRecordItemAssocThreshold) {
+            var arr = item.PatrolCardRecordItemAssocThreshold.map((i) =>
+              getItems(i, 1),
+            );
+            sensor = sensor.concat(arr);
+          } else {
+            sensor.push(getItems(item, 0));
+          }
+        });
+
+        data.Items = Items;
+        data.sensor = sensor;
+
+        data.Points.forEach((item) => {
+          let key;
+          if (item.PatrolType == 1) {
+            key = item.DeviceName;
+          } else {
+            key = item.DeviceCode + '-' + item.DeviceName;
+          }
+          item.creatorName = creatorName;
+          item.level = `${item.ExceptionLevel || '-'}/${
+            item.DeviceLevel || '-'
+          }`;
+          item.status = status[key] || { normal: 0, error: 0 };
+        });
+        callback && callback(data);
+      }
+      // if (response) {
+      //   callback?.(response?.data);
+      // }
+    },
+    *queryProcessSection({ payload }, { call, put }) {
+      const list = yield call(queryProcessSection, payload);
+      if (list) {
+        yield put({
+          type: 'save',
+          payload: { processList: list },
+        });
+      }
+    },
+  },
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};

src/pages/EqSelfInspection/ReportDetail.js

@@ -1,9 +1,8 @@
-import { UnityAction } from '@/utils/utils';
-import { connect, history, useParams } from '@umijs/max';
-import { Button } from 'antd';
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { connect, useParams } from '@umijs/max';
 import { useEffect } from 'react';
 import Detail from './components/Detail';
-import styles from './index.less';
 
 const ReportDetail = (props) => {
   const { data, dispatch, loading } = props;
@@ -21,23 +20,12 @@ const ReportDetail = (props) => {
   }, []);
 
   return (
-    <div>
-      <div className={styles.page}>
-        {routeId && (
-          <Button
-            style={{ marginBottom: 20 }}
-            type="primary"
-            onClick={() => {
-              UnityAction.sendMsg('detailToList', '');
-              history.go(-1);
-            }}
-          >
-            返回
-          </Button>
-        )}
+    <PageContent closeable={false}>
+      <PageTitle returnable>自检报告</PageTitle>
+      <div style={{ marginTop: 20 }}>
         <Detail data={data} projectId={projectId} loading={loading} />
       </div>
-    </div>
+    </PageContent>
   );
 };
 export default connect(({ loading, eqSelfInspection }) => ({

src/pages/EqSelfInspection/Statistics.js

@@ -1,10 +1,12 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
 import {
   patrolOverview,
   patrolOverviewLine,
   patrolOverviewPie,
 } from '@/services/eqSelfInspection';
-import { history, useParams, useRequest } from '@umijs/max';
-import { Button, Spin } from 'antd';
+import { useParams, useRequest } from '@umijs/max';
+import { Spin } from 'antd';
 import dayjs from 'dayjs';
 import * as echarts from 'echarts';
 import { useEffect, useRef } from 'react';
@@ -136,39 +138,17 @@ const Statistics = (props) => {
     };
   }, []);
   return (
-    <div>
-      <Button
-        type="primary"
-        style={{ marginBottom: 12 }}
-        onClick={() => {
-          history.go(-1);
-        }}
-      >
-        返回
-      </Button>
-      <div className={styles.itemMain}>
+    <PageContent closeable={false}>
+      <PageTitle returnable>系统自检统计</PageTitle>
+      <div className={`${styles.itemMain2} card-box`} style={{padding: '40px 0'}}>
         <div style={{ display: 'flex' }}>
           {overviewData?.map((item) => (
             <Text num={item.num} label={item.label} />
           ))}
         </div>
       </div>
-      <div className={styles.itemMain}>
-        <div className={styles.tabs}>
-          近一周数据统计
-          {/* {radioData?.map(item => (
-          <div
-            key={item.key}
-            className={`${styles.item} ${active == item.key ? styles.active : ''}`}
-            onClick={() => {
-              setActive(item.key);
-              onRadioChange(item.key);
-            }}
-          >
-            {item.label}
-          </div>
-        ))} */}
-        </div>
+      <div className={`${styles.itemMain2} card-box`}>
+        <div className={styles.tabs}>近一周数据统计</div>
         <Spin spinning={loading}>
           <div
             ref={lineDomRef}
@@ -176,7 +156,7 @@ const Statistics = (props) => {
           />
         </Spin>
       </div>
-      <div className={styles.itemMain}>
+      <div className={`${styles.itemMain2} card-box`}>
         <Spin spinning={pieLoading}>
           <div
             ref={pieDomRef}
@@ -184,7 +164,7 @@ const Statistics = (props) => {
           />
         </Spin>
       </div>
-    </div>
+    </PageContent>
   );
 };
 export default Statistics;
@@ -221,7 +201,7 @@ const getLineOption = (time, chartData, name) => {
       axisPointer: {
         type: 'cross',
         crossStyle: {
-          color: '#999',
+          color: '#333',
         },
       },
     },
@@ -237,7 +217,7 @@ const getLineOption = (time, chartData, name) => {
       },
       axisLine: {
         lineStyle: {
-          color: '#c9d2d2',
+          color: '#555',
         },
       },
       axisLabel: {
@@ -258,11 +238,11 @@ const getLineOption = (time, chartData, name) => {
         //   padding: [0, 0, 20, 0],
         // },
         axisLabel: {
-          color: '#c9d2d2',
+          color: '#555',
         },
         axisLabel: {
           fontSize: 16,
-          color: '#c9d2d2',
+          color: '#555',
         },
         axisLine: {
           show: false,
@@ -285,7 +265,7 @@ const getLineOption = (time, chartData, name) => {
     ],
     legend: {
       textStyle: {
-        color: '#c9d2d2',
+        color: '#555',
         fontSize: 18,
       },
       lineStyle: {},
@@ -296,7 +276,7 @@ const getLineOption = (time, chartData, name) => {
       left: '50%',
       textAlign: 'center',
       textStyle: {
-        color: '#c9d2d2',
+        color: '#555',
         fontWeight: 'normal',
         fontSize: 18,
       },
@@ -352,7 +332,7 @@ const getPieOption = (chartData, name) => {
       left: '50%',
       textAlign: 'center',
       textStyle: {
-        color: '#c9d2d2',
+        color: '#555',
         fontWeight: 'normal',
         fontSize: 18,
       },
@@ -375,7 +355,7 @@ const getPieOption = (chartData, name) => {
       orient: 'horizontal',
       // left: 'left',
       textStyle: {
-        color: '#c9d2d2',
+        color: '#555',
         fontSize: 18,
       },
     },

src/pages/EqSelfInspection/components/Detail.js

@@ -4,7 +4,6 @@ import { changeRecordStatus, getDumuDetail } from '@/services/eqSelfInspection';
 import { UnityAction } from '@/utils/utils';
 import { connect, useRequest } from '@umijs/max';
 import {
-  Card,
   Col,
   DatePicker,
   Form,
@@ -29,7 +28,6 @@ function Detail(props) {
   const [dumuList, setDumuList] = useState([]);
   const sendMessageToUnity = (select, data) => {
     setSelect(select);
-    // console.log(data);
     if (window.HightlightEquipment) {
       window.HightlightEquipment(data);
     }
@@ -39,11 +37,11 @@ function Detail(props) {
       case '警告':
         return '#FFE26D';
       case '异常':
-        return '#FF8600';
+        return '#FE5850';
       case '正常':
-        return '#60FE76';
+        return '#12CEB3';
       default:
-        return '#60FE76';
+        return '#12CEB3';
     }
   };
   const { run: detailRun } = useRequest(getDumuDetail, {
@@ -101,160 +99,122 @@ function Detail(props) {
     });
   }, [data?.dumuList]);
 
-  // useEffect(() => {
-  //   dispatch({
-  //     type: 'eqSelfInspection/getPatrolRecordMandateInfo',
-  //     payload: {
-  //       extend_id: data.Id,
-  //       project_id: projectId,
-  //       mandate_type: 2
-  //     },
-  //   });
-  // }, [data]);
-
   return (
-    <Spin spinning={loading}>
+    <Spin spinning={loading} wrapperClassName="card-box">
       <div className={styles.card}>
-        <Card title="自检报告">
-          <div>
-            <Row>
-              <Col span={24} style={{ fontSize: 20 }}>
-                自检时间：{data?.CreatedTime}
-              </Col>
-            </Row>
-            <Row>
-              <Col span={8} style={{ fontSize: 20 }}>
-                自检路线：{data?.RouteInfo?.Name}
-              </Col>
-              <Col span={8} style={{ fontSize: 20 }}>
-                工艺段：{data?.RouteInfo?.GroupID}
+        <Row>
+          <Col span={24} className={styles.cardText}>
+            自检时间：{data?.CreatedTime}
+          </Col>
+        </Row>
+        <Row>
+          <Col span={8} className={styles.cardText}>
+            自检路线：{data?.RouteInfo?.Name}
+          </Col>
+          <Col span={8} className={styles.cardText}>
+            工艺段：{data?.RouteInfo?.GroupID}
+          </Col>
+        </Row>
+        <Row>
+          {result?.map((item) => {
+            return (
+              <Col span={8} className={styles.cardText}>
+                {item?.label}：
+                <span style={{ color: item.color, fontWeight: 'bold' }}>
+                  {item?.value}
+                </span>
               </Col>
-            </Row>
-            <Row>
-              {result?.map((item) => {
-                return (
-                  <Col span={8} style={{ display: 'flex', fontSize: 20 }}>
-                    <div>{item?.label}：</div>
-                    <div style={{ color: item.color }}>{item?.value}</div>
-                  </Col>
-                );
-              })}
-            </Row>
-            {/* <Row>
-            <Col span={8} style={{ display: 'flex', fontSize: 20 }}>
-              <div>任务类型：</div>
-              <div style={{ color: '#7bfffb' }}>系统自检</div>
-            </Col>
-            <Col span={8} style={{ display: 'flex', fontSize: 20 }}>
-              <div>任务负责人：</div>
-              <div style={{ color: '#fff' }}>{userList.find(item => item.ID === mandateInfo?.ResponsiblePeople)?.CName || ''}</div>
-            </Col>
-            <Col span={8} style={{ display: 'flex', fontSize: 20 }}>
-              <div>任务状态：</div>
-              <div style={{ color: '#7bfffb' }}>{getStatusText(mandateInfo?.Status)}</div>
-            </Col>
-          </Row> */}
-          </div>
-        </Card>
-      </div>
-
-      {/* 设备自检报告 */}
-      <ReportCom
-        sendMessageToUnity={sendMessageToUnity}
-        select={select}
-        waringData={data?.extendWarningData}
-        allData={data?.extendWarningAllData}
-        key="extend"
-        type={'extend'}
-        userList={userList}
-        title={
-          <>
-            <div className={styles.text}>设备自检报告</div>
-          </>
-        }
-      ></ReportCom>
-
-      {/* 工艺自检报告"> */}
-      <div>
-        <div className={styles.tabBarExtraContent}>
-          <div className={styles.text} style={{ height: 52, width: '50%' }}>
-            <>
-              <div>工艺自检报告</div>
-            </>
-          </div>
-          <div className={styles.abnormal}>
-            <div className={styles.text} style={{ float: 'right' }}>
-              异常({data?.FaultAnalysis?.length || 0})
-            </div>
-          </div>
-        </div>
-        <AalysisTable
-          onClickItem={sendMessageToUnity}
-          select={select}
-          data={data}
-        />
+            );
+          })}
+        </Row>
       </div>
-      {/* 安全隐患自检报告"> */}
-      <div>
-        <div className={styles.tabBarExtraContent}>
-          <div className={styles.text} style={{ height: 52, width: '50%' }}>
-            <>
-              <div>安全隐患自检报告</div>
-            </>
-          </div>
-        </div>
-        {/* 环境异常 */}
+      <div style={{ padding: 20, background: '#fff' }}>
+        {/* 设备自检报告 */}
         <ReportCom
           sendMessageToUnity={sendMessageToUnity}
           select={select}
-          waringData={data?.sensorWaringData}
-          allData={data?.sensor}
-          data={data?.sensorWaringData}
-          key="sensor"
-          type={'sensor'}
-          userList={userList}
-          title={<div style={{ color: '#7bfffb', fontSize: 22 }}>环境异常</div>}
-        ></ReportCom>
-
-        {/* 安防检测异常 */}
-        <ReportDumCom
-          data={dumuList}
-          title={
-            <div style={{ color: '#7bfffb', fontSize: 22 }}>安防检测异常</div>
-          }
-        />
-
-        {/* 电器检测异常 */}
-        <ReportCom
-          sendMessageToUnity={sendMessageToUnity}
-          select={select}
-          waringData={[]}
-          allData={[]}
+          waringData={data?.extendWarningData}
+          allData={data?.extendWarningAllData}
           key="extend"
           type={'extend'}
           userList={userList}
           title={
-            <div style={{ color: '#7bfffb', fontSize: 22 }}>电气检测异常</div>
-          }
-        ></ReportCom>
-
-        {/* 密闭空间检测异常 */}
-        <ReportCom
-          sendMessageToUnity={sendMessageToUnity}
-          select={select}
-          waringData={[]}
-          allData={[]}
-          key="extend"
-          type={'extend'}
-          userList={userList}
-          title={
-            <div style={{ color: '#7bfffb', fontSize: 22 }}>
-              密闭空间检测异常
+            <div>
+              <div className={styles.tableTitle}>设备自检报告</div>
             </div>
           }
         ></ReportCom>
-      </div>
 
+        {/* 工艺自检报告"> */}
+        <div className={styles.content}>
+          <div className={styles.tableStatus}>
+            异常({data?.FaultAnalysis?.length || 0})
+          </div>
+          <div className={styles.tableTitle2}>工艺自检报告</div>
+
+          <AalysisTable
+            onClickItem={sendMessageToUnity}
+            select={select}
+            data={data}
+          />
+        </div>
+        {/* 安全隐患自检报告"> */}
+        <div className={styles.content}>
+          <div className={styles.tableTitle2}>安全隐患自检报告</div>
+          {/* 环境异常 */}
+          <ReportCom
+            sendMessageToUnity={sendMessageToUnity}
+            select={select}
+            waringData={data?.sensorWaringData}
+            allData={data?.sensor}
+            data={data?.sensorWaringData}
+            key="sensor"
+            type={'sensor'}
+            userList={userList}
+            title={
+              <div style={{ color: '#1677ff', fontSize: 22 }}>环境异常</div>
+            }
+          ></ReportCom>
+
+          {/* 安防检测异常 */}
+          <ReportDumCom
+            data={dumuList}
+            title={
+              <div style={{ color: '#1677ff', fontSize: 22 }}>安防检测异常</div>
+            }
+          />
+
+          {/* 电器检测异常 */}
+          <ReportCom
+            sendMessageToUnity={sendMessageToUnity}
+            select={select}
+            waringData={[]}
+            allData={[]}
+            key="extend"
+            type={'extend'}
+            userList={userList}
+            title={
+              <div style={{ color: '#1677ff', fontSize: 22 }}>电气检测异常</div>
+            }
+          ></ReportCom>
+
+          {/* 密闭空间检测异常 */}
+          <ReportCom
+            sendMessageToUnity={sendMessageToUnity}
+            select={select}
+            waringData={[]}
+            allData={[]}
+            key="extend"
+            type={'extend'}
+            userList={userList}
+            title={
+              <div style={{ color: '#1677ff', fontSize: 22 }}>
+                密闭空间检测异常
+              </div>
+            }
+          ></ReportCom>
+        </div>
+      </div>
       {/* </Card> */}
     </Spin>
   );
@@ -340,7 +300,7 @@ export function DeviceTable(props) {
               <div>
                 <i
                   className={styles.iconStatus}
-                  style={{ background: '#60FE76' }}
+                  style={{ background: '#12CEB3' }}
                 ></i>
                 正常
               </div>
@@ -350,7 +310,7 @@ export function DeviceTable(props) {
               <div>
                 <i
                   className={styles.iconStatus}
-                  style={{ background: '#FF8600' }}
+                  style={{ background: '#FE5850' }}
                 ></i>
                 异常
               </div>
@@ -678,7 +638,7 @@ export function WarningTable(props) {
               <div>
                 <i
                   className={styles.iconStatus}
-                  style={{ background: '#60FE76' }}
+                  style={{ background: '#12CEB3' }}
                 ></i>
                 正常
               </div>
@@ -688,7 +648,7 @@ export function WarningTable(props) {
               <div>
                 <i
                   className={styles.iconStatus}
-                  style={{ background: '#FF8600' }}
+                  style={{ background: '#FE5850' }}
                 ></i>
                 异常
               </div>
@@ -795,40 +755,46 @@ function ReportCom(props) {
   };
   return (
     <div className={styles.detailCard}>
-      <Tabs
-        defaultActiveKey="1"
-        tabBarExtraContent={
-          <div className={styles.tabBarExtraContent}>{title} </div>
-        }
-        onChange={handleTabsChange}
-      >
-        <Tabs.TabPane tab={`异常/警告(${waringData.length || 0})`} key="1">
-          {activeKey == '1' && (
-            <WarningTable
-              onClickItem={sendMessageToUnity}
-              select={select}
-              items={waringData}
-              key={type}
-              data={data}
-              type={type}
-              userList={userList}
-            />
-          )}
-        </Tabs.TabPane>
-        <Tabs.TabPane tab={`全部(${allData.length || 0})`} key="2">
-          {activeKey == '2' && (
-            <DeviceTable
-              onClickItem={sendMessageToUnity}
-              select={select}
-              items={allData}
-              data={data}
-              key={type}
-              type={type}
-              userList={userList}
-            />
-          )}
-        </Tabs.TabPane>
-      </Tabs>
+      <div className={styles.tableTop}>
+        {title}
+        <Tabs
+          style={{ float: 'right' }}
+          defaultActiveKey="1"
+          onChange={handleTabsChange}
+        >
+          <Tabs.TabPane
+            tab={`异常/警告(${waringData.length || 0})`}
+            key="1"
+          ></Tabs.TabPane>
+          <Tabs.TabPane
+            tab={`全部(${allData.length || 0})`}
+            key="2"
+          ></Tabs.TabPane>
+        </Tabs>
+      </div>
+
+      {activeKey == '1' && (
+        <WarningTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={waringData}
+          key={type}
+          data={data}
+          type={type}
+          userList={userList}
+        />
+      )}
+      {activeKey == '2' && (
+        <DeviceTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={allData}
+          data={data}
+          key={type}
+          type={type}
+          userList={userList}
+        />
+      )}
     </div>
   );
 }

src/pages/EqSelfInspection/components/PatrolReportDetail.less

@@ -24,38 +24,18 @@
 }
 .detailCard {
   margin: 10px 0 10px 0;
-  :global {
-    .ant-tabs-bar {
-      display: flex;
-      flex-direction: row;
-    }
-    .ant-tabs-extra-content {
-      width: 50%;
-    }
-    .ant-tabs-nav-container {
-      width: 50%;
-    }
-    .ant-tabs-nav-wrap {
-      background: none;
-      font-size: 18px;
-      width: 300px;
-      float: right;
-    }
-  }
 }
 .text {
   .tabBarExtraContent;
   font-size: 26px;
   text-align: center;
-  color: white;
-  margin: 0 0 16px 0;
 }
 .abnormal {
   // margin: 10px 0 10px 0;
   height: 51px;
   width: 50%;
   .text {
-    color: #7bfffb;
+    color: #1677ff;
     font-size: 18px;
   }
 }
@@ -64,12 +44,59 @@
   // justify-content: center;
   align-items: center;
   height: 100%;
+  position: relative;
+}
+.tableTop {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .card {
-  :global {
-    .ant-card-head-title {
-      display: flex;
-      justify-content: center;
-    }
-  }
+  background: #eff5fc;
 }
+.cardText {
+  padding: 20px;
+  font-size: 20px;
+}
+.tableTitle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 26px;
+  transform: translate(-50%, -50%);
+}
+.tableTitle2 {
+  font-size: 26px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+.tableStatus {
+  color: #1677ff;
+  font-size: 18px;
+  position: absolute;
+  right: 10px;
+}
+.content {
+  margin-top: 50px;
+  position: relative;
+}
+:global {
+  .ant-table,
+  .ant-table-cell,
+  .ant-table-placeholder {
+    background: transparent !important;
+  }
+  .ant-table-cell::before {
+    display: none;
+  }
+  .ant-table-thead {
+    background: #cbe0f6;
+  }
+  .ant-table-thead > tr > th,
+  .ant-table-tbody > tr > td {
+    padding: 8px !important;
+    font-size: 22px;
+  }
+}

src/pages/EqSelfInspection/index.js

@@ -1,5 +1,7 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
 import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
-import { FundFilled } from '@ant-design/icons';
+import { DiffFilled, FundFilled } from '@ant-design/icons';
 import { connect, history, useLocation, useParams } from '@umijs/max';
 import { Button, Form, Modal, Select, Spin, message } from 'antd';
 import dayjs from 'dayjs';
@@ -107,23 +109,17 @@ const EqSelfInspection = (props) => {
   }, [autoReport]);
 
   return (
-    <div>
+    <PageContent>
+      <PageTitle>系统自检</PageTitle>
       <Spin spinning={loading} tip="正在自检中...">
-        <div className={styles.itemMain} style={{ padding: 20 }}>
+        <div className={`${styles.itemMain} card-box`} style={{ padding: 20 }}>
           <div style={{ position: 'relative', display: 'flex' }}>
             <div style={{ fontSize: 24 }}>
               自检间隔：{autoReport?.RouteInfo?.PlanDur}h
             </div>
             <div className={styles.icon}>
-              <FundFilled
-                onClick={() => {
-                  history.push(
-                    `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
-                  );
-                }}
-              />
-              {/* <DiffFilled
-                style={{ cursor: 'pointer' }}
+              <DiffFilled
+                style={{ cursor: 'pointer', marginRight: 20 }}
                 onClick={() => {
                   history.push(
                     `/elf-ins-statistics/patrol-route/${projectId}/1/reocrd?JWT-TOKEN=${GetTokenFromUrl()}&isNew=${1}`,
@@ -131,13 +127,12 @@ const EqSelfInspection = (props) => {
                 }}
               />
               <FundFilled
-                style={{ cursor: 'pointer' }}
                 onClick={() => {
                   history.push(
                     `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
                   );
                 }}
-              /> */}
+              />
             </div>
           </div>
           <div className={styles.logoInfo}>
@@ -169,7 +164,7 @@ const EqSelfInspection = (props) => {
                 style={{
                   position: 'absolute',
                   display: 'flex',
-                  alignItems: 'center',
+                  alignItems: 'flex-end',
                   right: 0,
                   height: '100%',
                 }}
@@ -243,7 +238,7 @@ const EqSelfInspection = (props) => {
           </Form>
         </Modal>
       </Spin>
-    </div>
+    </PageContent>
   );
 };
 
@@ -282,7 +277,7 @@ const Item = (props) => {
   };
   return (
     <div
-      className={styles.itemMain}
+      className={`${styles.itemMain} card-box`}
       style={{
         paddingBottom: children ? 20 : 0,
       }}

src/pages/EqSelfInspection/index.less

@@ -13,20 +13,18 @@
   justify-content: center;
   align-items: center;
   .logo {
-    // background: url('@/assets/newUI/defense.png') no-repeat center;
+    background: url('@/assets/defense.png') no-repeat center;
     background-size: 100% 100%;
     width: 144px;
     height: 159px;
   }
-  > div {
-    margin: 0px 0 8px 0;
-  }
 }
 .insbtn {
   display: flex;
   position: relative;
   width: 100%;
   justify-content: center;
+  margin-top: 20px;
   :global {
     .ant-btn-primary {
       font-size: 20px;
@@ -61,7 +59,7 @@
   }
 }
 .warningItem {
-  // border-bottom: 2px solid #c9d2d2;
+  // border-bottom: 2px solid #555;
   height: 60px;
   display: flex;
   align-items: center;
@@ -73,17 +71,19 @@
 .reportBtn {
   display: flex;
   justify-content: center;
-  :global {
-  }
 }
 .itemMain {
-  // background: url('@/assets/newUI/tabsBg.png') no-repeat center;
   background-size: 100% 100%;
   border: 1px;
   border-radius: 12px;
   margin-bottom: 20px;
+  margin-top: 30px;
   padding: 0 10px;
 }
+.itemMain2 {
+  .itemMain;
+  padding: 20px 10px;
+}
 .statisticsText {
   display: flex;
   flex-direction: column;
@@ -92,10 +92,14 @@
   flex: 1;
   font-size: 26px;
   .num {
-    color: #fadb14;
+    color: #F5AF3A;
+    font-size: 30px;
+    margin-bottom: 14px;
+    font-weight: bold;
+    letter-spacing: 2px;
   }
   .label {
-    color: #c9d2d2;
+    color: #555;
   }
 }
 .dialogBtns {
@@ -125,7 +129,7 @@
   display: flex;
   // flex-direction: row-reverse;
   display: flex;
-  color: #c9d2d2;
+  color: #555;
   font-size: 22px;
   justify-content: center;
   .item {

src/pages/Smart/OptimizationTasks.less

@@ -66,6 +66,9 @@
   .ant-table-placeholder {
     background: transparent !important;
   }
+  .ant-table-cell::before {
+    display: none;
+  }
   .ant-table-thead {
     background: #cbe0f6;
   }
@@ -73,5 +76,6 @@
   .ant-table-tbody > tr > td {
     padding: 8px !important;
     font-size: 22px;
+    vertical-align: middle;
   }
 }

src/services/eqSelfInspection.js

@@ -16,6 +16,10 @@ export async function getDumuDetail(detailId) {
 export async function queryUserList(param) {
   return request(`/api/v1/user/project/${param.projectId}`)
 }
+export async function queryPatrol(params) {
+  return request(`/patrol/data/${params.projectId}?${stringify(params)}`);
+}
+
 export async function queryAnalysisDict() {
   const res = await request(
     `/api/analysis/v1/analysis-dict/list?page_size=9999`,