.hand
This commit is contained in:
Eamon-meng
@@ -1,121 +1,155 @@
|
||||
'use client'
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
||||
import DashboardChart from "./chart"
|
||||
import {Tabs, TabsList, TabsTrigger, TabsContent} from '@/components/ui/tabs'
|
||||
import DashboardChart from './chart'
|
||||
import Image from 'next/image'
|
||||
import soon from '../_assets/coming-soon.svg'
|
||||
import DatePicker from "@/components/date-picker"
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
||||
import { Form, FormField } from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
import DatePicker from '@/components/date-picker'
|
||||
import {Card, CardHeader, CardTitle, CardContent} from '@/components/ui/card'
|
||||
import {Form, FormField} from '@/components/ui/form'
|
||||
import {Input} from '@/components/ui/input'
|
||||
import {zodResolver} from '@hookform/resolvers/zod'
|
||||
import {useForm} from 'react-hook-form'
|
||||
import zod from 'zod'
|
||||
import {merge} from '@/lib/utils'
|
||||
import mask from '../_assets/Mask group.webp'
|
||||
import {Button} from '@/components/ui/button'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import {useStatus} from '@/lib/states'
|
||||
import {useState} from 'react'
|
||||
import {useSearchParams} from 'next/navigation'
|
||||
import {log} from 'console'
|
||||
import {listAccount} from '@/actions/dashboard'
|
||||
import {ExtraReq, ExtraResp} from '@/lib/api'
|
||||
import {toast} from 'sonner'
|
||||
import {addDays, format} from 'date-fns'
|
||||
export default function Charts() {
|
||||
|
||||
const dateStr = '2025-03-05'
|
||||
const dateStrA = '2024-03-05'
|
||||
const date = new Date(dateStr)
|
||||
const dateA = new Date(dateStrA)
|
||||
// const [submittedData, setSubmittedData] = useState<ExtraReq<typeof listAccount>>()
|
||||
const [submittedData, setSubmittedData] = useState<ExtraResp<typeof listAccount>>([
|
||||
{time: new Date(), count: 80},
|
||||
{time: date, count: 100},
|
||||
{time: dateA, count: 50},
|
||||
// {time: `2023-10-03`, count: 80},
|
||||
// {time: `2023-10-04`, count: 200},
|
||||
// {time: `2023-10-05`, count: 150},
|
||||
])
|
||||
const data = [
|
||||
{ time: `2023-10-01`, count: 100 },
|
||||
{ time: `2023-10-02`, count: 50 },
|
||||
{ time: `2023-10-03`, count: 80 },
|
||||
{ time: `2023-10-04`, count: 200 },
|
||||
{ time: `2023-10-05`, count: 150 },
|
||||
{time: `2023-10-01`, count: 100},
|
||||
{time: `2023-10-02`, count: 50},
|
||||
{time: `2023-10-03`, count: 80},
|
||||
{time: `2023-10-04`, count: 200},
|
||||
{time: `2023-10-05`, count: 150},
|
||||
]
|
||||
const formSchema = zod.object({
|
||||
name: zod.string(),
|
||||
age: zod.string(),
|
||||
})
|
||||
|
||||
const formSchema = zod.object({
|
||||
resource_no: zod.number().min(11, '请输入正确的套餐编号').max(11, '请输入正确的套餐编号').optional(),
|
||||
create_after: zod.date().optional(),
|
||||
create_before: zod.date().optional(),
|
||||
})
|
||||
type FormValues = zod.infer<typeof formSchema>
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
age: '',
|
||||
},
|
||||
})
|
||||
const handler = form.handleSubmit(
|
||||
async (value) => {
|
||||
const res = {
|
||||
resource_no: value.resource_no ?? 0,
|
||||
create_after: value.create_after ?? new Date(),
|
||||
create_before: value.create_before ?? new Date(),
|
||||
}
|
||||
const resp = await listAccount(res)
|
||||
if (!resp.success) {
|
||||
toast.error('接口请求失败：' + resp.message)
|
||||
return
|
||||
}
|
||||
resp.data.map((_, i) => {
|
||||
let time = new Date()
|
||||
time = addDays(time, i)
|
||||
return {
|
||||
time: format(time, `MM/dd`),
|
||||
count: Math.floor(Math.random() * 100) + 1,
|
||||
}
|
||||
})
|
||||
setSubmittedData(resp.data)
|
||||
},
|
||||
)
|
||||
|
||||
return (
|
||||
<Card className={`col-start-1 row-start-3 col-span-3 row-span-2`}>
|
||||
<CardContent className={`overflow-hidden`}>
|
||||
<Tabs defaultValue={`dynamic`} className="h-full gap-4">
|
||||
<Card className="col-start-1 row-start-3 col-span-3 row-span-2">
|
||||
<CardContent className="overflow-hidden">
|
||||
<Tabs defaultValue="dynamic" className="h-full gap-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value={`dynamic`} className={`data-[state=active]:text-primary`}>
|
||||
<TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
|
||||
{/* <Image src={mask} alt={`Mask group`} width={35} height={35} priority /> */}
|
||||
动态 IP 套餐</TabsTrigger>
|
||||
<TabsTrigger value={`static`} className={`data-[state=active]:text-primary`}>静态 IP 套餐</TabsTrigger>
|
||||
动态 IP 套餐
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="static" className="data-[state=active]:text-primary">静态 IP 套餐</TabsTrigger>
|
||||
</TabsList>
|
||||
<Form
|
||||
// className="space-y-6"
|
||||
form={form}
|
||||
className={merge(
|
||||
`grid grid-cols-3 gap-4 items-start`,
|
||||
)}
|
||||
<Form<FormValues>
|
||||
className={merge(`grid grid-cols-3 gap-4 items-start`)}
|
||||
handler={handler}
|
||||
form={form}
|
||||
>
|
||||
<FormField
|
||||
name="username"
|
||||
label={<span className={`w-full flex justify-end`}>套餐编号</span>}
|
||||
<FormField
|
||||
name="resource_no"
|
||||
label={<span className="w-full flex justify-end">套餐编号</span>}
|
||||
className={`grid grid-cols-[70px_1fr] grid-rows-[auto_auto] `}
|
||||
classNames={{
|
||||
message: `col-start-2`,
|
||||
}}
|
||||
>
|
||||
{({ field }) => (
|
||||
<Input {...field} className={`w-52`}/>
|
||||
{({field}) => (
|
||||
<Input {...field} className="w-52"/>
|
||||
)}
|
||||
</FormField>
|
||||
<div className={`flex items-center `} >
|
||||
<FormField
|
||||
name={`create_after`}
|
||||
label={<span className={`w-full flex justify-end`}>时间范围筛选</span>}
|
||||
<FormField
|
||||
name="create_after"
|
||||
label={<span className="w-full flex justify-end">时间范围筛选</span>}
|
||||
className={`grid grid-cols-[100px_1fr] `}
|
||||
classNames={{
|
||||
message: `col-start-2`,
|
||||
}}
|
||||
>
|
||||
{({ field }) => (
|
||||
{({field}) => (
|
||||
<DatePicker
|
||||
{...field}
|
||||
className={`w-36`}
|
||||
placeholder={`开始时间`}
|
||||
format={`yyyy-MM-dd`}
|
||||
className="w-36"
|
||||
placeholder="开始时间"
|
||||
format="yyyy-MM-dd"
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
<span className={`px-1`}>-</span>
|
||||
<FormField name={`create_before`}>
|
||||
{({ field }) => (
|
||||
<span className="px-1">-</span>
|
||||
<FormField name="create_before">
|
||||
{({field}) => (
|
||||
<DatePicker
|
||||
{...field}
|
||||
className={`w-36`}
|
||||
placeholder={`结束时间`}
|
||||
format={`yyyy-MM-dd`}
|
||||
className="w-36"
|
||||
placeholder="结束时间"
|
||||
format="yyyy-MM-dd"
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
<Button className={'h-9 w-20'} type="submit">
|
||||
<Button className="h-9 w-20" type="submit">
|
||||
<span>查询</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
<TabsContent value={`dynamic`} className={`overflow-hidden`}>
|
||||
<DashboardChart />
|
||||
<TabsContent value="dynamic" className="overflow-hidden">
|
||||
{submittedData && <DashboardChart data={submittedData}/>}
|
||||
</TabsContent>
|
||||
<TabsContent value={`static`} className={`flex flex-col items-center justify-center gap-2`}>
|
||||
<Image alt={`coming soon`} src={soon} />
|
||||
<TabsContent value="static" className="flex flex-col items-center justify-center gap-2">
|
||||
<Image alt="coming soon" src={soon}/>
|
||||
<p>敬请期待</p>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user