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

package/elements/historical-curve/historical-curve.element.js

@@ -197,8 +197,18 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }
     }
     reRenderElement(startTime, endTime, limit, rangeType) {
+        // 清理图表实例
+        if (this.chartElement) {
+            // 隐藏 tooltip
+            if (this.chartElement.tooltip) {
+                this.chartElement.tooltip.hidden(true);
+            }
+            // 清理图表引用
+            this.chartElement = null;
+        }
+        // 清除 DOM 元素
         this.rootElement.selectAll('*').remove();
-        this.chartElement = null;
+        // 重新渲染
         this.renderElement(startTime, endTime, limit, rangeType);
     }
     renderElement(startTime, endTime, limit, rangeType) {
@@ -329,18 +339,16 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             data.push({ key: displayName, area: channel.projectEnabled, values: values });
         });
         this.data = data;
-        nv.addGraph(() => {
-            let chart;
-            if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
-                chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
-            }
-            else {
-                chart = this.getLineChart(chartWidth, chartHeight, data);
-            }
-            // 设置 tooltip 自动隐藏逻辑
-            this.setupTooltipAutoHide(chart);
-            return chart;
-        });
+        let chart;
+        if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
+            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
+        }
+        else {
+            chart = this.getLineChart(chartWidth, chartHeight, data);
+        }
+        // 设置 tooltip 自动隐藏逻辑
+        this.setupTooltipAutoHide(chart);
+        return chart;
     }
     /**
      * 【新格式】多条目独立数据的曲线渲染
@@ -377,18 +385,16 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             });
         });
         this.data = data;
-        nv.addGraph(() => {
-            let chart;
-            if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
-                chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
-            }
-            else {
-                chart = this.getLineChart(chartWidth, chartHeight, data);
-            }
-            // 设置 tooltip 自动隐藏逻辑
-            this.setupTooltipAutoHide(chart);
-            return chart;
-        });
+        let chart;
+        if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
+            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
+        }
+        else {
+            chart = this.getLineChart(chartWidth, chartHeight, data);
+        }
+        // 设置 tooltip 自动隐藏逻辑
+        this.setupTooltipAutoHide(chart);
+        return chart;
     }
     initPoint() {
         try {

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

@@ -35,6 +35,7 @@ export declare class ScrollAlarmElement extends ConditionalDynamicDisplayElement
     private headerFont;
     private fontString;
     private hasTriedFirstPage;
+    private isSimulateMode;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string);
     dispose(): void;
     private getAlarmData;
@@ -51,4 +52,16 @@ export declare class ScrollAlarmElement extends ConditionalDynamicDisplayElement
     private setStatusAsLoading;
     private renderStatus;
     private clearStatus;
+    /**
+     * 模拟运行时的静态显示逻辑：只显示字段标签，不查询数据
+     */
+    private renderStaticDisplay;
+    /**
+     * 模拟运行时的静态滚动逻辑
+     */
+    private initStaticScrolling;
+    /**
+     * 模拟运行时的静态内容滚动
+     */
+    private scrollStaticContent;
 }

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

@@ -10,7 +10,7 @@ var ScrollAlarmElementStatus;
 })(ScrollAlarmElementStatus || (ScrollAlarmElementStatus = {}));
 export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
     constructor(element, injector, permissionChecker, variableCommunicator, variableStore, alarmsStore, signalRAppId) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.alarmsStore = alarmsStore;
         this.elementStatus = ScrollAlarmElementStatus.Loading;
@@ -30,63 +30,98 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.hasMoreData = true;
         this.isLoadingNextPage = false;
         this.hasTriedFirstPage = false; // 是否已经尝试加载过第一页
+        this.isSimulateMode = 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 : 500;
-        if (this.model.filterSetting) {
+        // 检测是否是模拟运行模式（通过检查 alarmsStore 的类型）
+        this.isSimulateMode = alarmsStore && alarmsStore.constructor.name === 'SimulateAlarmDataStore';
+        if (this.model.filterSetting && this.model.filterSetting.detailsData && this.model.filterSetting.detailsData.length > 0) {
             this.alarmNames = this.model.filterSetting.detailsData.map(item => item.name);
-            this.updateQueryTimeRange();
-            // 监听告警更新 (带节流,1秒内只执行一次)
-            variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
-                alarms.forEach(alarm => {
-                    if (this.alarmNames.indexOf(alarm.name) !== -1) {
-                        // 如果已经在等待刷新,直接返回,避免重复清理和创建定时器
-                        if (this.isWaitingForAlarmRefresh) {
+            // 如果是模拟运行模式，使用静态显示逻辑（类似设计态）
+            if (this.isSimulateMode) {
+                // 初始化显示容器
+                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();
+            }
+            else {
+                // 真实运行模式：使用原有的数据查询逻辑
+                this.updateQueryTimeRange();
+                // 监听告警更新 (带节流,1秒内只执行一次)
+                variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
+                    alarms.forEach(alarm => {
+                        if (this.alarmNames.indexOf(alarm.name) !== -1) {
+                            // 如果已经在等待刷新,直接返回,避免重复清理和创建定时器
+                            if (this.isWaitingForAlarmRefresh) {
+                                return;
+                            }
+                            // 标记为等待刷新状态
+                            this.isWaitingForAlarmRefresh = true;
+                            // 设置节流定时器,1秒后执行
+                            this.alarmRefreshThrottleId = setTimeout(() => {
+                                // 收到新告警消息，重置到第一页并重新开始滚动
+                                this.resetToFirstPage();
+                                // 如果非自动循环模式，需要重新启动滚动
+                                if (!this.autoCycle && !this.isScrolling) {
+                                    this.initScrolling();
+                                }
+                                // 重置等待刷新标志
+                                this.isWaitingForAlarmRefresh = false;
+                            }, 1000);
                             return;
                         }
-                        // 标记为等待刷新状态
-                        this.isWaitingForAlarmRefresh = true;
-                        // 设置节流定时器,1秒后执行
-                        this.alarmRefreshThrottleId = setTimeout(() => {
-                            // 收到新告警消息，重置到第一页并重新开始滚动
-                            this.resetToFirstPage();
-                            // 如果非自动循环模式，需要重新启动滚动
-                            if (!this.autoCycle && !this.isScrolling) {
-                                this.initScrolling();
-                            }
-                            // 重置等待刷新标志
-                            this.isWaitingForAlarmRefresh = false;
-                        }, 1000);
-                        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();
+                // 初始化显示容器
+                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();
+            }
         }
         else {
+            // 未配置告警（没有勾选过告警），不执行，直接展示空
             this.displayedItems = [];
+            // 初始化显示容器以显示空内容
+            this.initDisplayContainer();
             if (this.allAlarmsContainer) {
                 this.allAlarmsContainer.innerHTML = '';
                 this.totalWidth = 0;
                 this.pageWidths = [];
             }
+            this.setStatusAsNormal();
         }
     }
     dispose() {
@@ -244,6 +279,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             overflow: hidden;
             position: relative;
             border: 1px solid #8ea0aa;
+            border-radius: 2px;
         `;
         this.element.appendChild(this.container);
         // 创建一个大容器来包含所有告警项，初始位置在容器右侧（从右边开始滚入）
@@ -277,6 +313,10 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                 white-space: nowrap;
                 overflow: visible;
             `;
+            // 应用下划线样式（参考 text-element.ts 的实现）
+            if (this.headerFont.isUnderline) {
+                textContainer.style.textDecoration = 'underline';
+            }
             // 构建告警信息内容，根据配置决定显示哪些字段
             const contentParts = [];
             // 显示触发时间
@@ -297,16 +337,16 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
             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 (((_g = this.model.generalSetting) === null || _g === void 0 ? void 0 : _g.showAlarmState) && alarm.state !== undefined) {
+            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);
             }
-            // 显示告警内容
-            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;
@@ -514,4 +554,110 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         }
         this.$element.find('image#StateImage').remove();
     }
+    /**
+     * 模拟运行时的静态显示逻辑：只显示字段标签，不查询数据
+     */
+    renderStaticDisplay() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        // 根据配置构建显示的字段标签
+        const textParts = [];
+        if (((_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.showTriggerTime) !== false) {
+            // 使用moment.format方法格式化日期时间
+            const timeStr = moment().format('YYYY/MM/DD HH:mm:ss');
+            textParts.push(timeStr);
+        }
+        if (((_b = this.model.generalSetting) === null || _b === void 0 ? void 0 : _b.showAlarmLevel) !== false) {
+            // 获取当前语言环境
+            const language = ((_e = (_d = (_c = window.abp) === null || _c === void 0 ? void 0 : _c.localization) === null || _d === void 0 ? void 0 : _d.currentLanguage) === null || _e === void 0 ? void 0 : _e.name) || 'zh-Hans';
+            const isChinese = language === 'zh-Hans' || language === 'zh';
+            textParts.push(isChinese ? '严重' : 'Critical');
+        }
+        if (((_f = this.model.generalSetting) === null || _f === void 0 ? void 0 : _f.showAlarmName) === true) {
+            // 获取当前语言环境
+            const language = ((_j = (_h = (_g = window.abp) === null || _g === void 0 ? void 0 : _g.localization) === null || _h === void 0 ? void 0 : _h.currentLanguage) === null || _j === void 0 ? void 0 : _j.name) || 'zh-Hans';
+            const isChinese = language === 'zh-Hans' || language === 'zh';
+            textParts.push(isChinese ? '室内温度' : 'Indoor Temperature');
+        }
+        if (((_k = this.model.generalSetting) === null || _k === void 0 ? void 0 : _k.showAlarmContent) !== false) {
+            // 获取当前语言环境
+            const language = ((_o = (_m = (_l = window.abp) === null || _l === void 0 ? void 0 : _l.localization) === null || _m === void 0 ? void 0 : _m.currentLanguage) === null || _o === void 0 ? void 0 : _o.name) || 'zh-Hans';
+            const isChinese = language === 'zh-Hans' || language === 'zh';
+            textParts.push(isChinese ? '室内温度高于30°C或小于10°C' : 'Indoor temperature is higher than 30℃ or lower than 10℃');
+        }
+        if (((_p = this.model.generalSetting) === null || _p === void 0 ? void 0 : _p.showAlarmState) === true) {
+            // 获取当前语言环境
+            const language = ((_s = (_r = (_q = window.abp) === null || _q === void 0 ? void 0 : _q.localization) === null || _r === void 0 ? void 0 : _r.currentLanguage) === null || _s === void 0 ? void 0 : _s.name) || 'zh-Hans';
+            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 || '#E95F5F'};
+            white-space: nowrap;
+            overflow: visible;
+        `;
+        // 应用下划线样式
+        if (this.headerFont.isUnderline) {
+            textContainer.style.textDecoration = 'underline';
+        }
+        // 设置文本内容
+        textContainer.textContent = textParts.join(' ');
+        this.allAlarmsContainer.appendChild(textContainer);
+        // 计算文本宽度
+        const textWidth = textContainer.offsetWidth;
+        this.totalWidth = textWidth;
+        this.pageWidths.push(textWidth);
+        // 设置初始位置为容器宽度（从右侧滚入）
+        this.currentLeft = this.container.clientWidth;
+        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+        // 根据 autoCycle 配置决定是否启动滚动
+        if (this.autoCycle) {
+            this.initStaticScrolling();
+        }
+    }
+    /**
+     * 模拟运行时的静态滚动逻辑
+     */
+    initStaticScrolling() {
+        clearInterval(this.scrollIntervalId);
+        // 确保初始位置在容器右侧
+        this.currentLeft = this.container.clientWidth;
+        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+        const scrollInterval = 100;
+        // 延迟启动滚动确保内容渲染完成
+        setTimeout(() => {
+            this.isScrolling = true;
+            this.scrollIntervalId = setInterval(() => {
+                if (this.isScrolling) {
+                    this.scrollStaticContent();
+                }
+            }, scrollInterval);
+        }, 500);
+    }
+    /**
+     * 模拟运行时的静态内容滚动
+     */
+    scrollStaticContent() {
+        // 每次滚动的距离
+        const scrollStep = 2;
+        // 更新位置 - 从右往左滚动
+        this.currentLeft -= scrollStep;
+        // 当内容完全滚出容器左侧时
+        if (this.currentLeft + this.totalWidth < 0) {
+            if (this.autoCycle) {
+                // 自动循环模式：重置到容器右侧
+                this.currentLeft = this.container.clientWidth;
+            }
+            else {
+                // 非循环模式：停止滚动
+                clearInterval(this.scrollIntervalId);
+                this.isScrolling = false;
+                return;
+            }
+        }
+        // 更新显示位置
+        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":51,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":52,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":53,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":54,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":55,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":56,"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"}]}}}}]
+[{"__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"}]}}}}]

package/package.json

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