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>
)
}
}