Passed
Push — master ( 9ff2a5...915ad8 )
by
unknown
10:21 queued 14s
created

myems-web/src/components/MyEMS/EnergyStoragePowerStation/EnergyStoragePowerStationDetails.js   A

Complexity

Total Complexity 23
Complexity/F 0

Size

Lines of Code 1143
Function Count 0

Duplication

Duplicated Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
wmc 23
eloc 1043
mnd 23
bc 23
fnc 0
dl 0
loc 1143
rs 9.428
bpm 0
cpm 0
noi 0
c 0
b 0
f 0
1
import React, { Fragment, useState, useEffect } from 'react';
2
import {
3
  Button,
4
  ButtonGroup,
5
  Card,
6
  CardBody,
7
  Col,
8
  CustomInput,
9
  CardTitle,
10
  CardText,
11
  Form,
12
  FormGroup,
13
  Input,
14
  Label,
15
  Row,
16
  Table,
17
  Spinner,
18
  Nav,
19
  NavItem,
20
  NavLink,
21
  TabContent,
22
  TabPane
23
} from 'reactstrap';
24
import Cascader from 'rc-cascader';
25
import FalconCardHeader from '../../common/FalconCardHeader';
26
import MultipleLineChart from '../common/MultipleLineChart';
27
import SectionLineChart from '../common/SectionLineChart';
28
import { getCookieValue, createCookie, checkEmpty } from '../../../helpers/utils';
29
import withRedirect from '../../../hoc/withRedirect';
30
import { withTranslation } from 'react-i18next';
31
import { toast } from 'react-toastify';
32
import { v4 as uuidv4 } from 'uuid';
33
import { APIBaseURL, settings } from '../../../config';
34
import useInterval from '../../../hooks/useInterval';
35
import { useLocation } from 'react-router-dom';
36
import Datetime from 'react-datetime';
37
import classNames from 'classnames';
38
39
const EnergyStoragePowerStationDetails = ({ setRedirect, setRedirectUrl, t }) => {
40
  const location = useLocation();
41
  const uuid = location.search.split('=')[1];
42
  const energyStoragePowerStationUUID = location.search.split('=')[1];
43
44
  useEffect(() => {
45
    let is_logged_in = getCookieValue('is_logged_in');
46
    let user_name = getCookieValue('user_name');
47
    let user_display_name = getCookieValue('user_display_name');
48
    let user_uuid = getCookieValue('user_uuid');
49
    let token = getCookieValue('token');
50
    if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) {
51
      setRedirectUrl(`/authentication/basic/login`);
52
      setRedirect(true);
53
    } else {
54
      //update expires time of cookies
55
      createCookie('is_logged_in', true, settings.cookieExpireTime);
56
      createCookie('user_name', user_name, settings.cookieExpireTime);
57
      createCookie('user_display_name', user_display_name, settings.cookieExpireTime);
58
      createCookie('user_uuid', user_uuid, settings.cookieExpireTime);
59
      createCookie('token', token, settings.cookieExpireTime);
60
    }
61
  });
62
63
  useEffect(() => {
64
    let timer = setInterval(() => {
65
      let is_logged_in = getCookieValue('is_logged_in');
66
      if (is_logged_in === null || !is_logged_in) {
67
        setRedirectUrl(`/authentication/basic/login`);
68
        setRedirect(true);
69
      }
70
    }, 1000);
71
    return () => clearInterval(timer);
72
  }, [setRedirect, setRedirectUrl]);
73
74
  const [activeTabLeft, setActiveTabLeft] = useState('1');
75
  const toggleTabLeft = tab => {
76
    if (activeTabLeft !== tab) setActiveTabLeft(tab);
77
  };
78
79
  const [activeTabRight, setActiveTabRight] = useState('1');
80
  const toggleTabRight = tab => {
81
    if (activeTabRight !== tab) setActiveTabRight(tab);
82
  };
83
84
  const [activeTabBottom, setActiveTabBottom] = useState('1');
85
  const toggleTabBottom = tab => {
86
    if (activeTabBottom !== tab) setActiveTabBottom(tab);
87
  };
88
89
  // State
90
  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
91
  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
92
  const [stationList, setStationList] = useState([]);
93
  const [filteredStationList, setFilteredStationList] = useState([]);
94
  const [selectedStation, setSelectedStation] = useState(undefined);
95
  const [cascaderOptions, setCascaderOptions] = useState(undefined);
96
97
  // buttons
98
  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
99
  const [spinnerHidden, setSpinnerHidden] = useState(true);
100
  const [spaceCascaderHidden, setSpaceCascaderHidden] = useState(false);
101
102
  //Results
103
  const [energyStoragePowerStationName, setEnergyStoragePowerStationName] = useState();
104
  const [energyStoragePowerStationAddress, setEnergyStoragePowerStationAddress] = useState();
105
  const [energyStoragePowerStationPostalCode, setEnergyStoragePowerStationPostalCode] = useState();
106
  const [energyStoragePowerStationRatedCapacity, setEnergyStoragePowerStationRatedCapacity] = useState();
107
  const [energyStoragePowerStationRatedPower, setEnergyStoragePowerStationRatedPower] = useState();
108
  const [energyStoragePowerStationSVG, setEnergyStoragePowerStationSVG] = useState();
109
110
  const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
111
  const [parameterLineChartData, setParameterLineChartData] = useState({});
112
  const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
113
114
  useEffect(() => {
115
    console.log("uuid:");
116
    console.log(uuid);
117
    if (uuid === null || !uuid) {
118
      let isResponseOK = false;
119
      setSpaceCascaderHidden(false);
120
      fetch(APIBaseURL + '/spaces/tree', {
121
        method: 'GET',
122
        headers: {
123
          'Content-type': 'application/json',
124
          'User-UUID': getCookieValue('user_uuid'),
125
          Token: getCookieValue('token')
126
        },
127
        body: null
128
      })
129
        .then(response => {
130
          console.log(response);
131
          if (response.ok) {
132
            isResponseOK = true;
133
          }
134
          return response.json();
135
        })
136
        .then(json => {
137
          console.log(json);
138
          if (isResponseOK) {
139
            // rename keys
140
            json = JSON.parse(
141
              JSON.stringify([json])
142
                .split('"id":')
143
                .join('"value":')
144
                .split('"name":')
145
                .join('"label":')
146
            );
147
            setCascaderOptions(json);
148
            setSelectedSpaceName([json[0]].map(o => o.label));
149
            setSelectedSpaceID([json[0]].map(o => o.value));
150
            // get Energy Storage Power Stations by root Space ID
151
            let isResponseOK = false;
152
            fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/energystoragepowerstations', {
153
              method: 'GET',
154
              headers: {
155
                'Content-type': 'application/json',
156
                'User-UUID': getCookieValue('user_uuid'),
157
                Token: getCookieValue('token')
158
              },
159
              body: null
160
            })
161
              .then(response => {
162
                if (response.ok) {
163
                  isResponseOK = true;
164
                }
165
                return response.json();
166
              })
167
              .then(json => {
168
                if (isResponseOK) {
169
                  json = JSON.parse(
170
                    JSON.stringify([json])
171
                      .split('"id":')
172
                      .join('"value":')
173
                      .split('"name":')
174
                      .join('"label":')
175
                  );
176
                  console.log(json);
177
                  setStationList(json[0]);
178
                  setFilteredStationList(json[0]);
179
                  if (json[0].length > 0) {
180
                    setSelectedStation(json[0][0].value);
181
                    // enable submit button
182
                    setSubmitButtonDisabled(false);
183
                  } else {
184
                    setSelectedStation(undefined);
185
                    // disable submit button
186
                    setSubmitButtonDisabled(true);
187
                  }
188
                } else {
189
                  toast.error(t(json.description));
190
                }
191
              })
192
              .catch(err => {
193
                console.log(err);
194
              });
195
            // end of get Energy Storage Power Stations by root Space ID
196
          } else {
197
            toast.error(t(json.description));
198
          }
199
        })
200
        .catch(err => {
201
          console.log(err);
202
        });
203
    } else {
204
        setSpaceCascaderHidden(true);
205
        loadData(APIBaseURL + '/reports/energystoragepowerstationdetails?uuid=' + energyStoragePowerStationUUID)
206
      }
207
  }, [energyStoragePowerStationUUID]);
208
209
  const loadData = url => {
210
    console.log('url:' + url);
211
    let isResponseOK = false;
212
    fetch(url, {
213
      method: 'GET',
214
      headers: {
215
        'Content-type': 'application/json',
216
        'User-UUID': getCookieValue('user_uuid'),
217
        Token: getCookieValue('token')
218
      },
219
      body: null
220
    })
221
      .then(response => {
222
        if (response.ok) {
223
          isResponseOK = true;
224
        }
225
        return response.json();
226
      })
227
      .then(json => {
228
        if (isResponseOK) {
229
          console.log(json);
230
          if (uuid !== null && uuid) {
231
            setFilteredStationList([{ id: json['energy_storage_power_station']['id'], label: json['energy_storage_power_station']['name'] }]);
232
            setSelectedStation(json['energy_storage_power_station']['id']);
233
          }
234
          setEnergyStoragePowerStationName(json['energy_storage_power_station']['name']);
235
          setEnergyStoragePowerStationAddress(json['energy_storage_power_station']['address']);
236
          setEnergyStoragePowerStationPostalCode(json['energy_storage_power_station']['postal_code']);
237
          setEnergyStoragePowerStationRatedCapacity(json['energy_storage_power_station']['rated_capacity']);
238
          setEnergyStoragePowerStationRatedPower(json['energy_storage_power_station']['rated_power']);
239
          setEnergyStoragePowerStationSVG({ __html: json['energy_storage_power_station']['svg'] });
240
          let timestamps = {};
241
          json['parameters']['timestamps'].forEach((currentValue, index) => {
242
            timestamps['a' + index] = currentValue;
243
          });
244
          setParameterLineChartLabels(timestamps);
245
246
          let values = {};
247
          json['parameters']['values'].forEach((currentValue, index) => {
248
            values['a' + index] = currentValue;
249
          });
250
          setParameterLineChartData(values);
251
252
          let names = [];
253
          json['parameters']['names'].forEach((currentValue, index) => {
254
            names.push({ value: 'a' + index, label: currentValue });
255
          });
256
          setParameterLineChartOptions(names);
257
258
        }
259
      })
260
      .catch(err => {
261
        console.log(err);
262
      });
263
  }
264
  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
265
266
  let onSpaceCascaderChange = (value, selectedOptions) => {
267
    setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
268
    setSelectedSpaceID(value[value.length - 1]);
269
270
    let isResponseOK = false;
271
    fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/energystoragepowerstations', {
272
      method: 'GET',
273
      headers: {
274
        'Content-type': 'application/json',
275
        'User-UUID': getCookieValue('user_uuid'),
276
        Token: getCookieValue('token')
277
      },
278
      body: null
279
    })
280
      .then(response => {
281
        if (response.ok) {
282
          isResponseOK = true;
283
        }
284
        return response.json();
285
      })
286
      .then(json => {
287
        if (isResponseOK) {
288
          json = JSON.parse(
289
            JSON.stringify([json])
290
              .split('"id":')
291
              .join('"value":')
292
              .split('"name":')
293
              .join('"label":')
294
          );
295
          console.log(json);
296
          setStationList(json[0]);
297
          setFilteredStationList(json[0]);
298
          if (json[0].length > 0) {
299
            setSelectedStation(json[0][0].value);
300
            // enable submit button
301
            setSubmitButtonDisabled(false);
302
          } else {
303
            setSelectedStation(undefined);
304
            // disable submit button
305
            setSubmitButtonDisabled(true);
306
          }
307
        } else {
308
          toast.error(t(json.description));
309
        }
310
      })
311
      .catch(err => {
312
        console.log(err);
313
      });
314
  };
315
316
  // Handler
317
  const handleSubmit = e => {
318
    e.preventDefault();
319
320
    loadData(APIBaseURL + '/reports/energystoragepowerstationdetails?id=' + selectedStation);
321
  };
322
323
324
  const refreshSVGData = () => {
325
    let isResponseOK = false;
326
    fetch(APIBaseURL + '/reports/pointrealtime', {
327
      method: 'GET',
328
      headers: {
329
        'Content-type': 'application/json',
330
        'User-UUID': getCookieValue('user_uuid'),
331
        Token: getCookieValue('token')
332
      },
333
      body: null
334
    })
335
      .then(response => {
336
        if (response.ok) {
337
          isResponseOK = true;
338
        }
339
        return response.json();
340
      })
341
      .then(json => {
342
        if (isResponseOK) {
343
          console.log(json);
344
          json.forEach(currentPoint => {
345
            let textElement = document.getElementById('PT' + currentPoint['point_id']);
346
            if (textElement) {
347
              textElement.textContent = parseFloat(currentPoint['value']).toFixed(2);
348
            }
349
            let circleElement = document.getElementById('CIRCLE' + currentPoint['point_id']);
350
            if (circleElement) {
351
              if (currentPoint['value'] > 0) {
352
                circleElement.className.baseVal = 'flow';
353
              } else if (currentPoint['value'] < 0) {
354
                circleElement.className.baseVal = 'flow-reverse';
355
              } else {
356
                circleElement.className.baseVal = '';
357
              }
358
            }
359
          });
360
        }
361
      })
362
      .catch(err => {
363
        console.log(err);
364
      });
365
  };
366
367
  useInterval(() => {
368
    refreshSVGData();
369
  }, 1000 * 10);
370
371
  return (
372
    <Fragment>
373
374
      <Form onSubmit={handleSubmit}>
375
        <Row form>
376
          <Col xs={6} sm={3} hidden={spaceCascaderHidden}>
377
            <FormGroup className="form-group">
378
              <Cascader
379
                options={cascaderOptions}
380
                onChange={onSpaceCascaderChange}
381
                changeOnSelect
382
                expandTrigger="hover"
383
              >
384
                <Input value={selectedSpaceName || ''} readOnly />
385
              </Cascader>
386
            </FormGroup>
387
          </Col>
388
          <Col xs="auto">
389
            <FormGroup>
390
              <Form inline>
391
                <CustomInput
392
                  type="select"
393
                  id="stationSelect"
394
                  name="stationSelect"
395
                  onChange={({ target }) => setSelectedStation(target.value)}
396
                >
397
                  {filteredStationList.map((station, index) => (
398
                    <option value={station.value} key={station.value}>
399
                      {station.label}
400
                    </option>
401
                  ))}
402
                </CustomInput>
403
              </Form>
404
            </FormGroup>
405
          </Col>
406
          <Col xs="auto">
407
            <FormGroup>
408
              <ButtonGroup id="submit">
409
                <Button color="success" disabled={submitButtonDisabled}>
410
                  {t('Submit')}
411
                </Button>
412
              </ButtonGroup>
413
            </FormGroup>
414
          </Col>
415
        </Row>
416
      </Form>
417
      <Row noGutters>
418
        <Col lg="3" className="pr-lg-2">
419
          <Nav tabs>
420
            <NavItem className="cursor-pointer">
421
              <NavLink
422
                className={classNames({ active: activeTabLeft === '1' })}
423
                onClick={() => {
424
                  toggleTabLeft('1');
425
                }}
426
              >
427
                <h6>电量指标</h6>
428
              </NavLink>
429
            </NavItem>
430
            <NavItem className="cursor-pointer">
431
              <NavLink
432
                className={classNames({ active: activeTabLeft === '2' })}
433
                onClick={() => {
434
                  toggleTabLeft('2');
435
                }}
436
              >
437
                <h6>收益指标</h6>
438
              </NavLink>
439
            </NavItem>
440
            <NavItem className="cursor-pointer">
441
              <NavLink
442
                className={classNames({ active: activeTabLeft === '3' })}
443
                onClick={() => {
444
                  toggleTabLeft('3');
445
                }}
446
              >
447
                <h6>节能减排</h6>
448
              </NavLink>
449
            </NavItem>
450
          </Nav>
451
          <TabContent activeTab={activeTabLeft}>
452
            <TabPane tabId="1">
453
              <Card className="mb-3 fs--1">
454
                <Fragment>
455
                  <CardBody className="pt-0">
456
                    <Table borderless className="fs--1 mb-0">
457
                      <tbody>
458
                        <tr className="border-bottom">
459
                          <th className="pl-0">今日充电量</th>
460
                          <th className="pr-0 text-right">0 kWh</th>
461
                        </tr>
462
                        <tr className="border-bottom">
463
                          <th className="pl-0">今日放电量</th>
464
                          <th className="pr-0 text-right ">0 kWh</th>
465
                        </tr>
466
                        <tr className="border-bottom">
467
                          <th className="pl-0 pb-0">累计充电量</th>
468
                          <th className="pr-0 text-right">0 kWh</th>
469
                        </tr>
470
                        <tr className="border-bottom">
471
                          <th className="pl-0 pb-0">累计放电量</th>
472
                          <th className="pr-0 text-right">0 kWh</th>
473
                        </tr>
474
                        <tr className="border-bottom">
475
                          <th className="pl-0 pb-0">综合效率</th>
476
                          <th className="pr-0 text-right">0%</th>
477
                        </tr>
478
                        <tr className="border-bottom">
479
                          <th className="pl-0 pb-0">放电达成率</th>
480
                          <th className="pr-0 text-right">0%</th>
481
                        </tr>
482
                      </tbody>
483
                    </Table>
484
                  </CardBody>
485
                </Fragment>
486
              </Card>
487
            </TabPane>
488
            <TabPane tabId="2">
489
              <Card className="mb-3 fs--1">
490
                <Fragment>
491
                  <CardBody className="pt-0">
492
                    <Table borderless className="fs--1 mb-0">
493
                      <tbody>
494
                        <tr className="border-bottom">
495
                          <th className="pl-0">今日成本</th>
496
                          <th className="pr-0 text-right">0 元</th>
497
                        </tr>
498
                        <tr className="border-bottom">
499
                          <th className="pl-0">今日收入</th>
500
                          <th className="pr-0 text-right ">0 元</th>
501
                        </tr>
502
                        <tr className="border-bottom">
503
                          <th className="pl-0 pb-0">累计成本</th>
504
                          <th className="pr-0 text-right">0 元</th>
505
                        </tr>
506
                        <tr className="border-bottom">
507
                          <th className="pl-0 pb-0">累计收入</th>
508
                          <th className="pr-0 text-right">0 元</th>
509
                        </tr>
510
                        <tr className="border-bottom">
511
                          <th className="pl-0 pb-0">今日盈利</th>
512
                          <th className="pr-0 text-right">0 元</th>
513
                        </tr>
514
                        <tr className="border-bottom">
515
                          <th className="pl-0 pb-0">累计盈利</th>
516
                          <th className="pr-0 text-right">0 元</th>
517
                        </tr>
518
                      </tbody>
519
                    </Table>
520
                  </CardBody>
521
                </Fragment>
522
              </Card>
523
            </TabPane>
524
            <TabPane tabId="3">
525
              <Card className="mb-3 fs--1">
526
                <Fragment>
527
                  <CardBody className="pt-0">
528
                    <Table borderless className="fs--1 mb-0">
529
                      <tbody>
530
                        <tr className="border-bottom">
531
                          <th className="pl-0">今日充电量</th>
532
                          <th className="pr-0 text-right">0 kWh</th>
533
                        </tr>
534
                        <tr className="border-bottom">
535
                          <th className="pl-0">今日放电量</th>
536
                          <th className="pr-0 text-right ">0 kWh</th>
537
                        </tr>
538
                        <tr className="border-bottom">
539
                          <th className="pl-0 pb-0">累计充电量</th>
540
                          <th className="pr-0 text-right">0 kWh</th>
541
                        </tr>
542
                        <tr className="border-bottom">
543
                          <th className="pl-0 pb-0">累计放电量</th>
544
                          <th className="pr-0 text-right">0 kWh</th>
545
                        </tr>
546
                        <tr className="border-bottom">
547
                          <th className="pl-0 pb-0">综合效率</th>
548
                          <th className="pr-0 text-right">0%</th>
549
                        </tr>
550
                        <tr className="border-bottom">
551
                          <th className="pl-0 pb-0">放电达成率</th>
552
                          <th className="pr-0 text-right">0%</th>
553
                        </tr>
554
                      </tbody>
555
                    </Table>
556
                  </CardBody>
557
                </Fragment>
558
              </Card>
559
            </TabPane>
560
          </TabContent>
561
        </Col>
562
        <Col lg="6" className="pr-lg-2" key={uuidv4()}>
563
          <div dangerouslySetInnerHTML={energyStoragePowerStationSVG} />
564
        </Col>
565
        <Col lg="3" className="pr-lg-2">
566
          <Nav tabs>
567
            <NavItem className="cursor-pointer">
568
              <NavLink
569
                className={classNames({ active: activeTabRight === '1' })}
570
                onClick={() => {
571
                  toggleTabRight('1');
572
                }}
573
              >
574
                <h6>设备状态</h6>
575
              </NavLink>
576
            </NavItem>
577
            <NavItem className="cursor-pointer">
578
              <NavLink
579
                className={classNames({ active: activeTabRight === '2' })}
580
                onClick={() => {
581
                  toggleTabRight('2');
582
                }}
583
              >
584
                <h6>电站信息</h6>
585
              </NavLink>
586
            </NavItem>
587
          </Nav>
588
          <TabContent activeTab={activeTabRight}>
589
            <TabPane tabId="1">
590
              <Card className="mb-3 fs--1">
591
                <Fragment>
592
                  <CardBody className="pt-0">
593
                    <Table borderless className="fs--1 mb-0">
594
                      <tbody>
595
                        <tr className="border-bottom">
596
                          <th className="pl-0 pb-0">通信网关</th>
597
                          <th className="pr-0 text-right">正常</th>
598
                        </tr>
599
                        <tr className="border-bottom">
600
                          <th className="pl-0">1# PCS</th>
601
                          <th className="pr-0 text-right">正常</th>
602
                        </tr>
603
                        <tr className="border-bottom">
604
                          <th className="pl-0">1#电池堆</th>
605
                          <th className="pr-0 text-right ">正常</th>
606
                        </tr>
607
                        <tr className="border-bottom">
608
                          <th className="pl-0 pb-0">1#空调</th>
609
                          <th className="pr-0 text-right">正常</th>
610
                        </tr>
611
                        <tr className="border-bottom">
612
                          <th className="pl-0 pb-0">1#网关表</th>
613
                          <th className="pr-0 text-right">正常</th>
614
                        </tr>
615
                        <tr className="border-bottom">
616
                          <th className="pl-0 pb-0">1#用户表</th>
617
                          <th className="pr-0 text-right">正常</th>
618
                        </tr>
619
                      </tbody>
620
                    </Table>
621
                  </CardBody>
622
                </Fragment>
623
              </Card>
624
            </TabPane>
625
            <TabPane tabId="2">
626
              <Card className="mb-3 fs--1">
627
                <Fragment>
628
                  <CardBody className="pt-0">
629
                    <Table borderless className="fs--1 mb-0">
630
                      <tbody>
631
                        <tr className="border-bottom">
632
                          <th className="pl-0">{t('Name')}</th>
633
                          <th className="pr-0 text-right">{energyStoragePowerStationName}</th>
634
                        </tr>
635
                        <tr className="border-bottom">
636
                          <th className="pl-0">{t('Address')}</th>
637
                          <th className="pr-0 text-right ">{energyStoragePowerStationAddress}</th>
638
                        </tr>
639
                        <tr className="border-bottom">
640
                          <th className="pl-0 pb-0">{t('Postal Code')}</th>
641
                          <th className="pr-0 text-right">{energyStoragePowerStationPostalCode}</th>
642
                        </tr>
643
                        <tr className="border-bottom">
644
                          <th className="pl-0 pb-0">{t('Rated Capacity')} </th>
645
                          <th className="pr-0 text-right">{energyStoragePowerStationRatedCapacity} kW</th>
646
                        </tr>
647
                        <tr className="border-bottom">
648
                          <th className="pl-0 pb-0">{t('Rated Power')} </th>
649
                          <th className="pr-0 text-right">{energyStoragePowerStationRatedPower} kW</th>
650
                        </tr>
651
                      </tbody>
652
                    </Table>
653
                  </CardBody>
654
                </Fragment>
655
              </Card>
656
            </TabPane>
657
          </TabContent>
658
        </Col>
659
      </Row>
660
661
      <Nav tabs>
662
        <NavItem className="cursor-pointer">
663
          <NavLink
664
            className={classNames({ active: activeTabBottom === '1' })}
665
            onClick={() => {
666
              toggleTabBottom('1');
667
            }}
668
          >
669
            <h6>{t('Operating Characteristic Curve')}</h6>
670
          </NavLink>
671
        </NavItem>
672
        <NavItem className="cursor-pointer">
673
          <NavLink
674
            className={classNames({ active: activeTabBottom === '2' })}
675
            onClick={() => {
676
              toggleTabBottom('2');
677
            }}
678
          >
679
            <h6>{t('Strategy Management')}</h6>
680
          </NavLink>
681
        </NavItem>
682
        <NavItem className="cursor-pointer">
683
          <NavLink
684
            className={classNames({ active: activeTabBottom === '3' })}
685
            onClick={() => {
686
              toggleTabBottom('3');
687
            }}
688
          >
689
            <h6>{t('Fault Alarms')}</h6>
690
          </NavLink>
691
        </NavItem>
692
693
        <NavItem className="cursor-pointer">
694
          <NavLink
695
            className={classNames({ active: activeTabBottom === '4' })}
696
            onClick={() => {
697
              toggleTabBottom('4');
698
            }}
699
          >
700
            <h6>PCS</h6>
701
          </NavLink>
702
        </NavItem>
703
704
        <NavItem className="cursor-pointer">
705
          <NavLink
706
            className={classNames({ active: activeTabBottom === '5' })}
707
            onClick={() => {
708
              toggleTabBottom('5');
709
            }}
710
          >
711
            <h6>BMS</h6>
712
          </NavLink>
713
        </NavItem>
714
715
        <NavItem className="cursor-pointer">
716
          <NavLink
717
            className={classNames({ active: activeTabBottom === '6' })}
718
            onClick={() => {
719
              toggleTabBottom('6');
720
            }}
721
          >
722
            <h6>电表</h6>
723
          </NavLink>
724
        </NavItem>
725
726
        <NavItem className="cursor-pointer">
727
          <NavLink
728
            className={classNames({ active: activeTabBottom === '7' })}
729
            onClick={() => {
730
              toggleTabBottom('7');
731
            }}
732
          >
733
            <h6>空调</h6>
734
          </NavLink>
735
        </NavItem>
736
737
        <NavItem className="cursor-pointer">
738
          <NavLink
739
            className={classNames({ active: activeTabBottom === '8' })}
740
            onClick={() => {
741
              toggleTabBottom('8');
742
            }}
743
          >
744
            <h6>消防</h6>
745
          </NavLink>
746
        </NavItem>
747
      </Nav>
748
      <TabContent activeTab={activeTabBottom}>
749
        <TabPane tabId="1">
750
          <MultipleLineChart
751
            reportingTitle=""
752
            baseTitle=""
753
            labels={parameterLineChartLabels}
754
            data={parameterLineChartData}
755
            options={parameterLineChartOptions}
756
          />
757
        </TabPane>
758
        <TabPane tabId="2">
759
          <Card className="mb-3 fs--1">
760
            <CardBody className="bg-light">
761
              <SectionLineChart></SectionLineChart>
762
            </CardBody>
763
          </Card>
764
        </TabPane>
765
        <TabPane tabId="3">
766
          <Card className="mb-3 fs--1">
767
            <CardBody className="bg-light">
768
              <Table striped className="border-bottom">
769
                <thead>
770
                  <tr>
771
                    <th>#</th>
772
                    <th>主题</th>
773
                    <th>内容</th>
774
                    <th>创建时间</th>
775
                    <th>开始时间</th>
776
                    <th>结束时间</th>
777
                    <th>状态</th>
778
                    <th>更新时间</th>
779
                  </tr>
780
                </thead>
781
                <tbody>
782
                  <tr>
783
                    <th scope="row">1</th>
784
                    <td />
785
                    <td />
786
                    <td />
787
                    <td />
788
                    <td />
789
                    <td />
790
                    <td />
791
                  </tr>
792
                  <tr>
793
                    <th scope="row">2</th>
794
                    <td />
795
                    <td />
796
                    <td />
797
                    <td />
798
                    <td />
799
                    <td />
800
                    <td />
801
                  </tr>
802
                  <tr>
803
                    <th scope="row">3</th>
804
                    <td />
805
                    <td />
806
                    <td />
807
                    <td />
808
                    <td />
809
                    <td />
810
                    <td />
811
                  </tr>
812
                  <tr>
813
                    <th scope="row">4</th>
814
                    <td />
815
                    <td />
816
                    <td />
817
                    <td />
818
                    <td />
819
                    <td />
820
                    <td />
821
                  </tr>
822
                </tbody>
823
              </Table>
824
            </CardBody>
825
          </Card>
826
        </TabPane>
827
        <TabPane tabId="4">
828
          <Card className="mb-3 fs--1">
829
            <CardBody className="bg-light">
830
              <Table striped className="border-bottom">
831
                <thead>
832
                  <tr>
833
                    <th>#</th>
834
                    <th>主题</th>
835
                    <th>内容</th>
836
                    <th>创建时间</th>
837
                    <th>开始时间</th>
838
                    <th>结束时间</th>
839
                    <th>状态</th>
840
                    <th>更新时间</th>
841
                  </tr>
842
                </thead>
843
                <tbody>
844
                  <tr>
845
                    <th scope="row">1</th>
846
                    <td />
847
                    <td />
848
                    <td />
849
                    <td />
850
                    <td />
851
                    <td />
852
                    <td />
853
                  </tr>
854
                  <tr>
855
                    <th scope="row">2</th>
856
                    <td />
857
                    <td />
858
                    <td />
859
                    <td />
860
                    <td />
861
                    <td />
862
                    <td />
863
                  </tr>
864
                  <tr>
865
                    <th scope="row">3</th>
866
                    <td />
867
                    <td />
868
                    <td />
869
                    <td />
870
                    <td />
871
                    <td />
872
                    <td />
873
                  </tr>
874
                  <tr>
875
                    <th scope="row">4</th>
876
                    <td />
877
                    <td />
878
                    <td />
879
                    <td />
880
                    <td />
881
                    <td />
882
                    <td />
883
                  </tr>
884
                </tbody>
885
              </Table>
886
            </CardBody>
887
          </Card>
888
        </TabPane>
889
        <TabPane tabId="5">
890
          <Card className="mb-3 fs--1">
891
            <CardBody className="bg-light">
892
              <Table striped className="border-bottom">
893
                <thead>
894
                  <tr>
895
                    <th>#</th>
896
                    <th>主题</th>
897
                    <th>内容</th>
898
                    <th>创建时间</th>
899
                    <th>开始时间</th>
900
                    <th>结束时间</th>
901
                    <th>状态</th>
902
                    <th>更新时间</th>
903
                  </tr>
904
                </thead>
905
                <tbody>
906
                  <tr>
907
                    <th scope="row">1</th>
908
                    <td />
909
                    <td />
910
                    <td />
911
                    <td />
912
                    <td />
913
                    <td />
914
                    <td />
915
                  </tr>
916
                  <tr>
917
                    <th scope="row">2</th>
918
                    <td />
919
                    <td />
920
                    <td />
921
                    <td />
922
                    <td />
923
                    <td />
924
                    <td />
925
                  </tr>
926
                  <tr>
927
                    <th scope="row">3</th>
928
                    <td />
929
                    <td />
930
                    <td />
931
                    <td />
932
                    <td />
933
                    <td />
934
                    <td />
935
                  </tr>
936
                  <tr>
937
                    <th scope="row">4</th>
938
                    <td />
939
                    <td />
940
                    <td />
941
                    <td />
942
                    <td />
943
                    <td />
944
                    <td />
945
                  </tr>
946
                </tbody>
947
              </Table>
948
            </CardBody>
949
          </Card>
950
        </TabPane>
951
        <TabPane tabId="6">
952
          <Card className="mb-3 fs--1">
953
            <CardBody className="bg-light">
954
              <Table striped className="border-bottom">
955
                <thead>
956
                  <tr>
957
                    <th>#</th>
958
                    <th>主题</th>
959
                    <th>内容</th>
960
                    <th>创建时间</th>
961
                    <th>开始时间</th>
962
                    <th>结束时间</th>
963
                    <th>状态</th>
964
                    <th>更新时间</th>
965
                  </tr>
966
                </thead>
967
                <tbody>
968
                  <tr>
969
                    <th scope="row">1</th>
970
                    <td />
971
                    <td />
972
                    <td />
973
                    <td />
974
                    <td />
975
                    <td />
976
                    <td />
977
                  </tr>
978
                  <tr>
979
                    <th scope="row">2</th>
980
                    <td />
981
                    <td />
982
                    <td />
983
                    <td />
984
                    <td />
985
                    <td />
986
                    <td />
987
                  </tr>
988
                  <tr>
989
                    <th scope="row">3</th>
990
                    <td />
991
                    <td />
992
                    <td />
993
                    <td />
994
                    <td />
995
                    <td />
996
                    <td />
997
                  </tr>
998
                  <tr>
999
                    <th scope="row">4</th>
1000
                    <td />
1001
                    <td />
1002
                    <td />
1003
                    <td />
1004
                    <td />
1005
                    <td />
1006
                    <td />
1007
                  </tr>
1008
                </tbody>
1009
              </Table>
1010
            </CardBody>
1011
          </Card>
1012
        </TabPane>
1013
        <TabPane tabId="7">
1014
          <Card className="mb-3 fs--1">
1015
            <CardBody className="bg-light">
1016
              <Table striped className="border-bottom">
1017
                <thead>
1018
                  <tr>
1019
                    <th>#</th>
1020
                    <th>主题</th>
1021
                    <th>内容</th>
1022
                    <th>创建时间</th>
1023
                    <th>开始时间</th>
1024
                    <th>结束时间</th>
1025
                    <th>状态</th>
1026
                    <th>更新时间</th>
1027
                  </tr>
1028
                </thead>
1029
                <tbody>
1030
                  <tr>
1031
                    <th scope="row">1</th>
1032
                    <td />
1033
                    <td />
1034
                    <td />
1035
                    <td />
1036
                    <td />
1037
                    <td />
1038
                    <td />
1039
                  </tr>
1040
                  <tr>
1041
                    <th scope="row">2</th>
1042
                    <td />
1043
                    <td />
1044
                    <td />
1045
                    <td />
1046
                    <td />
1047
                    <td />
1048
                    <td />
1049
                  </tr>
1050
                  <tr>
1051
                    <th scope="row">3</th>
1052
                    <td />
1053
                    <td />
1054
                    <td />
1055
                    <td />
1056
                    <td />
1057
                    <td />
1058
                    <td />
1059
                  </tr>
1060
                  <tr>
1061
                    <th scope="row">4</th>
1062
                    <td />
1063
                    <td />
1064
                    <td />
1065
                    <td />
1066
                    <td />
1067
                    <td />
1068
                    <td />
1069
                  </tr>
1070
                </tbody>
1071
              </Table>
1072
            </CardBody>
1073
          </Card>
1074
        </TabPane>
1075
        <TabPane tabId="8">
1076
          <Card className="mb-3 fs--1">
1077
            <CardBody className="bg-light">
1078
              <Table striped className="border-bottom">
1079
                <thead>
1080
                  <tr>
1081
                    <th>#</th>
1082
                    <th>主题</th>
1083
                    <th>内容</th>
1084
                    <th>创建时间</th>
1085
                    <th>开始时间</th>
1086
                    <th>结束时间</th>
1087
                    <th>状态</th>
1088
                    <th>更新时间</th>
1089
                  </tr>
1090
                </thead>
1091
                <tbody>
1092
                  <tr>
1093
                    <th scope="row">1</th>
1094
                    <td />
1095
                    <td />
1096
                    <td />
1097
                    <td />
1098
                    <td />
1099
                    <td />
1100
                    <td />
1101
                  </tr>
1102
                  <tr>
1103
                    <th scope="row">2</th>
1104
                    <td />
1105
                    <td />
1106
                    <td />
1107
                    <td />
1108
                    <td />
1109
                    <td />
1110
                    <td />
1111
                  </tr>
1112
                  <tr>
1113
                    <th scope="row">3</th>
1114
                    <td />
1115
                    <td />
1116
                    <td />
1117
                    <td />
1118
                    <td />
1119
                    <td />
1120
                    <td />
1121
                  </tr>
1122
                  <tr>
1123
                    <th scope="row">4</th>
1124
                    <td />
1125
                    <td />
1126
                    <td />
1127
                    <td />
1128
                    <td />
1129
                    <td />
1130
                    <td />
1131
                  </tr>
1132
                </tbody>
1133
              </Table>
1134
            </CardBody>
1135
          </Card>
1136
        </TabPane>
1137
      </TabContent>
1138
    </Fragment>
1139
  );
1140
};
1141
1142
export default withTranslation()(withRedirect(EnergyStoragePowerStationDetails));
1143