style: 样式调整

src/pages/Home/ChemCostComparison.js

@@ -105,18 +105,18 @@ export const ChemCost = ({ open, showTheory = false }) => {
     defaultParams: [{ project_id: projectId }],
     formatResult: (result) => {
       const otcCost = Number(getValue(result.data.otc_cost_unit));
-      let resultText = `当前药耗持平理论值 ${
+      let resultText = `当前药耗持平理论值 (${
         result?.data?.otc_unit_theory || 0
-      }KWh/m³`;
+      }kg/m³)`;
       if (otcCost) {
         if (otcCost > result.data.otc_unit_theory) {
-          resultText = `当前药耗高于理论值 ${result.data.otc_unit_theory}KWh/m³`;
+          resultText = `当前药耗高于理论值 (${result.data.otc_unit_theory}kg/m³)`;
         }
         if (otcCost === result.data.otc_unit_theory) {
-          resultText = `当前药耗持平理论值 ${result.data.otc_unit_theory}KWh/m³`;
+          resultText = `当前药耗持平理论值 (${result.data.otc_unit_theory}kg/m³)`;
         }
         if (otcCost < result.data.otc_unit_theory) {
-          resultText = `当前药耗低于理论值 ${result.data.otc_unit_theory}KWh/m³`;
+          resultText = `当前药耗低于理论值 (${result.data.otc_unit_theory}kg/m³)`;
         }
       }
       console.log({ ...result.data, resultText });
@@ -308,72 +308,78 @@ export const ChemCost = ({ open, showTheory = false }) => {
   }, []);
 
   return (
-    <div className="card-box" style={{ position: 'relative' }}>
+    <div style={{ position: 'relative' }}>
       <div
         style={{
           fontSize: '0.28rem',
           position: 'absolute',
-          top: '-0.6rem',
-          right: '0.3rem',
+          top: '-0.3rem',
+          right: '0.2rem',
           display: `${showTheory ? '' : 'none'}`,
         }}
       >
         {snapshot?.resultText}
       </div>
-      <div className={styles.curEnergyCost}>
-        <div className={styles.item}>
-          <div className={styles.value}>
-            {open ? getValue(snapshot?.otc_unit || '') : '***'}
-            <span className={styles.unit}>kg/t</span>
-          </div>
-          <div className={styles.name}>近一小时吨水药耗</div>
-        </div>
-        <div className={styles.item}>
-          <div className={styles.value}>
-            {open ? getValue(snapshot?.otc || '') : '***'}
-            <span className={styles.unit}>kg</span>
-          </div>
-          <div className={styles.name}>近一小时药量</div>
-        </div>
-      </div>
-      <div style={{ padding: '0.2rem' }}>
-        {/* 使用Tabs来展示所有药的标签 */}
-        <div className="tabs">
-          {chemList?.map((item) => (
-            <div
-              key={item}
-              onClick={() => {
-                setCurrentChem(item);
-                handleChemChange(item);
-              }}
-              className={`tabs-item ${currentChem == item ? 'active' : ''}`}
-            >
-              {item}
+      <div style={{ padding: '0.2rem 0rem' }}>
+        <div className="card-box">
+          <div className={styles.curEnergyCost}>
+            <div className={styles.item}>
+              <div className={styles.value}>
+                {open ? getValue(snapshot?.otc_unit || '') : '***'}
+                <span className={styles.unit}>kg/t</span>
+              </div>
+              <div className={styles.name}>近一小时吨水药耗</div>
             </div>
-          ))}
-        </div>
-        <div className={styles.curEnergyCost}>
-          <div className={styles.item}>
-            <div style={{ fontSize: '0.18rem', color: 'gray' }}>
-              药剂参考价格：{referencePriceTable[`${currentChem}`]}
+            <div className={styles.item}>
+              <div className={styles.value}>
+                {open ? getValue(snapshot?.otc || '') : '***'}
+                <span className={styles.unit}>kg</span>
+              </div>
+              <div className={styles.name}>近一小时药量</div>
             </div>
-            <div className={styles.value}>
-              {open ? topValues.chemPer : '***'}
-              <span className={styles.unit}>kg/m³</span>
+          </div>
+          {/* 使用Tabs来展示所有药的标签 */}
+          <div style={{ padding: '0 0.1rem' }}>
+            <div className="tabs">
+              {chemList?.map((item) => (
+                <div
+                  key={item}
+                  onClick={() => {
+                    setCurrentChem(item);
+                    handleChemChange(item);
+                  }}
+                  className={`tabs-item ${currentChem == item ? 'active' : ''}`}
+                >
+                  {item}
+                </div>
+              ))}
             </div>
-            <div className={styles.name}>当月吨水药耗</div>
           </div>
-          <div className={styles.item}>
-            <div className={styles.value}>
-              {open ? topValues.chemUser : '***'}
-              <span className={styles.unit}>kg</span>
+          <div className={styles.curEnergyCost}>
+            <div className={styles.item}>
+              <div style={{ fontSize: '0.18rem', color: 'gray' }}>
+                药剂参考价格：{referencePriceTable[`${currentChem}`]}
+              </div>
+              <div className={styles.value}>
+                {open ? topValues.chemPer : '***'}
+                <span className={styles.unit}>kg/m³</span>
+              </div>
+              <div className={styles.name}>当月吨水药耗</div>
+            </div>
+            <div className={styles.item}>
+              <div className={styles.value}>
+                {open ? topValues.chemUser : '***'}
+                <span className={styles.unit}>kg</span>
+              </div>
+              <div className={styles.name}>当月药量</div>
             </div>
-            <div className={styles.name}>当月药量</div>
           </div>
         </div>
         {chartData.length !== 0 && (
           <div
+            className="card-box"
             style={{
+              marginTop: '0.2rem',
               height: '8.8rem',
               display: 'flex',
               flexDirection: 'column',

src/pages/Home/EnergyCostComparison.js

@@ -286,8 +286,7 @@ export const EnergyCost = ({ open, detailClick }) => {
 
   return (
     <div
-      className="card-box"
-      style={{ padding: '0.2rem', position: 'relative' }}
+      style={{ padding: '0.2rem', position: 'relative', marginTop: '0.1rem' }}
     >
       <div
         style={{
@@ -300,69 +299,74 @@ export const EnergyCost = ({ open, detailClick }) => {
       >
         {snapshot?.resultText}
       </div>
-      <LineChartOutlined
-        style={{
-          fontSize: '0.4rem',
-          position: 'absolute',
-          right: '0.3rem',
-          color: '#0139f1',
-        }}
-        onClick={goEnergyDetail}
-      />
-      <div className={styles.curEnergyCost}>
-        <div
-          className={styles.item}
+      <div className="card-box" style={{ padding: '0.1rem 0' }}>
+        <LineChartOutlined
           style={{
-            borderRight: '1px solid #eaeaea',
-            borderBottom: '1px solid #eaeaea',
+            fontSize: '0.4rem',
+            position: 'absolute',
+            right: '0.3rem',
+            color: '#0139f1',
           }}
-        >
-          <div className={styles.value}>
-            {open ? getValue(snapshot?.elec_unit || '') : '***'}
-            <span className={styles.unit}>kWh/t</span>
+          onClick={goEnergyDetail}
+        />
+        <div className={styles.curEnergyCost}>
+          <div
+            className={styles.item}
+            style={{
+              borderRight: '1px solid #eaeaea',
+              borderBottom: '1px solid #eaeaea',
+            }}
+          >
+            <div className={styles.value}>
+              {open ? getValue(snapshot?.elec_unit || '') : '***'}
+              <span className={styles.unit}>kWh/t</span>
+            </div>
+            <div className={styles.name}>近一小时吨水电耗</div>
           </div>
-          <div className={styles.name}>近一小时吨水电耗</div>
-        </div>
-        <div
-          className={styles.item}
-          style={{
-            borderBottom: '1px solid #eaeaea',
-          }}
-        >
-          <div className={styles.value}>
-            {open ? getValue(snapshot?.elec || '') : '***'}
-            <span className={styles.unit}>kWh</span>
+          <div
+            className={styles.item}
+            style={{
+              borderBottom: '1px solid #eaeaea',
+            }}
+          >
+            <div className={styles.value}>
+              {open ? getValue(snapshot?.elec || '') : '***'}
+              <span className={styles.unit}>kWh</span>
+            </div>
+            <div className={styles.name}>近一小时实际用电量</div>
           </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
+            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>
-          <div className={styles.name}>当月吨水电耗</div>
-        </div>
-        <div className={styles.item}>
-          <div className={styles.value}>
-            {open ? curElecUsed : '***'}
-            <span className={styles.unit}>kWh</span>
+          <div className={styles.item}>
+            <div className={styles.value}>
+              {open ? curElecUsed : '***'}
+              <span className={styles.unit}>kWh</span>
+            </div>
+            <div className={styles.name}>当月实际用电量</div>
           </div>
-          <div className={styles.name}>当月实际用电量</div>
         </div>
       </div>
+
       {chartData.length !== 0 && (
         <div
+          className="card-box"
           style={{
             height: '9.2rem',
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'space-between',
             padding: '0.6rem 0 0.4rem',
+            marginTop: '0.1rem',
           }}
         >
           <div style={{ height: '3.5rem' }}>

src/pages/Home/WaterAmtMng.js

@@ -15,40 +15,12 @@ import styles from './index.less';
 const { RangePicker } = DatePicker;
 
 const WaterAmtMng = () => {
-  const { projectId } = useParams();
-
-  const { data } = useRequest(queryConditionSnapshot, {
-    defaultParams: [{ project_id: projectId }],
-    pollingInterval: 10 * 1000,
-  });
-
-  const status = useMemo(() => {
-    switch (data?.dwa_status) {
-      case 1:
-        return '当前处于外供水高峰期';
-      case 2:
-        return '当前处于外供水平时期';
-      case 3:
-        return '当前处于外供水低峰期';
-    }
-  }, [data?.dwa_status]);
   return (
     <PageContent closeable={false}>
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         水量监测
       </PageTitle>
-      <div className={styles.pageTip}>{status}</div>
-      <ul className={styles.pageTop}>
-        <li>
-          <div className={styles.pageTopValue}>{getValue(data?.fwa)}</div>
-          <div>进水量(m³/h)</div>
-        </li>
-        <li>
-          <div className={styles.pageTopValue}>{getValue(data?.dwa)}</div>
-          <div>产水量(m³/h)</div>
-        </li>
-      </ul>
-      <WaterAmt />
+      <WaterAmt showTip />
     </PageContent>
   );
 };
@@ -60,11 +32,19 @@ const getValue = (str) => {
   if (result && result[1]) return result[1];
   return 0;
 };
-export const WaterAmt = () => {
+export const WaterAmt = ({ showTip = false }) => {
   const { projectId } = useParams();
 
   const [filter, setFilter] = useState([dayjs().subtract(1, 'day'), dayjs()]);
 
+  const { data: snapshot } = useRequest(queryConditionSnapshot, {
+    defaultParams: [{ project_id: projectId }],
+    pollingInterval: 10 * 1000,
+    formatResult: (result) => {
+      return result?.data;
+    },
+  });
+
   const { data, loading, run } = useRequest(
     (date) =>
       queryChartListByCode(
@@ -86,6 +66,17 @@ export const WaterAmt = () => {
     },
   );
 
+  const status = useMemo(() => {
+    switch (snapshot?.dwa_status) {
+      case 1:
+        return '当前处于外供水高峰期';
+      case 2:
+        return '当前处于外供水平时期';
+      case 3:
+        return '当前处于外供水低峰期';
+    }
+  }, [snapshot?.dwa_status]);
+
   const columns = [
     {
       title: '时间',
@@ -151,69 +142,88 @@ export const WaterAmt = () => {
 
   return (
     <Spin spinning={loading}>
-      <div className={styles.timeSelectBox}>
-        <div style={{ fontSize: '0.3rem' }}>
-          <RangePicker
-            allowClear
-            value={filter}
-            onChange={(time) => {
-              onSearch(time);
-            }}
-          />
+      <div style={{ padding: '0.2rem' }}>
+        {showTip && <div className={styles.pageTip}>{status}</div>}
+        <div className="card-box">
+          <ul className={styles.pageTop}>
+            <li>
+              <div className={styles.pageTopValue}>
+                {getValue(snapshot?.fwa)}
+              </div>
+              <div>进水量(m³/h)</div>
+            </li>
+            <li>
+              <div className={styles.pageTopValue}>
+                {getValue(snapshot?.dwa)}
+              </div>
+              <div>产水量(m³/h)</div>
+            </li>
+          </ul>
         </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>
-      <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 className="card-box" style={{ padding: '0.2rem ' }}>
+          <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>
-        </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>
       </div>
     </Spin>

src/pages/Home/index.less

@@ -384,7 +384,7 @@
 }
 .pageTip {
   position: absolute;
-  top: 0.3rem;
+  top: -0.3rem;
   right: 0.5rem;
   font-size: 0.24rem;
 }
@@ -393,7 +393,7 @@
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
   margin-bottom: 0.4rem;
-  border-bottom: 1px solid #e8e8e8;
+  // border-bottom: 1px solid #e8e8e8;
   li {
     width: 50%;
     text-align: center;

src/pages/Home/manage.less

@@ -5,6 +5,10 @@
   color: #02a7f0;
 }
 
+.infoContainer {
+  padding: 0.2rem 0;
+}
+
 .infoContainer > * {
   margin-bottom: 0.2rem;
 }