@flexem/fc-gui 3.0.0-alpha.32 → 3.0.0-alpha.36

package/CHANGELOG.md

@@ -140,3 +140,13 @@
 #### Bug Fix
     1. FLEXCLOUD-2100: 苏州水星：历史曲线组件支持Y轴自定义设定范围
 
+
+## 3.0.0-alpha.33(2022-07-08)
+### Web端
+#### Bug Fix
+    1. FLEXCLOUD-2171: 设备仪表盘:空气质量指数元件数值展示优化
+
+## 3.0.0-alpha.36(2022-09-02)
+### Web端
+#### Features
+    1. FLEXCLOUD-2218: 组态设计：历史曲线表，超过24小时，按天统计，X轴显示增加日期（年月日）

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

@@ -26736,7 +26736,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             marginRight: 20,
             mobileMinWidth: 450,
             operationAreaHeight: 32,
-            operationAreaMarginTop: 10,
+            operationAreaMarginTop: 25,
             operationSelectFontSize: '16px',
             operationButtonWidth: 24,
             operationButtonHeight: 24,
@@ -26753,7 +26753,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         }, this.model.displaySetting.refreshInterval * 1000);
         this.isMobileMode = _tmp_settings["a" /* DisplayMode */].Mobile === injector.get(_tmp_settings["b" /* GlobalSettings */]).displayMode;
         if (this.isMobileMode) {
-            this.displayOption.operationAreaMarginTop = 20;
+            this.displayOption.operationAreaMarginTop = 35;
             if (this.model.displaySetting.size.width >= this.displayOption.mobileMinWidth) {
                 this.displayOption.operationAreaHeight = 68;
                 this.displayOption.operationSelectFontSize = '24px';
@@ -26919,7 +26919,12 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
     renderCommonProperty(chart, chartWidth, chartHeight, data) {
         chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
         if (this.model.displaySetting.showAxis) {
-            chart.xAxis.showMaxMin(true).tickFormat(d => this.timeFormat(d, '%X'));
+            chart.xAxis.showMaxMin(true).tickFormat(d => {
+                if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
+                    return this.timeFormat(d, '%y-%m-%d');
+                }
+                return this.timeFormat(Number(d), '%X');
+            });
             if (this.model.displaySetting.axisSetting) {
                 if (this.model.displaySetting.axisSetting.showAxisLabel && this.model.displaySetting.axisSetting.axisLabelFont) {
                     chart.xAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize);
@@ -26944,15 +26949,86 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             chart.update();
             this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
         });
+        const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
         this.rootElement.selectAll('.domain').style('stroke-opacity', 1);
         if (this.model.displaySetting.showAxis && this.model.displaySetting.axisSetting) {
             const axisColor = this.model.displaySetting.axisSetting.axisColor;
             this.rootElement.selectAll('.domain').style('stroke', axisColor);
             if (this.model.displaySetting.axisSetting.showAxisLabel) {
-                const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
                 this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
             }
         }
+        const self = this;
+        if (self.currentTimePeriod === 3 || self.currentTimePeriod === 4 || self.currentTimePeriod === 5) {
+            this.rootElement
+                .selectAll('.nv-x')
+                .selectAll('.tick')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            this.rootElement
+                .selectAll('.nv-axisMaxMin-x')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            const h = this.rootElement
+                .selectAll('.nv-focusWrap')
+                .attr('transform')
+                .slice(0, -1)
+                .split(',')[1];
+            this.rootElement
+                .selectAll('.nv-focusWrap')
+                .attr('transform', `translate(0,${Number(h) + 15})`);
+            const resizeObserver = new window.MutationObserver(() => {
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('.full-date')
+                    .remove();
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('text')
+                    .data(function (d) {
+                    return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+                })
+                    .enter()
+                    .append('text')
+                    .attr('class', 'full-date')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('dy', '2.3em')
+                    .style('text-anchor', 'middle')
+                    .style('font-size', fontSize)
+                    .text((d) => d);
+            });
+            resizeObserver.observe(document.getElementsByClassName('extent')[0], { attributes: true });
+        }
+        else {
+            this.rootElement
+                .selectAll('.full-date')
+                .remove();
+        }
     }
     renderOperationArea(chartWidth, chartHeight) {
         const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
@@ -30141,9 +30217,9 @@ class air_quality_element_AirQualityElement extends conditional_display_element_
         this.buildBackgroudRect(airQualitySvg, backgroundColor);
         this.buildLocGroup(airQualitySvg, airQuality.city, fontColor);
         this.buildAirQualityText(airQualitySvg, 130, 55, airQuality.aqi, fontColor, 53);
-        this.buildAirQualityText(airQualitySvg, 190, 28, '空气质量', fontColor);
+        this.buildAirQualityText(airQualitySvg, 220, 28, '空气质量', fontColor);
         this.buildRectBackgroundForAqi(airQualitySvg, airQuality.level);
-        this.buildAirQualityText(airQualitySvg, 190, 49, airQuality.category, fontColor);
+        this.buildAirQualityText(airQualitySvg, 220, 49, airQuality.category, fontColor);
         this.buildAirQualityText(airQualitySvg, 30, 75, 'PM2.5', fontColor, 12, 0.8);
         this.buildAirQualityText(airQualitySvg, 30, 95, airQuality.pm25, fontColor, 15);
         this.buildAirQualityText(airQualitySvg, 80, 75, 'PM10', fontColor, 12, 0.8);
@@ -30206,7 +30282,7 @@ class air_quality_element_AirQualityElement extends conditional_display_element_
             backgroundColor = '#A10E0E';
         }
         airQualitySvg.append('rect')
-            .attr('x', '165')
+            .attr('x', '195')
             .attr('y', '35')
             .attr('rx', '5')
             .attr('width', '50')