updated energy storage power station dashboard in myems-web

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

@@ -19,13 +19,12 @@ const BestSellingProducts = ({ products }) => {
         <Table borderless className="table-dashboard mb-0 fs--1">
           <thead className="bg-light">
             <tr className="text-900">
-              <th>电站收益排名</th>
+              <th>电站</th>
               <th className="text-right">
-                Revenue ({currency}
-                {totalPrice})
+                数据
               </th>
               <th className="pr-card text-right" style={{ width: '8rem' }}>
-                Revenue (%)
+                占比 (%)
               </th>
             </tr>
           </thead>
@@ -46,14 +45,14 @@ const BestSellingProducts = ({ products }) => {
         <Row className="flex-between-center">
           <Col xs="auto">
             <CustomInput type="select" id="exampleCustomSelect" bsSize="sm">
-              <option>Last 7 days</option>
-              <option>Last Month</option>
-              <option>Last Year</option>
+              <option>最近7天</option>
+              <option>最近1月</option>
+              <option>最近1年</option>
             </CustomInput>
           </Col>
           <Col xs="auto">
             <Button color="falcon-default" size="sm" tag={Link} to="#!">
-              View All
+              全部
             </Button>
           </Col>
         </Row>

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

 import React, { Fragment, useEffect, useState } from 'react';
 import CountUp from 'react-countup';
-import { Col, Row, Spinner } from 'reactstrap';
+import { Col, Row, Spinner, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import Weather from './Weather';
 import weather from '../../../data/dashboard/weather';
 import WeeklySales from './WeeklySales';
@@ -8,7 +8,6 @@ import weeklySales from '../../../data/dashboard/weeklySales';
 import BestSellingProducts from './BestSellingProducts';
 import products from '../../../data/dashboard/products';
 import RecentPurchasesTable from './RecentPuchasesTable';
-import ActiveUsersBarChart from './ActiveUsersBarChart';
 
 import CardSummary from '../common/CardSummary';
 import LineChart from '../common/LineChart';
@@ -25,14 +24,12 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 import { Chart as ChartJS } from 'chart.js';
 import BarChart from '../common/BarChart';
 import ChartSpacesStackBar from '../common/ChartSpacesStackBar';
-import RealtimeSensor from '../common/RealtimeSensor';
 import { getItemFromStore } from '../../../helpers/utils';
 import CustomizeMapBox from '../common/CustomizeMapBox';
+import classNames from 'classnames';
 
 ChartJS.register(annotationPlugin);
 
-const ChildSpacesTable = loadable(() => import('../common/ChildSpacesTable'));
-
 const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
   let current_moment = moment();
   const [isFetchDashboard, setIsFetchDashboard] = useState(true);
@@ -48,8 +45,15 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
     current_moment.clone().startOf('year')
   );
   const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
-
   const [spinnerHidden, setSpinnerHidden] = useState(false);
+  const [activeTabLeft, setActiveTabLeft] = useState('1');
+  const toggleTabLeft = tab => {
+    if (activeTabLeft !== tab) setActiveTabLeft(tab);
+  };
+  const [activeTabRight, setActiveTabRight] = useState('1');
+  const toggleTabRight = tab => {
+    if (activeTabRight !== tab) setActiveTabRight(tab);
+  };
 
   //Results
   const [costShareData, setCostShareData] = useState([]);
@@ -685,7 +689,36 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
 
       <Row noGutters>
         <Col lg={3} xl={3} className="mb-3 pr-lg-2 mb-3">
-          <BestSellingProducts products={products} />
+          <Nav tabs>
+            <NavItem className="cursor-pointer">
+              <NavLink
+                className={classNames({ active: activeTabLeft === '1' })}
+                onClick={() => {
+                  toggleTabLeft('1');
+                }}
+              >
+                收入排名
+              </NavLink>
+            </NavItem>
+            <NavItem className="cursor-pointer">
+              <NavLink
+                className={classNames({ active: activeTabLeft === '2' })}
+                onClick={() => {
+                  toggleTabLeft('2');
+                }}
+              >
+                利润排名
+              </NavLink>
+            </NavItem>
+          </Nav>
+          <TabContent activeTab={activeTabLeft}>
+            <TabPane tabId="1">
+              <BestSellingProducts products={products} />
+            </TabPane>
+            <TabPane tabId="2">
+              <BestSellingProducts products={products} />
+            </TabPane>
+          </TabContent>
         </Col>
         <Col lg={6} xl={6} className="mb-3 pr-lg-2 mb-3">
           {settings.showOnlineMap ? (
@@ -702,49 +735,39 @@ const Dashboard = ({ setRedirect, setRedirectUrl, t }) => {
           )}
         </Col>
         <Col lg={3} xl={3} className="mb-3 pr-lg-2 mb-3">
-          <ActiveUsersBarChart />
-        </Col>
-      </Row>
-      <div className="card-deck">
-        <BarChart
-          labels={barLabels}
-          data={lastYearBarList}
-          compareData={thisYearBarList}
-          title={'逐月放电量对比 '}
-          compareTitle={t('This Year')}
-          footnote={t('Per Unit Area')}
-          footunit={'/M²'}
-        />
-        <LineChart
-          reportingTitle={'逐月成本趋势'}
-          baseTitle=""
-          labels={spaceInputLineChartLabels}
-          data={spaceInputLineChartData}
-          options={spaceInputLineChartOptions}
-        />
-        <LineChart
-          reportingTitle={'逐月收益趋势'}
-          baseTitle=""
-          labels={spaceCostLineChartLabels}
-          data={spaceCostLineChartData}
-          options={spaceCostLineChartOptions}
-        />
-      </div>
-      <div className="wrapper" />
-      <Row noGutters>
-        <Col className="mb-3 pr-lg-2">
-          <WeeklySales data={weeklySales} />
-        </Col>
-        <Col className="mb-3 pr-lg-2">
-          <SharePie data={costShareData} title={'节约二氧化碳排放量'} />
-        </Col>
-        <Col className="mb-3 pr-lg-2">
-          <SharePie data={TCEShareData} title={'故障告警统计'} />
-        </Col>
-        <Col md={6} className="col-xxl-3 mb-3 pl-md-2">
-          <Weather data={weather} className="h-md-100" />
+          <Nav tabs>
+            <NavItem className="cursor-pointer">
+              <NavLink
+                className={classNames({ active: activeTabLeft === '1' })}
+                onClick={() => {
+                  toggleTabLeft('1');
+                }}
+              >
+                充电量排名
+              </NavLink>
+            </NavItem>
+            <NavItem className="cursor-pointer">
+              <NavLink
+                className={classNames({ active: activeTabLeft === '2' })}
+                onClick={() => {
+                  toggleTabLeft('2');
+                }}
+              >
+                放电量排名
+              </NavLink>
+            </NavItem>
+          </Nav>
+          <TabContent activeTab={activeTabLeft}>
+            <TabPane tabId="1">
+              <BestSellingProducts products={products} />
+            </TabPane>
+            <TabPane tabId="2">
+              <BestSellingProducts products={products} />
+            </TabPane>
+          </TabContent>
         </Col>
       </Row>
+
       <RecentPurchasesTable />
     </Fragment>
   );

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

@@ -7,7 +7,7 @@ import { Button, Col, Row } from 'reactstrap';
 import ButtonIcon from '../../common/ButtonIcon';
 import { Link } from 'react-router-dom';
 
-import purchases from '../../../data/dashboard/purchaseList';
+import purchases from './stationlist';
 
 const CustomTotal = ({ sizePerPage, totalSize, page, lastIndex }) => (
   <span>
@@ -26,20 +26,25 @@ const badgeFormatter = status => {
   let icon = '';
   let text = '';
   switch (status) {
-    case 'success':
+    case 'charging':
       color = 'success';
       icon = 'check';
-      text = 'Success';
+      text = 'Charging';
       break;
-    case 'blocked':
+    case 'discharging':
+      color = 'success';
+      icon = 'check';
+      text = 'Discharging';
+      break;
+    case 'offline':
       color = 'secondary';
       icon = 'ban';
-      text = 'Blocked';
+      text = 'Offline';
       break;
     default:
       color = 'warning';
       icon = 'stream';
-      text = 'Pending';
+      text = 'Idling';
   }
   return (
     <Badge color={`soft-${color}`} className="rounded-capsule">
@@ -49,7 +54,8 @@ const badgeFormatter = status => {
   );
 };
 
-const amountFormatter = amount => <Fragment>{amount}kWh</Fragment>;
+const capacityFormatter = amount => <Fragment>{amount} kWh</Fragment>;
+const powerFormatter = amount => <Fragment>{amount} kW</Fragment>;
 
 const columns = [
   {
@@ -61,18 +67,27 @@ const columns = [
     sort: true
   },
   {
-    dataField: 'email',
-    text: 'Email',
+    dataField: 'product',
+    text: '地址',
     classes: 'border-0 align-middle',
     headerClasses: 'border-0',
     sort: true
   },
   {
-    dataField: 'product',
-    text: '地址',
+    dataField: 'amount',
+    text: '额定容量',
+    formatter: capacityFormatter,
     classes: 'border-0 align-middle',
     headerClasses: 'border-0',
-    sort: true
+    sort: true,
+  },
+  {
+    dataField: 'amount',
+    text: '额定功率',
+    formatter: powerFormatter,
+    classes: 'border-0 align-middle',
+    headerClasses: 'border-0',
+    sort: true,
   },
   {
     dataField: 'status',
@@ -80,14 +95,6 @@ const columns = [
     formatter: badgeFormatter,
     classes: 'border-0 align-middle fs-0',
     headerClasses: 'border-0',
-    sort: true
-  },
-  {
-    dataField: 'amount',
-    text: '剩余电量',
-    formatter: amountFormatter,
-    classes: 'border-0 align-middle',
-    headerClasses: 'border-0',
     sort: true,
     align: 'right',
     headerAlign: 'right'
@@ -185,7 +192,7 @@ const PurchasesTable = ({ setIsSelected }) => {
                   className="px-0 font-weight-semi-bold"
                   onClick={() => handleViewAll(paginationProps, purchases.length)}
                 >
-                  view all
+                  全部
                 </ButtonIcon>
               </Col>
               <Col xs="auto" className="pr-3">
@@ -196,7 +203,7 @@ const PurchasesTable = ({ setIsSelected }) => {
                   disabled={paginationProps.page === 1}
                   className="px-4"
                 >
-                  Previous
+                  前一页
                 </Button>
                 <Button
                   color={lastIndex >= paginationProps.totalSize ? 'light' : 'primary'}
@@ -205,7 +212,7 @@ const PurchasesTable = ({ setIsSelected }) => {
                   disabled={lastIndex >= paginationProps.totalSize}
                   className="px-4 ml-2"
                 >
-                  Next
+                  下一页
                 </Button>
               </Col>
             </Row>

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

+import React from 'react';
+
+const result = [
+  {
+    id: 1,
+    customer: 'Sylvia Plath',
+    email: 'john@gmail.com',
+    product: 'Slick - Drag & Drop Bootstrap Generator',
+    status: 'charging',
+    amount: 99
+  },
+  {
+    id: 2,
+    customer: 'Homer',
+    email: 'sylvia@mail.ru',
+    product: 'Bose SoundSport Wireless Headphones',
+    status: 'charging',
+    amount: 634
+  },
+  {
+    id: 3,
+    customer: 'Edgar Allan Poe',
+    email: 'edgar@yahoo.com',
+    product: 'All-New Fire HD 8 Kids Edition Tablet',
+    status: 'offline',
+    amount: 199
+  },
+  {
+    id: 4,
+    customer: 'William Butler Yeats',
+    email: 'william@gmail.com',
+    product: 'Apple iPhone XR (64GB)',
+    status: 'charging',
+    amount: 798
+  },
+  {
+    id: 5,
+    customer: 'Rabindranath Tagore',
+    email: 'tagore@twitter.com',
+    product: 'ASUS Chromebook C202SA-YS02 11.6"',
+    status: 'offline',
+    amount: 318
+  },
+  {
+    id: 6,
+    customer: 'Emily Dickinson',
+    email: 'emily@gmail.com',
+    product: 'Mirari OK to Wake! Alarm Clock & Night-Light',
+    status: 'discharging',
+    amount: 11
+  },
+  {
+    id: 7,
+    customer: 'Giovanni Boccaccio',
+    email: 'giovanni@outlook.com',
+    product: 'Summer Infant Contoured Changing Pad',
+    status: 'charging',
+    amount: 31
+  },
+  {
+    id: 8,
+    customer: 'Oscar Wilde',
+    email: 'oscar@hotmail.com',
+    product: 'Munchkin 6 Piece Fork and Spoon Set',
+    status: 'idling',
+    amount: 43
+  },
+  {
+    id: 9,
+    customer: 'John Doe',
+    email: 'doe@gmail.com',
+    product: 'Falcon - Responsive Dashboard Template',
+    status: 'charging',
+    amount: 57
+},
+  {
+    id: 10,
+    customer: 'Emma Watson',
+    email: 'emma@gmail.com',
+    product: 'Apple iPhone XR (64GB)',
+    status: 'offline',
+    amount: 999
+  },
+  {
+    id: 11,
+    customer: 'Sylvia Plath',
+    email: 'plath@yahoo.com',
+    product: 'All-New Fire HD 8 Kids Edition Tablet',
+    status: 'idling',
+    amount: 199
+  },
+  {
+    id: 12,
+    customer: 'Iori Kim',
+    email: 'ikim@yahoo.com',
+    product: 'ASUS Chromebook C202SA-YS02 11.6"',
+    status: 'idling',
+    amount: 200
+  }
+];
+
+export default result;