@flexem/fc-gui 3.0.0-alpha.5 → 3.0.0-alpha.51

package/elements/meter-element.d.ts

@@ -5,16 +5,22 @@ import { ReadableElement } from './base';
 import { VariableStore } from '../config';
 import { PermissionChecker } from '../service';
 export declare class MeterElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
     private readonly $handEl;
     private readonly arcPath$;
     private cx;
     private cy;
     private offsetY;
     private mainElementTransform;
+    private valueObj;
+    private isNeedUpdateScale;
     readonly model: Meter;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
-    updateVariableValue(value: number): void;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private updateValueObj;
+    updateVariableValue(value: number, variableName: any): void;
     private initFrameNode;
+    private updateScale;
     private getAngle;
     private directionPoint;
 }

package/elements/meter-element.js

@@ -1,10 +1,20 @@
 import { ReadableElement } from './base';
+import { isNumber } from 'lodash';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
 export class MeterElement extends ReadableElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.cx = 0;
         this.cy = 0;
         this.offsetY = 0;
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        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;
+        }
         let mainEl$;
         if (this.model.version && this.model.version > 3) {
             mainEl$ = this.$element.find('[data-id="main"]');
@@ -31,18 +41,75 @@ export class MeterElement extends ReadableElement {
             this.changeStates();
         });
     }
-    updateVariableValue(value) {
-        const angle = this.getAngle(value);
-        this.$handEl.attr('transform', this.mainElementTransform + ` translate(0,${this.offsetY}) rotate(${angle}, ${this.cx}, ${this.cy})`);
+    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;
+        }
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const angle = this.getAngle();
+        if (isNumber(angle)) {
+            this.$handEl.attr('transform', this.mainElementTransform + ` translate(0,${this.offsetY}) rotate(${angle}, ${this.cx}, ${this.cy})`);
+        }
     }
     initFrameNode() {
         const b = Snap(this.$element[0]).getBBox();
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
-    getAngle(value) {
-        const min = this.model.min;
-        const max = this.model.max;
-        value = Math.min(Math.max(value, min), max);
+    updateScale() {
+        if (!this.isNeedUpdateScale) {
+            return;
+        }
+        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 = MeterElement.DEFAULT_MIN_VALUE;
+            max = MeterElement.DEFAULT_MAX_VALUE;
+        }
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+        const textElements = this.$element.find('g:first > text');
+        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;
+            }
+        }
+    }
+    getAngle() {
+        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 = MeterElement.DEFAULT_MIN_VALUE;
+            max = MeterElement.DEFAULT_MAX_VALUE;
+        }
+        if (!this.valueObj.value && isNaN(Number(this.valueObj.value))) {
+            return undefined;
+        }
+        const value = Math.min(Math.max(this.valueObj.value || 0, min), max);
         const len = (value - min) / (max - min);
         const arcPath = Snap(this.arcPath$[0]);
         const b = arcPath.getBBox(true);
@@ -68,3 +135,5 @@ export class MeterElement extends ReadableElement {
         return c;
     }
 }
+MeterElement.DEFAULT_MIN_VALUE = 0;
+MeterElement.DEFAULT_MAX_VALUE = 100;

package/elements/meter-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MeterElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base","name":"ReadableElement","line":7,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":18,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":19,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":19,"character":67},{"__symbolic":"reference","module":"../localization","name":"Localization","line":19,"character":96}]}],"updateVariableValue":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"getAngle":[{"__symbolic":"method"}],"directionPoint":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MeterElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base","name":"ReadableElement","line":9,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":25,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":25,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":26,"character":67},{"__symbolic":"reference","module":"../localization","name":"Localization","line":26,"character":96},{"__symbolic":"reference","name":"string"}]}],"updateValueObj":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"getAngle":[{"__symbolic":"method"}],"directionPoint":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]

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

@@ -3,7 +3,7 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { GraphStore, VariableStore } from '../../config';
 import { Localization } from '../../localization';
 import { NumericalDisplay } from '../../model';
-import { PermissionChecker, OperationRecordService } from '../../service';
+import { PermissionChecker, OperationRecordService, ReleasedVariableService } from '../../service';
 import { VariableCommunicator } from '../../communication';
 import { ReadableElement } from '../base/readable-element';
 import { SecurityChecker } from '../../security';
@@ -11,6 +11,7 @@ export declare class NumericalDisplayElement extends ReadableElement {
     private readonly modalService;
     private readonly graphStore;
     private readonly operationRecordService;
+    private readonly releasedVariableService;
     private readonly securityChecker;
     private readonly dataTypeService;
     private readonly fractionDigitService;
@@ -21,8 +22,13 @@ export declare class NumericalDisplayElement extends ReadableElement {
     private readonly logger;
     private displayForeignObject;
     private enableDataParsed;
+    private writeValueMmodalRef;
+    private writeValue;
+    private showValue;
+    private numericalOperation;
+    private restorationTimer;
     get writeVariableName(): string;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, graphStore: GraphStore, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, graphStore: GraphStore, operationRecordService: OperationRecordService, releasedVariableService: ReleasedVariableService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     dispose(): void;
     initElement(): any;
     private checkElementPassword;

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

@@ -12,11 +12,12 @@ import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify
 import { isNil } from 'lodash';
 import { FCloudDataType } from '../../model/shared/data-type/fcloud-data-Type';
 export class NumericalDisplayElement extends ReadableElement {
-    constructor(element, injector, modalService, permissionChecker, variableCommunicator, graphStore, operationRecordService, securityChecker, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, injector, modalService, permissionChecker, variableCommunicator, graphStore, operationRecordService, releasedVariableService, securityChecker, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;
+        this.releasedVariableService = releasedVariableService;
         this.securityChecker = securityChecker;
         this.displayText = '';
         this.enableDataParsed = false;
@@ -51,6 +52,12 @@ export class NumericalDisplayElement extends ReadableElement {
         }
     }
     initElement() {
+        this.releasedVariableService.getVariablesWithValueTransform().subscribe(result => {
+            const variablesTransform = result.filter(item => item.name === this.writeVariableName);
+            if (variablesTransform && variablesTransform.length && JSON.parse(variablesTransform[0].valueTransform).Type !== 0) {
+                this.numericalOperation = true;
+            }
+        });
         const { rootElement } = this;
         rootElement.selectAll('*').remove();
         let width = null, height = null;
@@ -173,19 +180,38 @@ export class NumericalDisplayElement extends ReadableElement {
         if (null == this.writeVariableName) {
             return;
         }
-        const args = new WriteValueModalArgs(this.writeVariableName, this.model.dataType, this.model.integerDigits, this.model.fractionDigits, this.numericalOperationService.getNumericalOperations(this.model), this.model.version, this.enableDataParsed);
-        const modalRef = this.modalService.show(WriteValueModalComponent, {
+        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);
+        this.writeValueMmodalRef = this.modalService.show(WriteValueModalComponent, {
             initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', 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;
+                }
                 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.writeValue = writeValue;
+                this.showValue = result.showValue;
+                if (+this.displayText !== +this.showValue) {
+                    if (this.numericalOperation || result.enableNumericalOperation) {
+                        this.writeValueMmodalRef.hide();
+                    }
+                    else {
+                        this.restorationTimer = setTimeout(() => {
+                            if (+this.displayText !== +this.showValue) {
+                                this.writeValueMmodalRef.content.isSubmitting = false;
+                                this.writeValueMmodalRef.content.showValidationErrorInfo(this.localization.writeValueTimeout);
+                            }
+                        }, 10000);
+                    }
+                    this.variableCommunicator.write(this.writeVariableName, writeValue).subscribe();
+                }
+                else {
+                    this.writeValueMmodalRef.hide();
+                }
             }
-        });
+        };
     }
     recordOperation(newValue) {
         if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
@@ -211,8 +237,18 @@ export class NumericalDisplayElement extends ReadableElement {
         }
     }
     updateVariableValue(value) {
+        var _a;
         this.displayText = this.formatNumericalDisplayText(this.model.dataType, this.model.fractionDigits, value);
         this.updateDisplayText(this.formatDisplayTextUnit(this.displayText));
+        if (((_a = this.writeValueMmodalRef) === null || _a === void 0 ? void 0 : _a.content) && +this.displayText === +this.showValue) {
+            if (this.restorationTimer) {
+                clearTimeout(this.restorationTimer);
+                this.restorationTimer = undefined;
+            }
+            this.writeValueMmodalRef.hide();
+            this.writeValueMmodalRef.content.hideValidationErrorInfo();
+            this.recordOperation(this.writeValue);
+        }
     }
     updateDisplayText(text) {
         if (!this.displayForeignObject) {
@@ -321,7 +357,7 @@ export class NumericalDisplayElement extends ReadableElement {
         if (fractionDigits === 0) {
             return value;
         }
-        let displayText = Number(value).toString();
+        let displayText = Number(value).toFixed(0).toString();
         const isNegative = +displayText < 0;
         if (isNegative) {
             displayText = displayText.slice(1, displayText.length);
@@ -354,7 +390,7 @@ 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;
     }

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}]}],"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":22,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":44,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":45,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":46,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":47,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":48,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":49,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":50,"character":49},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":51,"character":50},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":52,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":53,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":54,"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"}]}}}}]

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

@@ -7,8 +7,8 @@ export declare class PerViewVariableCommunicator implements VariableCommunicator
     private variableValuesChangedSubscriptions;
     private variableStatesChangedSubscription;
     constructor(variableCommunicator: VariableCommunicator);
-    openVariable(variableName: string): Observable<VariableValue>;
-    openVariables(variableNames: Array<string>): Observable<Array<VariableValue>>;
+    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>;
     subscribeVariableState(variableName: string): Observable<VariableState>;

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

@@ -8,10 +8,10 @@ export class PerViewVariableCommunicator {
         this.variableStatesChangedSubscription = new Array();
         this._rawVariableCommunicator = variableCommunicator;
     }
-    openVariable(variableName) {
-        return this.openVariables([variableName]).pipe(map(values => values[0]));
+    openVariable(variableName, appId) {
+        return this.openVariables([variableName], appId).pipe(map(values => values[0]));
     }
-    openVariables(variableNames) {
+    openVariables(variableNames, appId = '') {
         return new Observable(subscriber => {
             each(variableNames, variableName => {
                 if (!this.observers.has(variableName)) {
@@ -19,7 +19,7 @@ export class PerViewVariableCommunicator {
                 }
                 this.observers.get(variableName).push(subscriber);
             });
-            const subscription = this._rawVariableCommunicator.openVariables(variableNames).subscribe(values => subscriber.next(values), error => subscriber.error(error), () => subscriber.complete());
+            const subscription = this._rawVariableCommunicator.openVariables(variableNames, appId).subscribe(values => subscriber.next(values), error => subscriber.error(error), () => subscriber.complete());
             this.variableValuesChangedSubscriptions.push(subscription);
         });
     }

package/elements/pipe/pipe-element.d.ts

@@ -9,7 +9,7 @@ export declare class PipeElement extends ConditionalControlElement {
     private readonly elePipeInnerwall;
     private readonly elePipeFlowBlock;
     private pathLength;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     initDefaultData(model: any): void;
     protected updateElement(result: ConditionControlResultValue): void;
     private initFrameNode;

package/elements/pipe/pipe-element.js

@@ -1,8 +1,8 @@
 import { FlowDirectionType } from '../../model';
 import { ConditionalControlElement } from '../base/conditional-control-element';
 export class PipeElement extends ConditionalControlElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.initDefaultData(this.model);
         const children = this.$element.children();
         if (!children || !children.length) {

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"PipeElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-control-element","name":"ConditionalControlElement","line":7,"character":33},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":15,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":15,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":16,"character":67},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":22}]}],"initDefaultData":[{"__symbolic":"method"}],"updateElement":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"startOrStopPipeFlow":[{"__symbolic":"method"}],"getAnimate":[{"__symbolic":"method"}],"getAnimateElement":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"PipeElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-control-element","name":"ConditionalControlElement","line":7,"character":33},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":15,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":15,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":16,"character":67},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":22},{"__symbolic":"reference","name":"string"}]}],"initDefaultData":[{"__symbolic":"method"}],"updateElement":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"startOrStopPipeFlow":[{"__symbolic":"method"}],"getAnimate":[{"__symbolic":"method"}],"getAnimateElement":[{"__symbolic":"method"}]}}}}]

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

@@ -5,13 +5,22 @@ 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;
     get readVariableName(): string;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    get minVariableName(): string;
+    get maxVariableName(): string;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     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,132 @@ 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) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        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);
+    }
     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() {
+        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;
+        }
+        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;
+            }
+        }
+    }
+    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 +188,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}]}],"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":60,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":60,"character":57},{"__symbolic":"reference","module":"../../communication/variable/variable-communicator","name":"VariableCommunicator","line":61,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":62,"character":23},{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":63,"character":22},{"__symbolic":"reference","name":"string"}]}],"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}}}}]

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

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

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

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

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

@@ -49,7 +49,7 @@ export class TextStateElement {
         return this.textElement;
     }
     createNewForeignObjectText(content, font) {
-        if (font) {
+        if (font && !font.fontFamily.includes(',msyh')) {
             font.fontFamily += ',msyh';
         }
         const bodyDiv = document.createElement('div');

package/elements/static-elements/hyperlink-element.d.ts

@@ -9,6 +9,6 @@ export declare class HyperlinkElement extends ConditionalDynamicDisplayElement {
     private readonly graphStore;
     protected readonly model: HyperlinkModel;
     protected readonly logger: LoggerService;
-    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore);
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, signalRAppId: string);
     private initGraphAndText;
 }