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

package/CHANGELOG.md

@@ -356,3 +356,8 @@
 #### Bug Fix
     1. FLEXCLOUD-2576 【APP】android无极光推送
     2. FLEXCLOUD-2582 【氚云20230421001239】安卓手机端设备云助手视频监控无法全屏，苹果手机点击可进入全屏
+
+## 3.0.0-alpha.81(2023-04-25)
+### Web端
+#### Bug Fix
+    1. FLEXCLOUD-2583 模拟时点击刷新按钮告警表删闪跳

package/bundles/@flexem/fc-gui.umd.js

@@ -40047,11 +40047,17 @@ C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,3
 
 
 
+var AlaertElementStatus;
+(function (AlaertElementStatus) {
+    AlaertElementStatus[AlaertElementStatus["Normal"] = 0] = "Normal";
+    AlaertElementStatus[AlaertElementStatus["Loading"] = 1] = "Loading"; // 加载中
+})(AlaertElementStatus || (AlaertElementStatus = {}));
 class alarm_element_AlarmElement extends conditional_display_element_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,
@@ -40072,6 +40078,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         this.totalCount = 0;
         this.pageSize = 5;
         this.rootElement.selectAll('*').remove();
+        this.setStatusAsLoading();
         this.logger = injector.get(logger["b" /* LOGGER_SERVICE_TOKEN */]);
         this.localization = injector.get(_tmp_localization["b" /* LOCALIZATION */]);
         this.variableCommunicator = variableCommunicator;
@@ -40092,13 +40099,13 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                 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;
@@ -40124,7 +40131,9 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         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) {
@@ -40151,7 +40160,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                         this.currentAlarmList = result.items;
                         if (!result.items.length && result.totalCount) {
                             this.page = 0;
-                            this.init();
+                            this.getAlarmData();
                             return;
                         }
                         this.alarmList = this.currentAlarmList.map(item => [
@@ -40167,7 +40176,6 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         }, 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());
@@ -40279,7 +40287,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                 .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));
@@ -40300,6 +40308,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             .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;
@@ -40333,7 +40342,7 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
     loadFirstPage() {
         if (this.page > 0) {
             this.page = 0;
-            this.init();
+            this.getAlarmData();
         }
     }
     loadNextPage() {
@@ -40342,13 +40351,13 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             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() {
@@ -40357,8 +40366,61 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             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();
     }
 }