Browse Source

修改页面滚动规则

Renxy 1 year ago
parent
commit
8bc4fd0256

+ 13 - 2
src/global.less

@@ -113,6 +113,17 @@ input[type='reset'] {
   background: rgba(255, 255, 255);
   background: rgba(255, 255, 255);
 }
 }
 
 
+.content-tab {
+  height: calc(100vh - 130px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.content-title {
+  height: calc(100vh - 100px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .password-eye {
 .password-eye {
   display: inline-block;
   display: inline-block;
   vertical-align: middle;
   vertical-align: middle;
@@ -188,8 +199,8 @@ input[type='reset'] {
   padding-top: 0;
   padding-top: 0;
   padding-bottom: 0;
   padding-bottom: 0;
 }
 }
-.ant-table{
-  background-color: white!important;
+.ant-table {
+  background-color: white !important;
 }
 }
 .ant-table-cell,
 .ant-table-cell,
 .ant-table-placeholder {
 .ant-table-placeholder {

+ 7 - 88
src/pages/DeviceManager/detail.js

@@ -373,22 +373,7 @@ const SparePartDetail = () => {
     {
     {
       manual: true,
       manual: true,
       formatResult: (result) => {
       formatResult: (result) => {
-        if (pagination.current === 1) {
-          setDataSource(result?.data);
-        } else {
-          setDataSource([...dataSource, ...result?.data]);
-        }
-
-        if (pagination.current * pagination.pageSize >= result.total) {
-          isLoadAll.current = true;
-        }
-
-        // 每次请求完成后 current + 1
-        setPagination({
-          ...pagination,
-          total: result?.total || 0,
-          current: pagination.current + 1,
-        });
+        setDataSource(result?.data);
       },
       },
     },
     },
   );
   );
@@ -402,22 +387,7 @@ const SparePartDetail = () => {
     {
     {
       manual: true,
       manual: true,
       formatResult: (result) => {
       formatResult: (result) => {
-        if (pagination.current === 1) {
-          setDataSource(result?.data);
-        } else {
-          setDataSource([...dataSource, ...result?.data]);
-        }
-
-        if (pagination.current * pagination.pageSize >= result.total) {
-          isLoadAll.current = true;
-        }
-
-        // 每次请求完成后 current + 1
-        setPagination({
-          ...pagination,
-          total: result?.total || 0,
-          current: pagination.current + 1,
-        });
+        setDataSource(result?.data);
       },
       },
     },
     },
   );
   );
@@ -428,79 +398,28 @@ const SparePartDetail = () => {
       : runExist(defaultParamsOfExit);
       : runExist(defaultParamsOfExit);
   }, [type]);
   }, [type]);
 
 
-  const handleScroll = () => {
-    if (bottomAreaOfTable.current === null) {
-      return;
-    }
-    const rect = bottomAreaOfTable.current.getBoundingClientRect();
-
-    console.log();
-    const isVisible =
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <=
-        (window.innerHeight || document.documentElement.clientHeight) &&
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-
-    if (isVisible) {
-      if (isLoadAll.current || loadingExist || loading) {
-        return;
-      }
-
-      if (Number(type) !== PageType.warning && Number(type) !== PageType.base) {
-        run(defaultParams);
-      } else {
-        runExist(defaultParamsOfExit);
-      }
-    }
-  };
-
-  // 监听滚动事件
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [loadingExist, loading]);
-
   return (
   return (
     <PageContent closeable={false}>
     <PageContent closeable={false}>
       <PageTitle children={titles[type]} returnable />
       <PageTitle children={titles[type]} returnable />
-      {Number(type) !== PageType.warning && Number(type) !== PageType.base ? (
-        <>
+      <div className="content-title" style={{ marginTop: '10px' }}>
+        {Number(type) !== PageType.warning && Number(type) !== PageType.base ? (
           <Table
           <Table
             sticky={{ offsetHeader: 0 }}
             sticky={{ offsetHeader: 0 }}
             loading={loading}
             loading={loading}
-            style={{ marginTop: '10px' }}
             dataSource={dataSource}
             dataSource={dataSource}
             columns={columnsList[type]}
             columns={columnsList[type]}
             pagination={false}
             pagination={false}
           />
           />
-          <div
-            ref={bottomAreaOfTable}
-            style={{
-              height: '1px',
-            }}
-          />
-        </>
-      ) : (
-        <>
+        ) : (
           <Table
           <Table
             sticky={{ offsetHeader: 0 }}
             sticky={{ offsetHeader: 0 }}
             loading={loadingExist}
             loading={loadingExist}
-            style={{ marginTop: '10px' }}
             dataSource={dataSource}
             dataSource={dataSource}
             columns={columnsList[type]}
             columns={columnsList[type]}
             pagination={false}
             pagination={false}
           />
           />
-          <div
-            ref={bottomAreaOfTable}
-            style={{
-              height: '1px',
-            }}
-          />
-        </>
-      )}
+        )}
+      </div>
     </PageContent>
     </PageContent>
   );
   );
 };
 };

+ 27 - 25
src/pages/DeviceManager/index.js

@@ -237,7 +237,7 @@ const Device = ({ projectId }) => {
   };
   };
 
 
   return (
   return (
-    <div className={styles.sparePart}>
+    <div className={`content-tab ${styles.sparePart}`}>
       <Spin spinning={loadingDevice}>
       <Spin spinning={loadingDevice}>
         <div className={`card-box ${styles.titleContent}`}>
         <div className={`card-box ${styles.titleContent}`}>
           <img className={styles.img} src={deviceIcon} />
           <img className={styles.img} src={deviceIcon} />
@@ -344,31 +344,33 @@ const SparePart = ({ projectId }) => {
   }, [data]);
   }, [data]);
   return (
   return (
     <Spin spinning={loading}>
     <Spin spinning={loading}>
-      <Space direction="vertical" size={16} className={styles.sparePart}>
-        <div className={`card-box ${styles.titleContent}`}>
-          <img className={styles.img} src={spareIcon} />
-          <div>
-            <div className={styles.num}>{data?.on_amount || 0}</div>
-            <div className={styles.text}>在库数量(个)</div>
-          </div>
-          <div
-            onClick={handleTotalPage}
-            className={styles.iconFundFilled}
-          ></div>
-        </div>
-        {list.map((item) => (
-          <div
-            className={`card-box ${styles.cardItem}`}
-            onClick={() => changePage(item.type)}
-          >
-            <span className={styles.spareText}>{item.title}</span>
-            <Space size={30}>
-              {/* <span className={styles.spareText}>{item.num}个</span> */}
-              <RightOutlined style={{ fontSize: '28px' }} />
-            </Space>
+      <div className="content-tab">
+        <Space direction="vertical" size={16} className={styles.sparePart}>
+          <div className={`card-box ${styles.titleContent}`}>
+            <img className={styles.img} src={spareIcon} />
+            <div>
+              <div className={styles.num}>{data?.on_amount || 0}</div>
+              <div className={styles.text}>在库数量(个)</div>
+            </div>
+            <div
+              onClick={handleTotalPage}
+              className={styles.iconFundFilled}
+            ></div>
           </div>
           </div>
-        ))}
-      </Space>
+          {list.map((item) => (
+            <div
+              className={`card-box ${styles.cardItem}`}
+              onClick={() => changePage(item.type)}
+            >
+              <span className={styles.spareText}>{item.title}</span>
+              <Space size={30}>
+                {/* <span className={styles.spareText}>{item.num}个</span> */}
+                <RightOutlined style={{ fontSize: '28px' }} />
+              </Space>
+            </div>
+          ))}
+        </Space>
+      </div>
     </Spin>
     </Spin>
   );
   );
 };
 };

+ 1 - 1
src/pages/EqSelfInspection/List/index.js

@@ -38,7 +38,7 @@ function List(props) {
   return (
   return (
     <PageContent closeable={false}>
     <PageContent closeable={false}>
       <PageTitle returnable>自检记录</PageTitle>
       <PageTitle returnable>自检记录</PageTitle>
-      <div className={styles.list}>
+      <div className={`content-title ${styles.list}`}>
         {list.map((item) => (
         {list.map((item) => (
           <div className={styles.item} onClick={() => goToDetail(item)}>
           <div className={styles.item} onClick={() => goToDetail(item)}>
             {item.Status == 0 ? (
             {item.Status == 0 ? (

+ 1 - 1
src/pages/EqSelfInspection/ReportDetail.js

@@ -22,7 +22,7 @@ const ReportDetail = (props) => {
   return (
   return (
     <PageContent closeable={false}>
     <PageContent closeable={false}>
       <PageTitle returnable>自检报告</PageTitle>
       <PageTitle returnable>自检报告</PageTitle>
-      <div style={{ marginTop: 20 }}>
+      <div className="content-title" style={{ marginTop: 20 }}>
         <Detail data={data} projectId={projectId} loading={loading} />
         <Detail data={data} projectId={projectId} loading={loading} />
       </div>
       </div>
     </PageContent>
     </PageContent>

+ 107 - 101
src/pages/EqSelfInspection/index.js

@@ -132,117 +132,123 @@ const EqSelfInspection = (props) => {
     <PageContent>
     <PageContent>
       <PageTitle>系统自检</PageTitle>
       <PageTitle>系统自检</PageTitle>
       <Spin spinning={loading} tip="正在自检中...">
       <Spin spinning={loading} tip="正在自检中...">
-        <div
-          className={`${styles.itemMain} card-box`}
-          style={{ padding: '15px 24px' }}
-        >
-          <div style={{ fontSize: 28, color: 'rgb(110, 110, 110)' }}>
-            自检间隔:{autoReport?.RouteInfo?.PlanDur}分钟
-          </div>
+        <div className="content-title">
+          <div
+            className={`${styles.itemMain} card-box`}
+            style={{ padding: '15px 24px', position: 'relative' }}
+          >
+            <div style={{ fontSize: 28, color: 'rgb(110, 110, 110)' }}>
+              自检间隔:{autoReport?.RouteInfo?.PlanDur}分钟
+            </div>
 
 
-          <div className={styles.icon}>
-            <div
-              className={styles.iconDiffFilled}
+            <div className={styles.icon}>
+              <div
+                className={styles.iconDiffFilled}
+                onClick={() => {
+                  history.push(`/self-inspection/list/${projectId}`);
+                }}
+              ></div>
+              <div
+                className={styles.iconFundFilled}
+                onClick={() => {
+                  history.push(
+                    `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
+                  );
+                }}
+              ></div>
+            </div>
+            <div className={styles.logoInfo}>
+              <div className={styles.logo} />
+              <div className={styles.logoTitle}>
+                <div>
+                  系统自检&nbsp;
+                  {autoReport?.Status == 0 ? (
+                    <span style={{ color: '#39CA74' }}>正常</span>
+                  ) : (
+                    <span style={{ color: 'rgba(254, 88, 80, 1)' }}>异常</span>
+                  )}
+                </div>
+              </div>
+              <div className={styles.logoTime}>
+                {autoReport?.CreatedTime
+                  ? dayjs(autoReport?.CreatedTime).format('YYYY-MM-DD HH:mm')
+                  : ''}
+              </div>
+              <div className={styles.insbtn}>
+                <Button type="primary" onClick={HandleInspection}>
+                  一键自检
+                </Button>
+              </div>
+              <div className={styles.logoFont}>系统自检中</div>
+            </div>
+          </div>
+          <Item name="设备自检" status={patrolStatus}></Item>
+          <Item name="工艺自检" status={faultAnalysisStatus}></Item>
+          <Item name="安全自检" status={secureStatus}>
+            {secureChildren?.map((item, index) => (
+              <WarningItem
+                key={index}
+                label={item.label}
+                status={item.status}
+              />
+            ))}
+          </Item>
+          <div className={styles.btnContainer}>
+            <Button
+              className={styles.reportBtn}
+              type="primary"
               onClick={() => {
               onClick={() => {
-                history.push(`/self-inspection/list/${projectId}`);
+                openTaskModal();
               }}
               }}
-            ></div>
-            <div
-              className={styles.iconFundFilled}
+            >
+              查看任务
+            </Button>
+            <Button
+              className={styles.reportBtn}
+              type="primary"
               onClick={() => {
               onClick={() => {
                 history.push(
                 history.push(
-                  `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
+                  `/self-inspection/detail/${projectId}/${
+                    autoReport?.Id
+                  }?JWT-TOKEN=${GetTokenFromUrl()}`,
                 );
                 );
               }}
               }}
-            ></div>
-          </div>
-          <div className={styles.logoInfo}>
-            <div className={styles.logo} />
-            <div className={styles.logoTitle}>
-              <div>
-                系统自检&nbsp;
-                {autoReport?.Status == 0 ? (
-                  <span style={{ color: '#39CA74' }}>正常</span>
-                ) : (
-                  <span style={{ color: 'rgba(254, 88, 80, 1)' }}>异常</span>
-                )}
-              </div>
-            </div>
-            <div className={styles.logoTime}>
-              {autoReport?.CreatedTime
-                ? dayjs(autoReport?.CreatedTime).format('YYYY-MM-DD HH:mm')
-                : ''}
-            </div>
-            <div className={styles.insbtn}>
-              <Button type="primary" onClick={HandleInspection}>
-                一键自检
-              </Button>
-            </div>
-            <div className={styles.logoFont}>系统自检中</div>
+            >
+              查看自检报告
+            </Button>
           </div>
           </div>
-        </div>
-        <Item name="设备自检" status={patrolStatus}></Item>
-        <Item name="工艺自检" status={faultAnalysisStatus}></Item>
-        <Item name="安全自检" status={secureStatus}>
-          {secureChildren?.map((item, index) => (
-            <WarningItem key={index} label={item.label} status={item.status} />
-          ))}
-        </Item>
-        <div className={styles.btnContainer}>
-          <Button
-            className={styles.reportBtn}
-            type="primary"
-            onClick={() => {
-              openTaskModal();
-            }}
-          >
-            查看任务
-          </Button>
-          <Button
-            className={styles.reportBtn}
-            type="primary"
-            onClick={() => {
-              history.push(
-                `/self-inspection/detail/${projectId}/${
-                  autoReport?.Id
-                }?JWT-TOKEN=${GetTokenFromUrl()}`,
-              );
-            }}
+
+          <Modal
+            title="选择巡检路线"
+            destroyOnClose
+            open={visible}
+            onOk={handleOk}
+            width="40%"
+            maskClosable={false}
+            onCancel={handleCancel}
           >
           >
-            查看自检报告
-          </Button>
+            <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
+              <Form.Item
+                label="巡检路线"
+                name="routeId"
+                rules={[
+                  {
+                    required: true,
+                    message: '请选择巡检路线',
+                  },
+                ]}
+              >
+                <Select placeholder="请选择巡检路线">
+                  {patrolList?.map((item) => (
+                    <Option key={item.Id} value={item.Id}>
+                      {item?.Name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Form>
+          </Modal>
         </div>
         </div>
-
-        <Modal
-          title="选择巡检路线"
-          destroyOnClose
-          open={visible}
-          onOk={handleOk}
-          width="40%"
-          maskClosable={false}
-          onCancel={handleCancel}
-        >
-          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
-            <Form.Item
-              label="巡检路线"
-              name="routeId"
-              rules={[
-                {
-                  required: true,
-                  message: '请选择巡检路线',
-                },
-              ]}
-            >
-              <Select placeholder="请选择巡检路线">
-                {patrolList?.map((item) => (
-                  <Option key={item.Id} value={item.Id}>
-                    {item?.Name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          </Form>
-        </Modal>
       </Spin>
       </Spin>
     </PageContent>
     </PageContent>
   );
   );

+ 0 - 1
src/pages/Home/index.js

@@ -233,7 +233,6 @@ const Scada = () => {
         (item) =>
         (item) =>
           `${domain}smart-water/scada/index.html#/3dview/${projectId}/${item.id}?JWT-TOKEN=${token}&hideTitle=true`,
           `${domain}smart-water/scada/index.html#/3dview/${projectId}/${item.id}?JWT-TOKEN=${token}&hideTitle=true`,
       );
       );
-      console.log('-------------------', urls);
       return urls.splice(0, 1);
       return urls.splice(0, 1);
     },
     },
   });
   });

+ 69 - 65
src/pages/SafetyManagement/index.js

@@ -118,37 +118,39 @@ const Video = ({ data, dataOnline, loading }) => {
   };
   };
   return (
   return (
     <Spin spinning={loading}>
     <Spin spinning={loading}>
-      <Space direction="vertical" size={16} className={styles.sparePart}>
-        <div className={`card-box ${styles.titleContent}`}>
-          <div className={styles.titleLeft}>
-            <img className={styles.img} src={videoIcon} />
-            <div className={styles.textCon}>
-              <div className={styles.num}>{dataOnline?.total || 0}</div>
-              <div className={styles.text}>在库数量(个)</div>
-            </div>
-          </div>
-          <div>
-            <div className={styles.lTextCon1}>
-              <div className={styles.onlinePoint} />
-              <span className={styles.text}>
-                在线:{dataOnline?.online || 0}
-              </span>
+      <div className="content-tab">
+        <Space direction="vertical" size={16} className={styles.sparePart}>
+          <div className={`card-box ${styles.titleContent}`}>
+            <div className={styles.titleLeft}>
+              <img className={styles.img} src={videoIcon} />
+              <div className={styles.textCon}>
+                <div className={styles.num}>{dataOnline?.total || 0}</div>
+                <div className={styles.text}>在库数量(个)</div>
+              </div>
             </div>
             </div>
-            <div className={styles.lTextCon2}>
-              <div className={styles.outlinePoint} />
-              <span className={styles.text}>
-                离线:{dataOnline?.offline || 0}
-              </span>
+            <div>
+              <div className={styles.lTextCon1}>
+                <div className={styles.onlinePoint} />
+                <span className={styles.text}>
+                  在线:{dataOnline?.online || 0}
+                </span>
+              </div>
+              <div className={styles.lTextCon2}>
+                <div className={styles.outlinePoint} />
+                <span className={styles.text}>
+                  离线:{dataOnline?.offline || 0}
+                </span>
+              </div>
             </div>
             </div>
           </div>
           </div>
-        </div>
 
 
-        {data?.map((item, idx) => (
-          <div key={`video_${idx}`} className="card-box">
-            {renderRed(item)}
-          </div>
-        ))}
-      </Space>
+          {data?.map((item, idx) => (
+            <div key={`video_${idx}`} className="card-box">
+              {renderRed(item)}
+            </div>
+          ))}
+        </Space>
+      </div>
     </Spin>
     </Spin>
   );
   );
 };
 };
@@ -172,51 +174,53 @@ const Door = ({ data, dataOver, loading, projectId }) => {
   };
   };
   return (
   return (
     <Spin spinning={loading}>
     <Spin spinning={loading}>
-      <Space direction="vertical" size={16} className={styles.doorPart}>
-        <div className={styles.titleContent}>
-          <div className={`card-box ${styles.cardLeft}`}>
-            <div className={styles.up}>
-              <img className={styles.img} src={doorIcon} />
-              <div className={styles.textCon}>
-                <div className={styles.num}>{dataOver?.total}</div>
-                <div className={styles.text}>门禁数量(个)</div>
+      <div className="content-tab">
+        <Space direction="vertical" size={16} className={styles.doorPart}>
+          <div className={styles.titleContent}>
+            <div className={`card-box ${styles.cardLeft}`}>
+              <div className={styles.up}>
+                <img className={styles.img} src={doorIcon} />
+                <div className={styles.textCon}>
+                  <div className={styles.num}>{dataOver?.total}</div>
+                  <div className={styles.text}>门禁数量(个)</div>
+                </div>
+              </div>
+              <div className={styles.bottom}>
+                <div className={styles.lTextCon2}>
+                  <div className={styles.onlinePoint} />
+                  <span className={styles.text}>在线:{dataOver?.online}</span>
+                </div>
+                <div className={styles.lTextCon2}>
+                  <div className={styles.outlinePoint} />
+                  <span className={styles.text}>离线:{dataOver?.offline}</span>
+                </div>
               </div>
               </div>
             </div>
             </div>
-            <div className={styles.bottom}>
-              <div className={styles.lTextCon2}>
-                <div className={styles.onlinePoint} />
-                <span className={styles.text}>在线:{dataOver?.online}</span>
+            <div className={`card-box ${styles.cardRight}`}>
+              <div className={styles.textContent}>
+                <div className={styles.in} />
+                <span className={styles.text}>
+                  今日进厂次数:{dataOver?.today_in}
+                </span>
               </div>
               </div>
-              <div className={styles.lTextCon2}>
-                <div className={styles.outlinePoint} />
-                <span className={styles.text}>离线:{dataOver?.offline}</span>
+              <div className={styles.textContent}>
+                <div className={styles.out} />
+                <span className={styles.text}>
+                  今日出厂次数:{dataOver?.today_out}
+                </span>
               </div>
               </div>
+              <Button className={styles.btn} onClick={handleClick}>
+                门禁日志
+              </Button>
             </div>
             </div>
           </div>
           </div>
-          <div className={`card-box ${styles.cardRight}`}>
-            <div className={styles.textContent}>
-              <div className={styles.in} />
-              <span className={styles.text}>
-                今日进厂次数:{dataOver?.today_in}
-              </span>
-            </div>
-            <div className={styles.textContent}>
-              <div className={styles.out} />
-              <span className={styles.text}>
-                今日出厂次数:{dataOver?.today_out}
-              </span>
+          {data?.map((item, idx) => (
+            <div key={`door_${idx}`} className="card-box">
+              {renderRed(item)}
             </div>
             </div>
-            <Button className={styles.btn} onClick={handleClick}>
-              门禁日志
-            </Button>
-          </div>
-        </div>
-        {data?.map((item, idx) => (
-          <div key={`door_${idx}`} className="card-box">
-            {renderRed(item)}
-          </div>
-        ))}
-      </Space>
+          ))}
+        </Space>
+      </div>
     </Spin>
     </Spin>
   );
   );
 };
 };

+ 66 - 64
src/pages/Smart/ConditionDetection.js

@@ -48,68 +48,71 @@ const ConditionDetection = (props) => {
   return (
   return (
     <PageContent closeable={false}>
     <PageContent closeable={false}>
       <PageTitle returnable>工况检测</PageTitle>
       <PageTitle returnable>工况检测</PageTitle>
-      <div className={styles.circle}>
-        <CircleScore big>
-          <span className={styles.circleText}>{score}</span>
-        </CircleScore>
-        {/* <p>{desc}</p> */}
-        <p>膜车间当前运行状态{grade}</p>
-      </div>
-      <div className={styles.content}>
-        <Row gutter={16}>
-          <Col span={12} style={{ padding: 22 }}>
-            <div className={`${styles.card} card-box`}>
-              <h3>
-                实时工况 <span>{real.score}分</span>
-              </h3>
-              <ul>
-                <li>
-                  <i></i>水质达标率评分:{real.water}
-                </li>
-                <li>
-                  <i></i>能耗评分:{real.energy}
-                </li>
-                <li>
-                  <i></i>药耗评分:{real.medicine}
-                </li>
-                <li>
-                  <i></i>设施设备利用率评分:{real.device_rate}
-                </li>
-                <li>
-                  <i></i>设施设备完好率评分:{real.device_intact}
-                </li>
-              </ul>
-            </div>
-          </Col>
-          <Col span={12} style={{ padding: 22 }}>
-            <div className={`${styles.card2} card-box`}>
-              <h3>
-                目标工况 <span>{best.score}分</span>
-              </h3>
-              <ul>
-                <li>
-                  <i></i>水质达标率评分:{best.water}
-                </li>
-                <li>
-                  <i></i>能耗评分:{best.energy}
-                </li>
-                <li>
-                  <i></i>药耗评分:{best.medicine}
-                </li>
-                <li>
-                  <i></i>设施设备利用率评分:{best.device_rate}
-                </li>
-                <li>
-                  <i></i>设施设备完好率评分:{best.device_intact}
-                </li>
-              </ul>
-            </div>
-          </Col>
-        </Row>
-        <div className={styles.img}></div>
-      </div>
 
 
-      <ChartContent projectId={pid} />
+      <div className="content-title">
+        <div className={styles.circle}>
+          <CircleScore big>
+            <span className={styles.circleText}>{score}</span>
+          </CircleScore>
+          {/* <p>{desc}</p> */}
+          <p>膜车间当前运行状态{grade}</p>
+        </div>
+        <div className={styles.content}>
+          <Row gutter={16}>
+            <Col span={12} style={{ padding: 22 }}>
+              <div className={`${styles.card} card-box`}>
+                <h3>
+                  实时工况 <span>{real.score}分</span>
+                </h3>
+                <ul>
+                  <li>
+                    <i></i>水质达标率评分:{real.water}
+                  </li>
+                  <li>
+                    <i></i>能耗评分:{real.energy}
+                  </li>
+                  <li>
+                    <i></i>药耗评分:{real.medicine}
+                  </li>
+                  <li>
+                    <i></i>设施设备利用率评分:{real.device_rate}
+                  </li>
+                  <li>
+                    <i></i>设施设备完好率评分:{real.device_intact}
+                  </li>
+                </ul>
+              </div>
+            </Col>
+            <Col span={12} style={{ padding: 22 }}>
+              <div className={`${styles.card2} card-box`}>
+                <h3>
+                  目标工况 <span>{best.score}分</span>
+                </h3>
+                <ul>
+                  <li>
+                    <i></i>水质达标率评分:{best.water}
+                  </li>
+                  <li>
+                    <i></i>能耗评分:{best.energy}
+                  </li>
+                  <li>
+                    <i></i>药耗评分:{best.medicine}
+                  </li>
+                  <li>
+                    <i></i>设施设备利用率评分:{best.device_rate}
+                  </li>
+                  <li>
+                    <i></i>设施设备完好率评分:{best.device_intact}
+                  </li>
+                </ul>
+              </div>
+            </Col>
+          </Row>
+          <div className={styles.img}></div>
+        </div>
+
+        <ChartContent projectId={pid} />
+      </div>
     </PageContent>
     </PageContent>
   );
   );
 };
 };
@@ -150,7 +153,7 @@ const ChartContent = ({ projectId }) => {
       tooltip: {
       tooltip: {
         trigger: 'axis',
         trigger: 'axis',
         textStyle: {
         textStyle: {
-          fontSize: 24
+          fontSize: 24,
         },
         },
       },
       },
       legend: {
       legend: {
@@ -168,14 +171,13 @@ const ChartContent = ({ projectId }) => {
       xAxis: {
       xAxis: {
         type: 'category',
         type: 'category',
         boundaryGap: false,
         boundaryGap: false,
-        data: data[0].list?.map((item) => item.name.split(" ")[1]),
+        data: data[0].list?.map((item) => item.name.split(' ')[1]),
         nameTextStyle: {
         nameTextStyle: {
           fontSize: 24,
           fontSize: 24,
         },
         },
         axisLabel: {
         axisLabel: {
           fontSize: 24,
           fontSize: 24,
         },
         },
-       
       },
       },
       yAxis: {
       yAxis: {
         type: 'value',
         type: 'value',

+ 1 - 1
src/pages/Smart/OptimizationTasks.js

@@ -30,7 +30,7 @@ const OptimizationTasks = (props) => {
           </div>
           </div>
         </div>
         </div>
       </PageTitle>
       </PageTitle>
-      <div>
+      <div className="content-title">
         <div>
         <div>
           <Produce projectId={projectId} />
           <Produce projectId={projectId} />
           <Cost projectId={projectId} />
           <Cost projectId={projectId} />

+ 137 - 135
src/pages/Smart/index.js

@@ -20,150 +20,152 @@ const Work = (props) => {
   return (
   return (
     <PageContent>
     <PageContent>
       <PageTitle>水厂工况</PageTitle>
       <PageTitle>水厂工况</PageTitle>
-      <div className={styles.score}>
-        <CircleScore big>
-          {data?.score}
-          <div style={{ fontSize: 24 }}>{data?.grade}</div>
-        </CircleScore>
-        <div className={styles.scoreRight}>
-          <h3>当前运行{data?.grade},可继续优化</h3>
-          <div className={styles.time}>
-            {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
-          </div>
-          {data?.score && (
+      <div className="content-title">
+        <div className={styles.score}>
+          <CircleScore big>
+            {data?.score}
+            <div style={{ fontSize: 24 }}>{data?.grade}</div>
+          </CircleScore>
+          <div className={styles.scoreRight}>
+            <h3>当前运行{data?.grade},可继续优化</h3>
+            <div className={styles.time}>
+              {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
+            </div>
+            {data?.score && (
+              <Button
+                style={{ marginRight: 20 }}
+                className={styles.btn}
+                type="primary"
+                onClick={() =>
+                  history.push(
+                    `/smart/optimization-tasks/${projectId}?score=${data.score}`,
+                  )
+                }
+              >
+                优化任务
+              </Button>
+            )}
+
             <Button
             <Button
-              style={{ marginRight: 20 }}
               className={styles.btn}
               className={styles.btn}
               type="primary"
               type="primary"
               onClick={() =>
               onClick={() =>
-                history.push(
-                  `/smart/optimization-tasks/${projectId}?score=${data.score}`,
-                )
+                history.push('/smart/condition-detection/' + projectId)
               }
               }
             >
             >
-              优化任务
+              工况检测
             </Button>
             </Button>
-          )}
-
-          <Button
-            className={styles.btn}
-            type="primary"
-            onClick={() =>
-              history.push('/smart/condition-detection/' + projectId)
-            }
-          >
-            工况检测
-          </Button>
+          </div>
         </div>
         </div>
+        <Row gutter={40}>
+          <Col span={12}>
+            <div className={styles.card}>
+              <h3>进水数据</h3>
+              <ul>
+                <li>
+                  <i></i>进水量:{data?.fwa}
+                </li>
+                <li>
+                  <i></i>进水温度:{data?.ft}
+                </li>
+                <li>
+                  <i></i>进水浊度:{data?.ftur}
+                </li>
+                <li>
+                  <i></i>进水压力:{data?.fpp}
+                </li>
+                {/* 与产水数据对其 */}
+                <li style={{ visibility: 'hidden' }}>
+                  <i></i>
+                </li>
+              </ul>
+            </div>
+          </Col>
+          <Col span={12}>
+            <div className={styles.card}>
+              <h3>产水数据</h3>
+              <ul>
+                <li>
+                  <i></i>外供水流量:{data?.dwa}
+                </li>
+                <li>
+                  <i></i>外供水pH:{data?.dph}
+                </li>
+                <li>
+                  <i></i>外供水电导率:{data?.dtds}
+                </li>
+                <li>
+                  <i></i>外供水浊度:{data?.dtur}
+                </li>
+                <li>
+                  <i></i>外供水余氯:{data?.dsan}
+                </li>
+              </ul>
+            </div>
+          </Col>
+          <Col span={12}>
+            <div className={styles.card}>
+              <h3>水厂负荷数据</h3>
+              <ul>
+                <li>
+                  <i></i>实际处理水量:{data?.fact_water}
+                </li>
+                <li>
+                  <i></i>设计处理水量:{data?.devise_water}
+                </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>
+              <ul>
+                <li>
+                  <i></i>吨水药成本:{open ? data?.otc_cost_unit : '*******'}
+                </li>
+                <li>
+                  <i></i>吨水电成本:{open ? data?.elec_cost_unit : '*******'}
+                </li>
+              </ul>
+            </div>
+          </Col>
+        </Row>
+        <Row gutter={16}>
+          <Col span={12}>
+            <div className={styles.card2}>
+              <h3>能耗数据</h3>
+              <ul>
+                <li>
+                  <i></i>吨水电耗:{data?.elec_unit}
+                </li>
+                <li>
+                  <i></i>用电量:{data?.elec}
+                </li>
+              </ul>
+            </div>
+          </Col>
+          <Col span={12}>
+            <div className={styles.card2}>
+              <h3>药耗数据</h3>
+              <ul>
+                <li>
+                  <i></i>吨水药耗:{data?.otc_unit}
+                </li>
+                <li>
+                  <i></i>药量:{data?.otc}
+                </li>
+              </ul>
+            </div>
+          </Col>
+        </Row>
       </div>
       </div>
-      <Row gutter={40}>
-        <Col span={12}>
-          <div className={styles.card}>
-            <h3>进水数据</h3>
-            <ul>
-              <li>
-                <i></i>进水量:{data?.fwa}
-              </li>
-              <li>
-                <i></i>进水温度:{data?.ft}
-              </li>
-              <li>
-                <i></i>进水浊度:{data?.ftur}
-              </li>
-              <li>
-                <i></i>进水压力:{data?.fpp}
-              </li>
-              {/* 与产水数据对其 */}
-              <li style={{ visibility: 'hidden' }}>
-                <i></i>
-              </li>
-            </ul>
-          </div>
-        </Col>
-        <Col span={12}>
-          <div className={styles.card}>
-            <h3>产水数据</h3>
-            <ul>
-              <li>
-                <i></i>外供水流量:{data?.dwa}
-              </li>
-              <li>
-                <i></i>外供水pH:{data?.dph}
-              </li>
-              <li>
-                <i></i>外供水电导率:{data?.dtds}
-              </li>
-              <li>
-                <i></i>外供水浊度:{data?.dtur}
-              </li>
-              <li>
-                <i></i>外供水余氯:{data?.dsan}
-              </li>
-            </ul>
-          </div>
-        </Col>
-        <Col span={12}>
-          <div className={styles.card}>
-            <h3>水厂负荷数据</h3>
-            <ul>
-              <li>
-                <i></i>实际处理水量:{data?.fact_water}
-              </li>
-              <li>
-                <i></i>设计处理水量:{data?.devise_water}
-              </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>
-            <ul>
-              <li>
-                <i></i>吨水药成本:{open ? data?.otc_cost_unit : '*******'}
-              </li>
-              <li>
-                <i></i>吨水电成本:{open ? data?.elec_cost_unit : '*******'}
-              </li>
-            </ul>
-          </div>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={12}>
-          <div className={styles.card2}>
-            <h3>能耗数据</h3>
-            <ul>
-              <li>
-                <i></i>吨水电耗:{data?.elec_unit}
-              </li>
-              <li>
-                <i></i>用电量:{data?.elec}
-              </li>
-            </ul>
-          </div>
-        </Col>
-        <Col span={12}>
-          <div className={styles.card2}>
-            <h3>药耗数据</h3>
-            <ul>
-              <li>
-                <i></i>吨水药耗:{data?.otc_unit}
-              </li>
-              <li>
-                <i></i>药量:{data?.otc}
-              </li>
-            </ul>
-          </div>
-        </Col>
-      </Row>
     </PageContent>
     </PageContent>
   );
   );
 };
 };

+ 111 - 109
src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -266,128 +266,130 @@ function TaskDetail(props: IPropsType) {
   return (
   return (
     <PageContent closeable={false}>
     <PageContent closeable={false}>
       <PageTitle returnable>任务详情</PageTitle>
       <PageTitle returnable>任务详情</PageTitle>
-      <div className={`${styles.cardContainer} card-box`}>
-        <div className={styles.normalInfo}>
-          <Row className={styles.infoRow} justify="space-between">
-            <Col className={styles.fontS24}>
-              时间:{mandateDetail?.CreateTime}
-            </Col>
-            {/*// @ts-ignore*/}
-            <Col className={styles.fontS24}>
-              {/*//@ts-ignore*/}
-              任务类别:{mandateDetail?.MandateClass?.label}
-            </Col>
-          </Row>
-          <Row justify="space-between">
-            <Col className={styles.fontS24}>
-              {/*//@ts-ignore*/}
-              任务状态:{mandateDetail?.Status?.label}
-            </Col>
-            <Col className={styles.fontS24}>
+      <div className=" content-title">
+        <div className={`${styles.cardContainer} card-box`}>
+          <div className={styles.normalInfo}>
+            <Row className={styles.infoRow} justify="space-between">
+              <Col className={styles.fontS24}>
+                时间:{mandateDetail?.CreateTime}
+              </Col>
               {/*// @ts-ignore*/}
               {/*// @ts-ignore*/}
-              任务负责人:{mandateDetail?.ResponsiblePeople?.CName}
-            </Col>
-          </Row>
-        </div>
-        <div className={styles.detailInfo}>
-          <Row className={styles.infoRow}>
-            <Col className={styles.fontS24} span={4}>
-              任务总结
-            </Col>
-            <Col className={styles.fontS24}>
-              {mandateDetail?.Summary ||
-                '根据水质相关数据.建议您调节以下参数,水厂运行可达较优状态'}
-            </Col>
-          </Row>
-          {mandateDetail?.img && (
-            <Row className={styles.infoRow}>
-              <Col className={styles.fontS24} span={4}>
-                预警图片
+              <Col className={styles.fontS24}>
+                {/*//@ts-ignore*/}
+                任务类别:{mandateDetail?.MandateClass?.label}
+              </Col>
+            </Row>
+            <Row justify="space-between">
+              <Col className={styles.fontS24}>
+                {/*//@ts-ignore*/}
+                任务状态:{mandateDetail?.Status?.label}
               </Col>
               </Col>
               <Col className={styles.fontS24}>
               <Col className={styles.fontS24}>
-                <ReactZmage
-                  controller={{
-                    // 关闭按钮
-                    close: true,
-                    // 缩放按钮
-                    zoom: false,
-                    // 下载按钮
-                    download: false,
-                    // 翻页按钮
-                    flip: false,
-                    // 多页指示
-                    pagination: false,
-                  }}
-                  backdrop="rgba(255,255,255,0.5)"
-                  style={{ width: '350px' }}
-                  src={mandateDetail?.img}
-                />
+                {/*// @ts-ignore*/}
+                任务负责人:{mandateDetail?.ResponsiblePeople?.CName}
               </Col>
               </Col>
             </Row>
             </Row>
-          )}
-
-          {mandateDetail?.Files.length > 0 && (
+          </div>
+          <div className={styles.detailInfo}>
             <Row className={styles.infoRow}>
             <Row className={styles.infoRow}>
               <Col className={styles.fontS24} span={4}>
               <Col className={styles.fontS24} span={4}>
-                截图
+                任务总结
               </Col>
               </Col>
               <Col className={styles.fontS24}>
               <Col className={styles.fontS24}>
-                <ReactZmage
-                  controller={{
-                    // 关闭按钮
-                    close: true,
-                    // 缩放按钮
-                    zoom: false,
-                    // 下载按钮
-                    download: false,
-                    // 翻页按钮
-                    flip: true,
-                    // 多页指示
-                    pagination: true,
-                  }}
-                  backdrop="rgba(255,255,255,0.5)"
-                  style={{ width: '350px' }}
-                  src={mandateDetail?.Files[0].url}
-                  set={mandateDetail?.Files.map((item) => {
-                    if (item) {
-                      return {
-                        src: item.url,
-                      };
-                    }
-                    return {};
-                  })}
-                />
+                {mandateDetail?.Summary ||
+                  '根据水质相关数据.建议您调节以下参数,水厂运行可达较优状态'}
               </Col>
               </Col>
             </Row>
             </Row>
-          )}
+            {mandateDetail?.img && (
+              <Row className={styles.infoRow}>
+                <Col className={styles.fontS24} span={4}>
+                  预警图片
+                </Col>
+                <Col className={styles.fontS24}>
+                  <ReactZmage
+                    controller={{
+                      // 关闭按钮
+                      close: true,
+                      // 缩放按钮
+                      zoom: false,
+                      // 下载按钮
+                      download: false,
+                      // 翻页按钮
+                      flip: false,
+                      // 多页指示
+                      pagination: false,
+                    }}
+                    backdrop="rgba(255,255,255,0.5)"
+                    style={{ width: '350px' }}
+                    src={mandateDetail?.img}
+                  />
+                </Col>
+              </Row>
+            )}
 
 
-          <Row>
-            <Col className={styles.fontS24} span={4}>
-              任务内容
-            </Col>
-            <Col className={styles.fontS24} span={20}>
-              {/*{mandateDetail?.Detail}*/}
-              <Table
-                rowKey="key"
-                columns={columnDef}
-                dataSource={mandateTable}
-                pagination={false}
-              />
-            </Col>
-          </Row>
-        </div>
-        <div className={styles.relatedOrder}>
-          <Collapse
-            className={styles.collapseLabel}
-            ghost
-            expandIcon={({ isActive }) => (
-              <UpOutlined
-                style={{ color: '#5697e4' }}
-                rotate={isActive ? 180 : 0}
-              />
+            {mandateDetail?.Files.length > 0 && (
+              <Row className={styles.infoRow}>
+                <Col className={styles.fontS24} span={4}>
+                  截图
+                </Col>
+                <Col className={styles.fontS24}>
+                  <ReactZmage
+                    controller={{
+                      // 关闭按钮
+                      close: true,
+                      // 缩放按钮
+                      zoom: false,
+                      // 下载按钮
+                      download: false,
+                      // 翻页按钮
+                      flip: true,
+                      // 多页指示
+                      pagination: true,
+                    }}
+                    backdrop="rgba(255,255,255,0.5)"
+                    style={{ width: '350px' }}
+                    src={mandateDetail?.Files[0].url}
+                    set={mandateDetail?.Files.map((item) => {
+                      if (item) {
+                        return {
+                          src: item.url,
+                        };
+                      }
+                      return {};
+                    })}
+                  />
+                </Col>
+              </Row>
             )}
             )}
-            items={handledWorkOrder}
-          />
+
+            <Row>
+              <Col className={styles.fontS24} span={4}>
+                任务内容
+              </Col>
+              <Col className={styles.fontS24} span={20}>
+                {/*{mandateDetail?.Detail}*/}
+                <Table
+                  rowKey="key"
+                  columns={columnDef}
+                  dataSource={mandateTable}
+                  pagination={false}
+                />
+              </Col>
+            </Row>
+          </div>
+          <div className={styles.relatedOrder}>
+            <Collapse
+              className={styles.collapseLabel}
+              ghost
+              expandIcon={({ isActive }) => (
+                <UpOutlined
+                  style={{ color: '#5697e4' }}
+                  rotate={isActive ? 180 : 0}
+                />
+              )}
+              items={handledWorkOrder}
+            />
+          </div>
         </div>
         </div>
       </div>
       </div>
     </PageContent>
     </PageContent>

+ 3 - 1
src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.js

@@ -201,7 +201,9 @@ const WorkOrderList = (props) => {
         {OrderStatus.map((item) => {
         {OrderStatus.map((item) => {
           return (
           return (
             <TabPane tab={item.label} key={String(item.value)}>
             <TabPane tab={item.label} key={String(item.value)}>
-              {workOrderList}
+              <div style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}>
+                {workOrderList}
+              </div>
             </TabPane>
             </TabPane>
           );
           );
         })}
         })}