249 lines
15 KiB
TypeScript
249 lines
15 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()).join(", ")}</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</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>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">PV1/PV1</td>
|
|
<td className="p-2">{inverter.lastRTP["PV1 Voltage"] && inverter.lastRTP["PV1 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["PV1 Current"] && inverter.lastRTP["PV1 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["MPPT1 Power"] && inverter.lastRTP["MPPT1 Power"].value}</td>
|
|
</tr>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">PV2/PV2</td>
|
|
<td className="p-2">{inverter.lastRTP["PV2 Voltage"] && inverter.lastRTP["PV2 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["PV2 Current"] && inverter.lastRTP["PV2 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["MPPT2 Power"] && inverter.lastRTP["MPPT2 Power"].value}</td>
|
|
</tr>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">PV3/PV3</td>
|
|
<td className="p-2">{inverter.lastRTP["PV3 Voltage"] && inverter.lastRTP["PV3 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["PV3 Current"] && inverter.lastRTP["PV3 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["MPPT3 Power"] && inverter.lastRTP["MPPT3 Power"].value}</td>
|
|
</tr>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">PV3/PV3</td>
|
|
<td className="p-2">{inverter.lastRTP["PV4 Voltage"] && inverter.lastRTP["PV4 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["PV4 Current"] && inverter.lastRTP["PV4 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["MPPT4 Power"] && inverter.lastRTP["MPPT4 Power"].value}</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
|