fix: 智慧运营样式调整

src/pages/Home/QualityMng.js

@@ -115,7 +115,10 @@ export const WaterQuality = () => {
     if (code) setCode(code);
   };
   return (
-    <div className="card-box" style={{ padding: '0.2rem' }}>
+    <div
+      className="card-box"
+      style={{ padding: '0.2rem', marginTop: '0.1rem' }}
+    >
       <div className="tabs" style={{ marginBottom: '0.2rem' }}>
         {codeList?.map((item) => (
           <div

src/pages/SmartOps/index.js

@@ -24,6 +24,7 @@ import VideoAnalysis from './components/VideoAnalysis';
 import WorkAnalysis from './components/WorkAnalysis';
 import styles from './index.less';
 import OperationManage from './operationManage';
+import PredictionAnalysis from './predictionAnalysis/PredictionAnalysis';
 
 const { TabPane } = Tabs;
 const icon06 = require('@/assets/smartOps/icon06.png');
@@ -291,33 +292,40 @@ function SmartOps(props) {
             </div>
           )}
         </div>
-        <div className={styles.middle}>
+        <div className={styles.overview}>
           <div className={styles.left}>
-            <div className={styles.in} />
-            <div className={styles.out} />
-          </div>
-          <div className={styles.right}>
-            <div className={styles.item1}>
+            <div className={styles.item}>
               工况分析：
               {optimizationNumber > 0
                 ? `${optimizationNumber}项可优化`
                 : '暂无优化'}
             </div>
+            <div className={styles.item1}>预测分析：{'暂无优化'}</div>
             <div className={styles.item2}>
               设备分析：
               {lengthCalculate() > 0
                 ? `${lengthCalculate()}项可优化`
                 : '暂无优化'}
             </div>
-            <div className={styles.item3}>
+          </div>
+          <div className={styles.middle}>
+            <div className={styles.in} />
+            <div className={styles.out} />
+          </div>
+          <div className={styles.right}>
+            <div className={styles.item}>
               工艺分析：
               {list?.pagenation?.total > 0
                 ? `${list?.pagenation?.total}项可优化`
                 : '暂无优化'}
             </div>
-            <div className={styles.item4}>
+            <div className={styles.item1}>
               感知分析：{videoNum > 0 ? `${videoNum}项可优化` : '暂无优化'}
             </div>
+            <div className={styles.item2}>
+              经营分析：
+              {'暂无优化'}
+            </div>
           </div>
         </div>
         <div className={styles.text}>通过智慧分析预计可省{profitData}元</div>
@@ -341,6 +349,11 @@ function SmartOps(props) {
                 />
               ),
             },
+            {
+              label: `预测分析`,
+              key: '6',
+              children: <PredictionAnalysis />,
+            },
             {
               label: `设备分析(${loadingDev ? '-' : lengthCalculate()})`,
               key: '4',
@@ -363,7 +376,7 @@ function SmartOps(props) {
               ),
             },
             {
-              label: `经营分析(-)`,
+              label: `经营分析`,
               key: '5',
               children: <OperationManage />,
             },

src/pages/SmartOps/index.less

@@ -24,12 +24,38 @@
       background-size: 100% 100%;
     }
   }
-  .middle {
+  .overview {
     margin: 0.1rem 0;
     display: flex;
     align-items: center;
     justify-content: center;
     .left {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      .item {
+        width: 3.5rem;
+        height: 0.52rem;
+        white-space: nowrap;
+        margin-bottom: 0.1rem;
+        background: url('@/assets/smartOps/bg-left-1.png') no-repeat center;
+        background-size: 100% 100%;
+        padding-left: 0.1rem;
+        line-height: 0.52rem;
+      }
+      .item1 {
+        .item;
+        width: 3.15rem;
+        background-image: url('@/assets/smartOps/bg-left-2.png');
+      }
+      .item2 {
+        .item;
+        background-image: url('@/assets/smartOps/bg-left-3.png');
+      }
+    }
+    .middle {
+      margin: 0 0.3rem;
       position: relative;
       .in {
         width: 2.12rem;
@@ -58,29 +84,32 @@
     .right {
       display: flex;
       flex-direction: column;
+      justify-content: center;
       align-items: flex-end;
       .item {
-        width: 5.85rem;
+        width: 3.5rem;
         height: 0.52rem;
         white-space: nowrap;
         margin-bottom: 0.1rem;
-        background: url('@/assets/smartOps/icon01.png') no-repeat center;
+        background: url('@/assets/smartOps/bg-right-1.png') no-repeat center;
         background-size: 100% 100%;
+        padding-left: 0.45rem;
         line-height: 0.52rem;
       }
       .item1 {
         .item;
-        padding-left: 0.96rem;
+        width: 3.15rem;
+        background-image: url('@/assets/smartOps/bg-right-2.png');
+        padding-left: 0.2rem;
       }
       .item2 {
         .item;
-        width: 5.27rem;
-        padding-left: 0.4rem;
-        background-image: url('@/assets/smartOps/icon02.png');
+        padding-left: 0.45rem;
+        background-image: url('@/assets/smartOps/bg-right-3.png');
       }
       .item3 {
         .item;
-        width: 5.27rem;
+        // width: 5.27rem;
         padding-left: 0.4rem;
         background-image: url('@/assets/smartOps/icon03.png');
       }