@flexem/fc-gui 3.0.0-alpha.144 → 3.0.0-alpha.146

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

@@ -47,18 +47,6 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                 this.initDisplayContainer();
                 // 获取字体设置
                 this.headerFont = ((_e = this.model.generalSetting) === null || _e === void 0 ? void 0 : _e.headerFont) || {};
-                // 构建符合 CSS font 属性规范的字符串
-                let fontString = '';
-                if (this.headerFont.isItalic) {
-                    fontString += 'italic ';
-                }
-                if (this.headerFont.isBold) {
-                    fontString += 'bold ';
-                }
-                const fontSize = this.headerFont.fontSize || '16px';
-                const lineHeight = parseInt(fontSize, 10) + 5;
-                fontString += `${fontSize}/${lineHeight}px ${this.headerFont.fontFamily || 'Microsoft YaHei'}`;
-                this.fontString = fontString;
                 // 使用静态显示逻辑：只显示字段标签
                 this.renderStaticDisplay();
                 this.setStatusAsNormal();
@@ -91,19 +79,6 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                 this.initDisplayContainer();
                 // 获取字体设置 - 参考 text-element.ts 的实现方式
                 this.headerFont = ((_f = this.model.generalSetting) === null || _f === void 0 ? void 0 : _f.headerFont) || {};
-                // 构建符合 CSS font 属性规范的字符串
-                // 格式：font-style font-weight font-size/line-height font-family
-                let fontString = '';
-                if (this.headerFont.isItalic) {
-                    fontString += 'italic ';
-                }
-                if (this.headerFont.isBold) {
-                    fontString += 'bold ';
-                }
-                const fontSize = this.headerFont.fontSize || '16px';
-                const lineHeight = parseInt(fontSize, 10) + 5;
-                fontString += `${fontSize}/${lineHeight}px ${this.headerFont.fontFamily || 'Microsoft YaHei'}`;
-                this.fontString = fontString;
                 this.getAlarmData();
             }
         }
@@ -113,7 +88,9 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             // 初始化显示容器以显示空内容
             this.initDisplayContainer();
             if (this.allAlarmsContainer) {
-                this.allAlarmsContainer.innerHTML = '';
+                while (this.allAlarmsContainer.firstChild) {
+                    this.allAlarmsContainer.removeChild(this.allAlarmsContainer.firstChild);
+                }
                 this.totalWidth = 0;
                 this.pageWidths = [];
             }
@@ -191,8 +168,8 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                         const oldPageWidth = this.pageWidths.pop() || 0;
                         this.totalWidth -= oldPageWidth;
                         const elementsToRemove = Array.from(this.allAlarmsContainer.children).slice(startIndex, startIndex + itemsPerPage);
-                        elementsToRemove.forEach(element => {
-                            this.allAlarmsContainer.removeChild(element);
+                        elementsToRemove.forEach(el => {
+                            this.allAlarmsContainer.removeChild(el);
                         });
                         // 插入新的当前页数据
                         this.displayedItems.splice(startIndex, 0, ...newPage);
@@ -232,7 +209,9 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                         // 清空显示
                         this.displayedItems = [];
                         if (this.allAlarmsContainer) {
-                            this.allAlarmsContainer.innerHTML = '';
+                            while (this.allAlarmsContainer.firstChild) {
+                                this.allAlarmsContainer.removeChild(this.allAlarmsContainer.firstChild);
+                            }
                             this.totalWidth = 0;
                             this.pageWidths = [];
                         }
@@ -259,121 +238,153 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         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;
-            border-radius: 2px;
-        `;
-        this.element.appendChild(this.container);
-        // 创建一个大容器来包含所有告警项，初始位置在容器右侧（从右边开始滚入）
-        this.allAlarmsContainer = document.createElement('div');
-        this.allAlarmsContainer.style.cssText = `
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            display: flex;
-            align-items: center;
-            gap: 80px;
-        `;
-        this.container.appendChild(this.allAlarmsContainer);
-        // 设置初始位置为容器宽度，让内容从右侧滚入
+        const bgColor = ((_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.headerFillColor) || '#ffffff';
+        const clipId = 'scroll-alarm-clip-' + Math.random().toString(36).slice(2);
+        // 背景矩形
+        this.bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        this.bgRect.setAttribute('x', '0');
+        this.bgRect.setAttribute('y', '0');
+        this.bgRect.setAttribute('width', elementWidth.toString());
+        this.bgRect.setAttribute('height', elementHeight.toString());
+        this.bgRect.setAttribute('fill', bgColor);
+        this.bgRect.setAttribute('stroke', '#8ea0aa');
+        this.bgRect.setAttribute('stroke-width', '1');
+        this.$element[0].appendChild(this.bgRect);
+        // clipPath 限制文字滚动区域
+        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        const clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
+        clipPath.setAttribute('id', clipId);
+        const clipRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        clipRect.setAttribute('x', '2');
+        clipRect.setAttribute('y', '0');
+        clipRect.setAttribute('width', (elementWidth - 4).toString());
+        clipRect.setAttribute('height', elementHeight.toString());
+        clipPath.appendChild(clipRect);
+        defs.appendChild(clipPath);
+        this.$element[0].appendChild(defs);
+        // 滚动内容的 g 容器，套上 clipPath
+        this.scrollGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        this.scrollGroup.setAttribute('clip-path', `url(#${clipId})`);
+        this.$element[0].appendChild(this.scrollGroup);
+        // 内部 g 用于整体平移（滚动动画改这个的 transform）
+        this.allAlarmsContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        this.scrollGroup.appendChild(this.allAlarmsContainer);
+        // 初始位置在右侧屏幕外
         this.currentLeft = elementWidth;
-        this.allAlarmsContainer.style.left = `${elementWidth}px`;
-        // 添加鼠标悬停暂停和恢复滚动功能
-        this.container.addEventListener('mouseenter', () => this.pauseScroll());
-        this.container.addEventListener('mouseleave', () => this.resumeScroll());
+        this.allAlarmsContainer.setAttribute('transform', `translate(${elementWidth}, 0)`);
+    }
+    _buildFontAttrs() {
+        const f = this.headerFont || {};
+        const fontSize = parseInt((f.fontSize || '16px'), 10);
+        return {
+            fontSize,
+            fontFamily: f.fontFamily || 'Microsoft YaHei',
+            color: f.color || '#e33c39',
+            isBold: !!f.isBold,
+            isItalic: !!f.isItalic,
+            isUnderline: !!f.isUnderline
+        };
+    }
+    _createSvgTextNode(textContent) {
+        const elementHeight = this.model.size.height;
+        const fa = this._buildFontAttrs();
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('y', (elementHeight / 2).toString());
+        text.setAttribute('dominant-baseline', 'central');
+        text.setAttribute('fill', fa.color);
+        text.setAttribute('font-size', fa.fontSize.toString());
+        text.setAttribute('font-family', fa.fontFamily);
+        if (fa.isBold) {
+            text.setAttribute('font-weight', 'bold');
+        }
+        if (fa.isItalic) {
+            text.setAttribute('font-style', 'italic');
+        }
+        if (fa.isUnderline) {
+            text.setAttribute('text-decoration', 'underline');
+        }
+        text.textContent = textContent;
+        return text;
     }
     renderNewPage(pageData) {
+        const GAP = 80;
         let pageWidth = 0;
-        // 为每个告警数据创建文本容器
+        // 新页的起始 x = 已有总宽度 + gap（如果已有内容）
+        let xOffset = this.totalWidth > 0 ? this.totalWidth + GAP : 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 || '#e33c39'};
-                white-space: nowrap;
-                overflow: visible;
-            `;
-            // 应用下划线样式（参考 text-element.ts 的实现）
-            if (this.headerFont.isUnderline) {
-                textContainer.style.textDecoration = 'underline';
-            }
-            // 构建告警信息内容，根据配置决定显示哪些字段
             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);
+                contentParts.push(moment(alarm.triggeredTime).format('YYYY/MM/DD HH:mm:ss'));
             }
-            // 获取当前语言环境
             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);
+                contentParts.push(levelMap[alarm.alarmLevel] || (isChinese ? '警告' : 'Warning'));
             }
-            // 显示告警名称
             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);
+                const stateMap = isChinese
+                    ? ['触发/未确认', '触发/已确认', '恢复/未确认', '恢复/已确认']
+                    : ['Triggered/Unconfirmed', 'Triggered/Confirmed', 'Restored/Unconfirmed', 'Restored/Confirmed'];
+                contentParts.push(stateMap[alarm.state] || (isChinese ? '触发/未确认' : 'Triggered/Unconfirmed'));
             }
-            // 将所有显示字段用空格连接，确保一行显示
-            const textContent = contentParts.join(' ');
-            textContainer.textContent = textContent;
-            this.allAlarmsContainer.appendChild(textContainer);
-            // 计算文本宽度
-            const textWidth = textContainer.offsetWidth;
-            pageWidth += textWidth + 80; // 80是gap大小
+            const textNode = this._createSvgTextNode(contentParts.join(' '));
+            textNode.setAttribute('x', xOffset.toString());
+            this.allAlarmsContainer.appendChild(textNode);
+            const textWidth = textNode.getComputedTextLength
+                ? textNode.getComputedTextLength()
+                : (textNode.getBBox ? textNode.getBBox().width : 100);
+            xOffset += textWidth + GAP;
+            pageWidth += (pageWidth > 0 ? GAP : 0) + textWidth;
         });
-        // 移除最后一个gap
-        if (pageWidth > 0) {
-            pageWidth -= 80;
-        }
-        // 保存页宽度
         this.pageWidths.push(pageWidth);
-        this.totalWidth += pageWidth;
+        this.totalWidth += (this.totalWidth > 0 && pageWidth > 0 ? GAP : 0) + pageWidth;
+    }
+    _rebaseTextNodes() {
+        const GAP = 80;
+        let x = 0;
+        Array.from(this.allAlarmsContainer.children).forEach(node => {
+            node.setAttribute('x', x.toString());
+            const w = node.getComputedTextLength
+                ? node.getComputedTextLength()
+                : (node.getBBox ? node.getBBox().width : 100);
+            x += w + GAP;
+        });
+        const newTotal = x > 0 ? x - GAP : 0;
+        this.totalWidth = newTotal;
+        this.pageWidths = [newTotal];
     }
     removeOldestPage() {
         // 移除最旧的一页数据
         this.displayedItems.splice(0, this.maxResultCount);
         const oldPageWidth = this.pageWidths.shift() || 0;
-        // 更新总宽度
-        this.totalWidth -= oldPageWidth;
+        this.totalWidth -= oldPageWidth + (this.pageWidths.length > 0 ? 80 : 0);
         // 从DOM中移除最旧的元素
         const elementsToRemove = Array.from(this.allAlarmsContainer.children).slice(0, this.maxResultCount);
-        elementsToRemove.forEach(element => {
-            this.allAlarmsContainer.removeChild(element);
+        elementsToRemove.forEach(el => {
+            this.allAlarmsContainer.removeChild(el);
+        });
+        // SVG text 的 x 坐标从 0 重排（DOM删除后剩余节点要重新编排 x）
+        const GAP = 80;
+        let x = 0;
+        Array.from(this.allAlarmsContainer.children).forEach(node => {
+            node.setAttribute('x', x.toString());
+            const w = node.getComputedTextLength
+                ? node.getComputedTextLength()
+                : (node.getBBox ? node.getBBox().width : 100);
+            x += w + GAP;
         });
-        // 调整当前left位置（保持视觉位置不变）- 这里需要等DOM更新完成后再调整
+        // currentLeft 补偿被移除页的宽度（含 gap），保持视觉位置不变
         requestAnimationFrame(() => {
-            this.currentLeft += oldPageWidth;
-            this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+            this.currentLeft += oldPageWidth + 80;
+            this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
         });
     }
     scrollContent() {
@@ -396,21 +407,19 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         // 说明所有内容都已经滚出视图（不开启自动循环时多滚动50px确保最后一个字完全滚出）
         if (this.currentLeft + this.totalWidth < -50) {
             if (this.autoCycle) {
-                // 自动循环模式：无缝衔接回到容器右侧
                 if (this.hasMoreData) {
-                    // 有更多数据：继续加载（但实际上已经在上面预加载了）
-                    // 重置到容器宽度，让内容从右侧重新滚入
-                    this.currentLeft = this.container.clientWidth;
+                    // 有更多数据：重置到容器宽度，让内容从右侧重新滚入
+                    this.currentLeft = this.model.size.width;
                 }
                 else {
-                    // 没有更多数据了：重置
                     if (this.currentPage > 2) {
                         // 数据总数超过一页：重置到第一页并重新查询
                         this.resetToFirstPage();
                     }
                     else {
-                        // 数据总数只有一页：直接重置到容器右侧，循环滚动当前数据
-                        this.currentLeft = this.container.clientWidth;
+                        // 单页循环：重排 x 从 0 开始，currentLeft 重置到右侧
+                        this._rebaseTextNodes();
+                        this.currentLeft = this.model.size.width;
                     }
                 }
             }
@@ -422,7 +431,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             }
         }
         // 更新显示位置
-        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+        this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
     }
     initScrolling() {
         clearInterval(this.scrollIntervalId);
@@ -433,8 +442,8 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         // 确保初始位置在容器右侧（从右边滚入）
         if (this.currentPage === 1 && this.displayedItems.length <= this.maxResultCount) {
             // 第一页初始加载时，确保从右侧开始
-            this.currentLeft = this.container.clientWidth;
-            this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+            this.currentLeft = this.model.size.width;
+            this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
         }
         const scrollInterval = 100; // 默认100ms，滚动更流畅
         // 延迟启动滚动确保内容渲染完成
@@ -447,12 +456,6 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             }, scrollInterval);
         }, 500);
     }
-    pauseScroll() {
-        this.isScrolling = false;
-    }
-    resumeScroll() {
-        this.isScrolling = true;
-    }
     resetToFirstPage() {
         // 重置到第一页并重新查询数据
         this.currentPage = 1;
@@ -460,13 +463,15 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.hasTriedFirstPage = false;
         this.displayedItems = [];
         if (this.allAlarmsContainer) {
-            this.allAlarmsContainer.innerHTML = '';
+            while (this.allAlarmsContainer.firstChild) {
+                this.allAlarmsContainer.removeChild(this.allAlarmsContainer.firstChild);
+            }
             this.totalWidth = 0;
             this.pageWidths = [];
         }
         // 重置到容器右侧，让内容从右边滚入
-        this.currentLeft = this.container.clientWidth;
-        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+        this.currentLeft = this.model.size.width;
+        this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
         this.getAlarmData();
     }
     updateQueryTimeRange() {
@@ -510,16 +515,18 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         // 确保宽度和高度为正值，避免 SVG 错误
         const width = Math.max(this.model.size.width || 100, 0);
         const height = Math.max(this.model.size.height || 50, 0);
+        // 先移除旧的 StateFrame，避免重复追加
+        this.$element.find('rect#StateFrame').remove();
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
             .attr('width', width)
             .attr('height', height);
-        const document = this.$element[0].ownerDocument;
+        const doc = 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');
+        const imgObj = doc.createElementNS('http://www.w3.org/2000/svg', 'image');
         if (imgObj) {
             let x = Number(currentRect[0].getAttribute('width')) - 20;
             const currentRectX = currentRect[0].getAttribute('x');
@@ -534,20 +541,13 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             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');
+            const titleElement = doc.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('rect#StateFrame').remove();
         this.$element.find('image#StateImage').remove();
     }
     /**
@@ -586,36 +586,20 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             const isChinese = language === 'zh-Hans' || language === 'zh';
             textParts.push(isChinese ? '触发/未确认' : 'Triggered/Unconfirmed');
         }
-        // 创建文本容器
-        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';
-        }
-        // 设置文本内容
-        textContainer.textContent = textParts.join(' ');
-        // 使用配置的宽度，而不是 clientWidth（因为DOM可能还没渲染完成）
-        const containerWidth = this.model.size.width;
-        // 先设置容器位置到右侧（屏幕外），这样添加元素时不会闪烁
-        this.currentLeft = containerWidth;
-        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
-        // 添加到DOM以便计算宽度
-        this.allAlarmsContainer.appendChild(textContainer);
-        // 使用 setTimeout 确保 DOM 渲染完成后再计算宽度
-        setTimeout(() => {
-            // 计算文本宽度
-            const textWidth = textContainer.offsetWidth;
-            this.totalWidth = textWidth;
-            this.pageWidths.push(textWidth);
-            // 启动滚动（autoCycle 只控制是否循环，不控制是否滚动）
-            this.initStaticScrolling();
-        }, 50);
+        // 创建 SVG text 节点（与真实运行模式一致，不依赖 foreignObject）
+        const textNode = this._createSvgTextNode(textParts.join(' '));
+        textNode.setAttribute('x', '0');
+        this.currentLeft = this.model.size.width;
+        this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
+        this.allAlarmsContainer.appendChild(textNode);
+        // SVG text 宽度可直接通过 getComputedTextLength 同步获取，无需 setTimeout
+        const textWidth = textNode.getComputedTextLength
+            ? textNode.getComputedTextLength()
+            : (textNode.getBBox ? textNode.getBBox().width : 200);
+        this.totalWidth = textWidth;
+        this.pageWidths.push(textWidth);
+        // 启动滚动（autoCycle 只控制是否循环，不控制是否滚动）
+        this.initStaticScrolling();
     }
     /**
      * 模拟运行时的静态滚动逻辑
@@ -642,7 +626,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         // 更新位置 - 从右往左滚动
         this.currentLeft -= scrollStep;
         // 更新显示位置
-        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+        this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
         // 当内容完全滚出容器左侧时（内容右边缘完全移出容器左边缘）
         // currentLeft + totalWidth 表示内容右边缘的位置
         // 当这个值 <= -50 时，表示内容完全不可见（不开启自动循环时多滚动50px确保最后一个字完全滚出）
@@ -651,7 +635,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             if (this.autoCycle) {
                 // 自动循环模式：重置到容器右侧（使用配置宽度）
                 this.currentLeft = this.model.size.width;
-                this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+                this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
             }
             else {
                 // 非循环模式：停止滚动
@@ -688,7 +672,6 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         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;
                 // 如果没有数据，清空显示
@@ -701,24 +684,27 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                     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`;
+                        while (this.allAlarmsContainer.firstChild) {
+                            this.allAlarmsContainer.removeChild(this.allAlarmsContainer.firstChild);
+                        }
+                        this.currentLeft = this.model.size.width;
+                        this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
                     }
                     return;
                 }
                 // 如果是首次加载或当前没有数据，直接渲染并启动滚动
                 if (this.displayedItems.length === 0) {
                     this.displayedItems = newItems;
-                    this.allAlarmsContainer.innerHTML = '';
+                    while (this.allAlarmsContainer.firstChild) {
+                        this.allAlarmsContainer.removeChild(this.allAlarmsContainer.firstChild);
+                    }
                     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.currentLeft = this.model.size.width;
+                    this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
                     this.renderNewPage(newItems);
                     // 启动滚动
                     if (!this.isScrolling) {
@@ -728,71 +714,19 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                 }
                 // 保存当前的滚动位置
                 const currentScrollPosition = this.currentLeft;
-                // 清空所有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
+                // 清空所有SVG text节点，重新用 renderNewPage 渲染
+                while (this.allAlarmsContainer.firstChild) {
+                    this.allAlarmsContainer.removeChild(this.allAlarmsContainer.firstChild);
                 }
+                this.totalWidth = 0;
+                this.pageWidths = [];
+                this.renderNewPage(newItems);
                 // 更新状态
                 this.displayedItems = newItems;
-                this.totalWidth = newTotalWidth;
-                this.pageWidths = [newTotalWidth]; // 重置为单页
                 this.hasMoreData = result.totalCount > newItems.length;
                 // 保持滚动位置不变，继续滚动
                 this.currentLeft = currentScrollPosition;
-                this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+                this.allAlarmsContainer.setAttribute('transform', `translate(${this.currentLeft}, 0)`);
             }
         });
     }

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"}],"replaceCurrentScrollingContent":[{"__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"}],"_buildFontAttrs":[{"__symbolic":"method"}],"_createSvgTextNode":[{"__symbolic":"method"}],"renderNewPage":[{"__symbolic":"method"}],"_rebaseTextNodes":[{"__symbolic":"method"}],"removeOldestPage":[{"__symbolic":"method"}],"scrollContent":[{"__symbolic":"method"}],"initScrolling":[{"__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"}]}}}}]