feat: 预测分析列表

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/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/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;
+  }
+}