@flexem/fc-gui 3.0.0-alpha.133 → 3.0.0-alpha.135

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

@@ -64,4 +64,8 @@ export declare class ScrollAlarmElement extends ConditionalDynamicDisplayElement
      * 模拟运行时的静态内容滚动
      */
     private scrollStaticContent;
+    /**
+     * 实时替换当前滚动内容（用于告警数据变化时）
+     */
+    private replaceCurrentScrollingContent;
 }

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

@@ -78,12 +78,8 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                             this.isWaitingForAlarmRefresh = true;
                             // 设置节流定时器,1秒后执行
                             this.alarmRefreshThrottleId = setTimeout(() => {
-                                // 收到新告警消息，重置到第一页并重新开始滚动
-                                this.resetToFirstPage();
-                                // 如果非自动循环模式，需要重新启动滚动
-                                if (!this.autoCycle && !this.isScrolling) {
-                                    this.initScrolling();
-                                }
+                                // 收到新告警消息，实时替换当前滚动内容，不影响滚动
+                                this.replaceCurrentScrollingContent();
                                 // 重置等待刷新标志
                                 this.isWaitingForAlarmRefresh = false;
                             }, 1000);
@@ -309,7 +305,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             const textContainer = document.createElement('div');
             textContainer.style.cssText = `
                 font: ${this.fontString};
-                color: ${this.headerFont.color || '#E95F5F'};
+                color: ${this.headerFont.color || '#e33c39'};
                 white-space: nowrap;
                 overflow: visible;
             `;
@@ -384,7 +380,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         if (this.displayedItems.length <= 0)
             return;
         // 每次滚动的距离
-        const scrollStep = 2; // 减小滚动步长，使滚动更平滑
+        const scrollStep = 6; // 减小滚动步长，使滚动更平滑
         // 更新位置 - 从右往左滚动
         this.currentLeft -= scrollStep;
         // 检查是否需要加载下一页（只有在自动循环模式下才需要预加载）
@@ -396,9 +392,9 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                 this.getAlarmData();
             }
         }
-        // 当内容完全滚出容器左侧时（currentLeft + totalWidth < 0）
-        // 说明所有内容都已经滚出视图，需要重置或停止
-        if (this.currentLeft + this.totalWidth < 0) {
+        // 当内容完全滚出容器左侧时（currentLeft + totalWidth < -50）
+        // 说明所有内容都已经滚出视图（不开启自动循环时多滚动50px确保最后一个字完全滚出）
+        if (this.currentLeft + this.totalWidth < -50) {
             if (this.autoCycle) {
                 // 自动循环模式：无缝衔接回到容器右侧
                 if (this.hasMoreData) {
@@ -594,7 +590,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         const textContainer = document.createElement('div');
         textContainer.style.cssText = `
             font: ${this.fontString};
-            color: ${this.headerFont.color || '#E95F5F'};
+            color: ${this.headerFont.color || '#e33c39'};
             white-space: nowrap;
             overflow: visible;
         `;
@@ -649,9 +645,9 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
         // 当内容完全滚出容器左侧时（内容右边缘完全移出容器左边缘）
         // currentLeft + totalWidth 表示内容右边缘的位置
-        // 当这个值 <= 0 时，表示内容右边缘已经到达或超过容器左边缘，内容完全不可见
+        // 当这个值 <= -50 时，表示内容完全不可见（不开启自动循环时多滚动50px确保最后一个字完全滚出）
         const rightEdge = this.currentLeft + this.totalWidth;
-        if (rightEdge <= 0) {
+        if (rightEdge <= -50) {
             if (this.autoCycle) {
                 // 自动循环模式：重置到容器右侧（使用配置宽度）
                 this.currentLeft = this.model.size.width;
@@ -665,4 +661,137 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             }
         }
     }
+    /**
+     * 实时替换当前滚动内容（用于告警数据变化时）
+     */
+    replaceCurrentScrollingContent() {
+        var _a, _b;
+        // 更新查询时间范围
+        this.updateQueryTimeRange();
+        // 查询所有当前应该显示的数据（查询足够多的数据以确保包含所有新增/删除）
+        const selectedStates = (_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.selectState;
+        const timeSort = (_b = this.model.generalSetting) === null || _b === void 0 ? void 0 : _b.timeSort;
+        // 使用一个较大的值确保能查询到所有数据，避免因新增数据导致查询不全
+        const queryCount = Math.max(this.displayedItems.length || this.maxResultCount, 100);
+        // 确定排序参数
+        let sorting = 'TriggeredTime ASC'; // 默认升序
+        if (timeSort === 0 || timeSort === '0') {
+            sorting = 'TriggeredTime ASC'; // 升序
+        }
+        else if (timeSort === 1 || timeSort === '1') {
+            sorting = 'TriggeredTime DESC'; // 降序
+        }
+        // 兼容处理：如果 selectedStates 为空数组或 undefined，传 undefined（不过滤）
+        const stateFilter = (selectedStates && Array.isArray(selectedStates) && selectedStates.length > 0)
+            ? selectedStates
+            : undefined;
+        const input = new GetAlarmsArgs(this.alarmNames, this.startTime, this.endTime, queryCount, 0, // skipCount
+        stateFilter, sorting);
+        this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (!result.error && result.items) {
+                const newItems = result.items;
+                // 如果没有数据，清空显示
+                if (newItems.length === 0) {
+                    this.displayedItems = [];
+                    this.totalWidth = 0;
+                    this.pageWidths = [];
+                    this.currentPage = 1;
+                    this.hasTriedFirstPage = false;
+                    this.hasMoreData = true;
+                    // 清空DOM
+                    if (this.allAlarmsContainer) {
+                        this.allAlarmsContainer.innerHTML = '';
+                        const containerWidth = this.model.size.width;
+                        this.currentLeft = containerWidth;
+                        this.allAlarmsContainer.style.left = `${containerWidth}px`;
+                    }
+                    return;
+                }
+                // 如果是首次加载或当前没有数据，直接渲染并启动滚动
+                if (this.displayedItems.length === 0) {
+                    this.displayedItems = newItems;
+                    this.allAlarmsContainer.innerHTML = '';
+                    this.totalWidth = 0;
+                    this.pageWidths = [];
+                    // 设置 hasMoreData 状态，防止滚动时误触发 getAlarmData
+                    this.hasMoreData = result.totalCount > newItems.length;
+                    // 设置初始位置到容器右侧
+                    this.currentLeft = this.container.clientWidth;
+                    this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+                    this.renderNewPage(newItems);
+                    // 启动滚动
+                    if (!this.isScrolling) {
+                        this.initScrolling();
+                    }
+                    return;
+                }
+                // 清空所有DOM元素
+                this.allAlarmsContainer.innerHTML = '';
+                // 获取语言设置
+                const language = ((_c = (_b = (_a = window.abp) === null || _a === void 0 ? void 0 : _a.localization) === null || _b === void 0 ? void 0 : _b.currentLanguage) === null || _c === void 0 ? void 0 : _c.name) || 'zh-Hans';
+                const isChinese = language === 'zh-Hans' || language === 'zh';
+                // 重新创建所有新数据的DOM元素
+                for (let i = 0; i < newItems.length; i++) {
+                    const alarm = newItems[i];
+                    const textContainer = document.createElement('div');
+                    textContainer.style.cssText = `
+                        font: ${this.fontString};
+                        color: ${this.headerFont.color || '#e33c39'};
+                        white-space: nowrap;
+                        overflow: visible;
+                    `;
+                    if (this.headerFont.isUnderline) {
+                        textContainer.style.textDecoration = 'underline';
+                    }
+                    const contentParts = [];
+                    // 显示触发时间
+                    if (((_d = this.model.generalSetting) === null || _d === void 0 ? void 0 : _d.showTriggerTime) && alarm.triggeredTime) {
+                        const formattedTime = moment(alarm.triggeredTime).format('YYYY/MM/DD HH:mm:ss');
+                        contentParts.push(formattedTime);
+                    }
+                    // 显示告警等级
+                    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.showAlarmContent) && alarm.message) {
+                        contentParts.push(alarm.message);
+                    }
+                    // 显示告警状态
+                    if (((_h = this.model.generalSetting) === null || _h === void 0 ? void 0 : _h.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);
+                    }
+                    textContainer.textContent = contentParts.join(' ');
+                    textContainer.setAttribute('data-index', i.toString());
+                    this.allAlarmsContainer.appendChild(textContainer);
+                }
+                // 重新计算totalWidth
+                const allChildren = Array.from(this.allAlarmsContainer.children);
+                let newTotalWidth = 0;
+                allChildren.forEach(child => {
+                    newTotalWidth += child.offsetWidth + 80;
+                });
+                if (newTotalWidth > 0) {
+                    newTotalWidth -= 80; // 移除最后一个gap
+                }
+                // 更新状态
+                this.displayedItems = newItems;
+                this.totalWidth = newTotalWidth;
+                this.pageWidths = [newTotalWidth]; // 重置为单页
+                this.hasMoreData = result.totalCount > newItems.length;
+                // 收到新告警时，重置滚动位置到容器右侧，确保新内容能被滚动出来显示
+                this.currentLeft = this.container.clientWidth;
+                this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+            }
+        });
+    }
 }

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ScrollAlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":17,"character":40},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":52,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":54,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":55,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":56,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":57,"character":38},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"initDisplayContainer":[{"__symbolic":"method"}],"renderNewPage":[{"__symbolic":"method"}],"removeOldestPage":[{"__symbolic":"method"}],"scrollContent":[{"__symbolic":"method"}],"initScrolling":[{"__symbolic":"method"}],"pauseScroll":[{"__symbolic":"method"}],"resumeScroll":[{"__symbolic":"method"}],"resetToFirstPage":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}],"renderStaticDisplay":[{"__symbolic":"method"}],"initStaticScrolling":[{"__symbolic":"method"}],"scrollStaticContent":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ScrollAlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":17,"character":40},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":52,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":54,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":55,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":56,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":57,"character":38},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"initDisplayContainer":[{"__symbolic":"method"}],"renderNewPage":[{"__symbolic":"method"}],"removeOldestPage":[{"__symbolic":"method"}],"scrollContent":[{"__symbolic":"method"}],"initScrolling":[{"__symbolic":"method"}],"pauseScroll":[{"__symbolic":"method"}],"resumeScroll":[{"__symbolic":"method"}],"resetToFirstPage":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}],"renderStaticDisplay":[{"__symbolic":"method"}],"initStaticScrolling":[{"__symbolic":"method"}],"scrollStaticContent":[{"__symbolic":"method"}],"replaceCurrentScrollingContent":[{"__symbolic":"method"}]}}}}]

package/package.json

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