🚧 setup inverter detail page
This commit is contained in:
sam
parent
6c9a41f8ca
commit
b611a9de9e
239
app/(defaults)/chint/inverters/[id]/page.tsx
Normal file
239
app/(defaults)/chint/inverters/[id]/page.tsx
Normal file
@ -0,0 +1,239 @@
|
||||
'use client';
|
||||
|
||||
import PanelCodeHighlight from '@/components/panel-code-highlight'
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import { Tab } from '@headlessui/react';
|
||||
import IconHome from '@/components/icon/icon-home';
|
||||
import IconUser from '@/components/icon/icon-user';
|
||||
import IconPhone from '@/components/icon/icon-phone';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
type Props = {}
|
||||
|
||||
const InverterViewPage = (props: Props) => {
|
||||
const [isMounted, setIsMounted] = useState(false)
|
||||
const params = useParams()
|
||||
console.log()
|
||||
useEffect(() => {
|
||||
setIsMounted(true)
|
||||
}, [])
|
||||
|
||||
// https://api-a.fomware.com.cn/asset/v1/list?key=1105160823180001&type=2
|
||||
|
||||
return (
|
||||
<>
|
||||
<PanelCodeHighlight title={params.id.toString() || ""}>
|
||||
<div className="mb-5">
|
||||
{isMounted && (
|
||||
<Tab.Group>
|
||||
<Tab.List className="mt-3 flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Brief
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Chart
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Event
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Settings
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Firmware
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Data
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<div className="active pt-5">
|
||||
<p className="mb-3 text-base font-semibold">Last Updated ( 2025-02-24 16:03:10 +0800 )</p>
|
||||
|
||||
<blockquote className="rounded-br-md rounded-tr-md border-l-2 !border-l-primary bg-white py-2 px-2 text-black dark:border-[#060818] dark:bg-[#060818]">
|
||||
<div className="flex items-start">
|
||||
<p className="m-0 font-semibold text-sm not-italic text-[#515365] dark:text-white-light">Basic Information</p>
|
||||
</div>
|
||||
</blockquote>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-600 mt-3">
|
||||
<p><span className="font-semibold">Model:</span> CPS SCA10KTL-T</p>
|
||||
<p><span className="font-semibold">SN:</span> 1105160823180001</p>
|
||||
<p><span className="font-semibold">Total Energy:</span> 9.24 MWh</p>
|
||||
<p><span className="font-semibold">Today Energy:</span> 35.65 kWh</p>
|
||||
<p><span className="font-semibold">Reactive Power:</span> -226.9 var</p>
|
||||
<p><span className="font-semibold">Active Power:</span> 5.552 kW</p>
|
||||
<p><span className="font-semibold">Inverter Mode:</span> OnGrid</p>
|
||||
<p><span className="font-semibold">Inner Temperature:</span> 53°C</p>
|
||||
<p><span className="font-semibold">Create Time:</span> 2024-06-05 12:05:41 +0800</p>
|
||||
<p><span className="font-semibold">Modules:</span> Master: 011330, Deputy: BR0208</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div>
|
||||
<div className="flex items-start pt-5">
|
||||
<div className="h-20 w-20 flex-none ltr:mr-4 rtl:ml-4">
|
||||
<img src="/assets/images/profile-34.jpeg" alt="img" className="m-0 h-20 w-20 rounded-full object-cover ring-2 ring-[#ebedf2] dark:ring-white-dark" />
|
||||
</div>
|
||||
<div className="flex-auto">
|
||||
<h5 className="mb-4 text-xl font-medium">Media heading</h5>
|
||||
<p className="text-white-dark">
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
|
||||
turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div className="pt-5">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>Disabled</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
)}
|
||||
</div>
|
||||
</PanelCodeHighlight>
|
||||
|
||||
|
||||
<div className="panel pt-1 mt-">
|
||||
{isMounted && (
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
INV-DC
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
INV-AC
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Meter-AC
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
|
||||
Meter-Load
|
||||
</button>
|
||||
)}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<div className="active pt-5">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-200 text-gray-600 text-left">
|
||||
<th className="p-2"></th>
|
||||
<th className="p-2">Voltage(V)</th>
|
||||
<th className="p-2">Current(A)</th>
|
||||
<th className="p-2">Power(W)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{ pv: "PV1/PV1", voltage: 362.1, current: 7.5, power: 2717.5 },
|
||||
{ pv: "PV2/PV2", voltage: 347.0, current: 9.16, power: 3181.9 },
|
||||
{ pv: "PV3/PV3", voltage: 0.0, current: 0.0, power: 0.0 },
|
||||
{ pv: "PV4/PV4", voltage: 0.0, current: 0.0, power: 0.0 },
|
||||
].map((row, index) => (
|
||||
<tr key={index} className="border-b text-gray-600">
|
||||
<td className="p-2">{row.pv}</td>
|
||||
<td className="p-2">{row.voltage}</td>
|
||||
<td className="p-2">{row.current}</td>
|
||||
<td className="p-2">{row.power}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div className='pt-5'>
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-200 text-gray-600 text-left">
|
||||
<th className="p-2"></th>
|
||||
<th className="p-2">Voltage(V)</th>
|
||||
<th className="p-2">Current(A)</th>
|
||||
<th className="p-2">Power(W)</th>
|
||||
<th className="p-2">Frequency(Hz)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{ pv: "A", voltage: 362.1, current: 7.5, power: 2717.5, frequency: 1 },
|
||||
{ pv: "B", voltage: 347.0, current: 9.16, power: 3181.9, frequency: 1 },
|
||||
{ pv: "C", voltage: 0.0, current: 0.0, power: 0.0, frequency: 1 },
|
||||
].map((row, index) => (
|
||||
<tr key={index} className="border-b text-gray-600">
|
||||
<td className="p-2">{row.pv}</td>
|
||||
<td className="p-2">{row.voltage}</td>
|
||||
<td className="p-2">{row.current}</td>
|
||||
<td className="p-2">{row.power}</td>
|
||||
<td className="p-2">{row.frequency}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>Disabled</Tab.Panel>
|
||||
<Tab.Panel>Disabled</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default InverterViewPage
|
||||
@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react'
|
||||
|
||||
// import ReactApexChart from 'react-apexcharts';
|
||||
import dynamic from 'next/dynamic';
|
||||
import Link from 'next/link';
|
||||
const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
||||
|
||||
type Props = {}
|
||||
@ -111,7 +112,7 @@ const SungrowInverters = (props: Props) => {
|
||||
{inverters.map((data) => (
|
||||
<tr key={data.id}>
|
||||
<td>
|
||||
<div className="whitespace-nowrap">{data.name}</div>
|
||||
<div className="whitespace-nowrap"><Link href={`/chint/inverters/${data.name}`}>{data.name}</Link></div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="whitespace-nowrap">{data.siteName}</div>
|
||||
|
||||
@ -15,7 +15,6 @@ const PanelCodeHighlight = ({ children, title, id, className = '' }: PanelCodeHi
|
||||
<div className={`panel ${className}`} id={id}>
|
||||
<div className="mb-5 flex items-center justify-between">
|
||||
<h5 className="text-lg font-semibold dark:text-white-light">{title}</h5>
|
||||
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user