Application Example: Central Asset Management - WinCC OA Workspace

Standalone workspace that delivers the Central Asset Management (CAM) application example (standalone page) for WinCC OA WebUI.

What it does

CAM provides a map-based overview of industrial plant sites with:

• Interactive map - Leaflet map with clustered SCADA element markers and alarm-state coloring
• KPI bar - aggregated plant metrics and alarm counts grouped by plant type
• Navigation panel - collapsible tree menu reflecting the plant hierarchy (world → region → country → city → plant)
• Details panel - scrollable list of plant cards filtered to the current map viewport, with OEE, metrics, contacts, and video links

All live data (alarms, KPIs) is streamed from WinCC OA via OaRxJsApi.

Installation

The package supports two install layouts. The postinstall script auto-detects which one applies.

Option A: Directly into a WinCC OA project

cd {OA-PROJECT}/data/WebUI
npm install @wincc-oa/ae-central-asset-management --omit=peer --omit=dev --foreground-scripts

About --foreground-scripts - npm 8+ runs postinstall scripts in a buffered child process and suppresses their stdout unless this flag is passed. Without it you will not see the import-the-DPL banner. As a safety net the install also drops central-asset-management.NEXT_STEPS.txt next to the DPL in {OA-PROJECT}/dplist/ so the instructions are visible even if you missed the console output.

Why --omit=peer --omit=dev here - lit, rxjs, tsyringe, @siemens/ix-icons, @etm-professional-control/oa-rx-js-api, the @wincc-oa/wui-* libs, js-yaml, and lit-translate are all peerDependencies and are already served at runtime by the WebComponent Dashboard's import map. Inside an OA project nothing rebuilds the bundle, so installing them again just bloats node_modules/ (~80 MB of unused duplicates). With the flags, only the three real dependencies (leaflet, leaflet.markercluster, esri-leaflet) land on disk - they are the only packages not provided by the host import map.

The page works without the flags too - npm 8+ will simply install the peer deps that the dashboard then ignores.

The postinstall:

1. Merges the menu entry into ../dashboard-wc/menuconfig.json, rewriting the module URL to /data/WebUI/node_modules/@wincc-oa/ae-central-asset-management/dist/pages/central-asset-management.js so the bundle stays in node_modules and is served from there.
2. Mirrors translations (oa-data/WebUI/msg/*) into ./msg/ (skip-if-exists).
3. Mirrors the plant-hierarchy config (oa-data/dashboard-wc/cam-menu.yaml) into ../dashboard-wc/ (skip-if-exists).
4. Mirrors the DPL into {OA-PROJECT}/dplist/central-asset-management.dpl (skip-if-exists). Manual ASCII Manager import is required - see below.

If ../dashboard-wc/menuconfig.json is missing, the script prints a hint and exits without changes. Create the directory and copy the default menuconfig.json from your WinCC OA installation, then re-run with npm rebuild @wincc-oa/ae-central-asset-management.

Option B: Into a Vite-host workspace

npm install @wincc-oa/ae-central-asset-management

The postinstall:

1. Merges the menu entry into apps/dashboard-wc/config/menuconfig.jsonc.
2. Mirrors oa-data/ and CAM-setup-files/ into the host root (skip-if-exists).
3. Creates libs/default-components/src/lib/standalone-pages/central-asset-management.ts - a single side-effect import that lets Vite include the page bundle as a build entry.

Importing datapoints via ASCII Manager

The OA-project install copies the DPL into the project's dplist/ folder as central-asset-management.dpl. The workspace install places it at CAM-setup-files/central-asset-management.dpl in the host root. Either way, import it into your WinCC OA project using the WinCC OA ASCII Manager.

Configuration

Edit oa-data/dashboard-wc/cam-menu.yaml to match your plant topology. After postinstall this file is copied to the host's oa-data/dashboard-wc/ directory (only if it does not already exist there).

Structure:

menu:
  - id: world
    cnsPath: System1.CamMenu:world
    description: "WUI_CAM.Menu.World" # lit-translate key from WUI_CAM.json
    icon: globe
    children:
      - id: europe
        cnsPath: System1.CamMenu:world.europe
        description: "WUI_CAM.Menu.Europe"
        icon: location
        children:
          - id: berlin
            cnsPath: System1.CamMenu:world.europe.germany.berlin
            description: "WUI_CAM.Menu.Berlin"
            icon: customElectrolyzer
            plantDP: Plant_EU_Berlin # WinCC OA datapoint name
            plantDetailsDP: Plant_EU_Berlin_Details
            plantDetailsDPT: ElectrolyzerDetails
            alarmDPE: Plant_EU_Berlin.state.Alarm

The description field is a lit-translate key resolved from WUI_CAM.json. Add translations for any new nodes to both en_US.utf8/WUI_CAM.json and de_AT.utf8/WUI_CAM.json under the Menu section.

Available plant type keys and their icons/colors are defined in lib/cam/cam-types.ts and cam-color-service.ts.

Page registration

The package includes a wui-page.json manifest. When deployed, WinCC OA WebUI registers:

| Property | Value | | ---------- | ------------------------------------------------------ | | Route | /cam | | Component | <wui-central-asset-management> | | Menu icon | location | | Menu label | Central Asset Management / Zentrales Anlagenmanagement |