perf: log

src/pages/log/omsLog/index.js

+import React, { useState, useEffect } from 'react';
+import {
+  DatePicker,
+  Table,
+  Row,
+  Col,
+  Button,
+  Select,
+  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 moment from 'moment';
+import { post, PUBLISH_SERVICE } from '@/services/index';
+import styles from './index.less';
+const { Option } = Select;
+
+const ServiceLog = () => {
+  const [loading, setLoading] = useState(false); // 源数据
+  const [data0, setData0] = useState([]); // 源数据
+  const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
+  const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
+  const [scale, setScale] = useState({}); // 坐标轴别名
+  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
+  const [endTime, setEndTime] = useState(
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
+  );
+  const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
+
+  const columns = [
+    {
+      title: '接口名称',
+      dataIndex: 'Path',
+      key: 'Path',
+      fixed: 'left',
+    },
+    {
+      title: '调用时间',
+      dataIndex: 'CallTime',
+      key: 'CallTime',
+      // filters: orgFilters,
+      // onFilter: (value, record) => record.OUName === value,
+    },
+    {
+      title: 'IP',
+      dataIndex: 'IP',
+      key: 'IP',
+    },
+    {
+      title: '请求方法',
+      dataIndex: 'Method',
+      key: 'Method',
+    },
+    {
+      title: '查询参数',
+      dataIndex: 'QueryString',
+      key: 'QueryString',
+    },
+    {
+      title: '请求体',
+      dataIndex: 'Body',
+      key: 'Body',
+    },
+    {
+      title: '状态码',
+      dataIndex: 'Result',
+      key: 'Result',
+    },
+    {
+      title: '错误信息',
+      dataIndex: 'ErrorMsg',
+      key: 'ErrorMsg',
+    },
+    {
+      title: '耗时/ms',
+      dataIndex: 'ConsumerTime',
+      key: 'ConsumerTime',
+      fixed: 'right',
+      defaultSortOrder: 'descend',
+      sorter: (a, b) => a.ConsumerTime - b.ConsumerTime,
+    },
+    {
+      title: '返回体大小/byte',
+      dataIndex: 'ResponseSize',
+      key: 'ResponseSize',
+      fixed: 'right',
+      sorter: (a, b) => a.ResponseSize - b.ResponseSize,
+    },
+  ];
+  // 在起止时间任意一个变化后获取数据
+  useEffect(() => {
+    if (startTime && endTime) {
+      setLoading(true);
+      getData();
+    }
+  }, [startTime, endTime, logType]);
+  const getData = () => {
+    post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
+      PageIndex: 0,
+      PageSize: 0,
+      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
+      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      IP: '',
+      Module: '',
+      LogType: +logType,
+      Description: '',
+      LoginName: '',
+      UserName: '',
+    })
+      .then(res => {
+        if (res.code === 0) {
+          setData0(res.data);
+          dataTransforrm(res.data);
+          console.log(res.data);
+        } else {
+          notification.error({
+            message: '数据获取失败',
+            description: res.message,
+          });
+        }
+        setLoading(false);
+      })
+      .catch(err => {
+        message.error(err);
+        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 => {
+    setStartTime(time);
+  };
+  const changeEndTime = time => {
+    setEndTime(time);
+  };
+  // 近1/6/12/24小时
+  const setTime = time => {
+    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setStartTime(
+      moment(
+        new Date(new Date().getTime() - time * 60 * 60 * 1000),
+        'YYYY-MM-DD HH:mm:ss',
+      ),
+    );
+  };
+  // 设置日志类型
+  const selectChange = value => {
+    setLogType(value);
+  };
+
+  return (
+    <>
+      <div className={styles.serviceLog}>
+        <Row className={styles.head}>
+          <Col span={24}>
+            <span>时间：</span>
+            <DatePicker
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              placeholder="起始时间"
+              value={startTime}
+              onChange={changeStartTime}
+              allowClear={false}
+            />
+            <SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
+            <DatePicker
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              placeholder="结束时间"
+              value={endTime}
+              onChange={changeEndTime}
+              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}>
+              <Option value="9999">全部</Option>
+              <Option value="0">正常</Option>
+              <Option value="-1">错误</Option>
+            </Select>
+          </Col>
+        </Row>
+        <Spin spinning={loading} tip="loading">
+          <Row className={styles.chart}>
+            <Col span={12}>
+              <Chart
+                height={300}
+                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="计数" title />
+                <Interval position="Path*计数" />
+                <Tooltip shared />
+              </Chart>
+            </Col>
+            <Col span={12}>
+              <Chart
+                height={300}
+                width={400}
+                autoFit
+                data={reponseTime}
+                interactions={['active-region']}
+                padding="auto"
+                scale={scale}
+              >
+                <Axis
+                  name="Path"
+                  label="null"
+                  title={{ offset: 20, position: 'end' }}
+                />
+                <Axis name="响应时长" title />
+                <Interval position="Path*响应时长" />
+                <Tooltip shared />
+              </Chart>
+            </Col>
+          </Row>
+          <div className={styles.table}>
+            <Table
+              size="small"
+              bordered
+              columns={columns}
+              dataSource={data0}
+              scroll={{ x: 'max-content' }}
+              pagination={{
+                showTotal: (total, range) =>
+                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                pageSizeOptions: [10, 20, 50, 100],
+                defaultPageSize: 10,
+                showQuickJumper: true,
+                showSizeChanger: true,
+              }}
+            />
+          </div>
+        </Spin>
+      </div>
+    </>
+  );
+};
+export default ServiceLog;

src/pages/log/omsLog/index.less

+.serviceLog{
+    .head{
+        padding: 10px;
+        background: white;
+        margin-bottom: 2px;
+        min-width: 1030px;
+    }
+    .chart{
+        padding: 16px;
+        background: white;
+    }
+    .table{
+        height:calc(100vh - 452px);
+        overflow: auto;
+        .ant-table-thead tr th{
+            font-weight: 600;
+            color:rgba(0,0,0,0.85);
+        }
+        .ant-pagination{
+            z-index: 999;
+            background: white;
+            margin: 2px 0px;
+            padding:6px 10px;
+        } 
+    }       
+}
\ No newline at end of file

src/pages/log/serviceLog/index.js

@@ -15,6 +15,7 @@ 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 ServiceLog = () => {
@@ -202,14 +203,8 @@ const ServiceLog = () => {
 
   return (
     <>
-      <Row
-        style={{
-          padding: '10px',
-          background: 'white',
-          marginBottom: '2px',
-          minWidth: '1030px',
-        }}
-      >
+      <div className={styles.serviceLog}>
+        <Row className={styles.head}>
           <Col span={24}>
             <span>时间：</span>
             <DatePicker
@@ -244,7 +239,7 @@ const ServiceLog = () => {
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
-        <Row style={{ padding: '16px', background: 'white' }}>
+          <Row className={styles.chart}>
             <Col span={12}>
               <Chart
                 height={300}
@@ -287,6 +282,7 @@ const ServiceLog = () => {
               </Chart>
             </Col>
           </Row>
+          <div className={styles.table}>
             <Table
               size="small"
               bordered
@@ -302,7 +298,9 @@ const ServiceLog = () => {
                 showSizeChanger: true,
               }}
             />
+          </div>
         </Spin>
+      </div>
     </>
   );
 };

src/pages/log/serviceLog/index.less

+.serviceLog{
+    .head{
+        padding: 10px;
+        background: white;
+        margin-bottom: 2px;
+        min-width: 1030px;
+    }
+    .chart{
+        padding: 16px;
+        background: white;
+    }
+    .table{
+        height:calc(100vh - 452px);
+        overflow: auto;
+        .ant-table-thead tr th{
+            font-weight: 600;
+            color:rgba(0,0,0,0.85);
+        }
+        .ant-pagination{
+            z-index: 999;
+            background: white;
+            margin: 2px 0px;
+            padding:6px 10px;
+        } 
+    }       
+}
\ No newline at end of file

src/routes/config.js

@@ -24,6 +24,7 @@ import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
 import SiteManage from '../pages/userCenter/siteManage/SiteManage';
 import ServiceLog from '../pages/log/serviceLog';
 import LoginLog from '../pages/log/loginLog';
+import OmsLog from '../pages/log/omsLog';
 // import DefaultComponent from '../pages/orgnazation/DefaultComponent';
 import TestTable from '../pages/orgnazation/TestTable';
 import WebConfigPage from '@/pages/webConfig';
@@ -239,14 +240,9 @@ export default {
               component: LoginLog,
             },
             {
-              path: '/log/omsOperation',
-              name: '运维操作日志',
-              component: Welcome,
-            },
-            {
-              path: '/log/omsError',
-              name: '运维错误日志',
-              component: Welcome,
+              path: '/log/omsLog',
+              name: '运维日志',
+              component: OmsLog,
             },
           ],
         },