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.

JavaScript TypeScript Angular React Vue Blazor

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

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.assetcard.js';

<smart-asset-card ref="assetCard" :name="'Feed pump P-101'"
    @workOrderRequest="onEvent"></smart-asset-card>



// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-asset-card :condition.prop="condition"></smart-asset-card>

Properties

Binding	Type, default	Description
`:name` name	string	Sets or retrieves the name of the asset. It is the heading of the card and its accessible name.
`:asset-id` assetId	string	Sets or retrieves the asset's identifier, as the plant's maintenance system knows it.
`:model` model	string	Sets or retrieves the maker and model.
`:location` location	string	Sets or retrieves where the asset stands.
`:state` state	AssetCardState running	Sets or retrieves the machine's state. Only fault, maintenance and offline are marked; running and stopped are text.
`:run-hours` runHours	number 0	Sets or retrieves the run hours, from the PLC's counter.
`:starts` starts	number?	Sets or retrieves the number of starts, from the PLC's counter. Null hides it.
`:service-interval` 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.
`:last-service-hours` 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.
`:last-service-date` lastServiceDate	string	Sets or retrieves when the last service was done, as an ISO date.
`:last-service-by` lastServiceBy	string	Sets or retrieves who did the last service.
`:due-soon` 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` 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.
`:work-orders` 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` compact	boolean false	Sets or retrieves whether the card shows only the name, the state and the service: for a wall of assets.
`:read-only` 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` 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