@flexem/fc-gui 3.0.0-alpha.19 → 3.0.0-alpha.190

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

@@ -11,15 +11,26 @@ import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/co
 import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
 import { isNil } from 'lodash';
 import { FCloudDataType } from '../../model/shared/data-type/fcloud-data-Type';
+var variableRwTypeEnum;
+(function (variableRwTypeEnum) {
+    variableRwTypeEnum[variableRwTypeEnum["read"] = 4] = "read";
+    variableRwTypeEnum[variableRwTypeEnum["witer"] = 2] = "witer";
+    variableRwTypeEnum[variableRwTypeEnum["readWiter"] = 6] = "readWiter";
+})(variableRwTypeEnum || (variableRwTypeEnum = {}));
 export class NumericalDisplayElement extends ReadableElement {
-    constructor(element, injector, modalService, permissionChecker, variableCommunicator, graphStore, operationRecordService, securityChecker, variableStore, localization, signalRAppId) {
+    constructor(element, injector, modalService, permissionChecker, variableCommunicator, graphStore, operationRecordService, releasedVariableService, securityChecker, variableStore, localization, signalRAppId, guiContext) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;
+        this.releasedVariableService = releasedVariableService;
         this.securityChecker = securityChecker;
+        this.guiContext = guiContext;
         this.displayText = '';
         this.enableDataParsed = false;
+        // 上下限变量的实时缓存值（仅当上下限配置为变量类型时使用）
+        this._resolvedUpperLimitValue = undefined;
+        this._resolvedLowerLimitValue = undefined;
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.dataTypeService = injector.get(DataTypeService);
         this.fractionDigitService = injector.get(FractionDigitService);
@@ -39,6 +50,22 @@ export class NumericalDisplayElement extends ReadableElement {
         }
         this.initElement();
     }
+    /** 当数值上限配置为变量类型时，返回变量名；否则返回 undefined */
+    get upperLimitVariableName() {
+        const upper = this.model.numericalUpperLimit;
+        if (upper && typeof upper === 'object' && upper.type === 1 && upper.variableName) {
+            return upper.variableName;
+        }
+        return undefined;
+    }
+    /** 当数值下限配置为变量类型时，返回变量名；否则返回 undefined */
+    get lowerLimitVariableName() {
+        const lower = this.model.numericalLowerLimit;
+        if (lower && typeof lower === 'object' && lower.type === 1 && lower.variableName) {
+            return lower.variableName;
+        }
+        return undefined;
+    }
     get writeVariableName() {
         return this.readVariableName;
     }
@@ -50,6 +77,42 @@ export class NumericalDisplayElement extends ReadableElement {
             this.$element.remove();
         }
     }
+    /**
+     * 重写父类方法，处理"当前语种ID"系统变量
+     * 当值为null时，显示默认语种ID
+     */
+    reportValueChanged(value) {
+        var _a, _b, _c;
+        // 更新上下限变量缓存(不阻断后续处理)
+        if (this.upperLimitVariableName && value.variableName === this.upperLimitVariableName) {
+            const num = Number(value.value);
+            this._resolvedUpperLimitValue = (value.value != null && !isNaN(num)) ? num : undefined;
+            // 如果上限变量不是主显示变量，直接返回
+            if (value.variableName !== this.readVariableName) {
+                return;
+            }
+        }
+        if (this.lowerLimitVariableName && value.variableName === this.lowerLimitVariableName) {
+            const num = Number(value.value);
+            this._resolvedLowerLimitValue = (value.value != null && !isNaN(num)) ? num : undefined;
+            // 如果下限变量不是主显示变量，直接返回
+            if (value.variableName !== this.readVariableName) {
+                return;
+            }
+        }
+        // 处理系统变量"当前语种ID"
+        if (value.variableName === '当前语种ID') {
+            let displayValue = value.value;
+            // 如果值为null，使用默认语种ID
+            if (displayValue === null || displayValue === undefined) {
+                displayValue = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getDefaultLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : 0;
+            }
+            this.updateVariableValue(displayValue);
+            return;
+        }
+        // 其他变量调用父类方法
+        super.reportValueChanged(value);
+    }
     initElement() {
         const { rootElement } = this;
         rootElement.selectAll('*').remove();
@@ -75,7 +138,7 @@ export class NumericalDisplayElement extends ReadableElement {
             }
             if (!this.isEnable) {
                 const message = !this.isGrantedPermission ? this.localization.permissiontip : this.localization.conditionIsNotMetTip;
-                const modalRef = this.modalService.show(AlertModalComponent, { initialState: { alermMessage: message }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+                const modalRef = this.modalService.show(AlertModalComponent, { initialState: { alermMessage: message }, backdrop: 'static', class: 'gui-modal-dialog-position gui-modal-dialog-tip', animated: false });
                 const onClosedSub = modalRef.content.onClosed.subscribe(() => {
                     modalRef.hide();
                     onClosedSub.unsubscribe();
@@ -84,7 +147,7 @@ export class NumericalDisplayElement extends ReadableElement {
             }
             if (this.model.useSecurity) {
                 const modalRef = this.modalService.show(ConfirmOperationModalComponent, {
-                    backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+                    backdrop: 'static', class: 'gui-modal-dialog-position gui-modal-dialog-tip', animated: false
                 });
                 const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                     modalRef.hide();
@@ -101,7 +164,10 @@ export class NumericalDisplayElement extends ReadableElement {
     }
     checkElementPassword() {
         if (this.model.enablePassword) {
-            const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+            const modalRef = this.modalService.show(VerifyPasswordModalComponent, {
+                initialState: { securityChecker: this.securityChecker, releasedVariableService: this.releasedVariableService },
+                backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
             const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                 modalRef.hide();
                 onClosedSub.unsubscribe();
@@ -173,19 +239,75 @@ export class NumericalDisplayElement extends ReadableElement {
         if (null == this.writeVariableName) {
             return;
         }
-        const args = new WriteValueModalArgs(this.writeVariableName, this.model.dataType, this.model.fBoxDataType, this.model.integerDigits, this.model.fractionDigits, this.numericalOperationService.getNumericalOperations(this.model), this.model.version, this.enableDataParsed);
-        const modalRef = this.modalService.show(WriteValueModalComponent, {
-            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+        // 获取数值操作配置，上下限变量类型已在 reportValueChanged 中实时更新到缓存
+        const numericalOperation = this.numericalOperationService.getNumericalOperations(this.model);
+        // 用缓存的实时值替换变量类型上下限
+        // 模拟模式下（releasedVariableService 为空）变量无实时值，直接使用数据类型默认范围
+        const isSimulation = !this.releasedVariableService;
+        if (typeof numericalOperation.numericalUpperLimit === 'object' && numericalOperation.numericalUpperLimit.type === 1) {
+            if (isSimulation) {
+                numericalOperation.numericalUpperLimit = this.dataTypeService.getMaxValue(this.model.version || 0, this.model.dataType || 0, this.model.fBoxDataType || 0, this.model.integerDigits || undefined, this.model.fractionDigits || undefined);
+            }
+            else {
+                numericalOperation.numericalUpperLimit = this._resolvedUpperLimitValue != null
+                    ? this._resolvedUpperLimitValue
+                    : (this.dataTypeService.getMaxValue(this.model.version || 0, this.model.dataType || 0, this.model.fBoxDataType || 0) || 0);
+            }
+        }
+        if (typeof numericalOperation.numericalLowerLimit === 'object' && numericalOperation.numericalLowerLimit.type === 1) {
+            if (isSimulation) {
+                numericalOperation.numericalLowerLimit = this.dataTypeService.getMinValue(this.model.version || 0, this.model.dataType || 0, this.model.fBoxDataType || 0, this.model.integerDigits || undefined, this.model.fractionDigits || undefined);
+            }
+            else {
+                numericalOperation.numericalLowerLimit = this._resolvedLowerLimitValue != null
+                    ? this._resolvedLowerLimitValue
+                    : (this.dataTypeService.getMinValue(this.model.version || 0, this.model.dataType || 0, this.model.fBoxDataType || 0) || 0);
+            }
+        }
+        const args = new WriteValueModalArgs(this.writeVariableName, this.model.dataType, this.model.fBoxDataType, this.model.integerDigits, this.model.fractionDigits, numericalOperation, this.model.version, this.enableDataParsed, this.releasedVariableService, this.guiContext);
+        this.writeValueMmodalRef = this.modalService.show(WriteValueModalComponent, {
+            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position gui-modal-write', animated: false
         });
-        const onClosedSub = modalRef.content.onClosed.subscribe(result => {
-            modalRef.hide();
-            onClosedSub.unsubscribe();
+        this.writeValueMmodalRef.content.onClosed = (result) => {
             if (result) {
+                if (this.restorationTimer) {
+                    clearTimeout(this.restorationTimer);
+                    this.restorationTimer = undefined;
+                }
+                this.recordValue = result.value;
                 const writeValue = this.dataTypeService.formatToDecimal(this.model.version, result.value, this.model.dataType);
-                this.variableCommunicator.write(this.writeVariableName, writeValue).subscribe();
-                this.recordOperation(result.value);
+                this.showValue = result.showValue;
+                // 如果是系统变量"当前语种ID"，只更新显示，不执行变量写入和操作记录
+                if (this.writeVariableName === '当前语种ID') {
+                    // 直接更新显示值
+                    this.displayText = this.showValue;
+                    this.updateDisplayText(this.formatDisplayTextUnit(this.displayText));
+                    this.writeValueMmodalRef.hide();
+                    return;
+                }
+                if (this.displayText !== this.showValue || result.variableRwType === variableRwTypeEnum.witer) {
+                    if (this.numericalOperation || result.enableNumericalOperation || result.isNumericalOperation || result.variableRwType === variableRwTypeEnum.witer) {
+                        this.recordOperation(result.value);
+                        this.writeValueMmodalRef.hide();
+                    }
+                    else {
+                        this.restorationTimer = setTimeout(() => {
+                            const isEquation = this.model.fractionDigits ?
+                                parseFloat(this.displayText) === parseFloat(this.showValue) :
+                                parseInt(this.displayText, 16) === parseInt(this.showValue, 16);
+                            if (!isEquation) {
+                                this.writeValueMmodalRef.content.isSubmitting = false;
+                                this.writeValueMmodalRef.content.showValidationErrorInfo(this.localization.writeValueTimeout);
+                            }
+                        }, 30000);
+                    }
+                    this.variableCommunicator.write(this.writeVariableName, writeValue).subscribe();
+                }
+                else {
+                    this.writeValueMmodalRef.hide();
+                }
             }
-        });
+        };
     }
     recordOperation(newValue) {
         if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
@@ -211,7 +333,21 @@ export class NumericalDisplayElement extends ReadableElement {
         }
     }
     updateVariableValue(value) {
-        this.displayText = this.formatNumericalDisplayText(this.model.dataType, this.model.fractionDigits, value);
+        var _a;
+        const displayText = this.formatNumericalDisplayText(this.model.dataType, this.model.fractionDigits, value);
+        const isEquation = this.model.fractionDigits ?
+            parseFloat(displayText) === parseFloat(this.showValue) :
+            parseInt(displayText, 16) === parseInt(this.showValue, 16);
+        if (((_a = this.writeValueMmodalRef) === null || _a === void 0 ? void 0 : _a.content) && isEquation) {
+            if (this.restorationTimer) {
+                clearTimeout(this.restorationTimer);
+                this.restorationTimer = undefined;
+                this.recordOperation(this.recordValue);
+            }
+            this.writeValueMmodalRef.hide();
+            this.writeValueMmodalRef.content.hideValidationErrorInfo();
+        }
+        this.displayText = displayText;
         this.updateDisplayText(this.formatDisplayTextUnit(this.displayText));
     }
     updateDisplayText(text) {
@@ -354,8 +490,23 @@ export class NumericalDisplayElement extends ReadableElement {
     }
     formatDisplayTextUnit(displayText) {
         if (this.model.showUnit !== false && this.model.unit) {
-            return `${displayText} ${this.model.unit}`;
+            return `${displayText || 0} ${this.model.unit}`;
         }
         return displayText;
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    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/numerical-display/numerical-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NumericalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":22,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":39,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":40,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":41,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":42,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":43,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":44,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":45,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":46,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":47,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":48,"character":22},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"doWriteValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateDisplayText":[{"__symbolic":"method"}],"rebuildTextElement":[{"__symbolic":"method"}],"formatNumericalDisplayText":[{"__symbolic":"method"}],"formatFloatDisplayText":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"formatDisplayTextUnit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NumericalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":29,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":73,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":74,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":75,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":76,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":77,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":78,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":79,"character":49},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":80,"character":50},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":81,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":82,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":83,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":85,"character":38}]}],"dispose":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"doWriteValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateDisplayText":[{"__symbolic":"method"}],"rebuildTextElement":[{"__symbolic":"method"}],"formatNumericalDisplayText":[{"__symbolic":"method"}],"formatFloatDisplayText":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"formatDisplayTextUnit":[{"__symbolic":"method"}],"getElementSizeForIconScale":[{"__symbolic":"method"}]}}}}]

package/elements/per-view-variable-communicator.d.ts

@@ -6,12 +6,16 @@ export declare class PerViewVariableCommunicator implements VariableCommunicator
     private observers;
     private variableValuesChangedSubscriptions;
     private variableStatesChangedSubscription;
+    private alarmSubscription;
     constructor(variableCommunicator: VariableCommunicator);
     openVariable(variableName: string, appId: string): Observable<VariableValue>;
     openVariables(variableNames: Array<string>, appId?: string): Observable<Array<VariableValue>>;
     write(variableName: string, value: any): Observable<VariableValue>;
     writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
+    requestVirtualDeviceState(): Observable<void>;
     subscribeVariableState(variableName: string): Observable<VariableState>;
     subscribeVariableStates(variableNames: string[]): Observable<Array<VariableState>>;
+    subscribeUserDeviceAlarms(appId?: string): Observable<any[]>;
+    subscribeUserOneDeviceAlarms(appId?: string): Observable<any>;
     dispose(): void;
 }

package/elements/per-view-variable-communicator.js

@@ -6,6 +6,7 @@ export class PerViewVariableCommunicator {
         this.observers = new Map();
         this.variableValuesChangedSubscriptions = new Array();
         this.variableStatesChangedSubscription = new Array();
+        this.alarmSubscription = new Array();
         this._rawVariableCommunicator = variableCommunicator;
     }
     openVariable(variableName, appId) {
@@ -17,7 +18,10 @@ export class PerViewVariableCommunicator {
                 if (!this.observers.has(variableName)) {
                     this.observers.set(variableName, []);
                 }
-                this.observers.get(variableName).push(subscriber);
+                const obs = this.observers.get(variableName);
+                if (obs) {
+                    obs.push(subscriber);
+                }
             });
             const subscription = this._rawVariableCommunicator.openVariables(variableNames, appId).subscribe(values => subscriber.next(values), error => subscriber.error(error), () => subscriber.complete());
             this.variableValuesChangedSubscriptions.push(subscription);
@@ -29,6 +33,9 @@ export class PerViewVariableCommunicator {
     writeWordByBit(variableName, index, value) {
         return this._rawVariableCommunicator.writeWordByBit(variableName, index, value);
     }
+    requestVirtualDeviceState() {
+        return this._rawVariableCommunicator.requestVirtualDeviceState();
+    }
     subscribeVariableState(variableName) {
         return this.subscribeVariableStates([variableName]).pipe(map(values => values[0]));
     }
@@ -38,8 +45,21 @@ export class PerViewVariableCommunicator {
             this.variableStatesChangedSubscription.push(subscription);
         });
     }
+    subscribeUserDeviceAlarms(appId = '') {
+        return new Observable(subscriber => {
+            const subscription = this._rawVariableCommunicator.subscribeUserDeviceAlarms(appId).subscribe((values) => subscriber.next(values), (error) => subscriber.error(error), () => subscriber.complete());
+            this.alarmSubscription.push(subscription);
+        });
+    }
+    subscribeUserOneDeviceAlarms(appId = '') {
+        return new Observable(subscriber => {
+            const subscription = this._rawVariableCommunicator.subscribeUserOneDeviceAlarms(appId).subscribe((value) => subscriber.next(value), (error) => subscriber.error(error), () => subscriber.complete());
+            this.alarmSubscription.push(subscription);
+        });
+    }
     dispose() {
         forEach(this.variableValuesChangedSubscriptions, s => s.unsubscribe());
         forEach(this.variableStatesChangedSubscription, s => s.unsubscribe());
+        forEach(this.alarmSubscription, s => s.unsubscribe());
     }
 }

package/elements/per-view-variable-communicator.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"PerViewVariableCommunicator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":14,"character":38}]}],"openVariable":[{"__symbolic":"method"}],"openVariables":[{"__symbolic":"method"}],"write":[{"__symbolic":"method"}],"writeWordByBit":[{"__symbolic":"method"}],"subscribeVariableState":[{"__symbolic":"method"}],"subscribeVariableStates":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"PerViewVariableCommunicator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":15,"character":38}]}],"openVariable":[{"__symbolic":"method"}],"openVariables":[{"__symbolic":"method"}],"write":[{"__symbolic":"method"}],"writeWordByBit":[{"__symbolic":"method"}],"requestVirtualDeviceState":[{"__symbolic":"method"}],"subscribeVariableState":[{"__symbolic":"method"}],"subscribeVariableStates":[{"__symbolic":"method"}],"subscribeUserDeviceAlarms":[{"__symbolic":"method"}],"subscribeUserOneDeviceAlarms":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

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

@@ -5,13 +5,25 @@ import { ReadableElement } from '../base/readable-element';
 import { VariableStore } from '../../config';
 import { PermissionChecker } from '../../service';
 export declare class RingGraphElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
     protected readonly model: RingGraphModel;
     private _barElement$;
     private _textElement$;
+    private valueObj;
+    private isNeedUpdateScale;
+    private initTransform;
+    private needAddNumber;
     get readVariableName(): string;
+    get minVariableName(): string;
+    get maxVariableName(): string;
     constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private initTransformFun;
     private initFrameNode;
-    protected updateVariableValue(value: number): void;
+    init(variableName: string): void;
+    private updateValueObj;
+    private updateScale;
+    protected updateVariableValue(value: number, variableName: any): void;
     private updateBar;
     private getBarColor;
     private drawClockWiseArc;

package/elements/ring-graph/ring-graph-element.js

@@ -4,31 +4,190 @@ import { RotationDirectionType } from '../../model/shared/rotation/rotation-dire
 import { calculatePercent, degreesToRadians } from '../shared/math-utils';
 import { VariableUtil } from '../../utils/variable-util';
 import { VariableDefinition } from '../../communication/variable/variable-definition';
+import { forEach } from 'lodash';
+import { VariableState } from '../../communication';
+import { VariableValueType } from '../../model/shared/condition/variable-value-type';
 export class RingGraphElement extends ReadableElement {
     constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        this.initTransform = 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;
+        }
         const el$ = $(element);
         this._barElement$ = el$.find('path[data-id="barArc"]');
         this._textElement$ = el$.find('text[data-id="pText"]');
         setTimeout(() => {
             this.initFrameNode();
             this.changeStates();
-        }, 0);
+        });
     }
     get readVariableName() {
         if (!this.model.variableId) {
             return '';
         }
+        if (!this.model.variableId.variableName || !this.model.variableId.variableName.name) {
+            return undefined;
+        }
         const variable = new VariableDefinition(this.model.variableId.variableName.name, this.model.variableId.variableName.groupName, this.model.variableId.dataSourceCode, this.model.variableId.variableName.variableVersion);
         return VariableUtil.getConvertedVariableName(this.variableStore, variable);
     }
+    get minVariableName() {
+        if (!this.model.minValueType) {
+            return undefined;
+        }
+        if (!this.model.minVariable || !this.model.minVariable.name) {
+            return undefined;
+        }
+        const variable = new VariableDefinition(this.model.minVariable.name, this.model.minVariable.groupName, this.model.minVariable.dataSourceCode, this.model.minVariable.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
+    get maxVariableName() {
+        if (!this.model.maxValueType) {
+            return undefined;
+        }
+        if (!this.model.maxVariable || !this.model.maxVariable.name) {
+            return undefined;
+        }
+        const variable = new VariableDefinition(this.model.maxVariable.name, this.model.maxVariable.groupName, this.model.maxVariable.dataSourceCode, this.model.maxVariable.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
+    initTransformFun(len) {
+        this.$element[0].childNodes.forEach((node) => {
+            if (!node.transform.baseVal[0])
+                return;
+            // const matrixE = node.transform.baseVal[0].matrix.e;
+            // node.transform.baseVal[0].matrix.e = matrixE + len * 5;
+            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, index) => {
+                    const values = [];
+                    line.split(' ').forEach((item) => {
+                        const nItem = Number(item);
+                        if (!isNaN(nItem) && (index === 1 || index === 2 || nItem === -1)) {
+                            item = nItem > 0 ? (index === 1 || index === 2 ? nItem + (len + 2) * 8 : nItem + len * 8) : nItem - len * 8;
+                        }
+                        values.push(item);
+                    });
+                    retValues.push(values.join(' '));
+                });
+                demoPath.attr('d', retValues.join(','));
+            }
+        });
+    }
     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 percent = calculatePercent(this.model.min, this.model.max, value);
+    init(variableName) {
+        if (variableName) {
+            let hasVariable = false;
+            forEach(this.elementStates, elementState => {
+                if (elementState.variableName === variableName) {
+                    hasVariable = true;
+                }
+            });
+            if (!hasVariable && variableName === this.readVariableName) {
+                this.elementStates.push(new VariableState(variableName, undefined));
+            }
+        }
+    }
+    updateValueObj(value, variableName) {
+        var _a, _b, _c;
+        if (((_a = this.model.variableId) === null || _a === void 0 ? void 0 : _a.variableName.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() {
+        // 刻度模糊问题
+        const matrix = this.$element[0].transform.baseVal[0].matrix;
+        if (!this.$element[0].style.transform) {
+            this.$element[0].style.transform = `translate3d(${matrix.e}px, ${matrix.f}px, 0)`;
+        }
+        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 = RingGraphElement.DEFAULT_MIN_VALUE;
+            max = RingGraphElement.DEFAULT_MAX_VALUE;
+        }
+        if (this.model.minValueType === VariableValueType.Variable || this.model.maxValueType === VariableValueType.Variable) {
+            const len = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
+            if (Math.abs(len - this.needAddNumber) > 2) {
+                const width = this.$element.find('rect').attr('width');
+                this.$element.find('rect').attr('width', Number(width) + (len - this.needAddNumber) * 8);
+                this.initTransformFun(Math.abs(len - this.needAddNumber));
+                this.needAddNumber = len;
+            }
+        }
+        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)) {
+                const oriValue = text.innerHTML;
+                text.innerHTML = sacleValue;
+                if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
+                    // FLEXCLOUD-2619 刻度显示不全问题
+                    const order = (i + 1) / textElements.length;
+                    const len = oriValue.toString().length - sacleValue.toString().length;
+                    if (order <= 0.7 && len > 1 && !this.initTransform) {
+                        text.transform.baseVal[0].matrix.e += (len - 1) * 5;
+                    }
+                    if (order > 0.7 && Math.abs(len) > 0) {
+                        text.transform.baseVal[0].matrix.e += len > 1 ? (len - 1) * 5 : len < -1 ? (len + 1) * 5 : len * 5;
+                        text.transform.baseVal[0].matrix.e += len === -2 ? -3 : 0;
+                    }
+                }
+            }
+        }
+        this.initTransform = true;
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        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 = RingGraphElement.DEFAULT_MIN_VALUE;
+            max = RingGraphElement.DEFAULT_MAX_VALUE;
+        }
+        const percent = calculatePercent(min, max, this.valueObj.value || 0);
         this.updateBar(percent);
         this._barElement$.attr('fill', this.getBarColor(value));
         if (this.model.showPercentage) {
@@ -87,3 +246,5 @@ export class RingGraphElement extends ReadableElement {
         arcPath.arc(outer, outer, inner, endRadians, startRadians);
     }
 }
+RingGraphElement.DEFAULT_MIN_VALUE = 0;
+RingGraphElement.DEFAULT_MAX_VALUE = 100;

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"RingGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":13,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":27,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":27,"character":57},{"__symbolic":"reference","module":"../../communication/variable/variable-communicator","name":"VariableCommunicator","line":28,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":29,"character":23},{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":30,"character":22},{"__symbolic":"reference","name":"string"}]}],"initFrameNode":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateBar":[{"__symbolic":"method"}],"getBarColor":[{"__symbolic":"method"}],"drawClockWiseArc":[{"__symbolic":"method"}],"drawAntiClockWiseArc":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"RingGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":16,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":62,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":62,"character":57},{"__symbolic":"reference","module":"../../communication/variable/variable-communicator","name":"VariableCommunicator","line":63,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":64,"character":23},{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":65,"character":22},{"__symbolic":"reference","name":"string"}]}],"initTransformFun":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateBar":[{"__symbolic":"method"}],"getBarColor":[{"__symbolic":"method"}],"drawClockWiseArc":[{"__symbolic":"method"}],"drawAntiClockWiseArc":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]