@flexem/fc-gui 3.0.0-alpha.18 → 3.0.0-alpha.181

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

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":61,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":62,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":63,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":64,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":65,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":66,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":68,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":69,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":70,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getHeaderTextByColumn":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"refreshCurrentPageData":[{"__symbolic":"method"}],"updateTableContent":[{"__symbolic":"method"}],"getIconScale":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"buildHeaderRow":[{"__symbolic":"method"}],"buildDataRow":[{"__symbolic":"method"}],"renderPlainTable":[{"__symbolic":"method"}],"renderScrollableTable":[{"__symbolic":"method"}],"bindScrollHoverEvents":[{"__symbolic":"method"}],"unbindScrollHoverEvents":[{"__symbolic":"method"}],"startAutoScroll":[{"__symbolic":"method"}],"scrollOneRow":[{"__symbolic":"method"}],"autoNextPage":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

package/elements/bar-graph-element.d.ts

@@ -5,17 +5,25 @@ import { ReadableElement } from './base/readable-element';
 import { VariableStore } from '../config';
 import { PermissionChecker } from '../service';
 export declare class BarGraphElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
     readonly model: BarGraph;
     private readonly $barRect;
     private readonly barElement;
     private readonly $barText;
-    private readonly defaultTransform;
+    private defaultTransform;
     private defaultBarColor;
     private defaultUpperLimitColor;
     private defaultLowerLimitColor;
     private barText;
+    private valueObj;
+    private isNeedUpdateScale;
+    private needAddNumber;
     get readVariableName(): string;
     constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private initTransform;
     private initFrameNode;
-    updateVariableValue(value: number): void;
+    private updateValueObj;
+    private updateScale;
+    updateVariableValue(value: number, variableName: any): void;
 }

package/elements/bar-graph-element.js

@@ -2,6 +2,7 @@ import { BarGraphDirection } from '../model';
 import { ReadableElement } from './base/readable-element';
 import { calculatePercent } from './shared/math-utils';
 import { VariableUtil } from '../utils/variable-util';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
 export class BarGraphElement extends ReadableElement {
     constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
@@ -9,6 +10,15 @@ export class BarGraphElement extends ReadableElement {
         this.defaultUpperLimitColor = '#ff4448';
         this.defaultLowerLimitColor = '#0f60e8';
         this.barText = '';
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        this.needAddNumber = 0;
+        if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
+            || this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
+            this.isNeedUpdateScale = true;
+            this.updateScale();
+            this.isNeedUpdateScale = false;
+        }
         this.$barRect = this.$element.find('rect');
         this.$barText = this.$element.find('text[id="text"]').last();
         if (this.model.version && this.model.version >= 1) {
@@ -19,7 +29,7 @@ export class BarGraphElement extends ReadableElement {
         }
         setTimeout(() => {
             this.initFrameNode();
-        }, 0);
+        });
     }
     get readVariableName() {
         if (!this.model) {
@@ -36,15 +46,133 @@ export class BarGraphElement extends ReadableElement {
             return VariableUtil.getConvertedVariableName(this.variableStore, variable);
         }
     }
+    initTransform() {
+        if (this.needAddNumber <= 3)
+            return;
+        this.$element[0].childNodes.forEach((node, index) => {
+            // const matrixE = node.transform.baseVal[0].matrix.e;
+            // node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
+            if (!node.transform.baseVal[0])
+                return;
+            if (node.nodeName === 'g') {
+                const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
+                const rootNode = node.parentNode.parentNode.parentElement;
+                const clipPath = $(rootNode).find(`clipPath[id="${nodeValue}"]`);
+                const demoPath = clipPath.find('path');
+                const dValues = demoPath.attr('d').split(',');
+                const retValues = [];
+                dValues.forEach((line) => {
+                    const values = [];
+                    line.split(' ').forEach((item) => {
+                        const nItem = Number(item);
+                        if (nItem === -1) {
+                            item = nItem - (this.needAddNumber - 3) * 7;
+                        }
+                        values.push(item);
+                    });
+                    retValues.push(values.join(' '));
+                });
+                demoPath.attr('d', retValues.join(','));
+            }
+            else if (index === this.$element[0].childNodes.length - 1) {
+                this.defaultTransform = node.attributes['transform'].value;
+            }
+        });
+    }
     initFrameNode() {
         const arcPath = Snap(this.$element[0]);
         const b = arcPath.getBBox(true);
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
-    updateVariableValue(value) {
-        const variableValue = Number(value).valueOf();
-        const maxValue = Number(this.model.max).valueOf();
-        const minValue = Number(this.model.min).valueOf();
+    updateValueObj(value, variableName) {
+        var _a, _b, _c;
+        if (((_a = this.model.readVariable) === null || _a === void 0 ? void 0 : _a.name) === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+        if (((_b = this.model.minVariable) === null || _b === void 0 ? void 0 : _b.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+        if (((_c = this.model.maxVariable) === null || _c === void 0 ? void 0 : _c.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+    updateScale() {
+        if (!this.isNeedUpdateScale) {
+            return;
+        }
+        const textElements = this.$element.find('g:first > text');
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        min = Number(min);
+        max = Number(max);
+        if (isNaN(min) || isNaN(max)) {
+            min = BarGraphElement.DEFAULT_MIN_VALUE;
+            max = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+        if (this.model.maxValueType === VariableValueType.Variable || this.model.minValueType === VariableValueType.Variable) {
+            this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
+            this.initTransform();
+        }
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+        for (let i = 0; i < textElements.length; i++) {
+            const text = textElements[i];
+            if (!text.innerHTML) {
+                continue;
+            }
+            let sacleValue = ((Number(avgSacle) * i) + min).toFixed(0);
+            // 整数位和小数位格式化；
+            if (this.model.fractionDigits > 0) {
+                sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
+            }
+            if (!isNaN(sacleValue)) {
+                text.innerHTML = sacleValue;
+                if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
+                    // FLEXCLOUD-2619 刻度未对齐问题
+                    let translateX = 0;
+                    const sacleLen = sacleValue.toString().length;
+                    switch (sacleLen) {
+                        case 1:
+                            translateX = 13;
+                            break;
+                        case 2:
+                            translateX = 7;
+                            break;
+                        case 3:
+                            translateX = this.model.fractionDigits ? 5 : 0;
+                            break;
+                        default:
+                            if (sacleLen > 3 && this.needAddNumber > 3) {
+                                translateX = -(sacleLen - 3) * 7;
+                            }
+                            break;
+                    }
+                    if (this.model.minValueType !== VariableValueType.Constant && this.model.maxValueType === VariableValueType.Constant) {
+                        const maxLen = this.model.max && this.model.max.toString().length;
+                        translateX += maxLen > 2 ? (maxLen - 3) * 7 : 0;
+                    }
+                    text.transform.baseVal[0].matrix.e = translateX;
+                }
+            }
+        }
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const variableValue = Number(this.valueObj.value);
+        let maxValue = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        let minValue = this.model.minValueType ? this.valueObj.min : this.model.min;
+        minValue = Number(minValue);
+        maxValue = Number(maxValue);
+        if (isNaN(minValue) || isNaN(maxValue)) {
+            minValue = BarGraphElement.DEFAULT_MIN_VALUE;
+            maxValue = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+        if (isNaN(variableValue)) {
+            return;
+        }
         const useAlarmLimit = this.model.useAlarmLimit;
         const useAlarmUpperLimit = null != this.model.upperLimit;
         const useAlarmLowerLimit = null != this.model.lowerLimit;
@@ -112,3 +240,5 @@ export class BarGraphElement extends ReadableElement {
         }
     }
 }
+BarGraphElement.DEFAULT_MIN_VALUE = 0;
+BarGraphElement.DEFAULT_MAX_VALUE = 100;

package/elements/bar-graph-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":9,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":33,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":33,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":34,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":36,"character":22},{"__symbolic":"reference","name":"string"}]}],"initFrameNode":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":10,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":39,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":39,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":40,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":41,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":42,"character":22},{"__symbolic":"reference","name":"string"}]}],"initTransform":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]

package/elements/base/readable-element.d.ts

@@ -9,7 +9,12 @@ export declare abstract class ReadableElement extends ConditionalEnableElement {
     constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     init(variableName: string): void;
     get readVariableName(): string;
-    protected abstract updateVariableValue(value: any): void;
+    get minVariableName(): string;
+    get minValueType(): any;
+    get maxVariableName(): string;
+    get maxValueType(): any;
+    private getVariableName;
+    protected abstract updateVariableValue(value: any, variableName: any): void;
     reportStateChanged(variableState: VariableState): void;
     reportValueChanged(value: VariableValue): void;
 }

package/elements/base/readable-element.js

@@ -3,6 +3,7 @@ import { VariableState } from '../../communication';
 import { ConditionalEnableElement } from './conditional-enable-element';
 import { forEach } from 'lodash';
 import { VariableUtil } from '../../utils/variable-util';
+import { GuiFeatureConfig } from '../../config';
 export class ReadableElement extends ConditionalEnableElement {
     constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
@@ -36,6 +37,33 @@ export class ReadableElement extends ConditionalEnableElement {
             return VariableUtil.getConvertedVariableName(this.variableStore, variable);
         }
     }
+    get minVariableName() {
+        if (!this.model.minValueType) {
+            return undefined;
+        }
+        return this.getVariableName(this.model.minVariable);
+    }
+    get minValueType() {
+        return this.model.minValueType;
+    }
+    get maxVariableName() {
+        if (!this.model.maxValueType) {
+            return undefined;
+        }
+        return this.getVariableName(this.model.maxVariable);
+    }
+    get maxValueType() {
+        return this.model.maxValueType;
+    }
+    getVariableName(variable) {
+        if (!this.model) {
+            throw new Error('Model cannot be null');
+        }
+        if (!variable) {
+            return undefined;
+        }
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
     reportStateChanged(variableState) {
         forEach(this.elementStates, elementState => {
             if (elementState.variableName === variableState.variableName) {
@@ -45,14 +73,53 @@ export class ReadableElement extends ConditionalEnableElement {
         });
     }
     reportValueChanged(value) {
+        var _a, _b, _c, _d;
         forEach(this.elementStates, elementState => {
             if (elementState.variableName === value.variableName) {
                 elementState.state = value.state;
                 this.changeStates();
             }
         });
-        if (this.state === State.Normal || this.state === State.Disable) {
-            this.updateVariableValue(value.value);
+        // 处理系统变量"设备状态"
+        if (value.systemName === '设备状态') {
+            let name = value.customStatus;
+            const language = ((_b = (_a = window.abp.localization) === null || _a === void 0 ? void 0 : _a.currentLanguage) === null || _b === void 0 ? void 0 : _b.name) || ((_d = (_c = this.localization.localizationService) === null || _c === void 0 ? void 0 : _c.translate) === null || _d === void 0 ? void 0 : _d.currentLang);
+            const isChinese = language === 'zh-Hans' || language === 'zh';
+            const isTraditionalChinese = language === 'zh-Hant' || language === 'zh-TW' || language === 'zh-tw';
+            if (!name) {
+                switch (value.state) {
+                    case 1:
+                        name = isTraditionalChinese ? '線上' : (isChinese ? '在线' : 'Online');
+                        break;
+                    case 3:
+                        name = isTraditionalChinese ? '離線' : (isChinese ? '离线' : 'Offline');
+                        break;
+                    case 4:
+                        name = isTraditionalChinese ? '告警' : (isChinese ? '告警' : 'Alarm');
+                        break;
+                    case 5:
+                        name = isTraditionalChinese ? '未綁定' : (isChinese ? '未绑定' : 'Unbound');
+                        break;
+                    default:
+                }
+            }
+            if (value.state === 4) {
+                name = isTraditionalChinese ? '告警' : (isChinese ? '告警' : 'Alarm');
+            }
+            this.updateVariableValue(name, '设备状态');
+            return; // 处理完"设备状态"后直接返回
+        }
+        // 处理系统变量"当前语种ID"
+        if (value.variableName === '当前语种ID') {
+            // 直接使用变量值（数字或null）
+            this.updateVariableValue(value.value, value.variableName);
+            return;
+        }
+        // 处理普通变量
+        if (this.state === State.Normal || this.state === State.Disable || (GuiFeatureConfig.isOfflineDisplayEnabled && this.state === State.Offline)
+            || value.variableName === this.minVariableName
+            || value.variableName === this.maxVariableName) {
+            this.updateVariableValue(value.value, value.variableName);
         }
     }
 }

package/elements/base/readable-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ReadableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-enable-element","name":"ConditionalEnableElement","line":9,"character":46},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":13,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":13,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":13,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":14,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":14,"character":52},{"__symbolic":"reference","name":"string"}]}],"init":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"reportStateChanged":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ReadableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-enable-element","name":"ConditionalEnableElement","line":10,"character":46},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":14,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":14,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":14,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":15,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":15,"character":52},{"__symbolic":"reference","name":"string"}]}],"init":[{"__symbolic":"method"}],"getVariableName":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"reportStateChanged":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}]}}}}]

package/elements/base/state-control-element.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
 import { PermissionChecker } from '../../service';
 import { Localization } from '../../localization';
 import { VariableCommunicator, VariableState } from '../../communication';
@@ -9,9 +11,19 @@ export declare abstract class StateControlElement extends ConditionalDynamicDisp
     isEnable: boolean;
     elementStates: VariableState[];
     state: State;
-    private currentRect;
+    currentRect: JQuery;
     preState: State;
     constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    /**
+     * 子类可覆盖此方法提供元件当前大小和初始大小，用于状态图标缩放计算
+     * @returns {{ width: number, height: number, initWidth?: number, initHeight?: number }}
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
     initState(): void;
     updateElementStates(newElementStates: VariableState[]): void;
     addElementState(newElementState: VariableState): void;

package/elements/base/state-control-element.js

@@ -9,6 +9,13 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
         this.isEnable = true;
         this.elementStates = [];
     }
+    /**
+     * 子类可覆盖此方法提供元件当前大小和初始大小，用于状态图标缩放计算
+     * @returns {{ width: number, height: number, initWidth?: number, initHeight?: number }}
+     */
+    getElementSizeForIconScale() {
+        return null;
+    }
     initState() {
         if (!this.elementStates.length) {
             return;
@@ -65,26 +72,34 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
             case VariableStateEnum.Abnormal:
                 currentState = State.Abnormal;
                 break;
+            case VariableStateEnum.InvalidMonitor:
+                currentState = State.InvalidMonitor;
+                break;
         }
         return currentState;
     }
     changeState(state) {
         switch (state) {
+            case State.InvalidMonitor:
+                this.state = State.InvalidMonitor;
+                break;
             case State.Unbind:
-                this.state = State.Unbind;
+                if (this.state !== State.InvalidMonitor) {
+                    this.state = State.Unbind;
+                }
                 break;
             case State.Offline:
-                if (this.state !== State.Unbind) {
+                if (this.state !== State.Unbind && this.state !== State.InvalidMonitor) {
                     this.state = State.Offline;
                 }
                 break;
             case State.Loading:
-                if (this.state !== State.Unbind && this.state !== State.Offline) {
+                if (this.state !== State.Unbind && this.state !== State.Offline && this.state !== State.InvalidMonitor) {
                     this.state = State.Loading;
                 }
                 break;
             case State.Abnormal:
-                if (this.state !== State.Unbind && this.state !== State.Offline && this.state !== State.Loading) {
+                if (this.state !== State.Unbind && this.state !== State.Offline && this.state !== State.Loading && this.state !== State.InvalidMonitor) {
                     this.state = State.Abnormal;
                 }
                 break;
@@ -123,9 +138,14 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
                 title = this.localization.disable;
                 stroke = '#ff4444';
                 break;
+            case State.InvalidMonitor:
+                url = 'assets/img/abnormal.svg';
+                title = this.localization.invalidMonitor;
+                stroke = '#f6a520';
+                break;
             default:
                 url = 'assets/img/loading.svg';
-                title = this.localization.loading;
+                title = this.localization.variableChanged;
                 stroke = '#226abc';
                 break;
         }
@@ -139,11 +159,25 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
         if (!this.currentRect.length) {
             return;
         }
+        // 元件绑定设备状态或当前语种ID时不需要在右上角显示状态
+        if (this.$element[0].dataset.model.includes('设备状态') || this.$element[0].dataset.model.includes('当前语种ID'))
+            return;
         const document = this.$element[0].ownerDocument;
         const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
         if (imgObj) {
             const currentRectElement = this.currentRect[0];
-            let x = Number(currentRectElement.getAttribute('width')) - 20;
+            // 计算图标缩放比例
+            const baseIconSize = 20;
+            let iconSize = baseIconSize;
+            const sizeInfo = this.getElementSizeForIconScale();
+            if (sizeInfo && sizeInfo.initWidth && sizeInfo.initHeight) {
+                const scaleX = sizeInfo.width / sizeInfo.initWidth;
+                const scaleY = sizeInfo.height / sizeInfo.initHeight;
+                // 取较小值，避免图标超出元件边界
+                const scale = Math.min(scaleX, scaleY);
+                iconSize = baseIconSize * scale;
+            }
+            let x = Number(currentRectElement.getAttribute('width')) - iconSize;
             const currentRectX = currentRectElement.getAttribute('x');
             if (currentRectX !== null) {
                 x += Number(currentRectX);
@@ -154,8 +188,8 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
             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');
+            imgObj.setAttributeNS(null, 'height', iconSize + 'px');
+            imgObj.setAttributeNS(null, 'width', iconSize + 'px');
             const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
             const text = document.createTextNode(title);
             titleElement.appendChild(text);

package/elements/base/state-control-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71},{"__symbolic":"reference","name":"string"}]}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71},{"__symbolic":"reference","name":"string"}]}],"getElementSizeForIconScale":[{"__symbolic":"method"}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]

package/elements/character-display/character-display-element.d.ts

@@ -32,4 +32,13 @@ export declare class CharacterDisplayElement extends ReadableElement {
     private doWriteCharacterValue;
     private recordOperation;
     private changeGraph;
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
 }

package/elements/character-display/character-display-element.js

@@ -1,4 +1,5 @@
 import { GraphType } from '../../config';
+import { GuiFeatureConfig } from '../../config';
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import { AlertModalComponent } from '../../modal/alert/alert-modal.component';
 import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/confirm-operation-modal.component';
@@ -67,7 +68,7 @@ export class CharacterDisplayElement extends ReadableElement {
     }
     changeStates() {
         super.changeStates();
-        if (this.state === State.Normal || this.state === State.Disable) {
+        if (this.state === State.Normal || this.state === State.Disable || (GuiFeatureConfig.isOfflineDisplayEnabled && this.state === State.Offline)) {
             this.updateDisplayValue(this.displayValue);
         }
         else {
@@ -265,7 +266,7 @@ export class CharacterDisplayElement extends ReadableElement {
         }
         const args = new WriteCharacterModalArgs(this.writeVariableName, this.model.isPassword, this.model.charCount, this.displayValue);
         const modalRef = this.modalService.show(WriteCharacterModalComponent, {
-            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position gui-modal-write', animated: false
         });
         const onClosedSub = modalRef.content.onClosed.subscribe(result => {
             modalRef.hide();
@@ -308,4 +309,19 @@ export class CharacterDisplayElement extends ReadableElement {
             this.rootElement.select('image').attr('xlink:href', null);
         }
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
 }

package/elements/character-display/character-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":19,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":28,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":29,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":31,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":33,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":34,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":36,"character":22},{"__symbolic":"reference","name":"string"}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":20,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":29,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":30,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":31,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":32,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":33,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":34,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":35,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":36,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":37,"character":22},{"__symbolic":"reference","name":"string"}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}],"getElementSizeForIconScale":[{"__symbolic":"method"}]}}}}]

package/elements/datetime-display/datetime-display-element.d.ts

@@ -13,6 +13,7 @@ export declare class DatetimeDisplayElement extends ConditionalDisplayElement {
     protected readonly model: DatetimeDisplay;
     protected readonly logger: LoggerService;
     private readonly $dateTimeText;
+    private timeZoneMap;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, signalRAppId: string);
     private getAndSetCurrentTime;
     private getDatetimeFormat;

package/elements/datetime-display/datetime-display-element.js

@@ -5,6 +5,7 @@ import { TimeFormatType } from '../../model/datetime-display/time-format-type';
 import { ConditionalDisplayElement } from '../base/conditional-display-element';
 import { GraphStateElement } from '../shared/graph/graph-state-element';
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
+import timeZoneOptions from './time-zone-select-json';
 export class DatetimeDisplayElement extends ConditionalDisplayElement {
     constructor(element, injector, permissionChecker, variableCommunicator, variableStore, graphStore, signalRAppId) {
         super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
@@ -12,7 +13,12 @@ export class DatetimeDisplayElement extends ConditionalDisplayElement {
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
         this.graphStore = graphStore;
+        this.timeZoneMap = new Map();
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        // 初始化时区
+        timeZoneOptions.forEach((item) => {
+            this.timeZoneMap.set(item.key, item.utcoffset);
+        });
         if (this.model.size && this.model.useGraph) {
             this.initGraph(this.model.size.width, this.model.size.height);
         }
@@ -22,11 +28,13 @@ export class DatetimeDisplayElement extends ConditionalDisplayElement {
             this.getAndSetCurrentTime(format);
             setInterval(() => {
                 this.getAndSetCurrentTime(format);
-            }, 1000);
+            }, 100);
         }
     }
     getAndSetCurrentTime(format) {
-        const content = moment().local().format(format);
+        var _a;
+        const currentTimeZone = this.timeZoneMap.get((_a = this.model.timeZone) !== null && _a !== void 0 ? _a : '');
+        const content = moment().utcOffset(currentTimeZone !== null && currentTimeZone !== void 0 ? currentTimeZone : this.timeZoneMap.get('')).format(format);
         this.$dateTimeText.text(content);
         let fontF = this.$dateTimeText.css('font-family');
         if (fontF && fontF.lastIndexOf('msyh') === -1) {

package/elements/datetime-display/datetime-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DatetimeDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":14,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":21,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":21,"character":48},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":22,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":23,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":24,"character":42},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":25,"character":37},{"__symbolic":"reference","name":"string"}]}],"getAndSetCurrentTime":[{"__symbolic":"method"}],"getDatetimeFormat":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"getFormat":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DatetimeDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":24,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":24,"character":48},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":25,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":26,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":27,"character":42},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":28,"character":37},{"__symbolic":"reference","name":"string"}]}],"getAndSetCurrentTime":[{"__symbolic":"method"}],"getDatetimeFormat":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"getFormat":[{"__symbolic":"method"}]}}}}]

package/elements/datetime-display/time-zone-select-json.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 导出时区json
+ */
+declare const timeZoneOptions: {
+    key: string;
+    utcoffset: string;
+}[];
+export default timeZoneOptions;