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

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

@@ -29,6 +29,12 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private totalCount;
     private pageSize;
     private getAlarmDataId;
+    private readonly maxVisibleRows;
+    private scrollIntervalId;
+    private scrollContainer;
+    private hoverTarget;
+    private rowHeight;
+    private isDisposed;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string, systemTextLibraryService?: SystemTextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
     dispose(): void;
     /**
@@ -54,7 +60,21 @@ export declare class AlarmElement extends ConditionalDisplayElement {
      */
     private getTimePeriodText;
     private getAlarmData;
+    private refreshCurrentPageData;
+    private updateTableContent;
+    private getIconScale;
     private renderElement;
+    private buildHeaderRow;
+    private buildDataRow;
+    private renderPlainTable;
+    private renderScrollableTable;
+    private bindScrollHoverEvents;
+    private unbindScrollHoverEvents;
+    private readonly handleScrollMouseEnter;
+    private readonly handleScrollMouseLeave;
+    private startAutoScroll;
+    private scrollOneRow;
+    private autoNextPage;
     private renderOperationArea;
     private updateTimeRange;
     private updateQueryTimeRange;

package/elements/alarm/alarm-element.js

@@ -37,6 +37,15 @@ export class AlarmElement extends ConditionalDisplayElement {
         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_SERVICE_TOKEN);
@@ -51,7 +60,14 @@ export class AlarmElement extends ConditionalDisplayElement {
             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);
             }
@@ -59,7 +75,14 @@ export class AlarmElement extends ConditionalDisplayElement {
                 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;
                         }
                     });
@@ -74,10 +97,11 @@ export class AlarmElement extends ConditionalDisplayElement {
         }
     }
     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();
@@ -199,15 +223,21 @@ export class AlarmElement extends ConditionalDisplayElement {
         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 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 => [
@@ -223,6 +253,8 @@ export class AlarmElement extends ConditionalDisplayElement {
             else {
                 const input = new 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;
@@ -243,16 +275,124 @@ export class AlarmElement extends ConditionalDisplayElement {
             }
         }, 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 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 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 ';
@@ -277,56 +417,34 @@ export class AlarmElement extends ConditionalDisplayElement {
                 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';
@@ -335,24 +453,144 @@ export class AlarmElement extends ConditionalDisplayElement {
                         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;
+    }
+    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) {
+    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();
@@ -360,24 +598,28 @@ export class AlarmElement extends ConditionalDisplayElement {
             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();

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":55,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":56,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":57,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":58,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":59,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":60,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":62,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":63,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":64,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getHeaderTextByColumn":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":61,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":62,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":63,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":64,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":65,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":66,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":68,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":69,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":70,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getHeaderTextByColumn":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"refreshCurrentPageData":[{"__symbolic":"method"}],"updateTableContent":[{"__symbolic":"method"}],"getIconScale":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"buildHeaderRow":[{"__symbolic":"method"}],"buildDataRow":[{"__symbolic":"method"}],"renderPlainTable":[{"__symbolic":"method"}],"renderScrollableTable":[{"__symbolic":"method"}],"bindScrollHoverEvents":[{"__symbolic":"method"}],"unbindScrollHoverEvents":[{"__symbolic":"method"}],"startAutoScroll":[{"__symbolic":"method"}],"scrollOneRow":[{"__symbolic":"method"}],"autoNextPage":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

package/elements/base/state-control-element.d.ts

@@ -14,6 +14,16 @@ export declare abstract class StateControlElement extends ConditionalDynamicDisp
     currentRect: JQuery;
     preState: State;
     constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    /**
+     * 子类可覆盖此方法提供元件当前大小和初始大小，用于状态图标缩放计算
+     * @returns {{ width: number, height: number, initWidth?: number, initHeight?: number }}
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
     initState(): void;
     updateElementStates(newElementStates: VariableState[]): void;
     addElementState(newElementState: VariableState): void;

package/elements/base/state-control-element.js

@@ -9,6 +9,13 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
         this.isEnable = true;
         this.elementStates = [];
     }
+    /**
+     * 子类可覆盖此方法提供元件当前大小和初始大小，用于状态图标缩放计算
+     * @returns {{ width: number, height: number, initWidth?: number, initHeight?: number }}
+     */
+    getElementSizeForIconScale() {
+        return null;
+    }
     initState() {
         if (!this.elementStates.length) {
             return;
@@ -159,7 +166,18 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
         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);
@@ -170,8 +188,8 @@ export class StateControlElement extends ConditionalDynamicDisplayElement {
             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);

package/elements/base/state-control-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71},{"__symbolic":"reference","name":"string"}]}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71},{"__symbolic":"reference","name":"string"}]}],"getElementSizeForIconScale":[{"__symbolic":"method"}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]

package/elements/character-display/character-display-element.d.ts

@@ -32,4 +32,13 @@ export declare class CharacterDisplayElement extends ReadableElement {
     private doWriteCharacterValue;
     private recordOperation;
     private changeGraph;
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
 }