自检报告修改

src/components/ManagementPage/index.less

@@ -11,7 +11,7 @@
   padding-left: 0.12rem;
   line-height: 1;
 
-  font-size: 0.28rem;
+  font-size: 0.32rem;
   font-family: Source Han Sans, Source Han Sans;
   color: #615d5d;
 }

src/components/PageContent/index.less

@@ -1,6 +1,7 @@
 .page {
   // background: #fff;
   padding: 0.2rem 0.5rem;
+  padding-right: 0;
   min-height: 100vh;
   position: relative;
 

src/components/TabsContent/index.js

@@ -1,19 +1,24 @@
 import { Divider } from 'antd';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import styles from './index.less';
 
 const TabsContent = (props) => {
   const {
     defaultActiveKey = '1',
+    active: parentActive,
     center = true,
     small = false,
     items = {},
     onChange,
   } = props;
-  const [active, setActive] = useState(defaultActiveKey);
+  const [active, setActive] = useState(parentActive || defaultActiveKey);
   const renderContent = useMemo(() => {
     return items.find((item) => item.key == active)?.children;
   }, [active, items]);
+
+  useEffect(() => {
+    setActive(parentActive);
+  }, [parentActive]);
   return (
     <div>
       <div

src/global.less

@@ -217,7 +217,7 @@ input[type='reset'] {
 }
 .content-title {
   padding-left: 0.05rem;
-  padding-right: 0.05rem;
+  padding-right: 0.5rem;
   height: calc(100vh - 1.15rem);
   overflow-x: hidden;
   overflow-y: auto;
@@ -375,3 +375,19 @@ input[type='reset'] {
 .ant-select-single .ant-select-selector {
   font-size: 0.26rem;
 }
+.ant-checkbox-wrapper {
+  font-size: 0.32rem;
+  color: rgba(29, 131, 255, 1);
+}
+.ant-checkbox {
+  .ant-checkbox-inner {
+    width: 0.32rem;
+    height: 0.32rem;
+    &::after {
+      width: 0.1rem;
+      height: 0.15rem;
+      left: 30%;
+    }
+  }
+  // font-size: 0.32rem;
+}

src/pages/EqSelfInspection/ReportDetail.js

@@ -1,11 +1,12 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
-import { connect, useLocation, useParams } from '@umijs/max';
+import { connect, useLocation, useParams, useSearchParams } from '@umijs/max';
 import { useEffect } from 'react';
 import Detail from './components/Detail';
 
 const ReportDetail = (props) => {
   const { data, dispatch, loading } = props;
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const { projectId, routeId } = useParams();
   const eTime = new URLSearchParams(useLocation()?.search)?.get('eTime');
@@ -19,6 +20,11 @@ const ReportDetail = (props) => {
           projectId,
           eTime,
         },
+        callback: () => {
+          if (searchParams.get('model')) {
+            document.getElementById(searchParams.get('model')).scrollIntoView();
+          }
+        },
       });
     }
   }, []);

src/pages/EqSelfInspection/components/PatrolReportDetail.less

@@ -35,6 +35,7 @@
   // margin: 0.1rem 0 0.1rem 0;
   height: 0.51rem;
   width: 50%;
+  font-weight: 600;
   .text {
     color: #1677ff;
     font-size: 0.28rem;
@@ -130,6 +131,7 @@
   right: 0.1rem;
   top: 0;
   line-height: 1;
+  font-weight: 600;
 }
 .content {
   margin-top: 0.5rem;

src/pages/EqSelfInspection/index.js

@@ -97,6 +97,13 @@ const EqSelfInspection = (props) => {
       `/self-inspection/detail/${projectId}/${id}?JWT-TOKEN=${GetTokenFromUrl()}`,
     );
   };
+
+  const gotoDetail = (model = "") => {
+    history.push(
+      `/self-inspection/detail/${projectId}/${autoReport?.Id}?model=${model}`,
+    );
+  };
+
   useEffect(() => {
     UnityAction.on('notiZiJian', (id) => {
       if (id) handleJumpDetail(id);
@@ -143,7 +150,7 @@ const EqSelfInspection = (props) => {
             className={`${styles.itemMain} card-box`}
             style={{ padding: '0.2rem 0.24rem', position: 'relative' }}
           >
-            <div style={{ fontSize: '0.28rem', color: 'rgb(110, 110, 110)' }}>
+            <div style={{ fontSize: '0.3rem', color: 'rgb(110, 110, 110)' }}>
               自检间隔：{autoReport?.RouteInfo?.PlanDur}分钟
             </div>
 
@@ -185,12 +192,24 @@ const EqSelfInspection = (props) => {
                   一键自检
                 </Button>
               </div>
-              <div className={styles.logoFont}>系统自检中</div>
+              {/* <div className={styles.logoFont}>系统自检中</div> */}
             </div>
           </div>
-          <Item name="设备自检" status={patrolStatus}></Item>
-          <Item name="工艺自检" status={faultAnalysisStatus}></Item>
-          <Item name="安全自检" status={secureStatus}>
+          <Item
+            name="设备自检"
+            status={patrolStatus}
+            onClick={() => gotoDetail('device')}
+          ></Item>
+          <Item
+            name="工艺自检"
+            status={faultAnalysisStatus}
+            onClick={() => gotoDetail('technology')}
+          ></Item>
+          <Item
+            name="安全自检"
+            status={secureStatus}
+            onClick={() => gotoDetail('secure')}
+          >
             {secureChildren?.map((item, index) => (
               <WarningItem
                 key={index}
@@ -220,13 +239,7 @@ const EqSelfInspection = (props) => {
             <Button
               className={styles.reportBtn}
               type="primary"
-              onClick={() => {
-                history.push(
-                  `/self-inspection/detail/${projectId}/${
-                    autoReport?.Id
-                  }?JWT-TOKEN=${GetTokenFromUrl()}`,
-                );
-              }}
+              onClick={() => gotoDetail()}
             >
               查看自检报告
             </Button>
@@ -275,7 +288,7 @@ export default connect(({ eqSelfInspection, loading }) => ({
 }))(EqSelfInspection);
 
 const Item = (props) => {
-  const { name, children, warningText = '', status = 0 } = props;
+  const { name, children, warningText = '', status = 0, onClick } = props;
   const renderRight = (status) => {
     switch (status) {
       case 0:
@@ -298,7 +311,7 @@ const Item = (props) => {
     }
   };
   return (
-    <div className={`${styles.itemMain} card-box`}>
+    <div className={`${styles.itemMain} card-box`} onClick={onClick}>
       <div className={styles.item} style={{ height: children ? '0.8rem' : '' }}>
         <span className={styles.itemName}>{name}</span>
         {/* <span className={styles.warningText}>{warningText}</span> */}

src/pages/Home/index.js

@@ -217,19 +217,34 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
 const Electric = (props) => {
   const { data } = props;
   const { projectId } = useParams();
+  const [open, setOpen] = useState(false);
+  const title = (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+        setOpen(!open);
+      }}
+    >
+      能耗监测
+      <div
+        style={{ marginLeft: 10 }}
+        className={`password-eye ${open ? 'open' : ''}`}
+      ></div>
+    </div>
+  );
   return (
     <div
       className={styles.electric}
       onClick={() => UnityAction.sendMsg('menuItem', '能耗监测')}
     >
-      <Title title="能耗监测" />
+      <Title title={title} />
       <ul>
         <li>
-          <div className={styles.value}>{data?.elec_unit}</div>
+          <div className={styles.value}>{open ? data?.elec_unit : '*****'}</div>
           <div className={styles.btn1}>吨水电耗</div>
         </li>
         <li>
-          <div className={styles.value}>{data?.elec}</div>
+          <div className={styles.value}>{open ? data?.elec : '*****'}</div>
           <div className={styles.btn1}>用电量</div>
         </li>
       </ul>
@@ -257,17 +272,18 @@ const Medicine = () => {
     },
   });
   const title = (
-    <>
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+        setOpen(!open);
+      }}
+    >
       药耗监测
       <div
-        onClick={(e) => {
-          e.stopPropagation();
-          setOpen(!open);
-        }}
         style={{ marginLeft: 10 }}
         className={`password-eye ${open ? 'open' : ''}`}
       ></div>
-    </>
+    </div>
   );
 
   return (

src/pages/Smart/ConditionDetection.js

@@ -89,7 +89,7 @@ const ConditionDetection = (props) => {
             <Col span={12} style={{ padding: '0.2rem' }}>
               <div className={`${styles.card2} card-box`}>
                 <h3>
-                  目标工况 <span>{best.score}分</span>
+                  预测工况 <span>{best.score}分</span>
                 </h3>
                 <ul>
                   <li>
@@ -114,7 +114,7 @@ const ConditionDetection = (props) => {
           <div className={styles.img}></div>
         </div>
 
-        <ChartContent projectId={pid} />
+        {/* <ChartContent projectId={pid} /> */}
       </div>
     </PageContent>
   );

src/pages/Smart/OptimizationTasks.js

@@ -1,8 +1,9 @@
 // 优化任务
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
+import ScrollLoading from './components/ScrollLoading';
 import {
-  queryMandate,
+  queryHistory,
   queryMandateChildList,
   querySimulationProfit,
 } from '@/services/SmartOps';
@@ -16,10 +17,6 @@ import styles from './OptimizationTasks.less';
 const OptimizationTasks = (props) => {
   const { projectId } = useParams();
 
-  const { data, run } = useRequest(queryMandate, {
-    manual: true,
-  });
-
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>
@@ -50,8 +47,28 @@ const Produce = ({ projectId }) => {
     },
   ];
 
+  const historyColumns = [
+    {
+      title: '时间',
+      dataIndex: 'CreateTime',
+      render: (time) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      title: '参数',
+      dataIndex: 'Title',
+    },
+    {
+      title: '任务内容',
+      dataIndex: 'Content',
+    },
+  ];
+
   const [mandateID, setMandateID] = useState();
+  const [active, setActive] = useState(false);
+  const [list, setList] = useState([]);
+  const [curPagination, setCurPagination] = useState({});
 
+  // 当前记录
   const { data } = useRequest(queryMandateChildList, {
     defaultParams: [
       {
@@ -60,7 +77,20 @@ const Produce = ({ projectId }) => {
       },
     ],
     onSuccess: (data) => {
-      setMandateID(data[0].MandateId);
+      setMandateID(data[0]?.MandateId);
+    },
+  });
+
+  // 历史记录
+  const {
+    run,
+    loading,
+    data: historyData,
+  } = useRequest(queryHistory, {
+    defaultParams: [{ project_id: projectId, class: 1, currentPage: 1 }],
+    onSuccess: (data) => {
+      setList([...list, ...data.list]);
+      setCurPagination(data.pagination);
     },
   });
 
@@ -73,52 +103,86 @@ const Produce = ({ projectId }) => {
   };
 
   return (
-    <div className={styles.pageCard}>
-      <h3 className={styles.title} style={{ justifyContent: 'space-between' }}>
-        <div>
-          <i />
-          生产调度类
-        </div>
-        {mandateID && (
-          <div className={styles.btnBlue} onClick={openDetail}>
-            查看任务
+    <>
+      <div className={styles.pageCard}>
+        <h3
+          className={styles.title}
+          style={{ justifyContent: 'space-between' }}
+        >
+          <div>
+            <i />
+            生产调度类
           </div>
+          {mandateID && (
+            <div className={styles.btnBlue} onClick={openDetail}>
+              查看任务
+            </div>
+          )}
+        </h3>
+        {data?.length > 0 && (
+          <>
+            <div
+              className={styles.content}
+              style={{ backgroundColor: '#B1D2F3' }}
+            >
+              <h3 className={styles.left}>任务总结</h3>
+              <div className={styles.desc}>
+                根据水质相关数据．建议您调节以下参数，水厂运行可达较优状态
+              </div>
+            </div>
+            <div
+              className={styles.content}
+              style={{ backgroundColor: '#EDF5FC' }}
+            >
+              <h3 className={styles.left}>任务内容</h3>
+              <Table
+                className={styles.taskTable}
+                style={{ width: '100%' }}
+                columns={columns}
+                dataSource={data}
+                pagination={false}
+              />
+            </div>
+          </>
         )}
-      </h3>
-      {data?.length > 0 && (
-        <>
+        {!data?.length && (
           <div
             className={styles.content}
             style={{ backgroundColor: '#B1D2F3' }}
           >
-            <h3 className={styles.left}>任务总结</h3>
             <div className={styles.desc}>
-              根据水质相关数据．建议您调节以下参数，水厂运行可达较优状态
+              当前进水数据稳定，产水数据稳定，暂无调节任务，继续保持哦~
             </div>
           </div>
-          <div
-            className={styles.content}
-            style={{ backgroundColor: '#EDF5FC' }}
+        )}
+        <div
+          className={`${styles.bottomBtn} ${active ? styles.active : ''}`}
+          onClick={() => setActive(!active)}
+        >
+          历史优化记录
+          <i></i>
+        </div>
+        <div style={{ display: active ? 'block' : 'none' }}>
+          <ScrollLoading
+            loading={loading}
+            pagination={curPagination}
+            handleLoadData={(current) =>
+              run({ project_id: projectId, currentPage: current, class: 1 })
+            }
+            height="3rem"
           >
-            <h3 className={styles.left}>任务内容</h3>
             <Table
-              className={styles.taskTable}
-              style={{ width: '100%' }}
-              columns={columns}
-              dataSource={data}
+              rowKey={'id'}
+              loading={loading}
+              dataSource={list}
+              columns={historyColumns}
               pagination={false}
+              className={styles.table1}
             />
-          </div>
-        </>
-      )}
-      {!data?.length && (
-        <div className={styles.content} style={{ backgroundColor: '#B1D2F3' }}>
-          <div className={styles.desc}>
-            当前进水数据稳定，产水数据稳定，暂无调节任务，继续保持哦~
-          </div>
+          </ScrollLoading>
         </div>
-      )}
-    </div>
+      </div>
+    </>
   );
 };
 
@@ -133,8 +197,26 @@ const Cost = ({ projectId }) => {
       dataIndex: 'Content',
     },
   ];
+  const historyColumns = [
+    {
+      title: '时间',
+      dataIndex: 'CreateTime',
+      render: (time) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      title: '参数',
+      dataIndex: 'Title',
+    },
+    {
+      title: '任务内容',
+      dataIndex: 'Content',
+    },
+  ];
 
   const [mandateID, setMandateID] = useState();
+  const [active, setActive] = useState(false);
+  const [list, setList] = useState([]);
+  const [curPagination, setCurPagination] = useState({});
 
   const { data: profit } = useRequest(querySimulationProfit, {
     defaultParams: [
@@ -161,7 +243,16 @@ const Cost = ({ projectId }) => {
       },
     ],
     onSuccess: (data) => {
-      setMandateID(data[0].MandateId);
+      setMandateID(data[0]?.MandateId);
+    },
+  });
+
+  // 历史记录
+  const { run, loading } = useRequest(queryHistory, {
+    defaultParams: [{ project_id: projectId, class: 2, currentPage: 1 }],
+    onSuccess: (data) => {
+      setList([...list, ...data.list]);
+      setCurPagination(data.pagination);
     },
   });
 
@@ -218,6 +309,32 @@ const Cost = ({ projectId }) => {
           <div className={styles.desc}>暂无可降低成本，继续保持哦~</div>
         </div>
       )}
+      <div
+        className={`${styles.bottomBtn2} ${active ? styles.active : ''}`}
+        onClick={() => setActive(!active)}
+      >
+        历史优化记录
+        <i></i>
+      </div>
+      <div style={{ display: active ? 'block' : 'none' }}>
+        <ScrollLoading
+          loading={loading}
+          pagination={curPagination}
+          handleLoadData={(current) =>
+            run({ project_id: projectId, currentPage: current, class: 2 })
+          }
+          height="3rem"
+        >
+          <Table
+            rowKey={'id'}
+            loading={loading}
+            dataSource={list}
+            columns={historyColumns}
+            pagination={false}
+            className={styles.table2}
+          />
+        </ScrollLoading>
+      </div>
     </div>
   );
 };

src/pages/Smart/OptimizationTasks.less

@@ -69,6 +69,7 @@
 }
 .pageCard {
   padding: 0.2rem;
+  padding-bottom: 0;
   margin-top: 0.3rem;
   overflow: hidden;
   border-radius: 0.26rem;
@@ -112,10 +113,54 @@
   text-align: center;
 }
 
+.bottomBtn {
+  margin: 0.2rem auto 0;
+  width: 2.6rem;
+  height: 0.46rem;
+  background: url('@/assets/smart/btn1.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 0.26rem;
+  color: #ffffff;
+
+  &.active {
+    i {
+      background-image: url('@/assets/smart/btn-arr2.png');
+    }
+  }
+  i {
+    flex-shrink: 1;
+    width: 0.2rem;
+    height: 0.1rem;
+    margin-left: 4px;
+    background: url('@/assets/smart/btn-arr1.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+}
+.bottomBtn2 {
+  .bottomBtn;
+  background-image: url('@/assets/smart/btn2.png');
+}
+.table1 {
+  :global {
+    .ant-table-thead {
+      background: rgb(177, 210, 243);
+    }
+    .ant-table-thead > tr > th {
+      color: #4a4a4a;
+    }
+  }
+}
 .table2 {
   :global {
     .ant-table-thead {
-      background: rgba(245, 166, 35, 0.14);
+      background: rgb(251, 222, 174);
+    }
+    .ant-table-thead > tr > th {
+      color: #4a4a4a;
     }
   }
 }

src/pages/Smart/components/ScrollLoading.js

@@ -0,0 +1,36 @@
+import { Spin } from 'antd';
+import { useRef } from 'react';
+
+export default function ScrollLoading({
+  loading,
+  children,
+  pagination = { current: 1, total: 0, pageSize: 20 },
+  handleLoadData, //请求数据方法
+  height, //除滚动区域外其他高度(只是通用标题就是90)
+}) {
+  const scrollContent = useRef();
+
+  const handleScroll = () => {
+    const { current, total, pageSize } = pagination;
+    if (current * pageSize >= total) return;
+    const { scrollHeight, clientHeight, scrollTop } = scrollContent.current;
+    if (scrollHeight - clientHeight <= scrollTop + 1 && !loading) {
+      handleLoadData(current + 1);
+    }
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <div
+        ref={scrollContent}
+        onScroll={handleScroll}
+        style={{
+          overflowY: 'scroll',
+          height: height,
+        }}
+      >
+        {children}
+      </div>
+    </Spin>
+  );
+}

src/pages/Smart/index.js

@@ -54,106 +54,105 @@ const Work = (props) => {
               history.push('/smart/condition-detection/' + projectId)
             }
           >
-            工况检测
+            工况预测
           </Button>
         </div>
       </div>
       <Row gutter={30}>
         <Col span={12}>
           <div className={styles.card}>
-            <h3>进水数据</h3>
+            <h3>水厂负荷数据</h3>
             <ul>
               <li>
-                <i></i>进水量：{data?.fwa}
-              </li>
-              <li>
-                <i></i>进水温度：{data?.ft}
-              </li>
-              <li>
-                <i></i>进水浊度：{data?.ftur}
+                <i></i>实际处理水量：{data?.fact_water}
               </li>
               <li>
-                <i></i>进水压力：{data?.fpp}
-              </li>
-              {/* 与产水数据对其 */}
-              <li style={{ visibility: 'hidden' }}>
-                <i></i>
+                <i></i>设计处理水量：{data?.devise_water}
               </li>
             </ul>
           </div>
         </Col>
         <Col span={12}>
           <div className={styles.card}>
-            <h3>产水数据</h3>
+            <h3>
+              成本数据
+              <div
+                style={{ marginLeft: 14 }}
+                onClick={() => setOpen(!open)}
+                className={`password-eye ${open ? 'open' : ''}`}
+              ></div>
+            </h3>
             <ul>
               <li>
-                <i></i>外供水流量：{data?.dwa}
-              </li>
-              <li>
-                <i></i>外供水pH：{data?.dph}
+                <i></i>吨水药成本：{open ? data?.otc_cost_unit : '*******'}
               </li>
               <li>
-                <i></i>外供水电导率：{data?.dtds}
+                <i></i>吨水电成本：{open ? data?.elec_cost_unit : '*******'}
               </li>
-           
             </ul>
           </div>
         </Col>
         <Col span={12}>
           <div className={styles.card}>
-            <h3>水厂负荷数据</h3>
+            <h3>能耗数据</h3>
             <ul>
               <li>
-                <i></i>实际处理水量：{data?.fact_water}
+                <i></i>吨水电耗：{data?.elec_unit}
               </li>
               <li>
-                <i></i>设计处理水量：{data?.devise_water}
+                <i></i>用电量：{data?.elec}
               </li>
             </ul>
           </div>
         </Col>
         <Col span={12}>
           <div className={styles.card2}>
-            <h3>
-              成本数据
-              <div
-                style={{ marginLeft: 14 }}
-                onClick={() => setOpen(!open)}
-                className={`password-eye ${open ? 'open' : ''}`}
-              ></div>
-            </h3>
+            <h3>药耗数据</h3>
             <ul>
               <li>
-                <i></i>吨水药成本：{open ? data?.otc_cost_unit : '*******'}
+                <i></i>吨水药耗：{data?.otc_unit}
               </li>
               <li>
-                <i></i>吨水电成本：{open ? data?.elec_cost_unit : '*******'}
+                <i></i>药量：{data?.otc}
               </li>
             </ul>
           </div>
         </Col>
         <Col span={12}>
           <div className={styles.card2} style={{ marginBottom: 0 }}>
-            <h3>能耗数据</h3>
+            <h3>进水数据</h3>
             <ul>
               <li>
-                <i></i>吨水电耗：{data?.elec_unit}
+                <i></i>进水量：{data?.fwa}
               </li>
               <li>
-                <i></i>用电量：{data?.elec}
+                <i></i>进水温度：{data?.ft}
+              </li>
+              <li>
+                <i></i>进水浊度：{data?.ftur}
+              </li>
+              <li>
+                <i></i>进水压力：{data?.fpp}
               </li>
             </ul>
           </div>
         </Col>
         <Col span={12}>
           <div className={styles.card2} style={{ marginBottom: 0 }}>
-            <h3>药耗数据</h3>
+            <h3>产水数据</h3>
             <ul>
               <li>
-                <i></i>吨水药耗：{data?.otc_unit}
+                <i></i>外供水流量：{data?.dwa}
               </li>
               <li>
-                <i></i>药量：{data?.otc}
+                <i></i>外供水pH：{data?.dph}
+              </li>
+              <li>
+                <i></i>外供水电导率：{data?.dtds}
+              </li>
+              {/* 与进水数据对齐 */}
+              <li style={{ visibility: 'hidden' }}>
+                <i></i>
               </li>
             </ul>
           </div>

src/services/SmartOps.js

@@ -11,6 +11,14 @@ export async function queryEnergy(projectId) {
   return res;
 }
 
+export async function queryHistory(data) {
+  const res = await request(`/api/v1/mandate_child/history`, {
+    method: 'GET',
+    params: data,
+  });
+  return res;
+}
+
 export async function queryProcessSection(projectId) {
   const res = await request(
     `/api/v1/process-section/${projectId}?page_size=999`,