🚧 call inverter api

app/(defaults)/chint/inverters/[id]/page.tsx

@@ -8,21 +8,43 @@ 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()
-    console.log()
+    const [inverter, setInverter] = useState<any>({})
+
     useEffect(() => {
-        setIsMounted(true)
+        setIsMounted(true);
+        fetchData()
     }, [])
 
-    // https://api-a.fomware.com.cn/asset/v1/list?key=1105160823180001&type=2
+    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 && (
@@ -83,16 +105,17 @@ const InverterViewPage = (props: Props) => {
                                     </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">Model: </span>{inverter.model}</p>
-                                        <p><span className="font-semibold">SN:</span> 1105160823180001</p>
+                                        <p><span className="font-semibold">SN: </span>{inverter.sn}</p>
-                                        <p><span className="font-semibold">Total Energy:</span> 9.24 MWh</p>
+                                        <p><span className="font-semibold">Total Energy: </span>{inverter.eTotalWithUnit}</p>
-                                        <p><span className="font-semibold">Today Energy:</span> 35.65 kWh</p>
+                                        <p><span className="font-semibold">Today Energy: </span>{inverter.eTodayWithUnit}</p>
-                                        <p><span className="font-semibold">Reactive Power:</span> -226.9 var</p>
+                                        <p><span className="font-semibold">Reactive Power: </span>{inverter.lastRTP["Reactive Power"].value} var</p>
-                                        <p><span className="font-semibold">Active Power:</span> 5.552 kW</p>
+                                        <p><span className="font-semibold">Active Power: </span>{inverter.activePowerWithUnit}</p>
-                                        <p><span className="font-semibold">Inverter Mode:</span> OnGrid</p>
+                                        <p><span className="font-semibold">Inverter Mode: </span>{inverter.lastRTP["Inverter Mode"].value}</p>
-                                        <p><span className="font-semibold">Inner Temperature:</span> 53°C</p>
+                                        <p><span className="font-semibold">Inner Temperature: </span>{inverter.lastRTP["Inner Temperature"].value} °C</p>
-                                        <p><span className="font-semibold">Create Time:</span> 2024-06-05 12:05:41 +0800</p>
+                                        <p><span className="font-semibold">Create Time: </span>{inverter.createdAtStr}</p>
-                                        <p><span className="font-semibold">Modules:</span> Master: 011330, Deputy: BR0208</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>
@@ -132,7 +155,7 @@ const InverterViewPage = (props: Props) => {
         </PanelCodeHighlight>
 
 
-        <div className="panel pt-1 mt-">
+        <div className="panel pt-1 mt-3">
             {isMounted && (
                 <Tab.Group>
                     <Tab.List className="flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
@@ -231,6 +254,8 @@ const InverterViewPage = (props: Props) => {
                 </Tab.Group>
             )}
         </div>
+        </>
+        )}
 
         </>
     )

app/(defaults)/chint/inverters/page.tsx

@@ -15,9 +15,9 @@ const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false })
 type Props = {}
 
 const SungrowInverters = (props: Props) => {
-    const [inverters, setInverters] = useState<any[]>([]);
+    const [inverters, setInverters] = useState<any[]>([])
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(true)
-    const [isMounted, setIsMounted] = useState(false);
+    const [isMounted, setIsMounted] = useState(false)
 
     useEffect(() => {
         setIsMounted(true);