Battery view updated
This commit is contained in:
Noe
parent
39fc4ad331
commit
b5f8658300
|
|
@ -1,24 +1,19 @@
|
|||
{
|
||||
"installation": "installation/",
|
||||
"live": "live",
|
||||
"users": "/users/",
|
||||
"log": "log/",
|
||||
"installations": "/installations/",
|
||||
"groups": "/groups/",
|
||||
"group": "group/",
|
||||
"installation": "installation/",
|
||||
"login": "/login/",
|
||||
"forgotPassword": "/forgotPassword/",
|
||||
"folder": "folder/",
|
||||
"manageAccess": "manageAccess/",
|
||||
"user": "user/",
|
||||
"tree": "tree/",
|
||||
"list": "list/",
|
||||
"overview": "overview",
|
||||
"manage": "manage",
|
||||
"batteryview": "batteryview",
|
||||
"log": "log",
|
||||
"live": "live",
|
||||
"information": "information",
|
||||
"configuration": "configuration",
|
||||
"login": "/login/",
|
||||
"forgotPassword": "/forgotPassword/",
|
||||
"mainstats": "mainstats",
|
||||
"general": "general"
|
||||
"detailed_view": "detailed_view/"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
|
|
@ -23,6 +23,7 @@ import { FormattedMessage } from 'react-intl';
|
|||
import { I_S3Credentials } from '../../../interfaces/S3Types';
|
||||
import routes from '../../../Resources/routes.json';
|
||||
import MainStats from './MainStats';
|
||||
import DetailedBatteryView from './DetailedBatteryView';
|
||||
|
||||
interface BatteryViewProps {
|
||||
values: TopologyValues;
|
||||
|
|
@ -33,68 +34,30 @@ function BatteryView(props: BatteryViewProps) {
|
|||
if (props.values === null) {
|
||||
return null;
|
||||
}
|
||||
const currentPath = useLocation();
|
||||
const currentLocation = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentTab, setCurrentTab] = useState<string>(undefined);
|
||||
const numOfBatteries = props.values.batteryView.values[0].value
|
||||
.toString()
|
||||
.split(',').length;
|
||||
|
||||
const batteryData = [];
|
||||
let batteryId = 1;
|
||||
// Use a for loop to generate battery data
|
||||
for (let index = 1; index <= numOfBatteries * 7; index += 7) {
|
||||
const battery = {
|
||||
BatteryId: 'Battery ' + batteryId.toString(),
|
||||
FwVersion: props.values.batteryView.values[index].value,
|
||||
Power:
|
||||
Number(props.values.batteryView.values[index + 1].value).toFixed(2) +
|
||||
' ' +
|
||||
props.values.batteryView.values[index + 1].unit,
|
||||
Voltage:
|
||||
Number(props.values.batteryView.values[index + 2].value).toFixed(2) +
|
||||
' ' +
|
||||
props.values.batteryView.values[index + 2].unit,
|
||||
Soc:
|
||||
props.values.batteryView.values[index + 3].value +
|
||||
' ' +
|
||||
props.values.batteryView.values[index + 3].unit,
|
||||
AverageTemperature:
|
||||
props.values.batteryView.values[index + 4].value +
|
||||
' ' +
|
||||
props.values.batteryView.values[index + 4].unit,
|
||||
|
||||
Warnings: props.values.batteryView.values[index + 5].value,
|
||||
Alarms: props.values.batteryView.values[index + 6].value
|
||||
};
|
||||
batteryId++;
|
||||
batteryData.push(battery);
|
||||
}
|
||||
const numOfBatteries = props.values.batteryView.length;
|
||||
|
||||
const handleMainStatsButton = () => {
|
||||
navigate(routes.mainstats);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let path = currentPath.pathname.split('/');
|
||||
|
||||
setCurrentTab(path[path.length - 1]);
|
||||
}, [currentPath]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container maxWidth="xl">
|
||||
<Grid container>
|
||||
<Routes>
|
||||
<Route
|
||||
path={routes.mainstats}
|
||||
element={
|
||||
<MainStats s3Credentials={props.s3Credentials}></MainStats>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
{currentTab === 'batteryview' && (
|
||||
<Grid item xs={6} md={6}>
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
md={6}
|
||||
sx={{
|
||||
display:
|
||||
!currentLocation.pathname.includes('detailed_view') &&
|
||||
!currentLocation.pathname.includes('mainstats')
|
||||
? 'block'
|
||||
: 'none'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
|
|
@ -105,7 +68,7 @@ function BatteryView(props: BatteryViewProps) {
|
|||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="main_stats"
|
||||
id="battery_view"
|
||||
defaultMessage="Battery View"
|
||||
/>
|
||||
</Button>
|
||||
|
|
@ -116,7 +79,6 @@ function BatteryView(props: BatteryViewProps) {
|
|||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '20px',
|
||||
// backgroundColor: mainStatsData ? '#808080' : '#ffc04d',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
|
|
@ -125,13 +87,42 @@ function BatteryView(props: BatteryViewProps) {
|
|||
<FormattedMessage id="main_stats" defaultMessage="Main Stats" />
|
||||
</Button>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
|
||||
{currentTab === 'batteryview' && (
|
||||
<Grid container>
|
||||
<Routes>
|
||||
<Route
|
||||
path={routes.mainstats + '*'}
|
||||
element={
|
||||
<MainStats s3Credentials={props.s3Credentials}></MainStats>
|
||||
}
|
||||
/>
|
||||
{Array.from({ length: numOfBatteries }).map((_, i) => (
|
||||
<Route
|
||||
key={routes.detailed_view + i}
|
||||
path={routes.detailed_view + i}
|
||||
element={
|
||||
<DetailedBatteryView
|
||||
s3Credentials={props.s3Credentials}
|
||||
batteryData={props.values.batteryView[i]}
|
||||
></DetailedBatteryView>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Routes>
|
||||
</Grid>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px' }}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginBottom: '20px',
|
||||
display:
|
||||
!currentLocation.pathname.includes('detailed_view') &&
|
||||
!currentLocation.pathname.includes('mainstats')
|
||||
? 'block'
|
||||
: 'none'
|
||||
}}
|
||||
>
|
||||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
|
|
@ -147,7 +138,7 @@ function BatteryView(props: BatteryViewProps) {
|
|||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{batteryData.map((battery) => (
|
||||
{props.values.batteryView.map((battery) => (
|
||||
<TableRow
|
||||
key={battery.BatteryId}
|
||||
style={{
|
||||
|
|
@ -160,7 +151,15 @@ function BatteryView(props: BatteryViewProps) {
|
|||
align="center"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
{battery.BatteryId}
|
||||
<Link
|
||||
style={{ color: 'black' }}
|
||||
to={
|
||||
routes.detailed_view +
|
||||
(battery.BatteryId - 1).toString()
|
||||
}
|
||||
>
|
||||
{'Battery ' + battery.BatteryId}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
|
|
@ -168,7 +167,7 @@ function BatteryView(props: BatteryViewProps) {
|
|||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{battery.FwVersion}
|
||||
{battery.FwVersion.value}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
|
|
@ -176,7 +175,7 @@ function BatteryView(props: BatteryViewProps) {
|
|||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{battery.Power}
|
||||
{battery.Power.value + ' ' + battery.Power.unit}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
|
|
@ -184,40 +183,42 @@ function BatteryView(props: BatteryViewProps) {
|
|||
textAlign: 'center',
|
||||
|
||||
backgroundColor:
|
||||
battery.Voltage < 44 || battery.Voltage > 57
|
||||
battery.Voltage.value < 44 || battery.Voltage.value > 57
|
||||
? '#FF033E'
|
||||
: '#32CD32',
|
||||
color: battery.Voltage === '' ? 'white' : 'inherit'
|
||||
color: battery.Voltage.value === '' ? 'white' : 'inherit'
|
||||
}}
|
||||
>
|
||||
{battery.Voltage}
|
||||
{battery.Voltage.value + ' ' + battery.Voltage.unit}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
width: '10%',
|
||||
textAlign: 'center',
|
||||
backgroundColor:
|
||||
battery.Soc < 20
|
||||
battery.Soc.value < 20
|
||||
? '#FF033E'
|
||||
: battery.Soc < 50
|
||||
: battery.Soc.value < 50
|
||||
? '#ffbf00'
|
||||
: '#32CD32',
|
||||
color: battery.Soc === '' ? 'white' : 'inherit'
|
||||
color: battery.Soc.value === '' ? 'white' : 'inherit'
|
||||
}}
|
||||
>
|
||||
{battery.Soc}
|
||||
{battery.Soc.value + ' ' + battery.Soc.unit}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
width: '10%',
|
||||
textAlign: 'center',
|
||||
backgroundColor:
|
||||
battery.AverageTemperature > 270
|
||||
battery.AverageTemperature.value > 270
|
||||
? '#FF033E'
|
||||
: '#32CD32 '
|
||||
}}
|
||||
>
|
||||
{battery.AverageTemperature}
|
||||
{battery.AverageTemperature.value +
|
||||
' ' +
|
||||
battery.AverageTemperature.unit}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
|
|
@ -226,21 +227,22 @@ function BatteryView(props: BatteryViewProps) {
|
|||
textAlign: 'center',
|
||||
padding: '8px',
|
||||
fontWeight:
|
||||
battery.Warnings !== '' ? 'bold' : 'inherit',
|
||||
battery.Warnings.value !== '' ? 'bold' : 'inherit',
|
||||
backgroundColor:
|
||||
battery.Warnings === '' ? 'inherit' : '#ff9900',
|
||||
color: battery.Warnings != '' ? 'black' : 'inherit'
|
||||
battery.Warnings.value === '' ? 'inherit' : '#ff9900',
|
||||
color: battery.Warnings.value != '' ? 'black' : 'inherit'
|
||||
}}
|
||||
>
|
||||
{battery.Warnings === '' ? (
|
||||
{battery.Warnings.value === '' ? (
|
||||
'None'
|
||||
) : battery.Warnings.split(';').length > 1 ? (
|
||||
) : battery.Warnings.value.toString().split(';').length >
|
||||
1 ? (
|
||||
<Link
|
||||
style={{ color: 'black' }}
|
||||
to={
|
||||
currentPath.pathname.substring(
|
||||
currentLocation.pathname.substring(
|
||||
0,
|
||||
currentPath.pathname.lastIndexOf('/') + 1
|
||||
currentLocation.pathname.lastIndexOf('/') + 1
|
||||
) +
|
||||
routes.log +
|
||||
'?open=warning'
|
||||
|
|
@ -249,28 +251,30 @@ function BatteryView(props: BatteryViewProps) {
|
|||
Multiple Warnings
|
||||
</Link>
|
||||
) : (
|
||||
battery.Warnings
|
||||
battery.Warnings.value
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
width: '20%',
|
||||
textAlign: 'center',
|
||||
fontWeight: battery.Alarms !== '' ? 'bold' : 'inherit',
|
||||
fontWeight:
|
||||
battery.Alarms.value !== '' ? 'bold' : 'inherit',
|
||||
backgroundColor:
|
||||
battery.Alarms === '' ? 'inherit' : '#FF033E',
|
||||
color: battery.Alarms != '' ? 'black' : 'inherit'
|
||||
battery.Alarms.value === '' ? 'inherit' : '#FF033E',
|
||||
color: battery.Alarms.value != '' ? 'black' : 'inherit'
|
||||
}}
|
||||
>
|
||||
{battery.Alarms === '' ? (
|
||||
{battery.Alarms.value === '' ? (
|
||||
'None'
|
||||
) : battery.Alarms.split(';').length > 1 ? (
|
||||
) : battery.Alarms.value.toString().split(';').length >
|
||||
1 ? (
|
||||
<Link
|
||||
style={{ color: 'black' }}
|
||||
to={
|
||||
currentPath.pathname.substring(
|
||||
currentLocation.pathname.substring(
|
||||
0,
|
||||
currentPath.pathname.lastIndexOf('/') + 1
|
||||
currentLocation.pathname.lastIndexOf('/') + 1
|
||||
) +
|
||||
routes.log +
|
||||
'?open=error'
|
||||
|
|
@ -279,7 +283,7 @@ function BatteryView(props: BatteryViewProps) {
|
|||
Multiple Alarms
|
||||
</Link>
|
||||
) : (
|
||||
battery.Alarms
|
||||
battery.Alarms.value
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -287,7 +291,6 @@ function BatteryView(props: BatteryViewProps) {
|
|||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,971 @@
|
|||
import React from 'react';
|
||||
import { I_S3Credentials } from '../../../interfaces/S3Types';
|
||||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableRow
|
||||
} from '@mui/material';
|
||||
import { Battery } from '../Log/graph.util';
|
||||
import Button from '@mui/material/Button';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import routes from '../../../Resources/routes.json';
|
||||
|
||||
interface DetailedBatteryViewProps {
|
||||
s3Credentials: I_S3Credentials;
|
||||
batteryData: Battery;
|
||||
}
|
||||
|
||||
function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||
if (props.batteryData === null) {
|
||||
return null;
|
||||
}
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleBatteryViewButton = () => {
|
||||
navigate(location.pathname.split('/').slice(0, -2).join('/'));
|
||||
};
|
||||
const handleMainStatsButton = () => {
|
||||
navigate(
|
||||
location.pathname.split('/').slice(0, -2).join('/') +
|
||||
'/' +
|
||||
routes.mainstats
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleBatteryViewButton}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="main_stats" defaultMessage="Battery View" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleMainStatsButton}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '20px',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="main_stats" defaultMessage="Main Stats" />
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item md={2} xs={2}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Voltage
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.Voltage.value +
|
||||
' ' +
|
||||
props.batteryData.Voltage.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Current
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.Current.value +
|
||||
' ' +
|
||||
props.batteryData.Current.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Power
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.Power.value +
|
||||
' ' +
|
||||
props.batteryData.Power.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Bus Current
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.BusCurrent.value +
|
||||
' ' +
|
||||
props.batteryData.BusCurrent.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Cells Current
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.CellsCurrent.value +
|
||||
' ' +
|
||||
props.batteryData.CellsCurrent.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Heating Current
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.HeatingCurrent.value +
|
||||
' ' +
|
||||
props.batteryData.HeatingCurrent.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Heating Power
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.HeatingPower.value +
|
||||
' ' +
|
||||
props.batteryData.HeatingPower.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Soc
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.Soc.value +
|
||||
' ' +
|
||||
props.batteryData.Soc.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
SOCAh
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.SOCAh.value +
|
||||
' ' +
|
||||
props.batteryData.SOCAh.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={2.9} xs={2.9}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Heating
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.HeatingTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.HeatingTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Board Temperature
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.BoardTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.BoardTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Center Cells Temperature
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.AverageTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.AverageTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Left Cells Temperature
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.LeftCellsTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.LeftCellsTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Right Cells Temperature
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.RightCellsTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.RightCellsTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Average Temperature
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.AverageTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.AverageTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
State
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.StateTemperature.value +
|
||||
' ' +
|
||||
props.batteryData.StateTemperature.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={2.7} xs={2.7}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Connected To Dc Bus
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.ConnectedToDcBus.value +
|
||||
' ' +
|
||||
props.batteryData.ConnectedToDcBus.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Alarm Out Active
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.AlarmOutActive.value +
|
||||
' ' +
|
||||
props.batteryData.AlarmOutActive.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Internal Fan Active
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.InternalFanActive.value +
|
||||
' ' +
|
||||
props.batteryData.InternalFanActive.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Volt Measurement Allowed
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.VoltMeasurementAllowed.value +
|
||||
' ' +
|
||||
props.batteryData.VoltMeasurementAllowed.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Aux Relay Bus
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.AuxRelayBus.value +
|
||||
' ' +
|
||||
props.batteryData.AuxRelayBus.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Remote State Active
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.RemoteStateActive.value +
|
||||
' ' +
|
||||
props.batteryData.RemoteStateActive.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
RiscActive
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.RiscActive.value +
|
||||
' ' +
|
||||
props.batteryData.RiscActive.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={2.9} xs={2.9}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Eoc
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.Eoc.value +
|
||||
' ' +
|
||||
props.batteryData.Eoc.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Serial Number
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.SerialNumber.value +
|
||||
' ' +
|
||||
props.batteryData.SerialNumber.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Firmware Version
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.FwVersion.value +
|
||||
' ' +
|
||||
props.batteryData.FwVersion.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Time Since TOC
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.TimeSinceTOC.value +
|
||||
' ' +
|
||||
props.batteryData.TimeSinceTOC.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Calibration Charge Requested
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.CalibrationChargeRequested.value +
|
||||
' ' +
|
||||
props.batteryData.CalibrationChargeRequested.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Max Charge Power
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.MaxChargePower.value +
|
||||
' ' +
|
||||
props.batteryData.MaxChargePower.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Max Discharge Power
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.MaxDischargePower.value +
|
||||
' ' +
|
||||
props.batteryData.MaxDischargePower.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={1.5} xs={1.5}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Blue Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.BlueLeds.value === 'On'
|
||||
? '#00ccff'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Green Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.GreenLeds.value === 'On'
|
||||
? 'green'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Red Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.RedLeds.value === 'On'
|
||||
? 'red'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Amber Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.AmberLeds.value === 'On'
|
||||
? 'orange'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailedBatteryView;
|
||||
|
|
@ -384,7 +384,6 @@ function MainStats(props: MainStatsProps) {
|
|||
|
||||
{!loading && (
|
||||
<>
|
||||
{' '}
|
||||
<Grid item xs={6} md={6}>
|
||||
<Button
|
||||
variant="contained"
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ function Configuration(props: ConfigurationProps) {
|
|||
const forcedCalibrationChargeOptions = ['No', 'UntilEoc', 'Yes'];
|
||||
|
||||
const [formValues, setFormValues] = useState<ConfigurationValues>({
|
||||
minimumSoC: props.values.minimumSoC.values[0].value,
|
||||
gridSetPoint: (props.values.gridSetPoint.values[0].value as number) / 1000,
|
||||
minimumSoC: props.values.minimumSoC[0].value,
|
||||
gridSetPoint: (props.values.gridSetPoint[0].value as number) / 1000,
|
||||
forceCalibrationCharge: forcedCalibrationChargeOptions.indexOf(
|
||||
props.values.calibrationChargeForced.values[0].value.toString()
|
||||
props.values.calibrationChargeForced[0].value.toString()
|
||||
)
|
||||
});
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ function Configuration(props: ConfigurationProps) {
|
|||
selectedForcedCalibrationChargeOption,
|
||||
setSelectedForcedCalibrationChargeOption
|
||||
] = useState<string>(
|
||||
props.values.calibrationChargeForced.values[0].value.toString()
|
||||
props.values.calibrationChargeForced[0].value.toString()
|
||||
);
|
||||
//const forcedCalibrationChargeOptions = ['No', 'UntilEoc', 'Yes'];
|
||||
|
||||
|
|
@ -242,8 +242,7 @@ function Configuration(props: ConfigurationProps) {
|
|||
/>
|
||||
}
|
||||
value={
|
||||
(props.values.installedDcDcPower.values[0]
|
||||
.value as number) * 10
|
||||
(props.values.installedDcDcPower[0].value as number) * 10
|
||||
}
|
||||
fullWidth
|
||||
/>
|
||||
|
|
@ -257,10 +256,9 @@ function Configuration(props: ConfigurationProps) {
|
|||
/>
|
||||
}
|
||||
value={
|
||||
(props.values.maximumDischargePower.values[0]
|
||||
.value as number) *
|
||||
(props.values.maximumDischargePower[0].value as number) *
|
||||
48 *
|
||||
(props.values.DcDcNum.values[0].value as number)
|
||||
(props.values.DcDcNum[0].value as number)
|
||||
}
|
||||
fullWidth
|
||||
/>
|
||||
|
|
@ -273,7 +271,7 @@ function Configuration(props: ConfigurationProps) {
|
|||
defaultMessage="Number of Batteries"
|
||||
/>
|
||||
}
|
||||
value={props.values.battery.values.length - 4}
|
||||
value={props.values.battery.length - 4}
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ import Overview from '../Overview/overview';
|
|||
import Configuration from '../Configuration/Configuration';
|
||||
import { fetchData } from 'src/content/dashboards/Installations/fetchData';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
import BatteryView from '../BatteryView/BatteryView';
|
||||
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
|
||||
import routes from '../../../Resources/routes.json';
|
||||
import Information from '../Information/Information';
|
||||
import BatteryView from '../BatteryView/BatteryView';
|
||||
|
||||
interface singleInstallationProps {
|
||||
current_installation?: I_Installation;
|
||||
|
|
@ -31,7 +31,7 @@ interface singleInstallationProps {
|
|||
function Installation(props: singleInstallationProps) {
|
||||
const context = useContext(UserContext);
|
||||
const { currentUser } = context;
|
||||
const location = useLocation();
|
||||
const location = useLocation().pathname;
|
||||
const [errorLoadingS3Data, setErrorLoadingS3Data] = useState(false);
|
||||
const webSocketsContext = useContext(WebSocketContext);
|
||||
const { getStatus } = webSocketsContext;
|
||||
|
|
@ -90,7 +90,7 @@ function Installation(props: singleInstallationProps) {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
let path = location.pathname.split('/');
|
||||
let path = location.split('/');
|
||||
|
||||
setCurrentTab(path[path.length - 1]);
|
||||
}, [location]);
|
||||
|
|
@ -99,26 +99,32 @@ function Installation(props: singleInstallationProps) {
|
|||
if (
|
||||
currentTab == 'live' ||
|
||||
currentTab == 'configuration' ||
|
||||
currentTab == 'batteryview'
|
||||
location.includes('batteryview')
|
||||
) {
|
||||
var interval;
|
||||
let interval;
|
||||
|
||||
if (currentTab == 'live' || currentTab == 'batteryview') {
|
||||
if (
|
||||
currentTab == 'live' ||
|
||||
(location.includes('batteryview') && !location.includes('mainstats'))
|
||||
) {
|
||||
fetchDataPeriodically();
|
||||
interval = setInterval(fetchDataPeriodically, 2000);
|
||||
}
|
||||
if (currentTab == 'configuration') {
|
||||
if (currentTab == 'configuration' || location.includes('mainstats')) {
|
||||
fetchDataOnlyOneTime();
|
||||
}
|
||||
|
||||
// Cleanup function to cancel interval and update isMounted when unmounted
|
||||
return () => {
|
||||
if (currentTab == 'live' || currentTab == 'batteryview') {
|
||||
if (
|
||||
currentTab == 'live' ||
|
||||
(location.includes('batteryview') && !location.includes('mainstats'))
|
||||
) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [currentTab, location.pathname]);
|
||||
}, [currentTab, location]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -178,7 +184,7 @@ function Installation(props: singleInstallationProps) {
|
|||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
{values.mode.values[0].value}
|
||||
{values.mode[0].value}
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -274,8 +280,7 @@ function Installation(props: singleInstallationProps) {
|
|||
s3Credentials={s3Credentials}
|
||||
></BatteryView>
|
||||
}
|
||||
/>
|
||||
|
||||
></Route>
|
||||
<Route
|
||||
path={routes.overview}
|
||||
element={<Overview s3Credentials={s3Credentials}></Overview>}
|
||||
|
|
|
|||
|
|
@ -43,11 +43,8 @@ function InstallationTabs() {
|
|||
} else if (path[path.length - 2] === 'tree') {
|
||||
setCurrentTab('tree');
|
||||
} else {
|
||||
setCurrentTab(
|
||||
tabList.includes(path[path.length - 1])
|
||||
? path[path.length - 1]
|
||||
: undefined
|
||||
);
|
||||
//Even if we are located at path: /batteryview/mainstats, we want the BatteryView tab to be bold
|
||||
setCurrentTab(path.find((pathElement) => tabList.includes(pathElement)));
|
||||
}
|
||||
}, [location]);
|
||||
|
||||
|
|
@ -140,10 +137,6 @@ function InstallationTabs() {
|
|||
label: <FormattedMessage id="overview" defaultMessage="Overview" />
|
||||
},
|
||||
|
||||
{
|
||||
value: 'log',
|
||||
label: <FormattedMessage id="log" defaultMessage="Log" />
|
||||
},
|
||||
{
|
||||
value: 'information',
|
||||
label: (
|
||||
|
|
@ -247,10 +240,7 @@ function InstallationTabs() {
|
|||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
value: 'log',
|
||||
label: <FormattedMessage id="log" defaultMessage="Log" />
|
||||
},
|
||||
|
||||
{
|
||||
value: 'information',
|
||||
label: (
|
||||
|
|
|
|||
|
|
@ -28,59 +28,192 @@ export interface I_BoxDataValue {
|
|||
value: string | number;
|
||||
}
|
||||
|
||||
export type BoxData = {
|
||||
label: string;
|
||||
values: I_BoxDataValue[];
|
||||
};
|
||||
|
||||
export type ConfigurationValues = {
|
||||
minimumSoC: string | number;
|
||||
gridSetPoint: number;
|
||||
forceCalibrationCharge: number;
|
||||
};
|
||||
|
||||
export interface Battery {
|
||||
BatteryId: number;
|
||||
FwVersion: I_BoxDataValue;
|
||||
Power: I_BoxDataValue;
|
||||
Voltage: I_BoxDataValue;
|
||||
Soc: I_BoxDataValue;
|
||||
AverageTemperature: I_BoxDataValue;
|
||||
Warnings: I_BoxDataValue;
|
||||
Alarms: I_BoxDataValue;
|
||||
Current: I_BoxDataValue;
|
||||
BusCurrent: I_BoxDataValue;
|
||||
CellsCurrent: I_BoxDataValue;
|
||||
HeatingCurrent: I_BoxDataValue;
|
||||
HeatingPower: I_BoxDataValue;
|
||||
SOCAh: I_BoxDataValue;
|
||||
BlueLeds: I_BoxDataValue;
|
||||
RedLeds: I_BoxDataValue;
|
||||
GreenLeds: I_BoxDataValue;
|
||||
AmberLeds: I_BoxDataValue;
|
||||
HeatingTemperature: I_BoxDataValue;
|
||||
BoardTemperature: I_BoxDataValue;
|
||||
LeftCellsTemperature: I_BoxDataValue;
|
||||
RightCellsTemperature: I_BoxDataValue;
|
||||
StateTemperature: I_BoxDataValue;
|
||||
String1Active: I_BoxDataValue;
|
||||
String2Active: I_BoxDataValue;
|
||||
String3Active: I_BoxDataValue;
|
||||
String4Active: I_BoxDataValue;
|
||||
String5Active: I_BoxDataValue;
|
||||
ConnectedToDcBus: I_BoxDataValue;
|
||||
AlarmOutActive: I_BoxDataValue;
|
||||
InternalFanActive: I_BoxDataValue;
|
||||
VoltMeasurementAllowed: I_BoxDataValue;
|
||||
AuxRelayBus: I_BoxDataValue;
|
||||
RemoteStateActive: I_BoxDataValue;
|
||||
RiscActive: I_BoxDataValue;
|
||||
Eoc: I_BoxDataValue;
|
||||
SerialNumber: I_BoxDataValue;
|
||||
TimeSinceTOC: I_BoxDataValue;
|
||||
CalibrationChargeRequested: I_BoxDataValue;
|
||||
MaxChargePower: I_BoxDataValue;
|
||||
MaxDischargePower: I_BoxDataValue;
|
||||
}
|
||||
|
||||
const BatteryKeys = [
|
||||
'BatteryId',
|
||||
'FwVersion',
|
||||
'Power',
|
||||
'Voltage',
|
||||
'Soc',
|
||||
'AverageTemperature',
|
||||
'Warnings',
|
||||
'Alarms',
|
||||
'Current',
|
||||
'BusCurrent',
|
||||
'CellsCurrent',
|
||||
'HeatingCurrent',
|
||||
'HeatingPower',
|
||||
'SOCAh',
|
||||
'BlueLeds',
|
||||
'RedLeds',
|
||||
'GreenLeds',
|
||||
'AmberLeds',
|
||||
'HeatingTemperature',
|
||||
'BoardTemperature',
|
||||
'LeftCellsTemperature',
|
||||
'RightCellsTemperature',
|
||||
'StateTemperature',
|
||||
'String1Active',
|
||||
'String2Active',
|
||||
'String3Active',
|
||||
'String4Active',
|
||||
'String5Active',
|
||||
'ConnectedToDcBus',
|
||||
'AlarmOutActive',
|
||||
'InternalFanActive',
|
||||
'VoltMeasurementAllowed',
|
||||
'AuxRelayBus',
|
||||
'RemoteStateActive',
|
||||
'RiscActive',
|
||||
'Eoc',
|
||||
'SerialNumber',
|
||||
'TimeSinceTOC',
|
||||
'CalibrationChargeRequested',
|
||||
'MaxChargePower',
|
||||
'MaxDischargePower'
|
||||
];
|
||||
|
||||
export type TopologyValues = {
|
||||
gridBox: BoxData;
|
||||
pvOnAcGridBox: BoxData;
|
||||
loadOnAcGridBox: BoxData;
|
||||
pvOnIslandBusBox: BoxData;
|
||||
loadOnIslandBusBox: BoxData;
|
||||
pvOnDcBox: BoxData;
|
||||
loadOnDcBox: BoxData;
|
||||
batteryBox: BoxData;
|
||||
gridBox: I_BoxDataValue[];
|
||||
pvOnAcGridBox: I_BoxDataValue[];
|
||||
loadOnAcGridBox: I_BoxDataValue[];
|
||||
pvOnIslandBusBox: I_BoxDataValue[];
|
||||
loadOnIslandBusBox: I_BoxDataValue[];
|
||||
pvOnDcBox: I_BoxDataValue[];
|
||||
loadOnDcBox: I_BoxDataValue[];
|
||||
batteryBox: I_BoxDataValue[];
|
||||
|
||||
grid: BoxData;
|
||||
gridToAcInConnection: BoxData;
|
||||
gridBus: BoxData;
|
||||
islandBus: BoxData;
|
||||
dcBus: BoxData;
|
||||
dcBusToDcDcConnection: BoxData;
|
||||
dcDCToBatteryConnection: BoxData;
|
||||
battery: BoxData;
|
||||
dcBusToLoadOnDcConnection: BoxData;
|
||||
islandBusToLoadOnIslandBusConnection: BoxData;
|
||||
gridBusToPvOnGridbusConnection: BoxData;
|
||||
gridBusToLoadOnGridBusConnection: BoxData;
|
||||
inverter: BoxData;
|
||||
dcDc: BoxData;
|
||||
islandBusToInverter: BoxData;
|
||||
inverterToDcBus: BoxData;
|
||||
gridBusToIslandBusConnection: BoxData;
|
||||
pvOnDcBusToDcBusConnection: BoxData;
|
||||
pvOnIslandBusToIslandBusConnection: BoxData;
|
||||
minimumSoC: BoxData;
|
||||
installedDcDcPower: BoxData;
|
||||
gridSetPoint: BoxData;
|
||||
maximumDischargePower: BoxData;
|
||||
DcDcNum: BoxData;
|
||||
calibrationChargeForced: BoxData;
|
||||
mode: BoxData;
|
||||
grid: I_BoxDataValue[];
|
||||
gridToAcInConnection: I_BoxDataValue[];
|
||||
gridBus: I_BoxDataValue[];
|
||||
islandBus: I_BoxDataValue[];
|
||||
dcBus: I_BoxDataValue[];
|
||||
dcBusToDcDcConnection: I_BoxDataValue[];
|
||||
dcDCToBatteryConnection: I_BoxDataValue[];
|
||||
battery: I_BoxDataValue[];
|
||||
dcBusToLoadOnDcConnection: I_BoxDataValue[];
|
||||
islandBusToLoadOnIslandBusConnection: I_BoxDataValue[];
|
||||
gridBusToPvOnGridbusConnection: I_BoxDataValue[];
|
||||
gridBusToLoadOnGridBusConnection: I_BoxDataValue[];
|
||||
inverter: I_BoxDataValue[];
|
||||
dcDc: I_BoxDataValue[];
|
||||
islandBusToInverter: I_BoxDataValue[];
|
||||
inverterToDcBus: I_BoxDataValue[];
|
||||
gridBusToIslandBusConnection: I_BoxDataValue[];
|
||||
pvOnDcBusToDcBusConnection: I_BoxDataValue[];
|
||||
pvOnIslandBusToIslandBusConnection: I_BoxDataValue[];
|
||||
minimumSoC: I_BoxDataValue[];
|
||||
installedDcDcPower: I_BoxDataValue[];
|
||||
gridSetPoint: I_BoxDataValue[];
|
||||
maximumDischargePower: I_BoxDataValue[];
|
||||
DcDcNum: I_BoxDataValue[];
|
||||
calibrationChargeForced: I_BoxDataValue[];
|
||||
mode: I_BoxDataValue[];
|
||||
|
||||
batteryView: BoxData;
|
||||
batteryView: Battery[];
|
||||
};
|
||||
|
||||
type TopologyPaths = { [key in keyof TopologyValues]: string[] };
|
||||
|
||||
const batteryIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
const batteryPaths = [
|
||||
'/Battery/Devices/%id%/FwVersion',
|
||||
'/Battery/Devices/%id%/Dc/Power',
|
||||
'/Battery/Devices/%id%/Dc/Voltage',
|
||||
'/Battery/Devices/%id%/Soc',
|
||||
'/Battery/Devices/%id%/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/%id%/Warnings',
|
||||
'/Battery/Devices/%id%/Alarms',
|
||||
|
||||
'/Battery/Devices/%id%/Dc/Current',
|
||||
'/Battery/Devices/%id%/BusCurrent',
|
||||
'/Battery/Devices/%id%/CellsCurrent',
|
||||
'/Battery/Devices/%id%/HeatingCurrent',
|
||||
'/Battery/Devices/%id%/HeatingPower',
|
||||
'/Battery/Devices/%id%/SOCAh',
|
||||
|
||||
'/Battery/Devices/%id%/Leds/Blue',
|
||||
'/Battery/Devices/%id%/Leds/Red',
|
||||
'/Battery/Devices/%id%/Leds/Green',
|
||||
'/Battery/Devices/%id%/Leds/Amber',
|
||||
|
||||
'/Battery/Devices/%id%/Temperatures/Heating',
|
||||
'/Battery/Devices/%id%/Temperatures/Board',
|
||||
'/Battery/Devices/%id%/Temperatures/Cells/Left',
|
||||
'/Battery/Devices/%id%/Temperatures/Cells/Right',
|
||||
'/Battery/Devices/%id%/Temperatures/State',
|
||||
|
||||
'/Battery/Devices/%id%/BatteryStrings/String1Active',
|
||||
'/Battery/Devices/%id%/BatteryStrings/String2Active',
|
||||
'/Battery/Devices/%id%/BatteryStrings/String3Active',
|
||||
'/Battery/Devices/%id%/BatteryStrings/String4Active',
|
||||
'/Battery/Devices/%id%/BatteryStrings/String5Active',
|
||||
|
||||
'/Battery/Devices/%id%/IoStatus/ConnectedToDcBus',
|
||||
'/Battery/Devices/%id%/IoStatus/AlarmOutActive',
|
||||
'/Battery/Devices/%id%/IoStatus/InternalFanActive',
|
||||
'/Battery/Devices/%id%/IoStatus/VoltMeasurementAllowed',
|
||||
'/Battery/Devices/%id%/IoStatus/AuxRelayBus',
|
||||
'/Battery/Devices/%id%/IoStatus/RemoteStateActive',
|
||||
'/Battery/Devices/%id%/IoStatus/RiscActive',
|
||||
|
||||
'/Battery/Devices/%id%/Eoc',
|
||||
'/Battery/Devices/%id%/SerialNumber',
|
||||
'/Battery/Devices/%id%/TimeSinceTOC',
|
||||
'/Battery/Devices/%id%/CalibrationChargeRequested',
|
||||
'/Battery/Devices/%id%/MaxChargePower',
|
||||
'/Battery/Devices/%id%/MaxDischargePower'
|
||||
];
|
||||
|
||||
export const topologyPaths: TopologyPaths = {
|
||||
gridBox: ['/Config/Devices/GridMeterIp/DeviceState'],
|
||||
pvOnAcGridBox: ['/Config/Devices/PvOnAcGrid/DeviceState'],
|
||||
|
|
@ -150,88 +283,9 @@ export const topologyPaths: TopologyPaths = {
|
|||
'/Battery/Devices/10/Dc/Voltage'
|
||||
],
|
||||
|
||||
batteryView: [
|
||||
'/Config/Devices/BatteryNodes',
|
||||
'/Battery/Devices/1/FwVersion',
|
||||
'/Battery/Devices/1/Dc/Power',
|
||||
'/Battery/Devices/1/Dc/Voltage',
|
||||
'/Battery/Devices/1/Soc',
|
||||
'/Battery/Devices/1/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/1/Warnings',
|
||||
'/Battery/Devices/1/Alarms',
|
||||
|
||||
'/Battery/Devices/2/FwVersion',
|
||||
'/Battery/Devices/2/Dc/Power',
|
||||
'/Battery/Devices/2/Dc/Voltage',
|
||||
'/Battery/Devices/2/Soc',
|
||||
'/Battery/Devices/2/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/2/Warnings',
|
||||
'/Battery/Devices/2/Alarms',
|
||||
|
||||
'/Battery/Devices/3/FwVersion',
|
||||
'/Battery/Devices/3/Dc/Power',
|
||||
'/Battery/Devices/3/Dc/Voltage',
|
||||
'/Battery/Devices/3/Soc',
|
||||
'/Battery/Devices/3/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/3/Warnings',
|
||||
'/Battery/Devices/3/Alarms',
|
||||
|
||||
'/Battery/Devices/4/FwVersion',
|
||||
'/Battery/Devices/4/Dc/Power',
|
||||
'/Battery/Devices/4/Dc/Voltage',
|
||||
'/Battery/Devices/4/Soc',
|
||||
'/Battery/Devices/4/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/4/Warnings',
|
||||
'/Battery/Devices/4/Alarms',
|
||||
|
||||
'/Battery/Devices/5/FwVersion',
|
||||
'/Battery/Devices/5/Dc/Power',
|
||||
'/Battery/Devices/5/Dc/Voltage',
|
||||
'/Battery/Devices/5/Soc',
|
||||
'/Battery/Devices/5/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/5/Warnings',
|
||||
'/Battery/Devices/5/Alarms',
|
||||
|
||||
'/Battery/Devices/6/FwVersion',
|
||||
'/Battery/Devices/6/Dc/Power',
|
||||
'/Battery/Devices/6/Dc/Voltage',
|
||||
'/Battery/Devices/6/Soc',
|
||||
'/Battery/Devices/6/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/6/Warnings',
|
||||
'/Battery/Devices/6/Alarms',
|
||||
|
||||
'/Battery/Devices/7/FwVersion',
|
||||
'/Battery/Devices/7/Dc/Power',
|
||||
'/Battery/Devices/7/Dc/Voltage',
|
||||
'/Battery/Devices/7/Soc',
|
||||
'/Battery/Devices/7/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/7/Warnings',
|
||||
'/Battery/Devices/7/Alarms',
|
||||
|
||||
'/Battery/Devices/8/FwVersion',
|
||||
'/Battery/Devices/8/Dc/Power',
|
||||
'/Battery/Devices/8/Dc/Voltage',
|
||||
'/Battery/Devices/8/Soc',
|
||||
'/Battery/Devices/8/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/8/Warnings',
|
||||
'/Battery/Devices/8/Alarms',
|
||||
|
||||
'/Battery/Devices/9/FwVersion',
|
||||
'/Battery/Devices/9/Dc/Power',
|
||||
'/Battery/Devices/9/Dc/Voltage',
|
||||
'/Battery/Devices/9/Soc',
|
||||
'/Battery/Devices/9/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/9/Warnings',
|
||||
'/Battery/Devices/9/Alarms',
|
||||
|
||||
'/Battery/Devices/10/FwVersion',
|
||||
'/Battery/Devices/10/Dc/Power',
|
||||
'/Battery/Devices/10/Dc/Voltage',
|
||||
'/Battery/Devices/10/Soc',
|
||||
'/Battery/Devices/10/Temperatures/Cells/Average',
|
||||
'/Battery/Devices/10/Warnings',
|
||||
'/Battery/Devices/10/Alarms'
|
||||
],
|
||||
batteryView: batteryIds.flatMap((id) =>
|
||||
batteryPaths.map((path) => path.replace('%id%', id.toString()))
|
||||
),
|
||||
|
||||
minimumSoC: ['/Config/MinSoc'],
|
||||
installedDcDcPower: ['/DcDc/SystemControl/NumberOfConnectedSlaves'],
|
||||
|
|
@ -251,6 +305,44 @@ export const extractValues = (
|
|||
const paths = topologyPaths[topologyKey];
|
||||
let topologyValues: { unit: string; value: string | number }[] = [];
|
||||
|
||||
if (topologyKey === 'batteryView') {
|
||||
extractedValues[topologyKey] = [];
|
||||
const numOfBatteries = timeSeriesData.value[
|
||||
'/Config/Devices/BatteryNodes'
|
||||
].value
|
||||
.toString()
|
||||
.split(',').length;
|
||||
|
||||
let battery_id = 1;
|
||||
let pathIndex = 0;
|
||||
|
||||
while (pathIndex < paths.length) {
|
||||
let battery = {};
|
||||
let existingKeys = 0;
|
||||
battery[BatteryKeys[0]] = battery_id;
|
||||
for (let i = 1; i < BatteryKeys.length; i++) {
|
||||
const path = paths[pathIndex];
|
||||
if (timeSeriesData.value.hasOwnProperty(path)) {
|
||||
existingKeys++;
|
||||
|
||||
battery[BatteryKeys[i]] = {
|
||||
unit: timeSeriesData.value[path].unit.includes('~')
|
||||
? timeSeriesData.value[path].unit.replace('~', '')
|
||||
: timeSeriesData.value[path].unit,
|
||||
value:
|
||||
typeof timeSeriesData.value[path].value === 'string'
|
||||
? timeSeriesData.value[path].value
|
||||
: Number(timeSeriesData.value[path].value).toFixed(1)
|
||||
};
|
||||
}
|
||||
pathIndex++;
|
||||
}
|
||||
battery_id++;
|
||||
if (existingKeys > 0) {
|
||||
extractedValues[topologyKey].push(battery as Battery);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Check if any of the specified paths exist in the dataRecord
|
||||
for (const path of paths) {
|
||||
if (timeSeriesData.value.hasOwnProperty(path)) {
|
||||
|
|
@ -263,27 +355,26 @@ export const extractValues = (
|
|||
}
|
||||
}
|
||||
if (topologyValues.length > 0) {
|
||||
extractedValues[topologyKey] = {
|
||||
label: topologyPaths[topologyKey as keyof TopologyValues][0]
|
||||
.split('/')
|
||||
.pop(),
|
||||
values: topologyValues
|
||||
};
|
||||
extractedValues[topologyKey] = topologyValues;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return extractedValues;
|
||||
};
|
||||
|
||||
export const getHighestConnectionValue = (values: TopologyValues) =>
|
||||
Object.keys(values)
|
||||
export const getHighestConnectionValue = (values: TopologyValues) => {
|
||||
return Object.keys(values)
|
||||
.filter((value) => value.includes('Connection'))
|
||||
.reduce((acc, curr) => {
|
||||
const value = Math.abs(
|
||||
values[curr as keyof TopologyValues].values[0].value as number
|
||||
);
|
||||
let topologyValue = values[
|
||||
curr as keyof TopologyValues
|
||||
][0] as I_BoxDataValue;
|
||||
|
||||
const value = Math.abs(topologyValue.value as number);
|
||||
return value > acc ? value : acc;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
export const getAmount = (
|
||||
highestConnectionValue: number,
|
||||
|
|
|
|||
|
|
@ -75,8 +75,7 @@ function Topology(props: TopologyProps) {
|
|||
centerBox={{
|
||||
title: 'Grid',
|
||||
data: props.values.grid,
|
||||
connected:
|
||||
props.values.gridBox.values[0].value.toString() != 'Disabled'
|
||||
connected: props.values.gridBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
centerConnection={{
|
||||
orientation: 'horizontal',
|
||||
|
|
@ -84,7 +83,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.gridToAcInConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.gridToAcInConnection.values
|
||||
props.values.gridToAcInConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -97,8 +96,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'Pv Inverter',
|
||||
data: props.values.gridBusToPvOnGridbusConnection,
|
||||
connected:
|
||||
props.values.pvOnAcGridBox.values[0].value.toString() !=
|
||||
'Disabled'
|
||||
props.values.pvOnAcGridBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
topConnection={{
|
||||
orientation: 'vertical',
|
||||
|
|
@ -107,7 +105,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.gridBusToPvOnGridbusConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.gridBusToPvOnGridbusConnection.values
|
||||
props.values.gridBusToPvOnGridbusConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -123,7 +121,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.gridBusToIslandBusConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.gridBusToIslandBusConnection.values
|
||||
props.values.gridBusToIslandBusConnection
|
||||
)
|
||||
: 0,
|
||||
data: props.values.gridBusToIslandBusConnection,
|
||||
|
|
@ -133,8 +131,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'AC Loads',
|
||||
data: props.values.gridBusToLoadOnGridBusConnection,
|
||||
connected:
|
||||
props.values.loadOnAcGridBox.values[0].value.toString() !=
|
||||
'Disabled'
|
||||
props.values.loadOnAcGridBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
bottomConnection={{
|
||||
orientation: 'vertical',
|
||||
|
|
@ -143,7 +140,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.gridBusToLoadOnGridBusConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.gridBusToLoadOnGridBusConnection.values
|
||||
props.values.gridBusToLoadOnGridBusConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -156,8 +153,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'Pv Inverter',
|
||||
data: props.values.pvOnIslandBusToIslandBusConnection,
|
||||
connected:
|
||||
props.values.pvOnIslandBusBox.values[0].value.toString() !=
|
||||
'Disabled'
|
||||
props.values.pvOnIslandBusBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
topConnection={{
|
||||
orientation: 'vertical',
|
||||
|
|
@ -166,7 +162,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.pvOnIslandBusToIslandBusConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.pvOnIslandBusToIslandBusConnection.values
|
||||
props.values.pvOnIslandBusToIslandBusConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -182,7 +178,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.islandBusToInverter
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.islandBusToInverter.values
|
||||
props.values.islandBusToInverter
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -191,7 +187,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'AC Loads',
|
||||
data: props.values.islandBusToLoadOnIslandBusConnection,
|
||||
connected:
|
||||
props.values.loadOnIslandBusBox.values[0].value.toString() !=
|
||||
props.values.loadOnIslandBusBox[0].value.toString() !=
|
||||
'Disabled'
|
||||
}}
|
||||
bottomConnection={{
|
||||
|
|
@ -201,7 +197,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.islandBusToLoadOnIslandBusConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.islandBusToLoadOnIslandBusConnection.values
|
||||
props.values.islandBusToLoadOnIslandBusConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -221,7 +217,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.inverterToDcBus
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.inverterToDcBus.values
|
||||
props.values.inverterToDcBus
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -234,7 +230,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'Pv DC-DC',
|
||||
data: props.values.pvOnDcBusToDcBusConnection,
|
||||
connected:
|
||||
props.values.pvOnDcBox.values[0].value.toString() != 'Disabled'
|
||||
props.values.pvOnDcBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
topConnection={{
|
||||
orientation: 'vertical',
|
||||
|
|
@ -243,7 +239,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.pvOnDcBusToDcBusConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.pvOnDcBusToDcBusConnection.values
|
||||
props.values.pvOnDcBusToDcBusConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -259,7 +255,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.dcBusToDcDcConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.dcBusToDcDcConnection.values
|
||||
props.values.dcBusToDcDcConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -268,8 +264,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'DC Loads',
|
||||
data: props.values.dcBusToLoadOnDcConnection,
|
||||
connected:
|
||||
props.values.loadOnDcBox.values[0].value.toString() !=
|
||||
'Disabled'
|
||||
props.values.loadOnDcBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
bottomConnection={{
|
||||
orientation: 'vertical',
|
||||
|
|
@ -278,7 +273,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.dcBusToLoadOnDcConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.dcBusToLoadOnDcConnection.values
|
||||
props.values.dcBusToLoadOnDcConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -298,7 +293,7 @@ function Topology(props: TopologyProps) {
|
|||
amount: props.values.dcDCToBatteryConnection
|
||||
? getAmount(
|
||||
highestConnectionValue,
|
||||
props.values.dcDCToBatteryConnection.values
|
||||
props.values.dcDCToBatteryConnection
|
||||
)
|
||||
: 0,
|
||||
showValues: showValues
|
||||
|
|
@ -311,7 +306,7 @@ function Topology(props: TopologyProps) {
|
|||
title: 'Battery',
|
||||
data: props.values.battery,
|
||||
connected:
|
||||
props.values.batteryBox.values[0].value.toString() != 'Disabled'
|
||||
props.values.batteryBox[0].value.toString() != 'Disabled'
|
||||
}}
|
||||
isLast={true}
|
||||
isFirst={false}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Divider,
|
||||
Typography,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import { Box, Card, CardContent, Divider, Typography } from '@mui/material';
|
||||
import { AvatarWrapper } from 'src/layouts/TabsContainerWrapper';
|
||||
import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60';
|
||||
import OutletIcon from '@mui/icons-material/Outlet';
|
||||
|
|
@ -14,21 +7,17 @@ import SolarPowerIcon from '@mui/icons-material/SolarPower';
|
|||
import PowerInputIcon from '@mui/icons-material/PowerInput';
|
||||
import SignalWifiConnectedNoInternet4Icon from '@mui/icons-material/SignalWifiConnectedNoInternet4';
|
||||
import BoltIcon from '@mui/icons-material/Bolt';
|
||||
import { BoxData } from '../Log/graph.util';
|
||||
import { I_BoxDataValue } from '../Log/graph.util';
|
||||
import inverterImage from 'src/Resources/images/inverter.png';
|
||||
import acCurrentImage from 'src/Resources/images/ac-current.png';
|
||||
import converterImage from 'src/Resources/images/converter.png';
|
||||
|
||||
export interface TopologyBoxProps {
|
||||
title: string;
|
||||
data?: BoxData;
|
||||
data?: I_BoxDataValue[];
|
||||
connected?: boolean;
|
||||
}
|
||||
|
||||
const isInt = (value: number) => {
|
||||
return value % 1 === 0;
|
||||
};
|
||||
|
||||
function formatPower(value, unit) {
|
||||
if (isNaN(value)) {
|
||||
return 'Invalid';
|
||||
|
|
@ -60,7 +49,6 @@ function formatPower(value, unit) {
|
|||
}
|
||||
|
||||
function TopologyBox(props: TopologyBoxProps) {
|
||||
const theme = useTheme();
|
||||
const isMobile = window.innerWidth <= 1490;
|
||||
|
||||
return (
|
||||
|
|
@ -106,7 +94,7 @@ function TopologyBox(props: TopologyBoxProps) {
|
|||
>
|
||||
{props.data && props.title === 'Battery' && (
|
||||
<Typography variant="h5" noWrap>
|
||||
{props.title} (x{props.data.values.length - 4})
|
||||
{props.title} (x{props.data.length - 4})
|
||||
</Typography>
|
||||
)}
|
||||
{props.title != 'Battery' && (
|
||||
|
|
@ -245,7 +233,7 @@ function TopologyBox(props: TopologyBoxProps) {
|
|||
pt: 1
|
||||
}}
|
||||
>
|
||||
{props.data.values.map((boxData, index) => {
|
||||
{props.data.map((boxData, index) => {
|
||||
return (
|
||||
<Typography key={index}>
|
||||
{formatPower(boxData.value, boxData.unit) === 0
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import './dotsAnimation.css';
|
||||
import { BoxData } from '../Log/graph.util';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { I_BoxDataValue } from '../Log/graph.util';
|
||||
|
||||
export interface TopologyFlowProps {
|
||||
orientation: string;
|
||||
position?: string;
|
||||
data?: BoxData;
|
||||
data?: I_BoxDataValue[];
|
||||
amount?: number;
|
||||
showValues: boolean;
|
||||
}
|
||||
|
|
@ -23,10 +23,6 @@ function getRandomStyleVertical() {
|
|||
return { animationDelay, left };
|
||||
}
|
||||
|
||||
const isInt = (value: number) => {
|
||||
return value % 1 === 0;
|
||||
};
|
||||
|
||||
function formatPower(value) {
|
||||
if (isNaN(value)) {
|
||||
return 'Invalid';
|
||||
|
|
@ -107,7 +103,7 @@ function TopologyFlow(props: TopologyFlowProps) {
|
|||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
{props.showValues && props.data.values[0].value != 0 && (
|
||||
{props.showValues && props.data[0].value != 0 && (
|
||||
<Typography
|
||||
sx={{
|
||||
marginTop: '1px',
|
||||
|
|
@ -118,12 +114,12 @@ function TopologyFlow(props: TopologyFlowProps) {
|
|||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
{formatPower(props.data.values[0].value) === 0
|
||||
{formatPower(props.data[0].value) === 0
|
||||
? null
|
||||
: formatPower(props.data.values[0].value)}
|
||||
{formatPower(props.data.values[0].value) === 0
|
||||
: formatPower(props.data[0].value)}
|
||||
{formatPower(props.data[0].value) === 0
|
||||
? null
|
||||
: props.data.values[0].unit}
|
||||
: props.data[0].unit}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
|
@ -158,13 +154,13 @@ function TopologyFlow(props: TopologyFlowProps) {
|
|||
>
|
||||
{props.orientation === 'horizontal' &&
|
||||
props.data &&
|
||||
props.data.values[0].value != 0 && (
|
||||
props.data[0].value != 0 && (
|
||||
<>
|
||||
<div className="container">
|
||||
{dotStyles.map((style, index) => (
|
||||
<div
|
||||
className={
|
||||
(props.data.values[0].value as number) >= 0
|
||||
(props.data[0].value as number) >= 0
|
||||
? 'dotRight'
|
||||
: 'dotLeft'
|
||||
}
|
||||
|
|
@ -181,7 +177,7 @@ function TopologyFlow(props: TopologyFlowProps) {
|
|||
|
||||
{props.orientation === 'vertical' &&
|
||||
props.data &&
|
||||
props.data.values[0].value != 0 && (
|
||||
props.data[0].value != 0 && (
|
||||
<div className="dot-container">
|
||||
{dotStylesVertical.map((style, index) => (
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue