Lägga till en anpassad panel på instrumentpanelen i webbgränssnittet för fjärrövervakningslösningsacceleratorn

Artikel
10/05/2018

Den här artikeln visar hur du lägger till en ny panel på en instrumentpanelssida i webbgränssnittet för fjärrövervakningslösningsacceleratorn. Artikeln beskriver:

Förbereda en lokal utvecklingsmiljö.
Så här lägger du till en ny panel på en instrumentpanelssida i webbgränssnittet.

Exempelpanelen i den här artikeln visas på den befintliga instrumentpanelssidan.

Förutsättningar

För att slutföra stegen i den här instruktionsguiden behöver du följande programvara installerad på din lokala utvecklingsdator:

Git
Node.js

Innan du börjar

Du bör slutföra stegen i artikeln Lägg till en anpassad sida i webbgränssnittet för lösningsacceleratorn för fjärrövervakning innan du fortsätter.

Lägg till en panel

Om du vill lägga till en panel i webbgränssnittet måste du lägga till källfilerna som definierar panelen och sedan ändra instrumentpanelen för att visa panelen.

Lägg till de nya filerna som definierar panelen

För att komma igång innehåller mappen src/walkthrough/components/pages/dashboard/panels/examplePanel de filer som definierar en panel, inklusive:

examplePanel.js

import React, { Component } from 'react';

import {
  Panel,
  PanelHeader,
  PanelHeaderLabel,
  PanelContent,
} from 'components/pages/dashboard/panel';

import './examplePanel.scss';

export class ExamplePanel extends Component {
  constructor(props) {
    super(props);

    this.state = { isPending: true };
  }

  render() {
    const { t } = this.props;

    return (
      <Panel>
        <PanelHeader>
          <PanelHeaderLabel>{t('walkthrough.dashboard.panels.example.header')}</PanelHeaderLabel>
        </PanelHeader>
        <PanelContent className="example-panel-container">
          {t('walkthrough.dashboard.panels.example.panelBody')}
        </PanelContent>
      </Panel>
    );
  }
}

Kopiera mappen src/walkthrough/components/pages/dashboard/panels/examplePanel till mappen src/components/pages/dashboard/panels .

Lägg till följande export i filen src/walkthrough/components/pages/dashboard/panels/index.js :

export * from './examplePanel';

Lägg till panelen på instrumentpanelen

Ändra src/components/pages/dashboard/dashboard.js för att lägga till panelen.

Lägg till exempelpanelen i listan över importer från paneler:

import {
  OverviewPanel,
  AlertsPanel,
  TelemetryPanel,
  AnalyticsPanel,
  MapPanel,
  transformTelemetryResponse,
  chartColorObjects,
  ExamplePanel
} from './panels';

Lägg till följande celldefinition i rutnätet i sidinnehållet:

          <Cell className="col-2">
            <ExamplePanel t={t} />
          </Cell>

Om webbgränssnittet inte redan körs lokalt kör du följande kommando i roten för din lokala kopia av lagringsplatsen:

npm start

Föregående kommando kör användargränssnittet lokalt på https://localhost:3000/dashboard. Gå till sidan Instrumentpanel för att visa den nya panelen.

Nästa steg

I den här artikeln har du lärt dig om de resurser som är tillgängliga för att hjälpa dig att lägga till eller anpassa instrumentpaneler i webbgränssnittet i lösningsacceleratorn fjärrövervakning.

Mer konceptuell information om acceleratorn fjärrövervakningslösning finns i Arkitektur för fjärrövervakning.

Share via