Commit 9685d053 authored by 陈前坚's avatar 陈前坚

perf: log

parent 83d59719
...@@ -14,6 +14,7 @@ import { Chart, Interval, Tooltip, Axis } from 'bizcharts'; ...@@ -14,6 +14,7 @@ import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
import { DataSet } from '@antv/data-set'; import { DataSet } from '@antv/data-set';
import moment from 'moment'; import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index'; import { post, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';
const ServiceLog = () => { const ServiceLog = () => {
const [loading, setLoading] = useState(false); // 源数据 const [loading, setLoading] = useState(false); // 源数据
...@@ -138,72 +139,76 @@ const ServiceLog = () => { ...@@ -138,72 +139,76 @@ const ServiceLog = () => {
return ( return (
<> <>
<Row style={{ padding: '10px', background: 'white' }}> <div className={styles.serviceLog}>
<Col span={24}> <Row className={styles.head}>
<span style={{ lineHeight: 2 }}>时间:</span> <Col span={24}>
<DatePicker <span style={{ lineHeight: 2 }}>时间:</span>
showTime <DatePicker
format="YYYY-MM-DD HH:mm:ss" showTime
placeholder="起始时间" format="YYYY-MM-DD HH:mm:ss"
value={startTime} placeholder="起始时间"
onChange={changeStartTime} value={startTime}
allowClear={false} onChange={changeStartTime}
/> allowClear={false}
<SwapRightOutlined style={{ lineHeight: 2 }} /> />
<DatePicker <SwapRightOutlined style={{ lineHeight: 2 }} />
showTime <DatePicker
format="YYYY-MM-DD HH:mm:ss" showTime
placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
value={endTime} placeholder="结束时间"
onChange={changeEndTime} value={endTime}
style={{ marginRight: '10px' }} onChange={changeEndTime}
allowClear={false} style={{ marginRight: '10px' }}
/> allowClear={false}
<Button onClick={() => setTime(1)}>1小时</Button> />
<Button onClick={() => setTime(6)}>6小时</Button> <Button onClick={() => setTime(1)}>1小时</Button>
<Button onClick={() => setTime(12)}>12小时</Button> <Button onClick={() => setTime(6)}>6小时</Button>
<Button onClick={() => setTime(24)}>1</Button> <Button onClick={() => setTime(12)}>12小时</Button>
<Button onClick={() => setTime(24 * 7)}>1</Button> <Button onClick={() => setTime(24)}>1</Button>
</Col> <Button onClick={() => setTime(24 * 7)}>1</Button>
</Row>
<Spin spinning={loading} tip="loading">
<Row style={{ padding: '10px', background: 'white' }}>
<Col span={12}>
<Chart
height={316}
width={400}
autoFit
data={IPCount}
interactions={['active-region']}
padding="auto"
>
<Axis
name="IP"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="IP*计数" />
<Tooltip shared />
</Chart>
</Col> </Col>
</Row> </Row>
<Table <Spin spinning={loading} tip="loading">
size="small" <Row className={styles.chart}>
bordered <Col span={12}>
columns={columns} <Chart
dataSource={data0} height={316}
scroll={{ x: 'max-content' }} width={400}
pagination={{ autoFit
showTotal: (total, range) => data={IPCount}
`第${range[0]}-${range[1]} 条/共 ${total} 条`, interactions={['active-region']}
pageSizeOptions: [10, 20, 50, 100], padding="auto"
defaultPageSize: 10, >
showQuickJumper: true, <Axis
showSizeChanger: true, name="IP"
}} label="null"
/> title={{ offset: 20, position: 'end' }}
</Spin> />
<Axis name="计数" title />
<Interval position="IP*计数" />
<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>
</> </>
); );
}; };
......
.serviceLog{
.head{
padding: 10px;
background: white;
margin-bottom: 2px;
min-width: 1030px;
}
.chart{
padding: 16px;
background: white;
}
.table{
border-top: 1px solid #f0eded;
// overflow: auto;//不要这个,pagination否则无法固定底部
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-table-content{
height:calc(100vh - 518px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white;
margin: 1px 0;
padding:8px;
padding-right: 20px;
}
}
}
\ No newline at end of file
...@@ -10,17 +10,27 @@ ...@@ -10,17 +10,27 @@
background: white; background: white;
} }
.table{ .table{
height:calc(100vh - 452px); border-top: 1px solid #f0eded;
overflow: auto; // overflow: auto;//不要这个,pagination否则无法固定底部
.ant-table-thead tr th{ .ant-table-thead tr th{
font-weight: 600; font-weight: 600;
color:rgba(0,0,0,0.85); color:rgba(0,0,0,0.85);
} }
.ant-table-content{
height:calc(100vh - 500px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{ .ant-pagination{
z-index: 999; z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white; background: white;
margin: 2px 0px; margin: 1px 0;
padding:6px 10px; padding:8px;
} padding-right: 20px;
} }
}
} }
\ No newline at end of file
...@@ -10,17 +10,27 @@ ...@@ -10,17 +10,27 @@
background: white; background: white;
} }
.table{ .table{
height:calc(100vh - 452px); border-top: 1px solid #f0eded;
overflow: auto; // overflow: auto;//不要这个,pagination否则无法固定底部
.ant-table-thead tr th{ .ant-table-thead tr th{
font-weight: 600; font-weight: 600;
color:rgba(0,0,0,0.85); color:rgba(0,0,0,0.85);
} }
.ant-table-content{
height:calc(100vh - 500px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{ .ant-pagination{
z-index: 999; z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white; background: white;
margin: 2px 0px; margin: 1px 0;
padding:6px 10px; padding:8px;
} padding-right: 20px;
} }
}
} }
\ No newline at end of file
.AppDic{
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;
}
.ant-table-tbody{
.clickRowStyle{
background: #cfe7fd;
}
.clickRowStyle:hover>td{
background: #aed8fa;
}
}
.ant-card-body{
padding: 10px !important;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-table-content{
height:calc(100vh - 258px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white;
margin: 1px 0;
padding:8px;
padding-right: 20px;
}
}
\ No newline at end of file
.WebDic{ .WebDic{
overflow: auto; overflow: auto;
height:calc(100vh-200px);
.ant-table-thead tr th{ .ant-table-thead tr th{
font-weight: 600; font-weight: 600;
color:rgba(0,0,0,0.85); color:rgba(0,0,0,0.85);
...@@ -22,4 +21,24 @@ ...@@ -22,4 +21,24 @@
.ant-card-body{ .ant-card-body{
padding: 10px !important; padding: 10px !important;
} }
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-table-content{
height:calc(100vh - 488px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white;
margin: 1px 0;
padding:8px;
padding-right: 20px;
}
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment