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

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

@@ -0,0 +1,200 @@
+import { PermissionChecker } from '../../service';
+import { Localization } from '../../localization';
+import { forEach } from 'lodash';
+import { VariableCommunicator, VariableStateEnum, VariableState } from '../../communication';
+import { ConditionalDynamicDisplayElement } from './conditional-dynamic-display-element';
+import { State } from '../../model';
+import { VariableStore } from '../../config';
+
+export abstract class StateControlElement extends ConditionalDynamicDisplayElement {
+
+    isEnable = true;
+    elementStates: VariableState[] = [];
+    state: State;
+    private currentRect: JQuery;
+    preState: State;
+
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator,
+        variableStore: VariableStore, protected readonly localization: Localization, signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+    }
+
+    initState() {
+        if (!this.elementStates.length) {
+            return;
+        }
+        this.state = State.Loading;
+        this.loadStateData(this.state);
+    }
+
+    updateElementStates(newElementStates: VariableState[]) {
+        forEach(this.elementStates, elementState => {
+            forEach(newElementStates, newElementState => {
+                if (elementState.variableName === newElementState.variableName) {
+                    elementState.state = newElementState.state;
+                }
+            });
+        });
+        this.changeStates();
+    }
+
+    addElementState(newElementState: VariableState) {
+        let hasVariable = false;
+        forEach(this.elementStates, elementState => {
+            if (elementState.variableName === newElementState.variableName) {
+                hasVariable = true;
+            }
+        });
+        if (!hasVariable) {
+            this.elementStates.push(newElementState);
+        }
+    }
+
+    changeStates() {
+        this.state = State.Normal;
+        forEach(this.elementStates, elementState => {
+            const currentState = this.getState(elementState);
+            this.changeState(currentState);
+        });
+        if (this.state === State.Normal) {
+            if (!this.isEnable) {
+                this.state = State.Disable;
+            }
+        }
+        this.loadStateData(this.state);
+    }
+
+    getState(elementState: VariableState): State {
+        let currentState: State = State.Loading;
+
+        switch (elementState.state) {
+            case VariableStateEnum.Offline:
+                currentState = State.Offline;
+                break;
+            case VariableStateEnum.Unbind:
+                currentState = State.Unbind;
+                break;
+            case VariableStateEnum.DataNormal:
+                currentState = State.Normal;
+                break;
+            case VariableStateEnum.Abnormal:
+                currentState = State.Abnormal;
+                break;
+        }
+        return currentState;
+    }
+
+    changeState(state: State) {
+        switch (state) {
+            case State.Unbind:
+                this.state = State.Unbind;
+                break;
+            case State.Offline:
+                if (this.state !== State.Unbind) {
+                    this.state = State.Offline;
+                }
+                break;
+            case State.Loading:
+                if (this.state !== State.Unbind && this.state !== State.Offline) {
+                    this.state = State.Loading;
+                }
+                break;
+            case State.Abnormal:
+                if (this.state !== State.Unbind && this.state !== State.Offline && this.state !== State.Loading) {
+                    this.state = State.Abnormal;
+                }
+                break;
+        }
+    }
+
+    loadStateData(state: State) {
+        if (state === this.preState) {
+            return;
+        }
+        this.preState = state;
+
+        if (this.state === State.Normal) {
+            this.clearTip();
+            return;
+        }
+        let url = '';
+        let title = '';
+        let stroke = '';
+        switch (state) {
+            case State.Offline:
+                url = 'assets/img/offline.svg';
+                title = this.localization.offline;
+                stroke = '#999999';
+                break;
+            case State.Unbind:
+                url = 'assets/img/unbind.svg';
+                title = this.localization.unbind;
+                stroke = '#586e7c';
+                break;
+            case State.Abnormal:
+                url = 'assets/img/abnormal.svg';
+                title = this.localization.abnormal;
+                stroke = '#f6a520';
+                break;
+            case State.Disable:
+                url = 'assets/img/disabled.svg';
+                title = this.localization.disable;
+                stroke = '#ff4444';
+                break;
+            default:
+                url = 'assets/img/loading.svg';
+                title = this.localization.loading;
+                stroke = '#226abc';
+                break;
+        }
+        this.setState(url, title, stroke);
+    }
+
+    private setState(url: string, title: string, stroke: string) {
+        this.clearTip();
+        if (!this.currentRect) {
+            this.currentRect = this.$element.find('rect#StateFrame').first();
+        }
+        if (!this.currentRect.length) {
+            return;
+        }
+        const document = this.$element[0].ownerDocument;
+        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        if (imgObj) {
+            const currentRectElement = this.currentRect[0];
+            let x = Number(currentRectElement.getAttribute('width')) - 20;
+            const currentRectX = currentRectElement.getAttribute('x');
+            if (currentRectX !== null) {
+                x += Number(currentRectX);
+            }
+            currentRectElement.setAttribute('stroke', stroke);
+            currentRectElement.setAttribute('stroke-opacity', '0.5');
+            imgObj.href.baseVal = url;
+            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(title);
+            titleElement.appendChild(text);
+            imgObj.appendChild(titleElement);
+            this.$element.append(imgObj);
+        }
+    }
+
+    private clearTip() {
+        if (!this.currentRect) {
+            this.currentRect = this.$element.find('rect#StateFrame').first();
+        }
+        if (!this.currentRect.length) {
+            return;
+        }
+        const currentRectElement = this.currentRect[0];
+        const stroke = currentRectElement.getAttribute('stroke');
+        if (stroke) {
+            currentRectElement.removeAttribute('stroke');
+        }
+        this.$element.find('image#StateImage').remove();
+    }
+}

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

@@ -0,0 +1,314 @@
+import { Injector } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { VariableCommunicator } from '../../communication';
+import { GraphResult, GraphStore, GraphType, VariableStore } from '../../config';
+import { Localization } from '../../localization';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { AlertModalComponent } from '../../modal/alert/alert-modal.component';
+import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/confirm-operation-modal.component';
+import { WriteCharacterModalArgs } from '../../modal/write-character/write-character-modal-args';
+import { WriteCharacterModalComponent } from '../../modal/write-character/write-character-modal.component';
+import { CharacterDisplay, State, Font } from '../../model';
+import { OperationRecordService, PermissionChecker } from '../../service';
+import { AccessPermissionService, GraphUtil } from '../../utils';
+import { ReadableElement } from '../base/readable-element';
+import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
+import { SecurityChecker } from '../../security';
+import { VariableUtil } from '../../utils/variable-util';
+import { TextElementModal } from '../shared/text/text-element';
+
+export class CharacterDisplayElement extends ReadableElement {
+
+    protected readonly model: CharacterDisplay;
+    private readonly accessPermissionService: AccessPermissionService;
+
+    private displayValue = '';
+    private graphs = new Map<number, GraphResult>();
+    private readonly logger: LoggerService;
+
+    constructor(element: HTMLElement, injector: Injector,
+        private readonly modalService: BsModalService,
+        variableCommunicator: VariableCommunicator,
+        private readonly graphStore: GraphStore,
+        permissionChecker: PermissionChecker,
+        private readonly operationRecordService: OperationRecordService,
+        private readonly securityChecker: SecurityChecker,
+        variableStore: VariableStore,
+        localization: Localization,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.accessPermissionService = injector.get(AccessPermissionService);
+        this.initElement();
+        this.initClickEvent();
+    }
+
+    public get readVariableName(): string {
+        if (!this.model) { throw new Error('Model cannot be null'); }
+        if (null == this.model.version || this.model.version < 1) {
+            return this.model.readVariableName;
+        } else {
+            const variable = this.model.readVariable;
+            if (!variable) { return undefined; }
+            return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+        }
+    }
+
+    public get writeVariableName(): string {
+        if (!this.model) { throw new Error('Model cannot be null'); }
+        if (null == this.model.version) {
+            if (this.model.isSameVariable) {
+                return this.model.readVariableName;
+            } else {
+                return this.model.writeVariableName;
+            }
+        } else {
+            const variable = this.model.writeVariable;
+            if (!variable) { return undefined; }
+            return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+        }
+    }
+
+    protected updateVariableValue(value: string) {
+        const valueText = this.getVariableValueText(value);
+        // filter control character
+        this.displayValue = valueText.replace(/[\u0000-\u001F]|[\u007F-\u00A0]/g, '');
+        this.updateDisplayValue(this.displayValue);
+    }
+
+    changeStates() {
+        super.changeStates();
+        if (this.state === State.Normal || this.state === State.Disable) {
+            this.updateDisplayValue(this.displayValue);
+        } else {
+            this.updateDisplayValue('');
+        }
+    }
+
+    private updateDisplayValue(text: string) {
+        const textElement = this.$element.find('foreignObject').find('i');
+        if (textElement) { textElement.text(text); }
+    }
+
+    private getVariableValueText(value: string) {
+        return this.characterDisplayText(this.model.isPassword, value);
+    }
+
+    private characterDisplayText(isPassword: boolean, value: string) {
+        let displayText = '';
+        if (null == value || value.toString().trim().length <= 0) { return displayText; }
+        displayText = value.toString();
+        if (isPassword) {
+            displayText = '*'.repeat(displayText.length);
+        }
+        return displayText;
+    }
+
+    private initElement(): any {
+        const { rootElement } = this;
+        rootElement.selectAll('*').remove();
+        const label = this.model.label;
+        let width = null, height = null;
+        if (this.model.size) {
+            width = this.model.size.width;
+            height = this.model.size.height;
+        }
+        if (!width || !height) {
+            width = 60;
+            height = 38;
+        }
+        rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', height).attr('fill', 'transparent');
+        this.initVariableText(width, height);
+
+        let translateX = '';
+        if (this.model.showVariableText) {
+            translateX = `translate(${width * 7 / 11},0)`;
+            width = width * 4 / 11;
+        } else {
+            translateX = 'translate(0,0)';
+        }
+        if (this.model.useGraph) {
+            rootElement.append('image')
+                .attr('width', width)
+                .attr('height', height)
+                .attr('preserveAspectRatio', 'none')
+                .attr('fill', 'none')
+                .attr('crossorigin', 'anonymous')
+                .attr('transform', translateX);
+        }
+        const font = label.font;
+        if (!font) { throw new Error('font missing.'); }
+        const textElement = rootElement.append('foreignObject')
+            .attr('width', width)
+            .attr('height', height)
+            .attr('fill', 'none')
+            .attr('transform', translateX);
+        const bodyElement = textElement.append('xhtml:div')
+            .attr('class', 'svgBody')
+            .html('<div></div>');
+        const divElement = bodyElement.select('div')
+            .style('height', height + 'px')
+            .style('overflow', 'hidden')
+            .style('display', 'flex')
+            .style('align-items', 'center');
+        const iElement = divElement.append('i');
+        iElement.style('word-break', 'break-all')
+            .style('text-align', font.textAlign)
+            .style('alignment-baseline', 'central')
+            .style('transform', `translate(${width / 2},${height / 2})`).text(label.content)
+            .style('color', font.color)
+            .style('font-size', font.fontSize)
+            .style('font-style', 'normal')
+            .style('width', '100%');
+        if (font.fontStyle) {
+            const fontStyle = font.fontStyle.split(' ');
+            const isBold = $.inArray('bold', fontStyle);
+            const italic = $.inArray('Italic', fontStyle);
+            const fontFamily = fontStyle.pop();
+            if (isBold >= 0) { iElement.style('font-weight', 'bold'); }
+            if (italic >= 0) { iElement.style('font-style', 'italic'); }
+            iElement.style('font-family', fontFamily ? fontFamily + ',msyh' : 'msyh');
+        }
+        if (font.isUnderline) { iElement.style('text-decoration', 'underline'); }
+        if (this.model.useGraph) {
+            if (this.graphs.has(0)) {
+                const graph = this.graphs.get(0);
+                // 已经发出过图形请求，不再重复请求。
+                if (graph == null) { return; }
+                this.changeGraph(graph);
+            } else {
+                // 标记，防止重复请求图形。
+                this.graphs.set(0, null);
+                this.graphStore.getGraph(this.model.graphSetting.id, 0,
+                    GraphUtil.getExtendedStyle(this.model.graphSetting, 0))
+                    .subscribe(graphResult => {
+                        this.graphs.set(0, graphResult);
+                        this.changeGraph(graphResult);
+                    });
+            }
+        }
+    }
+    private initVariableText(width: number, height: number) {
+        if (!this.model.showVariableText) { return; }
+        const font: Font = {
+            isUnderline: this.model.variableText.font.isUnderline,
+            isBold: this.model.variableText.font.isBold,
+            isItalic: this.model.variableText.font.isItalic,
+            fontSize: this.model.variableText.font.fontSize,
+            fontFamily: this.model.variableText.font.fontFamily,
+            color: this.model.variableText.font.color,
+            textAlign: this.model.variableText.font.textAlign
+        };
+        const textElement = new TextElementModal(this.model.variableText.content + ':', font, width * 7 / 11, height, true);
+        this.$element.append(textElement.Element);
+    }
+
+    private initClickEvent() {
+        if (!this.writeVariableName || !this.accessPermissionService.canWrite(this.model.accessPermission)) { return; }
+        this.rootElement.style('cursor', 'hand');
+        setTimeout(() => {
+            const elementBox = (<any>this.$element[0]).getBBox();
+            this.$element.find('rect').attr('width', elementBox.width);
+            this.$element.find('rect').attr('height', elementBox.height);
+        }, 0);
+        this.$element.click(__ => {
+            if (!this.isInitialized) { return; }
+            if (!this.isEnable) {
+                const message = !this.isGrantedPermission ? this.localization.permissiontip : this.localization.conditionIsNotMetTip;
+                const modalRef = this.modalService.show(AlertModalComponent,
+                    { initialState: { alermMessage: message }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+                const onClosedSub = (modalRef.content as AlertModalComponent).onClosed.subscribe(() => {
+                    modalRef.hide();
+                    onClosedSub.unsubscribe();
+                });
+                return;
+            }
+
+            if (this.model.useSecurity) {
+                const modalRef = this.modalService.show(ConfirmOperationModalComponent,
+                    {
+                        backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+                    });
+                const onClosedSub = (modalRef.content as ConfirmOperationModalComponent).onClosed.subscribe(result => {
+                    modalRef.hide();
+                    onClosedSub.unsubscribe();
+                    if (result) {
+                        this.checkElementPassword();
+                    }
+                });
+            } else {
+                this.checkElementPassword();
+            }
+        });
+    }
+
+    private checkElementPassword() {
+        if (this.model.enablePassword) {
+            const modalRef = this.modalService.show(VerifyPasswordModalComponent,
+                { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+            const onClosedSub = (modalRef.content as VerifyPasswordModalComponent).onClosed.subscribe(result => {
+                modalRef.hide();
+                onClosedSub.unsubscribe();
+                if (result) {
+                    this.doWriteCharacterValue();
+                }
+            });
+        } else {
+            this.doWriteCharacterValue();
+        }
+    }
+
+    private doWriteCharacterValue() {
+        if (null == this.writeVariableName) { return; }
+
+        const args =
+            new WriteCharacterModalArgs(this.writeVariableName, this.model.isPassword, this.model.charCount, this.displayValue);
+        const modalRef = this.modalService.show(WriteCharacterModalComponent,
+            {
+                initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
+
+        const onClosedSub = (modalRef.content as WriteCharacterModalComponent).onClosed.subscribe(result => {
+            modalRef.hide();
+            onClosedSub.unsubscribe();
+            if (result) {
+                this.variableCommunicator.write(this.writeVariableName, result.value).subscribe();
+
+                this.recordOperation(result.value);
+            }
+        });
+    }
+
+    private recordOperation(newValue: string) {
+        if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
+            this.operationRecordService.record({
+                variableOptionModel: {
+                    variableName: this.writeVariableName,
+                    originValue: this.displayValue,
+                    newValue: newValue
+                },
+                operationDescription: this.model.operationDescription
+            });
+        }
+    }
+
+    private changeGraph(graphResult: GraphResult) {
+        if (!graphResult.failed) {
+            const graph = graphResult.graph;
+            switch (graph.graphType) {
+                case GraphType.Image:
+                    this.rootElement.select('image').attr('xlink:href', graph.source);
+                    break;
+                case GraphType.SVG:
+                    this.rootElement.select('image').attr('xlink:href', graph.source);
+                    break;
+                default:
+                    this.logger.error(new Error(`Unknown graph ${graph.graphType}.`));
+                    this.rootElement.select('image').attr('xlink:href', null);
+                    break;
+            }
+        } else {
+            this.rootElement.select('image').attr('xlink:href', null);
+        }
+    }
+}

package/src/elements/datetime-display/datetime-display-element.ts

@@ -0,0 +1,149 @@
+import * as moment from 'moment';
+import { DateFormatType } from '../../model/datetime-display/date-format-type';
+import { DatetimeDisplay } from '../../model/datetime-display/datetime-display';
+import { DatetimeDisplaySettings } from '../../model/datetime-display/datetime-display-settings';
+import { DatetimeSeparatorType } from '../../model/datetime-display/datetime-separator-type';
+import { TimeFormatType } from '../../model/datetime-display/time-format-type';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { GraphStore, VariableStore } from '../../config';
+import { GraphStateElement } from '../shared/graph/graph-state-element';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { Injector } from '@angular/core';
+
+export class DatetimeDisplayElement extends ConditionalDisplayElement {
+
+    protected readonly model: DatetimeDisplay;
+    protected readonly logger: LoggerService;
+
+    private readonly $dateTimeText: JQuery;
+
+    constructor(element: HTMLElement, injector: Injector,
+        protected readonly permissionChecker: PermissionChecker,
+        protected readonly variableCommunicator: VariableCommunicator,
+        protected readonly variableStore: VariableStore,
+        private readonly graphStore: GraphStore,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        if (this.model.size && this.model.useGraph) {
+            this.initGraph(this.model.size.width, this.model.size.height);
+        }
+        if (this.model.showDate || this.model.showWeek || this.model.showTime) {
+            this.$dateTimeText = this.$element.find('text').last();
+            const format = this.getDatetimeFormat(this.model);
+            this.getAndSetCurrentTime(format);
+            setInterval(() => {
+                this.getAndSetCurrentTime(format);
+            }, 1000);
+        }
+    }
+
+    private getAndSetCurrentTime(format) {
+        const content = moment().local().format(format);
+        this.$dateTimeText.text(content);
+        let fontF = this.$dateTimeText.css('font-family');
+        if (fontF && fontF.lastIndexOf('msyh') === -1) {
+            this.$dateTimeText.css('font-family', fontF += ', msyh');
+        }
+    }
+
+    private getDatetimeFormat(displaySetting: DatetimeDisplaySettings): string {
+        let timeFormat = '';
+        // 显示4位年份
+        const yearFormat = displaySetting.showFullYear ? 'YYYY' : 'YY';
+        // 分隔符
+        let seperator = '';
+        // 日月清零
+        const monthFormat = displaySetting.showMonthDayWithoutZero ? 'M' : 'MM';
+        const dayFormat = displaySetting.showMonthDayWithoutZero ? 'D' : 'DD';
+        if (displaySetting.showDate) {
+            switch (displaySetting.datetimeSeparator) {
+                case DatetimeSeparatorType.Slash:
+                    seperator = '/';
+                    break;
+                case DatetimeSeparatorType.Line:
+                    seperator = '-';
+                    break;
+                case DatetimeSeparatorType.Dot:
+                    seperator = '.';
+                    break;
+                case DatetimeSeparatorType.CHS:
+                    // 年月日格式在构造时候处理
+                    break;
+            }
+            // TODO 方法重写
+            timeFormat = this.getFormat(displaySetting.dateFormat, yearFormat, monthFormat, dayFormat, seperator);
+        }
+        if (displaySetting.showWeek) {
+            timeFormat += ' ddd';
+        }
+        if (displaySetting.showTime) {
+            timeFormat += ' ';
+            if (displaySetting.isTwelveHourHex) {
+                timeFormat += 'A ';
+                switch (displaySetting.timeFormat) {
+                    case TimeFormatType.HHMMSS:
+                        timeFormat += 'h:mm:ss';
+                        break;
+                    case TimeFormatType.HHMM:
+                        timeFormat += 'h:mm';
+                        break;
+                }
+            } else {
+                switch (displaySetting.timeFormat) {
+                    case TimeFormatType.HHMMSS:
+                        timeFormat += 'HH:mm:ss';
+                        break;
+                    case TimeFormatType.HHMM:
+                        timeFormat += 'HH:mm';
+                        break;
+                }
+            }
+        }
+        return timeFormat;
+    }
+
+    private initGraph(width: number, height: number) {
+        if (this.model.useGraph === true) {
+            const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
+            graphStateElement.switchToState(0);
+            this.$element.prepend(graphStateElement.Element);
+        }
+    }
+
+    private getFormat(dateFormatType: DateFormatType, yearFormat: string, monthFormat: string, dayFormat: string, seperator: string): string {
+        const yearSeperator = '年';
+        const monthSeperator = '月';
+        const daySeperator = '日';
+        let _dateFormat = '';
+
+        if (seperator === '') {
+            switch (dateFormatType) {
+                case DateFormatType.YYMMDD:
+                    _dateFormat = yearFormat + yearSeperator + monthFormat + monthSeperator + dayFormat + daySeperator;
+                    break;
+                case DateFormatType.MMDDYY:
+                    _dateFormat = monthFormat + monthSeperator + dayFormat + daySeperator + yearFormat + yearSeperator;
+                    break;
+                case DateFormatType.DDMMYY:
+                    _dateFormat = dayFormat + daySeperator + monthFormat + monthSeperator + yearFormat + yearSeperator;
+                    break;
+            }
+        } else {
+            switch (dateFormatType) {
+                case DateFormatType.YYMMDD:
+                    _dateFormat = yearFormat + seperator + monthFormat + seperator + dayFormat;
+                    break;
+                case DateFormatType.MMDDYY:
+                    _dateFormat = monthFormat + seperator + dayFormat + seperator + yearFormat;
+                    break;
+                case DateFormatType.DDMMYY:
+                    _dateFormat = dayFormat + seperator + monthFormat + seperator + yearFormat;
+                    break;
+            }
+        }
+        return _dateFormat;
+    }
+}

package/src/elements/historical-curve/historical-curve-element-status.ts

@@ -0,0 +1,6 @@
+export enum HistoricalCurveElementStatus {
+    Normal = 0, // 正常
+    Loading = 1, // 加载中
+    Unbound = 2, // 数据源未绑定
+    LoadFailed = 3, // 加载异常
+}