70 lines
1.3 KiB
TypeScript
70 lines
1.3 KiB
TypeScript
import {useEffect, useState} from "react";
|
|
import {Tabs, TabPane} from '@nutui/nutui-react-taro'
|
|
|
|
const list = [
|
|
{
|
|
title: '今天',
|
|
id: 1
|
|
},
|
|
{
|
|
title: '昨天',
|
|
id: 2
|
|
},
|
|
{
|
|
title: '过去7天',
|
|
id: 3
|
|
},
|
|
{
|
|
title: '过去30天',
|
|
id: 4
|
|
}
|
|
]
|
|
const Chart = () => {
|
|
const [tapIndex, setTapIndex] = useState<string | number>('0')
|
|
const reload = () => {
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
reload()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<Tabs
|
|
align={'left'}
|
|
tabStyle={{position: 'sticky', top: '0px'}}
|
|
value={tapIndex}
|
|
onChange={(paneKey) => {
|
|
setTapIndex(paneKey)
|
|
}}
|
|
>
|
|
{
|
|
list?.map((item, index) => {
|
|
return (
|
|
<TabPane key={index} title={item.title}/>
|
|
)
|
|
})
|
|
}
|
|
</Tabs>
|
|
{
|
|
list?.map((item, index) => {
|
|
console.log(item.title)
|
|
return (
|
|
<div key={index} className={'px-3'}>
|
|
{
|
|
tapIndex != index ? null :
|
|
<div className={'bg-white rounded-lg p-4 flex justify-center items-center text-center text-gray-300'} style={{height: '200px'}}>
|
|
线状图
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</>
|
|
|
|
)
|
|
}
|
|
export default Chart
|