fix: 拆分水质、水量、能耗和药耗四个页面

src/pages/Home/ChemCostComparison.js

@@ -47,10 +47,32 @@ const typeParams = [
   },
 ];
 
-const CostComparison = (props) => {
+const CostComparison = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
+        药耗监测
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen(!open);
+          }}
+          style={{ marginLeft: 10 }}
+          className={`password-eye ${open ? 'open' : ''}`}
+        ></div>
+      </PageTitle>
+      <ChemCost open={open} />
+    </PageContent>
+  );
+};
+
+export default CostComparison;
+
+export const ChemCost = ({ open }) => {
   const { projectId } = useParams();
 
-  const [open, setOpen] = useState(false);
   const [chartData, setChartData] = useState([]);
   const [chemList, setChemList] = useState([]);
   const [currentChem, setCurrentChem] = useState();
@@ -256,18 +278,7 @@ const CostComparison = (props) => {
   }, []);
 
   return (
-    <PageContent closeable={false}>
-      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
-        药耗监测
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpen(!open);
-          }}
-          style={{ marginLeft: 10 }}
-          className={`password-eye ${open ? 'open' : ''}`}
-        ></div>
-      </PageTitle>
+    <>
       <div className={styles.curEnergyCost}>
         <div className={styles.item}>
           <div className={styles.value}>
@@ -339,8 +350,6 @@ const CostComparison = (props) => {
           </div>
         )}
       </div>
-    </PageContent>
+    </>
   );
 };
-
-export default CostComparison;

src/pages/Home/EnergyCostComparison.js

@@ -35,9 +35,31 @@ const typeParams = [
 ];
 
 const CostComparison = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
+        能耗数据
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen(!open);
+          }}
+          style={{ marginLeft: '0.1rem' }}
+          className={`password-eye ${open ? 'open' : ''}`}
+        ></div>
+      </PageTitle>
+      <EnergyCost open={open} />
+    </PageContent>
+  );
+};
+
+export default CostComparison;
+
+export const EnergyCost = ({ open, detailClick }) => {
   const { projectId } = useParams();
 
-  const [open, setOpen] = useState(false);
   const [chartData, setChartData] = useState([]);
   const [curElecPerCost, setElecPerCost] = useState(0); // 当前月实际吨水电耗
   const [curElecUsed, setCurElecUsed] = useState(0); // 当前月实际用电量
@@ -226,103 +248,92 @@ const CostComparison = () => {
   }, []);
 
   const goEnergyDetail = () => {
-    history.push(`/home/energy/detail/${projectId}`);
+    if (detailClick) {
+      detailClick();
+    } else {
+      history.push(`/home/energy/detail/${projectId}`);
+    }
   };
 
   return (
-    <PageContent closeable={false}>
-      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
-        能耗数据
+    <div
+      className="card-box"
+      style={{ padding: '0.2rem', position: 'relative' }}
+    >
+      <LineChartOutlined
+        style={{
+          fontSize: '0.4rem',
+          position: 'absolute',
+          right: '0.3rem',
+          color: '#0139f1',
+        }}
+        onClick={goEnergyDetail}
+      />
+      <div className={styles.curEnergyCost}>
         <div
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpen(!open);
-          }}
-          style={{ marginLeft: '0.1rem' }}
-          className={`password-eye ${open ? 'open' : ''}`}
-        ></div>
-      </PageTitle>
-      <div
-        className="card-box"
-        style={{ padding: '0.2rem', position: 'relative' }}
-      >
-        <LineChartOutlined
+          className={styles.item}
           style={{
-            fontSize: '0.4rem',
-            position: 'absolute',
-            right: '0.3rem',
-            color: '#0139f1',
+            borderRight: '1px solid #eaeaea',
+            borderBottom: '1px solid #eaeaea',
           }}
-          onClick={goEnergyDetail}
-        />
-        <div className={styles.curEnergyCost}>
-          <div
-            className={styles.item}
-            style={{
-              borderRight: '1px solid #eaeaea',
-              borderBottom: '1px solid #eaeaea',
-            }}
-          >
-            <div className={styles.value}>
-              {open ? curElecPerCost : '***'}
-              <span className={styles.unit}>kWh/t</span>
-            </div>
-            <div className={styles.name}>近一天吨水电耗</div>
+        >
+          <div className={styles.value}>
+            {open ? curElecPerCost : '***'}
+            <span className={styles.unit}>kWh/t</span>
           </div>
-          <div
-            className={styles.item}
-            style={{
-              borderBottom: '1px solid #eaeaea',
-            }}
-          >
-            <div className={styles.value}>
-              {open ? curElecUsed : '***'}
-              <span className={styles.unit}>kWh</span>
-            </div>
-            <div className={styles.name}>近一天实际用电量</div>
+          <div className={styles.name}>近一天吨水电耗</div>
+        </div>
+        <div
+          className={styles.item}
+          style={{
+            borderBottom: '1px solid #eaeaea',
+          }}
+        >
+          <div className={styles.value}>
+            {open ? curElecUsed : '***'}
+            <span className={styles.unit}>kWh</span>
           </div>
-          <div
-            className={styles.item}
-            style={{
-              borderRight: '1px solid #eaeaea',
-            }}
-          >
-            <div className={styles.value}>
-              {open ? curElecPerCost : '***'}
-              <span className={styles.unit}>kWh/t</span>
-            </div>
-            <div className={styles.name}>当月吨水电耗</div>
+          <div className={styles.name}>近一天实际用电量</div>
+        </div>
+        <div
+          className={styles.item}
+          style={{
+            borderRight: '1px solid #eaeaea',
+          }}
+        >
+          <div className={styles.value}>
+            {open ? curElecPerCost : '***'}
+            <span className={styles.unit}>kWh/t</span>
           </div>
-          <div className={styles.item}>
-            <div className={styles.value}>
-              {open ? curElecUsed : '***'}
-              <span className={styles.unit}>kWh</span>
-            </div>
-            <div className={styles.name}>当月实际用电量</div>
+          <div className={styles.name}>当月吨水电耗</div>
+        </div>
+        <div className={styles.item}>
+          <div className={styles.value}>
+            {open ? curElecUsed : '***'}
+            <span className={styles.unit}>kWh</span>
           </div>
+          <div className={styles.name}>当月实际用电量</div>
         </div>
-        {chartData.length !== 0 && (
-          <div
-            style={{
-              height: '9.2rem',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              padding: '0.6rem 0 0.4rem',
-            }}
-          >
-            <div style={{ height: '3.5rem' }}>
-              <ChartModule {...chartData[0]} />
-            </div>
+      </div>
+      {chartData.length !== 0 && (
+        <div
+          style={{
+            height: '9.2rem',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            padding: '0.6rem 0 0.4rem',
+          }}
+        >
+          <div style={{ height: '3.5rem' }}>
+            <ChartModule {...chartData[0]} />
+          </div>
 
-            <div style={{ height: '3.5rem' }}>
-              <ChartModule {...chartData[1]} />
-            </div>
+          <div style={{ height: '3.5rem' }}>
+            <ChartModule {...chartData[1]} />
           </div>
-        )}
-      </div>
-    </PageContent>
+        </div>
+      )}
+    </div>
   );
 };
-
-export default CostComparison;

src/pages/Home/QualityMng.js

@@ -15,6 +15,20 @@ import dayjs from 'dayjs';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 function Quality() {
+  return (
+    <PageContent closeable={false}>
+      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
+        水质监测
+      </PageTitle>
+
+      <WaterQuality />
+    </PageContent>
+  );
+}
+
+export default Quality;
+
+export const WaterQuality = () => {
   const { projectId } = useParams();
   const [currentCode, setCode] = useState(null);
   // const [processId, setProcessId] = useState(null);
@@ -100,54 +114,46 @@ function Quality() {
     const code = codeList.find((item) => item.metric == name);
     if (code) setCode(code);
   };
-
   return (
-    <PageContent closeable={false}>
-      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
-        水质监测
-      </PageTitle>
-
-      <div className="card-box" style={{ padding: '0.2rem' }}>
-        <div className="tabs" style={{ marginBottom: '0.2rem' }}>
-          {codeList?.map((item) => (
-            <div
-              onClick={() => {
-                setCode(item);
-              }}
-              className={`tabs-item ${item == currentCode ? 'active' : ''}`}
-            >
-              {item.metric}
-            </div>
-          ))}
+    <div className="card-box" style={{ padding: '0.2rem' }}>
+      <div className="tabs" style={{ marginBottom: '0.2rem' }}>
+        {codeList?.map((item) => (
+          <div
+            key={item}
+            onClick={() => {
+              setCode(item);
+            }}
+            className={`tabs-item ${item == currentCode ? 'active' : ''}`}
+          >
+            {item.metric}
+          </div>
+        ))}
+      </div>
+      <div className="section-title">
+        <div className="section-line"></div>
+        数据曲线
+      </div>
+      <Spin spinning={mainRes.loading}>
+        <div style={{ height: '5rem', marginTop: '0.2rem' }}>
+          {mainRes?.data ? (
+            <ChartModule {...chartProps} onChange={onChange} />
+          ) : (
+            <Empty />
+          )}
         </div>
+      </Spin>
+      <div style={{ marginTop: '0.3rem' }}>
         <div className="section-title">
           <div className="section-line"></div>
-          数据曲线
-        </div>
-        <Spin spinning={mainRes.loading}>
-          <div style={{ height: '5rem', marginTop: '0.2rem' }}>
-            {mainRes?.data ? (
-              <ChartModule {...chartProps} onChange={onChange} />
-            ) : (
-              <Empty />
-            )}
-          </div>
-        </Spin>
-        <div style={{ marginTop: '0.3rem' }}>
-          <div className="section-title">
-            <div className="section-line"></div>
-            数据列表
-          </div>
-          <Table
-            columns={column}
-            style={{ marginTop: '0.2rem' }}
-            dataSource={mainRes?.data}
-            pagination={false}
-          />
+          数据列表
         </div>
+        <Table
+          columns={column}
+          style={{ marginTop: '0.2rem' }}
+          dataSource={mainRes?.data}
+          pagination={false}
+        />
       </div>
-    </PageContent>
+    </div>
   );
-}
-
-export default Quality;
+};

src/pages/Home/WaterAmtMng.js

@@ -14,6 +14,19 @@ import styles from './index.less';
 const { RangePicker } = DatePicker;
 
 const WaterAmtMng = () => {
+  return (
+    <PageContent closeable={false}>
+      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
+        水量监测
+      </PageTitle>
+      <WaterAmt />
+    </PageContent>
+  );
+};
+
+export default WaterAmtMng;
+
+export const WaterAmt = () => {
   const { projectId } = useParams();
 
   const [filter, setFilter] = useState([dayjs().subtract(1, 'day'), dayjs()]);
@@ -103,79 +116,72 @@ const WaterAmtMng = () => {
   };
 
   return (
-    <PageContent closeable={false}>
-      <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
-        水量监测
-      </PageTitle>
-      <Spin spinning={loading}>
-        <div className={styles.timeSelectBox}>
-          <div style={{ fontSize: '0.3rem' }}>
-            <RangePicker
-              allowClear
-              value={filter}
-              onChange={(time) => {
-                onSearch(time);
-              }}
-            />
-          </div>
-          <div className={styles.timeBtn}>
-            <Button
-              type="primary"
-              shape="round"
-              onClick={() => {
-                onSearch('day');
-              }}
-            >
-              近一天
-            </Button>
-            <Button
-              type="primary"
-              shape="round"
-              onClick={() => {
-                onSearch('week');
-              }}
-            >
-              近一周
-            </Button>
-            <Button
-              type="primary"
-              shape="round"
-              onClick={() => {
-                onSearch('month');
-              }}
-            >
-              近一个月
-            </Button>
-          </div>
+    <Spin spinning={loading}>
+      <div className={styles.timeSelectBox}>
+        <div style={{ fontSize: '0.3rem' }}>
+          <RangePicker
+            allowClear
+            value={filter}
+            onChange={(time) => {
+              onSearch(time);
+            }}
+          />
+        </div>
+        <div className={styles.timeBtn}>
+          <Button
+            type="primary"
+            shape="round"
+            onClick={() => {
+              onSearch('day');
+            }}
+          >
+            近一天
+          </Button>
+          <Button
+            type="primary"
+            shape="round"
+            onClick={() => {
+              onSearch('week');
+            }}
+          >
+            近一周
+          </Button>
+          <Button
+            type="primary"
+            shape="round"
+            onClick={() => {
+              onSearch('month');
+            }}
+          >
+            近一个月
+          </Button>
         </div>
-        <div className="card-box" style={{ padding: '0.2rem' }}>
+      </div>
+      <div className="card-box" style={{ padding: '0.2rem' }}>
+        <div className="section-title">
+          <div className="section-line"></div>
+          数据曲线
+        </div>
+        <Spin spinning={loading}>
+          <div style={{ height: '5rem', marginTop: 20 }}>
+            <ChartModule yName="水量(t)" xData={xData} dataList={dataList} />
+          </div>
+        </Spin>
+        <div style={{ marginTop: 30 }}>
           <div className="section-title">
             <div className="section-line"></div>
-            数据曲线
-          </div>
-          <Spin spinning={loading}>
-            <div style={{ height: '5rem', marginTop: 20 }}>
-              <ChartModule yName="水量(t)" xData={xData} dataList={dataList} />
-            </div>
-          </Spin>
-          <div style={{ marginTop: 30 }}>
-            <div className="section-title">
-              <div className="section-line"></div>
-              数据列表
-            </div>
-            <Table
-              loading={loading}
-              columns={columns}
-              rowKey="time"
-              style={{ marginTop: 20 }}
-              pagination={false}
-              dataSource={data?.sort((a, b) => b?.time?.localeCompare(a?.time))}
-            />
+            数据列表
           </div>
+          <Table
+            loading={loading}
+            columns={columns}
+            rowKey="time"
+            style={{ marginTop: 20 }}
+            pagination={false}
+            dataSource={data?.sort((a, b) => b?.time?.localeCompare(a?.time))}
+          />
         </div>
-      </Spin>
-    </PageContent>
+      </div>
+    </Spin>
   );
 };
-
-export default WaterAmtMng;