feat: 水量新增时间选择

src/pages/Home/WaterAmtMng.js

@@ -6,19 +6,24 @@ import PageTitle from '@/components/PageTitle';
 import { queryChartListByCode } from '@/services/OperationManagement';
 import { UnityAction } from '@/utils/utils';
 import { useParams, useRequest } from '@umijs/max';
-import { Spin, Table } from 'antd';
+import { Button, DatePicker, Spin, Table } from 'antd';
 import dayjs from 'dayjs';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import styles from './index.less';
+
+const { RangePicker } = DatePicker;
 
 const WaterAmtMng = () => {
   const { projectId } = useParams();
 
+  const [filter, setFilter] = useState([dayjs().subtract(1, 'day'), dayjs()]);
+
   const { data, loading, run } = useRequest(
     (date) =>
       queryChartListByCode(
         {
-          start_time: date.s_time,
-          end_time: date.e_time,
+          start_time: date?.s_time,
+          end_time: date?.e_time,
           project_id: Number(projectId),
           order: 1,
         },
@@ -49,6 +54,7 @@ const WaterAmtMng = () => {
     },
     {
       title: '预测出水水量(t)',
+      key: '-',
       // dataIndex: '',
       render: () => '-',
     },
@@ -74,7 +80,26 @@ const WaterAmtMng = () => {
   }, [data]);
 
   const onSearch = (date) => {
-    run(date);
+    if (date === null) {
+      setFilter([]);
+      return;
+    }
+    if ('string' === typeof date) {
+      setFilter([]);
+      run({
+        s_time: dayjs().subtract(1, date).format('YYYY-MM-DD 00:00:00'),
+        e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
+      });
+    } else {
+      const [s_time, e_time] = date.map((time) =>
+        dayjs(time).format('YYYY-MM-DD'),
+      );
+
+      run({
+        s_time: dayjs(s_time).format('YYYY-MM-DD 00:00:00'),
+        e_time: dayjs(e_time).format('YYYY-MM-DD 23:59:59'),
+      });
+    }
   };
 
   return (
@@ -82,30 +107,73 @@ const WaterAmtMng = () => {
       <PageTitle onReturn={() => UnityAction.sendMsg('menuItem', '首页')}>
         水量监测
       </PageTitle>
-      <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} />
+      <Spin spinning={loading}>
+        <div className={styles.timeSelectBox}>
+          <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 style={{ fontSize: '0.3rem' }}>
+            <RangePicker
+              allowClear
+              value={filter}
+              onChange={(time) => {
+                onSearch(time);
+              }}
+            />
           </div>
-        </Spin>
-        <div style={{ marginTop: 30 }}>
+        </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>
+          </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}
-            style={{ marginTop: 20 }}
-            pagination={false}
-            dataSource={data?.sort((a, b) => b?.time?.localeCompare(a?.time))}
-          />
         </div>
-      </div>
+      </Spin>
     </PageContent>
   );
 };

src/pages/Home/index.less

@@ -330,3 +330,23 @@
     color: #3b3b3b;
   }
 }
+
+.timeSelectBox {
+  padding: 0.1rem 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .timeBtn > * {
+    margin-right: 0.1rem;
+  }
+  .timeBtn {
+    margin-right: 0.1rem;
+  }
+
+  :global {
+    .ant-btn {
+      height: 0.5rem;
+    }
+  }
+}