@flexem/fc-gui 3.0.0-alpha.61 → 3.0.0-alpha.63

package/communication/variable/variable-communicator.d.ts

@@ -8,5 +8,6 @@ export interface VariableCommunicator {
     writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
     subscribeVariableState(variableName: string): Observable<VariableState>;
     subscribeVariableStates(variableNames: Array<string>): Observable<Array<VariableState>>;
+    subscribeUserDeviceAlarms(appId: string): any;
     dispose(): any;
 }

package/config/alarm/alarm.store.d.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+import { GetAlarmsArgs } from './get-alarms-args';
+export interface AlarmsStore {
+    getHistoryAlarms(input: GetAlarmsArgs): Observable<any>;
+    getCurrentAlarms(input: GetAlarmsArgs): Observable<any>;
+}

package/config/alarm/alarm.store.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AlarmsStore":{"__symbolic":"interface"}}}]

package/config/alarm/get-alarms-args.d.ts

@@ -0,0 +1,9 @@
+import * as moment from 'moment';
+export declare class GetAlarmsArgs {
+    readonly alarmNames: string[];
+    readonly triggeredStartTime: moment.Moment;
+    readonly triggeredEndTime: moment.Moment;
+    readonly maxResultCount: number;
+    readonly skipCount: number;
+    constructor(alarmNames: string[], triggeredStartTime: moment.Moment, triggeredEndTime: moment.Moment, maxResultCount: number, skipCount: number);
+}

package/config/alarm/get-alarms-args.js

@@ -0,0 +1,9 @@
+export class GetAlarmsArgs {
+    constructor(alarmNames, triggeredStartTime, triggeredEndTime, maxResultCount, skipCount) {
+        this.alarmNames = alarmNames;
+        this.triggeredStartTime = triggeredStartTime;
+        this.triggeredEndTime = triggeredEndTime;
+        this.maxResultCount = maxResultCount;
+        this.skipCount = skipCount;
+    }
+}

package/config/alarm/get-alarms-args.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GetAlarmsArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"string"}]},{"__symbolic":"reference","module":"moment","name":"Moment","line":5,"character":37},{"__symbolic":"reference","module":"moment","name":"Moment","line":6,"character":35},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}}}}]

package/config/alarm/index.d.ts

@@ -0,0 +1,2 @@
+export { AlarmsStore } from './alarm.store';
+export { GetAlarmsArgs } from './get-alarms-args';

package/config/alarm/index.js

@@ -0,0 +1 @@
+export { GetAlarmsArgs } from './get-alarms-args';

package/config/alarm/index.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./alarm.store","export":["AlarmsStore"]},{"from":"./get-alarms-args","export":["GetAlarmsArgs"]}]}]

package/config/config-store.d.ts

@@ -3,6 +3,7 @@ import { ViewStore } from './view/view-store';
 import { ImageStore } from './image/image-store';
 import { HistoryDataStore } from './history-data/history-data.store';
 import { VariableStore } from './variable/variable-store';
+import { AlarmsStore } from './alarm';
 /**
  * 配置仓储
  */
@@ -11,5 +12,6 @@ export interface ConfigStore {
     readonly graphStore: GraphStore;
     readonly imageStore: ImageStore;
     readonly historyDataStore: HistoryDataStore;
+    readonly alarmsStore: AlarmsStore;
     readonly variableStore: VariableStore;
 }

package/config/index.d.ts

@@ -8,3 +8,4 @@ export { ViewModel } from './view/view.model';
 export { ImageStore } from './image/image-store';
 export * from './history-data';
 export * from './variable';
+export * from './alarm';

package/config/index.js

@@ -4,3 +4,4 @@ export { GraphType } from './graph/graph-type';
 export { ViewModel } from './view/view.model';
 export * from './history-data';
 export * from './variable';
+export * from './alarm';

package/config/index.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./config-store","export":["ConfigStore"]},{"from":"./graph/graph","export":["Graph"]},{"from":"./graph/graph-result","export":["GraphResult"]},{"from":"./graph/graph-type","export":["GraphType"]},{"from":"./graph/graph-store","export":["GraphStore"]},{"from":"./view/view-store","export":["ViewStore"]},{"from":"./view/view.model","export":["ViewModel"]},{"from":"./image/image-store","export":["ImageStore"]},{"from":"./history-data"},{"from":"./variable"}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./config-store","export":["ConfigStore"]},{"from":"./graph/graph","export":["Graph"]},{"from":"./graph/graph-result","export":["GraphResult"]},{"from":"./graph/graph-type","export":["GraphType"]},{"from":"./graph/graph-store","export":["GraphStore"]},{"from":"./view/view-store","export":["ViewStore"]},{"from":"./view/view.model","export":["ViewModel"]},{"from":"./image/image-store","export":["ImageStore"]},{"from":"./history-data"},{"from":"./variable"},{"from":"./alarm"}]}]

package/elements/alarm/alarm-element.d.ts

@@ -0,0 +1,37 @@
+import { Injector } from '@angular/core';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { AlarmModel } from '../../model/alarm/alarm.model';
+import { AlarmsStore, VariableStore } from '../../config';
+export declare class AlarmElement extends ConditionalDisplayElement {
+    private readonly alarmsStore;
+    readonly model: AlarmModel;
+    private readonly logger;
+    readonly variableCommunicator: VariableCommunicator;
+    private readonly localization;
+    private readonly timePeriods;
+    private element;
+    private refreshIntervalId;
+    private readonly displayOption;
+    private startTime;
+    private endTime;
+    private currentTimePeriod;
+    private alarmList;
+    private currentAlarmList;
+    private page;
+    private totalCount;
+    private pageSize;
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string);
+    dispose(): void;
+    private getValidTimePeriods;
+    private init;
+    private renderElement;
+    private renderOperationArea;
+    private updateTimeRange;
+    private updateQueryTimeRange;
+    private loadFirstPage;
+    private loadNextPage;
+    private loadPreviousPage;
+    private loadLastPage;
+}

package/elements/alarm/alarm-element.js

@@ -0,0 +1,302 @@
+import * as d3 from 'd3';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { GetAlarmsArgs } from '../../config';
+import * as moment from 'moment';
+import { LOGGER_SERVICE_TOKEN } from '../../logger';
+import { LOCALIZATION } from '../../localization';
+import { find, isNil, pull, remove } from 'lodash';
+import { AlarmState } from './alarm-state-enum';
+export class AlarmElement extends ConditionalDisplayElement {
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, alarmsStore, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.alarmsStore = alarmsStore;
+        this.displayOption = {
+            dataLimit: 500,
+            dataZoomHeight: 32,
+            marginLeft: 1,
+            marginRight: 20,
+            mobileMinWidth: 450,
+            operationAreaHeight: 32,
+            operationAreaMarginTop: 10,
+            operationSelectFontSize: '16px',
+            operationButtonWidth: 24,
+            operationButtonHeight: 24,
+            operationButtonMargin: 4
+        };
+        this.alarmList = [];
+        this.currentAlarmList = [];
+        this.page = 0;
+        this.totalCount = 0;
+        this.pageSize = 5;
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.localization = injector.get(LOCALIZATION);
+        this.variableCommunicator = variableCommunicator;
+        this.timePeriods = this.getValidTimePeriods();
+        this.currentTimePeriod = this.model.filterSetting.refreshCycle;
+        this.pageSize = this.model.generalSetting.pageSize;
+        this.currentTimePeriod = this.model.filterSetting.displayPeriod;
+        this.updateQueryTimeRange();
+        if (this.model.filterSetting.alarmType) {
+            this.refreshIntervalId = setInterval(() => {
+                this.loadFirstPage();
+                this.logger.debug(`[GUI]Refresh Alarm Table:${d3.time.format('%x %X')(new Date())}`);
+            }, this.model.filterSetting.refreshCycle * 60 * 1000);
+        }
+        else {
+            variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarmWithAppId => {
+                if (alarmWithAppId.appId !== this.signalRAppId) {
+                    return;
+                }
+                const alarm = alarmWithAppId.alarm;
+                if (!find(this.model.filterSetting.detailsData, alarmName => alarmName === alarm.name)) {
+                    return;
+                }
+                const currentAlarm = this.currentAlarmList.find(re => re.name === alarm.name);
+                if (alarm.state === AlarmState.AlarmStateTriggered.valueOf()) {
+                    if (!isNil(currentAlarm)) {
+                        return;
+                    }
+                    pull(this.currentAlarmList, this.currentAlarmList.find(record => alarm.name === record.name));
+                    this.currentAlarmList.unshift(alarm);
+                    this.totalCount += 1;
+                }
+                else {
+                    if (isNil(currentAlarm)) {
+                        return;
+                    }
+                    remove(this.currentAlarmList, currentAlarm);
+                    this.totalCount -= 1;
+                }
+                this.alarmList = [];
+                this.currentAlarmList.forEach(item => {
+                    this.alarmList.push([
+                        item.name,
+                        item.message,
+                        item.alarmLevel,
+                        moment(item.triggeredTime).format('YYYY-MM-DD HH:mm:ss')
+                    ]);
+                });
+                this.renderElement();
+            });
+        }
+        this.init();
+    }
+    dispose() {
+        clearInterval(this.refreshIntervalId);
+        if (this.element) {
+            this.element.tooltip.hidden(true);
+        }
+        this.logger.debug(`[GUI]Dispose Alarm Table Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
+    }
+    getValidTimePeriods() {
+        const timePeriods = new Array();
+        timePeriods.push({ key: 6, name: this.localization.lastThirtyMinutes });
+        timePeriods.push({ key: 1, name: this.localization.lastOneHour });
+        timePeriods.push({ key: 7, name: this.localization.lastEightHour });
+        timePeriods.push({ key: 2, name: this.localization.lastTwentyFourHours });
+        timePeriods.push({ key: 3, name: this.localization.lastSevenDays });
+        timePeriods.push({ key: 4, name: this.localization.lastThirtyDays });
+        timePeriods.push({ key: 5, name: this.localization.lastOneYear });
+        return timePeriods;
+    }
+    init() {
+        if (this.model.filterSetting.alarmType) {
+            const input = new GetAlarmsArgs(this.model.filterSetting.detailsData, this.startTime, this.endTime, this.pageSize, this.page * this.pageSize);
+            this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
+                this.totalCount = result.totalCount;
+                this.alarmList = result.items.map(item => [
+                    item.name,
+                    item.message,
+                    item.alarmLevel,
+                    item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
+                ]);
+                this.renderElement();
+            });
+        }
+        else {
+            const input = new GetAlarmsArgs(this.model.filterSetting.detailsData, undefined, undefined, this.pageSize, this.page * this.pageSize);
+            this.alarmsStore.getCurrentAlarms(input).subscribe(result => {
+                this.totalCount = result.totalCount;
+                this.currentAlarmList = result.items;
+                this.alarmList = this.currentAlarmList.map(item => [
+                    item.name,
+                    item.message,
+                    item.alarmLevel,
+                    item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
+                ]);
+                this.renderElement();
+            });
+        }
+    }
+    renderElement() {
+        this.rootElement.selectAll('*').remove();
+        const elementHeight = this.model.size.height;
+        this.element = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this.element.setAttribute('width', this.model.size.width.toString());
+        this.element.setAttribute('height', elementHeight.toString());
+        const table = document.createElement('table');
+        table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
+            height: ${elementHeight - 39}`;
+        let tr = document.createElement('tr');
+        let fontString = '';
+        if (this.model.generalSetting.headerFont.isItalic) {
+            fontString += 'italic ';
+        }
+        if (this.model.generalSetting.headerFont.isBold) {
+            fontString += 'bold ';
+        }
+        fontString += this.model.generalSetting.headerFont.fontSize + ' ' + this.model.generalSetting.headerFont.fontFamily;
+        tr.style.cssText = `height: ${this.model.heights[0]}px;
+            background: ${this.model.generalSetting.headerFillColor};
+            color: ${this.model.generalSetting.headerFont.color};
+            font: ${fontString};
+            text-align: ${this.model.generalSetting.headerFont.textAlign};
+            ${this.model.generalSetting.headerFont.isUnderline ? 'text-decoration: underline' : ''};
+            vertical-align: middle;`;
+        for (let i = 0; i < 4; i++) {
+            const th = document.createElement('th');
+            th.innerHTML = this.model.columLables[i];
+            th.style.cssText = `width: ${this.model.widths[i] / this.model.size.width * 100}%;
+                border-style: solid;
+                border-color: ${this.model.generalSetting.splitLine};
+                border-left-width: ${!i || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
+            tr.appendChild(th);
+        }
+        table.appendChild(tr);
+        const levelColors = ['#3695FF', '#FFE900', '#FFA800', '#E84F4F'];
+        for (let i = 0; i < this.pageSize; i++) {
+            tr = document.createElement('tr');
+            tr.style.cssText = `height: ${this.model.heights[i + 1]}px;
+                    background: ${this.model.generalSetting.tableFillColor};
+                    font: ${this.model.generalSetting.fontStyle};
+                    color: ${this.model.generalSetting.fontColor};
+                    text-align: ${this.model.generalSetting.textAlign};
+                    vertical-align: middle;`;
+            for (let j = 0; j < 4; j++) {
+                const td = document.createElement('td');
+                td.style.cssText = `border-style: solid;
+                border-color: ${this.model.generalSetting.splitLine};
+                border-top-width: ${this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;
+                border-left-width: ${!j || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
+                if (this.alarmList[i]) {
+                    if (j !== 2) {
+                        td.innerHTML = this.alarmList[i][j];
+                        td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
+                    }
+                    else {
+                        const alarmLevel = document.createElement('div');
+                        let alarmHeight = parseInt(this.model.generalSetting.fontSize) + 15;
+                        if (alarmHeight > this.model.heights[i + 1])
+                            alarmHeight = this.model.heights[i + 1];
+                        let margin = '0 15px';
+                        if (this.model.generalSetting.textAlign === 'left') {
+                            margin = '0 30px 0 0';
+                        }
+                        else if (this.model.generalSetting.textAlign === 'right') {
+                            margin = '0 0 0 30px';
+                        }
+                        alarmLevel.style.cssText = `margin: ${margin};
+                            border-radius: 5px;
+                            background: ${levelColors[this.alarmList[i][j]]};
+                            color: #ffffff;
+                            width: ${this.model.widths[j] - 30}px;
+                            height: ${alarmHeight}px;
+                            max-height: ${this.model.heights[i + 1]}px;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
+                        alarmLevel.innerHTML = this.model.levelText[this.alarmList[i][j]];
+                        td.appendChild(alarmLevel);
+                    }
+                }
+                tr.appendChild(td);
+            }
+            table.appendChild(tr);
+        }
+        this.element.appendChild(table);
+        this.$element.append(this.element);
+        this.renderOperationArea(this.model.size.width, elementHeight - 39);
+    }
+    renderOperationArea(chartWidth, chartHeight) {
+        const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
+            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
+            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
+        if (this.model.filterSetting.alarmType) {
+            const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
+                .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
+                const displayTimePeriod = this.rootElement.select('select').property('value');
+                this.updateTimeRange(displayTimePeriod);
+                this.init();
+            });
+            const options = selectElement.selectAll('option').data(this.timePeriods).enter().append('option');
+            options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod));
+        }
+        const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
+        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
+            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/last_page.svg)')
+            .on('click', () => { this.loadLastPage(); });
+        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
+            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/next_page.svg)')
+            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .on('click', () => { this.loadNextPage(); });
+        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
+            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/previous_page.svg)')
+            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .on('click', () => { this.loadPreviousPage(); });
+        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
+            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/first_page.svg)')
+            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .on('click', () => { this.loadFirstPage(); });
+    }
+    updateTimeRange(timePeriodType) {
+        this.currentTimePeriod = +timePeriodType;
+        this.updateQueryTimeRange();
+    }
+    updateQueryTimeRange() {
+        this.endTime = moment();
+        switch (this.currentTimePeriod) {
+            case 1:
+                this.startTime = moment().subtract(1, 'hours');
+                break;
+            case 3:
+                this.startTime = moment().subtract(7, 'days');
+                break;
+            case 4:
+                this.startTime = moment().subtract(30, 'days');
+                break;
+            case 5:
+                this.startTime = moment().subtract(1, 'years');
+                break;
+            case 6:
+                this.startTime = moment().subtract(30, 'minutes');
+                break;
+            case 7:
+                this.startTime = moment().subtract(8, 'hours');
+                break;
+            default:
+                this.startTime = moment().subtract(1, 'days');
+        }
+    }
+    loadFirstPage() {
+        this.page = 0;
+        this.init();
+    }
+    loadNextPage() {
+        const last_page = Math.ceil(this.totalCount / this.pageSize) - 1;
+        if (this.page < last_page) {
+            this.page++;
+        }
+        this.init();
+    }
+    loadPreviousPage() {
+        if (this.page > 0) {
+            this.page--;
+        }
+        this.init();
+    }
+    loadLastPage() {
+        this.page = Math.ceil(this.totalCount / this.pageSize) - 1;
+        this.init();
+    }
+}

package/elements/alarm/alarm-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":17,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":48,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":49,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":50,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":51,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":52,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":53,"character":38},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}]}}}}]

package/elements/alarm/alarm-state-enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum AlarmState {
+    AlarmStateTriggered = 1,
+    AlarmStateRecovered = 0
+}

package/elements/alarm/alarm-state-enum.js

@@ -0,0 +1,5 @@
+export var AlarmState;
+(function (AlarmState) {
+    AlarmState[AlarmState["AlarmStateTriggered"] = 1] = "AlarmStateTriggered";
+    AlarmState[AlarmState["AlarmStateRecovered"] = 0] = "AlarmStateRecovered";
+})(AlarmState || (AlarmState = {}));

package/elements/alarm/alarm-state-enum.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AlarmState":{"AlarmStateTriggered":1,"AlarmStateRecovered":0}}}]

package/elements/main-element.js

@@ -28,6 +28,7 @@ import { HyperlinkElement } from './static-elements/hyperlink-element';
 import { VideoElement } from './video/video-element';
 import { WeatherElement } from './weather/weater-element';
 import { AirQualityElement } from './air-quality/air-quality-element';
+import { AlarmElement } from './alarm/alarm-element';
 export class MainElement {
     constructor(injector, bsModalService, context, variableCommunicator, popupViewService, signalRAppId) {
         this.injector = injector;
@@ -129,6 +130,9 @@ export class MainElement {
                 case GuiConsts.components.airQualityKey:
                     this.elements.push(new AirQualityElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.weatherService, this.signalRAppId));
                     break;
+                case GuiConsts.components.alarmKey:
+                    this.elements.push(new AlarmElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.alarmsStore, this.signalRAppId));
+                    break;
             }
         });
         this.initBackground();

package/elements/main-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MainElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":54,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":55,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":56,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":57,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":58,"character":43},null]}],"load":[{"__symbolic":"method"}],"uniformStretch":[{"__symbolic":"method"}],"changeVideoStyle":[{"__symbolic":"method"}],"horizontalStretch":[{"__symbolic":"method"}],"initElementState":[{"__symbolic":"method"}],"getVariableNames":[{"__symbolic":"method"}],"reportVariableStates":[{"__symbolic":"method"}],"reportVariableValues":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkIsLoaded":[{"__symbolic":"method"}],"initBackground":[{"__symbolic":"method"}],"getImageEl":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MainElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":55,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":56,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":57,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":58,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":59,"character":43},null]}],"load":[{"__symbolic":"method"}],"uniformStretch":[{"__symbolic":"method"}],"changeVideoStyle":[{"__symbolic":"method"}],"horizontalStretch":[{"__symbolic":"method"}],"initElementState":[{"__symbolic":"method"}],"getVariableNames":[{"__symbolic":"method"}],"reportVariableStates":[{"__symbolic":"method"}],"reportVariableValues":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkIsLoaded":[{"__symbolic":"method"}],"initBackground":[{"__symbolic":"method"}],"getImageEl":[{"__symbolic":"method"}]}}}}]

package/elements/per-view-variable-communicator.d.ts

@@ -6,6 +6,7 @@ export declare class PerViewVariableCommunicator implements VariableCommunicator
     private observers;
     private variableValuesChangedSubscriptions;
     private variableStatesChangedSubscription;
+    private alarmSubscription;
     constructor(variableCommunicator: VariableCommunicator);
     openVariable(variableName: string, appId: string): Observable<VariableValue>;
     openVariables(variableNames: Array<string>, appId?: string): Observable<Array<VariableValue>>;
@@ -13,5 +14,6 @@ export declare class PerViewVariableCommunicator implements VariableCommunicator
     writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
     subscribeVariableState(variableName: string): Observable<VariableState>;
     subscribeVariableStates(variableNames: string[]): Observable<Array<VariableState>>;
+    subscribeUserDeviceAlarms(appId?: string): Observable<VariableState[]>;
     dispose(): void;
 }

package/elements/per-view-variable-communicator.js

@@ -6,6 +6,7 @@ export class PerViewVariableCommunicator {
         this.observers = new Map();
         this.variableValuesChangedSubscriptions = new Array();
         this.variableStatesChangedSubscription = new Array();
+        this.alarmSubscription = new Array();
         this._rawVariableCommunicator = variableCommunicator;
     }
     openVariable(variableName, appId) {
@@ -38,8 +39,15 @@ export class PerViewVariableCommunicator {
             this.variableStatesChangedSubscription.push(subscription);
         });
     }
+    subscribeUserDeviceAlarms(appId = '') {
+        return new Observable(subscriber => {
+            const subscription = this._rawVariableCommunicator.subscribeUserDeviceAlarms(appId).subscribe(values => subscriber.next(values), error => subscriber.error(error), () => subscriber.complete());
+            this.alarmSubscription.push(subscription);
+        });
+    }
     dispose() {
         forEach(this.variableValuesChangedSubscriptions, s => s.unsubscribe());
         forEach(this.variableStatesChangedSubscription, s => s.unsubscribe());
+        forEach(this.alarmSubscription, s => s.unsubscribe());
     }
 }

package/elements/per-view-variable-communicator.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"PerViewVariableCommunicator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":14,"character":38}]}],"openVariable":[{"__symbolic":"method"}],"openVariables":[{"__symbolic":"method"}],"write":[{"__symbolic":"method"}],"writeWordByBit":[{"__symbolic":"method"}],"subscribeVariableState":[{"__symbolic":"method"}],"subscribeVariableStates":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"PerViewVariableCommunicator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":15,"character":38}]}],"openVariable":[{"__symbolic":"method"}],"openVariables":[{"__symbolic":"method"}],"write":[{"__symbolic":"method"}],"writeWordByBit":[{"__symbolic":"method"}],"subscribeVariableState":[{"__symbolic":"method"}],"subscribeVariableStates":[{"__symbolic":"method"}],"subscribeUserDeviceAlarms":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/model/alarm/alarm.model.d.ts

@@ -0,0 +1,13 @@
+import { ConditionalDisplayModel } from '../base/conditional-display-model';
+import { Point, Size } from '../shared';
+export interface AlarmModel extends ConditionalDisplayModel {
+    readonly version: number;
+    readonly size: Size;
+    readonly location: Point;
+    readonly generalSetting?: any;
+    readonly filterSetting?: any;
+    readonly widths: number[];
+    readonly heights: number[];
+    readonly columLables: string[];
+    readonly levelText: string[];
+}

package/model/alarm/alarm.model.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AlarmModel":{"__symbolic":"interface"}}}]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.61",
+	"version": "3.0.0-alpha.63",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",

package/remote/communication/variable/remote-variable-communicator.d.ts

@@ -17,7 +17,10 @@ export declare class RemoteVariableCommunicator implements VariableCommunicator
     private variableStateCache;
     private variableStatesToBeOpened;
     private variableStatesToBeClosed;
+    private alarmObservers;
+    private alarmChangedSubscription;
     constructor(remoteVariableProtocol: RemoteVariableProtocol, logger: LoggerService);
+    private doAlarmChanged;
     private doVariableValuesChanged;
     private doVariableStatesChanged;
     subscribeVariableStates(variableNames: string[]): Observable<VariableState[]>;
@@ -26,5 +29,6 @@ export declare class RemoteVariableCommunicator implements VariableCommunicator
     openVariable(variableName: string, appId?: string): Observable<VariableValue>;
     write(variableName: string, value: any): Observable<VariableValue>;
     writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
+    subscribeUserDeviceAlarms(appId?: string): Observable<any[]>;
     dispose(): void;
 }

package/remote/communication/variable/remote-variable-communicator.js

@@ -10,6 +10,7 @@ export class RemoteVariableCommunicator {
         this.appIdVariablesMap = new Map();
         this.variableStateObservers = new Map();
         this.variableStateCache = new Map();
+        this.alarmObservers = [];
         this.variableValueCache = new StringifyingMap(k => JSON.stringify(k));
         this.connectedSubscription = this.remoteVariableProtocol.connected.subscribe(() => {
             const variableNamesToStart = [];
@@ -23,6 +24,17 @@ export class RemoteVariableCommunicator {
         });
         this.doVariableStatesChanged();
         this.doVariableValuesChanged();
+        this.doAlarmChanged();
+    }
+    doAlarmChanged() {
+        if (this.alarmChangedSubscription !== undefined) {
+            this.alarmChangedSubscription.unsubscribe();
+        }
+        this.alarmChangedSubscription = this.remoteVariableProtocol.historyAlarmChanged.subscribe((alarmWithAppId) => {
+            each(this.alarmObservers, ob => {
+                ob.next(alarmWithAppId);
+            });
+        });
     }
     doVariableValuesChanged() {
         if (this.variableValuesChangedSubscription !== undefined) {
@@ -203,11 +215,21 @@ export class RemoteVariableCommunicator {
               observer.next(new VariableValue(variable, VariableStateEnum.DataNormal, value))*/
         });
     }
+    subscribeUserDeviceAlarms(appId = '') {
+        return new Observable(observer => {
+            this.alarmObservers.push(observer);
+            this.remoteVariableProtocol.subscribeUserDeviceAlarms(appId);
+            return () => {
+                this.remoteVariableProtocol.unSubscribeUserDeviceAlarms(appId);
+            };
+        });
+    }
     dispose() {
         // TODO调用所有的ob.complete()。
         this.connectedSubscription.unsubscribe();
         this.variableStatesChangedSubscription.unsubscribe();
         this.variableValuesChangedSubscription.unsubscribe();
+        this.alarmChangedSubscription.unsubscribe();
         if (this.logger && this.logger.isDebugEnabled()) {
             this.logger.debug('[VariableCommunicator] RemoteVariableCommunicator disposed.');
         }