antD time frame empty

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: "Station name",
                {
                    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 = left: 'Center' 
                }, 
                { 
                    width: '13% ',
                    align: 'right'
                },
                    title: 'water', 
                    dataIndex The: 'Z', 
                    width: '. 5%', 
                    align = left: 'right' 
                }, 
                { 
                    title: 'the amount of water (m³)', 
                    dataIndex The: 'Q', 
                    width: '. 7%', 
                    align = left : 'right' 
                }, 
                { 
                    title: 'cross-sectional flow areas (m²)', 
                    dataIndex The: 'XSA', 
                { 
                    title: 'mean velocity (m / S)', 
                    dataIndex The: 'xsavv', 
                    width:'13%',
                    align: 'right'
                }, 
                { 
                    Title: 'cross section of maximum velocity (m / S)', 
                    dataIndex The: 'xsmxv', 
                    width: '13% ', 
                    align = left:' right ' 
                }, 
                { 
                    title:' water signature ', 
                    dataIndex The:' flwchrcd ' , 
                    width: '. 8%', 
                    align = left: 'Center' 
                }, 
                { 
                    title: 'Potential', 
                    Data Index: 'wptn'
                    align = left: '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
        // graphed 
        const = {Option 
            title: { 
                text: 'Flood packets to maintain a line graph', 
                X: 'Center', 
                Y: 'Top', 
                textAlign: 'left', 
                Top: 10, 
                left: 'left ' 
            }, 
            ToolTip: { 
                Trigger:' Axis' 
            }, 
            // Legend: { 
            // Data: [ '齐齐哈勒克', 'dam', 'library', 'Qiemo'] 
            //}, 
            calculable: to 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 the this Self = 
        const Modal.confirm Confirm = 
        const} = {selectedRowKeys this.state 
        IF (selectedRowKeys.length ===. 1) { 
            Confirm ({ 
                title: ' tips', 
                Content: 'confirm delete',? 
                okText: 'confirmation', 
                CancelText: 'cancel', 
                the OnOK () { 
                    self.delBtnFn () 
                } 
            })
        } the else { 
            message.warn ( 'Please select a data') 
        } 
    } 

    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, the startTime, endTime) 
        }) 
    } 
     // set a start time can not be selected 
    disabledStartDate = Current => { 
        IF (this.state.endTime) { 
            return Current> Date.now () Current ||> new new a Date (this.state.endTime) .getTime () 
        } the else { 
            return Current> Date.now () 
        } 
     } 

    // set the end time can not be selected 
     disabledEndDate = Current => { 
        return Current < new new a Date ( this.state.startTime) .getTime () || Current > Date.now () 
      } 
    the render () { 
        const {Columns, the 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'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='Starting time'={{width: 
                                        
                            
                            
                           
                        
                        
                            style = {{width: '100%' }}> 
                               < The DatePicker value = {} this.state.startTime the showTime placeholder = 'Select Start Time' disabledDate = {} this.disabledStartDate the onChange = {} this.onChangeStartTime   /> 
                               
                            </ the FormItem > 
                        </ CoI > 
                        < CoI SM = { } 24 MD = {}. 6 > 
                            < the FormItem label = 'end time' style = {{ width: '100%'}} > 
                               < the DatePicker value = {} this.state.endTime the showTime placeholder = 'select end time'  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}></ResetButton>
                        </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>
        )
    }
}