@flexem/fc-gui 3.0.0-alpha.91 → 3.0.0-alpha.93

package/src/elements/air-quality/air-quality-element.ts

@@ -1,239 +0,0 @@
-import { Injector } from '@angular/core';
-import { AirQualityModel } from '../../model/air-quality/air-quality.model';
-import { ConditionalDisplayElement } from '../base/conditional-display-element';
-import { PermissionChecker } from '../../service';
-import { VariableCommunicator } from '../../communication/variable';
-import { VariableStore } from '../../config/variable';
-import { WeatherService } from '../../service';
-import * as d3 from 'd3-selection';
-import { AirQualityInfo, AirQuality } from '../../model/air-quality/air-quality-info';
-import { LOCALIZATION, Localization } from '../../localization';
-
-export class AirQualityElement extends ConditionalDisplayElement {
-
-    model: AirQualityModel;
-    timer: any;
-
-    private readonly localization: Localization;
-
-    constructor(element: HTMLElement,
-        injector: Injector,
-        permissionChecker: PermissionChecker,
-        variableCommunicator: VariableCommunicator,
-        variableStore: VariableStore,
-        private readonly weatherService: WeatherService,
-        signalRAppId: string
-    ) {
-        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
-        this.localization = injector.get(LOCALIZATION);
-        this.initAirQualityInfo();
-        this.timer = setInterval(() => this.initAirQualityInfo(), 1000 * 60 * 60);
-    }
-
-    dispose() {
-        clearInterval(this.timer);
-    }
-
-    initAirQualityInfo() {
-        this.clear();
-        this.weatherService.getAirQualityInfo().then(airQuality => {
-            const airQualityDto = <AirQualityInfo>airQuality;
-            if (!airQualityDto.supported) {
-                this.handleNotSupported();
-                return;
-            }
-            if (airQualityDto.gettingAddress) {
-                this.handleGettingAddress();
-                return;
-            }
-            if (!airQualityDto.hasAddress) {
-                this.handleNoAddress();
-                return;
-            }
-
-            this.handleData(airQualityDto.airQuality);
-        }).catch(() => {
-            this.handleNotSupported();
-        });
-    }
-
-    private handleData(airQuality: AirQuality) {
-        const fontColor = this.model.stroke ? this.model.stroke : '#FFFFFF';
-        const backgroundColor = this.model.fill && this.model.fill || '#86A7C5';
-        const airQualitySvg = d3.create('svg');
-
-        this.buildBackgroudRect(airQualitySvg, backgroundColor);
-        this.buildLocGroup(airQualitySvg, airQuality.city, fontColor);
-        this.buildAirQualityText(airQualitySvg, 130, 55, airQuality.aqi, fontColor, 53);
-        this.buildAirQualityText(airQualitySvg, 220, 28, '空气质量', fontColor);
-        this.buildRectBackgroundForAqi(airQualitySvg, airQuality.level);
-        this.buildAirQualityText(airQualitySvg, 220, 49, airQuality.category, fontColor);
-
-        this.buildAirQualityText(airQualitySvg, 30, 75, 'PM2.5', fontColor, 12, 0.8);
-        this.buildAirQualityText(airQualitySvg, 30, 95,  airQuality.pm25, fontColor, 15);
-
-        this.buildAirQualityText(airQualitySvg, 80, 75, 'PM10', fontColor, 12, 0.8);
-        this.buildAirQualityText(airQualitySvg, 80, 95,  airQuality.pm10, fontColor, 15);
-
-        this.buildAirQualityText(airQualitySvg, 130, 75, 'NO2', fontColor, 12, 0.8);
-        this.buildAirQualityText(airQualitySvg, 130, 95,  airQuality.no2, fontColor, 15);
-
-        this.buildAirQualityText(airQualitySvg, 175, 75, 'SO2', fontColor, 12, 0.8);
-        this.buildAirQualityText(airQualitySvg, 175, 95,  airQuality.so2, fontColor, 15);
-
-        this.buildAirQualityText(airQualitySvg, 215, 75, 'CO', fontColor, 12, 0.8);
-        this.buildAirQualityText(airQualitySvg, 215, 95,  airQuality.co, fontColor, 15);
-
-        this.buildAirQualityText(airQualitySvg, 250, 75, 'O3', fontColor, 12, 0.8);
-        this.buildAirQualityText(airQualitySvg, 250, 95,  airQuality.o3, fontColor, 15);
-
-        this.appendAirQualitySvg(airQualitySvg);
-    }
-
-    private handleNotSupported() {
-        this.handleUnusualCommon(this.localization.airQualityNotSupport);
-    }
-
-    private handleGettingAddress() {
-        this.handleUnusualCommon(this.localization.airQualityNotAvailable);
-    }
-
-    private handleNoAddress() {
-        this.handleUnusualCommon(this.localization.airQualityNotAddress);
-    }
-
-    private handleUnusualCommon(text: string) {
-        const airQualitySvg = d3.create('svg');
-        this.buildBackgroudRect(airQualitySvg, '#081625', '0.5');
-        this.buildUnusualTipIcon(airQualitySvg, text.length);
-        this.buildUnusualTipText(airQualitySvg, text);
-        this.appendAirQualitySvg(airQualitySvg);
-    }
-
-    private buildBackgroudRect(airQualitySvg: d3.Selection<any, {}, null, undefined>, backgroundColor: string, opacity = '1') {
-        airQualitySvg.append('rect')
-            .attr('x', '0')
-            .attr('y', '0')
-            .attr('rx', '2')
-            .attr('width', '280')
-            .attr('height', '105')
-            .attr('fill', backgroundColor)
-            .attr('fill-opacity', opacity);
-    }
-
-    private buildRectBackgroundForAqi(airQualitySvg: d3.Selection<any, {}, null, undefined>, level: number, opacity = '1') {
-        let backgroundColor;
-        if (level >= 0 && level <= 50) {
-            backgroundColor = '#50DF56';
-        } else if (level >= 51 && level <= 100) {
-            backgroundColor = '#FBCD1C';
-        } else if (level >= 101 && level <= 150) {
-            backgroundColor = '#FF9900';
-        } else if (level >= 151 && level <= 200) {
-            backgroundColor = '#FF3232';
-        } else if (level >= 201 && level <= 300) {
-            backgroundColor = '#F403B5';
-        } else if (level > 300) {
-            backgroundColor = '#A10E0E';
-        }
-
-        airQualitySvg.append('rect')
-            .attr('x', '195')
-            .attr('y', '35')
-            .attr('rx', '5')
-            .attr('width', '50')
-            .attr('height', '20')
-            .attr('fill', backgroundColor)
-            .attr('fill-opacity', opacity);
-    }
-
-    private buildUnusualTipIcon(airQualitySvg: d3.Selection<any, {}, null, undefined>, length: number) {
-        airQualitySvg.append('svg')
-            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 : '44')
-            .attr('y', '23')
-            .attr('width', '42')
-            .attr('height', '34')
-            .attr('viewBox', '0 0 200 160')
-            .html(this.getUnusualIconPath);
-    }
-
-    getUnusualIconPath(): string {
-        return `<g>
-            <ellipse class="st2" cx="74.6" cy="72.3" rx="36.4" ry="36.3" fill="#EFCA30"/>
-            <path class="st2" fill="#EFCA30" d="M74.5,24.5C74.6,24.5,74.6,24.5,74.5,24.5c3.7,0,5.7-2,5.7-5.5V5.5C80.2,2,78,0,74.6,0C71,0,69,2.1,69,5.5V19
-            C69,22.3,71,24.4,74.5,24.5L74.5,24.5z"/>
-            <path class="st2" fill="#EFCA30" d="M37.2,28.5l-6.9-6.7c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4
-            l6.4,6.1c0.5,0.5,1.2,1.1,1.9,1.4c1.2,0.5,2,0.7,2.8,0.7c0.6,0,1.3-0.2,2-0.4c1.4-0.5,2.7-1.5,3.3-2.8c0.3-0.7,0.5-1.5,0.5-2.2
-            C39.1,31.2,38.5,29.8,37.2,28.5L37.2,28.5z"/>
-            <path class="st2" fill="#EFCA30" d="M112.5,36.9c1.6,0.7,2.7,1.2,3.7,1.2s2-0.4,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c1.3-1.3,1.9-2.6,1.9-4
-            s-0.6-2.7-1.9-4c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4c0,1.4,0.6,2.7,1.9,4
-            C112.1,36.6,112.3,36.8,112.5,36.9L112.5,36.9z"/>
-            <path class="st2" fill="#EFCA30" d="M25.1,73.2C25.1,73.1,25.1,73.1,25.1,73.2c0-3.6-2-5.6-5.6-5.6H5.6C2,67.6,0,69.7,0,73.1
-            c0,3.4,2.2,5.5,5.6,5.5h13.8C22.7,78.6,24.9,76.6,25.1,73.2L25.1,73.2z"/>
-            <path class="st2" fill="#EFCA30" d="M33.2,107.6c-1.4,0-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4c0.2,0.2,0.3,0.3,0.5,0.4
-            c1.6,0.7,2.7,1.2,3.7,1.2c0.5,0,1.5-0.1,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c2.6-2.5,2.6-5.6,0-8.1
-            C36,108.3,34.6,107.6,33.2,107.6L33.2,107.6z"/>
-            </g>
-            <path class="st3" fill="#FFFFFF" d="M68.8,160h99.3c17.9-2,31.9-17.1,31.9-35.5c0-18.3-13.8-33.3-31.5-35.4c-8-17-25.2-28.9-45.3-28.9
-            c-22.4,0-41.4,14.7-47.7,35c-1.1-0.1-2.2-0.2-3.4-0.2c-18,0-32.6,14.6-32.6,32.6C39.5,144.5,52.3,158.3,68.8,160z"/>`;
-    }
-
-    private buildUnusualTipText(airQualitySvg: d3.Selection<any, {}, null, undefined>, text: string) {
-        const length = text.length;
-        airQualitySvg.append('text')
-            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 + 42 + 8 : '94')
-            .attr('y', '46')
-            .attr('font-size', 14)
-            .attr('font-anchor', 'middle')
-            .attr('fill', '#FFFFFF')
-            .attr('dominant-baseline', 'central')
-            .text(text);
-    }
-
-    private buildAirQualityText(airQualitySvg:  d3.Selection<any, {}, null, undefined>, x: number, y: number,
-            text: string, fontColor: string, size = 12, opacity = 1) {
-        airQualitySvg.append('text')
-            .attr('x', x)
-            .attr('y', y)
-            .attr('font-size', size)
-            .attr('text-anchor', 'middle')
-            .attr('fill', fontColor)
-            .attr('opacity', opacity)
-            .text(text);
-    }
-
-    private buildLocGroup(airQualitySvg: d3.Selection<any, {}, null, undefined>, location: string, fontColor: string) {
-        airQualitySvg.append('svg')
-            .attr('x', '14')
-            .attr('y', '10')
-            .attr('width', '11')
-            .attr('height', '15')
-            .attr('viewBox', '0 0 156 200')
-            .append('path')
-            .attr('fill', fontColor)
-            .attr('d', this.getLocPath);
-
-        airQualitySvg.append('text')
-            .attr('x', '30')
-            .attr('y', '22')
-            .attr('font-size', '12')
-            .attr('fill', fontColor)
-            .text(location);
-    }
-
-    getLocPath(): string {
-        return `M78,0C35,0,0,33.3,0,74.3c0,50.8,55.5,105.4,72.6,120.9l5.3,4.8l5.3-4.7c0.7-0.6,72.5-64.6,72.8-121v0
-C156,33.3,121,0,78,0z M78,178.6c-17.8-17.1-62.1-63.9-62.1-104.4C15.8,42,43.7,15.7,78,15.7c34.3,0,62.2,26.3,62.2,58.5
-C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,32.4,32.2s32.4-14.4,32.4-32.2S95.8,
-40.4,78,40.4z M78,89.1c-9.1,0-16.5-7.4-16.5-16.5S68.9,56.2,78,56.2s16.5,7.4,16.5,16.5S87.1,89.1,78,89.1z`;
-    }
-
-    private appendAirQualitySvg(airQualitySvg: d3.Selection<any, {}, null, undefined>) {
-        this.rootElement.append(() => airQualitySvg.node());
-    }
-
-    clear() {
-        this.rootElement.selectAll('*').remove();
-    }
-
-}

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

@@ -1,423 +0,0 @@
-/* eslint-disable radix */
-/* eslint-disable max-len */
-import { Injector } from '@angular/core';
-import * as d3 from 'd3';
-import { PermissionChecker } from '../../service';
-import { VariableCommunicator } from '../../communication';
-import { ConditionalDisplayElement } from '../base/conditional-display-element';
-import { AlarmModel } from '../../model/alarm/alarm.model';
-import { AlarmsStore, GetAlarmsArgs, VariableStore } from '../../config';
-import { HistoricalCurveElementOption } from '../historical-curve/historical-curve.element.option';
-import * as moment from 'moment';
-import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
-import { HistoricalCurveTimePeriod } from '../historical-curve/historical-curve.time-period';
-import { Localization, LOCALIZATION } from '../../localization';
-
-enum AlaertElementStatus {
-    Normal = 0, // 正常
-    Loading = 1 // 加载中
-}
-
-export class AlarmElement extends ConditionalDisplayElement {
-
-    readonly model: AlarmModel;
-    private readonly logger: LoggerService;
-    readonly variableCommunicator: VariableCommunicator;
-    private readonly localization: Localization;
-    private readonly timePeriods: Array<HistoricalCurveTimePeriod>;
-    private elementStatus: AlaertElementStatus = AlaertElementStatus.Loading;
-    private element: any;
-    private refreshIntervalId: NodeJS.Timer;
-    private readonly displayOption: HistoricalCurveElementOption = {
-        dataLimit: 500,
-        dataZoomHeight: 32,
-        marginLeft: 1,
-        marginRight: 20,
-        mobileMinWidth: 450,
-        operationAreaHeight: 32,
-        operationAreaMarginTop: 10,
-        operationSelectFontSize: '16px',
-        operationButtonWidth: 24,
-        operationButtonHeight: 24,
-        operationButtonMargin: 4
-    };
-    private alarmNames: string[] = [];
-    private startTime: moment.Moment;
-    private endTime: moment.Moment;
-    private currentTimePeriod: number;
-    private alarmList: any[][] = [];
-    private currentAlarmList: any[] = [];
-    private page = 0;
-    private totalCount = 0;
-    private pageSize = 5;
-    private getAlarmDataId: NodeJS.Timer;
-
-    constructor(element: HTMLElement,
-        injector: Injector,
-        permissionChecker: PermissionChecker,
-        variableCommunicator: VariableCommunicator,
-        variableStore: VariableStore,
-        private readonly alarmsStore: AlarmsStore,
-        signalRAppId: string
-    ) {
-        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
-        this.rootElement.selectAll('*').remove();
-        this.setStatusAsLoading();
-        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
-        this.localization = injector.get(LOCALIZATION);
-        this.variableCommunicator = variableCommunicator;
-        this.timePeriods = this.getValidTimePeriods();
-        this.pageSize = this.model.generalSetting.pageSize;
-        localStorage.setItem('simulate-time', moment().valueOf() + '');
-        if (this.model.filterSetting) {
-            this.alarmNames = this.model.filterSetting.detailsData.map(item => item.name);
-            this.currentTimePeriod = this.model.filterSetting?.displayPeriod;
-            this.updateQueryTimeRange();
-            if (this.model.filterSetting.alarmType) {
-                this.refreshIntervalId = setInterval(() => {
-                    this.loadFirstPage();
-                    this.logger.debug(`[GUI]Refresh Alarm Table:${d3.time.format('%x %X')(new Date())}`);
-                }, this.model.filterSetting.refreshCycle * 60 * 1000);
-            } else {
-                variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
-                    alarms.forEach(alarm => {
-                        if (this.alarmNames.indexOf(alarm.name) !== -1) {
-                            this.getAlarmData();
-                            return;
-                        }
-                    });
-                });
-            }
-            this.getAlarmData();
-        } else {
-            this.totalCount = 0;
-            this.alarmList = [];
-            this.renderElement();
-        }
-    }
-
-    dispose() {
-        clearInterval(this.refreshIntervalId);
-        if (this.element) { this.element.tooltip.hidden(true); }
-        this.logger.debug(`[GUI]Dispose Alarm Table Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
-    }
-
-    private getValidTimePeriods(): Array<HistoricalCurveTimePeriod> {
-        const timePeriods = new Array<HistoricalCurveTimePeriod>();
-        timePeriods.push({ key: 6, name: this.localization.lastThirtyMinutes });
-        timePeriods.push({ key: 1, name: this.localization.lastOneHour });
-        timePeriods.push({ key: 7, name: this.localization.lastEightHour });
-        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;
-    }
-
-    private getAlarmData() {
-        this.rootElement.selectAll('*').remove();
-        this.setStatusAsLoading();
-        clearTimeout(this.getAlarmDataId);
-        this.getAlarmDataId = setTimeout(() => {
-            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 (!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.renderElement();
-                    }
-                });
-            } else {
-                const input = new GetAlarmsArgs(
-                    this.alarmNames,
-                    undefined,
-                    undefined,
-                    this.pageSize,
-                    this.page * this.pageSize);
-                this.alarmsStore.getCurrentAlarms(input).subscribe(result => {
-                    if (!result.error) {
-                        this.totalCount = result.totalCount;
-                        this.currentAlarmList = result.items;
-                        if (!result.items.length && result.totalCount) {
-                            this.page = 0;
-                            this.getAlarmData();
-                            return;
-                        }
-                        this.alarmList = this.currentAlarmList.map(item => [
-                            item.name,
-                            item.message,
-                            item.alarmLevel,
-                            item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
-                        ]);
-
-                        this.renderElement();
-                    }
-                });
-            }
-        }, 500);
-    }
-
-    private 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');
-        let fontString = '';
-        if (this.model.generalSetting.headerFont.isItalic) {
-            fontString += 'italic ';
-        }
-        if (this.model.generalSetting.headerFont.isBold) {
-            fontString += 'bold ';
-        }
-        fontString += this.model.generalSetting.headerFont.fontSize + ' ' + this.model.generalSetting.headerFont.fontFamily;
-        tr.style.cssText = `height: ${this.model.heights[0]}px;
-            background: ${this.model.generalSetting.headerFillColor};
-            color: ${this.model.generalSetting.headerFont.color};
-            font: ${fontString};
-            text-align: ${this.model.generalSetting.headerFont.textAlign};
-            ${this.model.generalSetting.headerFont.isUnderline ? 'text-decoration: underline' : ''};
-            vertical-align: middle;`;
-
-        for (let row = 0; row < 4; row++) {
-            const th = document.createElement('th');
-            th.innerHTML = this.model.columLabels[row];
-            th.style.cssText = `width: ${this.model.widths[row] / this.model.size.width * 100}%;
-                border-style: solid;
-                border-color: ${this.model.generalSetting.splitLine};
-                border-left-width: ${!row || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
-            tr.appendChild(th);
-        }
-        table.appendChild(tr);
-
-        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);
-                    }
-                } 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);
-            }
-            table.appendChild(tr);
-        }
-
-        this.element.appendChild(table);
-
-        this.renderOperationArea(this.model.size.width, elementHeight - 39);
-    }
-
-    private renderOperationArea(chartWidth: number, chartHeight: number) {
-        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');
-
-        if (this.model.filterSetting?.alarmType) {
-            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.getAlarmData();
-                });
-            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(); });
-        this.setStatusAsNormal();
-    }
-
-    private updateTimeRange(timePeriodType: number) {
-        this.currentTimePeriod = +timePeriodType;
-        this.updateQueryTimeRange();
-    }
-
-    private 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;
-            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');
-        }
-    }
-
-    private loadFirstPage() {
-        if (this.page > 0) {
-            this.page = 0;
-            this.getAlarmData();
-        }
-    }
-
-    private loadNextPage() {
-        let last_page = Math.ceil(this.totalCount / this.pageSize);
-        if (last_page) last_page--;
-        if (this.page < last_page) {
-            this.page++;
-            this.getAlarmData();
-        }
-    }
-
-    private loadPreviousPage() {
-        if (this.page > 0) {
-            this.page--;
-            this.getAlarmData();
-        }
-    }
-
-    private loadLastPage() {
-        let last_page = Math.ceil(this.totalCount / this.pageSize);
-        if (last_page) last_page--;
-        if (this.page !== last_page) {
-            this.page = last_page;
-            this.getAlarmData();
-        }
-    }
-
-    private setStatusAsNormal() {
-        this.elementStatus = AlaertElementStatus.Normal;
-        this.clearStatus();
-    }
-
-    private setStatusAsLoading() {
-        this.elementStatus = AlaertElementStatus.Loading;
-        this.renderStatus('assets/img/loading.svg', '#226abc');
-    }
-
-    private renderStatus(icon: string, stroke: string) {
-        if (this.elementStatus === AlaertElementStatus.Normal) {
-            this.clearStatus();
-            return;
-        }
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
-            .attr('width', this.model.size.width)
-            .attr('height', this.model.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');
-            imgObj.appendChild(titleElement);
-            this.$element.append(imgObj);
-        }
-    }
-
-    private 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();
-    }
-}