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

陈前坚's avatar
陈前坚 committed
23
const ServiceLog = () => {
陈前坚's avatar
陈前坚 committed
24
  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
  const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔,1/2/3/4(每分钟/5分钟/小时/天),默认每小时
  const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值,当天0点00:00:00
陈前坚's avatar
陈前坚 committed
31
  const [endTime, setEndTime] = useState(
陈前坚's avatar
陈前坚 committed
32
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值,当前时间
陈前坚's avatar
陈前坚 committed
33
  );
陈前坚's avatar
陈前坚 committed
34
  const [logType, setLogType] = useState(0); // 请求参数,日志类型,默认是正常,0:成功 -1:异常 9999:全部
陈前坚's avatar
陈前坚 committed
35
  const [searchWord, setSearchWord] = useState(''); // 关键字
陈前坚's avatar
陈前坚 committed
36

陈前坚's avatar
陈前坚 committed
37
  // 计算时间间隔(分钟)
38 39
  const start = new Date(startTime).getTime();
  const end = new Date(endTime).getTime();
陈前坚's avatar
陈前坚 committed
40
  const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
陈前坚's avatar
陈前坚 committed
41
  const countInterval = () => {
陈前坚's avatar
陈前坚 committed
42
    if (minuteInterval > 0 && minuteInterval <= 30) {
陈前坚's avatar
陈前坚 committed
43 44
      setTimeInterval('1');
    } else if (minuteInterval > 30 && minuteInterval <= 120) {
陈前坚's avatar
陈前坚 committed
45
      setTimeInterval('2');
陈前坚's avatar
陈前坚 committed
46
    } else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
陈前坚's avatar
陈前坚 committed
47
      setTimeInterval('3');
陈前坚's avatar
陈前坚 committed
48
    } else {
陈前坚's avatar
陈前坚 committed
49
      setTimeInterval('4');
陈前坚's avatar
陈前坚 committed
50 51
    }
  };
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
  // 计算时间间隔(月份),禁止跨月份查询
  const startMonth = new Date(startTime).getMonth();
  const endMonth = new Date(endTime).getMonth();
  const startYear = new Date(startTime).getYear();
  const endYear = new Date(endTime).getYear();
  if (minuteInterval <= 0) {
    notification.error({
      message: '时间设置有误',
      description: '起始时间应该早于结束时间',
    });
  } else if (
    (startMonth !== endMonth && startYear === endYear) ||
    startYear !== endYear
  ) {
    notification.info({
      message: '时间设置提示',
      description: '不允许跨月份查询',
    });
  }
陈前坚's avatar
陈前坚 committed
71

陈前坚's avatar
陈前坚 committed
72 73 74 75 76 77
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'Path',
      key: 'Path',
      fixed: 'left',
陈前坚's avatar
陈前坚 committed
78
      width: 400,
陈前坚's avatar
陈前坚 committed
79
    },
陈前坚's avatar
陈前坚 committed
80 81 82 83
    {
      title: '调用时间',
      dataIndex: 'CallTime',
      key: 'CallTime',
84
      width: 160,
陈前坚's avatar
陈前坚 committed
85
    },
陈前坚's avatar
陈前坚 committed
86 87 88 89 90 91
    // {
    //   title: 'IP',
    //   dataIndex: 'DownstreamRequest',
    //   key: 'DownstreamRequest',
    //   width: 120,
    // },
陈前坚's avatar
陈前坚 committed
92
    {
陈前坚's avatar
陈前坚 committed
93
      title: '返回状态',
陈前坚's avatar
陈前坚 committed
94 95
      dataIndex: 'Result',
      key: 'Result',
96
      width: 80,
陈前坚's avatar
陈前坚 committed
97
    },
陈前坚's avatar
陈前坚 committed
98
    {
陈前坚's avatar
陈前坚 committed
99
      title: '异常信息',
陈前坚's avatar
陈前坚 committed
100 101
      dataIndex: 'ErrorMsg',
      key: 'ErrorMsg',
陈前坚's avatar
陈前坚 committed
102 103 104 105 106 107 108 109 110 111 112
      render: record => {
        if (!record) {
          return '-';
        }
        return record;
      },
    },
    {
      title: '请求方法',
      dataIndex: 'Method',
      key: 'Method',
113
      width: 100,
陈前坚's avatar
陈前坚 committed
114
    },
陈前坚's avatar
陈前坚 committed
115 116 117 118
    {
      title: '耗时/ms',
      dataIndex: 'ConsumerTime',
      key: 'ConsumerTime',
陈前坚's avatar
陈前坚 committed
119
      fixed: 'right',
陈前坚's avatar
陈前坚 committed
120
      width: 100,
陈前坚's avatar
陈前坚 committed
121
      defaultSortOrder: 'descend',
陈前坚's avatar
陈前坚 committed
122
      sortDirections: ['descend', 'ascend'],
陈前坚's avatar
陈前坚 committed
123 124 125 126 127 128
      sorter: (a, b) => a.ConsumerTime - b.ConsumerTime,
    },
    {
      title: '返回体大小/byte',
      dataIndex: 'ResponseSize',
      key: 'ResponseSize',
陈前坚's avatar
陈前坚 committed
129
      fixed: 'right',
130
      width: 140,
陈前坚's avatar
陈前坚 committed
131
      sortDirections: ['descend', 'ascend'],
陈前坚's avatar
陈前坚 committed
132 133 134
      sorter: (a, b) => a.ResponseSize - b.ResponseSize,
    },
  ];
135
  // 在起止时间任意一个变化后获取数据,且起止时间应该早于结束时间,且不允许跨月查询
陈前坚's avatar
陈前坚 committed
136
  useEffect(() => {
137 138 139 140 141 142 143
    if (
      startTime &&
      endTime &&
      end - start > 0 &&
      startMonth === endMonth &&
      startYear === endYear
    ) {
陈前坚's avatar
陈前坚 committed
144 145 146 147
      countInterval(); // 根据起止时间计算时间间隔
    }
  }, [startTime, endTime]);
  useEffect(() => {
148 149 150 151 152 153 154
    if (
      startTime &&
      endTime &&
      end - start > 0 &&
      startMonth === endMonth &&
      startYear === endYear
    ) {
陈前坚's avatar
陈前坚 committed
155
      setLoading(true);
陈前坚's avatar
陈前坚 committed
156 157 158 159
      getData('/TrafficStatistics', setVisitedCount); // 访问量统计
    }
  }, [startTime, endTime, logType, timeInterval]);
  useEffect(() => {
160 161 162 163 164 165 166
    if (
      startTime &&
      endTime &&
      end - start > 0 &&
      startMonth === endMonth &&
      startYear === endYear
    ) {
陈前坚's avatar
陈前坚 committed
167 168 169 170
      setLoading(true);
      getData('/TopCountList', setPathCount); // 接口调用频次统计
      getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
      getData('/GetOMSLog', setDataTable); // 接口调用记录
陈前坚's avatar
陈前坚 committed
171
    }
陈前坚's avatar
陈前坚 committed
172
  }, [startTime, endTime, logType]);
陈前坚's avatar
陈前坚 committed
173 174 175 176 177

  // 封装接口请求,参数url/设置方法set
  const getData = (url, set) => {
    post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
      // 获取日志表数据时PageSize设置为200,其他接口默认值20
陈前坚's avatar
陈前坚 committed
178 179
      PageIndex: 1,
      PageSize: url === '/GetOMSLog' ? 1000 : 20,
陈前坚's avatar
陈前坚 committed
180 181 182 183 184 185 186 187 188
      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
      IP: '',
      Module: url === '/GetOMSLog' ? searchWord : '',
      LogType: +logType,
      Description: '',
      LoginName: '',
      UserName: '',
      StaticsType: +timeInterval,
陈前坚's avatar
陈前坚 committed
189 190 191
    })
      .then(res => {
        if (res.code === 0) {
陈前坚's avatar
陈前坚 committed
192
          if (!res.data) {
陈前坚's avatar
陈前坚 committed
193 194
            set([]);
          } else {
陈前坚's avatar
陈前坚 committed
195
            const result = url === '/GetOMSLog' ? res.data.list : res.data;
陈前坚's avatar
陈前坚 committed
196
            set(
陈前坚's avatar
陈前坚 committed
197
              result.map((item, index) => {
陈前坚's avatar
陈前坚 committed
198 199 200 201 202 203 204
                item.key = index;
                if (url === '/TrafficStatistics') {
                  item.StartTime = item.StartTime.replace(' ', '-');
                }
                return item;
              }),
            );
陈前坚's avatar
陈前坚 committed
205
          }
陈前坚's avatar
陈前坚 committed
206 207 208
        } else {
          notification.error({
            message: '数据获取失败',
陈前坚's avatar
陈前坚 committed
209
            description: res.msg,
陈前坚's avatar
陈前坚 committed
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226
          });
        }
        setLoading(false);
      })
      .catch(err => {
        message.error(err);
        setLoading(false);
      });
  };

  // DatePicker改变点击确定时
  const changeStartTime = time => {
    setStartTime(time);
  };
  const changeEndTime = time => {
    setEndTime(time);
  };
陈前坚's avatar
陈前坚 committed
227
  // 近1/6/12/24小时,同时设置对应的时间间隔
陈前坚's avatar
陈前坚 committed
228 229
  const setTime = (time, value) => {
    setTimeInterval(value);
陈前坚's avatar
陈前坚 committed
230 231 232
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setStartTime(
      moment(
陈前坚's avatar
陈前坚 committed
233
        new Date(new Date().getTime() - time * 60 * 1000),
陈前坚's avatar
陈前坚 committed
234 235 236 237
        'YYYY-MM-DD HH:mm:ss',
      ),
    );
  };
陈前坚's avatar
陈前坚 committed
238 239
  // 设置返回状态
  const changeStatus = value => {
陈前坚's avatar
陈前坚 committed
240 241
    setLogType(value);
  };
陈前坚's avatar
陈前坚 committed
242 243
  // 设置时间间隔
  const selectChange = value => {
陈前坚's avatar
陈前坚 committed
244
    setTimeInterval(value);
陈前坚's avatar
陈前坚 committed
245
  };
陈前坚's avatar
陈前坚 committed
246 247 248 249 250
  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
    // console.log(e.target.value);
  };
陈前坚's avatar
陈前坚 committed
251

陈前坚's avatar
陈前坚 committed
252 253
  return (
    <>
陈前坚's avatar
陈前坚 committed
254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275
      <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
276
            <Button onClick={() => setTime(15, '1')}>15分钟</Button>
陈前坚's avatar
陈前坚 committed
277 278 279 280
            <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>
陈前坚's avatar
陈前坚 committed
281
            <span style={{ marginLeft: '20px' }}>返回状态:</span>
陈前坚's avatar
陈前坚 committed
282
            <Select defaultValue="正常" onChange={changeStatus}>
陈前坚's avatar
陈前坚 committed
283 284
              <Option value="9999">全部</Option>
              <Option value="0">正常</Option>
陈前坚's avatar
陈前坚 committed
285
              <Option value="-1">异常</Option>
陈前坚's avatar
陈前坚 committed
286
            </Select>
陈前坚's avatar
陈前坚 committed
287
            <Search
陈前坚's avatar
陈前坚 committed
288
              allowClear
陈前坚's avatar
陈前坚 committed
289 290 291 292 293 294 295 296 297
              style={{ width: 200, marginLeft: '20px' }}
              placeholder="请输入接口名称"
              onSearch={() => {
                getData('/GetOMSLog', setDataTable);
              }}
              onChange={e => handleSearch(e)}
              enterButton
              value={searchWord}
            />
陈前坚's avatar
陈前坚 committed
298 299
          </Col>
        </Row>
陈前坚's avatar
陈前坚 committed
300
        <Spin spinning={loading} tip="loading">
陈前坚's avatar
陈前坚 committed
301 302 303
          <Row style={{ background: 'white' }}>
            <Col offset={6} style={{ paddingTop: '8px' }}>
              <span>间隔:</span>
陈前坚's avatar
陈前坚 committed
304 305 306 307 308 309
              <Select
                defaultValue="每小时"
                value={timeInterval}
                size="small"
                onChange={selectChange}
              >
陈前坚's avatar
陈前坚 committed
310
                <Option value="1">每分钟</Option>
陈前坚's avatar
陈前坚 committed
311 312 313
                <Option value="2">5分钟</Option>
                <Option value="3">每小时</Option>
                <Option value="4">每天</Option>
陈前坚's avatar
陈前坚 committed
314 315 316
              </Select>
            </Col>
          </Row>
陈前坚's avatar
陈前坚 committed
317
          <Row className={styles.chart}>
陈前坚's avatar
陈前坚 committed
318 319 320 321
            <Col span={8}>
              <Chart
                height={300}
                autoFit
陈前坚's avatar
陈前坚 committed
322
                data={visitedCount}
陈前坚's avatar
陈前坚 committed
323 324
                interactions={['active-region']}
                padding="auto"
陈前坚's avatar
陈前坚 committed
325
                renderer="svg"
陈前坚's avatar
陈前坚 committed
326 327 328 329
                scale={{
                  Count: { alias: '计数' },
                  StartTime: { alias: '访问量统计' },
                }}
陈前坚's avatar
陈前坚 committed
330
              >
陈前坚's avatar
陈前坚 committed
331
                <Axis name="StartTime" label="" title={{ offset: 20 }} />
陈前坚's avatar
陈前坚 committed
332
                <Axis name="Count" title />
陈前坚's avatar
陈前坚 committed
333
                <Line shape="smooth" position="StartTime*Count" />
334
                <Tooltip shared lock />
陈前坚's avatar
陈前坚 committed
335 336
              </Chart>
            </Col>
陈前坚's avatar
陈前坚 committed
337
            <Col span={7} offset={1}>
陈前坚's avatar
陈前坚 committed
338 339 340 341 342 343
              <Chart
                height={300}
                autoFit
                data={pathCount}
                interactions={['active-region']}
                padding="auto"
陈前坚's avatar
陈前坚 committed
344
                renderer="svg"
陈前坚's avatar
陈前坚 committed
345 346 347 348
                scale={{
                  Count: { alias: '计数' },
                  Path: { alias: '接口调用频次统计' },
                }}
陈前坚's avatar
陈前坚 committed
349
              >
陈前坚's avatar
陈前坚 committed
350
                <Axis name="Path" label="" title={{ offset: 20 }} />
陈前坚's avatar
陈前坚 committed
351 352
                <Axis name="Count" title />
                <Interval position="Path*Count" />
353
                <Tooltip shared lock />
陈前坚's avatar
陈前坚 committed
354 355
              </Chart>
            </Col>
陈前坚's avatar
陈前坚 committed
356
            <Col span={7} offset={1}>
陈前坚's avatar
陈前坚 committed
357 358 359 360 361 362
              <Chart
                height={300}
                autoFit
                data={reponseTime}
                interactions={['active-region']}
                padding="auto"
陈前坚's avatar
陈前坚 committed
363
                renderer="svg"
陈前坚's avatar
陈前坚 committed
364 365 366 367
                scale={{
                  AvgTime: { alias: '响应时长/ms' },
                  Path: { alias: '接口平均耗时统计' },
                }}
陈前坚's avatar
陈前坚 committed
368
              >
陈前坚's avatar
陈前坚 committed
369
                <Axis name="Path" label="" title={{ offset: 20 }} />
陈前坚's avatar
陈前坚 committed
370 371
                <Axis name="AvgTime" title />
                <Interval position="Path*AvgTime" />
372
                <Tooltip shared lock />
陈前坚's avatar
陈前坚 committed
373 374 375 376 377 378 379 380
              </Chart>
            </Col>
          </Row>
          <div className={styles.table}>
            <Table
              size="small"
              bordered
              columns={columns}
陈前坚's avatar
陈前坚 committed
381
              dataSource={dataTable}
382 383
              // scroll={{ x: 'max-content'}}
              scroll={{ x: 'max-content', y: 'calc(100vh - 562px)' }}
陈前坚's avatar
陈前坚 committed
384 385 386 387
              pagination={{
                showTotal: (total, range) =>
                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                pageSizeOptions: [10, 20, 50, 100],
陈前坚's avatar
陈前坚 committed
388
                defaultPageSize: 20,
陈前坚's avatar
陈前坚 committed
389 390 391 392 393 394 395
                showQuickJumper: true,
                showSizeChanger: true,
              }}
            />
          </div>
        </Spin>
      </div>
陈前坚's avatar
陈前坚 committed
396 397
    </>
  );
陈前坚's avatar
陈前坚 committed
398
};
陈前坚's avatar
陈前坚 committed
399
export default ServiceLog;