perf: log

src/pages/log/omsLog/index.js

@@ -6,29 +6,51 @@ import {
   Col,
   Button,
   Select,
+  Input,
   notification,
   message,
   Spin,
 } from 'antd';
 import { SwapRightOutlined } from '@ant-design/icons';
 import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
-import { DataSet } from '@antv/data-set';
+// import { DataSet } from '@antv/data-set';
 import moment from 'moment';
 import { post, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
 const { Option } = Select;
+const { Search } = Input;
 
 const ServiceLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
-  const [data0, setData0] = useState([]); // 源数据
+  const [dataTable, setDataTable] = useState([]); // 源数据
+  const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
   const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
   const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
-  const [scale, setScale] = useState({}); // 坐标轴别名
-  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
+  const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔，1/2/3/4（每分钟/5分钟/小时/天），默认每小时
+  // const [scale, setScale] = useState({}); // 坐标轴别名
+  // const [pageSize, setPageSize] = useState(100); // 分页大小
+  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值，当天0点00:00:00
   const [endTime, setEndTime] = useState(
-    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
   );
   const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
+  const [searchWord, setSearchWord] = useState(''); // 关键字
+
+  // 计算时间间隔（分钟）
+  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); // 相隔多少分钟
+    if (minuteInterval <= 30) {
+      setTimeInterval('1');
+    } else if (minuteInterval > 30 && minuteInterval <= 120) {
+      setTimeInterval('2');
+    } else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
+      setTimeInterval('3');
+    } else {
+      setTimeInterval('4');
+    }
+  };
 
   const columns = [
     {
@@ -41,8 +63,6 @@ const ServiceLog = () => {
       title: '调用时间',
       dataIndex: 'CallTime',
       key: 'CallTime',
-      // filters: orgFilters,
-      // onFilter: (value, record) => record.OUName === value,
     },
     {
       title: 'IP',
@@ -65,7 +85,7 @@ const ServiceLog = () => {
       key: 'Body',
     },
     {
-      title: '结果',
+      title: '返回状态',
       dataIndex: 'Result',
       key: 'Result',
       render: record => {
@@ -97,30 +117,53 @@ const ServiceLog = () => {
     },
   ];
   // 在起止时间任意一个变化后获取数据
+  useEffect(() => {
+    // countInterval();
+    if (startTime && endTime) {
+      setLoading(true);
+      getData('/TrafficStatistics', setVisitedCount); // 访问量统计
+    }
+  }, [startTime, endTime, logType, timeInterval]);
   useEffect(() => {
     if (startTime && endTime) {
       setLoading(true);
-      getData();
+      getData('/TopCountList', setPathCount); // 接口调用频次统计
+      getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
+      getData('/GetOMSLog', setDataTable); // 接口调用记录
     }
   }, [startTime, endTime, logType]);
-  const getData = () => {
-    post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
-      PageIndex: 0,
-      PageSize: 0,
+
+  // 封装接口请求，参数url/设置方法set
+  const getData = (url, set) => {
+    post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
+      // 获取日志表数据时PageSize设置为200，其他接口默认值20
+      PageSize: url === '/GetOMSLog' ? 200 : 20,
       DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
       DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
-      Module: '',
+      Module: url === '/GetOMSLog' ? searchWord : '',
       LogType: +logType,
       Description: '',
       LoginName: '',
       UserName: '',
+      StaticsType: +timeInterval,
     })
       .then(res => {
         if (res.code === 0) {
-          setData0(res.data);
-          dataTransforrm(res.data);
-          console.log(res.data);
+          if (res.data && res.data.length > 0) {
+            res.data.map((item, index) => {
+              item.key = index;
+              if (url === '/TrafficStatistics') {
+                item.StartTime = item.StartTime.replace(' ', '-');
+              }
+              return item;
+            });
+          }
+          if (res.data === null) {
+            set([]);
+          } else {
+            set(res.data);
+          }
         } else {
           notification.error({
             message: '数据获取失败',
@@ -134,56 +177,6 @@ const ServiceLog = () => {
         setLoading(false);
       });
   };
-  const dataTransforrm = data => {
-    data.map((item, index) => {
-      item.key = index;
-      return item;
-    });
-
-    const scale1 = {
-      Path: {
-        alias: '接口名称', // 别名
-      },
-      响应时长: {
-        alias: '响应时长/ms', // 别名
-      },
-    };
-    setScale(scale1);
-
-    const dv1 = new DataSet.View().source(data);
-    dv1
-      .transform({
-        type: 'aggregate', // 别名summary
-        fields: ['Path'], // 统计字段集
-        operations: ['count'], // 统计操作集
-        as: ['计数'], // 存储字段集
-        groupBy: ['Path'], // 分组字段集
-      })
-      .transform({
-        type: 'sort-by',
-        fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-        order: 'DESC', // 默认为 ASC，DESC 则为逆序
-      });
-    console.log(dv1.rows);
-    setPathCount(dv1.rows.slice(0, 20));
-
-    const dv2 = new DataSet.View().source(data);
-    dv2
-      .transform({
-        type: 'aggregate', // 别名summary
-        fields: ['ConsumerTime'], // 统计字段集
-        operations: ['mean'], // 统计操作集
-        as: ['响应时长'], // 存储字段集
-        groupBy: ['Path'], // 分组字段集
-      })
-      .transform({
-        type: 'sort-by',
-        fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-        order: 'DESC', // 默认为 ASC，DESC 则为逆序
-      });
-    console.log(dv2.rows);
-    setReponseTime(dv2.rows.slice(0, 20));
-  };
 
   // DatePicker改变点击确定时
   const changeStartTime = time => {
@@ -192,20 +185,30 @@ const ServiceLog = () => {
   const changeEndTime = time => {
     setEndTime(time);
   };
-  // 近1/6/12/24小时
-  const setTime = time => {
+  // 近1/6/12/24小时,同时设置对应的时间间隔
+  const setTime = (time, value) => {
+    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',
       ),
     );
   };
-  // 设置日志类型
-  const selectChange = value => {
+  // 设置返回状态
+  const changeStatus = value => {
     setLogType(value);
   };
+  // 设置时间间隔
+  const selectChange = value => {
+    setTimeInterval(value);
+  };
+  // 获取搜索框的值
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+    // console.log(e.target.value);
+  };
 
   return (
     <>
@@ -231,59 +234,99 @@ const ServiceLog = () => {
               style={{ marginRight: '10px' }}
               allowClear={false}
             />
-            <Button onClick={() => setTime(1)}>近1小时</Button>
-            <Button onClick={() => setTime(6)}>近6小时</Button>
-            <Button onClick={() => setTime(12)}>近12小时</Button>
-            <Button onClick={() => setTime(24)}>近1天</Button>
-            <Button onClick={() => setTime(24 * 7)}>近1周</Button>
-            <span style={{ marginLeft: '20px' }}>日志类型：</span>
-            <Select defaultValue="正常" onChange={selectChange}>
+            <Button onClick={() => setTime(15, '1')}>近15分钟</Button>
+            <Button onClick={() => setTime(60, '2')}>近1小时</Button>
+            <Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
+            <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
+            <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
+            <span style={{ marginLeft: '20px' }}>返回状态：</span>
+            <Select defaultValue="正常" onChange={changeStatus}>
               <Option value="9999">全部</Option>
               <Option value="0">正常</Option>
               <Option value="-1">错误</Option>
             </Select>
+            <Search
+              // allowClear
+              style={{ width: 200, marginLeft: '20px' }}
+              placeholder="请输入接口名称"
+              onSearch={() => {
+                getData('/GetOMSLog', setDataTable);
+              }}
+              onChange={e => handleSearch(e)}
+              enterButton
+              value={searchWord}
+            />
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
+          <Row style={{ background: 'white' }}>
+            <Col offset={6} style={{ paddingTop: '8px' }}>
+              <span>间隔：</span>
+              <Select
+                defaultValue="每小时"
+                value={timeInterval}
+                size="small"
+                onChange={selectChange}
+              >
+                <Option value="1">每分钟</Option>
+                <Option value="2">每5分钟</Option>
+                <Option value="3">每小时</Option>
+                <Option value="4">每天</Option>
+              </Select>
+            </Col>
+          </Row>
           <Row className={styles.chart}>
-            <Col span={12}>
+            <Col span={8}>
+              <Chart
+                height={300}
+                autoFit
+                data={visitedCount}
+                interactions={['active-region']}
+                padding="auto"
+                scale={{
+                  Count: { alias: '计数' },
+                  StartTime: { alias: '访问量统计' },
+                }}
+              >
+                <Axis name="StartTime" label="null" title={{ offset: 20 }} />
+                <Axis name="Count" title />
+                <Interval position="StartTime*Count" />
+                <Tooltip shared />
+              </Chart>
+            </Col>
+            <Col span={7} offset={1}>
               <Chart
                 height={300}
-                width={400}
                 autoFit
                 data={pathCount}
                 interactions={['active-region']}
                 padding="auto"
-                scale={scale}
+                scale={{
+                  Count: { alias: '计数' },
+                  Path: { alias: '接口调用频次统计' },
+                }}
               >
-                <Axis
-                  name="Path"
-                  // label={{ autoEllipsis: 'true', autoHide: 'true' }}
-                  label="null"
-                  title={{ offset: 20, position: 'end' }}
-                />
-                <Axis name="计数" title />
-                <Interval position="Path*计数" />
+                <Axis name="Path" label="null" title={{ offset: 20 }} />
+                <Axis name="Count" title />
+                <Interval position="Path*Count" />
                 <Tooltip shared />
               </Chart>
             </Col>
-            <Col span={12}>
+            <Col span={7} offset={1}>
               <Chart
                 height={300}
-                width={400}
                 autoFit
                 data={reponseTime}
                 interactions={['active-region']}
                 padding="auto"
-                scale={scale}
+                scale={{
+                  AvgTime: { alias: '响应时长/ms' },
+                  Path: { alias: '接口平均耗时统计' },
+                }}
               >
-                <Axis
-                  name="Path"
-                  label="null"
-                  title={{ offset: 20, position: 'end' }}
-                />
-                <Axis name="响应时长" title />
-                <Interval position="Path*响应时长" />
+                <Axis name="Path" label="null" title={{ offset: 20 }} />
+                <Axis name="AvgTime" title />
+                <Interval position="Path*AvgTime" />
                 <Tooltip shared />
               </Chart>
             </Col>
@@ -293,13 +336,13 @@ const ServiceLog = () => {
               size="small"
               bordered
               columns={columns}
-              dataSource={data0}
+              dataSource={dataTable}
               scroll={{ x: 'max-content' }}
               pagination={{
                 showTotal: (total, range) =>
                   `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                 pageSizeOptions: [10, 20, 50, 100],
-                defaultPageSize: 10,
+                defaultPageSize: 20,
                 showQuickJumper: true,
                 showSizeChanger: true,
               }}

src/pages/log/omsLog/index.less

@@ -6,7 +6,7 @@
         min-width: 1030px;
     }
     .chart{
-        padding: 16px;
+        padding: 10px;
         background: white;
     }
     .table{
@@ -17,7 +17,7 @@
             color:rgba(0,0,0,0.85);
         }
         .ant-table-content{
-            height:calc(100vh - 500px);
+            height:calc(100vh - 520px);
             border-right: white;
             overflow: auto !important;
         }

src/pages/log/serviceLog/index.js

@@ -6,46 +6,49 @@ import {
   Col,
   Button,
   Select,
+  Input,
   notification,
   message,
   Spin,
 } from 'antd';
 import { SwapRightOutlined } from '@ant-design/icons';
-import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts';
-import { DataSet } from '@antv/data-set';
+import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
+// import { DataSet } from '@antv/data-set';
 import moment from 'moment';
 import { post, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
 const { Option } = Select;
+const { Search } = Input;
 
 const ServiceLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
-  const [data0, setData0] = useState([]); // 源数据
+  const [dataTable, setDataTable] = useState([]); // 源数据
+  const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
   const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
   const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
-  const [perMinute, setPerMinute] = useState([]); // 每分钟访问量,统计数据
-  const [timeInterval, setTimeInterval] = useState('60');
-  const [scale, setScale] = useState({}); // 坐标轴别名
-  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点00:00:00
+  const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔，1/2/3/4（每分钟/5分钟/小时/天），默认每小时
+  // const [scale, setScale] = useState({}); // 坐标轴别名
+  // const [pageSize, setPageSize] = useState(100); // 分页大小
+  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值，当天0点00:00:00
   const [endTime, setEndTime] = useState(
-    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
   );
   const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
+  const [searchWord, setSearchWord] = useState(''); // 关键字
 
   // 计算时间间隔（分钟）
   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');
+      setTimeInterval('2');
     } else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
-      setTimeInterval('60');
+      setTimeInterval('3');
     } else {
-      setTimeInterval('1440');
+      setTimeInterval('4');
     }
   };
 
@@ -60,8 +63,6 @@ const ServiceLog = () => {
       title: '调用时间',
       dataIndex: 'CallTime',
       key: 'CallTime',
-      // filters: orgFilters,
-      // onFilter: (value, record) => record.OUName === value,
     },
     {
       title: 'IP',
@@ -117,30 +118,52 @@ const ServiceLog = () => {
   ];
   // 在起止时间任意一个变化后获取数据
   useEffect(() => {
-    countInterval();
+    // countInterval();
     if (startTime && endTime) {
       setLoading(true);
-      getData();
+      getData('/TrafficStatistics', setVisitedCount); // 访问量统计
+    }
+  }, [startTime, endTime, logType, timeInterval]);
+  useEffect(() => {
+    if (startTime && endTime) {
+      setLoading(true);
+      getData('/TopCountList', setPathCount); // 接口调用频次统计
+      getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
+      getData('/GetOMSLog', setDataTable); // 接口调用记录
     }
   }, [startTime, endTime, logType]);
-  const getData = () => {
-    post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
-      PageIndex: 0,
-      PageSize: 0,
+
+  // 封装接口请求，参数url/设置方法set
+  const getData = (url, set) => {
+    post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
+      // 获取日志表数据时PageSize设置为200，其他接口默认值20
+      PageSize: url === '/GetOMSLog' ? 200 : 20,
       DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
       DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
-      Module: '',
+      Module: url === '/GetOMSLog' ? searchWord : '',
       LogType: +logType,
       Description: '',
       LoginName: '',
       UserName: '',
+      StaticsType: +timeInterval,
     })
       .then(res => {
         if (res.code === 0) {
-          setData0(res.data);
-          dataTransforrm(res.data);
-          // console.log(res.data);
+          if (res.data && res.data.length > 0) {
+            res.data.map((item, index) => {
+              item.key = index;
+              if (url === '/TrafficStatistics') {
+                item.StartTime = item.StartTime.replace(' ', '-');
+              }
+              return item;
+            });
+          }
+          if (res.data === null) {
+            set([]);
+          } else {
+            set(res.data);
+          }
         } else {
           notification.error({
             message: '数据获取失败',
@@ -154,85 +177,6 @@ const ServiceLog = () => {
         setLoading(false);
       });
   };
-  const dataTransforrm = data => {
-    data.map((item, index) => {
-      item.key = index;
-      item.Path1 = item.Path;
-      return item;
-    });
-    const dataPerHour = data.map((item, index) => ({
-      key: index,
-      minute: item.CallTime.slice(0, 16), // 每分钟minute
-      hour: item.CallTime.slice(0, 13), // 每分钟minute
-      date: item.CallTime.slice(0, 10), // 每分钟minute
-    }));
-    console.log(dataPerHour);
-
-    // 设置坐标轴别名
-    const scale1 = {
-      Path: {
-        alias: '接口调用频次统计', // 别名
-      },
-      Path1: {
-        alias: '接口平均耗时统计', // 别名
-      },
-      响应时长: {
-        alias: '响应时长/ms', // 别名
-      },
-      minute: {
-        alias: '访问量统计',
-      },
-      hour: {
-        alias: '访问量统计',
-      },
-    };
-    setScale(scale1);
-
-    const dv = new DataSet.View().source(dataPerHour);
-    dv.transform({
-      type: 'aggregate', // 别名summary
-      fields: ['hour'], // 统计字段集
-      operations: ['count'], // 统计操作集
-      as: ['计数'], // 存储字段集
-      groupBy: ['hour'], // 分组字段集
-    });
-    console.log(dv.rows);
-    setPerMinute(dv.rows);
-
-    const dv1 = new DataSet.View().source(data);
-    dv1
-      .transform({
-        type: 'aggregate', // 别名summary
-        fields: ['Path'], // 统计字段集
-        operations: ['count'], // 统计操作集
-        as: ['计数'], // 存储字段集
-        groupBy: ['Path'], // 分组字段集
-      })
-      .transform({
-        type: 'sort-by',
-        fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-        order: 'DESC', // 默认为 ASC，DESC 则为逆序
-      });
-    console.log(dv1.rows);
-    setPathCount(dv1.rows.slice(0, 20));
-
-    const dv2 = new DataSet.View().source(data);
-    dv2
-      .transform({
-        type: 'aggregate', // 别名summary
-        fields: ['ConsumerTime'], // 统计字段集
-        operations: ['mean'], // 统计操作集
-        as: ['响应时长'], // 存储字段集
-        groupBy: ['Path'], // 分组字段集
-      })
-      .transform({
-        type: 'sort-by',
-        fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-        order: 'DESC', // 默认为 ASC，DESC 则为逆序
-      });
-    console.log(dv2.rows);
-    setReponseTime(dv2.rows.slice(0, 20));
-  };
 
   // DatePicker改变点击确定时
   const changeStartTime = time => {
@@ -243,7 +187,6 @@ const ServiceLog = () => {
   };
   // 近1/6/12/24小时,同时设置对应的时间间隔
   const setTime = (time, value) => {
-    // setIntervalText(text);
     setTimeInterval(value);
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(
@@ -261,6 +204,11 @@ const ServiceLog = () => {
   const selectChange = value => {
     setTimeInterval(value);
   };
+  // 获取搜索框的值
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+    // console.log(e.target.value);
+  };
 
   return (
     <>
@@ -287,23 +235,33 @@ const ServiceLog = () => {
               allowClear={false}
             />
             <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>
+            <Button onClick={() => setTime(60, '2')}>近1小时</Button>
+            <Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
+            <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
+            <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
             <span style={{ marginLeft: '20px' }}>返回状态：</span>
             <Select defaultValue="正常" onChange={changeStatus}>
               <Option value="9999">全部</Option>
               <Option value="0">正常</Option>
               <Option value="-1">错误</Option>
             </Select>
+            <Search
+              // allowClear
+              style={{ width: 200, marginLeft: '20px' }}
+              placeholder="请输入接口名称"
+              onSearch={() => {
+                getData('/GetOMSLog', setDataTable);
+              }}
+              onChange={e => handleSearch(e)}
+              enterButton
+              value={searchWord}
+            />
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
           <Row style={{ background: 'white' }}>
             <Col offset={6} style={{ paddingTop: '8px' }}>
               <span>间隔：</span>
-              {/* value={intervalText} */}
               <Select
                 defaultValue="每小时"
                 value={timeInterval}
@@ -311,9 +269,9 @@ const ServiceLog = () => {
                 onChange={selectChange}
               >
                 <Option value="1">每分钟</Option>
-                <Option value="5">每5分钟</Option>
-                <Option value="60">每小时</Option>
-                <Option value="1440">每天</Option>
+                <Option value="2">每5分钟</Option>
+                <Option value="3">每小时</Option>
+                <Option value="4">每天</Option>
               </Select>
             </Col>
           </Row>
@@ -321,48 +279,54 @@ const ServiceLog = () => {
             <Col span={8}>
               <Chart
                 height={300}
-                // width={400}
                 autoFit
-                data={perMinute}
+                data={visitedCount}
                 interactions={['active-region']}
                 padding="auto"
-                scale={scale}
+                scale={{
+                  Count: { alias: '计数' },
+                  StartTime: { alias: '访问量统计' },
+                }}
               >
-                <Axis name="hour" label="null" title={{ offset: 20 }} />
-                <Axis name="计数" title />
-                <Interval position="hour*计数" />
+                <Axis name="StartTime" label="null" title={{ offset: 20 }} />
+                <Axis name="Count" title />
+                <Interval position="StartTime*Count" />
                 <Tooltip shared />
               </Chart>
             </Col>
-            <Col span={8}>
+            <Col span={7} offset={1}>
               <Chart
                 height={300}
-                // width={400}
                 autoFit
                 data={pathCount}
                 interactions={['active-region']}
                 padding="auto"
-                scale={scale}
+                scale={{
+                  Count: { alias: '计数' },
+                  Path: { alias: '接口调用频次统计' },
+                }}
               >
                 <Axis name="Path" label="null" title={{ offset: 20 }} />
-                <Axis name="计数" title />
-                <Interval position="Path*计数" />
+                <Axis name="Count" title />
+                <Interval position="Path*Count" />
                 <Tooltip shared />
               </Chart>
             </Col>
-            <Col span={8}>
+            <Col span={7} offset={1}>
               <Chart
                 height={300}
-                // width={400}
                 autoFit
                 data={reponseTime}
                 interactions={['active-region']}
                 padding="auto"
-                scale={scale}
+                scale={{
+                  AvgTime: { alias: '响应时长/ms' },
+                  Path: { alias: '接口平均耗时统计' },
+                }}
               >
                 <Axis name="Path" label="null" title={{ offset: 20 }} />
-                <Axis name="响应时长" title />
-                <Interval position="Path*响应时长" />
+                <Axis name="AvgTime" title />
+                <Interval position="Path*AvgTime" />
                 <Tooltip shared />
               </Chart>
             </Col>
@@ -372,13 +336,13 @@ const ServiceLog = () => {
               size="small"
               bordered
               columns={columns}
-              dataSource={data0}
+              dataSource={dataTable}
               scroll={{ x: 'max-content' }}
               pagination={{
                 showTotal: (total, range) =>
                   `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                 pageSizeOptions: [10, 20, 50, 100],
-                defaultPageSize: 10,
+                defaultPageSize: 20,
                 showQuickJumper: true,
                 showSizeChanger: true,
               }}

src/pages/platformCenter/dictionary/WebDic.js

@@ -240,7 +240,9 @@ const WebDic = () => {
       .then(res => {
         if (res.success) {
           getData(select.parentID);
+          if (select.parentID === '-1') {
             setSubData([]);
+          }
           notification.success({
             message: '删除成功',
           });