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

package/src/gui/gui-view.ts

@@ -0,0 +1,214 @@
+import { Injector, ElementRef } from '@angular/core';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../logger';
+import * as d3 from 'd3-selection';
+import { each, forEach } from 'lodash';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { VariableCommunicator, VariableStateEnum } from '../communication';
+import { ViewModel } from '../config';
+import { MainElement } from '../elements/main-element';
+import { PerViewVariableCommunicator } from '../elements/per-view-variable-communicator';
+import { Size, ViewPopupBackdropType, ViewPopupLocationType, ViewSettingsModel } from '../model';
+import { ViewResizeMode, DisplayMode, GlobalSettings } from '../settings';
+import { ConfigIsEmptyError } from '../shared';
+import { Guid } from '../utils/guid';
+import { PopupViewService } from '../view/popup-view.service';
+import { GuiContext } from './gui-context';
+import { GuiOptions } from './interfaces/gui-options';
+
+export class GuiView implements PopupViewService {
+
+    get element(): HTMLElement {
+        return this.mainElement.rootElement;
+    }
+
+    get rawWidth(): number {
+        return this.mainElement.rawWidth;
+    }
+
+    get rawHeight(): number {
+        return this.mainElement.rawHeight;
+    }
+
+    private readonly logger: LoggerService;
+    private readonly childViews: Array<GuiView>;
+    private readonly viewId = Guid.newGuid().toString('n');
+
+    private mainElement: MainElement;
+    private muskElement: SVGRectElement;
+    private openVariableStatesSubscription: Subscription;
+    private openVariablesSubscription: Subscription;
+    private openedVariableNames: Array<string>;
+    private perViewVariableCommunicator: VariableCommunicator;
+    private svgRootClass: string;
+    private isMobileMode: boolean;
+    private signalRAppId;
+
+    constructor(private readonly injector: Injector,
+        private readonly bsModalService: BsModalService,
+        private readonly context: GuiContext,
+        private readonly parentView?: GuiView) {
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.childViews = new Array<GuiView>();
+        if (parentView) { parentView.childViews.push(this); }
+        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
+        this.signalRAppId = Guid.newGuid().toString('n');
+    }
+
+    resize(size: Size, resizeMode: ViewResizeMode, svgRootClass: string) {
+        if (!size) { return; }
+        if (!size.isReal()) { throw new Error('invalid size.'); }
+        switch (resizeMode) {
+            case ViewResizeMode.HorizontalUniform:
+                this.mainElement.horizontalStretch(size);
+                break;
+            default:
+                this.mainElement.uniformStretch(size, svgRootClass);
+                break;
+        }
+    }
+
+    load(config: ViewModel, guiOptions: GuiOptions) {
+        const { context } = this;
+        this.svgRootClass = guiOptions.svgRootClass;
+        this.perViewVariableCommunicator = new PerViewVariableCommunicator(context.variableCommunicator);
+        this.mainElement = new MainElement(this.injector, this.bsModalService, context, this.perViewVariableCommunicator, this, this.signalRAppId);
+        this.mainElement.load(config.config, !!this.parentView, guiOptions);
+        setTimeout(() => {
+            this.loadElementState();
+        }, 0);
+
+        this.logger.debug('[GUI] View loaded.');
+    }
+
+    loadElementState() {
+        if (!this.mainElement) { return; }
+        this.mainElement.initElementState();
+        if (this.openVariableStatesSubscription) {
+            this.openVariableStatesSubscription.unsubscribe();
+        }
+        if (this.openVariableStatesSubscription) { this.openVariableStatesSubscription.unsubscribe(); }
+        this.openedVariableNames = this.mainElement.getVariableNames();
+        if (this.openedVariableNames.length === 0) {
+            return;
+        }
+        this.openVariableStatesSubscription =
+            this.perViewVariableCommunicator.subscribeVariableStates(this.openedVariableNames).subscribe((states) => {
+                this.mainElement.reportVariableStates(states);
+                const normalVariableNames = [];
+                each(states, v => {
+                    if (v.state === VariableStateEnum.Normal && normalVariableNames.indexOf(v.variableName) === -1) {
+                        normalVariableNames.push(v.variableName);
+                    }
+                });
+                if (normalVariableNames.length > 0) {
+                    this.normalOpenedVariableNames(normalVariableNames);
+                }
+            });
+    }
+
+    popView(viewIndex: number, hostContainerId: string, el: ElementRef): Observable<void> {
+        return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(map(view => {
+            if (!view.config || !view.config.length) {
+                throw new ConfigIsEmptyError();
+            }
+            const popView = new GuiView(this.injector, this.bsModalService, this.context, this);
+            const guiOptions: GuiOptions = {
+                svgRootClass: this.svgRootClass,
+                hostContainerId: hostContainerId,
+                el: el
+            };
+            popView.load(view, guiOptions);
+            const settings = $(popView.element).data('model') as ViewSettingsModel;
+            if (!settings.popup) { return; }
+            let x: number, y: number;
+            if (settings.popup.locationType === ViewPopupLocationType.Custom && settings.popup.location) {
+                x = settings.popup.location.x;
+                y = settings.popup.location.y;
+            } else {
+                x = (this.rawWidth - popView.rawWidth) / 2;
+                y = (this.rawHeight - popView.rawHeight) / 2;
+            }
+            switch (settings.popup.backdropType) {
+                case ViewPopupBackdropType.Shadow:
+                    if (!this.isMobileMode) {
+                        popView.showShadow();
+                    }
+                    break;
+                case ViewPopupBackdropType.Musk:
+                    this.showMusk();
+                    break;
+            }
+            popView.element.setAttribute('x', String(x));
+            popView.element.setAttribute('y', String(y));
+
+            this.element.appendChild(popView.element);
+        }));
+    }
+
+    closeView() {
+        if (!this.parentView) { return; }
+        this.parentView.hideMusk();
+        this.dispose();
+        this.element.parentElement.removeChild(this.element);
+    }
+
+    moveView(movementX: number, movementY: number) {
+        const newX = Number(this.element.getAttribute('x')) + movementX;
+        const newY = Number(this.element.getAttribute('y')) + movementY;
+        this.element.setAttributeNS(null, 'x', String(newX));
+        this.element.setAttributeNS(null, 'y', String(newY));
+    }
+
+    showMusk() {
+        if (!this.muskElement) {
+            this.muskElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            this.muskElement.setAttribute('width', String(this.rawWidth));
+            this.muskElement.setAttribute('height', String(this.rawHeight));
+            this.muskElement.setAttribute('fill', '#081625');
+            this.muskElement.setAttribute('fill-opacity', '0.4');
+        }
+        this.element.appendChild(this.muskElement);
+    }
+
+    showShadow() {
+        const filterId = `dropshadow-${this.viewId}`;
+        const filter = d3.select(this.element).append('defs').append('filter').attr('id', filterId)
+            .attr('x', 0).attr('y', 0).attr('color-interpolation-filters', 'sRGB')
+            .attr('filterUnits', 'userSpaceOnUse');
+        const feComponentTransfer = filter.append('feDropShadow');
+        feComponentTransfer.attr('stdDeviation', '6').attr('flood-color', 'rgba(69,65,78,.3)');
+        filter.append('feOffset').attr('dx', 0).attr('dy', 0).attr('result', 'shadow');
+        filter.append('feComposite').attr('in', 'SourceGraphic').attr('in2', 'shadow').attr('operator', 'over');
+        const container = this.element.children[0];
+        if (!container) { return; }
+        container.setAttribute('filter', `url(#${filterId})`);
+        container.setAttribute('x', '6');
+        container.setAttribute('y', '6');
+        $(this.element).children('g').attr('transform', 'matrix(1, 0, 0, 1, 6, 6)');
+    }
+
+    hideMusk() {
+        if (this.muskElement) {
+            this.element.removeChild(this.muskElement);
+            this.muskElement = null;
+        }
+    }
+
+    dispose() {
+        if (this.openVariableStatesSubscription) { this.openVariableStatesSubscription.unsubscribe(); }
+        if (this.openVariablesSubscription) { this.openVariablesSubscription.unsubscribe(); }
+        if (this.perViewVariableCommunicator) { this.perViewVariableCommunicator.dispose(); }
+        if (this.childViews && this.childViews.length) { forEach(this.childViews, v => v.dispose()); }
+        if (this.mainElement) { this.mainElement.dispose(); }
+        this.logger.debug('[GUI] View disposed.');
+    }
+
+    private normalOpenedVariableNames(normalVariableNames: Array<string>) {
+        if (normalVariableNames.length > 0) {
+            this.openVariablesSubscription = this.perViewVariableCommunicator.openVariables(normalVariableNames, this.signalRAppId)
+                .subscribe(variableValues => this.mainElement.reportVariableValues(variableValues));
+        }
+    }
+}

package/src/gui/gui.component.ts

@@ -0,0 +1,220 @@
+import { Component, ElementRef, EventEmitter, Inject, Injector, Input, OnChanges, OnDestroy, Output, SimpleChange } from '@angular/core';
+import { isNaN as lodashIsNaN, isEqual } from 'lodash';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { LOCALIZATION, Localization } from '../localization';
+import { Size } from '../model';
+import { DisplayMode, GlobalSettings, ViewResizeMode } from '../settings';
+import { GuiContext } from './gui-context';
+import { GuiHost } from './gui-host';
+import { Guid } from '../utils/guid';
+import { GuiOptions } from './interfaces/gui-options';
+import { ViewService } from '../view/view.service';
+
+@Component({
+    selector: 'fc-gui',
+    templateUrl: './gui.component.html'
+})
+export class GuiComponent implements OnChanges, OnDestroy {
+
+    @Input() context: GuiContext;
+    @Input() size: Size;
+    @Input() resizeMode: string;
+    @Input() displayMode: string;
+    @Output() loadFailed: EventEmitter<Error> = new EventEmitter<Error>();
+    @Output() loaded: EventEmitter<any> = new EventEmitter();
+    startTouch: any;
+    isTouch: boolean;
+    pageX: number;
+    pageY: number;
+    initX: number;
+    initY: number;
+    initWidth: number;
+    initHeight: number;
+    lastScale = 1;
+    isMobileMode = false;
+    hostContainerId: string;
+    private $svg: JQuery;
+    private host: GuiHost;
+    private get viewResizeMode(): ViewResizeMode {
+        switch (this.resizeMode) {
+            case 'HorizontalUniform':
+                return ViewResizeMode.HorizontalUniform;
+            default:
+                return ViewResizeMode.Uniform;
+        }
+    }
+    private readonly globalSettings: GlobalSettings;
+
+    private readonly viewService: ViewService;
+
+    constructor(private readonly el: ElementRef,
+        @Inject(LOCALIZATION) private readonly localization: Localization,
+        private readonly injector: Injector,
+        private readonly bsModalService: BsModalService) {
+        this.globalSettings = this.injector.get(GlobalSettings);
+        this.viewService = injector.get(ViewService);
+    }
+
+    ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+        if (changes.displayMode) {
+            this.onDisplayModeChanged(changes.displayMode.previousValue, changes.displayMode.currentValue);
+        }
+        if (changes.context) {
+            this.onProviderChanged(changes.context.previousValue, changes.context.currentValue);
+        }
+        if (changes.size) {
+            this.onSizeChanged(changes.size.previousValue, changes.size.currentValue);
+        }
+        if (changes.resizeMode) {
+            this.onResizeModeChanged(changes.resizeMode.previousValue, changes.resizeMode.currentValue);
+        }
+    }
+
+    doubleFingerZooming() {
+        const scaleElement = this.$svg.find('div.svg-content').first()[0];
+        const self = this;
+        self.initWidth = scaleElement.offsetWidth;
+        self.initHeight = scaleElement.offsetHeight;
+        self.lastScale = 1;
+
+        scaleElement.addEventListener('touchstart', function (e) {
+            self.pageX = e.targetTouches[0].pageX;
+            self.pageY = e.targetTouches[0].pageY;
+
+            self.initX = !lodashIsNaN(parseInt(scaleElement.style.left, 10)) ? parseInt(scaleElement.style.left, 10) : 0;
+            self.initY = !lodashIsNaN(parseInt(scaleElement.style.top, 10)) ? parseInt(scaleElement.style.top, 10) : 0;
+            if (e.touches.length >= 2) {
+                self.startTouch = e.touches;
+            }
+            self.isTouch = true;
+        }, false);
+        scaleElement.addEventListener('touchmove', function (e) {
+            if (e.touches.length === 1 && self.isTouch && self.lastScale > 1) {
+                e.preventDefault();
+                const touchMoveX = e.targetTouches[0].pageX,
+                    touchMoveY = e.targetTouches[0].pageY;
+                const left = Number(touchMoveX) - Number(self.pageX) + Number(self.initX);
+                const top = Number(touchMoveY) - Number(self.pageY) + Number(self.initY);
+                if (left > -(self.lastScale - 1) * self.initWidth / 2 && left < (self.lastScale - 1) * self.initWidth / 2) {
+                    scaleElement.style.left = left + 'px';
+                }
+                if (top > -(self.lastScale - 1) * self.initHeight / 2 && top < (self.lastScale - 1) * self.initHeight / 2) {
+                    scaleElement.style.top = top + 'px';
+                }
+            }
+            if (e.touches.length >= 2 && self.isTouch) {
+                e.preventDefault();
+                const now = e.touches;
+                const scale = (self.getDistance(now[0], now[1]) / self.getDistance(self.startTouch[0], self.startTouch[1]));
+                let nowScale = self.lastScale;
+                if (scale >= 1) {
+                    nowScale *= 1.008;
+                }
+                if (nowScale < 1) {
+                    nowScale = 1;
+                }
+                if (nowScale > 5) {
+                    nowScale = 5;
+                }
+                if (scale < 1) {
+                    nowScale *= 0.992;
+                    scaleElement.style.left = -(nowScale - 1) * self.initWidth / 8 + 'px';
+                    scaleElement.style.top = -(nowScale - 1) * self.initHeight / 8 + 'px';
+                }
+                scaleElement.style.transform = 'scale(' + nowScale + ')';
+                self.lastScale = nowScale;
+            }
+        }, false);
+        scaleElement.addEventListener('touchend', function () {
+            if (self.isTouch) {
+                self.isTouch = false;
+            }
+        }, false);
+    }
+
+    getDistance(p1, p2) {
+        const x = p2.pageX - p1.pageX,
+            y = p2.pageY - p1.pageY;
+        return Math.sqrt((x * x) + (y * y));
+    }
+
+    ngOnDestroy() {
+        if (this.host) { this.host.dispose(); }
+    }
+
+    private onProviderChanged(oldValue: GuiContext, newValue: GuiContext) {
+        if (isEqual(oldValue, newValue)) { return; }
+        if (this.host) {
+            this.host.dispose();
+            this.host = null;
+        }
+        if (newValue) {
+            this.$svg = $(this.el.nativeElement).find('div.svgView').first();
+            this.$svg.empty();
+            const svgRootClass = 'S' + Guid.newGuid().toString('n');
+            this.hostContainerId = 'H' + Guid.newGuid().toString('n');
+            this.$svg.addClass(svgRootClass);
+            const guiOptions: GuiOptions = {
+                svgRootClass: svgRootClass,
+                hostContainerId: this.hostContainerId,
+                el: this.el
+            };
+            const host = new GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
+            /*
+             * if configureViewCode exist then load by configureViewCode else load by configureViewId
+             */
+            (this.context.configureViewCode ? host.loadByConfigureViewCode(this.context.configureViewCode) :
+                host.load(this.context.configureViewId)).then(t => {
+                    // 加载结束后，如果context发生了变化，直接返回。
+                    if (!isEqual(this.context, t.context)) {
+                        t.dispose();
+                        return;
+                    }
+                    this.host = host;
+                    this.host.resizeView(this.size, this.viewResizeMode);
+                    this.$svg.append(t.element);
+                    if (this.isMobileMode) {
+                        this.doubleFingerZooming();
+                    }
+                    this.loaded.emit();
+                }).catch(error => {
+                    this.$svg.append(`<p>${this.localization.loadFailed}</p>`);
+                    this.loadFailed.emit(error);
+                });
+        } else {
+            if (this.$svg) { this.$svg.empty(); }
+            this.host = null;
+        }
+    }
+
+    private onSizeChanged(oldValue: Size, newValue: Size) {
+        if (!this.host || isEqual(oldValue, newValue)) { return; }
+        this.host.updateViewSize(newValue);
+        if (this.isMobileMode) {
+            this.doubleFingerZooming();
+        }
+    }
+
+    private onResizeModeChanged(oldValue: string, newValue: string) {
+        if (!this.host || isEqual(oldValue, newValue)) { return; }
+        this.host.updateViewResizeMode(this.viewResizeMode);
+    }
+
+    private onDisplayModeChanged(oldValue: string, newValue: string) {
+        if (isEqual(oldValue, newValue)) { return; }
+        this.isMobileMode = this.displayMode === 'Mobile';
+        this.globalSettings.displayMode = this.isMobileMode ? DisplayMode.Mobile : DisplayMode.Web;
+    }
+
+    refreshCurrentPage() {
+        if (this.host.currentViewIndex === undefined) {
+            return false;
+        }
+        const toggleView = this.viewService.toggleViews.get(this.el);
+        if (!toggleView) {
+            return false;
+        }
+        toggleView(this.host.currentViewIndex, this.hostContainerId, this.el).subscribe();
+        return true;
+    }
+}

package/src/gui/interfaces/gui-options.ts

@@ -0,0 +1,7 @@
+import { ElementRef } from '@angular/core';
+
+export interface GuiOptions {
+    readonly svgRootClass: string;
+    readonly hostContainerId: string;
+    readonly el: ElementRef;
+}

package/src/gui.module.ts

@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { TabsModule } from 'ngx-bootstrap/tabs';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { GuiComponent } from './gui/gui.component';
+import { DefaultLocalization, LOCALIZATION } from './localization/localization.service';
+import { AlertModalComponent } from './modal/alert/alert-modal.component';
+import { ConfirmOperationModalComponent } from './modal/confirm-operation/confirm-operation-modal.component';
+import { WriteCharacterModalComponent } from './modal/write-character/write-character-modal.component';
+import { WriteValueModalComponent } from './modal/write-value/write-value-modal.component';
+import { GlobalSettings } from './settings/global-settings';
+import { AccessPermissionService } from './utils/access-permission.service';
+import { AutoFocusDirective } from './utils/auto-focus.directive';
+import { BsModalDragDirective } from './utils/bs-modal-drag.directive';
+import { DataTypeService } from './utils/data-type/data-type.service';
+import { FractionDigitService } from './utils/fraction-digit.service';
+import { NumericalOperationService } from './utils/numerical-operation.service';
+import { ViewService } from './view/view.service';
+import { ConsoleLoggerService, LOGGER_SERVICE_TOKEN } from './logger';
+import { VerifyPasswordModalComponent } from './modal/verify-password/verify-password-modal.component';
+import { FBoxDataTypeService } from './utils/data-type/fbox-data-type.service';
+import { FCloudDataTypeService } from './utils/data-type/fcloud-data-type.service';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        ModalModule.forRoot(),
+        TabsModule,
+        TooltipModule
+    ],
+    declarations: [
+        GuiComponent,
+        WriteValueModalComponent,
+        ConfirmOperationModalComponent,
+        WriteCharacterModalComponent,
+        AlertModalComponent,
+        AutoFocusDirective,
+        BsModalDragDirective,
+        VerifyPasswordModalComponent
+    ],
+    exports: [
+        GuiComponent
+    ],
+    providers: [
+        FractionDigitService,
+        FBoxDataTypeService,
+        FCloudDataTypeService,
+        DataTypeService,
+        AccessPermissionService,
+        NumericalOperationService,
+        { provide: LOCALIZATION, useValue: DefaultLocalization },
+        { provide: LOGGER_SERVICE_TOKEN, useClass: ConsoleLoggerService },
+        ViewService,
+        GlobalSettings
+    ],
+    entryComponents: [
+        ConfirmOperationModalComponent,
+        AlertModalComponent,
+        WriteValueModalComponent,
+        WriteCharacterModalComponent,
+        VerifyPasswordModalComponent
+    ]
+})
+export class GuiModule {
+}

package/src/localization/localization.service.ts

@@ -0,0 +1,115 @@
+import { InjectionToken } from '@angular/core';
+
+export const LOCALIZATION = new InjectionToken<Localization>('fc.gui.loc');
+
+export interface Localization {
+    loadFailed;
+    setting;
+    submit;
+    submitting;
+    numericalValueRequired;
+    invalidNumericalValue;
+    writeValueTimeout;
+    binaryType;
+    decimalType;
+    hexadecimalType;
+    stringType;
+    numericalValueTooLong;
+    fractionDigitsMustLessThan;
+    canNotBeNegative;
+    valueOutOfRange;
+    timeout;
+    confirmOperationPrompt;
+    confirm;
+    cancel;
+    characterInputRequired;
+    character;
+    characterOutofRange;
+    writeValueRange;
+    loading;
+    unbind;
+    offline;
+    abnormal;
+    disable;
+    permissiontip;
+    conditionIsNotMetTip;
+    chartNoData;
+    lastThirtyMinutes;
+    lastOneHour;
+    lastEightHour;
+    lastTwentyFourHours;
+    lastSevenDays;
+    lastThirtyDays;
+    lastOneYear;
+    grouped;
+    stacked;
+    passwordVerify;
+    passwordError;
+    password;
+    passwordToolTip;
+    passwordRequired;
+    invalidVideoAddress;
+    unconfiguredVideoAddress;
+    weatherNotSupport;
+    weatherNotAddress;
+    weatherNotAvailable;
+    airQualityNotSupport;
+    airQualityNotAddress;
+    airQualityNotAvailable;
+}
+
+export const DefaultLocalization: Localization = {
+    loadFailed: 'Load failed.',
+    setting: 'Setting',
+    submit: 'Submit',
+    submitting: 'Submitting···',
+    numericalValueRequired: 'Numerical value can\'t be emtpy',
+    invalidNumericalValue: 'Numerical value is not valid',
+    writeValueTimeout: 'write value error: timeout',
+    binaryType: 'Binary',
+    decimalType: 'Decimal',
+    hexadecimalType: 'Hexadecimal',
+    stringType: 'String',
+    numericalValueTooLong: 'Numerical value too long',
+    fractionDigitsMustLessThan: 'Fraction digits must be less than ',
+    canNotBeNegative: 'Can not be negative',
+    valueOutOfRange: 'Numerical value is out of range',
+    timeout: 'timeout',
+    confirmOperationPrompt: 'Sure to do this operation?',
+    confirm: 'Yes',
+    cancel: 'Cancel',
+    characterInputRequired: 'Character input can\'t be empty',
+    character: '(Character)',
+    characterOutofRange: 'Character length is out of range',
+    writeValueRange: 'Write value range',
+    loading: 'Loading',
+    unbind: 'Unbind',
+    offline: 'Offline',
+    abnormal: 'Data abnormal',
+    disable: 'Disable',
+    permissiontip: 'You have no permission to operate.',
+    conditionIsNotMetTip: 'Unsatisfied operating conditions or variable abnorma.',
+    chartNoData: 'No Data Available',
+    lastThirtyMinutes: 'Last thirty minutes',
+    lastOneHour: 'Last one hour',
+    lastEightHour: 'Last eight hours',
+    lastTwentyFourHours: 'Last 24 hours',
+    lastSevenDays: 'Last 7 days',
+    lastThirtyDays: 'Last 30 days',
+    lastOneYear: 'Last 1 year',
+    grouped: 'Grouped',
+    stacked: 'Stacked',
+    passwordVerify: 'Password verifiers',
+    passwordError: 'Password error',
+    password: 'Password',
+    passwordToolTip: 'Password error, please re-enter',
+    passwordRequired: 'Password can\'t be empty',
+    invalidVideoAddress: 'Invalid video address',
+    unconfiguredVideoAddress: 'Unconfigured Video Address',
+    weatherNotSupport: 'Location not supported',
+    weatherNotAddress: 'Address not configured',
+    weatherNotAvailable: 'Address not yet available',
+    airQualityNotSupport: 'Location not supported',
+    airQualityNotAddress: 'Address not configured',
+    airQualityNotAvailable: 'Address not yet available'
+};

package/src/localization/localization.service.zh_CN.ts

@@ -0,0 +1,57 @@
+import { Localization } from './localization.service';
+
+export const Localization_zh_CN: Localization = {
+    loadFailed: '加载失败.',
+    setting: '设置',
+    submit: '提交',
+    submitting: '提交中···',
+    numericalValueRequired: '数值不能为空',
+    invalidNumericalValue: '数值格式不正确',
+    writeValueTimeout: '写值错误：超时',
+    binaryType: '二进制',
+    decimalType: '十进制',
+    hexadecimalType: '十六进制',
+    stringType: '字符串',
+    numericalValueTooLong: '数值超长',
+    fractionDigitsMustLessThan: '小数位不能超过',
+    canNotBeNegative: '不能为负数',
+    valueOutOfRange: '数值超出范围',
+    timeout: '超时',
+    confirmOperationPrompt: '是否确认要执行此操作？',
+    confirm: '确定',
+    cancel: '取消',
+    characterInputRequired: '请输入至少一个字符',
+    character: '(字符串)',
+    characterOutofRange: '字符长度超限',
+    writeValueRange: '写值范围',
+    loading: '加载中',
+    unbind: '未绑定',
+    offline: '离线',
+    abnormal: '数据异常',
+    disable: '禁用',
+    permissiontip: '您无权限执行此操作',
+    conditionIsNotMetTip: '操作条件不满足或逻辑控制变量异常',
+    chartNoData: '无数据',
+    lastThirtyMinutes: '最近30分钟',
+    lastOneHour: '最近1小时',
+    lastEightHour: '最近8小时',
+    lastTwentyFourHours: '最近24小时',
+    lastSevenDays: '最近7天',
+    lastThirtyDays: '最近30天',
+    lastOneYear: '最近1年',
+    grouped: '分组',
+    stacked: '叠加',
+    passwordVerify: '密码校验',
+    passwordError: '密码错误',
+    password: '密码',
+    passwordToolTip: '密码错误，请重新输入',
+    passwordRequired: '密码不能为空',
+    invalidVideoAddress: '无效的视频地址',
+    unconfiguredVideoAddress: '未配置视频地址',
+    weatherNotSupport: '当前位置暂不支持',
+    weatherNotAddress: '当前设备未设置地址',
+    weatherNotAvailable: '暂未获取设备地址',
+    airQualityNotSupport: '当前位置暂不支持',
+    airQualityNotAddress: '当前设备未设置地址',
+    airQualityNotAvailable: '暂未获取设备地址'
+};