perf: log

src/pages/log/serviceLog/index.js

@@ -24,14 +24,31 @@ const ServiceLog = () => {
   const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
   const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
   const [perMinute, setPerMinute] = useState([]); // 每分钟访问量,统计数据
-  const [timeInrerval, setTimeInrerval] = useState('每小时');
+  const [timeInterval, setTimeInterval] = useState('60');
   const [scale, setScale] = useState({}); // 坐标轴别名
-  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
+  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点00:00:00
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
   const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
 
+  // 计算时间间隔（分钟）
+  const countInterval = () => {
+    const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
+    const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
+    const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
+    // console.log(hourInterval);
+    if (minuteInterval <= 30) {
+      setTimeInterval('1');
+    } else if (minuteInterval > 30 && minuteInterval <= 120) {
+      setTimeInterval('5');
+    } else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
+      setTimeInterval('60');
+    } else {
+      setTimeInterval('1440');
+    }
+  };
+
   const columns = [
     {
       title: '接口名称',
@@ -100,6 +117,7 @@ const ServiceLog = () => {
   ];
   // 在起止时间任意一个变化后获取数据
   useEffect(() => {
+    countInterval();
     if (startTime && endTime) {
       setLoading(true);
       getData();
@@ -122,7 +140,7 @@ const ServiceLog = () => {
         if (res.code === 0) {
           setData0(res.data);
           dataTransforrm(res.data);
-          console.log(res.data);
+          // console.log(res.data);
         } else {
           notification.error({
             message: '数据获取失败',
@@ -224,12 +242,13 @@ const ServiceLog = () => {
     setEndTime(time);
   };
   // 近1/6/12/24小时,同时设置对应的时间间隔
-  const setTime = (time, interval) => {
-    setTimeInrerval(interval);
+  const setTime = (time, value) => {
+    // setIntervalText(text);
+    setTimeInterval(value);
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(
       moment(
-        new Date(new Date().getTime() - time * 60 * 60 * 1000),
+        new Date(new Date().getTime() - time * 60 * 1000),
         'YYYY-MM-DD HH:mm:ss',
       ),
     );
@@ -240,7 +259,7 @@ const ServiceLog = () => {
   };
   // 设置时间间隔
   const selectChange = value => {
-    setTimeInrerval(value);
+    setTimeInterval(value);
   };
 
   return (
@@ -267,11 +286,11 @@ const ServiceLog = () => {
               style={{ marginRight: '10px' }}
               allowClear={false}
             />
-            <Button onClick={() => setTime(1, '每分钟')}>近15分钟</Button>
-            <Button onClick={() => setTime(6, '每5分钟')}>近1小时</Button>
-            <Button onClick={() => setTime(12, '每小时')}>近12小时</Button>
-            <Button onClick={() => setTime(24, '每小时')}>近1天</Button>
-            <Button onClick={() => setTime(24 * 7, '每天')}>近1周</Button>
+            <Button onClick={() => setTime(15, '1')}>近15分钟</Button>
+            <Button onClick={() => setTime(60, '5')}>近1小时</Button>
+            <Button onClick={() => setTime(12 * 60, '60')}>近12小时</Button>
+            <Button onClick={() => setTime(24 * 60, '60')}>近1天</Button>
+            <Button onClick={() => setTime(24 * 7 * 60, '1440')}>近1周</Button>
             <span style={{ marginLeft: '20px' }}>返回状态：</span>
             <Select defaultValue="正常" onChange={changeStatus}>
               <Option value="9999">全部</Option>
@@ -284,9 +303,15 @@ const ServiceLog = () => {
           <Row style={{ background: 'white' }}>
             <Col offset={6} style={{ paddingTop: '8px' }}>
               <span>间隔：</span>
-              <Select value={timeInrerval} size="small" onChange={selectChange}>
+              {/* value={intervalText} */}
+              <Select
+                defaultValue="每小时"
+                value={timeInterval}
+                size="small"
+                onChange={selectChange}
+              >
                 <Option value="1">每分钟</Option>
-                <Option value="10">每5分钟</Option>
+                <Option value="5">每5分钟</Option>
                 <Option value="60">每小时</Option>
                 <Option value="1440">每天</Option>
               </Select>