perf: log

src/pages/log/serviceLog/index.js

@@ -28,9 +28,14 @@ const ServiceLog = () => {
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
   const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
-  const [tableColumns, setTableColumns] = useState([]); // 源数据
 
-  const columns11 = [
+  const columns = [
+    {
+      title: '接口名称',
+      dataIndex: 'Path',
+      key: 'Path',
+      fixed: 'left',
+    },
     {
       title: '调用时间',
       dataIndex: 'CallTime',
@@ -43,42 +48,36 @@ const ServiceLog = () => {
       dataIndex: 'IP',
       key: 'IP',
     },
-    {
-      title: '接口名称',
-      dataIndex: 'Path',
-      key: 'Path',
-      width: 200,
-      ellipsis: true,
-    },
     {
       title: '请求方法',
       dataIndex: 'Method',
       key: 'Method',
-      ellipsis: true,
     },
     {
       title: '查询参数',
       dataIndex: 'QueryString',
       key: 'QueryString',
-      width: 150,
-      ellipsis: true,
     },
     {
       title: '请求体',
       dataIndex: 'Body',
       key: 'Body',
-      width: 200,
-      ellipsis: true,
     },
     {
       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,
     },
@@ -86,16 +85,9 @@ const ServiceLog = () => {
       title: '返回体大小/byte',
       dataIndex: 'ResponseSize',
       key: 'ResponseSize',
-      ellipsis: true,
+      fixed: 'right',
       sorter: (a, b) => a.ResponseSize - b.ResponseSize,
     },
-    {
-      title: '错误信息',
-      dataIndex: 'ErrorMsg',
-      key: 'ErrorMsg',
-      width: 200,
-      ellipsis: true,
-    },
   ];
   // 在起止时间任意一个变化后获取数据
   useEffect(() => {
@@ -110,8 +102,6 @@ const ServiceLog = () => {
       PageSize: 0,
       DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
       DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
-      // HourFrom: startTime.format('HH:mm:ss'),
-      // HourTo: endTime.format('HH:mm:ss'),
       IP: '',
       Module: '',
       LogType: +logType,
@@ -142,29 +132,7 @@ const ServiceLog = () => {
       item.key = index;
       return item;
     });
-    // const columns = Object.keys(data[0]).map(key => {
-    //   if (key === 'ResponseSize') {
-    //     return {
-    //       title: key,
-    //       dataIndex: key,
-    //       key,
-    //       defaultSortOrder: 'descend',
-    //       sorter: (a, b) => a.ResponseSize - b.ResponseSize,
-    //     };
-    //   }
-    //   if (key === 'Body' || key === 'QueryString' || key === 'Path') {
-    //     return {
-    //       title: key,
-    //       dataIndex: key,
-    //       key,
-    //       width: 150,
-    //       ellipsis: true,
-    //     };
-    //   }
-    //   return { title: key, dataIndex: key, key };
-    // });
-    // setTableColumns(columns);
-    // console.log(Object.keys(data[0]));
+
     const scale1 = {
       Path: {
         alias: '接口名称', // 别名
@@ -234,9 +202,16 @@ const ServiceLog = () => {
 
   return (
     <>
-      <Row style={{ padding: '10px', background: 'white' }}>
+      <Row
+        style={{
+          padding: '10px',
+          background: 'white',
+          marginBottom: '2px',
+          minWidth: '1030px',
+        }}
+      >
         <Col span={24}>
-          <span style={{ lineHeight: 2 }}>时间：</span>
+          <span>时间：</span>
           <DatePicker
             showTime
             format="YYYY-MM-DD HH:mm:ss"
@@ -245,7 +220,7 @@ const ServiceLog = () => {
             onChange={changeStartTime}
             allowClear={false}
           />
-          <SwapRightOutlined style={{ lineHeight: 2 }} />
+          <SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
           <DatePicker
             showTime
             format="YYYY-MM-DD HH:mm:ss"
@@ -260,7 +235,7 @@ const ServiceLog = () => {
           <Button onClick={() => setTime(12)}>近12小时</Button>
           <Button onClick={() => setTime(24)}>近1天</Button>
           <Button onClick={() => setTime(24 * 7)}>近1周</Button>
-          <span style={{ lineHeight: 2, marginLeft: '20px' }}>日志类型：</span>
+          <span style={{ marginLeft: '20px' }}>日志类型：</span>
           <Select defaultValue="正常" onChange={selectChange}>
             <Option value="9999">全部</Option>
             <Option value="0">正常</Option>
@@ -269,10 +244,10 @@ const ServiceLog = () => {
         </Col>
       </Row>
       <Spin spinning={loading} tip="loading">
-        <Row style={{ padding: '10px', background: 'white' }}>
+        <Row style={{ padding: '16px', background: 'white' }}>
           <Col span={12}>
             <Chart
-              height={316}
+              height={300}
               width={400}
               autoFit
               data={pathCount}
@@ -293,7 +268,7 @@ const ServiceLog = () => {
           </Col>
           <Col span={12}>
             <Chart
-              height={316}
+              height={300}
               width={400}
               autoFit
               data={reponseTime}
@@ -315,7 +290,7 @@ const ServiceLog = () => {
         <Table
           size="small"
           bordered
-          columns={columns11}
+          columns={columns}
           dataSource={data0}
           scroll={{ x: 'max-content' }}
           pagination={{