Merge branch 'develop'

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

@@ -70,10 +70,6 @@ const EnergyStoragePowerStationDetails = ({ setRedirect, setRedirectUrl, t }) =>
     if (activeTabLeft !== tab) setActiveTabLeft(tab);
   };
 
-  const [activeTabMiddle, setActiveTabMiddle] = useState('1');
-  const toggleTabMiddle = tab => {
-    if (activeTabMiddle !== tab) setActiveTabMiddle(tab);
-  };
   const [activeTabRight, setActiveTabRight] = useState('1');
   const toggleTabRight = tab => {
     if (activeTabRight !== tab) setActiveTabRight(tab);
@@ -905,9 +901,9 @@ const EnergyStoragePowerStationDetails = ({ setRedirect, setRedirectUrl, t }) =>
           <Nav tabs>
             <NavItem className="cursor-pointer">
               <NavLink
-                className={classNames({ active: activeTabMiddle === '1' })}
+                className={classNames({ active: activeTabRight === '1' })}
                 onClick={() => {
-                  toggleTabMiddle('1');
+                  toggleTabRight('1');
                 }}
               >
                 <h6>设备状态</h6>
@@ -915,16 +911,16 @@ const EnergyStoragePowerStationDetails = ({ setRedirect, setRedirectUrl, t }) =>
             </NavItem>
             <NavItem className="cursor-pointer">
               <NavLink
-                className={classNames({ active: activeTabRight === '3' })}
+                className={classNames({ active: activeTabRight === '2' })}
                 onClick={() => {
-                  toggleTabRight('3');
+                  toggleTabRight('2');
                 }}
               >
                 <h6>电站信息</h6>
               </NavLink>
             </NavItem>
           </Nav>
-          <TabContent activeTab={activeTabMiddle}>
+          <TabContent activeTab={activeTabRight}>
             <TabPane tabId="1">
               <Card className="mb-3 fs--1">
                 <Fragment>
@@ -987,21 +983,12 @@ const EnergyStoragePowerStationDetails = ({ setRedirect, setRedirectUrl, t }) =>
                           <th className="pl-0 pb-0">{t('Rated Power')} </th>
                           <th className="pr-0 text-right">{energyStoragePowerStationRatedPower} kW</th>
                         </tr>
-                        <tr className="border-bottom">
-                          <th className="pl-0 pb-0">{t('Latitude')}</th>
-                          <th className="pr-0 text-right">{energyStoragePowerStationLatitude}</th>
-                        </tr>
-                        <tr className="border-bottom">
-                          <th className="pl-0 pb-0">{t('Longitude')}</th>
-                          <th className="pr-0 text-right">{energyStoragePowerStationLongitude}</th>
-                        </tr>
                       </tbody>
                     </Table>
                   </CardBody>
                 </Fragment>
               </Card>
             </TabPane>
-
           </TabContent>
         </Col>
       </Row>

myems-web/src/components/MyEMS/Microgrid/MicrogridTable.js

@@ -52,8 +52,10 @@ const badgeFormatter = status => {
   );
 };
 
+const energyFormatter = amount => <Fragment>{amount} kWh</Fragment>;
 const capacityFormatter = amount => <Fragment>{amount} kWh</Fragment>;
 const powerFormatter = amount => <Fragment>{amount} kW</Fragment>;
+const currencyFormatter = amount => <Fragment>{amount} </Fragment>;
 
 const columns = [
   {
@@ -71,6 +73,30 @@ const columns = [
     headerClasses: 'border-0',
     sort: true
   },
+  {
+    dataField: 'total_charge',
+    text: 'Total Charge',
+    formatter: energyFormatter,
+    classes: 'border-0 align-middle',
+    headerClasses: 'border-0',
+    sort: true,
+  },
+  {
+    dataField: 'total_discharge',
+    text: 'Total Discharge',
+    formatter: energyFormatter,
+    classes: 'border-0 align-middle',
+    headerClasses: 'border-0',
+    sort: true,
+  },
+  {
+    dataField: 'total_revenue',
+    text: 'Total Revenue',
+    formatter: currencyFormatter,
+    classes: 'border-0 align-middle',
+    headerClasses: 'border-0',
+    sort: true,
+  },
   {
     dataField: 'rated_capacity',
     text: 'Rated Capacity',

myems-web/src/components/MyEMS/Microgrid/StackBarChart.js

+import React, { useState, useContext, useEffect, useRef, Fragment } from 'react';
+import { rgbaColor, themeColors, isIterableArray } from '../../../helpers/utils';
+import FalconCardHeader from '../../common/FalconCardHeader';
+import { Row, Col, Card, CardBody, CustomInput } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import { Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  LogarithmicScale
+} from 'chart.js';
+import AppContext from '../../../context/Context';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend, LogarithmicScale);
+
+const StackBarChart = ({ labels, chargeData, dischargeData, stations, t }) => {
+  const colors = ['#2c7be5', '#00d27a', '#27bcfd', '#f5803e', '#e63757'];
+  const [selectedLabel, setSelectedLabel] = useState('a0');
+  const [option, setOption] = useState('a0');
+  const { isDark } = useContext(AppContext);
+  const chartRef = useRef(null);
+  const [chartData, setChartData] = useState({
+    datasets: []
+  });
+
+  useEffect(() => {
+    const chart = chartRef.current;
+    let dataArray = [];
+    let index = option.substring(1);
+    if (chart) {
+      const ctx = chart.ctx;
+      const gradientFill = isDark
+        ? ctx.createLinearGradient(0, 0, 0, ctx.canvas.height)
+        : ctx.createLinearGradient(0, 0, 0, 250);
+      gradientFill.addColorStop(0, isDark ? 'rgba(44,123,229, 0.5)' : 'rgba(255, 255, 255, 0.3)');
+      gradientFill.addColorStop(1, isDark ? 'transparent' : 'rgba(255, 255, 255, 0)');
+      if (chargeData['subtotals_array'] !== undefined && chargeData['subtotals_array'].length > 0) {
+        let category = t('CATEGORY Consumption UNIT', {
+          CATEGORY: chargeData['energy_category_names'][index],
+          UNIT: chargeData['units'][index]
+        });
+        let stationArray = chargeData['station_names_array'][index];
+        chargeData['subtotals_array'][index].forEach((item, itemIndex) => {
+          dataArray.push({
+            label: stationArray[itemIndex] + ' ' + category,
+            stack: category,
+            data: item,
+            backgroundColor: colors[itemIndex % 5]
+          });
+        });
+      }
+      if (dischargeData['subtotals_array'] !== undefined && dischargeData['subtotals_array'].length > 0) {
+        let category = t('CATEGORY Costs UNIT', {
+          CATEGORY: dischargeData['energy_category_names'][index],
+          UNIT: dischargeData['units'][index]
+        });
+        let stationArray = dischargeData['station_names_array'][index];
+        dischargeData['subtotals_array'][index].forEach((item, itemIndex) => {
+          dataArray.push({
+            label: stationArray[itemIndex] + ' ' + category,
+            stack: category,
+            data: item,
+            backgroundColor: colors[itemIndex % 5]
+          });
+        });
+      }
+      setChartData({
+        labels: labels,
+        datasets: dataArray
+      });
+    }
+  }, [labels, chargeData, dischargeData, option]);
+  const options = {
+    scales: {
+      x: {
+        display: true,
+        ticks: {
+          fontColor: rgbaColor('#fff', 0.8),
+          fontStyle: 600,
+          color: isDark ? themeColors.light : themeColors.dark
+        },
+        stacked: true
+      },
+      y: {
+        display: true,
+        gridLines: {
+          color: rgbaColor('#000', 0.1)
+        },
+        ticks: {
+          color: isDark ? themeColors.light : themeColors.dark
+        },
+        stacked: true
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'x'
+    }
+  };
+  return (
+    <Fragment>
+      <Card className="mb-3">
+        <CardBody className="rounded-soft">
+          <Row className="text-white align-items-center no-gutters">
+            <Col>
+              <h4 className="text-lightSlateGray mb-0" />
+            </Col>
+            {isIterableArray(stations) && (
+              <Col xs="auto" className="d-none d-sm-block">
+                <CustomInput
+                  id="ddd"
+                  type="select"
+                  bsSize="sm"
+                  className="mb-3 shadow"
+                  value={option}
+                  onChange={({ target }) => {
+                    setOption(target.value);
+                    setSelectedLabel(target.value);
+                  }}
+                >
+                  {stations.map(({ value, label }) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </CustomInput>
+              </Col>
+            )}
+          </Row>
+          <Bar ref={chartRef} data={chartData} width={160} height={80} options={options} />
+        </CardBody>
+      </Card>
+    </Fragment>
+  );
+};
+
+export default withTranslation()(StackBarChart);