index.js 11.2 KB
Newer Older
陈前坚's avatar
陈前坚 committed
1 2 3 4 5 6 7 8
import React, { useState, useEffect } from 'react';
import {
  DatePicker,
  Table,
  Row,
  Col,
  Button,
  Select,
陈前坚's avatar
陈前坚 committed
9
  Input,
陈前坚's avatar
陈前坚 committed
10 11 12 13 14 15
  notification,
  message,
  Spin,
} from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
陈前坚's avatar
陈前坚 committed
16
// import { DataSet } from '@antv/data-set';
陈前坚's avatar
陈前坚 committed
17 18 19 20
import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';
const { Option } = Select;
陈前坚's avatar
陈前坚 committed
21
const { Search } = Input;
陈前坚's avatar
陈前坚 committed
22 23 24

const ServiceLog = () => {
  const [loading, setLoading] = useState(false); // 源数据
陈前坚's avatar
陈前坚 committed
25 26
  const [dataTable, setDataTable] = useState([]); // 源数据
  const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
陈前坚's avatar
陈前坚 committed
27 28
  const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
  const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
陈前坚's avatar
陈前坚 committed
29 30 31 32
  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
陈前坚's avatar
陈前坚 committed
33
  const [endTime, setEndTime] = useState(
陈前坚's avatar
陈前坚 committed
34
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值,当前时间
陈前坚's avatar
陈前坚 committed
35 36
  );
  const [logType, setLogType] = useState(0); // 请求参数,日志类型,默认是正常,0:成功 -1:错误 9999:全部
陈前坚's avatar
陈前坚 committed
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
  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');
    }
  };
陈前坚's avatar
陈前坚 committed
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

  const columns = [
    {
      title: '接口名称',
      dataIndex: 'Path',
      key: 'Path',
      fixed: 'left',
    },
    {
      title: '调用时间',
      dataIndex: 'CallTime',
      key: 'CallTime',
    },
    {
      title: 'IP',
      dataIndex: 'IP',
      key: 'IP',
    },
    {
      title: '请求方法',
      dataIndex: 'Method',
      key: 'Method',
    },
    {
      title: '查询参数',
      dataIndex: 'QueryString',
      key: 'QueryString',
    },
    {
      title: '请求体',
      dataIndex: 'Body',
      key: 'Body',
    },
    {
陈前坚's avatar
陈前坚 committed
88
      title: '返回状态',
陈前坚's avatar
陈前坚 committed
89 90
      dataIndex: 'Result',
      key: 'Result',
陈前坚's avatar
陈前坚 committed
91 92 93 94 95 96
      render: record => {
        if (record === 0) {
          return '正常';
        }
        return '错误';
      },
陈前坚's avatar
陈前坚 committed
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
    },
    {
      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,
    },
  ];
  // 在起止时间任意一个变化后获取数据
陈前坚's avatar
陈前坚 committed
120 121 122 123 124
  useEffect(() => {
    if (startTime && endTime) {
      countInterval();
    }
  }, [startTime, endTime]);
陈前坚's avatar
陈前坚 committed
125
  useEffect(() => {
陈前坚's avatar
陈前坚 committed
126
    // countInterval();
陈前坚's avatar
陈前坚 committed
127 128
    if (startTime && endTime) {
      setLoading(true);
陈前坚's avatar
陈前坚 committed
129 130 131 132 133 134 135 136 137
      getData('/TrafficStatistics', setVisitedCount); // 访问量统计
    }
  }, [startTime, endTime, logType, timeInterval]);
  useEffect(() => {
    if (startTime && endTime) {
      setLoading(true);
      getData('/TopCountList', setPathCount); // 接口调用频次统计
      getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
      getData('/GetOMSLog', setDataTable); // 接口调用记录
陈前坚's avatar
陈前坚 committed
138 139
    }
  }, [startTime, endTime, logType]);
陈前坚's avatar
陈前坚 committed
140 141 142 143 144 145

  // 封装接口请求,参数url/设置方法set
  const getData = (url, set) => {
    post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
      // 获取日志表数据时PageSize设置为200,其他接口默认值20
      PageSize: url === '/GetOMSLog' ? 200 : 20,
陈前坚's avatar
陈前坚 committed
146 147 148
      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
      IP: '',
陈前坚's avatar
陈前坚 committed
149
      Module: url === '/GetOMSLog' ? searchWord : '',
陈前坚's avatar
陈前坚 committed
150 151 152 153
      LogType: +logType,
      Description: '',
      LoginName: '',
      UserName: '',
陈前坚's avatar
陈前坚 committed
154
      StaticsType: +timeInterval,
陈前坚's avatar
陈前坚 committed
155 156 157
    })
      .then(res => {
        if (res.code === 0) {
陈前坚's avatar
陈前坚 committed
158 159 160 161 162 163 164 165 166 167 168 169 170 171
          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);
          }
陈前坚's avatar
陈前坚 committed
172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
        } else {
          notification.error({
            message: '数据获取失败',
            description: res.message,
          });
        }
        setLoading(false);
      })
      .catch(err => {
        message.error(err);
        setLoading(false);
      });
  };

  // DatePicker改变点击确定时
  const changeStartTime = time => {
    setStartTime(time);
  };
  const changeEndTime = time => {
    setEndTime(time);
  };
陈前坚's avatar
陈前坚 committed
193 194 195
  // 近1/6/12/24小时,同时设置对应的时间间隔
  const setTime = (time, value) => {
    setTimeInterval(value);
陈前坚's avatar
陈前坚 committed
196 197 198
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setStartTime(
      moment(
陈前坚's avatar
陈前坚 committed
199
        new Date(new Date().getTime() - time * 60 * 1000),
陈前坚's avatar
陈前坚 committed
200 201 202 203
        'YYYY-MM-DD HH:mm:ss',
      ),
    );
  };
陈前坚's avatar
陈前坚 committed
204 205
  // 设置返回状态
  const changeStatus = value => {
陈前坚's avatar
陈前坚 committed
206 207
    setLogType(value);
  };
陈前坚's avatar
陈前坚 committed
208 209 210 211 212 213 214 215 216
  // 设置时间间隔
  const selectChange = value => {
    setTimeInterval(value);
  };
  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
    // console.log(e.target.value);
  };
陈前坚's avatar
陈前坚 committed
217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241

  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}
            />
陈前坚's avatar
陈前坚 committed
242 243 244 245 246 247 248
            <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}>
陈前坚's avatar
陈前坚 committed
249 250 251 252
              <Option value="9999">全部</Option>
              <Option value="0">正常</Option>
              <Option value="-1">错误</Option>
            </Select>
陈前坚's avatar
陈前坚 committed
253
            <Search
陈前坚's avatar
陈前坚 committed
254
              allowClear
陈前坚's avatar
陈前坚 committed
255 256 257 258 259 260 261 262 263
              style={{ width: 200, marginLeft: '20px' }}
              placeholder="请输入接口名称"
              onSearch={() => {
                getData('/GetOMSLog', setDataTable);
              }}
              onChange={e => handleSearch(e)}
              enterButton
              value={searchWord}
            />
陈前坚's avatar
陈前坚 committed
264 265 266
          </Col>
        </Row>
        <Spin spinning={loading} tip="loading">
陈前坚's avatar
陈前坚 committed
267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282
          <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>
陈前坚's avatar
陈前坚 committed
283
          <Row className={styles.chart}>
陈前坚's avatar
陈前坚 committed
284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302
            <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}>
陈前坚's avatar
陈前坚 committed
303 304 305 306 307 308
              <Chart
                height={300}
                autoFit
                data={pathCount}
                interactions={['active-region']}
                padding="auto"
陈前坚's avatar
陈前坚 committed
309 310 311 312
                scale={{
                  Count: { alias: '计数' },
                  Path: { alias: '接口调用频次统计' },
                }}
陈前坚's avatar
陈前坚 committed
313
              >
陈前坚's avatar
陈前坚 committed
314 315 316
                <Axis name="Path" label="null" title={{ offset: 20 }} />
                <Axis name="Count" title />
                <Interval position="Path*Count" />
陈前坚's avatar
陈前坚 committed
317 318 319
                <Tooltip shared />
              </Chart>
            </Col>
陈前坚's avatar
陈前坚 committed
320
            <Col span={7} offset={1}>
陈前坚's avatar
陈前坚 committed
321 322 323 324 325 326
              <Chart
                height={300}
                autoFit
                data={reponseTime}
                interactions={['active-region']}
                padding="auto"
陈前坚's avatar
陈前坚 committed
327 328 329 330
                scale={{
                  AvgTime: { alias: '响应时长/ms' },
                  Path: { alias: '接口平均耗时统计' },
                }}
陈前坚's avatar
陈前坚 committed
331
              >
陈前坚's avatar
陈前坚 committed
332 333 334
                <Axis name="Path" label="null" title={{ offset: 20 }} />
                <Axis name="AvgTime" title />
                <Interval position="Path*AvgTime" />
陈前坚's avatar
陈前坚 committed
335 336 337 338 339 340 341 342 343
                <Tooltip shared />
              </Chart>
            </Col>
          </Row>
          <div className={styles.table}>
            <Table
              size="small"
              bordered
              columns={columns}
陈前坚's avatar
陈前坚 committed
344
              dataSource={dataTable}
陈前坚's avatar
陈前坚 committed
345 346 347 348 349
              scroll={{ x: 'max-content' }}
              pagination={{
                showTotal: (total, range) =>
                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                pageSizeOptions: [10, 20, 50, 100],
陈前坚's avatar
陈前坚 committed
350
                defaultPageSize: 20,
陈前坚's avatar
陈前坚 committed
351 352 353 354 355 356 357 358 359 360 361
                showQuickJumper: true,
                showSizeChanger: true,
              }}
            />
          </div>
        </Spin>
      </div>
    </>
  );
};
export default ServiceLog;