Merge branch 'master' of https://g.civnet.cn:8443/test/maintenance

src/pages/log/serviceLog/index.js

@@ -11,7 +11,7 @@ import {
   Spin,
 } from 'antd';
 import { SwapRightOutlined } from '@ant-design/icons';
-import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
+import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts';
 import { DataSet } from '@antv/data-set';
 import moment from 'moment';
 import { post, PUBLISH_SERVICE } from '@/services/index';
@@ -24,6 +24,7 @@ const ServiceLog = () => {
   const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
   const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
   const [perMinute, setPerMinute] = useState([]); // 每分钟访问量,统计数据
+  const [timeInrerval, setTimeInrerval] = useState('每小时');
   const [scale, setScale] = useState({}); // 坐标轴别名
   const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
   const [endTime, setEndTime] = useState(
@@ -66,7 +67,7 @@ const ServiceLog = () => {
       key: 'Body',
     },
     {
-      title: '结果',
+      title: '返回状态',
       dataIndex: 'Result',
       key: 'Result',
       render: record => {
@@ -138,6 +139,7 @@ const ServiceLog = () => {
   const dataTransforrm = data => {
     data.map((item, index) => {
       item.key = index;
+      item.Path1 = item.Path;
       return item;
     });
     const dataPerHour = data.map((item, index) => ({
@@ -151,16 +153,19 @@ const ServiceLog = () => {
     // 设置坐标轴别名
     const scale1 = {
       Path: {
-        alias: '接口名称', // 别名
+        alias: '接口调用频次统计', // 别名
+      },
+      Path1: {
+        alias: '接口平均耗时统计', // 别名
       },
       响应时长: {
         alias: '响应时长/ms', // 别名
       },
       minute: {
-        alias: '每分钟访问量',
+        alias: '访问量统计',
       },
       hour: {
-        alias: '每小时访问量',
+        alias: '访问量统计',
       },
     };
     setScale(scale1);
@@ -168,10 +173,10 @@ const ServiceLog = () => {
     const dv = new DataSet.View().source(dataPerHour);
     dv.transform({
       type: 'aggregate', // 别名summary
-      fields: ['minute'], // 统计字段集
+      fields: ['hour'], // 统计字段集
       operations: ['count'], // 统计操作集
       as: ['计数'], // 存储字段集
-      groupBy: ['minute'], // 分组字段集
+      groupBy: ['hour'], // 分组字段集
     });
     console.log(dv.rows);
     setPerMinute(dv.rows);
@@ -218,8 +223,9 @@ const ServiceLog = () => {
   const changeEndTime = time => {
     setEndTime(time);
   };
-  // 近1/6/12/24小时
-  const setTime = time => {
+  // 近1/6/12/24小时,同时设置对应的时间间隔
+  const setTime = (time, interval) => {
+    setTimeInrerval(interval);
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(
       moment(
@@ -228,10 +234,14 @@ const ServiceLog = () => {
       ),
     );
   };
-  // 设置日志类型
-  const selectChange = value => {
+  // 设置返回状态
+  const changeStatus = value => {
     setLogType(value);
   };
+  // 设置时间间隔
+  const selectChange = value => {
+    setTimeInrerval(value);
+  };
 
   return (
     <>
@@ -257,13 +267,13 @@ 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(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>
+            <span style={{ marginLeft: '20px' }}>返回状态：</span>
+            <Select defaultValue="正常" onChange={changeStatus}>
               <Option value="9999">全部</Option>
               <Option value="0">正常</Option>
               <Option value="-1">错误</Option>
@@ -271,44 +281,45 @@ const ServiceLog = () => {
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
+          <Row style={{ background: 'white' }}>
+            <Col offset={6} style={{ paddingTop: '8px' }}>
+              <span>间隔：</span>
+              <Select value={timeInrerval} size="small" onChange={selectChange}>
+                <Option value="1">每分钟</Option>
+                <Option value="10">每5分钟</Option>
+                <Option value="60">每小时</Option>
+                <Option value="1440">每天</Option>
+              </Select>
+            </Col>
+          </Row>
           <Row className={styles.chart}>
             <Col span={8}>
               <Chart
                 height={300}
-                width={400}
+                // width={400}
                 autoFit
                 data={perMinute}
                 interactions={['active-region']}
                 padding="auto"
                 scale={scale}
               >
-                <Axis
-                  name="minute"
-                  // label={{ autoEllipsis: 'true', autoHide: 'true' }}
-                  label="null"
-                  title={{ offset: 20 }}
-                />
-                {/* <Axis name="计数" title /> */}
-                <Interval position="minute*计数" />
+                <Axis name="hour" label="null" title={{ offset: 20 }} />
+                <Axis name="计数" title />
+                <Interval position="hour*计数" />
                 <Tooltip shared />
               </Chart>
             </Col>
             <Col span={8}>
               <Chart
                 height={300}
-                width={400}
+                // width={400}
                 autoFit
                 data={pathCount}
                 interactions={['active-region']}
                 padding="auto"
                 scale={scale}
               >
-                <Axis
-                  name="Path"
-                  // label={{ autoEllipsis: 'true', autoHide: 'true' }}
-                  label="null"
-                  title={{ offset: 20, position: 'end' }}
-                />
+                <Axis name="Path" label="null" title={{ offset: 20 }} />
                 <Axis name="计数" title />
                 <Interval position="Path*计数" />
                 <Tooltip shared />
@@ -317,18 +328,14 @@ const ServiceLog = () => {
             <Col span={8}>
               <Chart
                 height={300}
-                width={400}
+                // width={400}
                 autoFit
                 data={reponseTime}
                 interactions={['active-region']}
                 padding="auto"
                 scale={scale}
               >
-                <Axis
-                  name="Path"
-                  label="null"
-                  title={{ offset: 20, position: 'end' }}
-                />
+                <Axis name="Path" label="null" title={{ offset: 20 }} />
                 <Axis name="响应时长" title />
                 <Interval position="Path*响应时长" />
                 <Tooltip shared />

src/pages/log/serviceLog/index.less

@@ -6,7 +6,7 @@
         min-width: 1030px;
     }
     .chart{
-        padding: 16px;
+        padding: 10px;
         background: white;
     }
     .table{