src/components/MyEMS/FDD/EnergyLoss.js - Code Metrics - Inspection of "fixed typo" - myems/myems-web - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 4ae8cd...4bbb50 )

by Guangyu

created 2021-01-28 03:53 UTC

src/components/MyEMS/FDD/EnergyLoss.js A

↳ Parent: Project

Complexity

Total Complexity	3
Complexity/F	0

Size

Lines of Code	513
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	3
eloc	455
mnd	3
bc	3
fnc	0
dl	0
loc	513
rs	10
bpm	0
cpm	0
noi	0
c	0
b	0
f	0

import React, { Fragment, useEffect, useState } from 'react';
import {
  Breadcrumb,
  BreadcrumbItem,
  Row,
  Col,
  Card,
  CardBody,
  Button,
  ButtonGroup,
  Form,
  FormGroup,
  Input,
  Label,
  CustomInput,
  Spinner,
} from 'reactstrap';
import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment';
import loadable from '@loadable/component';
import Cascader from 'rc-cascader';
import CardSummary from '../common/CardSummary';
import LineChart from '../common/LineChart';
import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next';
import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config';


const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));

const EnergyLoss = ({ setRedirect, setRedirectUrl, t }) => {
  let current_moment = moment();
  useEffect(() => {
    let is_logged_in = getCookieValue('is_logged_in');
    let user_name = getCookieValue('user_name');
    let user_display_name = getCookieValue('user_display_name');
    let user_uuid = getCookieValue('user_uuid');
    let token = getCookieValue('token');
    if (is_logged_in === null || !is_logged_in) {
      setRedirectUrl(`/authentication/basic/login`);
      setRedirect(true);
    } else {
      //update expires time of cookies
      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
      createCookie('token', token, 1000 * 60 * 60 * 8);
    }
  });
  // State
  // Query Parameters
  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
  const [periodType, setPeriodType] = useState('daily');
  
  // buttons
  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
  const [spinnerHidden, setSpinnerHidden] = useState(true);
  const [exportButtonHidden, setExportButtonHidden] = useState(true);

  //Results
  const [timeOfUseShareData, setTimeOfUseShareData] = useState([]);
  const [TCEShareData, setTCEShareData] = useState([]);
  const [CO2ShareData, setCO2ShareData] = useState([]);

  const [energyLossLineChartLabels, setEnergyLossLineChartLabels] = useState([]);
  const [energyLossLineChartData, setEnergyLossLineChartData] = useState({});
  const [energyLossLineChartOptions, setEnergyLossLineChartOptions] = useState([]);

  const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
  const [parameterLineChartData, setParameterLineChartData] = useState({});
  const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);

  const [detailedDataTableData, setDetailedDataTableData] = useState([]);
  const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
  
  const cascaderOptions = [{
    label: '低压柜主进线#1',
    value: 1,
    children: [{
      label: '14027320',
      value: 2,
      children: [{
        label: '14028183',
        value: 9,
      }, {
        label: '14028206',
        value: 10,
      }, {
        label: '18050545',
        value: 11,
      }],
    }, {
      label: '13071661',
      value: 3,
      children: [{
        label: '14027767',
        value: 12,
      }, {
        label: '14050015',
        value: 13,
      }]
    }, {
      label: '11AL1',
      value: 4,
      children: [{
        label: '11W11',
        value: 5,
      }, {
        label: '11W12',
        value: 6,
        children: [{
          label: '11W121',
          value: 7,
        }, {
          label: '11W122',
          value: 8,
        }
        ]
      }]
    }],
  }];

  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';

  let onSpaceCascaderChange = (value, selectedOptions) => {
    console.log(value, selectedOptions);
    setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
    setSelectedSpaceID(value[value.length - 1]);
  }
  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
    setReportingPeriodBeginsDatetime(newDateTime);
  }

  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
    setReportingPeriodEndsDatetime(newDateTime);
  }

  var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
    return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
  }

  var getValidReportingPeriodEndsDatetimes = function (currentDate) {
    return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
  }

  // Handler
  const handleSubmit = e => {
    e.preventDefault();
    console.log('handleSubmit');
    console.log(selectedSpaceID);
    console.log(periodType);
    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));

    // disable submit button
    setSubmitButtonDisabled(true);
    // show spinner
    setSpinnerHidden(false);
    // hide export buttion
    setExportButtonHidden(true)

    // Reinitialize tables
    setDetailedDataTableData([]);
    
    let isResponseOK = false;
    fetch(APIBaseURL + '/reports/fddenergyloss?' +
      'spaceid=' + selectedSpaceID +
      '&periodtype=' + periodType +
      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
      method: 'GET',
      headers: {
        "Content-type": "application/json",
        "User-UUID": getCookieValue('user_uuid'),
        "Token": getCookieValue('token')
      },
      body: null,

    }).then(response => {
      if (response.ok) {
        isResponseOK = true;
      }

      // enable submit button
      setSubmitButtonDisabled(false);
      // hide spinner
      setSpinnerHidden(true);
      // show export buttion
      setExportButtonHidden(false)

      return response.json();
    }).then(json => {
      if (isResponseOK) {
        console.log(json);

        setEnergyLossLineChartLabels({
          a0: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
          a1: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
          a2: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
          a3: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
        });

        setEnergyLossLineChartData({
          a0: [4, 1, 6, 2, 7, 12, 4, 6, 5, 4, 5, 10],
          a1: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8],
          a2: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2]
        });

        setEnergyLossLineChartOptions([
          { value: 'a0', label: '电' },
          { value: 'a1', label: '吨标准煤' },
          { value: 'a2', label: '二氧化碳排放' }
        ]);

        setParameterLineChartLabels({
          a0: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
          a1: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
          a2: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
          a3: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
        });

        setParameterLineChartData({
          a0: [40, 31, 36, 32, 27, 32, 34, 26, 25, 24, 25, 30],
          a1: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8],
          a2: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2],
          a3: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2],
          a4: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2]
        });

        setParameterLineChartOptions([
          { value: 'a0', label: '室外温度' },
          { value: 'a1', label: '相对湿度' },
          { value: 'a2', label: '电费率' },
          { value: 'a3', label: '自来水费率' },
          { value: 'a4', label: '天然气费率' }
        ]);

        setDetailedDataTableData([
          {
            id: 1,
            startdatetime: '2020-07-01',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 2,
            startdatetime: '2020-07-02',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 3,
            startdatetime: '2020-07-03',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 4,
            startdatetime: '2020-07-04',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 5,
            startdatetime: '2020-07-05',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 6,
            startdatetime: '2020-07-06',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 7,
            startdatetime: '2020-07-07',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 8,
            startdatetime: '2020-07-08',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 9,
            startdatetime: '2020-07-09',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 10,
            startdatetime: '2020-07-10',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 11,
            startdatetime: '2020-07-11',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 12,
            startdatetime: '2020-07-12',
            a: 49.083,
            b: (3.382 * 0.67).toFixed(2),
            c: 3.382,
          },
          {
            id: 13,
            startdatetime: t('Total'),
            a: 589,
            b: 33.829 * 0.67,
            c: 33.829,
          }
        ]);

        setDetailedDataTableColumns([
          {
            dataField: 'startdatetime',
            text: t('Datetime'),
            sort: true
          }, {
            dataField: 'a',
            text: '电 (kWh)',
            sort: true
          }, {
            dataField: 'b',
            text: '吨标准煤 (TCE)',
            sort: true
          }, {
            dataField: 'c',
            text: '二氧化碳排放 (T)',
            sort: true
          }
        ]);
        
        setExcelBytesBase64(json['excel_bytes_base64']);
      } else {
        toast.error(json.description)
      }
    }).catch(err => {
      console.log(err);
    });
  };
  
  const handleExport = e => {
    e.preventDefault();
    const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    const fileName = 'energyloss.xlsx'
    var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64;
    fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
            var link = window.document.createElement("a");
            link.href = window.URL.createObjectURL(blob, { type: mimeType });
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
  };
  

  return (
    <Fragment>
      <div>
        <Breadcrumb>
          <BreadcrumbItem>{t('Fault Detection & Diagnostics')}</BreadcrumbItem><BreadcrumbItem active>{t('Energy Loss')}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <Card className="bg-light mb-3">
        <CardBody className="p-3">
          <Form onSubmit={handleSubmit}>
            <Row form>
              <Col xs="auto">
                <FormGroup className="form-group">
                  <Label className={labelClasses} for="space">{t('Upstream Meter')}</Label>
                  <br />
                  <Cascader options={cascaderOptions}
                    onChange={onSpaceCascaderChange}
                    changeOnSelect
                    expandTrigger="hover">
                    <Input value={selectedSpaceName || ''} readOnly />
                  </Cascader>
                </FormGroup>
              </Col>
              <Col xs="auto">
                <FormGroup>
                  <Label className={labelClasses} for="periodType">
                    {t('Period Types')}
                  </Label>
                  <CustomInput type="select" id="periodType" name="periodType" defaultValue="daily" onChange={({ target }) => setPeriodType(target.value)}
                  >
                    {periodTypeOptions.map((periodType, index) => (
                      <option value={periodType.value} key={periodType.value}>
                        {t(periodType.label)}
                      </option>
                    ))}
                  </CustomInput>
                </FormGroup>
              </Col>
              <Col xs="auto">
                <FormGroup className="form-group">
                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
                    {t('Reporting Period Begins')}
                  </Label>
                  <Datetime id='reportingPeriodBeginsDatetime'
                    value={reportingPeriodBeginsDatetime}
                    onChange={onReportingPeriodBeginsDatetimeChange}
                    isValidDate={getValidReportingPeriodBeginsDatetimes}
                    closeOnSelect={true} />
                </FormGroup>
              </Col>
              <Col xs="auto">
                <FormGroup className="form-group">
                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
                    {t('Reporting Period Ends')}
                  </Label>
                  <Datetime id='reportingPeriodEndsDatetime'
                    value={reportingPeriodEndsDatetime}
                    onChange={onReportingPeriodEndsDatetimeChange}
                    isValidDate={getValidReportingPeriodEndsDatetimes}
                    closeOnSelect={true} />
                </FormGroup>
              </Col>
              <Col xs="auto">
                <FormGroup>
                  <br></br>
                  <ButtonGroup id="submit">
                    <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
                  </ButtonGroup>
                </FormGroup>
              </Col>
              <Col xs="auto">
                <FormGroup>
                  <br></br>
                  <Spinner color="primary" hidden={spinnerHidden}  />
                </FormGroup>
              </Col>
              <Col xs="auto">
                  <br></br>
                  <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" 
                  hidden={exportButtonHidden}
                  onClick={handleExport} >
                    {t('Export')}
                  </ButtonIcon>
              </Col>
            </Row>
          </Form>
        </CardBody>
      </Card>
      <div className="card-deck">
        <CardSummary rate="-0.23%" title={t('Reporting Period Lost CATEGORY UNIT', { 'CATEGORY': '电', 'UNIT': '(kWh)' })}
          color="success"  >
          <CountUp end={589} duration={2} prefix="" separator="," decimals={2} decimal="." />
        </CardSummary>
        <CardSummary rate="+9.54%" title={t('Reporting Period Lost CATEGORY UNIT', { 'CATEGORY': '吨标准煤', 'UNIT': '(TCE)' })}
          color="warning" >
          <CountUp end={589 / 8135.56} duration={2} prefix="" separator="," decimal="." decimals={2} />
        </CardSummary>
        <CardSummary rate="+9.54%" title={t('Reporting Period Lost CATEGORY UNIT', { 'CATEGORY': '二氧化碳排', 'UNIT': '(T)' })}
          color="warning" >
          <CountUp end={(589 / 8135.56) * 0.67} duration={2} prefix="" separator="," decimal="." decimals={2} />
        </CardSummary>
      </div>

      <LineChart reportingTitle={t('Reporting Period Lost CATEGORY VALUE UNIT', { 'CATEGORY': '电', 'VALUE': 589, 'UNIT': '(kWh)' })}
        labels={energyLossLineChartLabels}
        data={energyLossLineChartData}
        options={energyLossLineChartOptions}>
      </LineChart>

      <LineChart reportingTitle={t('Related Parameters')}
        baseTitle=''
        labels={parameterLineChartLabels}
        data={parameterLineChartData}
        options={parameterLineChartOptions}>
      </LineChart>
      <br />
      <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
      </DetailedDataTable>

    </Fragment>
  );
};

export default withTranslation()(withRedirect(EnergyLoss));


1			import React, { Fragment, useEffect, useState } from 'react';
2			import {
3			Breadcrumb,
4			BreadcrumbItem,
5			Row,
6			Col,
7			Card,
8			CardBody,
9			Button,
10			ButtonGroup,
11			Form,
12			FormGroup,
13			Input,
14			Label,
15			CustomInput,
16			Spinner,
17			} from 'reactstrap';
18			import CountUp from 'react-countup';
19			import Datetime from 'react-datetime';
20			import moment from 'moment';
21			import loadable from '@loadable/component';
22			import Cascader from 'rc-cascader';
23			import CardSummary from '../common/CardSummary';
24			import LineChart from '../common/LineChart';
25			import { getCookieValue, createCookie } from '../../../helpers/utils';
26			import withRedirect from '../../../hoc/withRedirect';
27			import { withTranslation } from 'react-i18next';
28			import { periodTypeOptions } from '../common/PeriodTypeOptions';
29			import { toast } from 'react-toastify';
30			import ButtonIcon from '../../common/ButtonIcon';
31			import { APIBaseURL } from '../../../config';
32
33
34			const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
35
36			const EnergyLoss = ({ setRedirect, setRedirectUrl, t }) => {
37			let current_moment = moment();
38			useEffect(() => {
39			let is_logged_in = getCookieValue('is_logged_in');
40			let user_name = getCookieValue('user_name');
41			let user_display_name = getCookieValue('user_display_name');
42			let user_uuid = getCookieValue('user_uuid');
43			let token = getCookieValue('token');
44			if (is_logged_in === null \|\| !is_logged_in) {
45			setRedirectUrl(`/authentication/basic/login`);
46			setRedirect(true);
47			} else {
48			//update expires time of cookies
49			createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
50			createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
51			createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
52			createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
53			createCookie('token', token, 1000 * 60 * 60 * 8);
54			}
55			});
56			// State
57			// Query Parameters
58			const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
59			const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
60			const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
61			const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
62			const [periodType, setPeriodType] = useState('daily');
63
64			// buttons
65			const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
66			const [spinnerHidden, setSpinnerHidden] = useState(true);
67			const [exportButtonHidden, setExportButtonHidden] = useState(true);
68
69			//Results
70			const [timeOfUseShareData, setTimeOfUseShareData] = useState([]);
71			const [TCEShareData, setTCEShareData] = useState([]);
72			const [CO2ShareData, setCO2ShareData] = useState([]);
73
74			const [energyLossLineChartLabels, setEnergyLossLineChartLabels] = useState([]);
75			const [energyLossLineChartData, setEnergyLossLineChartData] = useState({});
76			const [energyLossLineChartOptions, setEnergyLossLineChartOptions] = useState([]);
77
78			const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
79			const [parameterLineChartData, setParameterLineChartData] = useState({});
80			const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
81
82			const [detailedDataTableData, setDetailedDataTableData] = useState([]);
83			const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
84			const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
85
86			const cascaderOptions = [{
87			label: '低压柜主进线#1',
88			value: 1,
89			children: [{
90			label: '14027320',
91			value: 2,
92			children: [{
93			label: '14028183',
94			value: 9,
95			}, {
96			label: '14028206',
97			value: 10,
98			}, {
99			label: '18050545',
100			value: 11,
101			}],
102			}, {
103			label: '13071661',
104			value: 3,
105			children: [{
106			label: '14027767',
107			value: 12,
108			}, {
109			label: '14050015',
110			value: 13,
111			}]
112			}, {
113			label: '11AL1',
114			value: 4,
115			children: [{
116			label: '11W11',
117			value: 5,
118			}, {
119			label: '11W12',
120			value: 6,
121			children: [{
122			label: '11W121',
123			value: 7,
124			}, {
125			label: '11W122',
126			value: 8,
127			}
128			]
129			}]
130			}],
131			}];
132
133			const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
134
135			let onSpaceCascaderChange = (value, selectedOptions) => {
136			console.log(value, selectedOptions);
137			setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
138			setSelectedSpaceID(value[value.length - 1]);
139			}
140			let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
141			setReportingPeriodBeginsDatetime(newDateTime);
142			}
143
144			let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
145			setReportingPeriodEndsDatetime(newDateTime);
146			}
147
148			var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
149			return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
150			}
151
152			var getValidReportingPeriodEndsDatetimes = function (currentDate) {
153			return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
154			}
155
156			// Handler
157			const handleSubmit = e => {
158			e.preventDefault();
159			console.log('handleSubmit');
160			console.log(selectedSpaceID);
161			console.log(periodType);
162			console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
163			console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
164
165			// disable submit button
166			setSubmitButtonDisabled(true);
167			// show spinner
168			setSpinnerHidden(false);
169			// hide export buttion
170			setExportButtonHidden(true)
171
172			// Reinitialize tables
173			setDetailedDataTableData([]);
174
175			let isResponseOK = false;
176			fetch(APIBaseURL + '/reports/fddenergyloss?' +
177			'spaceid=' + selectedSpaceID +
178			'&periodtype=' + periodType +
179			'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
180			'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
181			method: 'GET',
182			headers: {
183			"Content-type": "application/json",
184			"User-UUID": getCookieValue('user_uuid'),
185			"Token": getCookieValue('token')
186			},
187			body: null,
188
189			}).then(response => {
190			if (response.ok) {
191			isResponseOK = true;
192			}
193
194			// enable submit button
195			setSubmitButtonDisabled(false);
196			// hide spinner
197			setSpinnerHidden(true);
198			// show export buttion
199			setExportButtonHidden(false)
200
201			return response.json();
202			}).then(json => {
203			if (isResponseOK) {
204			console.log(json);
205
206			setEnergyLossLineChartLabels({
207			a0: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
208			a1: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
209			a2: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
210			a3: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
211			});
212
213			setEnergyLossLineChartData({
214			a0: [4, 1, 6, 2, 7, 12, 4, 6, 5, 4, 5, 10],
215			a1: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8],
216			a2: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2]
217			});
218
219			setEnergyLossLineChartOptions([
220			{ value: 'a0', label: '电' },
221			{ value: 'a1', label: '吨标准煤' },
222			{ value: 'a2', label: '二氧化碳排放' }
223			]);
224
225			setParameterLineChartLabels({
226			a0: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
227			a1: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
228			a2: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
229			a3: ['2020-07-01','2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09','2020-07-10','2020-07-11','2020-07-12'],
230			});
231
232			setParameterLineChartData({
233			a0: [40, 31, 36, 32, 27, 32, 34, 26, 25, 24, 25, 30],
234			a1: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8],
235			a2: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2],
236			a3: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2],
237			a4: [1, 0, 2, 1, 2, 1, 1, 0, 0, 1, 0, 2]
238			});
239
240			setParameterLineChartOptions([
241			{ value: 'a0', label: '室外温度' },
242			{ value: 'a1', label: '相对湿度' },
243			{ value: 'a2', label: '电费率' },
244			{ value: 'a3', label: '自来水费率' },
245			{ value: 'a4', label: '天然气费率' }
246			]);
247
248			setDetailedDataTableData([
249			{
250			id: 1,
251			startdatetime: '2020-07-01',
252			a: 49.083,
253			b: (3.382 * 0.67).toFixed(2),
254			c: 3.382,
255			},
256			{
257			id: 2,
258			startdatetime: '2020-07-02',
259			a: 49.083,
260			b: (3.382 * 0.67).toFixed(2),
261			c: 3.382,
262			},
263			{
264			id: 3,
265			startdatetime: '2020-07-03',
266			a: 49.083,
267			b: (3.382 * 0.67).toFixed(2),
268			c: 3.382,
269			},
270			{
271			id: 4,
272			startdatetime: '2020-07-04',
273			a: 49.083,
274			b: (3.382 * 0.67).toFixed(2),
275			c: 3.382,
276			},
277			{
278			id: 5,
279			startdatetime: '2020-07-05',
280			a: 49.083,
281			b: (3.382 * 0.67).toFixed(2),
282			c: 3.382,
283			},
284			{
285			id: 6,
286			startdatetime: '2020-07-06',
287			a: 49.083,
288			b: (3.382 * 0.67).toFixed(2),
289			c: 3.382,
290			},
291			{
292			id: 7,
293			startdatetime: '2020-07-07',
294			a: 49.083,
295			b: (3.382 * 0.67).toFixed(2),
296			c: 3.382,
297			},
298			{
299			id: 8,
300			startdatetime: '2020-07-08',
301			a: 49.083,
302			b: (3.382 * 0.67).toFixed(2),
303			c: 3.382,
304			},
305			{
306			id: 9,
307			startdatetime: '2020-07-09',
308			a: 49.083,
309			b: (3.382 * 0.67).toFixed(2),
310			c: 3.382,
311			},
312			{
313			id: 10,
314			startdatetime: '2020-07-10',
315			a: 49.083,
316			b: (3.382 * 0.67).toFixed(2),
317			c: 3.382,
318			},
319			{
320			id: 11,
321			startdatetime: '2020-07-11',
322			a: 49.083,
323			b: (3.382 * 0.67).toFixed(2),
324			c: 3.382,
325			},
326			{
327			id: 12,
328			startdatetime: '2020-07-12',
329			a: 49.083,
330			b: (3.382 * 0.67).toFixed(2),
331			c: 3.382,
332			},
333			{
334			id: 13,
335			startdatetime: t('Total'),
336			a: 589,
337			b: 33.829 * 0.67,
338			c: 33.829,
339			}
340			]);
341
342			setDetailedDataTableColumns([
343			{
344			dataField: 'startdatetime',
345			text: t('Datetime'),
346			sort: true
347			}, {
348			dataField: 'a',
349			text: '电 (kWh)',
350			sort: true
351			}, {
352			dataField: 'b',
353			text: '吨标准煤 (TCE)',
354			sort: true
355			}, {
356			dataField: 'c',
357			text: '二氧化碳排放 (T)',
358			sort: true
359			}
360			]);
361
362			setExcelBytesBase64(json['excel_bytes_base64']);
363			} else {
364			toast.error(json.description)
365			}
366			}).catch(err => {
367			console.log(err);
368			});
369			};
370
371			const handleExport = e => {
372			e.preventDefault();
373			const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
374			const fileName = 'energyloss.xlsx'
375			var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64;
376			fetch(fileUrl)
377			.then(response => response.blob())
378			.then(blob => {
379			var link = window.document.createElement("a");
380			link.href = window.URL.createObjectURL(blob, { type: mimeType });
381			link.download = fileName;
382			document.body.appendChild(link);
383			link.click();
384			document.body.removeChild(link);
385			});
386			};
387
388
389			return (
390			<Fragment>
391			<div>
392			<Breadcrumb>
393			<BreadcrumbItem>{t('Fault Detection & Diagnostics')}</BreadcrumbItem><BreadcrumbItem active>{t('Energy Loss')}</BreadcrumbItem>
394			</Breadcrumb>
395			</div>
396			<Card className="bg-light mb-3">
397			<CardBody className="p-3">
398			<Form onSubmit={handleSubmit}>
399			<Row form>
400			<Col xs="auto">
401			<FormGroup className="form-group">
402			<Label className={labelClasses} for="space">{t('Upstream Meter')}</Label>
403			<br />
404			<Cascader options={cascaderOptions}
405			onChange={onSpaceCascaderChange}
406			changeOnSelect
407			expandTrigger="hover">
408			<Input value={selectedSpaceName \|\| ''} readOnly />
409			</Cascader>
410			</FormGroup>
411			</Col>
412			<Col xs="auto">
413			<FormGroup>
414			<Label className={labelClasses} for="periodType">
415			{t('Period Types')}
416			</Label>
417			<CustomInput type="select" id="periodType" name="periodType" defaultValue="daily" onChange={({ target }) => setPeriodType(target.value)}
418			>
419			{periodTypeOptions.map((periodType, index) => (
420			<option value={periodType.value} key={periodType.value}>
421			{t(periodType.label)}
422			</option>
423			))}
424			</CustomInput>
425			</FormGroup>
426			</Col>
427			<Col xs="auto">
428			<FormGroup className="form-group">
429			<Label className={labelClasses} for="reportingPeriodBeginsDatetime">
430			{t('Reporting Period Begins')}
431			</Label>
432			<Datetime id='reportingPeriodBeginsDatetime'
433			value={reportingPeriodBeginsDatetime}
434			onChange={onReportingPeriodBeginsDatetimeChange}
435			isValidDate={getValidReportingPeriodBeginsDatetimes}
436			closeOnSelect={true} />
437			</FormGroup>
438			</Col>
439			<Col xs="auto">
440			<FormGroup className="form-group">
441			<Label className={labelClasses} for="reportingPeriodEndsDatetime">
442			{t('Reporting Period Ends')}
443			</Label>
444			<Datetime id='reportingPeriodEndsDatetime'
445			value={reportingPeriodEndsDatetime}
446			onChange={onReportingPeriodEndsDatetimeChange}
447			isValidDate={getValidReportingPeriodEndsDatetimes}
448			closeOnSelect={true} />
449			</FormGroup>
450			</Col>
451			<Col xs="auto">
452			<FormGroup>
453			<br></br>
454			<ButtonGroup id="submit">
455			<Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
456			</ButtonGroup>
457			</FormGroup>
458			</Col>
459			<Col xs="auto">
460			<FormGroup>
461			<br></br>
462			<Spinner color="primary" hidden={spinnerHidden} />
463			</FormGroup>
464			</Col>
465			<Col xs="auto">
466			<br></br>
467			<ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default"
468			hidden={exportButtonHidden}
469			onClick={handleExport} >
470			{t('Export')}
471			</ButtonIcon>
472			</Col>
473			</Row>
474			</Form>
475			</CardBody>
476			</Card>
477			<div className="card-deck">
478			<CardSummary rate="-0.23%" title={t('Reporting Period Lost CATEGORY UNIT', { 'CATEGORY': '电', 'UNIT': '(kWh)' })}
479			color="success" >
480			<CountUp end={589} duration={2} prefix="" separator="," decimals={2} decimal="." />
481			</CardSummary>
482			<CardSummary rate="+9.54%" title={t('Reporting Period Lost CATEGORY UNIT', { 'CATEGORY': '吨标准煤', 'UNIT': '(TCE)' })}
483			color="warning" >
484			<CountUp end={589 / 8135.56} duration={2} prefix="" separator="," decimal="." decimals={2} />
485			</CardSummary>
486			<CardSummary rate="+9.54%" title={t('Reporting Period Lost CATEGORY UNIT', { 'CATEGORY': '二氧化碳排', 'UNIT': '(T)' })}
487			color="warning" >
488			<CountUp end={(589 / 8135.56) * 0.67} duration={2} prefix="" separator="," decimal="." decimals={2} />
489			</CardSummary>
490			</div>
491
492			<LineChart reportingTitle={t('Reporting Period Lost CATEGORY VALUE UNIT', { 'CATEGORY': '电', 'VALUE': 589, 'UNIT': '(kWh)' })}
493			labels={energyLossLineChartLabels}
494			data={energyLossLineChartData}
495			options={energyLossLineChartOptions}>
496			</LineChart>
497
498			<LineChart reportingTitle={t('Related Parameters')}
499			baseTitle=''
500			labels={parameterLineChartLabels}
501			data={parameterLineChartData}
502			options={parameterLineChartOptions}>
503			</LineChart>
504			<br />
505			<DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
506			</DetailedDataTable>
507
508			</Fragment>
509			);
510			};
511
512			export default withTranslation()(withRedirect(EnergyLoss));
513

myems / myems-web

Push — master ( 4ae8cd...4bbb50 )

src/components/MyEMS/FDD/EnergyLoss.js A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like