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

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

@@ -0,0 +1,421 @@
+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();
+    }
+}

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

@@ -0,0 +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":47,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":48,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":49,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":50,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":51,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":52,"character":38},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"initDisplayContainer":[{"__symbolic":"method"}],"renderNewPage":[{"__symbolic":"method"}],"removeOldestPage":[{"__symbolic":"method"}],"resetToFirstPage":[{"__symbolic":"method"}],"scrollContent":[{"__symbolic":"method"}],"initScrolling":[{"__symbolic":"method"}],"pauseScroll":[{"__symbolic":"method"}],"resumeScroll":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

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

@@ -62,9 +62,6 @@ export class GraphStateElement {
         }
     }
     getImageElement() {
-        if (this.imageElement && /iPhone|iPod/i.test(navigator.userAgent)) {
-            this.removeImageElement();
-        }
         if (!this.imageElement) {
             this.imageElement = document.createElementNS('http://www.w3.org/2000/svg', 'image');
             this.imageElement.setAttribute('width', this.width + '');

package/elements/shared/text/text-element.js

@@ -19,7 +19,7 @@ export class TextElementModal {
         return textElement;
     }
     createNewForeignObjectText(content, font, width, height, isVariableText) {
-        if (font) {
+        if (font && !font.fontFamily.includes(',msyh')) {
             font.fontFamily += ',msyh';
         }
         const bodyDiv = document.createElement('div');
@@ -36,7 +36,7 @@ export class TextElementModal {
         for (let index = 0; index < textArray.length; index++) {
             const textDiv = document.createElement('div');
             textDiv.className = 'text-list';
-            textDiv.innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
+            const innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
             let fontString = '';
             if (font.isItalic) {
                 fontString += 'italic ';
@@ -45,12 +45,23 @@ export class TextElementModal {
                 fontString += 'bold ';
             }
             let lineHeight = 0;
+            // chrome支持可显示最小字体大小为12px, 更小字体通过缩放实现
+            const minFontSize = 12;
             lineHeight = parseInt(font.fontSize, 10) + 5;
             fontString += font.fontSize + '/' + lineHeight.toString() + 'px ' + font.fontFamily;
             textDiv.style.cssText = `color: ${font.color};word-break: break-all;font: ${fontString};`;
             if (font.isUnderline) {
                 textDiv.style.textDecoration = 'underline';
             }
+            const spanText = document.createElement('span');
+            spanText.style.cssText = `
+                display: contents;
+                transform: scale(${parseInt(font.fontSize, 10) > minFontSize ? 1 : parseInt(font.fontSize, 10) / minFontSize});
+                width: 100%;
+                height: 100%;
+            `;
+            spanText.innerHTML = innerHTML;
+            textDiv.appendChild(spanText);
             fragment.appendChild(textDiv);
         }
         bodyDiv.appendChild(fragment);

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

@@ -16,7 +16,6 @@ export declare class TextStateElement {
     constructor(textStates: TextState[], width: number, height: number, logger: LoggerService, version?: number, faultFlickers?: IndicatorLightFaultFlicker[]);
     switchToState(stateId: number): void;
     private getforeignObjectElement;
-    private createNewForeignObjectText;
     private removeForeignObjectlement;
     private doFaultFlicker;
     private clearFlickerInterval;

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

@@ -1,5 +1,4 @@
 import { Flicker } from '../../../model';
-import { isNil } from 'lodash';
 export class TextStateElement {
     constructor(textStates, width, height, logger, version, faultFlickers) {
         this.textStates = textStates;
@@ -23,7 +22,7 @@ export class TextStateElement {
             return;
         }
         const content = textState.text.content;
-        if (content === '') {
+        if (content === '' || content == null) {
             this.removeForeignObjectlement();
             return;
         }
@@ -33,72 +32,51 @@ export class TextStateElement {
             this.logger.debug('The font is undefined.');
             return;
         }
-        const foreignObjectElement = this.getforeignObjectElement();
-        foreignObjectElement.innerHTML = '';
-        const text = this.createNewForeignObjectText(content, font);
-        foreignObjectElement.appendChild(text);
-        this.doFaultFlicker(foreignObjectElement, stateId);
+        const textElement = this.getforeignObjectElement();
+        // 清空旧内容
+        textElement.textContent = '';
+        // 设置 text-anchor 和 dominant-baseline
+        textElement.setAttribute('text-anchor', 'middle');
+        textElement.setAttribute('dominant-baseline', 'middle');
+        textElement.setAttribute('pointer-events', 'auto');
+        // 拆分换行
+        const lines = content.split('\n');
+        const fontSize = parseInt(font.fontSize, 10);
+        const lineHeight = fontSize + 4;
+        // 总高度 = 行数 * 行高
+        const totalHeight = lines.length * lineHeight;
+        // 调整文本整体垂直居中（通过 dy）
+        const startY = (this.height / 2) - (totalHeight / 2) + (lineHeight / 2);
+        // 添加每行文本
+        for (let i = 0; i < lines.length; i++) {
+            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            tspan.setAttribute('x', (this.width / 2).toString());
+            tspan.setAttribute('y', startY + i * lineHeight + 'px');
+            tspan.textContent = lines[i].replace(/ /g, '\u00A0');
+            tspan.setAttribute('font-size', font.fontSize);
+            tspan.setAttribute('fill', font.color);
+            tspan.setAttribute('font-family', font.fontFamily);
+            tspan.setAttribute('font-weight', font.isBold ? 'bold' : 'normal');
+            tspan.setAttribute('font-style', font.isItalic ? 'italic' : 'normal');
+            tspan.setAttribute('text-decoration', font.isUnderline ? 'underline' : 'none');
+            tspan.setAttribute('text-anchor', 'middle');
+            tspan.setAttribute('dominant-baseline', 'middle');
+            textElement.appendChild(tspan);
+        }
+        this.doFaultFlicker(textElement, stateId);
     }
     getforeignObjectElement() {
         if (!this.textElement) {
-            this.textElement = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-            this.textElement.setAttribute('width', this.width.toString());
-            this.textElement.setAttribute('height', this.height.toString());
+            this.textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            this.textElement.setAttribute('x', (this.width / 2).toString());
+            this.textElement.setAttribute('y', (this.height / 2).toString());
+            this.textElement.setAttribute('text-anchor', 'middle');
+            this.textElement.setAttribute('dominant-baseline', 'middle');
+            this.textElement.setAttribute('pointer-events', 'auto'); // 确保能接收事件
             this._element.appendChild(this.textElement);
         }
         return this.textElement;
     }
-    createNewForeignObjectText(content, font) {
-        if (font) {
-            font.fontFamily += ',msyh';
-        }
-        const bodyDiv = document.createElement('div');
-        bodyDiv.style.textAlign = font.textAlign ? font.textAlign : 'center';
-        bodyDiv.style.userSelect = 'none';
-        bodyDiv.style.display = 'table-cell';
-        bodyDiv.style.verticalAlign = 'middle';
-        if (isNil(content)) {
-            content = '';
-        }
-        let textArray = content.toString().split('\n');
-        textArray = textArray.map(item => {
-            return item.toString().replace(/\s/g, '&nbsp;');
-        });
-        const fragment = document.createDocumentFragment();
-        for (let index = 0; index < textArray.length; index++) {
-            const textDiv = document.createElement('div');
-            textDiv.innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
-            let fontString = '';
-            if (font.isItalic) {
-                fontString += 'italic ';
-            }
-            if (font.isBold) {
-                fontString += 'bold ';
-            }
-            textDiv.style.wordBreak = 'break-word';
-            textDiv.style.color = font.color;
-            let lineHeight = 0;
-            lineHeight = parseInt(font.fontSize, 10) + 5;
-            fontString += font.fontSize + 'px/' + lineHeight + 'px ' + font.fontFamily;
-            textDiv.style.font = fontString;
-            if (font.isUnderline) {
-                textDiv.style.textDecoration = 'underline';
-            }
-            fragment.appendChild(textDiv);
-        }
-        bodyDiv.appendChild(fragment);
-        const contentDiv = document.createElement('div');
-        contentDiv.style.display = 'table';
-        contentDiv.style.width = '100%';
-        contentDiv.style.height = '100%';
-        contentDiv.appendChild(bodyDiv);
-        const containerDiv = document.createElement('div');
-        containerDiv.style.overflow = 'hidden';
-        containerDiv.style.width = this.width.toString() + 'px';
-        containerDiv.style.height = this.height.toString() + 'px';
-        containerDiv.appendChild(contentDiv);
-        return containerDiv;
-    }
     removeForeignObjectlement() {
         if (this.textElement) {
             this._element.removeChild(this.textElement);

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TextStateElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./text-state.model","name":"TextState","line":18,"character":45}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"../../../logger","name":"LoggerService","line":21,"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":23,"character":41}]}]}],"switchToState":[{"__symbolic":"method"}],"getforeignObjectElement":[{"__symbolic":"method"}],"createNewForeignObjectText":[{"__symbolic":"method"}],"removeForeignObjectlement":[{"__symbolic":"method"}],"doFaultFlicker":[{"__symbolic":"method"}],"clearFlickerInterval":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TextStateElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./text-state.model","name":"TextState","line":17,"character":45}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"../../../logger","name":"LoggerService","line":20,"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":22,"character":41}]}]}],"switchToState":[{"__symbolic":"method"}],"getforeignObjectElement":[{"__symbolic":"method"}],"removeForeignObjectlement":[{"__symbolic":"method"}],"doFaultFlicker":[{"__symbolic":"method"}],"clearFlickerInterval":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/bit-switch-operator.d.ts

@@ -15,4 +15,5 @@ export declare class BitSwitchOperator implements SwitchOperator {
     constructor(settings: BitSwitchSettings, variableCommunicator: VariableCommunicator, variableStore: VariableStore, signalRAppId: string);
     canExecute(): boolean;
     execute(): Promise<VariableOptionModel>;
+    writeValue(value: any): Promise<VariableOptionModel>;
 }

package/elements/switch-indicator-light/bit-switch-operator.js

@@ -72,6 +72,8 @@ export class BitSwitchOperator {
                     }
                 }
                 break;
+            case BitSwitchOperation.Restoration:
+                break;
             default:
                 throw new Error(`Unknown BitSwitchOperation:${settings.operation}`);
         }
@@ -85,4 +87,21 @@ export class BitSwitchOperator {
             newValue: newValue
         });
     }
+    writeValue(value) {
+        if (this.settings.isBitwiseIndex) {
+            this.variableCommunicator.writeWordByBit(this.variableName, this.settings.bitIndex, value).subscribe();
+        }
+        else {
+            this.variableCommunicator.write(this.variableName, value).subscribe();
+        }
+        let originValue;
+        if (this.currentValue && this.currentValue.value !== undefined) {
+            originValue = this.currentValue.value;
+        }
+        return Promise.resolve({
+            variableName: this.variableName,
+            originValue: originValue,
+            newValue: value
+        });
+    }
 }