index.js 7.75 KB
Newer Older
陈前坚's avatar
陈前坚 committed
1 2 3
import React, { useState, useEffect } from 'react';
import {
  DatePicker,
陈前坚's avatar
陈前坚 committed
4
  Input,
陈前坚's avatar
陈前坚 committed
5 6 7 8 9 10
  Table,
  Row,
  Col,
  Button,
  notification,
  message,
11
  Tooltip,
陈前坚's avatar
陈前坚 committed
12 13
  Spin,
} from 'antd';
14
import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
陈前坚's avatar
陈前坚 committed
15
import moment from 'moment';
皮倩雯's avatar
皮倩雯 committed
16
import { get, PUBLISH_SERVICE } from '@/services/index';
陈前坚's avatar
陈前坚 committed
17 18
import styles from './index.less';

陈前坚's avatar
陈前坚 committed
19
const OmsLog = () => {
陈前坚's avatar
陈前坚 committed
20
  const [loading, setLoading] = useState(false); // 源数据
陈前坚's avatar
陈前坚 committed
21 22 23 24
  const [data, setData] = useState([]); // 源数据
  const [levelFilters, setLevelFilters] = useState([]); // 优先级筛选
  const [functionName, setFunctionName] = useState(''); // 接口名称筛选
  const [label, setLabel] = useState(''); // 标签筛选
25
  const [startTime, setStartTime] = useState(moment().startOf('week')); // 默认值当天0点
皮倩雯's avatar
皮倩雯 committed
26
  const [filteredValue, setFilteredValue] = useState([]);
陈前坚's avatar
陈前坚 committed
27
  const [endTime, setEndTime] = useState(
陈前坚's avatar
陈前坚 committed
28
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
陈前坚's avatar
陈前坚 committed
29 30 31 32
  );

  const columns = [
    {
陈前坚's avatar
陈前坚 committed
33
      title: '操作时间',
34 35 36
      dataIndex: 'LogTime',
      key: 'LogTime',
      width: 150,
37
      defaultSortOrder: 'descend',
陈前坚's avatar
陈前坚 committed
38
      sortDirections: ['descend', 'ascend'],
陈前坚's avatar
陈前坚 committed
39
      sorter: (a, b) =>
40
        new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
陈前坚's avatar
陈前坚 committed
41 42
    },
    {
陈前坚's avatar
陈前坚 committed
43
      title: '接口名称',
44 45
      dataIndex: 'Function',
      key: 'Function',
皮倩雯's avatar
皮倩雯 committed
46
      ellipsis: 'true',
47
      width: 200,
陈前坚's avatar
陈前坚 committed
48 49
      // filters: functionNameFilters,
      // onFilter: (value, record) => record.functionName === value,
陈前坚's avatar
陈前坚 committed
50 51
    },
    {
陈前坚's avatar
陈前坚 committed
52
      title: '标签',
53 54
      dataIndex: 'Label',
      key: 'Label',
皮倩雯's avatar
皮倩雯 committed
55
      ellipsis: 'true',
56
      width: 300,
陈前坚's avatar
陈前坚 committed
57
    },
58
    {
59
      title: '操作信息',
60 61
      dataIndex: 'ShortInfo',
      key: 'ShortInfo',
皮倩雯's avatar
皮倩雯 committed
62
      width: 850,
63 64
      ellipsis: 'true',
      render: record => (
65 66
        <Tooltip placement="left" title={decodeURI(record)}>
          {decodeURI(record)}
67 68 69
        </Tooltip>
      ),
    },
陈前坚's avatar
陈前坚 committed
70
    {
陈前坚's avatar
陈前坚 committed
71
      title: '优先级',
72 73
      dataIndex: 'Level',
      key: 'Level',
74
      width: 100,
陈前坚's avatar
陈前坚 committed
75
      filters: levelFilters,
76 77
      onFilter: (value, record) => record.Level === value,
      filteredValue,
78
      render: record => {
79
        if (record === 3) {
80 81
          return <span style={{ color: '#ff7875' }}></span>;
        }
82
        if (record === 2) {
83 84
          return <span style={{ color: '#faad14' }}></span>;
        }
85
        if (record === 1) {
86 87 88 89
          return <span style={{ color: '#52c41a' }}></span>;
        }
        return record;
      },
陈前坚's avatar
陈前坚 committed
90 91
    },
  ];
皮倩雯's avatar
皮倩雯 committed
92

陈前坚's avatar
陈前坚 committed
93
  // 在起止时间任意一个变化后获取数据
陈前坚's avatar
陈前坚 committed
94
  useEffect(() => {
陈前坚's avatar
陈前坚 committed
95
    if (startTime && endTime) {
陈前坚's avatar
陈前坚 committed
96
      setLoading(true);
陈前坚's avatar
陈前坚 committed
97
      getData();
陈前坚's avatar
陈前坚 committed
98
    }
陈前坚's avatar
陈前坚 committed
99 100
  }, [startTime, endTime]);
  const getData = () => {
101
    get(`${PUBLISH_SERVICE}/LogCenter/GetOmsCustomerLog`, {
陈前坚's avatar
陈前坚 committed
102
      logType: 'operationLog',
103 104
      StartDateTime: startTime.format('YYYY-MM-DD HH:mm:ss'),
      EndDate: endTime.format('YYYY-MM-DD HH:mm:ss'),
陈前坚's avatar
陈前坚 committed
105 106
      function: functionName,
      label,
107
      PageIndex: 1,
皮倩雯's avatar
皮倩雯 committed
108
      PageSize: 1000,
陈前坚's avatar
陈前坚 committed
109 110
    })
      .then(res => {
皮倩雯's avatar
皮倩雯 committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124
        if (res.code === 0) {
          // setData(res.root.filter(item => item.label!=="ServiceInput"&&item.label!=="ServiceReturn"));
          if (!res.data) {
            setData([]);
          } else {
            const result = res.data.list;
            setData(
              result.map((item, index) => {
                item.key = index;
                return item;
              }),
            );
            console.log(result);
            // 过滤优先级
125
            let arr1 = result.map(item => item.Level);
陈前坚's avatar
陈前坚 committed
126 127
            arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
            setLevelFilters(arr1.map(item => ({ text: item, value: item })));
皮倩雯's avatar
皮倩雯 committed
128
          }
陈前坚's avatar
陈前坚 committed
129 130 131
        } else {
          notification.error({
            message: '数据获取失败',
陈前坚's avatar
陈前坚 committed
132
            description: res.message,
陈前坚's avatar
陈前坚 committed
133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
          });
        }
        setLoading(false);
      })
      .catch(err => {
        message.error(err);
        setLoading(false);
      });
  };
  // DatePicker改变点击确定时
  const changeStartTime = time => {
    setStartTime(time);
  };
  const changeEndTime = time => {
    setEndTime(time);
  };
陈前坚's avatar
陈前坚 committed
149 150
  // 近1/6/12/24小时
  const setTime = time => {
陈前坚's avatar
陈前坚 committed
151 152 153
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setStartTime(
      moment(
陈前坚's avatar
陈前坚 committed
154
        new Date(new Date().getTime() - time * 60 * 60 * 1000),
陈前坚's avatar
陈前坚 committed
155 156 157 158
        'YYYY-MM-DD HH:mm:ss',
      ),
    );
  };
皮倩雯's avatar
皮倩雯 committed
159 160 161 162 163 164 165 166 167 168 169
  const handleReset = () => {
    setStartTime(moment().startOf('week'));
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setFunctionName('');
    setFilteredValue([]);
    setLabel('');
  };
  const onChangeInput = filters => {
    console.log('filters', filters);
    setFilteredValue(filters.Level);
  };
陈前坚's avatar
陈前坚 committed
170 171
  return (
    <>
陈前坚's avatar
陈前坚 committed
172
      <div className={styles.omsLog}>
陈前坚's avatar
陈前坚 committed
173 174
        <Row className={styles.head}>
          <Col span={24}>
陈前坚's avatar
陈前坚 committed
175
            <span style={{ lineHeight: 2 }}>时间:</span>
陈前坚's avatar
陈前坚 committed
176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
            <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
194 195 196 197 198 199
            <Button onClick={() => setTime(1)}>1小时</Button>
            {/* <Button onClick={() => setTime(6)}>近6小时</Button> */}
            <Button onClick={() => setTime(24)}>1</Button>
            <Button onClick={() => setTime(24 * 7)}>1</Button>
            <Button onClick={() => setTime(14 * 24)}>2</Button>
            {/* <Button onClick={() => setTime(30 * 24)}>近1月</Button> */}
200
            <span style={{ marginLeft: '20px' }}>接口查询:</span>
陈前坚's avatar
陈前坚 committed
201
            <Input
202
              style={{ width: '200px' }}
陈前坚's avatar
陈前坚 committed
203
              placeholder="请输入接口名称"
陈前坚's avatar
陈前坚 committed
204 205 206
              onChange={e => {
                setFunctionName(e.target.value);
              }}
207
              value={functionName}
陈前坚's avatar
陈前坚 committed
208
            />
209
            <span style={{ marginLeft: '20px' }}>标签查询:</span>
陈前坚's avatar
陈前坚 committed
210
            <Input
211
              style={{ width: '200px' }}
陈前坚's avatar
陈前坚 committed
212 213 214
              placeholder="请输入标签"
              onChange={e => {
                setLabel(e.target.value);
陈前坚's avatar
陈前坚 committed
215
              }}
216
              value={label}
陈前坚's avatar
陈前坚 committed
217
            />
陈前坚's avatar
陈前坚 committed
218 219
            <Button
              type="primary"
皮倩雯's avatar
皮倩雯 committed
220
              style={{ marginLeft: '10px' }}
陈前坚's avatar
陈前坚 committed
221 222 223 224
              onClick={getData}
            >
              查询
            </Button>
皮倩雯's avatar
皮倩雯 committed
225 226 227 228 229 230 231 232 233
            <Button
              icon={<SyncOutlined className={styles.icon} />}
              onClick={handleReset}
              style={{
                marginLeft: '25px',
                verticalAlign: 'middle',
                marginTop: '-3px',
              }}
            >
234 235
              重置
            </Button>
陈前坚's avatar
陈前坚 committed
236 237 238 239 240 241 242 243
          </Col>
        </Row>
        <Spin spinning={loading} tip="loading">
          <div className={styles.table}>
            <Table
              size="small"
              bordered
              columns={columns}
陈前坚's avatar
陈前坚 committed
244
              dataSource={data}
245
              scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
陈前坚's avatar
陈前坚 committed
246 247 248 249
              pagination={{
                showTotal: (total, range) =>
                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                pageSizeOptions: [10, 20, 50, 100],
陈前坚's avatar
陈前坚 committed
250
                defaultPageSize: 20,
陈前坚's avatar
陈前坚 committed
251 252 253
                showQuickJumper: true,
                showSizeChanger: true,
              }}
254
              onChange={onChangeInput}
陈前坚's avatar
陈前坚 committed
255 256 257 258 259 260 261
            />
          </div>
        </Spin>
      </div>
    </>
  );
};
陈前坚's avatar
陈前坚 committed
262
export default OmsLog;