Maintenance and sites

Asset Card <smart-asset-card>

AssetCard is one machine as maintenance sees it: how long it has run, when it is next due for service, how it is doing and what is open against it.

<smart-asset-card> · 17 properties, 0 methods, 3 events · source/modules/smart.assetcard.js

Usage in JavaScript

The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").

const assetCard = document.querySelector('smart-asset-card');

assetCard.name = 'Feed pump P-101';
assetCard.addEventListener('workOrderRequest', (event) => console.log(event.detail));

Properties

Property	Type, default	Description
name	string	Sets or retrieves the name of the asset. It is the heading of the card and its accessible name.
assetId	string	Sets or retrieves the asset's identifier, as the plant's maintenance system knows it.
model	string	Sets or retrieves the maker and model.
location	string	Sets or retrieves where the asset stands.
state	'running' | 'stopped' | 'fault' | 'maintenance' | 'offline' running	Sets or retrieves the machine's state. Only fault, maintenance and offline are marked; running and stopped are text. running stopped fault maintenance offline
runHours	number 0	Sets or retrieves the run hours, from the PLC's counter.
starts	number?	Sets or retrieves the number of starts, from the PLC's counter. Null hides it.
serviceInterval	number 0	Sets or retrieves the hours between services. 0 for an asset without an hours-based interval, which the card says rather than drawing an empty bar.
lastServiceHours	number 0	Sets or retrieves the run hours at the last service. The next is due at this plus the interval. When runHours is below it - a counter reset or replaced, or a service entered wrong - the card says the counter needs checking instead of showing a full interval.
lastServiceDate	string	Sets or retrieves when the last service was done, as an ISO date.
lastServiceBy	string	Sets or retrieves who did the last service.
dueSoon	number 0.1	Sets or retrieves how much of the interval is left, as a fraction, when the service is marked due soon.
condition	array	Sets or retrieves the condition readings as [{ label, value, unit, status, limit, direction }]. status is normal, warning or alarm; a reading out of band says so in words, with its limit. A warning names its side: direction 'high' or 'low' when given, otherwise high when a numeric value is above its limit and low when below it, and 'warning' when neither can be told.
workOrders	array	Sets or retrieves the work orders as [{ id, title, status, priority, due }]. Done orders are not listed. Assign a new array to update the component.
compact	boolean false	Sets or retrieves whether the card shows only the name, the state and the service: for a wall of assets.
readOnly	boolean false	Sets or retrieves whether the card only shows. Request work and Record service are removed; work orders can still be opened.
busy	boolean false	Sets or retrieves whether the application is sending a request or recording a service. Send and Record wait.

Events

The data of an event is in event.detail. workOrderRequest and serviceRecord are requests: the asset card raises them only while readOnly and busy are false and keeps workOrders, lastServiceHours and lastServiceDate until the application sets them. workOrderOpen reports a click on a listed work order.

Event	Description and detail
workOrderRequest	This event is triggered when the operator sends a request for work on the asset. assetId string The asset's identifier. text string What needs doing. priority string high, normal or low.
serviceRecord	This event is triggered when a service is recorded, after the confirmation. The card does not restart the interval itself: the application records it and sets lastServiceHours. assetId string The asset's identifier. runHours number The run hours the service was done at.
workOrderOpen	This event is triggered when a work order is opened from the card, for the application to show it. id string The id of the work order. assetId string The asset's identifier.

Types

type AssetCardState

'running' | 'stopped' | 'fault' | 'maintenance' | 'offline'

CSS variables

The component declares 5 CSS variables; the CSS page shows how to set them.

--smart-asset-card-fill --smart-asset-card-warning --smart-asset-card-alarm --smart-asset-card-alarm-text --smart-asset-card-mono