@flexem/fc-gui 3.0.0-alpha.16 → 3.0.0-alpha.160

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

@@ -1,89 +1,250 @@
-import { path } from 'd3-path';
-import { ReadableElement } from '../base/readable-element';
-import { RotationDirectionType } from '../../model/shared/rotation/rotation-direction-type';
-import { calculatePercent, degreesToRadians } from '../shared/math-utils';
-import { VariableUtil } from '../../utils/variable-util';
-import { VariableDefinition } from '../../communication/variable/variable-definition';
-export class RingGraphElement extends ReadableElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
-        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 '';
-        }
-        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);
-    }
-    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);
-        this.updateBar(percent);
-        this._barElement$.attr('fill', this.getBarColor(value));
-        if (this.model.showPercentage) {
-            this._textElement$.text((percent * 100).toFixed(0) + '%');
-        }
-    }
-    updateBar(percent) {
-        const model = this.model;
-        const outer = model.size.width / 2.0;
-        const rawStartAngle = model.arc.startAngle;
-        const rawEndAngle = model.arc.endAngle;
-        const sweepAngle = rawStartAngle === rawEndAngle ? 360 :
-            (rawStartAngle < rawEndAngle ? rawEndAngle - rawStartAngle : rawEndAngle + 360 - rawStartAngle);
-        const scale = model.scale;
-        const inner = outer * (scale / 100.0);
-        const arcPath = path();
-        switch (Number(model.direction)) {
-            case RotationDirectionType.ClockWise:
-                this.drawClockWiseArc(rawStartAngle, sweepAngle, percent, arcPath, outer, inner);
-                break;
-            case RotationDirectionType.ReverseClockWise:
-                this.drawAntiClockWiseArc(rawEndAngle, sweepAngle, percent, arcPath, outer, inner);
-                break;
-        }
-        arcPath.closePath();
-        this._barElement$.attr('d', arcPath.toString());
-    }
-    getBarColor(value) {
-        const model = this.model;
-        if (!model.enableAlarmRange) {
-            return model.barFill;
-        }
-        const alarmRange = model.alarmRange;
-        if (value > alarmRange.upper) {
-            return alarmRange.upperFill;
-        }
-        else if (value < alarmRange.lower) {
-            return alarmRange.lowerFill;
-        }
-        else {
-            return model.barFill;
-        }
-    }
-    drawClockWiseArc(rawStartAngle, sweepAngle, percent, arcPath, outer, inner) {
-        const startRadians = degreesToRadians(rawStartAngle);
-        const endAngle = sweepAngle * percent + rawStartAngle;
-        const endRadians = degreesToRadians(endAngle);
-        arcPath.arc(outer, outer, outer, startRadians, endRadians);
-        arcPath.arc(outer, outer, inner, endRadians, startRadians, true);
-    }
-    drawAntiClockWiseArc(rawEndAngle, sweepAngle, percent, arcPath, outer, inner) {
-        const startRadians = degreesToRadians(rawEndAngle);
-        const endAngle = rawEndAngle - sweepAngle * percent;
-        const endRadians = degreesToRadians(endAngle);
-        arcPath.arc(outer, outer, outer, startRadians, endRadians, true);
-        arcPath.arc(outer, outer, inner, endRadians, startRadians);
-    }
-}
+import { path } from 'd3-path';
+import { ReadableElement } from '../base/readable-element';
+import { RotationDirectionType } from '../../model/shared/rotation/rotation-direction-type';
+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();
+        });
+    }
+    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');
+    }
+    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) {
+            this._textElement$.text((percent * 100).toFixed(0) + '%');
+        }
+    }
+    updateBar(percent) {
+        const model = this.model;
+        const outer = model.size.width / 2.0;
+        const rawStartAngle = model.arc.startAngle;
+        const rawEndAngle = model.arc.endAngle;
+        const sweepAngle = rawStartAngle === rawEndAngle ? 360 :
+            (rawStartAngle < rawEndAngle ? rawEndAngle - rawStartAngle : rawEndAngle + 360 - rawStartAngle);
+        const scale = model.scale;
+        const inner = outer * (scale / 100.0);
+        const arcPath = path();
+        switch (Number(model.direction)) {
+            case RotationDirectionType.ClockWise:
+                this.drawClockWiseArc(rawStartAngle, sweepAngle, percent, arcPath, outer, inner);
+                break;
+            case RotationDirectionType.ReverseClockWise:
+                this.drawAntiClockWiseArc(rawEndAngle, sweepAngle, percent, arcPath, outer, inner);
+                break;
+        }
+        arcPath.closePath();
+        this._barElement$.attr('d', arcPath.toString());
+    }
+    getBarColor(value) {
+        const model = this.model;
+        if (!model.enableAlarmRange) {
+            return model.barFill;
+        }
+        const alarmRange = model.alarmRange;
+        if (value > alarmRange.upper) {
+            return alarmRange.upperFill;
+        }
+        else if (value < alarmRange.lower) {
+            return alarmRange.lowerFill;
+        }
+        else {
+            return model.barFill;
+        }
+    }
+    drawClockWiseArc(rawStartAngle, sweepAngle, percent, arcPath, outer, inner) {
+        const startRadians = degreesToRadians(rawStartAngle);
+        const endAngle = sweepAngle * percent + rawStartAngle;
+        const endRadians = degreesToRadians(endAngle);
+        arcPath.arc(outer, outer, outer, startRadians, endRadians);
+        arcPath.arc(outer, outer, inner, endRadians, startRadians, true);
+    }
+    drawAntiClockWiseArc(rawEndAngle, sweepAngle, percent, arcPath, outer, inner) {
+        const startRadians = degreesToRadians(rawEndAngle);
+        const endAngle = rawEndAngle - sweepAngle * percent;
+        const endRadians = degreesToRadians(endAngle);
+        arcPath.arc(outer, outer, outer, startRadians, endRadians, true);
+        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}}}}]

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

@@ -0,0 +1,74 @@
+import { Injector } from '@angular/core';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
+import { ScrollAlarmModel } from '../../model/scroll-alarm/scroll-alarm.model';
+import { AlarmsStore, VariableStore } from '../../config';
+export declare class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
+    private readonly alarmsStore;
+    readonly model: ScrollAlarmModel;
+    private readonly logger;
+    readonly variableCommunicator: VariableCommunicator;
+    private elementStatus;
+    private element;
+    private scrollIntervalId;
+    private alarmNames;
+    private startTime;
+    private endTime;
+    private getAlarmDataId;
+    private alarmRefreshThrottleId;
+    private isWaitingForAlarmRefresh;
+    private isScrolling;
+    private isDisposed;
+    private isRefreshingCurrentPage;
+    private currentPage;
+    private maxResultCount;
+    private displayedItems;
+    private pageWidths;
+    private totalWidth;
+    private bgRect;
+    private scrollGroup;
+    private allAlarmsContainer;
+    private currentLeft;
+    private autoCycle;
+    private hasMoreData;
+    private isLoadingNextPage;
+    private headerFont;
+    private hasTriedFirstPage;
+    private isSimulateMode;
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string);
+    dispose(): void;
+    private getAlarmData;
+    private initDisplayContainer;
+    private _buildFontAttrs;
+    private _createSvgTextNode;
+    private _getSvgTextWidth;
+    private _updateUnderlineWidth;
+    private renderNewPage;
+    private _rebaseTextNodes;
+    private removeOldestPage;
+    private scrollContent;
+    private initScrolling;
+    private resetToFirstPage;
+    private updateQueryTimeRange;
+    private setStatusAsNormal;
+    private setStatusAsLoading;
+    private renderStatus;
+    private clearStatus;
+    /**
+     * 模拟运行时的静态显示逻辑：只显示字段标签，不查询数据
+     */
+    private renderStaticDisplay;
+    /**
+     * 模拟运行时的静态滚动逻辑
+     */
+    private initStaticScrolling;
+    /**
+     * 模拟运行时的静态内容滚动
+     */
+    private scrollStaticContent;
+    /**
+     * 实时替换当前滚动内容（用于告警数据变化时）
+     */
+    private replaceCurrentScrollingContent;
+}