175 lines
7.1 KiB
TypeScript
175 lines
7.1 KiB
TypeScript
"use client";
|
|
import IconTrashLines from '@/components/icon/icon-trash-lines';
|
|
import PanelCodeHighlight from '@/components/panel-code-highlight';
|
|
import ComponentsTablesSimple from '@/components/tables/components-tables-simple';
|
|
import { formatUnixTimestamp } from '@/utils/helpers';
|
|
import Tippy from '@tippyjs/react';
|
|
import axios from 'axios';
|
|
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 = {}
|
|
|
|
const SungrowInverters = (props: Props) => {
|
|
const [inverters, setInverters] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [isMounted, setIsMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
const fetchData = async () => {
|
|
try {
|
|
const res = await axios.get("https://api-a.fomware.com.cn/asset/v1/list?type=2", {
|
|
headers: {
|
|
"Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
|
|
}
|
|
})
|
|
console.log("res", res.data.data.devices)
|
|
setInverters(res.data.data.devices)
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData()
|
|
}, [])
|
|
|
|
|
|
const chartConfigs: any = {
|
|
options: {
|
|
chart: {
|
|
height: 58,
|
|
type: 'line',
|
|
fontFamily: 'Nunito, sans-serif',
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
blur: 3,
|
|
color: '#009688',
|
|
opacity: 0.4,
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
},
|
|
colors: ['#009688'],
|
|
grid: {
|
|
padding: {
|
|
top: 5,
|
|
bottom: 5,
|
|
left: 5,
|
|
right: 5,
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
show: false,
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: () => {
|
|
return '';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
// inverter status 0: initial, 1: standby, 2: fault, 3: running, 5: offline, 9: shutdown, 10: unknown
|
|
|
|
return (
|
|
<div>
|
|
{loading ? <p>Loading...</p> : (
|
|
<PanelCodeHighlight title="Chint Inverters">
|
|
<div className="table-responsive mb-5">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Inverter Name</th>
|
|
<th>Site Name</th>
|
|
<th>Gateway SN</th>
|
|
<th>Inverter Status</th>
|
|
<th>Model</th>
|
|
<th>SN</th>
|
|
<th>Real Time Power</th>
|
|
<th>E-Today</th>
|
|
<th>WeekData</th>
|
|
<th>Created At</th>
|
|
<th>Updated At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{inverters.map((data) => (
|
|
<tr key={data.id}>
|
|
<td>
|
|
<div className="whitespace-nowrap"><Link href={`/chint/inverters/${data.name}`}>{data.name}</Link></div>
|
|
</td>
|
|
<td>
|
|
<div className="whitespace-nowrap">{data.siteName}</div>
|
|
</td>
|
|
<td>
|
|
<div>{data.gatewaySn}</div>
|
|
</td>
|
|
<td>
|
|
<div className={`whitespace-nowrap ${
|
|
data.status === 0 ? "text-gray-500" // Initial
|
|
: data.status === 1 ? "text-blue-500" // Standby
|
|
: data.status === 2 ? "text-red-500" // Fault
|
|
: data.status === 3 ? "text-green-500" // Running
|
|
: data.status === 5 ? "text-yellow-500" // Offline
|
|
: data.status === 9 ? "text-purple-500" // Shutdown
|
|
: "text-gray-400" // Unknown (default)
|
|
}`}>
|
|
{data.statusLabel}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>{data.model}</div>
|
|
</td>
|
|
<td>
|
|
<div>{data.sn}</div>
|
|
</td>
|
|
<td>
|
|
<div>{data.activePowerWithUnit}</div>
|
|
</td>
|
|
<td>
|
|
<div>{data.eTodayWithUnit}</div>
|
|
</td>
|
|
<td>
|
|
{isMounted && (
|
|
<ReactApexChart
|
|
series={[{ data: data.weekTrend.map((point: any) => point.y) }]}
|
|
options={{
|
|
...chartConfigs.options,
|
|
xaxis: { categories: data.weekTrend.map((point: any) => point.x) },
|
|
}}
|
|
type="line"
|
|
height={58}
|
|
width={'100%'}
|
|
/>
|
|
)} </td>
|
|
<td>{formatUnixTimestamp(data.createdAt)}</td>
|
|
<td>{formatUnixTimestamp(data.updatedAt)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</PanelCodeHighlight>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SungrowInverters
|