@flexem/fc-gui 3.0.0-alpha.180 → 3.0.0-alpha.181

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

@@ -21923,121 +21923,6 @@ var VariableStateEnum;
 
 "use strict";
 
-// EXTERNAL MODULE: ./.tmp/shared/disposable.ts
-var disposable = __webpack_require__(270);
-
-// CONCATENATED MODULE: ./.tmp/shared/config-is-empty-error.ts
-class ConfigIsEmptyError extends Error {
-    constructor() {
-        super('The config is empty.');
-        // Todo: Only works in Chrome and FireFox, does not work in IE
-        Object.setPrototypeOf(this, ConfigIsEmptyError.prototype);
-    }
-}
-
-// EXTERNAL MODULE: ./.tmp/model/shared/data-type/fcloud-data-Type.ts
-var fcloud_data_Type = __webpack_require__(7);
-
-// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
-var lodash = __webpack_require__(2);
-
-// CONCATENATED MODULE: ./.tmp/shared/operation-helper.ts
-
-
-class operation_helper_OperationHelper {
-    static add(value, operand, dataType, maxValue) {
-        if (!dataType) {
-            return value + operand;
-        }
-        if (!Object(lodash["isNil"])(maxValue)) {
-            return Math.min(value + operand, maxValue);
-        }
-        return Math.min(value + operand, operation_helper_OperationHelper.getMax(dataType));
-    }
-    static subtract(value, operand, dataType, minValue) {
-        if (!dataType) {
-            return value - operand;
-        }
-        if (!Object(lodash["isNil"])(minValue)) {
-            return Math.max(value - operand, minValue);
-        }
-        return Math.max(value - operand, operation_helper_OperationHelper.getMin(dataType));
-    }
-    static getMax(dataType) {
-        switch (dataType) {
-            case fcloud_data_Type["a" /* FCloudDataType */].Int32:
-                return 2147483647;
-            case fcloud_data_Type["a" /* FCloudDataType */].Float:
-                return 3.402823E+38;
-        }
-    }
-    static getMin(dataType) {
-        switch (dataType) {
-            case fcloud_data_Type["a" /* FCloudDataType */].Int32:
-                return -2147483648;
-            case fcloud_data_Type["a" /* FCloudDataType */].Float:
-                return -3.402823E+38;
-        }
-    }
-}
-
-// CONCATENATED MODULE: ./.tmp/shared/gui-consts.ts
-class GuiConsts {
-}
-GuiConsts.components = {
-    imageKey: 'Image',
-    numericalDisplayKey: 'NumericalDisplay',
-    textKey: 'Text',
-    hyperlinkKey: 'Hyperlink',
-    meterKey: 'Meter',
-    pipeKey: 'Pipe',
-    switchIndicatorLightKey: 'SwitchIndicatorLight',
-    barGraphKey: 'BarGraph',
-    /**
-     * 切换画面已经改为画面操作
-     */
-    toggleViewKey: 'ToggleView',
-    characterKey: 'Character',
-    straightLineKey: 'StraightLine',
-    polyLineKey: 'PolyLine',
-    rectangleKey: 'Rectangle',
-    sectorkey: 'Sector',
-    ellipseKey: 'Ellipse',
-    datetimeDisplayKey: 'DatetimeDisplay',
-    historicalCurveKey: 'HistoricalCurve',
-    ringGraphKey: 'RingGraph',
-    viewOperationElement: 'ViewOperation',
-    polygonKey: 'Polygon',
-    videokey: 'Video',
-    tableKey: 'Table',
-    weatherKey: 'Weather',
-    airQualityKey: 'AirQualityIndex',
-    alarmKey: 'Alarm',
-    scrollAlarmKey: 'ScrollAlarm'
-};
-
-// EXTERNAL MODULE: ./.tmp/shared/graph-extended-style.ts
-var graph_extended_style = __webpack_require__(269);
-
-// CONCATENATED MODULE: ./.tmp/shared/index.ts
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "b", function() { return disposable["Disposable"]; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "a", function() { return ConfigIsEmptyError; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "e", function() { return operation_helper_OperationHelper; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "d", function() { return GuiConsts; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "c", function() { return graph_extended_style["GraphExtendedStyle"]; });
-
-
-
-
-
-
-
-/***/ }),
-/* 6 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-
 // EXTERNAL MODULE: ./.tmp/config/config-store.ts
 var config_store = __webpack_require__(258);
 
@@ -22207,6 +22092,121 @@ class GetAlarmsArgs {
 
 
 
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXTERNAL MODULE: ./.tmp/shared/disposable.ts
+var disposable = __webpack_require__(270);
+
+// CONCATENATED MODULE: ./.tmp/shared/config-is-empty-error.ts
+class ConfigIsEmptyError extends Error {
+    constructor() {
+        super('The config is empty.');
+        // Todo: Only works in Chrome and FireFox, does not work in IE
+        Object.setPrototypeOf(this, ConfigIsEmptyError.prototype);
+    }
+}
+
+// EXTERNAL MODULE: ./.tmp/model/shared/data-type/fcloud-data-Type.ts
+var fcloud_data_Type = __webpack_require__(7);
+
+// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
+var lodash = __webpack_require__(2);
+
+// CONCATENATED MODULE: ./.tmp/shared/operation-helper.ts
+
+
+class operation_helper_OperationHelper {
+    static add(value, operand, dataType, maxValue) {
+        if (!dataType) {
+            return value + operand;
+        }
+        if (!Object(lodash["isNil"])(maxValue)) {
+            return Math.min(value + operand, maxValue);
+        }
+        return Math.min(value + operand, operation_helper_OperationHelper.getMax(dataType));
+    }
+    static subtract(value, operand, dataType, minValue) {
+        if (!dataType) {
+            return value - operand;
+        }
+        if (!Object(lodash["isNil"])(minValue)) {
+            return Math.max(value - operand, minValue);
+        }
+        return Math.max(value - operand, operation_helper_OperationHelper.getMin(dataType));
+    }
+    static getMax(dataType) {
+        switch (dataType) {
+            case fcloud_data_Type["a" /* FCloudDataType */].Int32:
+                return 2147483647;
+            case fcloud_data_Type["a" /* FCloudDataType */].Float:
+                return 3.402823E+38;
+        }
+    }
+    static getMin(dataType) {
+        switch (dataType) {
+            case fcloud_data_Type["a" /* FCloudDataType */].Int32:
+                return -2147483648;
+            case fcloud_data_Type["a" /* FCloudDataType */].Float:
+                return -3.402823E+38;
+        }
+    }
+}
+
+// CONCATENATED MODULE: ./.tmp/shared/gui-consts.ts
+class GuiConsts {
+}
+GuiConsts.components = {
+    imageKey: 'Image',
+    numericalDisplayKey: 'NumericalDisplay',
+    textKey: 'Text',
+    hyperlinkKey: 'Hyperlink',
+    meterKey: 'Meter',
+    pipeKey: 'Pipe',
+    switchIndicatorLightKey: 'SwitchIndicatorLight',
+    barGraphKey: 'BarGraph',
+    /**
+     * 切换画面已经改为画面操作
+     */
+    toggleViewKey: 'ToggleView',
+    characterKey: 'Character',
+    straightLineKey: 'StraightLine',
+    polyLineKey: 'PolyLine',
+    rectangleKey: 'Rectangle',
+    sectorkey: 'Sector',
+    ellipseKey: 'Ellipse',
+    datetimeDisplayKey: 'DatetimeDisplay',
+    historicalCurveKey: 'HistoricalCurve',
+    ringGraphKey: 'RingGraph',
+    viewOperationElement: 'ViewOperation',
+    polygonKey: 'Polygon',
+    videokey: 'Video',
+    tableKey: 'Table',
+    weatherKey: 'Weather',
+    airQualityKey: 'AirQualityIndex',
+    alarmKey: 'Alarm',
+    scrollAlarmKey: 'ScrollAlarm'
+};
+
+// EXTERNAL MODULE: ./.tmp/shared/graph-extended-style.ts
+var graph_extended_style = __webpack_require__(269);
+
+// CONCATENATED MODULE: ./.tmp/shared/index.ts
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "b", function() { return disposable["Disposable"]; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "a", function() { return ConfigIsEmptyError; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "e", function() { return operation_helper_OperationHelper; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "d", function() { return GuiConsts; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "c", function() { return graph_extended_style["GraphExtendedStyle"]; });
+
+
+
+
+
+
+
 /***/ }),
 /* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -22291,7 +22291,7 @@ class ConsoleLoggerService {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return VariableUtil; });
-/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
+/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 
 class VariableUtil {
     static getConvertedVariableName(variableStore, variable) {
@@ -34485,7 +34485,7 @@ var ViewBackgroundFillType;
 })(ViewBackgroundFillType || (ViewBackgroundFillType = {}));
 
 // EXTERNAL MODULE: ./.tmp/shared/index.ts + 3 modules
-var shared = __webpack_require__(5);
+var shared = __webpack_require__(6);
 
 // CONCATENATED MODULE: ./.tmp/model/shared/dynamic-display/dynamic-behavior-type.ts
 var DynamicBehaviorType;
@@ -35046,6 +35046,13 @@ class state_control_element_StateControlElement extends conditional_dynamic_disp
         this.isEnable = true;
         this.elementStates = [];
     }
+    /**
+     * 子类可覆盖此方法提供元件当前大小和初始大小，用于状态图标缩放计算
+     * @returns {{ width: number, height: number, initWidth?: number, initHeight?: number }}
+     */
+    getElementSizeForIconScale() {
+        return null;
+    }
     initState() {
         if (!this.elementStates.length) {
             return;
@@ -35196,7 +35203,18 @@ class state_control_element_StateControlElement extends conditional_dynamic_disp
         const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
         if (imgObj) {
             const currentRectElement = this.currentRect[0];
-            let x = Number(currentRectElement.getAttribute('width')) - 20;
+            // 计算图标缩放比例
+            const baseIconSize = 20;
+            let iconSize = baseIconSize;
+            const sizeInfo = this.getElementSizeForIconScale();
+            if (sizeInfo && sizeInfo.initWidth && sizeInfo.initHeight) {
+                const scaleX = sizeInfo.width / sizeInfo.initWidth;
+                const scaleY = sizeInfo.height / sizeInfo.initHeight;
+                // 取较小值，避免图标超出元件边界
+                const scale = Math.min(scaleX, scaleY);
+                iconSize = baseIconSize * scale;
+            }
+            let x = Number(currentRectElement.getAttribute('width')) - iconSize;
             const currentRectX = currentRectElement.getAttribute('x');
             if (currentRectX !== null) {
                 x += Number(currentRectX);
@@ -35207,8 +35225,8 @@ class state_control_element_StateControlElement extends conditional_dynamic_disp
             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');
+            imgObj.setAttributeNS(null, 'height', iconSize + 'px');
+            imgObj.setAttributeNS(null, 'width', iconSize + 'px');
             const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
             const text = document.createTextNode(title);
             titleElement.appendChild(text);
@@ -35335,7 +35353,7 @@ class conditional_enable_element_ConditionalEnableElement extends state_control_
 }
 
 // EXTERNAL MODULE: ./.tmp/config/index.ts + 12 modules
-var _tmp_config = __webpack_require__(6);
+var _tmp_config = __webpack_require__(5);
 
 // CONCATENATED MODULE: ./.tmp/elements/base/readable-element.ts
 
@@ -36224,6 +36242,21 @@ class character_display_element_CharacterDisplayElement extends readable_element
             this.rootElement.select('image').attr('xlink:href', null);
         }
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
 }
 
 // EXTERNAL MODULE: ./node_modules/moment/moment.js
@@ -37228,6 +37261,16 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         // 订阅语种变化事件 和 文本库缓存更新事件
         this.subscribeLanguageChange();
     }
+    getIconScale() {
+        const initSize = this.model.displaySetting.initSize;
+        const size = this.model.displaySetting.size;
+        if (!initSize || !initSize.width || !initSize.height) {
+            return 1;
+        }
+        const scaleX = size.width / initSize.width;
+        const scaleY = size.height / initSize.height;
+        return Math.min(scaleX, scaleY);
+    }
     dispose() {
         clearInterval(this.refreshIntervalId);
         if (this.chartElement) {
@@ -37493,7 +37536,10 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
     }
     renderChart(result) {
         const chartWidth = this.model.displaySetting.size.width;
-        const chartHeight = this.model.displaySetting.size.height - this.displayOption.operationAreaHeight - this.displayOption.operationAreaMarginTop;
+        const scale = this.getIconScale();
+        // 图表主体与底部操作区之间的预留高度，需要与操作区渲染时使用的同一个 scale 保持一致，
+        // 否则图表按未缩放高度占满后，缩放后的操作区会超出元件整体高度
+        const chartHeight = this.model.displaySetting.size.height - (this.displayOption.operationAreaHeight + this.displayOption.operationAreaMarginTop) * scale;
         const data = new Array();
         Object(lodash["each"])(this.model.dataSetting.channels, (channel, key) => {
             const values = new Array();
@@ -37503,10 +37549,10 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         this.data = data;
         let chart;
         if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
-            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
+            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data, scale);
         }
         else {
-            chart = this.getLineChart(chartWidth, chartHeight, data);
+            chart = this.getLineChart(chartWidth, chartHeight, data, scale);
         }
         // 设置 tooltip 自动隐藏逻辑
         this.setupTooltipAutoHide(chart);
@@ -37556,7 +37602,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             console.log(e);
         }
     }
-    getLineChart(chartWidth, chartHeight, data) {
+    getLineChart(chartWidth, chartHeight, data, scale = 1) {
         const chart = nv_d3["models"].lineChart().showLegend(true)
             .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
             .noData(this.localization.chartNoData);
@@ -37570,7 +37616,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             chart.focus.showXAxis(false);
         }
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        this.renderOperationArea(chartWidth, chartHeight);
+        this.renderOperationArea(chartWidth, chartHeight, scale);
         this.initPoint();
         chart.legend.dispatch.on('legendClick', () => {
             setTimeout(() => {
@@ -37586,7 +37632,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         });
         return chart;
     }
-    getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
+    getMultiBarWithFocusChart(chartWidth, chartHeight, data, scale = 1) {
         const chart = nv_d3["models"].multiBarWithFocusChart()
             .margin({
             top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight
@@ -37609,7 +37655,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         }
         chart.xAxis.tickFormat(d => this.timeFormat(d, '%x %X'));
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        this.renderOperationArea(chartWidth, chartHeight);
+        this.renderOperationArea(chartWidth, chartHeight, scale);
         const focusContext = this.rootElement.select('.nv-context');
         focusContext.select('.nv-barsWrap.nvd3-svg').attr('transform', 'translate(0,30)');
         focusContext.select('.nv-brushBackground').attr('transform', 'translate(0,30)');
@@ -37770,17 +37816,17 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
                 .remove();
         }
     }
-    renderOperationArea(chartWidth, chartHeight) {
+    renderOperationArea(chartWidth, chartHeight, scale = 1) {
         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 operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop * scale})`)
+            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight * scale).attr('fill', 'none')
+            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight * scale - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
         const rect = this.$element.parent().parent().find('rect');
         const fillColor = rect.attr('fill');
         const dropdownBg = this.model.displaySetting.axisSetting.filterBackgroudColor || fillColor || '#fff';
         const dropdownWrapper = operationArea.append('div')
             .style('display', 'inline-block')
-            .style('margin-left', this.displayOption.marginLeft + 'px')
+            .style('margin-left', (this.displayOption.marginLeft * scale) + 'px')
             .style('vertical-align', 'middle');
         const selectedText = this.timePeriods.find(t => t.key === Number(this.currentTimePeriod));
         const arrowIconUrl = 'url("data:image/svg+xml,'
@@ -37792,14 +37838,14 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             .style('background-image', arrowIconUrl)
             .style('background-repeat', 'no-repeat')
             .style('background-position', 'right 4px center')
-            .style('font-size', this.displayOption.operationSelectFontSize)
+            .style('font-size', (parseFloat(this.displayOption.operationSelectFontSize) * scale) + 'px')
             .style('cursor', 'pointer')
             .style('padding', '0 18px 0 4px')
             .style('border', '1px solid #ccc')
             .style('border-radius', '2px')
             .style('white-space', 'nowrap')
-            .style('line-height', (this.displayOption.operationAreaHeight - 8) + 'px')
-            .style('min-height', (this.displayOption.operationAreaHeight - 8) + 'px')
+            .style('line-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
+            .style('min-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
             .text(selectedText ? selectedText.name : '');
         const dropdownListEl = document.createElement('div');
         dropdownListEl.style.cssText = 'display:none;position:fixed;background:' + dropdownBg
@@ -37814,9 +37860,9 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
                 .style('padding', '4px 8px')
                 .style('cursor', 'pointer')
                 .style('white-space', 'nowrap')
-                .style('font-size', this.displayOption.operationSelectFontSize)
-                .style('line-height', (this.displayOption.operationAreaHeight - 8) + 'px')
-                .style('min-height', (this.displayOption.operationAreaHeight - 8) + 'px')
+                .style('font-size', (parseFloat(this.displayOption.operationSelectFontSize) * scale) + 'px')
+                .style('line-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
+                .style('min-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
                 .style('background', tp.key === Number(this.currentTimePeriod) ? '#1890ff' : 'transparent')
                 .style('color', tp.key === Number(this.currentTimePeriod) ? '#fff' : '#333')
                 .text(tp.name)
@@ -37911,24 +37957,24 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         window.addEventListener('resize', this._resizeHideHandler);
         // 滚动时收起
         document.addEventListener('scroll', hideDropdown, true);
-        const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
+        const buttonWidth = (this.displayOption.operationButtonWidth * scale) + 'px', buttonHeight = (this.displayOption.operationButtonHeight * scale) + 'px';
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
             .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/black_next_page.png)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .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/black_previous_page.png)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .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/black_first_page.png)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadFirstPage(); });
     }
@@ -38840,6 +38886,21 @@ class numerical_display_element_NumericalDisplayElement extends readable_element
         }
         return displayText;
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
 }
 
 // EXTERNAL MODULE: ./.tmp/model/shared/condition/condition-type.ts
@@ -40663,6 +40724,21 @@ class switch_indicator_light_element_SwitchIndicatorLightElement extends conditi
         this.textStateElement = new text_state_element_TextStateElement(this.model.states, width, height, this.logger, this.model.version, this.model.states, this.model.textLibrary, this.textLibraryService, this.languageService, this.guiContext, true, this.model.fontStyleCultures);
         this.$element.append(this.textStateElement.Element);
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
     /**
      * 释放资源
      */
@@ -41245,7 +41321,8 @@ class view_operation_element_ViewOperationElement extends conditional_enable_ele
     popView() {
         const viewIndex = this.model.viewIndex;
         if (null != viewIndex) {
-            this.popupViewService.popView(viewIndex, this.hostContainerId, this.el).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
+            const triggerRect = this.$element[0].getBoundingClientRect();
+            this.popupViewService.popView(viewIndex, this.hostContainerId, this.el, triggerRect).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
             $(`#${this.hostContainerId} video`)
                 .addClass('video-hidden')
                 .css('visibility', 'hidden');
@@ -42440,6 +42517,15 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         this.page = 0;
         this.totalCount = 0;
         this.pageSize = 5;
+        this.maxVisibleRows = 15;
+        this.rowHeight = 0;
+        this.isDisposed = false;
+        this.handleScrollMouseEnter = () => {
+            clearInterval(this.scrollIntervalId);
+        };
+        this.handleScrollMouseLeave = () => {
+            this.startAutoScroll();
+        };
         this.rootElement.selectAll('*').remove();
         this.setStatusAsLoading();
         this.logger = injector.get(logger["b" /* LOGGER_SERVICE_TOKEN */]);
@@ -42454,7 +42540,14 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             this.updateQueryTimeRange();
             if (this.model.filterSetting.alarmType) {
                 this.refreshIntervalId = setInterval(() => {
-                    this.loadFirstPage();
+                    if (this.model.generalSetting.autoScroll) {
+                        // 开启滚动时，仅更新数据不重渲染，保持滚动进度
+                        this.refreshCurrentPageData();
+                    }
+                    else {
+                        // 未开启滚动时，返回第一页
+                        this.loadFirstPage();
+                    }
                     this.logger.debug(`[GUI]Refresh Alarm Table:${d3["time"].format('%x %X')(new Date())}`);
                 }, this.model.filterSetting.refreshCycle * 60 * 1000);
             }
@@ -42462,7 +42555,14 @@ 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.getAlarmData();
+                            if (this.model.generalSetting.autoScroll) {
+                                // 开启滚动时，刷新当前页并保持滚动进度
+                                this.refreshCurrentPageData();
+                            }
+                            else {
+                                // 未开启滚动时，刷新当前页（原有逻辑）
+                                this.getAlarmData();
+                            }
                             return;
                         }
                     });
@@ -42477,10 +42577,11 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         }
     }
     dispose() {
+        this.isDisposed = true;
         clearInterval(this.refreshIntervalId);
-        if (this.element) {
-            this.element.tooltip.hidden(true);
-        }
+        clearInterval(this.scrollIntervalId);
+        clearTimeout(this.getAlarmDataId);
+        this.unbindScrollHoverEvents();
         // 取消语种变化订阅
         if (this.languageChangeSubscription) {
             this.languageChangeSubscription.unsubscribe();
@@ -42602,15 +42703,21 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
         return '';
     }
     getAlarmData() {
+        clearInterval(this.scrollIntervalId);
+        this.unbindScrollHoverEvents();
         this.rootElement.selectAll('*').remove();
         this.setStatusAsLoading();
         clearTimeout(this.getAlarmDataId);
         this.getAlarmDataId = setTimeout(() => {
+            if (this.isDisposed)
+                return;
             this.timePeriods = this.getValidTimePeriods();
             if (this.model.filterSetting.alarmType) {
                 this.updateQueryTimeRange();
                 const input = new _tmp_config["c" /* GetAlarmsArgs */](this.alarmNames, this.startTime, this.endTime, this.pageSize, this.page * this.pageSize);
                 this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
+                    if (this.isDisposed)
+                        return;
                     if (!result.error) {
                         this.totalCount = result.totalCount;
                         this.alarmList = result.items.map(item => [
@@ -42626,6 +42733,8 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             else {
                 const input = new _tmp_config["c" /* GetAlarmsArgs */](this.alarmNames, undefined, undefined, this.pageSize, this.page * this.pageSize);
                 this.alarmsStore.getCurrentAlarms(input).subscribe(result => {
+                    if (this.isDisposed)
+                        return;
                     if (!result.error) {
                         this.totalCount = result.totalCount;
                         this.currentAlarmList = result.items;
@@ -42646,16 +42755,124 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             }
         }, 500);
     }
+    refreshCurrentPageData() {
+        var _a;
+        if (this.isDisposed)
+            return;
+        const currentScrollTop = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
+        if (this.model.filterSetting.alarmType) {
+            this.updateQueryTimeRange();
+            const input = new _tmp_config["c" /* GetAlarmsArgs */](this.alarmNames, this.startTime, this.endTime, this.pageSize, this.page * this.pageSize);
+            this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
+                if (this.isDisposed)
+                    return;
+                if (!result.error) {
+                    this.totalCount = result.totalCount;
+                    this.alarmList = result.items.map(item => [
+                        item.name,
+                        item.message,
+                        item.alarmLevel,
+                        item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
+                    ]);
+                    this.updateTableContent();
+                    if (this.scrollContainer) {
+                        this.scrollContainer.scrollTop = currentScrollTop;
+                    }
+                }
+            });
+        }
+        else {
+            const input = new _tmp_config["c" /* GetAlarmsArgs */](this.alarmNames, undefined, undefined, this.pageSize, this.page * this.pageSize);
+            this.alarmsStore.getCurrentAlarms(input).subscribe(result => {
+                if (this.isDisposed)
+                    return;
+                if (!result.error) {
+                    this.totalCount = result.totalCount;
+                    this.currentAlarmList = result.items;
+                    if (!result.items.length && result.totalCount) {
+                        this.page = 0;
+                        this.refreshCurrentPageData();
+                        return;
+                    }
+                    this.alarmList = this.currentAlarmList.map(item => [
+                        item.name,
+                        item.message,
+                        item.alarmLevel,
+                        item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
+                    ]);
+                    this.updateTableContent();
+                    if (this.scrollContainer) {
+                        this.scrollContainer.scrollTop = currentScrollTop;
+                    }
+                }
+            });
+        }
+    }
+    updateTableContent() {
+        if (!this.element)
+            return;
+        const useScroll = this.pageSize > this.maxVisibleRows;
+        const dataRowHeight = this.model.heights[1] || this.model.heights[0];
+        // 查找表格主体
+        let tbody;
+        if (useScroll) {
+            const bodyContainer = this.element.querySelector('div > div:nth-child(2)');
+            if (!bodyContainer)
+                return;
+            const bodyTable = bodyContainer.querySelector('table');
+            if (!bodyTable)
+                return;
+            tbody = bodyTable;
+        }
+        else {
+            const table = this.element.querySelector('table');
+            if (!table)
+                return;
+            tbody = table;
+        }
+        // 清除现有数据行（保留表头）
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+        rows.forEach((row, index) => {
+            if (index > 0 || useScroll) { // 对于 scrollable 模式，表头在另一个 table，所以这里全部清除
+                row.remove();
+            }
+        });
+        // 重新生成数据行
+        for (let row = 0; row < this.pageSize; row++) {
+            const rowHeight = useScroll ? dataRowHeight : this.model.heights[row + 1];
+            tbody.appendChild(this.buildDataRow(row, rowHeight));
+        }
+    }
+    getIconScale() {
+        const initSize = this.model.initSize;
+        if (!initSize || !initSize.width || !initSize.height) {
+            return 1;
+        }
+        const scaleX = this.model.size.width / initSize.width;
+        const scaleY = this.model.size.height / initSize.height;
+        return Math.min(scaleX, scaleY);
+    }
     renderElement() {
         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());
         this.element.setAttribute('height', elementHeight.toString());
         this.$element.append(this.element);
-        const table = document.createElement('table');
-        table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
-            height: ${elementHeight - 39}`;
-        let tr = document.createElement('tr');
+        const scale = this.getIconScale();
+        // 表格与底部操作区之间的预留高度，需要与操作区渲染时使用的同一个 scale 保持一致，
+        // 否则表格按未缩放高度占满后，缩放后的操作区会超出元件整体高度
+        const operationAreaReservedHeight = 39 * scale;
+        const useScroll = this.pageSize > this.maxVisibleRows;
+        if (useScroll) {
+            this.renderScrollableTable(elementHeight, operationAreaReservedHeight);
+        }
+        else {
+            this.renderPlainTable(elementHeight, operationAreaReservedHeight);
+        }
+        this.renderOperationArea(this.model.size.width, elementHeight - operationAreaReservedHeight, scale);
+    }
+    buildHeaderRow() {
+        const tr = document.createElement('tr');
         let fontString = '';
         if (this.model.generalSetting.headerFont.isItalic) {
             fontString += 'italic ';
@@ -42680,56 +42897,34 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                 border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
             tr.appendChild(th);
         }
-        table.appendChild(tr);
+        return tr;
+    }
+    buildDataRow(row, rowHeight) {
         const levelColors = ['#3695FF', '#FFE900', '#FFA800', '#E84F4F'];
-        for (let row = 0; row < this.pageSize; row++) {
-            tr = document.createElement('tr');
-            tr.style.cssText = `height: ${this.model.heights[row + 1]}px;
-                    background: ${this.model.generalSetting.tableFillColor};
-                    font: ${this.model.generalSetting.fontStyle};
-                    color: ${this.model.generalSetting.fontColor};
-                    text-align: ${this.model.generalSetting.textAlign};
-                    vertical-align: middle;`;
-            for (let col = 0; col < 4; col++) {
-                const td = document.createElement('td');
-                td.style.cssText = `border-style: solid;
-                border-color: ${this.model.generalSetting.splitLine};
-                border-top-width: ${this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;
-                border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
-                if (this.alarmList[row]) {
-                    if (col !== 2) {
-                        td.innerHTML = this.alarmList[row][col];
-                        td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
-                    }
-                    else {
-                        const alarmLevel = document.createElement('div');
-                        let alarmHeight = parseInt(this.model.generalSetting.fontSize) + 15;
-                        if (alarmHeight > this.model.heights[row + 1])
-                            alarmHeight = this.model.heights[row + 1];
-                        let margin = '0 15px';
-                        if (this.model.generalSetting.textAlign === 'left') {
-                            margin = '0 30px 0 0';
-                        }
-                        else if (this.model.generalSetting.textAlign === 'right') {
-                            margin = '0 0 0 30px';
-                        }
-                        alarmLevel.style.cssText = `margin: ${margin};
-                            border-radius: 5px;
-                            background: ${levelColors[this.alarmList[row][col]]};
-                            color: #ffffff;
-                            width: ${this.model.widths[col] - 30}px;
-                            height: ${alarmHeight}px;
-                            max-height: ${this.model.heights[row + 1]}px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                            ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
-                        alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
-                        td.appendChild(alarmLevel);
-                    }
+        const tr = document.createElement('tr');
+        tr.style.cssText = `height: ${rowHeight}px;
+                background: ${this.model.generalSetting.tableFillColor};
+                font: ${this.model.generalSetting.fontStyle};
+                color: ${this.model.generalSetting.fontColor};
+                text-align: ${this.model.generalSetting.textAlign};
+                vertical-align: middle;`;
+        for (let col = 0; col < 4; col++) {
+            const td = document.createElement('td');
+            td.style.cssText = `width: ${this.model.widths[col] / this.model.size.width * 100}%;
+            border-style: solid;
+            border-color: ${this.model.generalSetting.splitLine};
+            border-top-width: ${this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;
+            border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
+            if (this.alarmList[row]) {
+                if (col !== 2) {
+                    td.innerHTML = this.alarmList[row][col];
+                    td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
                 }
-                else if (col === 2) {
+                else {
                     const alarmLevel = document.createElement('div');
+                    let alarmHeight = parseInt(this.model.generalSetting.fontSize) + 15;
+                    if (alarmHeight > rowHeight)
+                        alarmHeight = rowHeight;
                     let margin = '0 15px';
                     if (this.model.generalSetting.textAlign === 'left') {
                         margin = '0 30px 0 0';
@@ -42738,24 +42933,144 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
                         margin = '0 0 0 30px';
                     }
                     alarmLevel.style.cssText = `margin: ${margin};
-                            width: ${this.model.widths[col] - 30}px;`;
+                        border-radius: 5px;
+                        background: ${levelColors[this.alarmList[row][col]]};
+                        color: #ffffff;
+                        width: ${this.model.widths[col] - 30}px;
+                        height: ${alarmHeight}px;
+                        max-height: ${rowHeight}px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
+                    alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
                     td.appendChild(alarmLevel);
                 }
-                tr.appendChild(td);
             }
-            table.appendChild(tr);
+            else if (col === 2) {
+                const alarmLevel = document.createElement('div');
+                let margin = '0 15px';
+                if (this.model.generalSetting.textAlign === 'left') {
+                    margin = '0 30px 0 0';
+                }
+                else if (this.model.generalSetting.textAlign === 'right') {
+                    margin = '0 0 0 30px';
+                }
+                alarmLevel.style.cssText = `margin: ${margin};
+                        width: ${this.model.widths[col] - 30}px;`;
+                td.appendChild(alarmLevel);
+            }
+            tr.appendChild(td);
+        }
+        return tr;
+    }
+    renderPlainTable(elementHeight, operationAreaReservedHeight) {
+        this.scrollContainer = null;
+        const table = document.createElement('table');
+        table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
+            height: ${elementHeight - operationAreaReservedHeight}px;`;
+        table.appendChild(this.buildHeaderRow());
+        for (let row = 0; row < this.pageSize; row++) {
+            table.appendChild(this.buildDataRow(row, this.model.heights[row + 1]));
         }
         this.element.appendChild(table);
-        this.renderOperationArea(this.model.size.width, elementHeight - 39);
+        this.hoverTarget = table;
+        this.bindScrollHoverEvents();
+        this.startAutoScroll();
+    }
+    renderScrollableTable(elementHeight, operationAreaReservedHeight) {
+        const dataRowHeight = this.model.heights[1] || this.model.heights[0];
+        this.rowHeight = dataRowHeight;
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = `display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+            border: 2px solid ${this.model.generalSetting.stroke};
+            height: ${elementHeight - operationAreaReservedHeight}px;
+            overflow: hidden;`;
+        const headerWrapper = document.createElement('div');
+        headerWrapper.style.cssText = 'flex: none; box-sizing: border-box; overflow: hidden;';
+        const headerTable = document.createElement('table');
+        headerTable.style.cssText = 'width: 100%; table-layout: fixed;';
+        headerTable.appendChild(this.buildHeaderRow());
+        headerWrapper.appendChild(headerTable);
+        const bodyContainer = document.createElement('div');
+        bodyContainer.style.cssText = `flex: none;
+            overflow-y: auto;
+            overflow-x: hidden;
+            height: ${dataRowHeight * this.maxVisibleRows}px;`;
+        const bodyTable = document.createElement('table');
+        bodyTable.style.cssText = 'width: 100%; table-layout: fixed;';
+        for (let row = 0; row < this.pageSize; row++) {
+            bodyTable.appendChild(this.buildDataRow(row, dataRowHeight));
+        }
+        bodyContainer.appendChild(bodyTable);
+        wrapper.appendChild(headerWrapper);
+        wrapper.appendChild(bodyContainer);
+        this.element.appendChild(wrapper);
+        this.scrollContainer = bodyContainer;
+        requestAnimationFrame(() => {
+            const scrollbarWidth = bodyContainer.offsetWidth - bodyContainer.clientWidth;
+            if (scrollbarWidth > 0) {
+                headerWrapper.style.paddingRight = scrollbarWidth + 'px';
+            }
+        });
+        this.hoverTarget = bodyContainer;
+        this.bindScrollHoverEvents();
+        this.startAutoScroll();
+    }
+    bindScrollHoverEvents() {
+        if (!this.hoverTarget)
+            return;
+        this.hoverTarget.addEventListener('mouseenter', this.handleScrollMouseEnter);
+        this.hoverTarget.addEventListener('mouseleave', this.handleScrollMouseLeave);
+    }
+    unbindScrollHoverEvents() {
+        if (!this.hoverTarget)
+            return;
+        this.hoverTarget.removeEventListener('mouseenter', this.handleScrollMouseEnter);
+        this.hoverTarget.removeEventListener('mouseleave', this.handleScrollMouseLeave);
+        this.hoverTarget = null;
     }
-    renderOperationArea(chartWidth, chartHeight) {
+    startAutoScroll() {
+        clearInterval(this.scrollIntervalId);
+        if (!this.model.generalSetting.autoScroll)
+            return;
+        const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
+        if (totalPages <= 1 && !this.scrollContainer)
+            return;
+        const duration = (this.model.generalSetting.scrollDuration || 10) * 1000;
+        this.scrollIntervalId = setInterval(() => this.scrollOneRow(), duration);
+    }
+    scrollOneRow() {
+        const el = this.scrollContainer;
+        if (!el) {
+            this.autoNextPage();
+            return;
+        }
+        const maxScrollTop = el.scrollHeight - el.clientHeight;
+        if (maxScrollTop <= 1 || el.scrollTop >= maxScrollTop - 1) {
+            this.autoNextPage();
+            return;
+        }
+        el.scrollTop = Math.min(el.scrollTop + this.rowHeight, maxScrollTop);
+    }
+    autoNextPage() {
+        const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
+        if (totalPages <= 1)
+            return;
+        const lastPage = totalPages - 1;
+        this.page = this.page < lastPage ? this.page + 1 : 0;
+        this.getAlarmData();
+    }
+    renderOperationArea(chartWidth, chartHeight, scale = 1) {
         var _a;
-        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 operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop * scale})`)
+            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight * scale).attr('fill', 'none')
+            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight * scale - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
         if ((_a = this.model.filterSetting) === null || _a === void 0 ? void 0 : _a.alarmType) {
-            const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
-                .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
+            const selectElement = operationArea.append('select').style('margin-left', (this.displayOption.marginLeft * scale) + 'px')
+                .style('font-size', (parseFloat(this.displayOption.operationSelectFontSize) * scale) + 'px').on('change', () => {
                 const displayTimePeriod = this.rootElement.select('select').property('value');
                 this.updateTimeRange(displayTimePeriod);
                 this.getAlarmData();
@@ -42763,24 +43078,28 @@ class alarm_element_AlarmElement extends conditional_display_element_Conditional
             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));
         }
-        const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
+        const buttonWidth = (this.displayOption.operationButtonWidth * scale) + 'px', buttonHeight = (this.displayOption.operationButtonHeight * scale) + '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-size', 'contain').style('background-repeat', 'no-repeat').style('background-position', 'center')
             .style('background-color', 'inherit')
             .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('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('background-size', 'contain').style('background-repeat', 'no-repeat').style('background-position', 'center')
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', 'inherit')
             .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('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('background-size', 'contain').style('background-repeat', 'no-repeat').style('background-position', 'center')
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', 'inherit')
             .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('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('background-size', 'contain').style('background-repeat', 'no-repeat').style('background-position', 'center')
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', 'inherit')
             .on('click', () => { this.loadFirstPage(); });
         this.setStatusAsNormal();
@@ -44067,7 +44386,8 @@ class main_element_MainElement {
         Object(lodash["each"])(this.elements, e => {
             if (e instanceof historical_curve_element_HistoricalCurveElement || e instanceof video_element_VideoElement
                 || e instanceof weater_element_WeatherElement || e instanceof numerical_display_element_NumericalDisplayElement || e instanceof text_element_TextElement
-                || e instanceof air_quality_element_AirQualityElement || e instanceof switch_indicator_light_element_SwitchIndicatorLightElement || e instanceof scroll_alarm_element_ScrollAlarmElement) {
+                || e instanceof air_quality_element_AirQualityElement || e instanceof switch_indicator_light_element_SwitchIndicatorLightElement || e instanceof scroll_alarm_element_ScrollAlarmElement
+                || e instanceof alarm_element_AlarmElement) {
                 e.dispose();
             }
         });
@@ -44336,7 +44656,7 @@ class gui_view_GuiView {
                 }
             });
     }
-    popView(viewIndex, hostContainerId, el) {
+    popView(viewIndex, hostContainerId, el, triggerRect) {
         return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(Object(operators_["map"])(view => {
             if (!view.config || !view.config.length) {
                 throw new shared["a" /* ConfigIsEmptyError */]();
@@ -44357,6 +44677,10 @@ class gui_view_GuiView {
                 x = settings.popup.location.x;
                 y = settings.popup.location.y;
             }
+            else if (settings.popup.locationType === _tmp_model["ViewPopupLocationType"].NearButton && triggerRect) {
+                const hasShadow = settings.popup.backdropType === _tmp_model["ViewPopupBackdropType"].Shadow && !this.isMobileMode;
+                ({ x, y } = this.getNearButtonPosition(popView, triggerRect, hasShadow));
+            }
             else {
                 x = (this.rawWidth - popView.rawWidth) / 2;
                 y = (this.rawHeight - popView.rawHeight) / 2;
@@ -44376,6 +44700,73 @@ class gui_view_GuiView {
             this.element.appendChild(popView.element);
         }));
     }
+    /**
+     * 把屏幕像素矩形（如按钮的 getBoundingClientRect）换算为当前画面 SVG 坐标系下的矩形。
+     * 用 getScreenCTM 而不是简单的宽高比换算，因为画面容器宽高比与 rawWidth/rawHeight 不一致时
+     * SVG 会按 preserveAspectRatio 留白（letterbox），线性比例换算会有偏差。
+     */
+    toLocalRect(rect) {
+        const svgRoot = this.element;
+        const ctm = svgRoot.getScreenCTM && svgRoot.getScreenCTM();
+        if (ctm) {
+            const inverse = ctm.inverse();
+            const toLocal = (clientX, clientY) => {
+                const pt = svgRoot.createSVGPoint();
+                pt.x = clientX;
+                pt.y = clientY;
+                return pt.matrixTransform(inverse);
+            };
+            const topLeft = toLocal(rect.left, rect.top);
+            const bottomRight = toLocal(rect.right, rect.bottom);
+            return {
+                x: topLeft.x,
+                y: topLeft.y,
+                width: bottomRight.x - topLeft.x,
+                height: bottomRight.y - topLeft.y
+            };
+        }
+        const viewRect = this.element.getBoundingClientRect();
+        const scaleX = viewRect.width ? this.rawWidth / viewRect.width : 1;
+        const scaleY = viewRect.height ? this.rawHeight / viewRect.height : 1;
+        return {
+            x: (rect.left - viewRect.left) * scaleX,
+            y: (rect.top - viewRect.top) * scaleY,
+            width: rect.width * scaleX,
+            height: rect.height * scaleY
+        };
+    }
+    /**
+     * 按钮附近：按钮与弹出画面之间留缝隙，两侧都放得下时默认放右侧，放不下时放在放得下的一侧；
+     * 竖直方向默认与按钮顶部对齐，下方放不下时改为与按钮底部对齐；
+     * 左右两侧都放不下（弹窗比画面还宽）时直接退化为画面居中，不再跟随按钮
+     */
+    getNearButtonPosition(popView, triggerRect, hasShadow) {
+        const gap = 20;
+        const { x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight } = this.toLocalRect(triggerRect);
+        const rightX = buttonX + buttonWidth + gap;
+        const leftX = buttonX - gap - popView.rawWidth;
+        const fitsRight = rightX + popView.rawWidth <= this.rawWidth;
+        const fitsLeft = leftX >= 0;
+        let x;
+        let y;
+        if (!fitsRight && !fitsLeft) {
+            x = (this.rawWidth - popView.rawWidth) / 2;
+            y = (this.rawHeight - popView.rawHeight) / 2;
+        }
+        else {
+            x = fitsRight ? rightX : leftX;
+            const fitsBelow = buttonY + popView.rawHeight <= this.rawHeight;
+            y = fitsBelow ? buttonY : buttonY + buttonHeight - popView.rawHeight;
+            if (hasShadow) {
+                // 阴影会把可见内容整体右下偏移 SHADOW_INSET，这里反向补偏移让可见内容而不是容器本身对齐按钮
+                x -= gui_view_GuiView.SHADOW_INSET;
+                y -= gui_view_GuiView.SHADOW_INSET;
+            }
+        }
+        x = Math.max(0, Math.min(x, this.rawWidth - popView.rawWidth));
+        y = Math.max(0, Math.min(y, this.rawHeight - popView.rawHeight));
+        return { x, y };
+    }
     closeView() {
         if (!this.parentView) {
             return;
@@ -44413,10 +44804,11 @@ class gui_view_GuiView {
         if (!container) {
             return;
         }
+        const inset = gui_view_GuiView.SHADOW_INSET;
         container.setAttribute('filter', `url(#${filterId})`);
-        container.setAttribute('x', '6');
-        container.setAttribute('y', '6');
-        $(this.element).children('g').attr('transform', 'matrix(1, 0, 0, 1, 6, 6)');
+        container.setAttribute('x', String(inset));
+        container.setAttribute('y', String(inset));
+        $(this.element).children('g').attr('transform', `matrix(1, 0, 0, 1, ${inset}, ${inset})`);
     }
     hideMusk() {
         if (this.muskElement) {
@@ -44458,6 +44850,8 @@ class gui_view_GuiView {
         }
     }
 }
+/** showShadow() 给阴影留白，内容整体右下偏移的量，"按钮附近"定位需要据此修正才能让可见内容与按钮对齐 */
+gui_view_GuiView.SHADOW_INSET = 5;
 
 
 /***/ }),
@@ -44553,7 +44947,7 @@ var settings = __webpack_require__(15);
 var logger = __webpack_require__(8);
 
 // EXTERNAL MODULE: ./.tmp/shared/index.ts + 3 modules
-var shared = __webpack_require__(5);
+var shared = __webpack_require__(6);
 
 // EXTERNAL MODULE: ./.tmp/view/view.service.ts
 var view_service = __webpack_require__(27);
@@ -66447,6 +66841,7 @@ var ViewPopupLocationType;
 (function (ViewPopupLocationType) {
     ViewPopupLocationType[ViewPopupLocationType["Center"] = 0] = "Center";
     ViewPopupLocationType[ViewPopupLocationType["Custom"] = 1] = "Custom";
+    ViewPopupLocationType[ViewPopupLocationType["NearButton"] = 2] = "NearButton";
 })(ViewPopupLocationType || (ViewPopupLocationType = {}));
 
 // CONCATENATED MODULE: ./.tmp/model/settings/popup/view-popup-backdrop-type.ts
@@ -66560,7 +66955,7 @@ var Subject = __webpack_require__(39);
 var operators_ = __webpack_require__(17);
 
 // EXTERNAL MODULE: ./.tmp/config/index.ts + 12 modules
-var _tmp_config = __webpack_require__(6);
+var _tmp_config = __webpack_require__(5);
 
 // EXTERNAL MODULE: ./.tmp/core/stringifying-map.ts
 var stringifying_map = __webpack_require__(30);
@@ -87514,7 +87909,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(43);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StringifyingMap", function() { return _core__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
+/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ConfigStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["b"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GuiFeatureConfig", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["j"]; });
@@ -87574,7 +87969,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _security__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(77);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SecurityChecker", function() { return _security__WEBPACK_IMPORTED_MODULE_8__["a"]; });
 
-/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5);
+/* harmony import */ var _shared__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(6);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Disposable", function() { return _shared__WEBPACK_IMPORTED_MODULE_9__["b"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ConfigIsEmptyError", function() { return _shared__WEBPACK_IMPORTED_MODULE_9__["a"]; });