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 React

The React wrapper is the AssetCard component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { AssetCard } from 'smart-industrial/react/assetcard';

const ref = useRef<AssetCard>(null);

<AssetCard ref={ref} name={'Feed pump P-101'}
    onWorkOrderRequest={(event: CustomEvent) => console.log(event.detail)} />

Properties

Prop	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	AssetCardState running	Sets or retrieves the machine's state. Only fault, maintenance and offline are marked; running and stopped are text.
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
onWorkOrderRequest 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.
onServiceRecord 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.
onWorkOrderOpen 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