Production floor

Downtime Log `<smart-downtime-log>`

DowntimeLog lists every stop of a line and asks the person who was there why it stopped.

JavaScript TypeScript Angular React Vue Blazor

<smart-downtime-log> · 11 properties, 1 methods, 3 events · source/modules/smart.downtimelog.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.downtimelog.js';

<smart-downtime-log ref="downtimeLog" :label="'Line 3 downtime'"
    @stopClassify="onEvent"></smart-downtime-log>

// methods are called on the element the ref holds
downtimeLog.value.exportCsv();

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

Properties

Binding	Type, default	Description
`:stops` stops	array	Sets or retrieves the stops as [{ id, machine, machineName, from, to, seconds, short, reason, comment, classifiedBy }], the shape a Scada Studio station returns from /api/downtime. to is null while the machine is still stopped. Assign a new array to update the component.
`:reasons` reasons	array	Sets or retrieves the plant's reasons as [{ code, label, group }]. The picker shows them as large tiles, by group, in the order given.
`:label` label	string	Sets or retrieves the heading of the log. It is also the accessible name of the group.
`:view` view	DowntimeLogView unclassified	Sets or retrieves which stops are listed: the ones waiting for a reason, or all of them.
`:show-short` showShort	boolean false	Sets or retrieves whether the stops shorter than their machine's threshold are listed and counted.
`:sort-by` sortBy	DowntimeLogSortBy from	Sets or retrieves the column the stops are ordered by. The column headers set it: a second press turns the order round.
`:sort-order` sortOrder	DowntimeLogSortOrder desc	Sets or retrieves which way: newest, longest or last first, or the other way.
`:page-size` pageSize	number 100	Sets or retrieves how many stops are drawn at once; the rest are a "Show more" away.
`:read-only` readOnly	boolean false	Sets or retrieves whether the log only shows the stops and their reasons, with who gave them. Every button is removed.
`:busy` busy	string	Sets or retrieves the id of the stop the application is recording a reason for. Its Save button waits.
`:error-message` errorMessage	string	Sets or retrieves the reason the station refused a reason. It is shown as an alert above the list and announced; the stop stays waiting for a reason. This property was called error, which is also the name of every element's logging method, so an invalid value given to any other property threw "that.error is not a function" instead of being reported. Assigning error still sets errorMessage; reading error returns the logging method, as on every other element.

Methods

Method	Description
`exportCsv(): string`	Returns the stops shown as CSV: machine, stopped, restarted, seconds, reason, comment and who gave it. A cell a spreadsheet would read as a formula is written as text.

Events

The data of an event is in event.detail. stopClassify is a request: the downtime log raises it only while readOnly and busy are clear and shows the stop unclassified until the application writes the reason into stops. sortChange follows a change the log has already made to sortBy and sortOrder, and after exportRequest the log downloads the CSV unless the application calls preventDefault().

Event	Description and detail
`@stopClassify`	This event is triggered when the operator gives a stop its reason. The list is not changed: the application records the reason on the station, which notes who gave it, and hands back the stops. `id` string The id of the stop. `reason` string The code of the reason. `comment` string What the operator added, or an empty string.
`@exportRequest`	This event is triggered by Export CSV, with the file's text. The component then downloads it; an application that stores the file its own way calls preventDefault(). `csv` string The CSV.
`@sortChange`	This event is triggered when the stops are ordered by a column header. `sortBy` string The column. `sortOrder` string asc or desc.

Types

`type DowntimeLogView`

'unclassified' | 'all'

`type DowntimeLogSortBy`

'from' | 'machine' | 'length' | 'reason'

`type DowntimeLogSortOrder`

'asc' | 'desc'

CSS variables

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

--smart-downtime-log-waiting --smart-downtime-log-waiting-text --smart-downtime-log-mono