72 lines
2.5 KiB
JavaScript
72 lines
2.5 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
||
import { zqrl, list} from "../../../../service/sssq";
|
||
import Sssw from './sssw';
|
||
import Sjcx from '../../../Home/MapCtrl/components/Sqjcsj/index'
|
||
import "./index.less"
|
||
import { Table } from 'antd';
|
||
export default function Sksq() {
|
||
|
||
const columns = [
|
||
{title: '水位(m)', key: 'z', dataIndex: 'z', align: 'center'},
|
||
{title: '流量(m³/s)', key: 'q', dataIndex: 'q', align: 'center'},
|
||
]
|
||
const [tableData, setTableData] = useState([])
|
||
const [swtableData, setSwTableData] = useState([])
|
||
const getData = async (params) => {
|
||
let res = await list(params)
|
||
setTableData(res);
|
||
getSwTableData(res[0]?.stcd)
|
||
}
|
||
|
||
const getSwTableData = async (stcd) => {
|
||
setSwTableData(await zqrl(stcd));
|
||
};
|
||
useEffect(() => {
|
||
getData({args: "",sources: ["SH", "SW"]})
|
||
}, [])
|
||
return (
|
||
<div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
|
||
<div className='content-sk'>
|
||
<div className='content-left'>
|
||
<div className='comomn-title'>
|
||
<div style={{display:"flex",alignItems:"center"}}>
|
||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
|
||
<span style={{marginLeft:10}}>实时水位</span>
|
||
</div>
|
||
<span>站点：{tableData[0]?.stnm}</span>
|
||
</div>
|
||
<div className='sssw-content'>
|
||
<Sssw data={tableData[0] || {}}/>
|
||
</div>
|
||
<div className='comomn-title'>
|
||
<div style={{display:"flex",alignItems:"center"}}>
|
||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
|
||
<span style={{marginLeft:10}}>水位流量关系表</span>
|
||
</div>
|
||
</div>
|
||
<div className='sssw-content' style={{padding:10}}>
|
||
<Table
|
||
dataSource={swtableData}
|
||
rowKey="adcd"
|
||
columns={columns}
|
||
pagination={false}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='content-right'>
|
||
<div className='comomn-title'>
|
||
<div style={{display:"flex",alignItems:"center",columnGap:10}}>
|
||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
|
||
<span>数据查询</span>
|
||
</div>
|
||
</div>
|
||
<div className='sjcx-content'>
|
||
<Sjcx record={{...tableData[0],height:true} || {}}/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|