108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Form, Input, Button, DatePicker } from 'antd';
|
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
|
import dayjs from 'dayjs';
|
|
import { FileTextOutlined } from '@ant-design/icons';
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const ToolBar = ({ setToolVal }) => {
|
|
const [showIcon, setShowIcon] = useState(false)
|
|
const selectList=[
|
|
{key:'最近1小时',value:1},
|
|
{key:'最近1天',value:2},
|
|
{key:'最近7天',value:3},
|
|
{key:'最近1个月',value:4},
|
|
]
|
|
const Stypes = [
|
|
{ label: 'CPU', value: 0 },
|
|
{ label: '内存', value: 1 },
|
|
{ label: '存储', value: 2 },
|
|
];
|
|
const [form] = Form.useForm();
|
|
|
|
const onFinish = (values) => {
|
|
if (values.tm) {
|
|
values.stm = values.tm[0] ? dayjs(values.tm[0]).format('YYYY-MM-DD HH:mm:ss') : "";
|
|
values.etm = values.tm[1] ? dayjs(values.tm[1]).format('YYYY-MM-DD HH:mm:ss') : "";
|
|
delete values.tm
|
|
}
|
|
setToolVal(values);
|
|
}
|
|
|
|
const selectTime = (params)=>{
|
|
let tmValue=[]
|
|
if(params === 1){
|
|
tmValue=[dayjs().subtract(1, 'hours'),
|
|
dayjs()
|
|
]
|
|
}else if(params ===2){
|
|
tmValue=[dayjs().subtract(1, 'days'),
|
|
dayjs()
|
|
]
|
|
}else if(params ===3){
|
|
tmValue=[dayjs().subtract(7, 'days'),
|
|
dayjs()
|
|
]
|
|
}else if(params ===4){
|
|
tmValue=[dayjs().subtract(1, 'months'),
|
|
dayjs()
|
|
]
|
|
}
|
|
form.setFieldsValue({...params,tm:tmValue})
|
|
}
|
|
|
|
const onValuesChange = (values, allValues) => {
|
|
if (allValues.tm) {
|
|
allValues.stm = allValues.tm[0] ? dayjs(allValues.tm[0]).format('YYYY-MM-DD HH:mm:ss') : "";
|
|
allValues.etm = allValues.tm[1] ? dayjs(allValues.tm[1]).format('YYYY-MM-DD HH:mm:ss') : "";
|
|
delete allValues.operTime
|
|
}
|
|
console.log(values,allValues);
|
|
setToolVal(allValues)
|
|
}
|
|
useEffect(() => {
|
|
const tm = [dayjs().subtract(1, 'hours'), dayjs()];
|
|
form.setFieldsValue({ tm, type: 0 })
|
|
const stm = tm[0].format('YYYY-MM-DD HH:mm:ss');
|
|
const etm = tm[1].format('YYYY-MM-DD HH:mm:ss');
|
|
setToolVal({type:0,stm,etm})
|
|
}, [])
|
|
return (
|
|
<div className='pageToolBar' style={{position:'relative'}}>
|
|
<Form form={form} onFinish={onFinish} size='Default' layout="inline" style={{columnGap:25}} onValuesChange={onValuesChange}>
|
|
<Form.Item label="监测时间" name="tm">
|
|
<RangePicker
|
|
placeholder={['开始日期', '结束日期']}
|
|
format='YYYY-MM-DD HH:mm:ss'
|
|
style={{ width: 350 }}
|
|
showTime
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="监测指标" name="type" wrapperCol={{span:1}}>
|
|
<NormalSelect options={Stypes} style={{ width: '120px' }} />
|
|
</Form.Item>
|
|
<Form.Item wrapperCol={{offset:8}}>
|
|
<Button type="primary" htmlType="submit" size='Default'>查询</Button>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button size='Default' onClick={() => form.resetFields()}>重置</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
<div style={{display:'flex',justifyContent:'end',position:'absolute',left:"25.5%",
|
|
top:"7%"}}
|
|
onClick={()=>{
|
|
setShowIcon(!showIcon)
|
|
}}
|
|
>
|
|
<FileTextOutlined style={{fontSize:24,color:'skyblue'}}/>
|
|
{showIcon &&<div className='selecItem' style={{position:'absolute',zIndex:2,width:200,top:"100%",left:"7.5%",backgroundColor:'#fff',border:'1px solid #f0f0f0',padding:'5px 10px'}}>
|
|
{selectList.map((item)=>{
|
|
return <div style={{cursor:'pointer'}} onClick={()=>selectTime(item.value)}>{item.key}</div>
|
|
})}
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ToolBar; |