275 lines
20 KiB
TypeScript
275 lines
20 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 text-gray-400">Model: </span>{inverter.model}</p>
|
|
<p><span className="font-semibold text-gray-400">SN: </span>{inverter.sn}</p>
|
|
<p><span className="font-semibold text-gray-400">Total Energy: </span>{inverter.eTotalWithUnit}</p>
|
|
<p><span className="font-semibold text-gray-400">Today Energy: </span>{inverter.eTodayWithUnit}</p>
|
|
<p><span className="font-semibold text-gray-400">Reactive Power: </span>{inverter.lastRTP["Reactive Power"].value} var</p>
|
|
<p><span className="font-semibold text-gray-400">Active Power: </span>{inverter.activePowerWithUnit}</p>
|
|
<p><span className="font-semibold text-gray-400">Inverter Mode: </span>{inverter.lastRTP["Inverter Mode"].value}</p>
|
|
<p><span className="font-semibold text-gray-400">Inner Temperature: </span>{inverter.lastRTP["Inner Temperature"].value} °C</p>
|
|
<p><span className="font-semibold text-gray-400">Create Time: </span>{inverter.createdAtStr}</p>
|
|
<p><span className="font-semibold text-gray-400">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>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">A</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L1 Voltage"] && inverter.lastRTP["Phase L1 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L1 Current"] && inverter.lastRTP["Phase L1 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L1 Power"] && inverter.lastRTP["Phase L1 Power"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L1 Frequency"] && inverter.lastRTP["Phase L1 Frequency"].value}</td>
|
|
</tr>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">B</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L2 Voltage"] && inverter.lastRTP["Phase L2 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L2 Current"] && inverter.lastRTP["Phase L2 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L2 Power"] && inverter.lastRTP["Phase L2 Power"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L2 Frequency"] && inverter.lastRTP["Phase L2 Frequency"].value}</td>
|
|
</tr>
|
|
<tr className="border-b text-gray-600">
|
|
<td className="p-2">C</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L3 Voltage"] && inverter.lastRTP["Phase L3 Voltage"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L3 Current"] && inverter.lastRTP["Phase L3 Current"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L3 Power"] && inverter.lastRTP["Phase L3 Power"].value}</td>
|
|
<td className="p-2">{inverter.lastRTP["Phase L3 Frequency"] && inverter.lastRTP["Phase L3 Frequency"].value}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Tab.Panel>
|
|
<Tab.Panel>
|
|
<div className="pt-5">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 text-gray-600 mt-3">
|
|
<p><span className="font-semibold text-gray-400">Today import Energy: </span>{inverter.lastRTP["Today import Energy"] && inverter.lastRTP["Today import Energy"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">L1-N phase voltage of grid: </span>{inverter.lastRTP["L1-N phase voltage of grid"] && inverter.lastRTP["L1-N phase voltage of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">L2-N phase voltage of grid: </span>{inverter.lastRTP["L2-N phase voltage of grid"] && inverter.lastRTP["L2-N phase voltage of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">L3-N phase voltage of grid: </span>{inverter.lastRTP["L3-N phase voltage of grid"] && inverter.lastRTP["L3-N phase voltage of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">Today export Energy: </span>{inverter.lastRTP["Today export Energy"] && inverter.lastRTP["Today export Energy"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">L1 current of grid: </span>{inverter.lastRTP["L1 current of grid"] && inverter.lastRTP["L1 current of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">L2 current of grid: </span>{inverter.lastRTP["L2 current of grid"] && inverter.lastRTP["L2 current of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">L3 current of grid: </span>{inverter.lastRTP["L3 current of grid"] && inverter.lastRTP["L3 current of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">Accumulated energy of positive: </span>{inverter.lastRTP["Accumulated energy of positive"] && inverter.lastRTP["Accumulated energy of positive"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">Phase L1 watt of grid: </span>{inverter.lastRTP["Phase L1 watt of grid"] && inverter.lastRTP["Phase L1 watt of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">Phase L2 watt of grid: </span>{inverter.lastRTP["Phase L2 watt of grid"] && inverter.lastRTP["Phase L2 watt of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">Phase L3 watt of grid: </span>{inverter.lastRTP["Phase L3 watt of grid"] && inverter.lastRTP["Phase L3 watt of grid"].value} kWh</p>
|
|
<p><span className="font-semibold text-gray-400">Accumulated energy of negative: </span>{inverter.lastRTP["Accumulated energy of negative"] && inverter.lastRTP["Accumulated energy of negative"].value} kWh</p>
|
|
</div>
|
|
</div>
|
|
</Tab.Panel>
|
|
<Tab.Panel>Disabled</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default InverterViewPage
|