fix: 优化经营管理页面

src/components/ManagementPage/chartModule.js

@@ -102,7 +102,7 @@ const ChartModule = (props) => {
 
         if (Array.isArray(yName)) {
           if (yName.length > 2) {
-            option.grid.right = 120;
+            option.grid.right = 140;
           }
 
           option.yAxis = yName.map((item, index) => {
@@ -119,11 +119,12 @@ const ChartModule = (props) => {
           });
         } else {
           option.grid.right = 30;
+          // 重置grid left 用于比对计算合适宽度
+          option.grid.left = 70;
           option.yAxis = { ...option.yAxis[0], name: yName };
           option.series = dataList.map((item) => {
             item.data.forEach((dataItem) => {
               if (String(dataItem).length * 10 + 40 > option.grid.left) {
-                console.log(String(dataItem).length * 10 + 45);
                 option.grid.left = String(dataItem).length * 10 + 45;
               }
             });

src/components/TabsContent/index.js

@@ -10,6 +10,7 @@ const TabsContent = (props) => {
     small = false,
     spacing = 4,
     items = {},
+    bold = true,
     onChange,
   } = props;
   const [active, setActive] = useState(parentActive || defaultActiveKey);
@@ -34,6 +35,7 @@ const TabsContent = (props) => {
               key={item.key}
               style={{
                 padding: `0 ${small ? (spacing - 1) / 10 : spacing / 10}rem`,
+                fontWeight: `${bold ? 'bold' : 'normal'}`,
               }}
               className={`${styles.tabsItem} ${
                 active == item.key ? styles.active : ''

src/components/TabsContent/index.less

@@ -23,7 +23,6 @@
   color: #3f3f40;
   font-size: 0.36rem;
   white-space: nowrap;
-  font-weight: 600;
 }
 .active {
   color: #1755ff;

src/pages/Home/EnergyCostDetail.js

@@ -17,6 +17,17 @@ import { useMemo } from 'react';
 import styles from './manage.less';
 
 const EnergyCostDetail = () => {
+  return (
+    <PageContent closeable={false}>
+      <PageTitle returnable>能耗数据</PageTitle>
+      <EnergyDetail />
+    </PageContent>
+  );
+};
+
+export default EnergyCostDetail;
+
+export const EnergyDetail = () => {
   const { projectId } = useParams();
 
   const TIMER = 3600000;
@@ -204,60 +215,54 @@ const EnergyCostDetail = () => {
   }, [energyData]);
 
   const loading = useMemo(() => allFacLoading, [allFacLoading]);
-
   return (
-    <PageContent closeable={false}>
-      <PageTitle returnable>能耗数据</PageTitle>
-      <Spin spinning={loading}>
-        <div className={styles.infoContainer}>
-          <div>
-            <SubTitle title="全厂概览" />
-            <div style={{ display: 'flex' }}>
-              {allFactory.map((item, index) => (
-                <DataCard key={`all_${index}`} {...item} type={4} />
-              ))}
-            </div>
+    <Spin spinning={loading}>
+      <div className={styles.infoContainer}>
+        <div>
+          <SubTitle title="全厂概览" />
+          <div style={{ display: 'flex' }}>
+            {allFactory.map((item, index) => (
+              <DataCard key={`all_${index}`} {...item} type={4} />
+            ))}
           </div>
-          <div>
-            <SubTitle title="用电概况" />
-            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-              {powerData.map((item, index) => (
-                <DataCard key={`power_${index}`} {...item} type={3} />
-              ))}
-            </div>
+        </div>
+        <div>
+          <SubTitle title="用电概况" />
+          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+            {powerData.map((item, index) => (
+              <DataCard key={`power_${index}`} {...item} type={3} />
+            ))}
           </div>
-          <div>
-            <SubTitle title="吨水电耗" />
-            <div style={{ height: '3rem' }}>
-              {chartData && allFactoryData && (
-                <ChartModule
-                  yName={allFactoryData?.energy_water_unit || 'kWh'}
-                  xData={chartData.xData}
-                  dataList={chartData.dataList}
-                />
-              )}
-            </div>
+        </div>
+        <div>
+          <SubTitle title="吨水电耗" />
+          <div style={{ height: '3rem' }}>
+            {chartData && allFactoryData && (
+              <ChartModule
+                yName={allFactoryData?.energy_water_unit || 'kWh'}
+                xData={chartData.xData}
+                dataList={chartData.dataList}
+              />
+            )}
           </div>
-          <div>
-            <SubTitle title="电量" />
-            <div style={{ height: '3rem' }}>
-              {electricChartData && allFactoryData && (
-                <ChartModule
-                  yName={allFactoryData?.energy_unit || 'kWh/t'}
-                  xData={electricChartData.xData}
-                  dataList={electricChartData.dataList}
-                />
-              )}
-            </div>
+        </div>
+        <div>
+          <SubTitle title="电量" />
+          <div style={{ height: '3rem' }}>
+            {electricChartData && allFactoryData && (
+              <ChartModule
+                yName={allFactoryData?.energy_unit || 'kWh/t'}
+                xData={electricChartData.xData}
+                dataList={electricChartData.dataList}
+              />
+            )}
           </div>
         </div>
-      </Spin>
-    </PageContent>
+      </div>
+    </Spin>
   );
 };
 
-export default EnergyCostDetail;
-
 const DataCard = ({ title, data, unit, icon, color, type }) => {
   const width = Math.floor(100 / type - 2) + '%';
   return (

src/pages/Home/QualityMng.js

@@ -13,6 +13,7 @@ import { useParams, useRequest } from '@umijs/max';
 import { Empty, Spin, Table } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import SubTitle from '../SmartOps/components/SubTitle';
 
 function Quality() {
   return (
@@ -20,7 +21,6 @@ function Quality() {
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         水质监测
       </PageTitle>
-
       <WaterQuality />
     </PageContent>
   );
@@ -119,7 +119,7 @@ export const WaterQuality = () => {
       <div className="tabs" style={{ marginBottom: '0.2rem' }}>
         {codeList?.map((item) => (
           <div
-            key={item}
+            key={item.metric_code}
             onClick={() => {
               setCode(item);
             }}
@@ -129,10 +129,7 @@ export const WaterQuality = () => {
           </div>
         ))}
       </div>
-      <div className="section-title">
-        <div className="section-line"></div>
-        数据曲线
-      </div>
+      <SubTitle title="数据曲线" />
       <Spin spinning={mainRes.loading}>
         <div style={{ height: '5rem', marginTop: '0.2rem' }}>
           {mainRes?.data ? (
@@ -143,10 +140,7 @@ export const WaterQuality = () => {
         </div>
       </Spin>
       <div style={{ marginTop: '0.3rem' }}>
-        <div className="section-title">
-          <div className="section-line"></div>
-          数据列表
-        </div>
+        <SubTitle title="数据列表" />
         <Table
           columns={column}
           style={{ marginTop: '0.2rem' }}

src/pages/SmartOps/Analysis.js

@@ -168,6 +168,7 @@ const Analysis = (props) => {
       <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
         <TabsContent
           small
+          bold={false}
           spacing={2.5}
           center={false}
           defaultActiveKey="1"

src/pages/SmartOps/WorkAnalysisDetail.js

@@ -200,6 +200,7 @@ function WorkAnalysisDetail(props) {
         <TabsContent
           center={false}
           small
+          bold={false}
           spacing={2.5}
           defaultActiveKey={active}
           items={technologys.map((item) => ({

src/pages/SmartOps/components/DeviceAnalysis.js

@@ -186,6 +186,7 @@ const DeviceAnalysis = (props) => {
     <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
       <TabsContent
         small
+        bold={false}
         spacing={2.5}
         center={false}
         defaultActiveKey="1"

src/pages/SmartOps/components/SubTitle.js

@@ -12,11 +12,10 @@ const SubTitle = ({ title, fontSize = '0.28rem' }) => {
     >
       <div
         style={{
-          width: '0.15rem',
-          height: '0.15rem',
+          width: '0.1rem',
+          height: '0.1rem',
           background: '#1755ff',
           marginRight: '0.1rem',
-          borderRadius: '0.16rem',
         }}
       />
       {title}

src/pages/SmartOps/components/VideoAnalysis.js

@@ -75,6 +75,7 @@ function VideoAnalysis(props) {
       <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
         <TabsContent
           small
+          bold={false}
           spacing={2.5}
           center={false}
           defaultActiveKey="1"

src/pages/SmartOps/operationManage/index.js

@@ -1,6 +1,7 @@
 import TabsContent from '@/components/TabsContent';
 import { ChemCost } from '@/pages/Home/ChemCostComparison';
 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 { useState } from 'react';
@@ -39,7 +40,7 @@ const OperationManage = () => {
             setShowEnergyDetail(!showEnergyDetail);
           }}
         >
-          能耗详情
+          <EnergyDetail />
         </div>
       ) : (
         <EnergyCost
@@ -57,6 +58,7 @@ const OperationManage = () => {
   return (
     <TabsContent
       small
+      bold={false}
       spacing={2.5}
       center={false}
       defaultActiveKey="1"