src/components/ManagementPage/chartModule.js

@@ -102,7 +102,7 @@ const ChartModule = (props) => {
 
         if (Array.isArray(yName)) {
           if (yName.length > 2) {
-            option.grid.right = 140;
+            option.grid.right = yName.length * 60;
           }
 
           option.yAxis = yName.map((item, index) => {
@@ -270,7 +270,7 @@ const defaultOption = {
       position: 'right',
       nameTextStyle: {
         fontSize: '0.24rem',
-        align: 'right',
+        align: 'center',
         padding: [0, 0, 15, 0],
       },
       axisLabel: {
@@ -296,7 +296,7 @@ const defaultOption = {
       offset: 80,
       nameTextStyle: {
         fontSize: '0.24rem',
-        // align: 'left',
+        align: 'left',
         padding: [0, 0, 15, 0],
       },
       axisLabel: {

src/pages/Home/ChemCostComparison.js

@@ -338,8 +338,11 @@ export const ChemCost = ({ open, showTheory = false }) => {
               <div className={styles.name}>近一小时药量</div>
             </div>
           </div>
+        </div>
+
+        <div className="card-box" style={{ marginTop: '0.4rem' }}>
           {/* 使用Tabs来展示所有药的标签 */}
-          <div style={{ padding: '0 0.1rem' }}>
+          <div style={{ padding: '0.2rem 0.1rem' }}>
             <div className="tabs">
               {chemList?.map((item) => (
                 <div
@@ -374,28 +377,28 @@ export const ChemCost = ({ open, showTheory = false }) => {
               <div className={styles.name}>当月药量</div>
             </div>
           </div>
-        </div>
-        {chartData.length !== 0 && (
-          <div
-            className="card-box"
-            style={{
-              marginTop: '0.2rem',
-              height: '8.8rem',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              padding: '0.4rem 0',
-            }}
-          >
-            <div style={{ height: '3.5rem' }}>
-              <ChartModule {...chartData[0]} />
-            </div>
 
-            <div style={{ height: '3.5rem' }}>
-              <ChartModule {...chartData[1]} />
+          {chartData.length !== 0 && (
+            <div
+              style={{
+                marginTop: '0.2rem',
+                height: '8.8rem',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                padding: '0.4rem 0',
+              }}
+            >
+              <div style={{ height: '3.5rem' }}>
+                <ChartModule {...chartData[0]} />
+              </div>
+
+              <div style={{ height: '3.5rem' }}>
+                <ChartModule {...chartData[1]} />
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     </div>
   );

src/pages/Home/EnergyCostComparison.js

@@ -366,7 +366,7 @@ export const EnergyCost = ({ open, detailClick }) => {
             flexDirection: 'column',
             justifyContent: 'space-between',
             padding: '0.6rem 0 0.4rem',
-            marginTop: '0.1rem',
+            marginTop: '0.4rem',
           }}
         >
           <div style={{ height: '3.5rem' }}>

src/pages/Home/EnergyCostDetail.js

@@ -313,6 +313,7 @@ const SubTitle = ({ title }) => {
         marginBottom: '0.2rem',
         fontSize: '0.28rem',
         fontWeight: '600',
+        width: '80%',
       }}
     >
       <div

src/pages/SmartOps/index.less

@@ -2,7 +2,7 @@
   padding: 0.08rem 0.12rem;
   margin: 0.16rem 0;
   color: #1c50b3;
-  font-size: 0.28rem;
+  font-size: 0.26rem;
   .titleContent {
     display: flex;
     align-items: center;
@@ -35,7 +35,7 @@
       justify-content: center;
       align-items: flex-start;
       .item {
-        width: 3.5rem;
+        width: 3.8rem;
         height: 0.52rem;
         white-space: nowrap;
         margin-bottom: 0.1rem;
@@ -46,7 +46,7 @@
       }
       .item1 {
         .item;
-        width: 3.15rem;
+        width: 3.43rem;
         background-image: url('@/assets/smartOps/bg-left-2.png');
       }
       .item2 {
@@ -55,7 +55,7 @@
       }
     }
     .middle {
-      margin: 0 0.3rem;
+      margin: 0 0.1rem;
       position: relative;
       .in {
         width: 2.12rem;
@@ -87,7 +87,7 @@
       justify-content: center;
       align-items: flex-end;
       .item {
-        width: 3.5rem;
+        width: 3.8rem;
         height: 0.52rem;
         white-space: nowrap;
         margin-bottom: 0.1rem;
@@ -98,7 +98,7 @@
       }
       .item1 {
         .item;
-        width: 3.15rem;
+        width: 3.43rem;
         background-image: url('@/assets/smartOps/bg-right-2.png');
         padding-left: 0.2rem;
       }

src/pages/SmartOps/operationManage/CostAnalysis/CostAnalysis.js

@@ -148,7 +148,6 @@ const CostAnalysis = () => {
   return (
     <div className="card-box" style={{ padding: '0.2rem' }}>
       <div>
-        <SubTitle title="全厂概览" />
         <div className={styles.timeBtn}>
           <RangePicker onChange={handleTimeRangeChange} />
           <Button

src/pages/SmartOps/operationManage/index.js

@@ -4,6 +4,7 @@ import { EnergyCost } from '@/pages/Home/EnergyCostComparison';
 import { EnergyDetail } from '@/pages/Home/EnergyCostDetail';
 import { WaterQuality } from '@/pages/Home/QualityMng';
 import { WaterAmt } from '@/pages/Home/WaterAmtMng';
+import { Button } from 'antd';
 import { useState } from 'react';
 import CostAnalysis from './CostAnalysis/CostAnalysis';
 
@@ -36,10 +37,23 @@ const OperationManage = () => {
       key: '5',
       children: showEnergyDetail ? (
         <div
-          onClick={() => {
-            setShowEnergyDetail(!showEnergyDetail);
-          }}
+          className="card-box"
+          style={{ padding: '0.2rem', position: 'relative' }}
         >
+          <Button
+            style={{
+              position: 'absolute',
+              right: '0.2rem',
+              fontSize: '0.26rem',
+              height: '0.5rem',
+              zIndex: 1,
+            }}
+            onClick={() => {
+              setShowEnergyDetail(false);
+            }}
+          >
+            返回
+          </Button>
           <EnergyDetail />
         </div>
       ) : (

src/pages/SmartOps/predictionAnalysis/PredictionAnalysis.js

@@ -0,0 +1,41 @@
+import { RightOutlined } from '@ant-design/icons';
+import SubTitle from '../components/SubTitle';
+import styles from './PredictionAnalysis.less';
+
+const UFList = [
+  { label: '超滤模组A (UF-4001A)' },
+  { label: '超滤模组A (UF-4001B)' },
+  { label: '超滤模组A (UF-4001C)' },
+  { label: '超滤模组A (UF-4001D)' },
+];
+
+const PredictionAnalysis = () => {
+  return (
+    <>
+      <div className="card-box" style={{ padding: '0.2rem' }}>
+        <SubTitle title="超滤工艺单元" />
+        {UFList.map((item, index) => {
+          return (
+            <div
+              key={item.label}
+              className={styles.itemContainer}
+              onClick={() => {
+                console.log(index);
+              }}
+            >
+              <div>{item.label}</div>
+              <div className={styles.toDetail}>
+                预测分析
+                <RightOutlined
+                  style={{ marginLeft: '0.1rem', color: 'gray' }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default PredictionAnalysis;

src/pages/SmartOps/predictionAnalysis/PredictionAnalysis.less

@@ -0,0 +1,10 @@
+.itemContainer {
+  padding: 0.2rem;
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.26rem;
+  border-bottom: 1px solid rgb(190, 190, 190);
+  .toDetail {
+    color: #1755ff;
+  }
+}