@flexem/fc-gui 3.0.0-alpha.103 → 3.0.0-alpha.105

package/CHANGELOG.md

@@ -459,4 +459,14 @@
 ## 3.0.0-alpha.102(2023-12-18)，3.0.0-alpha.103(2024-03-07)
 ### Web端
 #### Features
-    1. FLEXCLOUD-2619 棒图、环形图设置最大值、最小值为参数后，刻度数值对齐及模糊问题
+    1. FLEXCLOUD-2619 棒图、环形图设置最大值、最小值为参数后，刻度数值对齐及模糊问题
+
+## 3.0.0-alpha.104(2024-03-13)
+### Web端
+#### Features
+    1. FLEXCLOUD-2619 环形图配置常数后再配置变量导致刻度值间隔较大
+
+## 3.0.0-alpha.105(2024-03-15)
+### Web端
+#### Features
+    1. FLEXCLOUD-3086 历史曲线可以设置筛选的背景颜色

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

@@ -35360,7 +35360,6 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
         this.valueObj = {};
         this.isNeedUpdateScale = false;
         this.needAddNumber = 0;
-        this.needInitTransform = true;
         if ((this.model.minValueType === variable_value_type["a" /* VariableValueType */].Constant && this.model.maxValueType === variable_value_type["a" /* VariableValueType */].Variable)
             || this.model.maxValueType === variable_value_type["a" /* VariableValueType */].Constant && this.model.minValueType === variable_value_type["a" /* VariableValueType */].Variable) {
             this.isNeedUpdateScale = true;
@@ -35376,9 +35375,7 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
             this.$barRect.attr('transform', this.defaultTransform);
         }
         setTimeout(() => {
-            if (this.model.maxValueType !== variable_value_type["a" /* VariableValueType */].Variable || this.model.minValueType !== variable_value_type["a" /* VariableValueType */].Variable) {
-                this.initFrameNode();
-            }
+            this.initFrameNode();
         });
     }
     get readVariableName() {
@@ -35400,8 +35397,10 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
         if (this.needAddNumber <= 3)
             return;
         this.$element[0].childNodes.forEach((node, index) => {
-            const matrixE = node.transform.baseVal[0].matrix.e;
-            node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
+            // const matrixE = node.transform.baseVal[0].matrix.e;
+            // node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
+            if (!node.transform.baseVal[0])
+                return;
             if (node.nodeName === 'g') {
                 const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
                 const rootNode = node.parentNode.parentNode.parentElement;
@@ -35413,8 +35412,8 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
                     const values = [];
                     line.split(' ').forEach((item) => {
                         const nItem = Number(item);
-                        if (!isNaN(nItem) && item < 100) {
-                            item = nItem > 0 ? nItem + (this.needAddNumber - 3) * 7 : nItem - (this.needAddNumber - 3) * 7;
+                        if (nItem === -1) {
+                            item = nItem - (this.needAddNumber - 3) * 7;
                         }
                         values.push(item);
                     });
@@ -35430,8 +35429,7 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
     initFrameNode() {
         const arcPath = Snap(this.$element[0]);
         const b = arcPath.getBBox(true);
-        const width = this.needAddNumber <= 3 ? b.width : b.width + (this.needAddNumber - 3) * 7;
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', b.height).attr('fill', 'transparent');
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
     updateValueObj(value, variableName) {
         var _a, _b, _c;
@@ -35461,13 +35459,9 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
             min = bar_graph_element_BarGraphElement.DEFAULT_MIN_VALUE;
             max = bar_graph_element_BarGraphElement.DEFAULT_MAX_VALUE;
         }
-        if (this.model.maxValueType === variable_value_type["a" /* VariableValueType */].Variable && this.model.minValueType === variable_value_type["a" /* VariableValueType */].Variable) {
+        if (this.model.maxValueType === variable_value_type["a" /* VariableValueType */].Variable || this.model.minValueType === variable_value_type["a" /* VariableValueType */].Variable) {
             this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
-            if (this.needInitTransform) {
-                this.initTransform();
-                this.initFrameNode();
-                this.needInitTransform = false;
-            }
+            this.initTransform();
         }
         const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
         for (let i = 0; i < textElements.length; i++) {
@@ -35502,6 +35496,10 @@ class bar_graph_element_BarGraphElement extends readable_element_ReadableElement
                             }
                             break;
                     }
+                    if (this.model.minValueType !== variable_value_type["a" /* VariableValueType */].Constant && this.model.maxValueType === variable_value_type["a" /* VariableValueType */].Constant) {
+                        const maxLen = this.model.max && this.model.max.toString().length;
+                        translateX += maxLen > 2 ? (maxLen - 3) * 7 : 0;
+                    }
                     text.transform.baseVal[0].matrix.e = translateX;
                 }
             }
@@ -36805,11 +36803,12 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         }
     }
     renderOperationArea(chartWidth, chartHeight) {
+        const backgroundColor = this.model.displaySetting.axisSetting.filterBackgroudColor || 'inherit';
         const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
             .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
             .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
         const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor)
             .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
             const displayTimePeriod = this.rootElement.select('select').property('value');
             this.updateTimeRange(displayTimePeriod);
@@ -36819,26 +36818,26 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         const fillColor = rect.attr('fill');
         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))
-            .style('background-color', fillColor);
+            .style('background-color', this.model.displaySetting.axisSetting.filterBackgroudColor || fillColor);
         const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
-            .style('background-color', 'inherit')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_last_page.png)')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadLastPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_next_page.png)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadNextPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_previous_page.png)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadPreviousPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_first_page.png)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadFirstPage(); });
     }
     timeFormat(datetime, specifier) {
@@ -37919,9 +37918,7 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
         this._barElement$ = el$.find('path[data-id="barArc"]');
         this._textElement$ = el$.find('text[data-id="pText"]');
         setTimeout(() => {
-            if (this.model.minValueType !== variable_value_type["a" /* VariableValueType */].Variable) {
-                this.initFrameNode();
-            }
+            this.initFrameNode();
             this.changeStates();
         });
     }
@@ -37955,12 +37952,12 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
         const variable = new variable_definition["a" /* VariableDefinition */](this.model.maxVariable.name, this.model.maxVariable.groupName, this.model.maxVariable.dataSourceCode, this.model.maxVariable.variableVersion);
         return variable_util["a" /* VariableUtil */].getConvertedVariableName(this.variableStore, variable);
     }
-    initTransformFun() {
-        if (this.needAddNumber <= 3)
-            return;
+    initTransformFun(len) {
         this.$element[0].childNodes.forEach((node) => {
-            const matrixE = node.transform.baseVal[0].matrix.e;
-            node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 5;
+            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;
@@ -37972,8 +37969,8 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
                     const values = [];
                     line.split(' ').forEach((item) => {
                         const nItem = Number(item);
-                        if (!isNaN(nItem) && (index === 1 || nItem === -1)) {
-                            item = nItem > 0 ? nItem + (this.needAddNumber - 3) * 8 : nItem - (this.needAddNumber - 3) * 8;
+                        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);
                     });
@@ -37986,8 +37983,7 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
     initFrameNode() {
         const arcPath = Snap(this.$element[0]);
         const b = arcPath.getBBox(true);
-        const width = this.needAddNumber <= 3 ? b.width : b.width + (this.needAddNumber - 3) * 8;
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', b.height).attr('fill', 'transparent');
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
     init(variableName) {
         if (variableName) {
@@ -38019,7 +38015,6 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
     }
     updateScale() {
         // 刻度模糊问题
-        let isInitTransform = false;
         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)`;
@@ -38036,11 +38031,13 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
             min = ring_graph_element_RingGraphElement.DEFAULT_MIN_VALUE;
             max = ring_graph_element_RingGraphElement.DEFAULT_MAX_VALUE;
         }
-        if (this.model.minValueType === variable_value_type["a" /* VariableValueType */].Variable) {
-            this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
-            if (!this.initTransform) {
-                this.initTransformFun();
-                this.initFrameNode();
+        if (this.model.minValueType === variable_value_type["a" /* VariableValueType */].Variable || this.model.maxValueType === variable_value_type["a" /* 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);
@@ -38055,18 +38052,23 @@ class ring_graph_element_RingGraphElement extends readable_element_ReadableEleme
                 sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
             }
             if (!isNaN(sacleValue)) {
+                const oriValue = text.innerHTML;
                 text.innerHTML = sacleValue;
-                isInitTransform = true;
                 if (this.model.minValueType !== variable_value_type["a" /* VariableValueType */].Constant || this.model.maxValueType !== variable_value_type["a" /* VariableValueType */].Constant) {
                     // FLEXCLOUD-2619 刻度显示不全问题
                     const order = (i + 1) / textElements.length;
-                    if (!this.initTransform && order > 0.7 && sacleValue.toString().length > 3) {
-                        text.transform.baseVal[0].matrix.e -= (sacleValue.toString().length - 3) * 5;
+                    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 = this.initTransform || isInitTransform;
+        this.initTransform = true;
     }
     updateVariableValue(value, variableName) {
         this.updateValueObj(value, variableName);