feat(change): add filter by times for ui

archguard/src/api/module/gitFile.ts

@@ -31,9 +31,22 @@ export function getGitPathChanges(systemId: String) {
     method: "GET",
   });
 }
+
 export function queryUnstableFiles(systemId: String) {
   return axios<GitPathChange[]>({
     url: `/api/systems/${systemId}/change/unstable-file`,
     method: "GET",
   });
 }
+
+export function queryCommitByRanges(systemId: String, startTime: String, endTime: String) {
+  console.log(systemId, systemId, endTime)
+  return axios<string[]>({
+    url: `/api/systems/${systemId}/change/commit-ids`,
+    params: {
+      startTime,
+      endTime,
+    },
+    method: "GET",
+  });
+}

archguard/src/pages/change/ChangeDetect.tsx

@@ -1,20 +1,31 @@
 import React, { useCallback, useState } from "react";
 import useSystemList from "@/store/global-cache-state/useSystemList";
-import { Select } from "antd";
+import { Button, Select } from "antd";
 import { storage } from "@/store/storage/sessionStorage";
-import { DatePicker} from 'antd';
+import { DatePicker } from 'antd';
+import { queryCommitByRanges } from "@/api/module/gitFile";
+import { useParams } from "umi";
 
 const { RangePicker } = DatePicker;
 
 const ChangeDetect = () => {
   const [systemInfo] = useSystemList();
   const [isInChanging, setIsInChanging] = useState(false);
-  const [systemId, setSystemId] = useState(0);
+  // @ts-ignore
+  const [systemId, setSystemId] = useState(useParams().systemId);
+  const [timeRange, setTimeRange] = useState({
+    startTime: "",
+    endTime: ""
+  });
+  const [commits, setCommits] = useState([])
 
   // @ts-ignore
   const changeTime = useCallback((date, dateString) => {
-    console.log(date, dateString);
-  });
+    setTimeRange({
+      startTime: (date[0].unix() * 1000).toString(),
+      endTime: (date[1].unix() * 1000).toString(),
+    })
+  }, [setTimeRange]);
 
   const onSystemChange = useCallback((index: number) => {
     setIsInChanging(false)
@@ -31,6 +42,12 @@ const ChangeDetect = () => {
     }
   }, [setIsInChanging]);
 
+  const queryChange = useCallback(() => {
+    queryCommitByRanges(systemId, timeRange.startTime, timeRange.endTime).then((res) => {
+      setCommits(res)
+    })
+  }, [systemId, timeRange])
+
   return (
     <div>
       { systemInfo?.value &&
@@ -53,7 +70,17 @@ const ChangeDetect = () => {
             )) }
           </Select>
 
-          <RangePicker showTime onChange={ (date, dateString) => changeTime(date, dateString) } />
+          <RangePicker showTime onChange={ (date, dateString) => changeTime(date, dateString) }/>
+          <Button type="primary" onClick={ () => queryChange() } disabled={ timeRange.startTime === "" }>
+            确定
+          </Button>
+
+          <>
+            { commits.map((commit) => (
+              <p>{ commit }</p>
+            ))
+            }
+          </>
         </>
       }
     </div>

archguard/src/pages/home/index.less

@@ -1,3 +1,4 @@
+
 .multiple-system {
   &-container {
     width: 100%;