feat: 经营分析页面

src/pages/SmartOps/Analysis.js

@@ -167,7 +167,8 @@ const Analysis = (props) => {
     <Spin spinning={loading}>
       <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
         <TabsContent
-          small={true}
+          small
+          spacing={2.5}
           center={false}
           defaultActiveKey="1"
           items={data?.map((item) => {

src/pages/SmartOps/WorkAnalysisDetail.js

@@ -200,6 +200,7 @@ function WorkAnalysisDetail(props) {
         <TabsContent
           center={false}
           small
+          spacing={2.5}
           defaultActiveKey={active}
           items={technologys.map((item) => ({
             label: TYPE[item]?.name,

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

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

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

@@ -1,12 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-.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

@@ -1,204 +0,0 @@
-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,11 +1,14 @@
 import TabsContent from '@/components/TabsContent';
-import ChemCostComparison from '@/pages/Home/ChemCostComparison';
-import EnergyCostComparison from '@/pages/Home/EnergyCostComparison';
-import WaterAmtMng from '@/pages/Home/WaterAmtMng';
+import { ChemCost } from '@/pages/Home/ChemCostComparison';
+import { EnergyCost } from '@/pages/Home/EnergyCostComparison';
+import { WaterQuality } from '@/pages/Home/QualityMng';
+import { WaterAmt } from '@/pages/Home/WaterAmtMng';
+import { useState } from 'react';
 import CostAnalysis from './CostAnalysis/CostAnalysis';
-import WaterQualityAnalysis from './WaterQualityAnalysis/WaterQualityAnalysis';
 
 const OperationManage = () => {
+  const [showEnergyDetail, setShowEnergyDetail] = useState(false);
+
   const items = [
     {
       label: '成本分析',
@@ -15,22 +18,37 @@ const OperationManage = () => {
     {
       label: '水质分析',
       key: '2',
-      children: <WaterQualityAnalysis />,
+      children: <WaterQuality />,
     },
     {
       label: '水量分析',
       key: '3',
-      children: <WaterAmtMng />,
+      children: <WaterAmt />,
     },
     {
       label: '药耗分析',
       key: '4',
-      children: <ChemCostComparison />,
+      children: <ChemCost open />,
     },
     {
       label: '能耗分析',
       key: '5',
-      children: <EnergyCostComparison />,
+      children: showEnergyDetail ? (
+        <div
+          onClick={() => {
+            setShowEnergyDetail(!showEnergyDetail);
+          }}
+        >
+          能耗详情
+        </div>
+      ) : (
+        <EnergyCost
+          open
+          detailClick={() => {
+            setShowEnergyDetail(!showEnergyDetail);
+          }}
+        />
+      ),
     },
   ];