feat: 智慧运营-经营分析模块

src/components/TabsContent/index.js

@@ -7,6 +7,7 @@ const TabsContent = (props) => {
     defaultActiveKey = '1',
     center = true,
     small = false,
+    spacing = 4,
     items = {},
     onChange,
   } = props;
@@ -24,6 +25,9 @@ const TabsContent = (props) => {
           <>
             <div
               key={item.key}
+              style={{
+                padding: `0 ${small ? (spacing - 1) / 10 : spacing / 10}rem`,
+              }}
               className={`${styles.tabsItem} ${
                 active == item.key ? styles.active : ''
               }`}

src/components/TabsContent/index.less

@@ -20,7 +20,6 @@
   // }
 }
 .tabsItem {
-  padding: 0 0.4rem;
   color: #3f3f40;
   font-size: 0.36rem;
   white-space: nowrap;
@@ -36,7 +35,6 @@
   border-bottom: none;
   .tabsItem {
     font-size: 0.28rem;
-    padding: 0 0.3rem;
     font-weight: 600;
     &:last-child {
       padding-right: 0;

src/pages/Home/WaterAmtMng.js

@@ -109,6 +109,15 @@ const WaterAmtMng = () => {
       </PageTitle>
       <Spin spinning={loading}>
         <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"
@@ -138,15 +147,6 @@ const WaterAmtMng = () => {
               近一个月
             </Button>
           </div>
-          <div style={{ fontSize: '0.3rem' }}>
-            <RangePicker
-              allowClear
-              value={filter}
-              onChange={(time) => {
-                onSearch(time);
-              }}
-            />
-          </div>
         </div>
         <div className="card-box" style={{ padding: '0.2rem' }}>
           <div className="section-title">

src/pages/Home/index.less

@@ -350,7 +350,7 @@
     margin-right: 0.1rem;
   }
   .timeBtn {
-    margin-right: 0.1rem;
+    margin-left: 0.1rem;
   }
 
   :global {

src/pages/SmartOps/components/SubTitle.js

@@ -1,4 +1,4 @@
-const SubTitle = ({ title }) => {
+const SubTitle = ({ title, fontSize = '0.28rem' }) => {
   return (
     <div
       style={{
@@ -6,7 +6,7 @@ const SubTitle = ({ title }) => {
         justifyContent: 'flex-start',
         alignItems: 'center',
         marginBottom: '0.1rem',
-        fontSize: '0.28rem',
+        fontSize,
         fontWeight: '600',
       }}
     >
@@ -14,7 +14,7 @@ const SubTitle = ({ title }) => {
         style={{
           width: '0.15rem',
           height: '0.15rem',
-          background: '#0139f1',
+          background: '#1755ff',
           marginRight: '0.1rem',
           borderRadius: '0.16rem',
         }}

src/pages/SmartOps/index.js

@@ -326,6 +326,7 @@ function SmartOps(props) {
         <TabsContent
           defaultActiveKey="1"
           center={false}
+          spacing={2.5}
           small
           items={[
             {

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

@@ -146,9 +146,9 @@ const CostAnalysis = () => {
   };
 
   return (
-    <div>
+    <div className="card-box" style={{ padding: '0.2rem' }}>
       <div>
-        <SubTitle title={'全厂概览'} />
+        <SubTitle title="全厂概览" />
         <div className={styles.timeBtn}>
           <RangePicker onChange={handleTimeRangeChange} />
           <Button
@@ -181,13 +181,13 @@ const CostAnalysis = () => {
         </div>
       </div>
       <div>
-        <SubTitle title={'数据曲线'} />
+        <SubTitle title={'数据曲线'} fontSize="0.26rem" />
         <div style={{ height: '3.5rem', marginBottom: '0.1rem' }}>
           {data?.chartData && <ChartModule {...data.chartData} />}
         </div>
       </div>
       <div>
-        <SubTitle title={'数据列表'} />
+        <SubTitle title={'数据列表'} fontSize="0.26rem" />
         <Table
           loading={loading}
           columns={columns}

src/pages/SmartOps/operationManage/WaterAmtManage/WaterAmtManage.js

@@ -0,0 +1,12 @@
+import SubTitle from '../../components/SubTitle';
+
+const WaterAmtManage = () => {
+  return (
+    <div>
+      <div>
+        <SubTitle title="数据曲线" />
+      </div>
+    </div>
+  );
+};
+export default WaterAmtManage;

src/pages/SmartOps/operationManage/WaterAmtManage/WaterAmtManage.less

@@ -0,0 +1,12 @@
+.timeBtn > * {
+  margin-right: 0.1rem;
+}
+.timeBtn {
+  margin-bottom: 0.1rem;
+  margin-right: 0.1rem;
+  :global {
+    .ant-btn {
+      height: 0.5rem;
+    }
+  }
+}

src/pages/SmartOps/operationManage/WaterQualityAnalysis/WaterQuailtyAnalysis.less

@@ -0,0 +1,12 @@
+.timeBtn > * {
+  margin-right: 0.1rem;
+}
+.timeBtn {
+  margin-bottom: 0.1rem;
+  margin-right: 0.1rem;
+  :global {
+    .ant-btn {
+      height: 0.5rem;
+    }
+  }
+}

src/pages/SmartOps/operationManage/WaterQualityAnalysis/WaterQualityAnalysis.js

@@ -0,0 +1,204 @@
+import ChartModule from '@/components/ManagementPage/chartModule';
+import {
+  queryChartListByCode,
+  queryProcessSection,
+  querySectionCode,
+} from '@/services/OperationManagement';
+import { useParams, useRequest } from '@umijs/max';
+import { Button, DatePicker, Empty, Table } from 'antd';
+import dayjs from 'dayjs';
+import { useEffect, useMemo, useState } from 'react';
+import SubTitle from '../../components/SubTitle';
+import styles from './WaterQuailtyAnalysis.less';
+
+const { RangePicker } = DatePicker;
+
+const WaterQualityAnalysis = () => {
+  const { projectId } = useParams();
+
+  const defaultTime = {
+    s_time: dayjs().subtract(1, 'week').format('YYYY-MM-DD 00:00:00'),
+    e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
+  };
+
+  const [processId, setProcessId] = useState(null);
+  const [currentCode, setCode] = useState(null);
+
+  const { data: codeList, run: getCode } = useRequest(querySectionCode, {
+    manual: true,
+    onSuccess(data) {
+      if (data) {
+        setCode(data[0]);
+      }
+    },
+    formatResult(res) {
+      return res.data;
+    },
+  });
+
+  useRequest(queryProcessSection, {
+    defaultParams: [projectId],
+    onSuccess(data) {
+      setProcessId(data[0].id);
+    },
+    formatResult(res) {
+      return res.data;
+    },
+  });
+
+  const { data: mainData, run } = useRequest(
+    (date) => {
+      const temp = codeList?.slice(0, 3);
+      console.log(date);
+      return queryChartListByCode(
+        {
+          project_id: Number(projectId),
+          start_time: date?.s_time || defaultTime.s_time,
+          end_time: date?.e_time || defaultTime.e_time,
+        },
+        [...temp?.map((item) => item.metric_code), 'permeate', 'feed'],
+        false,
+      );
+    },
+    {
+      manual: true,
+      onSuccess: (data) => {
+        console.log(data);
+      },
+    },
+  );
+
+  useEffect(() => {
+    if (processId !== null) {
+      getCode(processId, 2, projectId);
+    }
+  }, [processId]);
+
+  useEffect(() => {
+    if (codeList) {
+      run();
+    }
+  }, [codeList]);
+
+  const chartProps = useMemo(() => {
+    const dataList = [];
+    if (!mainData || !currentCode) {
+      return;
+    }
+
+    const yName = currentCode.metric;
+    const reversedData = [...mainData].reverse();
+    const xData = reversedData.map((item) => item.time);
+
+    dataList.push({
+      type: 0,
+      name: '出水水量',
+      data: reversedData.map((item) => item.permeate),
+    });
+
+    dataList.push({
+      type: 1,
+      name: '进水水量',
+      data: reversedData.map((item) => item.feed),
+    });
+
+    dataList.push({
+      type: 2,
+      name: currentCode.metric,
+      data: reversedData.map((item) => item[currentCode.metric_code]),
+    });
+
+    return {
+      yName,
+      xData,
+      dataList,
+      typeList: codeList?.map((item) => item.metric).slice(0, 3),
+      currentType: currentCode.metric,
+    };
+  }, [mainData]);
+
+  const column = useMemo(() => {
+    const col = { title: '时间', dataIndex: 'time', width: '250px' };
+    let other = codeList?.map((item) => {
+      return {
+        title: item.metric,
+        dataIndex: item.metric_code,
+        width: '200px',
+      };
+    });
+    other = other?.slice(0, 3);
+    return other && other.length > 0 ? [col, ...other] : [];
+  }, [codeList]);
+
+  const handleTimeRangeChange = (range) => {
+    if (range?.length === 2) {
+      run({
+        s_time: dayjs(range[0]).format('YYYY-MM-DD 00:00:00'),
+        e_time: dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss'),
+      });
+    } else {
+      run(defaultTime);
+    }
+  };
+
+  const handleTimeBTNClick = (unit) => {
+    run({
+      s_time: dayjs().subtract(1, unit).format('YYYY-MM-DD 00:00:00'),
+      e_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    });
+  };
+
+  return (
+    <div className="card-box" style={{ padding: '0.2rem' }}>
+      <div>
+        <div className={styles.timeBtn} style={{}}>
+          <SubTitle title="全厂概览" />
+          <RangePicker onChange={handleTimeRangeChange} />
+          <Button
+            type="primary"
+            shape="round"
+            onClick={() => {
+              handleTimeBTNClick('day');
+            }}
+          >
+            近一天
+          </Button>
+          <Button
+            type="primary"
+            shape="round"
+            onClick={() => {
+              handleTimeBTNClick('week');
+            }}
+          >
+            近一周
+          </Button>
+          <Button
+            type="primary"
+            shape="round"
+            onClick={() => {
+              handleTimeBTNClick('month');
+            }}
+          >
+            近一个月
+          </Button>
+        </div>
+      </div>
+      <div>
+        <SubTitle title={'数据曲线'} fontSize="0.26rem" />
+        <div style={{ height: '4rem' }}>
+          {mainData ? (
+            <ChartModule {...chartProps} onChange={onChange} />
+          ) : (
+            <Empty />
+          )}
+        </div>
+      </div>
+      <div>
+        <SubTitle title={'数据列表'} fontSize="0.26rem" />
+        <Table columns={column} dataSource={mainData} />
+      </div>
+    </div>
+  );
+};
+
+export default WaterQualityAnalysis;

src/pages/SmartOps/operationManage/index.js

@@ -1,5 +1,9 @@
 import TabsContent from '@/components/TabsContent';
+import ChemCostComparison from '@/pages/Home/ChemCostComparison';
+import EnergyCostComparison from '@/pages/Home/EnergyCostComparison';
+import WaterAmtMng from '@/pages/Home/WaterAmtMng';
 import CostAnalysis from './CostAnalysis/CostAnalysis';
+import WaterQualityAnalysis from './WaterQualityAnalysis/WaterQualityAnalysis';
 
 const OperationManage = () => {
   const items = [
@@ -11,32 +15,31 @@ const OperationManage = () => {
     {
       label: '水质分析',
       key: '2',
-      children: '水质分析',
+      children: <WaterQualityAnalysis />,
     },
     {
       label: '水量分析',
       key: '3',
-      children: '水量分析',
+      children: <WaterAmtMng />,
     },
     {
       label: '药耗分析',
       key: '4',
-      children: '药耗分析',
+      children: <ChemCostComparison />,
     },
     {
       label: '能耗分析',
       key: '5',
-      children: '能耗分析',
+      children: <EnergyCostComparison />,
     },
   ];
 
-  const onTabsChange = (key) => {
-    console.log(key);
-  };
+  const onTabsChange = () => {};
 
   return (
     <TabsContent
       small={true}
+      spacing={2.5}
       center={false}
       defaultActiveKey="1"
       items={items}

src/services/OperationManagement.js

@@ -113,13 +113,13 @@ export async function queryChartListByCode(data, codes, isCheck = false) {
         chartRes = await queryChartList({ ...data, metric_code });
       }
 
-      if (i == 0) {
+      if (i === 0) {
         time = chartRes.data?.map((item) => item.data_time);
       }
       res[metric_code] = chartRes.data?.map((item) => item.value.toFixed(2));
     }
     console.log(res, codes);
-    dataSource = time.map((time, index) => {
+    dataSource = time?.map((time, index) => {
       const data = { time };
       codes.forEach((code) => {
         data[code] = res[code]?.[index];