@flexem/fc-gui 3.0.0-alpha.16 → 3.0.0-alpha.160

package/elements/historical-curve/historical-curve.element.js

@@ -1,364 +1,990 @@
-import * as d3 from 'd3';
-import { each, first, last } from 'lodash';
-import * as moment from 'moment';
-import * as nv from 'nvd3';
-import { GetHistoryDataArgs } from '../../config';
-import { HistoricalCurveTimeRange } from '../../config/history-data/historical-curve.time-range';
-import { LOCALIZATION } from '../../localization';
-import { ConditionalDisplayElement } from '../base/conditional-display-element';
-import { HistoricalCurveElementStatus } from './historical-curve-element-status';
-import { LOGGER_SERVICE_TOKEN } from '../../logger';
-import { GlobalSettings, DisplayMode } from '../../settings';
-import { CurveType } from '../../model/historical-curve/curve-type';
-export class HistoricalCurveElement extends ConditionalDisplayElement {
-    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, historyDataStore, signalRAppId) {
-        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
-        this.historyDataStore = historyDataStore;
-        this.displayOption = {
-            dataLimit: 500,
-            dataZoomHeight: 32,
-            marginLeft: 40,
-            marginRight: 20,
-            mobileMinWidth: 450,
-            operationAreaHeight: 32,
-            operationAreaMarginTop: 10,
-            operationSelectFontSize: '16px',
-            operationButtonWidth: 24,
-            operationButtonHeight: 24,
-            operationButtonMargin: 4
-        };
-        this.elementStatus = HistoricalCurveElementStatus.Loading;
-        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
-        this.localization = injector.get(LOCALIZATION);
-        this.timePeriods = this.getValidTimePeriods();
-        this.updateTimeRange(this.model.displaySetting.displayTimePeriod);
-        this.refreshIntervalId = setInterval(() => {
-            this.loadFirstPage();
-            this.logger.debug(`[GUI]Refresh Histoical Curve:${d3.time.format('%x %X')(new Date())}`);
-        }, this.model.displaySetting.refreshInterval * 1000);
-        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
-        if (this.isMobileMode) {
-            this.displayOption.operationAreaMarginTop = 20;
-            if (this.model.displaySetting.size.width >= this.displayOption.mobileMinWidth) {
-                this.displayOption.operationAreaHeight = 68;
-                this.displayOption.operationSelectFontSize = '24px';
-                this.displayOption.operationButtonWidth = 60;
-                this.displayOption.operationButtonHeight = 60;
-                this.displayOption.operationButtonMargin = 6;
-            }
-        }
-        this.loadFirstPage();
-    }
-    dispose() {
-        clearInterval(this.refreshIntervalId);
-        if (this.chartElement) {
-            this.chartElement.tooltip.hidden(true);
-        }
-        this.logger.debug(`[GUI]Dispose Histoical Curve Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
-    }
-    getValidTimePeriods() {
-        const timePeriods = new Array();
-        timePeriods.push({ key: 1, name: this.localization.lastOneHour });
-        timePeriods.push({ key: 2, name: this.localization.lastTwentyFourHours });
-        timePeriods.push({ key: 3, name: this.localization.lastSevenDays });
-        timePeriods.push({ key: 4, name: this.localization.lastThirtyDays });
-        timePeriods.push({ key: 5, name: this.localization.lastOneYear });
-        return timePeriods;
-    }
-    updateTimeRange(timePeriodType) {
-        this.currentTimePeriod = +timePeriodType;
-        this.updateQueryTimeRange();
-    }
-    updateQueryTimeRange() {
-        this.endTime = moment();
-        switch (this.currentTimePeriod) {
-            case 1:
-                this.startTime = moment().subtract(1, 'hours');
-                break;
-            case 3:
-                this.startTime = moment().subtract(7, 'days');
-                break;
-            case 4:
-                this.startTime = moment().subtract(30, 'days');
-                break;
-            case 5:
-                this.startTime = moment().subtract(1, 'years');
-                break;
-            default:
-                this.startTime = moment().subtract(1, 'days');
-        }
-    }
-    reRenderElement(startTime, endTime, limit, rangeType) {
-        this.rootElement.selectAll('*').remove();
-        this.chartElement = null;
-        this.renderElement(startTime, endTime, limit, rangeType);
-    }
-    renderElement(startTime, endTime, limit, rangeType) {
-        if (!this.model.dataSetting) {
-            return;
-        }
-        const dataItemName = this.model.dataSetting.dataName;
-        const dataSourceCode = this.model.dataSetting.dataSourceCode;
-        const channelNames = this.model.dataSetting.channels.map(c => c.name);
-        this.updateElementStatus(HistoricalCurveElementStatus.Loading);
-        const input = new GetHistoryDataArgs(dataSourceCode, dataItemName, channelNames, startTime, endTime, limit, rangeType);
-        this.historyDataStore.getHistoryData(input).subscribe(result => {
-            if (result.error) {
-                this.updateElementStatus(HistoricalCurveElementStatus.LoadFailed, result.error);
-            }
-            else {
-                this.clearStatus();
-                if (result.isUnbind) {
-                    this.updateElementStatus(HistoricalCurveElementStatus.Unbound);
-                }
-                else {
-                    this.updateElementStatus(HistoricalCurveElementStatus.Normal);
-                }
-                if (result.values.length) {
-                    this.currentStartTime = moment(first(result.values).time);
-                    this.currentEndTime = moment(last(result.values).time);
-                }
-                this.chartElement = this.renderChart(result.values);
-            }
-        });
-    }
-    renderChart(result) {
-        const chartWidth = this.model.displaySetting.size.width;
-        const chartHeight = this.model.displaySetting.size.height - this.displayOption.operationAreaHeight - this.displayOption.operationAreaMarginTop;
-        const data = new Array();
-        each(this.model.dataSetting.channels, (channel, key) => {
-            const values = new Array();
-            each(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
-            data.push({ key: channel.name, area: channel.projectEnabled, values: values });
-        });
-        nv.addGraph(() => {
-            if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
-                return this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
-            }
-            else {
-                return this.getLineChart(chartWidth, chartHeight, data);
-            }
-        });
-    }
-    getLineChart(chartWidth, chartHeight, data) {
-        const chart = nv.models.lineChart().showLegend(true)
-            .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
-            .noData(this.localization.chartNoData);
-        if (!this.isMobileMode) {
-            chart.focusEnable(true);
-            chart.focus.margin({ top: 10, right: 0, bottom: 0, left: 0 });
-            chart.focus.height(40);
-            chart.focus.showXAxis(false);
-        }
-        this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        this.renderOperationArea(chartWidth, chartHeight);
-        return chart;
-    }
-    getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
-        const chart = nv.models.multiBarWithFocusChart()
-            .margin({
-            top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight
-        })
-            .controlLabels({
-            grouped: this.localization.grouped, stacked: this.localization.stacked
-        })
-            .noData(this.localization.chartNoData);
-        if (this.model.displaySetting.curveType === CurveType.BarStack) {
-            chart.stacked(true);
-            chart.multibar.stacked(true);
-            chart.multibar2.stacked(true);
-        }
-        if (!this.isMobileMode) {
-            chart.focusEnable(true);
-            chart.focusShowAxisX(false);
-        }
-        chart.xAxis.tickFormat(d => this.timeFormat(d, '%x %X'));
-        this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        this.renderOperationArea(chartWidth, chartHeight);
-        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)');
-        focusContext.select('.nv-x.nv-brush').attr('transform', 'translate(0,30)');
-        if (!this.model.displaySetting.showAxis) {
-            this.rootElement.select('.tick.zero').style('display', 'none');
-            this.rootElement.select('.nv-x.nv-axis.nvd3-svg').style('display', 'none');
-            this.rootElement.select('.nv-y.nv-axis.nvd3-svg').style('display', 'none');
-        }
-        chart.update();
-        return chart;
-    }
-    renderCommonProperty(chart, chartWidth, chartHeight, data) {
-        chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
-        if (this.model.displaySetting.showAxis) {
-            chart.xAxis.showMaxMin(true).tickFormat(d => this.timeFormat(d, '%X'));
-            if (this.model.displaySetting.axisSetting) {
-                if (this.model.displaySetting.axisSetting.showAxisLabel && this.model.displaySetting.axisSetting.axisLabelFont) {
-                    chart.xAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize);
-                    chart.yAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize).tickFormat(d => +d3.format('.9g')(d));
-                }
-                else {
-                    chart.xAxis.tickFormat(() => '');
-                    chart.yAxis.tickFormat(() => '');
-                }
-            }
-        }
-        else {
-            chart.showXAxis(false);
-            chart.showYAxis(false);
-        }
-        chart.width(chartWidth);
-        chart.height(chartHeight);
-        chart.color(this.model.dataSetting.channels.map(c => c.connectorColor));
-        this.rootElement.append('g').datum(data).call(chart);
-        this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
-        nv.utils.windowResize(() => {
-            chart.update();
-            this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
-        });
-        this.rootElement.selectAll('.domain').style('stroke-opacity', 1);
-        if (this.model.displaySetting.showAxis && this.model.displaySetting.axisSetting) {
-            const axisColor = this.model.displaySetting.axisSetting.axisColor;
-            this.rootElement.selectAll('.domain').style('stroke', axisColor);
-            if (this.model.displaySetting.axisSetting.showAxisLabel) {
-                const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
-                this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
-            }
-        }
-    }
-    renderOperationArea(chartWidth, chartHeight) {
-        const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
-            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
-            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
-        const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
-            .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
-            const displayTimePeriod = this.rootElement.select('select').property('value');
-            this.updateTimeRange(displayTimePeriod);
-            this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
-        });
-        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';
-        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/last_page.svg)')
-            .on('click', () => { this.loadLastPage(); });
-        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/next_page.svg)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .on('click', () => { this.loadNextPage(); });
-        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/previous_page.svg)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .on('click', () => { this.loadPreviousPage(); });
-        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/first_page.svg)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .on('click', () => { this.loadFirstPage(); });
-    }
-    timeFormat(datetime, specifier) {
-        return d3.time.format(specifier)(new Date(datetime));
-    }
-    loadFirstPage() {
-        this.updateQueryTimeRange();
-        this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
-    }
-    loadNextPage() {
-        this.reRenderElement(this.currentEndTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndClose);
-    }
-    loadPreviousPage() {
-        this.reRenderElement(this.startTime, this.currentStartTime, -this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginCloseEndOpen);
-    }
-    loadLastPage() {
-        this.updateQueryTimeRange();
-        this.reRenderElement(this.startTime, this.endTime, -this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
-    }
-    initElementStatus() {
-        if (this.model.dataSetting && null != this.model.dataSetting.dataSourceCode) {
-            this.updateElementStatus(HistoricalCurveElementStatus.Loading);
-        }
-    }
-    updateElementStatus(status, error) {
-        switch (status) {
-            case HistoricalCurveElementStatus.Normal:
-                if (this.elementStatus !== HistoricalCurveElementStatus.Normal) {
-                    this.elementStatus = HistoricalCurveElementStatus.Normal;
-                }
-                break;
-            case HistoricalCurveElementStatus.Unbound:
-                this.elementStatus = HistoricalCurveElementStatus.Unbound;
-                this.setStatusAsUnbound();
-                break;
-            case HistoricalCurveElementStatus.Loading:
-                if (this.elementStatus !== HistoricalCurveElementStatus.Unbound) {
-                    this.elementStatus = HistoricalCurveElementStatus.Loading;
-                    this.setStatusAsLoading();
-                }
-                break;
-            case HistoricalCurveElementStatus.LoadFailed:
-                if (this.elementStatus !== HistoricalCurveElementStatus.Unbound) {
-                    this.elementStatus = HistoricalCurveElementStatus.LoadFailed;
-                    this.setStatusAsLoadFailed(error ? error : this.localization.abnormal);
-                }
-                break;
-            default:
-                this.logger.error(`Invalid HistoricalCurveElementStatus:${status}`);
-                break;
-        }
-    }
-    setStatusAsUnbound() {
-        this.renderStatus('assets/img/unbind.svg', this.localization.unbind, '#586e7c');
-    }
-    setStatusAsLoading() {
-        this.renderStatus('assets/img/loading.svg', this.localization.loading, '#226abc');
-    }
-    setStatusAsLoadFailed(error) {
-        this.logger.error(`[GUI]Failed to load historical curve:${error}`);
-        this.renderStatus('assets/img/abnormal.svg', error, '#f6a520');
-    }
-    renderStatus(icon, tip, stroke) {
-        if (this.elementStatus === HistoricalCurveElementStatus.Normal) {
-            this.clearStatus();
-            return;
-        }
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
-            .attr('width', this.model.displaySetting.size.width)
-            .attr('height', this.model.displaySetting.size.height);
-        const document = this.$element[0].ownerDocument;
-        const currentRect = this.$element.find('rect#StateFrame').first();
-        if (!currentRect.length) {
-            return;
-        }
-        this.$element.find('image#StateImage').remove();
-        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-        if (imgObj) {
-            let x = Number(currentRect[0].getAttribute('width')) - 20;
-            const currentRectX = currentRect[0].getAttribute('x');
-            if (currentRectX !== null) {
-                x += Number(currentRectX);
-            }
-            currentRect[0].setAttribute('stroke', stroke);
-            currentRect[0].setAttribute('stroke-opacity', '0.5');
-            imgObj.href.baseVal = icon;
-            imgObj.setAttributeNS(null, 'id', 'StateImage');
-            imgObj.setAttributeNS(null, 'x', x.toString());
-            imgObj.setAttributeNS(null, 'y', '0');
-            imgObj.setAttributeNS(null, 'height', '20px');
-            imgObj.setAttributeNS(null, 'width', '20px');
-            const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-            const text = document.createTextNode(tip);
-            titleElement.appendChild(text);
-            imgObj.appendChild(titleElement);
-            this.$element.append(imgObj);
-        }
-    }
-    clearStatus() {
-        const currentRect = this.$element.find('rect#StateFrame').first();
-        if (!currentRect.length) {
-            return;
-        }
-        const stroke = currentRect[0].getAttribute('stroke');
-        if (stroke) {
-            currentRect[0].removeAttribute('stroke');
-        }
-        this.$element.find('image#StateImage').remove();
-    }
-}
+import * as d3 from 'd3';
+import { each, first, last } from 'lodash';
+import * as moment from 'moment';
+import * as nv from 'nvd3';
+import { GetHistoryDataArgs } from '../../config';
+import { HistoricalCurveTimeRange } from '../../config/history-data/historical-curve.time-range';
+import { LOCALIZATION } from '../../localization';
+import { SYSTEM_TEXT_LIBRARY_TYPES, TIME_PERIOD_KEYS } from '../../service';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { HistoricalCurveElementStatus } from './historical-curve-element-status';
+import { LOGGER_SERVICE_TOKEN } from '../../logger';
+import { GlobalSettings, DisplayMode } from '../../settings';
+import { CurveType } from '../../model/historical-curve/curve-type';
+import { AxisRangeType } from '../../model/historical-curve/historical-curve-axis-settings';
+export class HistoricalCurveElement extends ConditionalDisplayElement {
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, historyDataStore, signalRAppId, systemTextLibraryService, languageService, guiContext) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.historyDataStore = historyDataStore;
+        this.systemTextLibraryService = systemTextLibraryService;
+        this.languageService = languageService;
+        this.guiContext = guiContext;
+        this.displayOption = {
+            dataLimit: 500,
+            dataZoomHeight: 32,
+            marginLeft: 40,
+            marginRight: 20,
+            mobileMinWidth: 450,
+            operationAreaHeight: 32,
+            operationAreaMarginTop: 25,
+            operationSelectFontSize: '16px',
+            operationButtonWidth: 24,
+            operationButtonHeight: 24,
+            operationButtonMargin: 4
+        };
+        this.customStartTime = null;
+        this.customEndTime = null;
+        this.elementStatus = HistoricalCurveElementStatus.Loading;
+        this.data = [];
+        this.needResize = true;
+        this.dropdownListEl = null;
+        this.dropdownTriggerEl = null;
+        this.setNeedResize = () => {
+            this.needResize = false;
+            setTimeout(() => this.needResize = true, 500);
+        };
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.localization = injector.get(LOCALIZATION);
+        this.updateTimeRange(this.model.displaySetting.displayTimePeriod);
+        this.refreshIntervalId = setInterval(() => {
+            this.loadFirstPage();
+            this.logger.debug(`[GUI]Refresh Histoical Curve:${d3.time.format('%x %X')(new Date())}`);
+        }, this.model.displaySetting.refreshInterval * 1000);
+        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
+        if (this.isMobileMode) {
+            this.displayOption.operationAreaMarginTop = 35;
+            if (this.model.displaySetting.size.width >= this.displayOption.mobileMinWidth) {
+                this.displayOption.operationAreaHeight = 68;
+                this.displayOption.operationSelectFontSize = '24px';
+                this.displayOption.operationButtonWidth = 60;
+                this.displayOption.operationButtonHeight = 60;
+                this.displayOption.operationButtonMargin = 6;
+            }
+        }
+        // 初始化时间段数据（此时文本库可能未加载，先填充空文本占位）
+        this.timePeriods = this.getValidTimePeriods();
+        this.loadFirstPage();
+        this.initKeyboardListener();
+        // 订阅语种变化事件 和 文本库缓存更新事件
+        this.subscribeLanguageChange();
+    }
+    dispose() {
+        clearInterval(this.refreshIntervalId);
+        if (this.chartElement) {
+            this.chartElement.tooltip.hidden(true);
+        }
+        if (this.resizeEventListener) {
+            this.resizeEventListener.clear();
+        }
+        if (this.isAndroid) {
+            window.removeEventListener('native.keyboardshow', this.setNeedResize);
+            window.removeEventListener('native.keyboardhide', this.setNeedResize);
+        }
+        // 取消语种变化订阅
+        if (this.languageChangeSubscription) {
+            this.languageChangeSubscription.unsubscribe();
+            this.languageChangeSubscription = undefined;
+        }
+        this.logger.debug(`[GUI]Dispose Histoical Curve Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
+    }
+    initKeyboardListener() {
+        this.isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        if (this.isAndroid) {
+            window.addEventListener('native.keyboardshow', this.setNeedResize);
+            window.addEventListener('native.keyboardhide', this.setNeedResize);
+        }
+    }
+    /**
+     * 订阅语种变化事件
+     */
+    subscribeLanguageChange() {
+        var _a;
+        if (this.guiContext && this.guiContext.languageChanged$) {
+            this.languageChangeSubscription = this.guiContext.languageChanged$.subscribe(() => {
+                // 只更新时间段选择器的文案，不重新查询数据
+                this.updateLanguageTexts();
+            });
+        }
+        // 订阅文本库缓存更新事件，解决首次加载时文本库未就绪导致下拉选项为空的问题
+        if ((_a = this.systemTextLibraryService) === null || _a === void 0 ? void 0 : _a.cacheUpdated) {
+            const cacheSubscription = this.systemTextLibraryService.cacheUpdated.subscribe(() => {
+                this.updateLanguageTexts();
+            });
+            if (this.languageChangeSubscription) {
+                this.languageChangeSubscription.add(cacheSubscription);
+            }
+            else {
+                this.languageChangeSubscription = cacheSubscription;
+            }
+        }
+    }
+    /**
+     * 更新语种相关的文案（时间段选择器）
+     */
+    updateLanguageTexts() {
+        const updatedTimePeriods = this.getValidTimePeriods();
+        this.timePeriods = updatedTimePeriods;
+        // 更新下拉列表各选项文字
+        if (this.dropdownListEl) {
+            const items = this.dropdownListEl.querySelectorAll('.hc-dropdown-item');
+            items.forEach((item, i) => {
+                if (i < updatedTimePeriods.length) {
+                    item.textContent = updatedTimePeriods[i].name;
+                }
+            });
+            // 文字更新后重新测量宽度，修正首次加载时文字为空导致宽度过小的问题
+            const prevDisplay = this.dropdownListEl.style.display;
+            const prevVisibility = this.dropdownListEl.style.visibility;
+            this.dropdownListEl.style.display = 'block';
+            this.dropdownListEl.style.visibility = 'hidden';
+            this.dropdownListEl.style.width = '';
+            const newWidth = this.dropdownListEl.offsetWidth;
+            this.dropdownListEl.style.display = prevDisplay;
+            this.dropdownListEl.style.visibility = prevVisibility;
+            this.dropdownListEl.style.width = newWidth + 'px';
+            if (this.dropdownTriggerEl) {
+                this.dropdownTriggerEl.style.width = newWidth + 'px';
+            }
+        }
+        // 更新触发按钮文字（显示当前选中项的最新语言文案）
+        if (this.dropdownTriggerEl) {
+            const selected = updatedTimePeriods.find(p => p.key === Number(this.currentTimePeriod));
+            if (selected) {
+                const textNode = Array.from(this.dropdownTriggerEl.childNodes).find(n => n.nodeType === Node.TEXT_NODE);
+                if (textNode) {
+                    textNode.textContent = selected.name;
+                }
+                else {
+                    this.dropdownTriggerEl.insertBefore(document.createTextNode(selected.name), this.dropdownTriggerEl.firstChild);
+                }
+            }
+        }
+    }
+    /**
+     * 获取当前语种的 culture 代码
+     */
+    getCurrentCulture() {
+        var _a, _b, _c, _d, _e, _f;
+        // 获取当前语种ID
+        const currentLanguageId = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getCurrentLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+        // 确定要使用的语种代码（culture）
+        const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+        if (currentLanguageId === null || currentLanguageId === undefined) {
+            // 设备未设置当前语种，使用默认语种
+            return defaultLanguage;
+        }
+        else {
+            // 设备已设置当前语种，获取对应的语种代码
+            const currentLanguage = (_f = (_e = this.guiContext) === null || _e === void 0 ? void 0 : _e.getLanguageCultureById) === null || _f === void 0 ? void 0 : _f.call(_e, currentLanguageId);
+            if (currentLanguage) {
+                return currentLanguage;
+            }
+            else {
+                // 无法获取语种代码，使用默认语种
+                return defaultLanguage;
+            }
+        }
+    }
+    getValidTimePeriods() {
+        const timePeriods = new Array();
+        timePeriods.push({ key: 6, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_THIRTY_MINUTES) });
+        timePeriods.push({ key: 1, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_ONE_HOUR) });
+        timePeriods.push({ key: 7, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_EIGHT_HOURS) });
+        timePeriods.push({ key: 2, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_TWENTY_FOUR_HOURS) });
+        timePeriods.push({ key: 3, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_SEVEN_DAYS) });
+        timePeriods.push({ key: 4, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_THIRTY_DAYS) });
+        timePeriods.push({ key: 5, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_ONE_YEAR) });
+        timePeriods.push({ key: 8, name: this.getTimePeriodText(TIME_PERIOD_KEYS.CUSTOM, this.localization.customTimeRange) });
+        return timePeriods;
+    }
+    /**
+     * 获取时间段文案（从系统文本库获取多语种翻译，fallback 到 localization）
+     */
+    getTimePeriodText(textKey, fallback = '') {
+        const currentCulture = this.getCurrentCulture();
+        const systemType = SYSTEM_TEXT_LIBRARY_TYPES.COMPONENT_BUILTIN;
+        if (this.systemTextLibraryService) {
+            const translation = this.systemTextLibraryService.getSystemTextValue(systemType, textKey, currentCulture);
+            if (translation) {
+                return translation;
+            }
+        }
+        return fallback;
+    }
+    updateTimeRange(timePeriodType) {
+        this.currentTimePeriod = +timePeriodType;
+        this.updateQueryTimeRange();
+    }
+    updateQueryTimeRange() {
+        if (this.currentTimePeriod === 8) {
+            if (this.customStartTime && this.customEndTime) {
+                this.startTime = this.customStartTime.clone();
+                this.endTime = this.customEndTime.clone();
+            }
+            return;
+        }
+        this.endTime = moment();
+        switch (this.currentTimePeriod) {
+            case 1:
+                this.startTime = moment().subtract(1, 'hours');
+                break;
+            case 3:
+                this.startTime = moment().subtract(7, 'days');
+                break;
+            case 4:
+                this.startTime = moment().subtract(30, 'days');
+                break;
+            case 5:
+                this.startTime = moment().subtract(1, 'years');
+                break;
+            case 6:
+                this.startTime = moment().subtract(30, 'minutes');
+                break;
+            case 7:
+                this.startTime = moment().subtract(8, 'hours');
+                break;
+            default:
+                this.startTime = moment().subtract(1, 'days');
+        }
+    }
+    reRenderElement(startTime, endTime, limit, rangeType) {
+        // 清理图表实例
+        if (this.chartElement) {
+            // 隐藏 tooltip
+            if (this.chartElement.tooltip) {
+                this.chartElement.tooltip.hidden(true);
+            }
+            // 清理图表引用
+            this.chartElement = null;
+        }
+        // 清除 DOM 元素
+        this.rootElement.selectAll('*').remove();
+        // 重新渲染
+        this.renderElement(startTime, endTime, limit, rangeType);
+    }
+    renderElement(startTime, endTime, limit, rangeType) {
+        if (!this.model.dataSetting) {
+            return;
+        }
+        const dataItemName = this.model.dataSetting.dataName;
+        const dataSourceCode = this.model.dataSetting.dataSourceCode;
+        const channelNames = this.model.dataSetting.channels.map(c => c.name);
+        this.updateElementStatus(HistoricalCurveElementStatus.Loading);
+        const input = new GetHistoryDataArgs(dataSourceCode, dataItemName, channelNames, startTime, endTime, limit, rangeType);
+        this.historyDataStore.getHistoryData(input).subscribe(result => {
+            if (result.error) {
+                this.updateElementStatus(HistoricalCurveElementStatus.LoadFailed, result.error);
+            }
+            else {
+                this.clearStatus();
+                if (result.isUnbind) {
+                    this.updateElementStatus(HistoricalCurveElementStatus.Unbound);
+                }
+                else {
+                    this.updateElementStatus(HistoricalCurveElementStatus.Normal);
+                }
+                if (result.values.length) {
+                    this.currentStartTime = moment(first(result.values).time);
+                    this.currentEndTime = moment(last(result.values).time);
+                }
+                this.chartElement = this.renderChart(result.values);
+            }
+        });
+    }
+    setupTooltipAutoHide(chart) {
+        const chartContainer = this.rootElement.select('.nv-focus').node();
+        if (!chartContainer || !chart)
+            return;
+        let timeoutId;
+        // 鼠标移入图表时显示 tooltip
+        chartContainer.addEventListener('mouseover', () => {
+            hideTooltipAfterDelay();
+        });
+        const clearTooltipTimeout = () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        };
+        const hideTooltipAfterDelay = () => {
+            clearTooltipTimeout();
+            timeoutId = setTimeout(() => {
+                chart.tooltip.hidden(true);
+            }, 2000); // 2秒延迟
+        };
+    }
+    renderChart(result) {
+        const chartWidth = this.model.displaySetting.size.width;
+        const chartHeight = this.model.displaySetting.size.height - this.displayOption.operationAreaHeight - this.displayOption.operationAreaMarginTop;
+        const data = new Array();
+        each(this.model.dataSetting.channels, (channel, key) => {
+            const values = new Array();
+            each(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
+            data.push({ key: channel.name, area: channel.projectEnabled, values: values });
+        });
+        this.data = data;
+        let chart;
+        if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
+            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
+        }
+        else {
+            chart = this.getLineChart(chartWidth, chartHeight, data);
+        }
+        // 设置 tooltip 自动隐藏逻辑
+        this.setupTooltipAutoHide(chart);
+        return chart;
+    }
+    initPoint() {
+        try {
+            const legendList = this.$element
+                .find('.nv-legend')
+                .find('.nv-series');
+            let hiddenCount = 0;
+            for (let i = 0; i < this.data.length; i++) {
+                const channel = this.model.dataSetting.channels[i];
+                if (legendList.eq(i).children().eq(0).css('fill-opacity') === '1') {
+                    const pointList = this.$element
+                        .find('.nv-scatterWrap')
+                        .find('.nv-series-' + (i - hiddenCount))
+                        .find('.nv-point');
+                    if (pointList && pointList.length) {
+                        for (let j = 0; j < pointList.length; j++) {
+                            const point = pointList.eq(j);
+                            const previousPoint = pointList.eq(j - 1);
+                            if (j && point.attr('transform').split(',')[1] !== previousPoint.attr('transform').split(',')[1]) {
+                                if (channel.enablePoint && channel.pointColor) {
+                                    const pointStyle = {
+                                        'stroke-opacity': 1,
+                                        'stroke-width': '2px',
+                                        'stroke': channel.pointColor,
+                                        'fill-opacity': 1,
+                                        'fill': channel.pointColor
+                                    };
+                                    point.addClass('nv-mark-point');
+                                    point.css(pointStyle);
+                                    previousPoint.addClass('nv-mark-point');
+                                    previousPoint.css(pointStyle);
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    hiddenCount++;
+                }
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+    getLineChart(chartWidth, chartHeight, data) {
+        const chart = nv.models.lineChart().showLegend(true)
+            .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
+            .noData(this.localization.chartNoData);
+        if (this.model.displaySetting.axisSetting.yAxisRangeType === AxisRangeType.Custom) {
+            chart.yDomain([this.model.displaySetting.axisSetting.yAxisMin, this.model.displaySetting.axisSetting.yAxisMax]);
+        }
+        if (!this.isMobileMode) {
+            chart.focusEnable(true);
+            chart.focus.margin({ top: 10, right: 0, bottom: 0, left: 0 });
+            chart.focus.height(40);
+            chart.focus.showXAxis(false);
+        }
+        this.renderCommonProperty(chart, chartWidth, chartHeight, data);
+        this.renderOperationArea(chartWidth, chartHeight);
+        this.initPoint();
+        chart.legend.dispatch.on('legendClick', () => {
+            setTimeout(() => {
+                this.$element.find('.nv-mark-point').css({
+                    'stroke-opacity': 0,
+                    'stroke-width': 0,
+                    'stroke': 'unset',
+                    'fill-opacity': 0,
+                    'fill': 'unset'
+                }).removeClass('nv-mark-point');
+                this.initPoint();
+            }, 1);
+        });
+        return chart;
+    }
+    getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
+        const chart = nv.models.multiBarWithFocusChart()
+            .margin({
+            top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight
+        })
+            .controlLabels({
+            grouped: this.localization.grouped, stacked: this.localization.stacked
+        })
+            .noData(this.localization.chartNoData);
+        if (this.model.displaySetting.curveType === CurveType.BarStack) {
+            chart.stacked(true);
+            chart.multibar.stacked(true);
+            chart.multibar2.stacked(true);
+        }
+        if (this.model.displaySetting.axisSetting.yAxisRangeType === AxisRangeType.Custom) {
+            chart.yDomain([this.model.displaySetting.axisSetting.yAxisMin, this.model.displaySetting.axisSetting.yAxisMax]);
+        }
+        if (!this.isMobileMode) {
+            chart.focusEnable(true);
+            chart.focusShowAxisX(false);
+        }
+        chart.xAxis.tickFormat(d => this.timeFormat(d, '%x %X'));
+        this.renderCommonProperty(chart, chartWidth, chartHeight, data);
+        this.renderOperationArea(chartWidth, chartHeight);
+        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)');
+        focusContext.select('.nv-x.nv-brush').attr('transform', 'translate(0,30)');
+        if (!this.model.displaySetting.showAxis) {
+            this.rootElement.select('.tick.zero').style('display', 'none');
+            this.rootElement.select('.nv-x.nv-axis.nvd3-svg').style('display', 'none');
+            this.rootElement.select('.nv-y.nv-axis.nvd3-svg').style('display', 'none');
+        }
+        chart.update();
+        return chart;
+    }
+    renderCommonProperty(chart, chartWidth, chartHeight, data) {
+        var _a, _b;
+        chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
+        if (this.model.displaySetting.showAxis) {
+            chart.xAxis.showMaxMin(true).tickFormat(d => {
+                this.$element.find('.nv-mark-point').css({
+                    'stroke-opacity': 0,
+                    'stroke-width': 0,
+                    'stroke': 'unset',
+                    'fill-opacity': 0,
+                    'fill': 'unset'
+                }).removeClass('nv-mark-point');
+                clearTimeout(this.timer);
+                this.timer = undefined;
+                this.timer = setTimeout(() => {
+                    this.initPoint();
+                }, 100);
+                if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
+                    return this.timeFormat(d, '%y-%m-%d');
+                }
+                return this.timeFormat(Number(d), '%X');
+            });
+            if (this.model.displaySetting.axisSetting) {
+                if (this.model.displaySetting.axisSetting.showAxisLabel && this.model.displaySetting.axisSetting.axisLabelFont) {
+                    chart.xAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize);
+                    chart.yAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize).tickFormat(d => +d3.format('.9g')(d));
+                }
+                else {
+                    chart.xAxis.tickFormat(() => '');
+                    chart.yAxis.tickFormat(() => '');
+                }
+            }
+        }
+        else {
+            chart.showXAxis(false);
+            chart.showYAxis(false);
+        }
+        chart.width(chartWidth);
+        chart.height(chartHeight);
+        chart.color(this.model.dataSetting.channels.map(c => c.connectorColor));
+        this.rootElement.append('g').datum(data).call(chart);
+        this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
+        this.resizeEventListener = nv.utils.windowResize(() => {
+            if (!this.needResize)
+                return;
+            chart.update();
+            this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
+        });
+        const fontSize = (_b = (_a = this.model.displaySetting.axisSetting) === null || _a === void 0 ? void 0 : _a.axisLabelFont) === null || _b === void 0 ? void 0 : _b.fontSize;
+        this.rootElement.selectAll('.domain').style('stroke-opacity', 1);
+        if (this.model.displaySetting.showAxis && this.model.displaySetting.axisSetting) {
+            const axisColor = this.model.displaySetting.axisSetting.axisColor;
+            this.rootElement.selectAll('.domain').style('stroke', axisColor);
+            if (fontSize && this.model.displaySetting.axisSetting.showAxisLabel) {
+                this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
+            }
+        }
+        let strokeWidth = 0;
+        if (this.model.displaySetting.axisSetting.showTick !== false) {
+            strokeWidth = 1;
+        }
+        this.rootElement
+            .selectAll('.nv-x')
+            .selectAll('.tick')
+            .selectAll('line')
+            .attr('style', `stroke:${this.model.displaySetting.axisSetting.xAxisTickColor || 'rgb(127, 147, 159)'};stroke-width:${strokeWidth};`);
+        this.rootElement
+            .selectAll('.nv-y')
+            .selectAll('.tick')
+            .selectAll('line')
+            .attr('style', `stroke:${this.model.displaySetting.axisSetting.yAxisTickColor || 'rgb(127, 147, 159)'};stroke-width:${strokeWidth};`);
+        if (fontSize && this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
+            const self = this;
+            this.rootElement
+                .selectAll('.nv-x')
+                .selectAll('.tick')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            this.rootElement
+                .selectAll('.nv-axisMaxMin-x')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            const focusWrap = this.rootElement.selectAll('.nv-focusWrap');
+            if (focusWrap.size()) {
+                let h = focusWrap.attr('transform');
+                if (h && h.length && h.indexOf(',') !== -1) {
+                    h = h.slice(0, -1).split(',')[1];
+                    this.rootElement
+                        .selectAll('.nv-focusWrap')
+                        .attr('transform', `translate(0,${Number(h) + 15})`);
+                }
+            }
+            const resizeObserver = new window.MutationObserver(() => {
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('.full-date')
+                    .remove();
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('text')
+                    .data(function (d) {
+                    return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+                })
+                    .enter()
+                    .append('text')
+                    .attr('class', 'full-date')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('dy', '2.3em')
+                    .style('text-anchor', 'middle')
+                    .style('font-size', fontSize)
+                    .text((d) => d);
+            });
+            const extent = document.getElementsByClassName('extent');
+            if (extent.length) {
+                resizeObserver.observe(extent[0], { attributes: true });
+            }
+        }
+        else {
+            this.rootElement
+                .selectAll('.full-date')
+                .remove();
+        }
+    }
+    renderOperationArea(chartWidth, chartHeight) {
+        const backgroundColor = this.model.displaySetting.axisSetting.filterBackgroudColor || 'inherit';
+        const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
+            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
+            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
+        const 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('position', 'relative')
+            .style('margin-left', this.displayOption.marginLeft + 'px')
+            .style('vertical-align', 'middle');
+        const selectedText = this.timePeriods.find(t => t.key === Number(this.currentTimePeriod));
+        const dropdownTrigger = dropdownWrapper.append('div')
+            .attr('class', 'hc-dropdown-trigger')
+            .style('background-color', backgroundColor)
+            .style('font-size', this.displayOption.operationSelectFontSize)
+            .style('cursor', 'pointer')
+            .style('padding', '0 18px 0 4px')
+            .style('border', '1px solid #ccc')
+            .style('border-radius', '2px')
+            .style('position', 'relative')
+            .style('white-space', 'nowrap')
+            .style('line-height', (this.displayOption.operationAreaHeight - 8) + 'px')
+            .style('min-height', (this.displayOption.operationAreaHeight - 8) + 'px')
+            .text(selectedText ? selectedText.name : '');
+        dropdownTrigger.append('span')
+            .style('position', 'absolute')
+            .style('right', '4px')
+            .style('top', '50%')
+            .style('transform', 'translateY(-50%)')
+            .style('font-size', '10px')
+            .style('pointer-events', 'none')
+            .text('▼');
+        const dropdownListEl = document.createElement('div');
+        dropdownListEl.style.cssText = 'display:none;position:fixed;background:' + dropdownBg
+            + ';border:1px solid #ccc;border-radius:2px;z-index:9999;box-shadow:0 2px 6px rgba(0,0,0,0.15);';
+        document.body.appendChild(dropdownListEl);
+        this.dropdownListEl = dropdownListEl;
+        this.dropdownTriggerEl = dropdownTrigger.node();
+        const dropdownList = d3.select(dropdownListEl);
+        this.timePeriods.forEach(tp => {
+            dropdownList.append('div')
+                .attr('class', 'hc-dropdown-item')
+                .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('background', tp.key === Number(this.currentTimePeriod) ? '#1890ff' : 'transparent')
+                .style('color', tp.key === Number(this.currentTimePeriod) ? '#fff' : '#333')
+                .text(tp.name)
+                .on('mouseover', function () {
+                const el = d3.select(this);
+                if (!el.classed('hc-dropdown-selected')) {
+                    el.style('background', '#e6f7ff').style('color', '#333');
+                }
+            })
+                .on('mouseout', function () {
+                const el = d3.select(this);
+                if (!el.classed('hc-dropdown-selected')) {
+                    el.style('background', 'transparent').style('color', '#333');
+                }
+            })
+                .on('click', () => {
+                dropdownListEl.style.display = 'none';
+                // 从 this.timePeriods 实时查找，确保语种切换后显示最新文案
+                const currentPeriod = this.timePeriods.find(p => p.key === tp.key);
+                const currentName = currentPeriod ? currentPeriod.name : tp.name;
+                dropdownTrigger.text(currentName);
+                dropdownTrigger.append('span')
+                    .style('position', 'absolute')
+                    .style('right', '4px')
+                    .style('top', '50%')
+                    .style('transform', 'translateY(-50%)')
+                    .style('font-size', '10px')
+                    .style('pointer-events', 'none')
+                    .text('▼');
+                // 更新选中状态
+                dropdownList.selectAll('.hc-dropdown-item')
+                    .classed('hc-dropdown-selected', false)
+                    .style('background', 'transparent')
+                    .style('color', '#333');
+                d3.select(d3.event.currentTarget)
+                    .classed('hc-dropdown-selected', true)
+                    .style('background', '#1890ff')
+                    .style('color', '#fff');
+                if (tp.key === 8) {
+                    this.showCustomTimeRangeModal();
+                    return;
+                }
+                this.updateTimeRange(tp.key);
+                this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
+            });
+        });
+        // 测量下拉列表最大宽度，让 trigger 和列表宽度一致
+        dropdownListEl.style.display = 'block';
+        dropdownListEl.style.visibility = 'hidden';
+        const listContentWidth = dropdownListEl.offsetWidth;
+        dropdownListEl.style.display = 'none';
+        dropdownListEl.style.visibility = '';
+        dropdownListEl.style.width = listContentWidth + 'px';
+        dropdownTrigger.node().style.width = listContentWidth + 'px';
+        dropdownTrigger.node().style.boxSizing = 'border-box';
+        const hideDropdown = () => { dropdownListEl.style.display = 'none'; };
+        dropdownTrigger.on('click', () => {
+            const isVisible = dropdownListEl.style.display !== 'none';
+            if (isVisible) {
+                hideDropdown();
+            }
+            else {
+                const triggerNode = dropdownTrigger.node();
+                const triggerRect = triggerNode.getBoundingClientRect();
+                // 设置宽度至少和 trigger 一样宽
+                dropdownListEl.style.minWidth = triggerRect.width + 'px';
+                dropdownListEl.style.left = triggerRect.left + 'px';
+                dropdownListEl.style.display = 'block';
+                const listHeight = dropdownListEl.offsetHeight;
+                const spaceBelow = window.innerHeight - triggerRect.bottom;
+                if (spaceBelow < listHeight) {
+                    // 向上展开
+                    dropdownListEl.style.top = '';
+                    dropdownListEl.style.bottom = (window.innerHeight - triggerRect.top) + 'px';
+                }
+                else {
+                    // 向下展开
+                    dropdownListEl.style.bottom = '';
+                    dropdownListEl.style.top = triggerRect.bottom + 'px';
+                }
+            }
+        });
+        // 点击外部收起
+        document.addEventListener('click', (event) => {
+            const triggerNode = dropdownTrigger.node();
+            if (!dropdownListEl.contains(event.target) && !triggerNode.contains(event.target)) {
+                hideDropdown();
+            }
+        });
+        // 滚动时收起
+        document.addEventListener('scroll', hideDropdown, true);
+        const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
+        operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
+            .style('float', 'right').style('background-image', 'url(assets/img/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('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('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('background-color', backgroundColor).style('background-size', 'cover')
+            .on('click', () => { this.loadFirstPage(); });
+    }
+    timeFormat(datetime, specifier) {
+        return d3.time.format(specifier)(new Date(datetime));
+    }
+    fmtDatetimeLocal(d) {
+        const p2 = (n) => (n < 10 ? '0' : '') + n;
+        return d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate())
+            + 'T' + p2(d.getHours()) + ':' + p2(d.getMinutes()) + ':' + p2(d.getSeconds());
+    }
+    showCustomTimeRangeModal() {
+        const now = new Date();
+        const defaultStart = this.customStartTime ? this.customStartTime.toDate()
+            : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+        const defaultEnd = this.customEndTime ? this.customEndTime.toDate()
+            : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+        if (this.guiContext && this.guiContext.showCustomTimeRangeModal) {
+            this.guiContext.showCustomTimeRangeModal({ startTime: defaultStart, endTime: defaultEnd }).then(result => {
+                if (result) {
+                    const momentAny = moment;
+                    this.customStartTime = momentAny(result.startTime);
+                    this.customEndTime = momentAny(result.endTime);
+                    this.updateTimeRange(8);
+                    this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
+                }
+            });
+            return;
+        }
+        this.showCustomTimeRangeModalFallback();
+    }
+    showCustomTimeRangeModalFallback() {
+        const prevTimePeriod = this.currentTimePeriod;
+        const now = new Date();
+        const defaultStart = this.fmtDatetimeLocal(this.customStartTime ? this.customStartTime.toDate()
+            : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0));
+        const defaultEnd = this.fmtDatetimeLocal(this.customEndTime ? this.customEndTime.toDate()
+            : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59));
+        const overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;';
+        const modal = document.createElement('div');
+        const modalCss = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);'
+            + 'background:#fff;border-radius:4px;min-width:460px;'
+            + 'box-shadow:0 4px 12px rgba(0,0,0,0.15);font-family:inherit;font-size:14px;';
+        modal.style.cssText = modalCss;
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e8e8e8;';
+        const title = document.createElement('span');
+        title.style.cssText = 'font-size:16px;font-weight:500;color:#333;';
+        title.textContent = this.localization.customTimeRange || '自定义';
+        const closeBtn = document.createElement('span');
+        closeBtn.style.cssText = 'cursor:pointer;font-size:18px;color:#999;line-height:1;';
+        closeBtn.textContent = '×';
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        const body = document.createElement('div');
+        body.style.cssText = 'padding:20px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;';
+        const label = document.createElement('span');
+        label.style.cssText = 'color:#333;white-space:nowrap;';
+        label.textContent = '时间范围：';
+        const inputStyle = 'border:1px solid #d9d9d9;border-radius:4px;padding:4px 8px;font-size:14px;height:32px;outline:none;color:#333;';
+        const startInput = document.createElement('input');
+        startInput.type = 'datetime-local';
+        startInput.setAttribute('step', '1');
+        startInput.value = defaultStart;
+        startInput.style.cssText = inputStyle;
+        const separator = document.createElement('span');
+        separator.textContent = ' - ';
+        separator.style.cssText = 'color:#333;';
+        const endInput = document.createElement('input');
+        endInput.type = 'datetime-local';
+        endInput.setAttribute('step', '1');
+        endInput.value = defaultEnd;
+        endInput.style.cssText = inputStyle;
+        body.appendChild(label);
+        body.appendChild(startInput);
+        body.appendChild(separator);
+        body.appendChild(endInput);
+        const footer = document.createElement('div');
+        footer.style.cssText = 'display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e8e8e8;';
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = this.localization.cancel || '取消';
+        cancelBtn.style.cssText = 'padding:5px 16px;border:1px solid #d9d9d9;border-radius:4px;background:#fff;cursor:pointer;font-size:14px;color:#333;';
+        const saveBtn = document.createElement('button');
+        saveBtn.textContent = '保存';
+        saveBtn.style.cssText = 'padding:5px 16px;border:none;border-radius:4px;background:#1890ff;color:#fff;cursor:pointer;font-size:14px;';
+        footer.appendChild(cancelBtn);
+        footer.appendChild(saveBtn);
+        modal.appendChild(header);
+        modal.appendChild(body);
+        modal.appendChild(footer);
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+        const close = (revert) => {
+            document.body.removeChild(overlay);
+            if (revert) {
+                const selectEl = this.$element && this.$element.find('select');
+                if (selectEl && selectEl.length) {
+                    selectEl.val(prevTimePeriod.toString());
+                }
+            }
+        };
+        closeBtn.addEventListener('click', () => close(true));
+        cancelBtn.addEventListener('click', () => close(true));
+        saveBtn.addEventListener('click', () => {
+            const startVal = startInput.value;
+            const endVal = endInput.value;
+            if (!startVal) {
+                startInput.style.borderColor = 'red';
+                return;
+            }
+            const startDate = new Date(startVal);
+            const endDate = endVal
+                ? new Date(endVal)
+                : new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), 23, 59, 59);
+            if (isNaN(startDate.getTime())) {
+                startInput.style.borderColor = 'red';
+                return;
+            }
+            if (endDate.getTime() <= startDate.getTime()) {
+                endInput.style.borderColor = 'red';
+                return;
+            }
+            const momentAny = moment;
+            this.customStartTime = momentAny(startDate);
+            this.customEndTime = momentAny(endDate);
+            close(false);
+            this.updateTimeRange(8);
+            this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
+        });
+    }
+    loadFirstPage() {
+        this.updateQueryTimeRange();
+        this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
+    }
+    loadNextPage() {
+        this.reRenderElement(this.currentEndTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndClose);
+    }
+    loadPreviousPage() {
+        this.reRenderElement(this.startTime, this.currentStartTime, -this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginCloseEndOpen);
+    }
+    loadLastPage() {
+        this.updateQueryTimeRange();
+        this.reRenderElement(this.startTime, this.endTime, -this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
+    }
+    initElementStatus() {
+        if (this.model.dataSetting && null != this.model.dataSetting.dataSourceCode) {
+            this.updateElementStatus(HistoricalCurveElementStatus.Loading);
+        }
+    }
+    updateElementStatus(status, error) {
+        switch (status) {
+            case HistoricalCurveElementStatus.Normal:
+                if (this.elementStatus !== HistoricalCurveElementStatus.Normal) {
+                    this.elementStatus = HistoricalCurveElementStatus.Normal;
+                }
+                break;
+            case HistoricalCurveElementStatus.Unbound:
+                this.elementStatus = HistoricalCurveElementStatus.Unbound;
+                this.setStatusAsUnbound();
+                break;
+            case HistoricalCurveElementStatus.Loading:
+                if (this.elementStatus !== HistoricalCurveElementStatus.Unbound) {
+                    this.elementStatus = HistoricalCurveElementStatus.Loading;
+                    this.setStatusAsLoading();
+                }
+                break;
+            case HistoricalCurveElementStatus.LoadFailed:
+                if (this.elementStatus !== HistoricalCurveElementStatus.Unbound) {
+                    this.elementStatus = HistoricalCurveElementStatus.LoadFailed;
+                    this.setStatusAsLoadFailed(error ? error : this.localization.abnormal);
+                }
+                break;
+            default:
+                this.logger.error(`Invalid HistoricalCurveElementStatus:${status}`);
+                break;
+        }
+    }
+    setStatusAsUnbound() {
+        this.renderStatus('assets/img/unbind.svg', this.localization.unbind, '#586e7c');
+    }
+    setStatusAsLoading() {
+        this.renderStatus('assets/img/loading.svg', this.localization.loading, '#226abc');
+    }
+    setStatusAsLoadFailed(error) {
+        this.logger.error(`[GUI]Failed to load historical curve:${error}`);
+        this.renderStatus('assets/img/abnormal.svg', error, '#f6a520');
+    }
+    renderStatus(icon, tip, stroke) {
+        if (this.elementStatus === HistoricalCurveElementStatus.Normal) {
+            this.clearStatus();
+            return;
+        }
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
+            .attr('width', this.model.displaySetting.size.width)
+            .attr('height', this.model.displaySetting.size.height);
+        const document = this.$element[0].ownerDocument;
+        const currentRect = this.$element.find('rect#StateFrame').first();
+        if (!currentRect.length) {
+            return;
+        }
+        this.$element.find('image#StateImage').remove();
+        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        if (imgObj) {
+            let x = Number(currentRect[0].getAttribute('width')) - 20;
+            const currentRectX = currentRect[0].getAttribute('x');
+            if (currentRectX !== null) {
+                x += Number(currentRectX);
+            }
+            currentRect[0].setAttribute('stroke', stroke);
+            currentRect[0].setAttribute('stroke-opacity', '0.5');
+            imgObj.href.baseVal = icon;
+            imgObj.setAttributeNS(null, 'id', 'StateImage');
+            imgObj.setAttributeNS(null, 'x', x.toString());
+            imgObj.setAttributeNS(null, 'y', '0');
+            imgObj.setAttributeNS(null, 'height', '20px');
+            imgObj.setAttributeNS(null, 'width', '20px');
+            const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+            const text = document.createTextNode(tip);
+            titleElement.appendChild(text);
+            imgObj.appendChild(titleElement);
+            this.$element.append(imgObj);
+        }
+    }
+    clearStatus() {
+        const currentRect = this.$element.find('rect#StateFrame').first();
+        if (!currentRect.length) {
+            return;
+        }
+        const stroke = currentRect[0].getAttribute('stroke');
+        if (stroke) {
+            currentRect[0].removeAttribute('stroke');
+        }
+        this.$element.find('image#StateImage').remove();
+    }
+}