antD 时间框清空

最新推荐文章于 2024-01-04 20:52:51 发布
转载最新推荐文章于 2024-01-04 20:52:51 发布 · 2.2k 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/whlBooK/p/11540396.html
文章标签：
#javascript #ViewUI
import React from 'react'
import { Layout, Row, Button, Table, DatePicker, Form, Col, Select, message, Modal } from 'antd'
import ModalCon from './addEdit'
import ReactEcharts from 'echarts-for-react'
import '../riverWater.less'
import { queryByPage, delFun } from '@api/RiverWater/reportProtect'
import { tempStcdList } from '@api/RiverWater/singleCompare'
import moment from 'moment'
const { Header, Content, Footer } = Layout
const FormItem = Form.Item
const Option = Select.Option
export interface IProps {

}

interface IState {
    columns?: any
    loading?: boolean
    tableData?: any
    pagination?: any
    height: number
    stcd?: any
    stnm?: any
    stcds: any
    treeData?: any
    selectedRowKeys?: any
    selectedRows?: any
    type: string
    isShow: boolean
    startTime: any
    endTime: any
    flagstartTime: any
    flagEndTime: any
    echartsOption?: any
    tableFTime: any
    flagNum?: any
    xAxisData: any
    seriesData: any
}

export default class StationInfo extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props)
        this.getStcdList()
        const stcd = sessionStorage.getItem('stcd')
    
        this.state = {
            tableFTime: '',
            xAxisData: [],
            seriesData: [],
            flagNum: 0,
            isShow: false,
            loading: true,
            tableData: [],
            height: 400,
            startTime: '',
            endTime: '',
            flagstartTime: '',
            flagEndTime: '',
            pagination: {
                showSizeChanger: true,
                showQuickJumper: true,
                current: 1,
                pageSize: 15,
                total: 0,
                showTotal: (total: any) => `共${total} 条`,
                pageSizeOptions: ['15', '30', '45']
            },
            stcd,
            stnm: '',
            stcds: [],
         
            treeData: [],
            selectedRowKeys: [],
            selectedRows: [],
            type: '',
            echartsOption: {},
            columns: [
                {
                    title: '测站编码',
                    dataIndex: 'stcd',
                    width: '8%',
                    align: 'center'
                },
                {
                    title: '测站名称',
                    dataIndex: 'stnm',
                    width: '10%',
                    align: 'center',
                    render: (value, row) => {
                        return (
                            <a href='javascript:;' onClick={this.handleClick.bind(this, row)}>{value}</a>
                        )
                    }
                },
                {
                    title: '时间',
                    dataIndex: 'tm',
                    width: '15%',
                    align: 'center'
                },
                {
                    title: '水位',
                    dataIndex: 'z',
                    width: '5%',
                    align: 'right'
                },
                {
                    title: '水量(m³)',
                    dataIndex: 'q',
                    width: '7%',
                    align: 'right'
                },
                {
                    title: '断面过水面积(m²)',
                    dataIndex: 'xsa',
                    width: '13%',
                    align: 'right'
                },
                {
                    title: '断面平均流速(m/s)',
                    dataIndex: 'xsavv',
                    width: '13%',
                    align: 'right'
                },
                {
                    title: '断面最大流速(m/s)',
                    dataIndex: 'xsmxv',
                    width: '13%',
                    align: 'right'
                },
                {
                    title: '河水特征码',
                    dataIndex: 'flwchrcd',
                    width: '8%',
                    align: 'center'
                },
                {
                    title: '水势',
                    dataIndex: 'wptn',
                    align: 'center',
                    width: '6%',
                }
               
            ]
        }
    }

    handleClick = (row: object) => {
        this.setState({
            isShow: true,
            type: 'detail',
            selectedRows: [row]
        })
    }

    getStcdList = () => {
        tempStcdList().then((res: any) => {
            if (res!.code! === 'CODE_0000') {
                const data = res.data
            
                sessionStorage.setItem('stcd', data[0].stcd)
                this.setState({
                    stcds: data,
                    stcd: data[0].stcd
                })
            }
        })
    }

   

    initEcharts = () => {
        const   { xAxisData, seriesData } = this.state
        // 绘制图表
        const option = {
            title: {
                text: '河道水情来报维护折线图',
                x: 'center',
                y: 'top',
                textAlign: 'left',
                top: 10,
                left: 'left'
            },
            tooltip: {
                trigger: 'axis'
            },
            // legend: {
            //     data: ['齐齐哈勒克', '坝上', '出库', '且末']
            // },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData
                }
            ],
            yAxis: [
                {
                    name: '水位(m)',
                    nameLocation: 'middle',
                    nameRotate: 90,
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 13
                    }
                }
            ],
            series: [
                {
                    name: '水位',
                    type: 'line',                   
                    data: seriesData
                }
            ]
        }
        return option
    }
    componentDidMount = () => {
        const contentHeight = document.getElementById('js-page-content')!.offsetHeight
        this.setState({
            height: contentHeight - 450
        })
        const { stcd } = this.state
        this.getTableData(stcd, '', '')
    }
    getTableData = (stcd, startTime, endTime) => {
        const { pagination } = this.state
        const param = {
            stcd,
            page: 1, 
            rows: 1000,
            rvnm: '',
            startTime: startTime ? moment(startTime).format('YYYY-MM-DD HH:mm:ss') : '',
            endTime: endTime ? moment(endTime).format('YYYY-MM-DD HH:mm:ss') : '',
        }
        if (this.state.flagNum < 2) {
            queryByPage(param).then((res: any) => {
            //    console.log(res)
                if (res.code === 'CODE_0000') {
                    const xAxisData: any [] = []
                    const seriesData: any [] = []
                    res.data.records.map(item => {
                        xAxisData.push(item.tm)
                        seriesData.push(item.z)
                    })
                    this.setState({
                        tableData: res.data.records,
                        tableFTime: res.data.records.length ? res.data.records[0].tm : '',
                        loading: false,
                        flagNum: this.state.flagNum + 1,
                        xAxisData,
                        seriesData,
                        pagination: {
                            showSizeChanger: true,
                            showQuickJumper: true,
                            current: pagination.current,
                            pageSize: pagination.pageSize,
                            total: res.data.total,
                            showTotal: (total: any) => `共${total} 条`
                        }
                    }, () => {
                       
                        if (this.state.tableData.length) {
                            const { tableFTime } = this.state
                            const startT = moment(tableFTime).add(-12, 'hour').format('YYYY-MM-DD HH:mm:ss')
                            const endT = moment(tableFTime).add(12, 'hour').format('YYYY-MM-DD HH:mm:ss')
                            this.getTableData(stcd, startT, endT)
                            this.setState({
                                flagstartTime: startT,
                                flagEndTime: endT,
                                echartsOption: this.initEcharts()
                            })
                        }
                    })
                }
            })
        }
        
      
    }


    handleReset = (e) => {
        e.preventDefault()
        const stcd = sessionStorage.getItem('stcd')
        this.setState({
            stcd,
            startTime: '',
            endTime: ''
        })
    }

    handleTableChange = (pagination) => {
        this.setState({ pagination }, () => {
            const { stcd } = this.state
            this.getTableData(stcd, '', '')
        })
    }

    getQueryStnm = (e) => {
     
        this.setState({
            stcd: e
        })
       
    }

    onSelectChange = (selectedRowKeys, selectedRows) => {
        this.setState({
            selectedRowKeys,
            selectedRows
        })
    }

    setFn = () => {
        this.setState({
            isShow: false,
            selectedRowKeys: [],
            flagNum: 0
        }, () => {
            const { stcd, flagstartTime, flagEndTime } = this.state  
            this.getTableData(stcd, flagstartTime, flagEndTime)
        })
        
    }

    addBtn = () => {
        this.setState({
            isShow: true,
            type: 'add'
        })
    }

    editBtn = () => {
        if (this.state.selectedRowKeys.length === 1) {
            this.setState({
                isShow: true,
                type: 'edit'
            })
        } else {
            message.error('请选择一条数据进行编辑')
        }
    }

    delBtn = (e) => {
        e.preventDefault()
        const self = this
        const confirm = Modal.confirm
        const { selectedRowKeys } = this.state
        if (selectedRowKeys.length === 1) {
            confirm({
                title: '提示',
                content: '确认要删除？',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    self.delBtnFn()
                }
            })
        } else {
            message.warn('请选择一条数据')
        }
    }

    delBtnFn = () => {
      
        const { selectedRows } = this.state
        const param = {
            stcd: selectedRows[0].stcd,
            tm: selectedRows[0].tm
        }
        delFun(param).then((res: any) => {
          //  console.log(res)
            if (res) {
                message.success('删除成功', 3)
                this.setState({
                    selectedRowKeys: [],
                    flagNum: 1
                }, () => {
                    const { stcd, flagstartTime, flagEndTime } = this.state
                   
                    this.getTableData(stcd, flagstartTime, flagEndTime)
                })
               
            }
        })
       
    }
    onChangeStartTime = (value, dateString) => {
        const param = { value, dateString }
        this.setState({
            startTime:  param.dateString ? moment(param.dateString, 'YYYY-MM-DD HH:mm:ss') : ''  // 点击输入框清除按钮防止出错
        })
    }
    onChangeEndTime = (value, dateString) => {
       
        const param = { value, dateString }
        this.setState({
            endTime: param.dateString ? moment(param.dateString, 'YYYY-MM-DD HH:mm:ss') : ''
        })
    }
    // 查询
    getSelect = () => {
        this.setState({
            flagNum: 1
        }, () => {
            const { stcd, startTime, endTime } = this.state
            this.getTableData(stcd, startTime, endTime)
        })
    }
     // 设置开始日期不能选择的时间
    disabledStartDate = current => {
        if (this.state.endTime) {
            return current > Date.now() || current > new Date(this.state.endTime).getTime()
        } else {
            return current > Date.now()
        }
     }

    // 设置结束不能选择的时间
     disabledEndDate = current => {
        return current < new Date(this.state.startTime).getTime()  || current > Date.now()
      }
    render() {
        const { columns, pagination, loading, tableData, selectedRowKeys, stcds } = this.state
        const rowSelection = {
            loading: true,
            selectedRowKeys,
            onChange: this.onSelectChange
        }
        return (
            <Layout className='bodyClass'>
                <Form layout='inline' className='queryForm'>
                    <Row>
                        <Col sm={24} md={6} >
                        <FormItem label='测站名称'>
                           <Select value={this.state.stcd} style={{width: '100%'}} onChange={this.getQueryStnm}>
                                {
                                    stcds.map((item: any) => (
                                        <Option key={item.stcd}>{item.stnm}</Option>
                                    ))
                                }
                            </Select>
                            </FormItem>
                           
                        </Col>
                        <Col sm={24} md={6} >
                            <FormItem label='开始时间' style={{ width: '100%' }}>
                               <DatePicker value={this.state.startTime} showTime placeholder='请选择开始时间' disabledDate={this.disabledStartDate} onChange={this.onChangeStartTime}  />
                               
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} >
                            <FormItem label='结束时间' style={{ width: '100%' }}>
                               <DatePicker value={this.state.endTime} showTime placeholder='请选择结束时间'  disabledDate={this.disabledEndDate} onChange={this.onChangeEndTime}  />
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} className='user_btn' >
                            <Button className='searchBtn' icon='search' onClick={this.getSelect}>查询</Button>
                            <Button className='resetBtn' icon='reload' onClick={this.handleReset}>重置</Button>
                        </Col>
                    </Row>
                    {/* <Row>
                        <Col sm={24} md={6} >
                            <FormItem label='选择时间' style={{ width: '100%' }}>
                                <RangePicker style={{ width: '100%' }} format='YYYY-MM-DD' />
                            </FormItem>
                        </Col>
                    </Row> */}
                </Form>
                <Content className='contentLayout'>
                    <Header className='contentHeader'>
                        <Row>
                            <Button onClick={this.addBtn}>新增</Button>
                            <Button onClick={this.editBtn}>编辑</Button>
                            <Button onClick={this.delBtn}>删除</Button>
                        </Row>
                    </Header>
                    <Table
                        columns={columns}
                        rowKey='id'
                        pagination={pagination}
                        loading={loading}
                        dataSource={tableData}
                        rowSelection={rowSelection}
                        onChange={this.handleTableChange}
                        scroll={{ x: true, y: 200 }}
                        bordered
                    />
                    <ModalCon
                        isShow={this.state.isShow}
                        setFn={this.setFn}
                        type={this.state.type}
                        rowData={this.state.selectedRows![0]}
                    />
                </Content>
                <Footer className='contentLayout' style={{height: this.state.height}}>
                    <div id='histogram' className='containerDiv'>
                        {
                            tableData.length > 0 ? <ReactEcharts
                                option={this.state.echartsOption}
                                theme='clear'
                                style={{ width: '100%', height: '100%' }}
                            /> : 
                            <div style={{textAlign: 'center', display: 'flex', flexDirection: 'column', height: '100%'}}>
                                <h1 style={{fontSize: 20, fontWeight: 'bolder'}}>
                                    河道水情来报维护
                                </h1>
                                <div className='nodata' style={{flex: 1}}/>
                            </div>
                        }
                        
                    </div>
                </Footer>

            </Layout>
        )
    }
}