Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

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

@@ -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,88 +308,97 @@ 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>
-            <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="card-box" style={{ marginTop: '0.4rem' }}>
+          {/* 使用Tabs来展示所有药的标签 */}
+          <div style={{ padding: '0.2rem 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>
-        {chartData.length !== 0 && (
-          <div
-            style={{
-              height: '8.8rem',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              padding: '0.4rem 0',
-            }}
-          >
-            <div style={{ height: '3.5rem' }}>
-              <ChartModule {...chartData[0]} />
+          <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 style={{ height: '3.5rem' }}>
-              <ChartModule {...chartData[1]} />
+            <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>
-        )}
+
+          {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>
   );

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.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/Home/QualityMng.js

@@ -142,7 +142,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/Home/WaterAmtMng.js

@@ -16,40 +16,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>
   );
 };
@@ -61,6 +33,14 @@ export const WaterAmt = () => {
 
   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(
@@ -82,6 +62,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: '时间',
@@ -147,69 +138,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.js

@@ -288,12 +288,12 @@ const Electric = (props) => {
       <ul>
         <li>
           <div className={styles.value}>{open ? elec : '*****'}</div>
-          <div className={styles.btn1}>吨水电耗</div>
+          <div className={styles.btn1}>吨水电耗(KWh/m³)</div>
         </li>
         <li>
           <div className={styles.value}>
             {/* {open ? getValue(data?.elec) : '*****'} */}
-            {data?.elec_unit_theory || '-'}
+            {open ? data?.elec_unit_theory || '-' : '*****'}
           </div>
           <Popover title={content}>
             <div className={styles.btn1} onClick={(e) => e.stopPropagation()}>
@@ -354,11 +354,12 @@ const Medicine = (props) => {
       <ul>
         <li>
           <div className={styles.valueLong}>{open ? otc_cost : '*****'}</div>
-
           <div className={styles.btn1}>吨水药耗(元/m³)</div>
         </li>
         <li>
-          <div className={styles.valueLong}>{data?.otc_unit_theory || '-'}</div>
+          <div className={styles.valueLong}>
+            {open ? data?.otc_unit_theory || '-' : '*****'}
+          </div>
           <Popover title={content}>
             <div className={styles.btn1} onClick={(e) => e.stopPropagation()}>
               理论值(元/m³)

src/pages/Home/index.less

@@ -385,7 +385,7 @@
 }
 .pageTip {
   position: absolute;
-  top: 0.3rem;
+  top: -0.3rem;
   right: 0.5rem;
   font-size: 0.24rem;
 }
@@ -394,7 +394,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;
 }

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

@@ -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;
@@ -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.8rem;
+        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.43rem;
+        background-image: url('@/assets/smartOps/bg-left-2.png');
+      }
+      .item2 {
+        .item;
+        background-image: url('@/assets/smartOps/bg-left-3.png');
+      }
+    }
+    .middle {
+      margin: 0 0.1rem;
       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.8rem;
         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.43rem;
+        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');
       }

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