42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
|
import React, { useState } from 'react'
|
||
|
|
import ProjectBasciInfo from './projectBasicInfo'
|
||
|
|
import TzParams from './tzParams'
|
||
|
|
import KrLine from './KrLine'
|
||
|
|
import MonthLl from './monthLl'
|
||
|
|
import "./index.less"
|
||
|
|
export default function ShuikuBasicInfo() {
|
||
|
|
const [tabVal, setTabVal] = useState('1')
|
||
|
|
return (
|
||
|
|
<div className='shuiku-content-root'>
|
||
|
|
<div className='fxdd_hsybjs_toolbar'>
|
||
|
|
<div
|
||
|
|
className={tabVal === '1' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||
|
|
onClick={() => setTabVal('1')}>工程基础信息
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={tabVal === '2' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||
|
|
onClick={() => setTabVal('2')}>主要特征参数
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={tabVal === '3' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||
|
|
onClick={() => setTabVal('3')}>水库库容曲线
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
|
||
|
|
onClick={() => setTabVal('5')}>月生态流量
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className='shuiku-content'
|
||
|
|
style={{marginLeft:(tabVal == 1 || tabVal == 2) ? 60 : 20}}
|
||
|
|
>
|
||
|
|
{tabVal === "1" ? <ProjectBasciInfo /> : null}
|
||
|
|
{tabVal === "2" ? <TzParams /> : null}
|
||
|
|
{tabVal === "3" ? <KrLine /> : null}
|
||
|
|
{tabVal === "5" ? <MonthLl /> : null}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|