@flexem/fc-gui 3.0.0-alpha.13 → 3.0.0-alpha.130

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

@@ -6,7 +6,11 @@ export interface VariableCommunicator {
     openVariables(variableNames: Array<string>, appId: string): Observable<Array<VariableValue>>;
     write(variableName: string, value: any): Observable<VariableValue>;
     writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
+    requestVirtualDeviceState(): Observable<void>;
     subscribeVariableState(variableName: string): Observable<VariableState>;
     subscribeVariableStates(variableNames: Array<string>): Observable<Array<VariableState>>;
+    subscribeUserDeviceAlarms(appId: string): any;
+    registerSystemVariableHandler?(variableName: string, getValue: () => Promise<any>, setValue: (value: any) => Promise<void>): void;
+    notifySystemVariableChange?(variableName: string, value: any): void;
     dispose(): any;
 }

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

@@ -4,5 +4,8 @@ export declare class VariableValue {
     state: VariableStateEnum;
     value?: any;
     readonly timeStamp?: string;
-    constructor(variableName: string, state: VariableStateEnum, value?: any, timeStamp?: string);
+    systemName?: string;
+    customStatus?: string;
+    virtualDeviceId?: number;
+    constructor(variableName: string, state: VariableStateEnum, value?: any, timeStamp?: string, systemName?: string, customStatus?: string, virtualDeviceId?: number);
 }

package/communication/variable/variable-value.js

@@ -1,8 +1,11 @@
 export class VariableValue {
-    constructor(variableName, state, value, timeStamp) {
+    constructor(variableName, state, value, timeStamp, systemName, customStatus, virtualDeviceId) {
         this.variableName = variableName;
         this.state = state;
         this.value = value;
         this.timeStamp = timeStamp;
+        this.systemName = systemName;
+        this.customStatus = customStatus;
+        this.virtualDeviceId = virtualDeviceId;
     }
 }

package/communication/variable/variable-value.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VariableValue":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"./variable-state-enum","name":"VariableStateEnum","line":3,"character":68},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"string"}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VariableValue":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"./variable-state-enum","name":"VariableStateEnum","line":3,"character":68},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"number"}]}]}}}}]

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,12 @@
+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;
+    readonly state?: number[];
+    readonly sorting?: string;
+    constructor(alarmNames: string[], triggeredStartTime: moment.Moment, triggeredEndTime: moment.Moment, maxResultCount: number, skipCount: number, state?: number[], // 告警状态数组 (0=触发/未确认, 1=触发/已确认, 2=恢复/未确认, 3=恢复/已确认)
+    sorting?: string);
+}

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

@@ -0,0 +1,13 @@
+export class GetAlarmsArgs {
+    constructor(alarmNames, triggeredStartTime, triggeredEndTime, maxResultCount, skipCount, state, // 告警状态数组 (0=触发/未确认, 1=触发/已确认, 2=恢复/未确认, 3=恢复/已确认)
+    sorting // 排序字段 (如: "TriggeredTime DESC" 或 "TriggeredTime ASC")
+    ) {
+        this.alarmNames = alarmNames;
+        this.triggeredStartTime = triggeredStartTime;
+        this.triggeredEndTime = triggeredEndTime;
+        this.maxResultCount = maxResultCount;
+        this.skipCount = skipCount;
+        this.state = state;
+        this.sorting = sorting;
+    }
+}

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"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"number"}]},{"__symbolic":"reference","name":"string"}]}]}}}}]

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/history-data/get-history-data-args.d.ts

@@ -1,5 +1,14 @@
 import * as moment from 'moment';
 import { HistoricalCurveTimeRange } from './historical-curve.time-range';
+/**
+ * 单个历史数据条目查询参数
+ */
+export interface HistoryDataItemArgs {
+    /** 历史数据条目名称 */
+    dataItemName: string;
+    /** 该条目下的通道名称列表 */
+    channelNames: Array<string>;
+}
 export declare class GetHistoryDataArgs {
     readonly dataSourceCode: number;
     readonly dataItemName: string;
@@ -8,15 +17,17 @@ export declare class GetHistoryDataArgs {
     readonly endTime: moment.Moment;
     readonly limit: number;
     readonly rangeType: HistoricalCurveTimeRange;
+    readonly historyDataItems?: Array<HistoryDataItemArgs>;
     /**
      * 获取历史数据参数
      * @param dataSourceCode 数据源编码
-     * @param dataItemName 历史数据条目名称
-     * @param channelNames 通道名称
+     * @param dataItemName 历史数据条目名称（单条目模式，兼容旧版）
+     * @param channelNames 通道名称（单条目模式，兼容旧版）
      * @param startTime 开始时间
      * @param endTime 结束时间
      * @param limit 获取数据数量，为负数则倒叙
      * @param rangeType 区间类型
+     * @param historyDataItems 多条目模式：多个历史数据条目及其通道配置
      */
-    constructor(dataSourceCode: number, dataItemName: string, channelNames: Array<string>, startTime: moment.Moment, endTime: moment.Moment, limit: number, rangeType: HistoricalCurveTimeRange);
+    constructor(dataSourceCode: number, dataItemName: string, channelNames: Array<string>, startTime: moment.Moment, endTime: moment.Moment, limit: number, rangeType: HistoricalCurveTimeRange, historyDataItems?: Array<HistoryDataItemArgs>);
 }

package/config/history-data/get-history-data-args.js

@@ -2,14 +2,15 @@ export class GetHistoryDataArgs {
     /**
      * 获取历史数据参数
      * @param dataSourceCode 数据源编码
-     * @param dataItemName 历史数据条目名称
-     * @param channelNames 通道名称
+     * @param dataItemName 历史数据条目名称（单条目模式，兼容旧版）
+     * @param channelNames 通道名称（单条目模式，兼容旧版）
      * @param startTime 开始时间
      * @param endTime 结束时间
      * @param limit 获取数据数量，为负数则倒叙
      * @param rangeType 区间类型
+     * @param historyDataItems 多条目模式：多个历史数据条目及其通道配置
      */
-    constructor(dataSourceCode, dataItemName, channelNames, startTime, endTime, limit, rangeType) {
+    constructor(dataSourceCode, dataItemName, channelNames, startTime, endTime, limit, rangeType, historyDataItems) {
         this.dataSourceCode = dataSourceCode;
         this.dataItemName = dataItemName;
         this.channelNames = channelNames;
@@ -17,5 +18,6 @@ export class GetHistoryDataArgs {
         this.endTime = endTime;
         this.limit = limit;
         this.rangeType = rangeType;
+        this.historyDataItems = historyDataItems;
     }
 }

package/config/history-data/get-history-data-args.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GetHistoryDataArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"string"}]},{"__symbolic":"reference","module":"moment","name":"Moment","line":17,"character":28},{"__symbolic":"reference","module":"moment","name":"Moment","line":18,"character":26},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"./historical-curve.time-range","name":"HistoricalCurveTimeRange","line":20,"character":28}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"HistoryDataItemArgs":{"__symbolic":"interface"},"GetHistoryDataArgs":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"moment","name":"Moment","line":28,"character":28},{"__symbolic":"reference","module":"moment","name":"Moment","line":29,"character":26},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"./historical-curve.time-range","name":"HistoricalCurveTimeRange","line":31,"character":28},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}}}]

package/config/history-data/history-data.model.d.ts

@@ -3,5 +3,11 @@ export declare class HistoryDataModel {
     readonly error: string;
     readonly isUnbind: boolean;
     readonly values: Array<HistoryDataValue>;
-    constructor(error: string, isUnbind: boolean, values: Array<HistoryDataValue>);
+    readonly historyDataItems?: Array<HistoryDataItemModel>;
+    constructor(error: string, isUnbind: boolean, values: Array<HistoryDataValue>, historyDataItems?: Array<HistoryDataItemModel>);
+}
+export declare class HistoryDataItemModel {
+    readonly itemName: string;
+    readonly rows: Array<HistoryDataValue>;
+    constructor(itemName: string, rows: Array<HistoryDataValue>);
 }

package/config/history-data/history-data.model.js

@@ -1,7 +1,15 @@
 export class HistoryDataModel {
-    constructor(error, isUnbind, values) {
+    constructor(error, isUnbind, values, historyDataItems // 新增：多条目独立数据
+    ) {
         this.error = error;
         this.isUnbind = isUnbind;
         this.values = values;
+        this.historyDataItems = historyDataItems;
+    }
+}
+export class HistoryDataItemModel {
+    constructor(itemName, rows) {
+        this.itemName = itemName;
+        this.rows = rows;
     }
 }

package/config/history-data/history-data.model.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"HistoryDataModel":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./history-data-value","name":"HistoryDataValue","line":3,"character":91}]}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"HistoryDataModel":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./history-data-value","name":"HistoryDataValue","line":6,"character":31}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./history-data-value","name":"HistoryDataValue","line":6,"character":31}]}]}]}},"HistoryDataItemModel":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./history-data-value","name":"HistoryDataValue","line":6,"character":31}]}]}]}}}}]

package/config/history-data/index.d.ts

@@ -1,4 +1,4 @@
 export { HistoryDataStore } from './history-data.store';
-export { HistoryDataModel } from './history-data.model';
+export { HistoryDataModel, HistoryDataItemModel } from './history-data.model';
 export { HistoryDataValue } from './history-data-value';
 export { GetHistoryDataArgs } from './get-history-data-args';

package/config/history-data/index.js

@@ -1,3 +1,3 @@
-export { HistoryDataModel } from './history-data.model';
+export { HistoryDataModel, HistoryDataItemModel } from './history-data.model';
 export { HistoryDataValue } from './history-data-value';
 export { GetHistoryDataArgs } from './get-history-data-args';

package/config/history-data/index.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./history-data.store","export":["HistoryDataStore"]},{"from":"./history-data.model","export":["HistoryDataModel"]},{"from":"./history-data-value","export":["HistoryDataValue"]},{"from":"./get-history-data-args","export":["GetHistoryDataArgs"]}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./history-data.store","export":["HistoryDataStore"]},{"from":"./history-data.model","export":["HistoryDataModel","HistoryDataItemModel"]},{"from":"./history-data-value","export":["HistoryDataValue"]},{"from":"./get-history-data-args","export":["GetHistoryDataArgs"]}]}]

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/air-quality/air-quality-element.d.ts

@@ -0,0 +1,31 @@
+import { Injector } from '@angular/core';
+import { AirQualityModel } from '../../model/air-quality/air-quality.model';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication/variable';
+import { VariableStore } from '../../config/variable';
+import { WeatherService } from '../../service';
+export declare class AirQualityElement extends ConditionalDisplayElement {
+    private readonly weatherService;
+    model: AirQualityModel;
+    timer: any;
+    private readonly localization;
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, weatherService: WeatherService, signalRAppId: string);
+    dispose(): void;
+    initAirQualityInfo(): void;
+    private handleData;
+    private handleNotSupported;
+    private handleGettingAddress;
+    private handleNoAddress;
+    private handleUnusualCommon;
+    private buildBackgroudRect;
+    private buildRectBackgroundForAqi;
+    private buildUnusualTipIcon;
+    getUnusualIconPath(): string;
+    private buildUnusualTipText;
+    private buildAirQualityText;
+    private buildLocGroup;
+    getLocPath(): string;
+    private appendAirQualitySvg;
+    clear(): void;
+}

package/elements/air-quality/air-quality-element.js

@@ -0,0 +1,194 @@
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import * as d3 from 'd3-selection';
+import { LOCALIZATION } from '../../localization';
+export class AirQualityElement extends ConditionalDisplayElement {
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, weatherService, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.weatherService = weatherService;
+        this.localization = injector.get(LOCALIZATION);
+        this.initAirQualityInfo();
+        this.timer = setInterval(() => this.initAirQualityInfo(), 1000 * 60 * 60);
+    }
+    dispose() {
+        clearInterval(this.timer);
+    }
+    initAirQualityInfo() {
+        this.clear();
+        this.weatherService.getAirQualityInfo().then(airQuality => {
+            const airQualityDto = airQuality;
+            if (!airQualityDto.supported) {
+                this.handleNotSupported();
+                return;
+            }
+            if (airQualityDto.gettingAddress) {
+                this.handleGettingAddress();
+                return;
+            }
+            if (!airQualityDto.hasAddress) {
+                this.handleNoAddress();
+                return;
+            }
+            this.handleData(airQualityDto.airQuality);
+        }).catch(() => {
+            this.handleNotSupported();
+        });
+    }
+    handleData(airQuality) {
+        const fontColor = this.model.stroke ? this.model.stroke : '#FFFFFF';
+        const backgroundColor = this.model.fill && this.model.fill || '#86A7C5';
+        const airQualitySvg = d3.create('svg');
+        this.buildBackgroudRect(airQualitySvg, backgroundColor);
+        this.buildLocGroup(airQualitySvg, airQuality.city, fontColor);
+        this.buildAirQualityText(airQualitySvg, 130, 55, airQuality.aqi, fontColor, 53);
+        this.buildAirQualityText(airQualitySvg, 220, 28, '空气质量', fontColor);
+        this.buildRectBackgroundForAqi(airQualitySvg, airQuality.level);
+        this.buildAirQualityText(airQualitySvg, 220, 49, airQuality.category, fontColor);
+        this.buildAirQualityText(airQualitySvg, 30, 75, 'PM2.5', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 30, 95, airQuality.pm25, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 80, 75, 'PM10', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 80, 95, airQuality.pm10, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 130, 75, 'NO2', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 130, 95, airQuality.no2, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 175, 75, 'SO2', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 175, 95, airQuality.so2, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 215, 75, 'CO', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 215, 95, airQuality.co, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 250, 75, 'O3', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 250, 95, airQuality.o3, fontColor, 15);
+        this.appendAirQualitySvg(airQualitySvg);
+    }
+    handleNotSupported() {
+        this.handleUnusualCommon(this.localization.airQualityNotSupport);
+    }
+    handleGettingAddress() {
+        this.handleUnusualCommon(this.localization.airQualityNotAvailable);
+    }
+    handleNoAddress() {
+        this.handleUnusualCommon(this.localization.airQualityNotAddress);
+    }
+    handleUnusualCommon(text) {
+        const airQualitySvg = d3.create('svg');
+        this.buildBackgroudRect(airQualitySvg, '#081625', '0.5');
+        this.buildUnusualTipIcon(airQualitySvg, text.length);
+        this.buildUnusualTipText(airQualitySvg, text);
+        this.appendAirQualitySvg(airQualitySvg);
+    }
+    buildBackgroudRect(airQualitySvg, backgroundColor, opacity = '1') {
+        airQualitySvg.append('rect')
+            .attr('x', '0')
+            .attr('y', '0')
+            .attr('rx', '2')
+            .attr('width', '280')
+            .attr('height', '105')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+    buildRectBackgroundForAqi(airQualitySvg, level, opacity = '1') {
+        let backgroundColor;
+        if (level >= 0 && level <= 50) {
+            backgroundColor = '#50DF56';
+        }
+        else if (level >= 51 && level <= 100) {
+            backgroundColor = '#FBCD1C';
+        }
+        else if (level >= 101 && level <= 150) {
+            backgroundColor = '#FF9900';
+        }
+        else if (level >= 151 && level <= 200) {
+            backgroundColor = '#FF3232';
+        }
+        else if (level >= 201 && level <= 300) {
+            backgroundColor = '#F403B5';
+        }
+        else if (level > 300) {
+            backgroundColor = '#A10E0E';
+        }
+        airQualitySvg.append('rect')
+            .attr('x', '195')
+            .attr('y', '35')
+            .attr('rx', '5')
+            .attr('width', '50')
+            .attr('height', '20')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+    buildUnusualTipIcon(airQualitySvg, length) {
+        airQualitySvg.append('svg')
+            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 : '44')
+            .attr('y', '23')
+            .attr('width', '42')
+            .attr('height', '34')
+            .attr('viewBox', '0 0 200 160')
+            .html(this.getUnusualIconPath);
+    }
+    getUnusualIconPath() {
+        return `<g>
+            <ellipse class="st2" cx="74.6" cy="72.3" rx="36.4" ry="36.3" fill="#EFCA30"/>
+            <path class="st2" fill="#EFCA30" d="M74.5,24.5C74.6,24.5,74.6,24.5,74.5,24.5c3.7,0,5.7-2,5.7-5.5V5.5C80.2,2,78,0,74.6,0C71,0,69,2.1,69,5.5V19
+            C69,22.3,71,24.4,74.5,24.5L74.5,24.5z"/>
+            <path class="st2" fill="#EFCA30" d="M37.2,28.5l-6.9-6.7c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4
+            l6.4,6.1c0.5,0.5,1.2,1.1,1.9,1.4c1.2,0.5,2,0.7,2.8,0.7c0.6,0,1.3-0.2,2-0.4c1.4-0.5,2.7-1.5,3.3-2.8c0.3-0.7,0.5-1.5,0.5-2.2
+            C39.1,31.2,38.5,29.8,37.2,28.5L37.2,28.5z"/>
+            <path class="st2" fill="#EFCA30" d="M112.5,36.9c1.6,0.7,2.7,1.2,3.7,1.2s2-0.4,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c1.3-1.3,1.9-2.6,1.9-4
+            s-0.6-2.7-1.9-4c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4c0,1.4,0.6,2.7,1.9,4
+            C112.1,36.6,112.3,36.8,112.5,36.9L112.5,36.9z"/>
+            <path class="st2" fill="#EFCA30" d="M25.1,73.2C25.1,73.1,25.1,73.1,25.1,73.2c0-3.6-2-5.6-5.6-5.6H5.6C2,67.6,0,69.7,0,73.1
+            c0,3.4,2.2,5.5,5.6,5.5h13.8C22.7,78.6,24.9,76.6,25.1,73.2L25.1,73.2z"/>
+            <path class="st2" fill="#EFCA30" d="M33.2,107.6c-1.4,0-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4c0.2,0.2,0.3,0.3,0.5,0.4
+            c1.6,0.7,2.7,1.2,3.7,1.2c0.5,0,1.5-0.1,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c2.6-2.5,2.6-5.6,0-8.1
+            C36,108.3,34.6,107.6,33.2,107.6L33.2,107.6z"/>
+            </g>
+            <path class="st3" fill="#FFFFFF" d="M68.8,160h99.3c17.9-2,31.9-17.1,31.9-35.5c0-18.3-13.8-33.3-31.5-35.4c-8-17-25.2-28.9-45.3-28.9
+            c-22.4,0-41.4,14.7-47.7,35c-1.1-0.1-2.2-0.2-3.4-0.2c-18,0-32.6,14.6-32.6,32.6C39.5,144.5,52.3,158.3,68.8,160z"/>`;
+    }
+    buildUnusualTipText(airQualitySvg, text) {
+        const length = text.length;
+        airQualitySvg.append('text')
+            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 + 42 + 8 : '94')
+            .attr('y', '46')
+            .attr('font-size', 14)
+            .attr('font-anchor', 'middle')
+            .attr('fill', '#FFFFFF')
+            .attr('dominant-baseline', 'central')
+            .text(text);
+    }
+    buildAirQualityText(airQualitySvg, x, y, text, fontColor, size = 12, opacity = 1) {
+        airQualitySvg.append('text')
+            .attr('x', x)
+            .attr('y', y)
+            .attr('font-size', size)
+            .attr('text-anchor', 'middle')
+            .attr('fill', fontColor)
+            .attr('opacity', opacity)
+            .text(text);
+    }
+    buildLocGroup(airQualitySvg, location, fontColor) {
+        airQualitySvg.append('svg')
+            .attr('x', '14')
+            .attr('y', '10')
+            .attr('width', '11')
+            .attr('height', '15')
+            .attr('viewBox', '0 0 156 200')
+            .append('path')
+            .attr('fill', fontColor)
+            .attr('d', this.getLocPath);
+        airQualitySvg.append('text')
+            .attr('x', '30')
+            .attr('y', '22')
+            .attr('font-size', '12')
+            .attr('fill', fontColor)
+            .text(location);
+    }
+    getLocPath() {
+        return `M78,0C35,0,0,33.3,0,74.3c0,50.8,55.5,105.4,72.6,120.9l5.3,4.8l5.3-4.7c0.7-0.6,72.5-64.6,72.8-121v0
+C156,33.3,121,0,78,0z M78,178.6c-17.8-17.1-62.1-63.9-62.1-104.4C15.8,42,43.7,15.7,78,15.7c34.3,0,62.2,26.3,62.2,58.5
+C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,32.4,32.2s32.4-14.4,32.4-32.2S95.8,
+40.4,78,40.4z M78,89.1c-9.1,0-16.5-7.4-16.5-16.5S68.9,56.2,78,56.2s16.5,7.4,16.5,16.5S87.1,89.1,78,89.1z`;
+    }
+    appendAirQualitySvg(airQualitySvg) {
+        this.rootElement.append(() => airQualitySvg.node());
+    }
+    clear() {
+        this.rootElement.selectAll('*').remove();
+    }
+}

package/elements/air-quality/air-quality-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AirQualityElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":11,"character":39},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":19,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":20,"character":27},{"__symbolic":"reference","module":"../../communication/variable","name":"VariableCommunicator","line":21,"character":30},{"__symbolic":"reference","module":"../../config/variable","name":"VariableStore","line":22,"character":23},{"__symbolic":"reference","module":"../../service","name":"WeatherService","line":23,"character":41},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"initAirQualityInfo":[{"__symbolic":"method"}],"handleData":[{"__symbolic":"method"}],"handleNotSupported":[{"__symbolic":"method"}],"handleGettingAddress":[{"__symbolic":"method"}],"handleNoAddress":[{"__symbolic":"method"}],"handleUnusualCommon":[{"__symbolic":"method"}],"buildBackgroudRect":[{"__symbolic":"method"}],"buildRectBackgroundForAqi":[{"__symbolic":"method"}],"buildUnusualTipIcon":[{"__symbolic":"method"}],"getUnusualIconPath":[{"__symbolic":"method"}],"buildUnusualTipText":[{"__symbolic":"method"}],"buildAirQualityText":[{"__symbolic":"method"}],"buildLocGroup":[{"__symbolic":"method"}],"getLocPath":[{"__symbolic":"method"}],"appendAirQualitySvg":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}]}}}}]

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

@@ -0,0 +1,69 @@
+import { Injector } from '@angular/core';
+import { PermissionChecker, SystemTextLibraryService, LanguageService } 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';
+import { GuiContext } from '../../gui/gui-context';
+export declare class AlarmElement extends ConditionalDisplayElement {
+    private readonly alarmsStore;
+    private readonly systemTextLibraryService?;
+    private readonly languageService?;
+    private readonly guiContext?;
+    readonly model: AlarmModel;
+    private readonly logger;
+    readonly variableCommunicator: VariableCommunicator;
+    private timePeriods;
+    private languageChangeSubscription?;
+    private elementStatus;
+    private element;
+    private refreshIntervalId;
+    private readonly displayOption;
+    private alarmNames;
+    private startTime;
+    private endTime;
+    private currentTimePeriod;
+    private alarmList;
+    private currentAlarmList;
+    private page;
+    private totalCount;
+    private pageSize;
+    private getAlarmDataId;
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string, systemTextLibraryService?: SystemTextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
+    dispose(): void;
+    /**
+     * 订阅语种变化事件
+     */
+    private subscribeLanguageChange;
+    /**
+     * 更新语种相关的文案（表头和时间段选择器）
+     */
+    private updateLanguageTexts;
+    /**
+     * 获取当前语种的 culture 代码
+     */
+    private getCurrentCulture;
+    /**
+     * 根据列索引获取表头翻译（从系统文本库获取多语种翻译）
+     * 固定4项表头，按列索引顺序：告警名称、告警内容、告警等级、时间
+     */
+    private getHeaderTextByColumn;
+    private getValidTimePeriods;
+    /**
+     * 获取时间段文案（从系统文本库获取多语种翻译）
+     */
+    private getTimePeriodText;
+    private getAlarmData;
+    private renderElement;
+    private renderOperationArea;
+    private updateTimeRange;
+    private updateQueryTimeRange;
+    private loadFirstPage;
+    private loadNextPage;
+    private loadPreviousPage;
+    private loadLastPage;
+    private setStatusAsNormal;
+    private setStatusAsLoading;
+    private renderStatus;
+    private clearStatus;
+}