@flexem/fc-gui 3.0.0-alpha.121 → 3.0.0-alpha.122

package/elements/main-element.js

@@ -29,7 +29,6 @@ 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';
-import { ScrollAlarmElement } from './scroll-alarm/scroll-alarm-element';
 export class MainElement {
     constructor(injector, bsModalService, context, variableCommunicator, popupViewService, signalRAppId) {
         this.injector = injector;
@@ -134,9 +133,6 @@ export class MainElement {
                 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;
-                case GuiConsts.components.scrollAlarmKey:
-                    this.elements.push(new ScrollAlarmElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.alarmsStore, this.signalRAppId));
-                    break;
             }
         });
         this.initBackground();
@@ -302,7 +298,7 @@ export class MainElement {
         each(this.elements, e => {
             if (e instanceof HistoricalCurveElement || e instanceof VideoElement
                 || e instanceof WeatherElement || e instanceof NumericalDisplayElement || e instanceof TextElement
-                || e instanceof AirQualityElement || e instanceof ScrollAlarmElement) {
+                || e instanceof AirQualityElement || e instanceof SwitchIndicatorLightElement) {
                 e.dispose();
             }
         });

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":56,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":57,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":58,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":59,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":60,"character":43},null]}],"load":[{"__symbolic":"method"}],"uniformStretch":[{"__symbolic":"method"}],"changeVideoStyle":[{"__symbolic":"method"}],"horizontalStretch":[{"__symbolic":"method"}],"initElementState":[{"__symbolic":"method"}],"getVariableNames":[{"__symbolic":"method"}],"reportVariableStates":[{"__symbolic":"method"}],"getVirtualDeviceIdFromRect":[{"__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"}],"getVirtualDeviceIdFromRect":[{"__symbolic":"method"}],"reportVariableValues":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkIsLoaded":[{"__symbolic":"method"}],"initBackground":[{"__symbolic":"method"}],"getImageEl":[{"__symbolic":"method"}]}}}}]

package/elements/shared/graph/graph-state-element.d.ts

@@ -24,4 +24,5 @@ export declare class GraphStateElement {
     private removeImageElement;
     private doFaultFlicker;
     private clearFlickerInterval;
+    dispose(): void;
 }

package/elements/shared/graph/graph-state-element.js

@@ -107,4 +107,22 @@ export class GraphStateElement {
             }
         }
     }
+    dispose() {
+        // 清理定时器
+        if (this.faultFlickerInterval) {
+            clearInterval(this.faultFlickerInterval);
+            this.faultFlickerInterval = undefined;
+        }
+        // 移除图片元素
+        this.removeImageElement();
+        // 清理图形缓存
+        if (this.graphs) {
+            this.graphs.clear();
+        }
+        // 清理 SVG 元素
+        if (this._element && this._element.parentNode) {
+            this._element.parentNode.removeChild(this._element);
+        }
+        this._element = null;
+    }
 }

package/elements/shared/graph/graph-state-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraphStateElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../../model","name":"GraphSetting","line":21,"character":47},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"../../../config","name":"GraphStore","line":24,"character":37},{"__symbolic":"reference","module":"../../../logger","name":"LoggerService","line":25,"character":33},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../../../model/switch-indicator-light/indicator-light-fault-flicker","name":"IndicatorLightFaultFlicker","line":27,"character":41}]}]}],"switchToState":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}],"getImageElement":[{"__symbolic":"method"}],"removeImageElement":[{"__symbolic":"method"}],"doFaultFlicker":[{"__symbolic":"method"}],"clearFlickerInterval":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraphStateElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../../model","name":"GraphSetting","line":21,"character":47},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"../../../config","name":"GraphStore","line":24,"character":37},{"__symbolic":"reference","module":"../../../logger","name":"LoggerService","line":25,"character":33},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../../../model/switch-indicator-light/indicator-light-fault-flicker","name":"IndicatorLightFaultFlicker","line":27,"character":41}]}]}],"switchToState":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}],"getImageElement":[{"__symbolic":"method"}],"removeImageElement":[{"__symbolic":"method"}],"doFaultFlicker":[{"__symbolic":"method"}],"clearFlickerInterval":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/switch-indicator-light-element.d.ts

@@ -24,6 +24,7 @@ export declare class SwitchIndicatorLightElement extends ConditionalEnableElemen
     private restorationTimer;
     private isWriteRestorationDownValue;
     private onDocMouseUp;
+    private indicatorLightSubscription;
     constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     handleMouseUp(): void;
     private initOnDocMouseUpEvent;
@@ -36,4 +37,5 @@ export declare class SwitchIndicatorLightElement extends ConditionalEnableElemen
     private switchToState;
     private initGraphAndText;
     private checkState;
+    dispose(): void;
 }

package/elements/switch-indicator-light/switch-indicator-light-element.js

@@ -208,7 +208,7 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             default:
                 throw new Error(`Unknown switchType:${settings.type}`);
         }
-        this.indicatorLightOperator.currentStateIdChanged.subscribe(statusIdValue => {
+        this.indicatorLightSubscription = this.indicatorLightOperator.currentStateIdChanged.subscribe(statusIdValue => {
             this.currentStateIdChange(statusIdValue);
         });
         this.indicatorLightOperator.requestData(this.signalRAppId);
@@ -249,4 +249,28 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             throw new Error('The switch indicator light\'s states must greater than 2.');
         }
     }
+    dispose() {
+        // 清理 document 级别的事件监听器
+        if (this.onDocMouseUp) {
+            document.removeEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
+        }
+        // 清理定时器
+        if (this.restorationTimer) {
+            clearTimeout(this.restorationTimer);
+            this.restorationTimer = undefined;
+        }
+        // 清理 indicatorLightOperator 订阅
+        if (this.indicatorLightSubscription) {
+            this.indicatorLightSubscription.unsubscribe();
+        }
+        // 清理图形元素（释放 SVG 内存）
+        if (this.graphStateElement) {
+            this.graphStateElement.dispose();
+        }
+        // 清理文本元素
+        if (this.textStateElement) {
+            // TextStateElement 可能也需要 dispose，暂时先清理引用
+            this.textStateElement = null;
+        }
+    }
 }

package/elements/switch-indicator-light/switch-indicator-light-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":32,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":50,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":53,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":54,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":55,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":56,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":57,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":58,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":59,"character":22},{"__symbolic":"reference","name":"string"}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":32,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":51,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":52,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":53,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":54,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":55,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":56,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":57,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":58,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":59,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":60,"character":22},{"__symbolic":"reference","name":"string"}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/package.json

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

package/shared/gui-consts.d.ts

@@ -28,6 +28,5 @@ export declare class GuiConsts {
         weatherKey: string;
         airQualityKey: string;
         alarmKey: string;
-        scrollAlarmKey: string;
     };
 }

package/shared/gui-consts.js

@@ -28,6 +28,5 @@ GuiConsts.components = {
     tableKey: 'Table',
     weatherKey: 'Weather',
     airQualityKey: 'AirQualityIndex',
-    alarmKey: 'Alarm',
-    scrollAlarmKey: 'ScrollAlarm'
+    alarmKey: 'Alarm'
 };

package/shared/gui-consts.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GuiConsts":{"__symbolic":"class","statics":{"components":{"imageKey":"Image","numericalDisplayKey":"NumericalDisplay","textKey":"Text","hyperlinkKey":"Hyperlink","meterKey":"Meter","pipeKey":"Pipe","switchIndicatorLightKey":"SwitchIndicatorLight","barGraphKey":"BarGraph","toggleViewKey":"ToggleView","characterKey":"Character","straightLineKey":"StraightLine","polyLineKey":"PolyLine","rectangleKey":"Rectangle","sectorkey":"Sector","ellipseKey":"Ellipse","datetimeDisplayKey":"DatetimeDisplay","historicalCurveKey":"HistoricalCurve","ringGraphKey":"RingGraph","viewOperationElement":"ViewOperation","polygonKey":"Polygon","videokey":"Video","tableKey":"Table","weatherKey":"Weather","airQualityKey":"AirQualityIndex","alarmKey":"Alarm","scrollAlarmKey":"ScrollAlarm"}}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiConsts":{"__symbolic":"class","statics":{"components":{"imageKey":"Image","numericalDisplayKey":"NumericalDisplay","textKey":"Text","hyperlinkKey":"Hyperlink","meterKey":"Meter","pipeKey":"Pipe","switchIndicatorLightKey":"SwitchIndicatorLight","barGraphKey":"BarGraph","toggleViewKey":"ToggleView","characterKey":"Character","straightLineKey":"StraightLine","polyLineKey":"PolyLine","rectangleKey":"Rectangle","sectorkey":"Sector","ellipseKey":"Ellipse","datetimeDisplayKey":"DatetimeDisplay","historicalCurveKey":"HistoricalCurve","ringGraphKey":"RingGraph","viewOperationElement":"ViewOperation","polygonKey":"Polygon","videokey":"Video","tableKey":"Table","weatherKey":"Weather","airQualityKey":"AirQualityIndex","alarmKey":"Alarm"}}}}}]

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

@@ -1,50 +0,0 @@
-import { Injector } from '@angular/core';
-import { PermissionChecker } from '../../service';
-import { VariableCommunicator } from '../../communication';
-import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
-import { ScrollAlarmModel } from '../../model/scroll-alarm/scroll-alarm.model';
-import { AlarmsStore, VariableStore } from '../../config';
-export declare class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
-    private readonly alarmsStore;
-    readonly model: ScrollAlarmModel;
-    private readonly logger;
-    readonly variableCommunicator: VariableCommunicator;
-    private elementStatus;
-    private element;
-    private scrollIntervalId;
-    private alarmNames;
-    private startTime;
-    private endTime;
-    private getAlarmDataId;
-    private isScrolling;
-    private isDisposed;
-    private currentPage;
-    private maxResultCount;
-    private displayedItems;
-    private pageWidths;
-    private totalWidth;
-    private container;
-    private allAlarmsContainer;
-    private currentLeft;
-    private autoCycle;
-    private hasMoreData;
-    private isLoadingNextPage;
-    private headerFont;
-    private fontString;
-    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string);
-    dispose(): void;
-    private getAlarmData;
-    private initDisplayContainer;
-    private renderNewPage;
-    private removeOldestPage;
-    private resetToFirstPage;
-    private scrollContent;
-    private initScrolling;
-    private pauseScroll;
-    private resumeScroll;
-    private updateQueryTimeRange;
-    private setStatusAsNormal;
-    private setStatusAsLoading;
-    private renderStatus;
-    private clearStatus;
-}

package/elements/scroll-alarm/scroll-alarm-element.js

@@ -1,421 +0,0 @@
-import * as d3 from 'd3';
-import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
-import { GetAlarmsArgs } from '../../config';
-import * as moment from 'moment';
-import { LOGGER_SERVICE_TOKEN } from '../../logger';
-var ScrollAlarmElementStatus;
-(function (ScrollAlarmElementStatus) {
-    ScrollAlarmElementStatus[ScrollAlarmElementStatus["Normal"] = 0] = "Normal";
-    ScrollAlarmElementStatus[ScrollAlarmElementStatus["Loading"] = 1] = "Loading"; // 加载中
-})(ScrollAlarmElementStatus || (ScrollAlarmElementStatus = {}));
-export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
-    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, alarmsStore, signalRAppId) {
-        var _a, _b, _c, _d, _e;
-        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
-        this.alarmsStore = alarmsStore;
-        this.elementStatus = ScrollAlarmElementStatus.Loading;
-        this.alarmNames = [];
-        this.isScrolling = false;
-        this.isDisposed = false;
-        // 新的分页和滚动逻辑变量
-        this.currentPage = 1;
-        this.maxResultCount = 3; // 每页数据量
-        this.displayedItems = []; // 当前显示的所有数据
-        this.pageWidths = []; // 存储每页的宽度
-        this.totalWidth = 0; // 所有显示数据的总宽度
-        this.currentLeft = 0;
-        this.autoCycle = true;
-        this.hasMoreData = true;
-        this.isLoadingNextPage = false;
-        this.rootElement.selectAll('*').remove();
-        this.setStatusAsLoading();
-        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
-        this.variableCommunicator = variableCommunicator;
-        this.autoCycle = (_b = (_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.autoCycle) !== null && _b !== void 0 ? _b : true;
-        this.maxResultCount = (_d = (_c = this.model.generalSetting) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 3;
-        if (this.model.filterSetting) {
-            this.alarmNames = this.model.filterSetting.detailsData.map(item => item.name);
-            this.updateQueryTimeRange();
-            // 监听告警更新
-            // variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
-            //     alarms.forEach(alarm => {
-            //         if (this.alarmNames.indexOf(alarm.name) !== -1) {
-            //             this.getAlarmData();
-            //             return;
-            //         }
-            //     });
-            // });
-            // 初始化显示容器
-            this.initDisplayContainer();
-            // 获取字体设置
-            this.headerFont = ((_e = this.model.generalSetting) === null || _e === void 0 ? void 0 : _e.headerFont) || {};
-            const fontStyle = [];
-            if (this.headerFont.isBold)
-                fontStyle.push('bold');
-            if (this.headerFont.isItalic)
-                fontStyle.push('italic');
-            if (this.headerFont.isUnderline)
-                fontStyle.push('underline');
-            fontStyle.push(`${this.headerFont.fontSize || '16px'}`);
-            fontStyle.push(`${this.headerFont.fontFamily || 'Microsoft YaHei'}`);
-            this.fontString = fontStyle.join(' ');
-            this.getAlarmData();
-        }
-        else {
-            this.displayedItems = [];
-            if (this.allAlarmsContainer) {
-                this.allAlarmsContainer.innerHTML = '';
-                this.totalWidth = 0;
-                this.pageWidths = [];
-            }
-        }
-    }
-    dispose() {
-        this.isDisposed = true;
-        clearInterval(this.scrollIntervalId);
-        clearTimeout(this.getAlarmDataId);
-        if (this.element && this.element.tooltip) {
-            this.element.tooltip.hidden(true);
-        }
-        this.logger.debug(`[GUI]Dispose Scroll Alarm Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
-        // 重置所有状态
-        this.isScrolling = false;
-    }
-    getAlarmData() {
-        if (this.isDisposed || this.isLoadingNextPage)
-            return;
-        this.isLoadingNextPage = true;
-        // Only show loading for the first page load
-        if (this.currentPage === 1 && this.displayedItems.length === 0) {
-            this.setStatusAsLoading();
-        }
-        clearTimeout(this.getAlarmDataId);
-        this.getAlarmDataId = setTimeout(() => {
-            this.updateQueryTimeRange();
-            const skipCount = (this.currentPage - 1) * this.maxResultCount;
-            const input = new GetAlarmsArgs(this.alarmNames, this.startTime, this.endTime, this.maxResultCount, skipCount);
-            this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
-                this.isLoadingNextPage = false;
-                if (!result.error && result.items && result.items.length > 0) {
-                    const newPage = result.items;
-                    // 检查是否还有更多数据
-                    if (!this.autoCycle && newPage.length < this.maxResultCount) {
-                        this.hasMoreData = false;
-                    }
-                    else {
-                        this.hasMoreData = true;
-                    }
-                    // 添加新页数据
-                    this.displayedItems = this.displayedItems.concat(newPage);
-                    // 渲染新页
-                    this.renderNewPage(newPage);
-                    // 更新页码
-                    this.currentPage++;
-                    // 检查是否需要删除旧页（保持最多3页）
-                    if (this.currentPage > 4) {
-                        this.removeOldestPage();
-                    }
-                    // 如果是首次加载或还没有开始滚动，初始化滚动
-                    if (!this.isScrolling && this.displayedItems.length > 0) {
-                        this.initScrolling();
-                    }
-                    this.setStatusAsNormal();
-                }
-                else {
-                    // 如果没有数据且自动循环开启，循环回到第一页而不清空数据
-                    if (this.autoCycle) {
-                        // 直接跳转到第一页
-                        this.currentPage = 1;
-                        // 继续加载数据（会自动添加到末尾）
-                        this.getAlarmData();
-                    }
-                    else {
-                        this.hasMoreData = false;
-                        this.setStatusAsNormal();
-                    }
-                }
-            }, error => {
-                this.isLoadingNextPage = false;
-                this.setStatusAsNormal();
-                this.logger.error('Failed to get alarm data:', error);
-            });
-        }, 500);
-    }
-    initDisplayContainer() {
-        var _a;
-        const elementHeight = this.model.size.height;
-        const elementWidth = this.model.size.width;
-        // 创建foreignObject作为容器
-        this.element = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this.element.setAttribute('width', elementWidth.toString());
-        this.element.setAttribute('height', elementHeight.toString());
-        this.$element.append(this.element);
-        // 创建背景容器，应用headerFillColor背景色
-        this.container = document.createElement('div');
-        this.container.style.cssText = `
-            height: ${elementHeight}px;
-            width: 100%;
-            background-color: ${((_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.headerFillColor) || '#ffffff'};
-            display: flex;
-            align-items: center;
-            overflow: hidden;
-            position: relative;
-            border: 1px solid #8ea0aa;
-        `;
-        this.element.appendChild(this.container);
-        // 创建一个大容器来包含所有告警项，初始位置在左侧
-        this.allAlarmsContainer = document.createElement('div');
-        this.allAlarmsContainer.style.cssText = `
-            position: absolute;
-            left: 0px;
-            top: 50%;
-            transform: translateY(-50%);
-            display: flex;
-            align-items: center;
-            gap: 80px;
-        `;
-        this.container.appendChild(this.allAlarmsContainer);
-        // 添加鼠标悬停暂停和恢复滚动功能
-        this.container.addEventListener('mouseenter', () => this.pauseScroll());
-        this.container.addEventListener('mouseleave', () => this.resumeScroll());
-    }
-    renderNewPage(pageData) {
-        let pageWidth = 0;
-        // 为每个告警数据创建文本容器
-        pageData.forEach((alarm) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            // 创建告警文本容器
-            const textContainer = document.createElement('div');
-            textContainer.style.cssText = `
-                font: ${this.fontString};
-                color: ${this.headerFont.color || '#E95F5F'};
-                white-space: nowrap;
-                overflow: visible;
-            `;
-            // 构建告警信息内容，根据配置决定显示哪些字段
-            const contentParts = [];
-            // 显示触发时间
-            if (((_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.showTriggerTime) && alarm.triggeredTime) {
-                const formattedTime = moment(alarm.triggeredTime).format('YYYY/MM/DD HH:mm:ss');
-                contentParts.push(formattedTime);
-            }
-            // 获取当前语言环境
-            const language = ((_d = (_c = (_b = window.abp) === null || _b === void 0 ? void 0 : _b.localization) === null || _c === void 0 ? void 0 : _c.currentLanguage) === null || _d === void 0 ? void 0 : _d.name) || 'zh-Hans';
-            const isChinese = language === 'zh-Hans' || language === 'zh';
-            // 显示告警等级
-            if (((_e = this.model.generalSetting) === null || _e === void 0 ? void 0 : _e.showAlarmLevel) && alarm.alarmLevel !== undefined) {
-                const levelMap = isChinese ? ['警告', '次要', '主要', '严重'] : ['Warning', 'Minor', 'Major', 'Critical'];
-                const alarmLevel = levelMap[alarm.alarmLevel] || (isChinese ? '警告' : 'Warning');
-                contentParts.push(alarmLevel);
-            }
-            // 显示告警名称
-            if (((_f = this.model.generalSetting) === null || _f === void 0 ? void 0 : _f.showAlarmName) && alarm.name) {
-                contentParts.push(alarm.name);
-            }
-            // 显示告警状态
-            if (((_g = this.model.generalSetting) === null || _g === void 0 ? void 0 : _g.showAlarmState) && alarm.state !== undefined) {
-                const stateMap = isChinese ? ['触发/未确认', '触发/已确认', '恢复/未确认', '恢复/已确认'] : ['Triggered/Unconfirmed', 'Triggered/Confirmed', 'Restored/Unconfirmed', 'Restored/Confirmed'];
-                const alarmState = stateMap[alarm.state] || (isChinese ? '触发/未确认' : 'Triggered/Unconfirmed');
-                contentParts.push(alarmState);
-            }
-            // 显示告警内容
-            if (((_h = this.model.generalSetting) === null || _h === void 0 ? void 0 : _h.showAlarmContent) && alarm.message) {
-                contentParts.push(alarm.message);
-            }
-            // 将所有显示字段用空格连接，确保一行显示
-            const textContent = contentParts.join(' ');
-            textContainer.textContent = textContent;
-            this.allAlarmsContainer.appendChild(textContainer);
-            // 计算文本宽度
-            const textWidth = textContainer.offsetWidth;
-            pageWidth += textWidth + 80; // 80是gap大小
-        });
-        // 移除最后一个gap
-        if (pageWidth > 0) {
-            pageWidth -= 80;
-        }
-        // 保存页宽度
-        this.pageWidths.push(pageWidth);
-        this.totalWidth += pageWidth;
-    }
-    removeOldestPage() {
-        // 移除最旧的一页数据
-        this.displayedItems.splice(0, this.maxResultCount);
-        const oldPageWidth = this.pageWidths.shift() || 0;
-        // 更新总宽度
-        this.totalWidth -= oldPageWidth;
-        // 从DOM中移除最旧的元素
-        const elementsToRemove = Array.from(this.allAlarmsContainer.children).slice(0, this.maxResultCount);
-        elementsToRemove.forEach(element => {
-            this.allAlarmsContainer.removeChild(element);
-        });
-        // 调整当前left位置（保持视觉位置不变）- 这里需要等DOM更新完成后再调整
-        requestAnimationFrame(() => {
-            this.currentLeft += oldPageWidth;
-            this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
-        });
-    }
-    resetToFirstPage() {
-        // 重置到第一页，但保持现有数据和位置（无缝循环）
-        this.currentPage = 1;
-        this.hasMoreData = true;
-        // 直接加载第一页数据，不需要清空现有内容
-        this.getAlarmData();
-    }
-    scrollContent() {
-        if (this.displayedItems.length <= 0)
-            return;
-        // 每次滚动的距离
-        const scrollStep = 2; // 减小滚动步长，使滚动更平滑
-        // 更新位置 - 从右往左滚动
-        this.currentLeft -= scrollStep;
-        // 检查是否需要加载下一页
-        if (this.hasMoreData && !this.isLoadingNextPage) {
-            const currentPosition = Math.abs(this.currentLeft);
-            const loadedWidth = this.totalWidth - (this.pageWidths[this.pageWidths.length - 1] || 0);
-            // 当滚动到已加载内容的60%时，加载下一页（提前预加载，确保无缝衔接）
-            if (currentPosition > loadedWidth * 0.6) {
-                this.getAlarmData();
-            }
-        }
-        // 如果所有内容完全滚动出容器左侧，根据autoCycle决定是否重置
-        // 添加额外的偏移量(比如100px)，确保最后两个字也能完全滚出视图
-        if (Math.abs(this.currentLeft) > this.totalWidth + 100) {
-            if (this.autoCycle) {
-                if (this.hasMoreData) {
-                    // 加载下一页
-                    this.getAlarmData();
-                }
-                else {
-                    // 重置到第一页
-                    this.resetToFirstPage();
-                }
-                // 计算新加载页面的宽度（如果有）
-                const newPageWidth = this.pageWidths[this.pageWidths.length - 1] || 0;
-                // 设置位置到新加载页面的起始位置，实现无缝衔接
-                this.currentLeft = -(this.totalWidth - newPageWidth);
-                this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
-            }
-            else {
-                // 非循环滚动：停止滚动
-                clearInterval(this.scrollIntervalId);
-                this.isScrolling = false;
-            }
-        }
-        else {
-            this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
-        }
-    }
-    initScrolling() {
-        clearInterval(this.scrollIntervalId);
-        // 如果没有滚动设置或自动播放为false，则不启动滚动
-        if (this.displayedItems.length === 0) {
-            return;
-        }
-        const scrollInterval = 100; // 默认100ms，滚动更流畅
-        // 如果当前位置在容器右侧，延迟启动滚动确保内容渲染完成
-        if (this.currentLeft > this.container.clientWidth * 0.5) {
-            setTimeout(() => {
-                this.isScrolling = true;
-                this.scrollIntervalId = setInterval(() => {
-                    if (this.isScrolling) {
-                        this.scrollContent();
-                    }
-                }, scrollInterval);
-            }, 500);
-        }
-        else {
-            this.isScrolling = true;
-            this.scrollIntervalId = setInterval(() => {
-                if (this.isScrolling) {
-                    this.scrollContent();
-                }
-            }, scrollInterval);
-        }
-    }
-    pauseScroll() {
-        this.isScrolling = false;
-    }
-    resumeScroll() {
-        this.isScrolling = true;
-    }
-    updateQueryTimeRange() {
-        this.endTime = moment();
-        console.log(this.model.generalSetting, 1);
-        switch (this.model.generalSetting.displayPeriod) {
-            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');
-        }
-    }
-    setStatusAsNormal() {
-        this.elementStatus = ScrollAlarmElementStatus.Normal;
-        this.clearStatus();
-    }
-    setStatusAsLoading() {
-        this.elementStatus = ScrollAlarmElementStatus.Loading;
-        this.renderStatus('assets/img/loading.svg', '#226abc');
-    }
-    renderStatus(icon, stroke) {
-        if (this.elementStatus === ScrollAlarmElementStatus.Normal) {
-            this.clearStatus();
-            return;
-        }
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
-            .attr('width', this.model.size.width)
-            .attr('height', this.model.size.height);
-        const document = this.$element[0].ownerDocument;
-        const currentRect = this.$element.find('rect#StateFrame').first();
-        if (!currentRect.length) {
-            return;
-        }
-        this.$element.find('image#StateImage').remove();
-        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-        if (imgObj) {
-            let x = Number(currentRect[0].getAttribute('width')) - 20;
-            const currentRectX = currentRect[0].getAttribute('x');
-            if (currentRectX !== null) {
-                x += Number(currentRectX);
-            }
-            currentRect[0].setAttribute('stroke', stroke);
-            currentRect[0].setAttribute('stroke-opacity', '0.5');
-            imgObj.href.baseVal = icon;
-            imgObj.setAttributeNS(null, 'id', 'StateImage');
-            imgObj.setAttributeNS(null, 'x', x.toString());
-            imgObj.setAttributeNS(null, 'y', '0');
-            imgObj.setAttributeNS(null, 'height', '20px');
-            imgObj.setAttributeNS(null, 'width', '20px');
-            const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-            imgObj.appendChild(titleElement);
-            this.$element.append(imgObj);
-        }
-    }
-    clearStatus() {
-        const currentRect = this.$element.find('rect#StateFrame').first();
-        if (!currentRect.length) {
-            return;
-        }
-        const stroke = currentRect[0].getAttribute('stroke');
-        if (stroke) {
-            currentRect[0].removeAttribute('stroke');
-        }
-        this.$element.find('image#StateImage').remove();
-    }
-}