@flexem/fc-gui 3.0.0-alpha.80 → 3.0.0-alpha.82

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

@@ -11,6 +11,7 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     readonly variableCommunicator: VariableCommunicator;
     private readonly localization;
     private readonly timePeriods;
+    private elementStatus;
     private element;
     private refreshIntervalId;
     private readonly displayOption;
@@ -27,7 +28,7 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string);
     dispose(): void;
     private getValidTimePeriods;
-    private init;
+    private getAlarmData;
     private renderElement;
     private renderOperationArea;
     private updateTimeRange;
@@ -36,4 +37,8 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private loadNextPage;
     private loadPreviousPage;
     private loadLastPage;
+    private setStatusAsNormal;
+    private setStatusAsLoading;
+    private renderStatus;
+    private clearStatus;
 }

package/elements/alarm/alarm-element.js

@@ -4,11 +4,17 @@ import { GetAlarmsArgs } from '../../config';
 import * as moment from 'moment';
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import { LOCALIZATION } from '../../localization';
+var AlaertElementStatus;
+(function (AlaertElementStatus) {
+    AlaertElementStatus[AlaertElementStatus["Normal"] = 0] = "Normal";
+    AlaertElementStatus[AlaertElementStatus["Loading"] = 1] = "Loading"; // 加载中
+})(AlaertElementStatus || (AlaertElementStatus = {}));
 export class AlarmElement extends ConditionalDisplayElement {
     constructor(element, injector, permissionChecker, variableCommunicator, variableStore, alarmsStore, signalRAppId) {
         var _a;
         super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.alarmsStore = alarmsStore;
+        this.elementStatus = AlaertElementStatus.Loading;
         this.displayOption = {
             dataLimit: 500,
             dataZoomHeight: 32,
@@ -29,6 +35,7 @@ export class AlarmElement extends ConditionalDisplayElement {
         this.totalCount = 0;
         this.pageSize = 5;
         this.rootElement.selectAll('*').remove();
+        this.setStatusAsLoading();
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.localization = injector.get(LOCALIZATION);
         this.variableCommunicator = variableCommunicator;
@@ -49,13 +56,13 @@ export class AlarmElement extends ConditionalDisplayElement {
                 variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
                     alarms.forEach(alarm => {
                         if (this.alarmNames.indexOf(alarm.name) !== -1) {
-                            this.init();
+                            this.getAlarmData();
                             return;
                         }
                     });
                 });
             }
-            this.init();
+            this.getAlarmData();
         }
         else {
             this.totalCount = 0;
@@ -81,7 +88,9 @@ export class AlarmElement extends ConditionalDisplayElement {
         timePeriods.push({ key: 5, name: this.localization.lastOneYear });
         return timePeriods;
     }
-    init() {
+    getAlarmData() {
+        this.rootElement.selectAll('*').remove();
+        this.setStatusAsLoading();
         clearTimeout(this.getAlarmDataId);
         this.getAlarmDataId = setTimeout(() => {
             if (this.model.filterSetting.alarmType) {
@@ -108,7 +117,7 @@ export class AlarmElement extends ConditionalDisplayElement {
                         this.currentAlarmList = result.items;
                         if (!result.items.length && result.totalCount) {
                             this.page = 0;
-                            this.init();
+                            this.getAlarmData();
                             return;
                         }
                         this.alarmList = this.currentAlarmList.map(item => [
@@ -124,7 +133,6 @@ export class AlarmElement extends ConditionalDisplayElement {
         }, 500);
     }
     renderElement() {
-        this.rootElement.selectAll('*').remove();
         const elementHeight = this.model.size.height;
         this.element = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
         this.element.setAttribute('width', this.model.size.width.toString());
@@ -236,7 +244,7 @@ export class AlarmElement extends ConditionalDisplayElement {
                 .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
                 const displayTimePeriod = this.rootElement.select('select').property('value');
                 this.updateTimeRange(displayTimePeriod);
-                this.init();
+                this.getAlarmData();
             });
             const options = selectElement.selectAll('option').data(this.timePeriods).enter().append('option');
             options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod));
@@ -257,6 +265,7 @@ export class AlarmElement extends ConditionalDisplayElement {
             .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/first_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadFirstPage(); });
+        this.setStatusAsNormal();
     }
     updateTimeRange(timePeriodType) {
         this.currentTimePeriod = +timePeriodType;
@@ -290,7 +299,7 @@ export class AlarmElement extends ConditionalDisplayElement {
     loadFirstPage() {
         if (this.page > 0) {
             this.page = 0;
-            this.init();
+            this.getAlarmData();
         }
     }
     loadNextPage() {
@@ -299,13 +308,13 @@ export class AlarmElement extends ConditionalDisplayElement {
             last_page--;
         if (this.page < last_page) {
             this.page++;
-            this.init();
+            this.getAlarmData();
         }
     }
     loadPreviousPage() {
         if (this.page > 0) {
             this.page--;
-            this.init();
+            this.getAlarmData();
         }
     }
     loadLastPage() {
@@ -314,7 +323,60 @@ export class AlarmElement extends ConditionalDisplayElement {
             last_page--;
         if (this.page !== last_page) {
             this.page = last_page;
-            this.init();
+            this.getAlarmData();
+        }
+    }
+    setStatusAsNormal() {
+        this.elementStatus = AlaertElementStatus.Normal;
+        this.clearStatus();
+    }
+    setStatusAsLoading() {
+        this.elementStatus = AlaertElementStatus.Loading;
+        this.renderStatus('assets/img/loading.svg', '#226abc');
+    }
+    renderStatus(icon, stroke) {
+        if (this.elementStatus === AlaertElementStatus.Normal) {
+            this.clearStatus();
+            return;
+        }
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
+            .attr('width', this.model.size.width)
+            .attr('height', this.model.size.height);
+        const document = this.$element[0].ownerDocument;
+        const currentRect = this.$element.find('rect#StateFrame').first();
+        if (!currentRect.length) {
+            return;
+        }
+        this.$element.find('image#StateImage').remove();
+        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        if (imgObj) {
+            let x = Number(currentRect[0].getAttribute('width')) - 20;
+            const currentRectX = currentRect[0].getAttribute('x');
+            if (currentRectX !== null) {
+                x += Number(currentRectX);
+            }
+            currentRect[0].setAttribute('stroke', stroke);
+            currentRect[0].setAttribute('stroke-opacity', '0.5');
+            imgObj.href.baseVal = icon;
+            imgObj.setAttributeNS(null, 'id', 'StateImage');
+            imgObj.setAttributeNS(null, 'x', x.toString());
+            imgObj.setAttributeNS(null, 'y', '0');
+            imgObj.setAttributeNS(null, 'height', '20px');
+            imgObj.setAttributeNS(null, 'width', '20px');
+            const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+            imgObj.appendChild(titleElement);
+            this.$element.append(imgObj);
+        }
+    }
+    clearStatus() {
+        const currentRect = this.$element.find('rect#StateFrame').first();
+        if (!currentRect.length) {
+            return;
+        }
+        const stroke = currentRect[0].getAttribute('stroke');
+        if (stroke) {
+            currentRect[0].removeAttribute('stroke');
         }
+        this.$element.find('image#StateImage').remove();
     }
 }

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":48,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":49,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":50,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":51,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":52,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":53,"character":38},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":20,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":54,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":55,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":56,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":57,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":58,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":59,"character":38},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

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

@@ -245,6 +245,20 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
                 this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
             }
         }
+        let strokeWidth = 0;
+        if (this.model.displaySetting.axisSetting.showTick !== false) {
+            strokeWidth = 1;
+        }
+        this.rootElement
+            .selectAll('.nv-x')
+            .selectAll('.tick')
+            .selectAll('line')
+            .attr('style', `stroke:${this.model.displaySetting.axisSetting.xAxisTickColor || 'rgb(127, 147, 159)'};stroke-width:${strokeWidth};`);
+        this.rootElement
+            .selectAll('.nv-y')
+            .selectAll('.tick')
+            .selectAll('line')
+            .attr('style', `stroke:${this.model.displaySetting.axisSetting.yAxisTickColor || 'rgb(127, 147, 159)'};stroke-width:${strokeWidth};`);
         if (fontSize && this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
             const self = this;
             this.rootElement

package/model/historical-curve/historical-curve-axis-settings.d.ts

@@ -6,6 +6,9 @@ export interface HistoricalCurveAxisSettings {
     readonly axisColor: string;
     readonly showAxisLabel: boolean;
     readonly axisLabelFont: Font;
+    readonly showTick?: boolean;
+    readonly xAxisTickColor?: string;
+    readonly yAxisTickColor?: string;
 }
 export declare enum AxisRangeType {
     Auto = 0,

package/package.json

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