feat: 经营分析

src/components/ManagementPage/chartModule.js

@@ -245,10 +245,10 @@ const defaultOption = {
       nameTextStyle: {
         fontSize: '0.24rem',
         // align: 'left',
-        padding: [0, 0, 20, 0],
+        padding: [0, 0, 15, 0],
       },
       axisLabel: {
-        fontSize: '0.24rem',
+        fontSize: '0.2rem',
       },
       axisLine: {
         show: false,
@@ -269,8 +269,11 @@ const defaultOption = {
       position: 'right',
       nameTextStyle: {
         fontSize: '0.24rem',
-        // align: 'left',
-        padding: [0, 0, 20, 0],
+        align: 'right',
+        padding: [0, 0, 15, 0],
+      },
+      axisLabel: {
+        fontSize: '0.2rem',
       },
       axisLine: {
         show: true,
@@ -293,7 +296,10 @@ const defaultOption = {
       nameTextStyle: {
         fontSize: '0.24rem',
         // align: 'left',
-        padding: [0, 0, 20, 0],
+        padding: [0, 0, 15, 0],
+      },
+      axisLabel: {
+        fontSize: '0.2rem',
       },
       axisLine: {
         show: true,

src/pages/SmartOps/components/DeviceAnalysis.js

@@ -3,7 +3,7 @@ import TabsContent from '@/components/TabsContent';
 import ThresholdDetail from '@/components/ThresholdDetail';
 import { UnityAction } from '@/utils/utils';
 import { connect } from '@umijs/max';
-import { Spin, Table, Tabs } from 'antd';
+import { Table, Tabs } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useMemo, useState } from 'react';
 import styles from './DeviceAnalysis.less';
@@ -122,10 +122,10 @@ const DeviceAnalysis = (props) => {
         WaterInCheckList: autoReport?.WaterInCheckList?.filter(
           (item) => item.status,
         ),
-        PressureCompareList: autoReport?.PressureCompareList.filter(
+        PressureCompareList: autoReport?.PressureCompareList?.filter(
           (item) => !item.history,
         ),
-        WaterQualityCompareList: autoReport?.WaterQualityCompareList.filter(
+        WaterQualityCompareList: autoReport?.WaterQualityCompareList?.filter(
           (item) => !item.history,
         ),
       },
@@ -183,79 +183,77 @@ const DeviceAnalysis = (props) => {
   };
 
   return (
-    <Spin spinning={loading}>
-      <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
-        <TabsContent
-          small={true}
-          center={false}
-          defaultActiveKey="1"
-          items={data?.map((item) => {
-            return {
-              label: `${item.name}(${calculateLength(item) || 0})`,
-              key: item.type,
-              children: (
-                <>
-                  {(item.type === '1' ? item?.data?.length > 0 : true) && (
-                    <>
-                      <ModuleTitle title="设备检测" />
-                      <Table
-                        dataSource={item.data}
-                        columns={columns}
-                        rowKey="Id"
-                        rowClassName={setRowClassName}
-                        onRow={(record, index) => ({
-                          onClick: () => onSelectRow(record, index),
-                        })}
-                        pagination={false}
-                        // scroll={{ y: document.body.clientHeight - 730 }}
-                      />
-                    </>
-                  )}
-                  {(item.type === '1'
-                    ? item?.FluidLevelList.length > 0
-                    : true) && (
-                    <LiquidLevel
-                      allData={item?.FluidLevelList}
-                      type={item.type}
+    <div style={{ height: 'calc(100vh - 5.6rem)', overflow: 'auto' }}>
+      <TabsContent
+        small={true}
+        center={false}
+        defaultActiveKey="1"
+        items={data?.map((item) => {
+          return {
+            label: `${item.name}(${calculateLength(item) || 0})`,
+            key: item.type,
+            children: (
+              <>
+                {(item.type === '1' ? item?.data?.length > 0 : true) && (
+                  <>
+                    <ModuleTitle title="设备检测" />
+                    <Table
+                      dataSource={item.data}
+                      columns={columns}
+                      rowKey="Id"
+                      rowClassName={setRowClassName}
+                      onRow={(record, index) => ({
+                        onClick: () => onSelectRow(record, index),
+                      })}
+                      pagination={false}
+                      // scroll={{ y: document.body.clientHeight - 730 }}
                     />
-                  )}
-                  {(item.type === '1'
-                    ? item?.DrugFlowList.length > 0
-                    : true) && (
-                    <DosingFlow allData={item?.DrugFlowList} type={item.type} />
-                  )}
-                  {(item.type === '1'
-                    ? item?.WaterInCheckList.length > 0
-                    : true) && (
-                    <WaterFlow
-                      allData={item?.WaterInCheckList}
-                      type={item.type}
-                    />
-                  )}
-                  {(item.type === '1'
-                    ? item?.PressureCompareList.length > 0
-                    : true) && (
-                    <PressureGauge
-                      allData={item?.PressureCompareList}
-                      type={item.type}
-                    />
-                  )}
-                  {(item.type === '1'
-                    ? item?.WaterQualityCompareList.length > 0
-                    : true) && (
-                    <WaterQuality
-                      allData={item?.WaterQualityCompareList}
-                      type={item.type}
-                    />
-                  )}
-                </>
-              ),
-            };
-          })}
-          onChange={onTabChange}
-        />
-      </div>
-    </Spin>
+                  </>
+                )}
+                {(item.type === '1'
+                  ? item?.FluidLevelList?.length > 0
+                  : true) && (
+                  <LiquidLevel
+                    allData={item?.FluidLevelList}
+                    type={item.type}
+                  />
+                )}
+                {(item.type === '1'
+                  ? item?.DrugFlowList?.length > 0
+                  : true) && (
+                  <DosingFlow allData={item?.DrugFlowList} type={item.type} />
+                )}
+                {(item.type === '1'
+                  ? item?.WaterInCheckList?.length > 0
+                  : true) && (
+                  <WaterFlow
+                    allData={item?.WaterInCheckList}
+                    type={item.type}
+                  />
+                )}
+                {(item.type === '1'
+                  ? item?.PressureCompareList?.length > 0
+                  : true) && (
+                  <PressureGauge
+                    allData={item?.PressureCompareList}
+                    type={item.type}
+                  />
+                )}
+                {(item.type === '1'
+                  ? item?.WaterQualityCompareList?.length > 0
+                  : true) && (
+                  <WaterQuality
+                    allData={item?.WaterQualityCompareList}
+                    type={item.type}
+                  />
+                )}
+              </>
+            ),
+          };
+        })}
+        onChange={onTabChange}
+      />
+    </div>
   );
 };
 export default connect(({ eqSelfInspection, loading }) => ({

src/pages/SmartOps/components/SubTitle.js

@@ -0,0 +1,27 @@
+const SubTitle = ({ title }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        marginBottom: '0.1rem',
+        fontSize: '0.28rem',
+        fontWeight: '600',
+      }}
+    >
+      <div
+        style={{
+          width: '0.15rem',
+          height: '0.15rem',
+          background: '#0139f1',
+          marginRight: '0.1rem',
+          borderRadius: '0.16rem',
+        }}
+      />
+      {title}
+    </div>
+  );
+};
+
+export default SubTitle;

src/pages/SmartOps/index.js

@@ -23,6 +23,7 @@ import DeviceAnalysis from './components/DeviceAnalysis';
 import VideoAnalysis from './components/VideoAnalysis';
 import WorkAnalysis from './components/WorkAnalysis';
 import styles from './index.less';
+import OperationManage from './operationManage';
 
 const { TabPane } = Tabs;
 const icon06 = require('@/assets/smartOps/icon06.png');
@@ -324,6 +325,7 @@ function SmartOps(props) {
       <div className={styles.tabContent}>
         <TabsContent
           defaultActiveKey="1"
+          center={false}
           small
           items={[
             {
@@ -359,6 +361,11 @@ function SmartOps(props) {
                 />
               ),
             },
+            {
+              label: `经营分析(-)`,
+              key: '5',
+              children: <OperationManage />,
+            },
           ]}
           onChange={onChangeTab}
         />

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

@@ -0,0 +1,203 @@
+import ChartModule from '@/components/ManagementPage/chartModule';
+import {
+  queryEnergyChartList,
+  queryProcessSection,
+} from '@/services/OperationManagement';
+import { useParams, useRequest } from '@umijs/max';
+import { Button, DatePicker, Table } from 'antd';
+import dayjs from 'dayjs';
+import SubTitle from '../../components/SubTitle';
+import styles from './CostAnalysis.less';
+
+const { RangePicker } = DatePicker;
+
+const CostAnalysis = () => {
+  const { projectId } = useParams();
+
+  const defaultTime = {
+    s_time: dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'),
+    e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
+  };
+
+  const columns = [
+    {
+      title: '时间',
+      dataIndex: 'data_time',
+    },
+    {
+      title: '能耗(kWh)',
+      dataIndex: 'electric',
+    },
+    {
+      title: '药耗(kg)',
+      dataIndex: 'medicine',
+    },
+    {
+      title: '进水水量(t)',
+      dataIndex: 'waterIn',
+    },
+    {
+      title: '出水水量(t)',
+      dataIndex: 'waterOut',
+    },
+  ];
+
+  const { data, loading, run } = useRequest(
+    (date) =>
+      queryEnergyChartList({
+        project_id: Number(projectId),
+        start_time: date.s_time,
+        end_time: date.e_time,
+        order: 1,
+      }),
+    {
+      defaultParams: [{ ...defaultTime }],
+      formatResult: (data) => {
+        const tempData = data.data;
+        const arr = Object.values(tempData).find((arr) => arr);
+
+        return {
+          chartData: {
+            yName: ['药耗(kg)', '能耗(kWh)', '水量(t)'],
+            xData: arr?.map((item) => item.data_time),
+            dataList: [
+              {
+                type: 0,
+                name: '能耗',
+                yIndex: 1,
+                data: tempData.electric?.map((item) => item.value),
+              },
+              {
+                type: 0,
+                name: '药耗',
+                data: tempData.medicine?.map((item) => item.value),
+              },
+              {
+                type: 0,
+                name: '进水水量',
+                yIndex: 2,
+                data: tempData.waterIn?.map((item) => item.value),
+              },
+              {
+                type: 2,
+                name: '出水水量',
+                yIndex: 2,
+                data: tempData.waterOut?.map((item) => item.value),
+              },
+            ],
+          },
+          tableData: tempData?.electric?.map((item, idx) => {
+            return {
+              key: `analy_table_${idx}`,
+              // value: item.value?.toFixed(2) | '-',
+              data_time: item.data_time,
+              electric: formatElcData(tempData?.electric, item?.data_time),
+              medicine:
+                tempData.medicine
+                  ?.find((cur) => cur.data_time === item.data_time)
+                  ?.value?.toFixed(2) || '-',
+              waterIn:
+                tempData.waterIn
+                  ?.find((cur) => cur.data_time === item.data_time)
+                  ?.value?.toFixed(2) || '-',
+              waterOut:
+                tempData.waterOut
+                  ?.find((cur) => cur.data_time === item.data_time)
+                  ?.value?.toFixed(2) || '-',
+            };
+          }),
+        };
+      },
+    },
+  );
+
+  const ProcessSectionRequest = useRequest(queryProcessSection, {
+    manual: true,
+    onSuccess: (data) => {
+      if (data.length > 0) {
+        let section;
+        section = data[0];
+        setTitle(section.name);
+      }
+    },
+  });
+
+  const formatElcData = (data, data_time) => {
+    const value = data?.find((cur) => cur.data_time == data_time)?.value;
+    return value === 0 ? '-' : value.toFixed(2);
+  };
+
+  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>
+      <div>
+        <SubTitle title={'全厂概览'} />
+        <div className={styles.timeBtn}>
+          <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={'数据曲线'} />
+        <div style={{ height: '3.5rem', marginBottom: '0.1rem' }}>
+          {data?.chartData && <ChartModule {...data.chartData} />}
+        </div>
+      </div>
+      <div>
+        <SubTitle title={'数据列表'} />
+        <Table
+          loading={loading}
+          columns={columns}
+          dataSource={data?.tableData?.sort((a, b) =>
+            b?.data_time?.localeCompare(a?.data_time),
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CostAnalysis;

src/pages/SmartOps/operationManage/CostAnalysis/CostAnalysis.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/index.js

@@ -0,0 +1,48 @@
+import TabsContent from '@/components/TabsContent';
+import CostAnalysis from './CostAnalysis/CostAnalysis';
+
+const OperationManage = () => {
+  const items = [
+    {
+      label: '成本分析',
+      key: '1',
+      children: <CostAnalysis />,
+    },
+    {
+      label: '水质分析',
+      key: '2',
+      children: '水质分析',
+    },
+    {
+      label: '水量分析',
+      key: '3',
+      children: '水量分析',
+    },
+    {
+      label: '药耗分析',
+      key: '4',
+      children: '药耗分析',
+    },
+    {
+      label: '能耗分析',
+      key: '5',
+      children: '能耗分析',
+    },
+  ];
+
+  const onTabsChange = (key) => {
+    console.log(key);
+  };
+
+  return (
+    <TabsContent
+      small={true}
+      center={false}
+      defaultActiveKey="1"
+      items={items}
+      onChange={onTabsChange}
+    />
+  );
+};
+
+export default OperationManage;