265 lines
16 KiB
TypeScript
265 lines
16 KiB
TypeScript
'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';
|
|
import axios from 'axios';
|
|
|
|
type Props = {}
|
|
|
|
const InverterViewPage = (props: Props) => {
|
|
const [isMounted, setIsMounted] = useState(false)
|
|
const [loading, setLoading] = useState(true)
|
|
const params = useParams()
|
|
const [inverter, setInverter] = useState<any>({})
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
fetchData()
|
|
}, [])
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const res = await axios.get(`https://api-a.fomware.com.cn/asset/v1/list?type=2&key=${params.id.toString()}`, {
|
|
headers: {
|
|
"Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
|
|
}
|
|
})
|
|
console.log("res", res.data.data.devices[0])
|
|
setInverter(res.data.data.devices[0])
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
|
|
{loading ? <p>Loading...</p> : (
|
|
<>
|
|
<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>{inverter.model}</p>
|
|
<p><span className="font-semibold">SN: </span>{inverter.sn}</p>
|
|
<p><span className="font-semibold">Total Energy: </span>{inverter.eTotalWithUnit}</p>
|
|
<p><span className="font-semibold">Today Energy: </span>{inverter.eTodayWithUnit}</p>
|
|
<p><span className="font-semibold">Reactive Power: </span>{inverter.lastRTP["Reactive Power"].value} var</p>
|
|
<p><span className="font-semibold">Active Power: </span>{inverter.activePowerWithUnit}</p>
|
|
<p><span className="font-semibold">Inverter Mode: </span>{inverter.lastRTP["Inverter Mode"].value}</p>
|
|
<p><span className="font-semibold">Inner Temperature: </span>{inverter.lastRTP["Inner Temperature"].value} °C</p>
|
|
<p><span className="font-semibold">Create Time: </span>{inverter.createdAtStr}</p>
|
|
<p><span className="font-semibold">Modules: </span>{inverter.moduleFw.map((item: {module:string, value:string}) => `${item.module}: ${item.value}`.trim()) // Map to "module: value" format
|
|
.join(", ")}</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-3">
|
|
{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
|