@flexem/fc-gui 3.0.0-alpha.13 → 3.0.0-alpha.131

package/elements/video/video-element.js

@@ -11,6 +11,7 @@ export class VideoElement extends ConditionalDisplayElement {
         this.guiSize = guiSize;
         this.svgRootClass = svgRootClass;
         this.videoId = '';
+        this.isFullscreen = false;
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         this.localization = injector.get(LOCALIZATION);
         this.init();
@@ -50,12 +51,13 @@ export class VideoElement extends ConditionalDisplayElement {
             .attr('width', this.model.size.width)
             .attr('height', this.model.size.height);
         this.videoService.getVideoUrl(this.model.videoTag).then(result => {
-            this.initVideo(result.url, result.isMobileType, this.videoId);
+            this.videoUrl = result.url;
+            this.initVideo(result.url, this.videoId);
         }).catch(() => {
             throw new Error('Failure of the videoService');
         });
     }
-    initVideo(videoUrl, isMobileType, videoId) {
+    initVideo(videoUrl, videoId) {
         const patt = /https:.+.m3u8/;
         if (videoUrl.indexOf('http:') !== -1) {
             videoUrl = videoUrl.replace('http:', 'https:');
@@ -68,6 +70,8 @@ export class VideoElement extends ConditionalDisplayElement {
             this.addVideoAddressToolTip(videoToolTip);
             return;
         }
+        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const isIos = !!navigator.userAgent.match(/(Mac)/i);
         const currentRect = this.$element.find('rect#rect' + videoId).first();
         if (!currentRect.length) {
             return;
@@ -77,17 +81,19 @@ export class VideoElement extends ConditionalDisplayElement {
         const chartHeight = clientRect.height;
         const left = this.model.location.x / this.guiSize.width * $('.' + this.svgRootClass).find('.svg-content').width();
         const top = this.model.location.y / this.guiSize.height * $('.' + this.svgRootClass).find('.svg-content').height();
-        let videoHtml = `<video scareX="${this.model.location.x / this.guiSize.width}"
-    scareY="${this.model.location.y / this.guiSize.height}" id="${videoId}" src="${videoUrl}" style="
-    position: absolute;top:${top}px;left:${left}px;width:${chartWidth}px;height:${chartHeight}px;object-fit:fill;z-index:0"
-    playsInline webkit-playsinline `;
-        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const scareX = this.model.location.x / this.guiSize.width;
+        const scareY = this.model.location.y / this.guiSize.height;
+        if (isIos) {
+            videoUrl = videoUrl + '#t=1';
+        }
+        const preload = isIos ? ' preload=\'metadata\'' : '';
+        let videoHtml = `<video scareX="${scareX}"
+                scareY="${scareY}" id="${videoId}" ${preload} src="${videoUrl}" width="${chartWidth}" height="${chartHeight}"
+                style="position: absolute;top:${top}px;left:${left}px;object-fit:fill;z-index:0;"
+                playsInline webkit-playsinline `;
         if (this.isMobileMode) {
             if (isAndroid) {
-                if (isMobileType) {
-                    videoHtml += ' controls ';
-                }
-                videoHtml += ' autoplay muted></video>';
+                videoHtml += ' muted></video>';
             }
             else {
                 videoHtml += ' controls muted></video>';
@@ -100,10 +106,31 @@ export class VideoElement extends ConditionalDisplayElement {
         if (this.isShow === false) {
             $('#' + this.videoId).hide();
         }
-        this.videoPlayer = new EZUIPlayer(videoId);
-        if (isAndroid && !isMobileType) {
-            this.setAndroidVideo(videoId);
-        }
+        setTimeout(() => {
+            if (isAndroid) {
+                this.setAndroidVideo(videoId);
+            }
+            else if (isIos) {
+                this.setIosVideo(this.videoUrl, videoId);
+            }
+            try {
+                this.videoPlayer = new EZUIPlayer(videoId);
+                if (isAndroid) {
+                    // 确保在 EZUIPlayer 初始化后才调用 play 方法
+                    this.videoPlayer.on('canplay', () => {
+                        this.videoPlayer.play();
+                    });
+                }
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }, 1000);
+        const style = document.createElement('style');
+        style.innerHTML = `#${videoId}::-webkit-media-controls-enclosure {
+            display: none;
+        }`;
+        document.head.append();
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;
@@ -126,35 +153,68 @@ export class VideoElement extends ConditionalDisplayElement {
         this.$element.append(textElement.Element);
     }
     setAndroidVideo(videoId) {
-        let isFullscreen = false;
         const videoElement = $('#' + videoId);
         let preHeight = videoElement.height();
         let preWidth = videoElement.width();
         let preTop = videoElement.css('top');
         let preLeft = videoElement.css('left');
+        const { StatusBar } = window;
         videoElement.on('click', () => {
-            if (!isFullscreen) {
+            if (!this.isFullscreen) {
+                if (StatusBar) {
+                    StatusBar.hide();
+                }
                 preHeight = videoElement.height();
                 preWidth = videoElement.width();
                 preTop = videoElement.css('top');
                 preLeft = videoElement.css('left');
-                const width = document.body.clientWidth;
-                const height = width * 9 / 16;
+                const width = document.documentElement.clientWidth;
+                const height = document.documentElement.clientHeight;
+                videoElement.css('object-fit', 'contain');
+                videoElement.css('background', '#000000');
                 videoElement.css('width', width + 'px');
                 videoElement.css('height', height + 'px');
                 videoElement.css('left', '0px');
                 videoElement.css('top', '0px');
                 videoElement.css('z-index', '99');
-                isFullscreen = true;
+                videoElement.css('position', 'fixed');
+                this.isFullscreen = true;
+                try {
+                    screen.orientation.lock(screen.orientation.type);
+                }
+                catch (error) {
+                    console.error(error);
+                }
             }
             else {
+                videoElement.css('object-fit', 'fill');
                 videoElement.css('width', preWidth + 'px');
                 videoElement.css('height', preHeight + 'px');
                 videoElement.css('left', preLeft);
                 videoElement.css('top', preTop);
                 videoElement.css('z-index', '0');
-                isFullscreen = false;
+                videoElement.css('position', 'absolute');
+                this.isFullscreen = false;
+                try {
+                    if (screen.orientation.type.includes('portrait')) {
+                        StatusBar.show();
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
             }
         });
     }
+    setIosVideo(videoUrl, videoId) {
+        const video = $('#' + this.videoId);
+        video.on('webkitendfullscreen', () => {
+            video.remove();
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+            this.refreshTimer = setTimeout(() => {
+                this.initVideo(videoUrl, videoId);
+            }, 500);
+        });
+    }
 }

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":24,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":25,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":27,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":28,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":29,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":27,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":29,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":31,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":32,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":33,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}],"setIosVideo":[{"__symbolic":"method"}]}}}}]

package/elements/view-operation/view-operation.element.d.ts

@@ -3,11 +3,12 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { Localization } from '../../localization';
 import { GraphStore, VariableStore } from '../../config';
 import { ViewOperationElementModel } from '../../model';
-import { PermissionChecker, OperationRecordService } from '../../service';
+import { PermissionChecker, OperationRecordService, TextLibraryService, LanguageService } from '../../service';
 import { VariableCommunicator } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { PopupViewService } from '../../view/popup-view.service';
 import { SecurityChecker } from '../../security';
+import { GuiContext } from '../../gui/gui-context';
 export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly modalService;
     private readonly graphStore;
@@ -16,13 +17,17 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly popupViewService;
     private readonly hostContainerId;
     private readonly el;
+    private readonly textLibraryService?;
+    private readonly languageService?;
+    private readonly guiContext?;
     protected model: ViewOperationElementModel;
     private readonly logger;
     private readonly viewService;
     private graphStateElement?;
+    private languageChangeSubscription?;
     private touchedScreenX;
     private touchedScreenY;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string, textLibraryService?: TextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
     private initElement;
     private switchToState;
     private initGraph;
@@ -33,4 +38,20 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private closeView;
     private moveView;
     private recordViewOperation;
+    /**
+     * 订阅语种变化事件
+     */
+    private subscribeLanguageChange;
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    private updateTextContent;
+    /**
+     * 获取显示文本
+     */
+    private getDisplayText;
+    /**
+     * 释放资源
+     */
+    dispose(): void;
 }

package/elements/view-operation/view-operation.element.js

@@ -9,7 +9,7 @@ import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/co
 import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
 import { ViewService } from '../../view/view.service';
 export class ViewOperationElement extends ConditionalEnableElement {
-    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId) {
+    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId, textLibraryService, languageService, guiContext) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
@@ -18,20 +18,27 @@ export class ViewOperationElement extends ConditionalEnableElement {
         this.popupViewService = popupViewService;
         this.hostContainerId = hostContainerId;
         this.el = el;
+        this.textLibraryService = textLibraryService;
+        this.languageService = languageService;
+        this.guiContext = guiContext;
         this.touchedScreenX = 0;
         this.touchedScreenY = 0;
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.viewService = injector.get(ViewService);
         this.initElement();
+        this.subscribeLanguageChange();
     }
     initElement() {
         const width = this.model.size.width;
         const height = this.model.size.height;
         this.initGraph(width, height);
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', height).attr('fill', 'transparent');
+        // 初始化文本显示
         const $dateTimeText = this.$element.find('text').last();
         const fontStyle = this.model.label.font.fontStyle;
         $dateTimeText.css('font', fontStyle + ',msyh');
+        // 设置初始文本内容（支持文本库）
+        this.updateTextContent($dateTimeText);
         this.switchToState(0);
         this.rootElement.on('mousedown', () => {
             if (!this.isInitialized) {
@@ -170,6 +177,9 @@ export class ViewOperationElement extends ConditionalEnableElement {
         const viewIndex = this.model.viewIndex;
         if (null != viewIndex) {
             this.popupViewService.popView(viewIndex, this.hostContainerId, this.el).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
+            $(`#${this.hostContainerId} video`)
+                .addClass('video-hidden')
+                .css('visibility', 'hidden');
         }
         else {
             this.logger.error('[GUI]Toggle View:invalid view index');
@@ -177,6 +187,11 @@ export class ViewOperationElement extends ConditionalEnableElement {
     }
     closeView() {
         this.popupViewService.closeView();
+        if ($(`#${this.hostContainerId} > svg > svg`).length === 0) {
+            $(`#${this.hostContainerId} .video-hidden`)
+                .removeClass('video-hidden')
+                .css('visibility', 'visible');
+        }
         this.recordViewOperation();
     }
     moveView(movementX, movementY) {
@@ -191,4 +206,91 @@ export class ViewOperationElement extends ConditionalEnableElement {
             this.operationRecordService.record({ operationDescription: this.model.operationDescription });
         }
     }
+    /**
+     * 订阅语种变化事件
+     */
+    subscribeLanguageChange() {
+        // 只有使用文本库时才需要订阅语种变化
+        if (!this.model.textLibrary || this.model.textLibrary.labelType !== 'textLibrary') {
+            return;
+        }
+        if (this.guiContext && this.guiContext.languageChanged$) {
+            this.languageChangeSubscription = this.guiContext.languageChanged$.subscribe(() => {
+                // 更新文本内容
+                const $dateTimeText = this.$element.find('text').last();
+                this.updateTextContent($dateTimeText);
+            });
+        }
+    }
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    updateTextContent($textElement) {
+        const displayText = this.getDisplayText();
+        $textElement.text(displayText);
+    }
+    /**
+     * 获取显示文本
+     */
+    getDisplayText() {
+        var _a, _b, _c, _d, _e, _f;
+        // 检查是否使用文本库
+        if (this.model.textLibrary && this.model.textLibrary.labelType === 'textLibrary') {
+            const textLibraryId = this.model.textLibrary.selectedTextLibraryItem;
+            const textItem = this.model.textLibrary.selectedTextItem;
+            if (textLibraryId && textItem && this.textLibraryService) {
+                // 获取文本库数据
+                const textLibraryData = this.textLibraryService.getTextLibraryById(typeof textLibraryId === 'string' ? parseInt(textLibraryId, 10) : textLibraryId);
+                if (textLibraryData && textLibraryData.data) {
+                    // 查找对应的文本条目
+                    const textEntry = textLibraryData.data.find(entry => entry.key === textItem.toString());
+                    if (textEntry) {
+                        // 获取当前语种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）
+                        let targetLanguage;
+                        const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+                        if (currentLanguageId === null || currentLanguageId === undefined) {
+                            // 设备未设置当前语种，使用默认语种
+                            targetLanguage = 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) {
+                                targetLanguage = currentLanguage;
+                            }
+                            else {
+                                // 无法获取语种代码，使用默认语种
+                                targetLanguage = defaultLanguage;
+                            }
+                        }
+                        // 返回对应语种的文本
+                        if (textEntry.cultures && textEntry.cultures[targetLanguage]) {
+                            return textEntry.cultures[targetLanguage];
+                        }
+                        // 如果没有对应语种，返回空字符串
+                        return '';
+                    }
+                }
+            }
+            // 文本库配置但未找到数据，返回空字符串
+            return '';
+        }
+        // 默认返回文本内容
+        return this.model.label.content || '';
+    }
+    /**
+     * 释放资源
+     */
+    dispose() {
+        // 取消语种变化订阅
+        if (this.languageChangeSubscription) {
+            this.languageChangeSubscription.unsubscribe();
+            this.languageChangeSubscription = undefined;
+        }
+        if (this.$element) {
+            this.$element.remove();
+        }
+    }
 }

package/elements/view-operation/view-operation.element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ViewOperationElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":20,"character":42},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":31,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":31,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":32,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":33,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":34,"character":23},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":35,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":36,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":37,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":38,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":39,"character":22},{"__symbolic":"reference","module":"../../view/popup-view.service","name":"PopupViewService","line":40,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":29},{"__symbolic":"reference","name":"string"}]}],"initElement":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"executeViewOperation":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"recordViewOperation":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ViewOperationElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":22,"character":42},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":34,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":34,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":35,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":36,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":37,"character":23},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":38,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":39,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":40,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":41,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":42,"character":22},{"__symbolic":"reference","module":"../../view/popup-view.service","name":"PopupViewService","line":43,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":29},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":47,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":48,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":49,"character":38}]}],"initElement":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"executeViewOperation":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"recordViewOperation":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateTextContent":[{"__symbolic":"method"}],"getDisplayText":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/elements/weather/weater-element.js

@@ -45,7 +45,6 @@ export class WeatherElement extends ConditionalDisplayElement {
     }
     handleGettingAddress() {
         this.handleUnusualCommon(this.localization.weatherNotAvailable);
-        setTimeout(() => this.initWeatherInfo(), 1000 * 60);
     }
     handleNoAddress() {
         this.handleUnusualCommon(this.localization.weatherNotAddress);

package/gui/gui-context.d.ts

@@ -1,16 +1,26 @@
 import { ConfigStore } from '../config';
 import { VariableCommunicator } from '../communication';
 import { SecurityChecker } from '../security';
-import { VideoService, WeatherService, PermissionChecker, OperationRecordService } from '../service';
+import { VideoService, WeatherService, PermissionChecker, OperationRecordService, ReleasedVariableService, TextLibraryService, LanguageService, SystemTextLibraryService } from '../service';
+import { Subject } from 'rxjs';
 export interface GuiContext {
     readonly configStore: ConfigStore;
     readonly variableCommunicator: VariableCommunicator;
     readonly permissionChecker: PermissionChecker;
     readonly operationRecordService: OperationRecordService;
+    readonly releasedVariableService: ReleasedVariableService;
     readonly securityChecker: SecurityChecker;
     readonly videoService: VideoService;
     readonly weatherService: WeatherService;
+    readonly textLibraryService?: TextLibraryService;
+    readonly languageService?: LanguageService;
+    readonly systemTextLibraryService?: SystemTextLibraryService;
     readonly configureViewId?: number;
     readonly configureViewCode?: string;
-    dispose(): any;
+    readonly languageChanged$?: Subject<number | null>;
+    getCurrentLanguageId?(): number | null;
+    getDefaultLanguageId?(): number;
+    getLanguageCultureById?(languageId: number | null): string | null;
+    updateCurrentLanguageId?(languageId: number | null): Promise<void>;
+    dispose(): void;
 }

package/gui/gui-host.d.ts

@@ -13,7 +13,7 @@ export declare class GuiHost implements Disposable {
     readonly el: ElementRef;
     private isLoaded;
     private currentView;
-    private currentViewIndex;
+    currentViewIndex: number;
     private containerEl;
     private currentViewSize;
     private currentViewReiszeMode;

package/gui/gui-view.d.ts

@@ -21,6 +21,8 @@ export declare class GuiView implements PopupViewService {
     private mainElement;
     private muskElement;
     private openVariableStatesSubscription;
+    private requestVirtualDeviceState;
+    private virtualDeviceStatesChanged;
     private openVariablesSubscription;
     private openedVariableNames;
     private perViewVariableCommunicator;

package/gui/gui-view.js

@@ -72,11 +72,41 @@ export class GuiView {
             this.openVariableStatesSubscription.unsubscribe();
         }
         this.openedVariableNames = this.mainElement.getVariableNames();
-        if (this.openedVariableNames.length === 0) {
+        // 分离系统变量和普通变量
+        const systemVariables = [];
+        const normalVariablesForState = [];
+        this.openedVariableNames.forEach(variableName => {
+            if (variableName === '当前语种ID') {
+                // 系统变量直接订阅，不需要等待状态
+                systemVariables.push(variableName);
+            }
+            else {
+                normalVariablesForState.push(variableName);
+            }
+        });
+        // 立即订阅系统变量
+        if (systemVariables.length > 0) {
+            this.normalOpenedVariableNames(systemVariables);
+        }
+        if (normalVariablesForState.indexOf('设备状态') !== -1) {
+            if (this.requestVirtualDeviceState) {
+                this.requestVirtualDeviceState.unsubscribe();
+            }
+            if (this.requestVirtualDeviceState) {
+                this.requestVirtualDeviceState.unsubscribe();
+            }
+            this.normalOpenedVariableNames(['设备状态']);
+            this.requestVirtualDeviceState =
+                this.perViewVariableCommunicator.requestVirtualDeviceState().subscribe({
+                    complete: () => { }
+                });
+            normalVariablesForState.splice(normalVariablesForState.indexOf('设备状态'), 1);
+        }
+        if (normalVariablesForState.length === 0) {
             return;
         }
         this.openVariableStatesSubscription =
-            this.perViewVariableCommunicator.subscribeVariableStates(this.openedVariableNames).subscribe((states) => {
+            this.perViewVariableCommunicator.subscribeVariableStates(normalVariablesForState).subscribe((states) => {
                 this.mainElement.reportVariableStates(states);
                 const normalVariableNames = [];
                 each(states, v => {
@@ -181,6 +211,12 @@ export class GuiView {
         if (this.openVariableStatesSubscription) {
             this.openVariableStatesSubscription.unsubscribe();
         }
+        if (this.requestVirtualDeviceState) {
+            this.requestVirtualDeviceState.unsubscribe();
+        }
+        if (this.virtualDeviceStatesChanged) {
+            this.virtualDeviceStatesChanged.unsubscribe();
+        }
         if (this.openVariablesSubscription) {
             this.openVariablesSubscription.unsubscribe();
         }

package/gui/gui-view.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":47,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":48,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":49,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":49,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":50,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":51,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]}}}}]

package/gui/gui.component.d.ts

@@ -24,10 +24,12 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
     initHeight: number;
     lastScale: number;
     isMobileMode: boolean;
+    hostContainerId: string;
     private $svg;
     private host;
     private get viewResizeMode();
     private readonly globalSettings;
+    private readonly viewService;
     constructor(el: ElementRef, localization: Localization, injector: Injector, bsModalService: BsModalService);
     ngOnChanges(changes: {
         [propKey: string]: SimpleChange;
@@ -39,4 +41,5 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
     private onSizeChanged;
     private onResizeModeChanged;
     private onDisplayModeChanged;
+    refreshCurrentPage(): boolean;
 }

package/gui/gui.component.js

@@ -18,6 +18,7 @@ import { Size } from '../model';
 import { DisplayMode, GlobalSettings, ViewResizeMode } from '../settings';
 import { GuiHost } from './gui-host';
 import { Guid } from '../utils/guid';
+import { ViewService } from '../view/view.service';
 let GuiComponent = class GuiComponent {
     constructor(el, localization, injector, bsModalService) {
         this.el = el;
@@ -29,6 +30,7 @@ let GuiComponent = class GuiComponent {
         this.lastScale = 1;
         this.isMobileMode = false;
         this.globalSettings = this.injector.get(GlobalSettings);
+        this.viewService = injector.get(ViewService);
     }
     get viewResizeMode() {
         switch (this.resizeMode) {
@@ -131,11 +133,11 @@ let GuiComponent = class GuiComponent {
             this.$svg = $(this.el.nativeElement).find('div.svgView').first();
             this.$svg.empty();
             const svgRootClass = 'S' + Guid.newGuid().toString('n');
-            const hostContainerId = 'H' + Guid.newGuid().toString('n');
+            this.hostContainerId = 'H' + Guid.newGuid().toString('n');
             this.$svg.addClass(svgRootClass);
             const guiOptions = {
                 svgRootClass: svgRootClass,
-                hostContainerId: hostContainerId,
+                hostContainerId: this.hostContainerId,
                 el: this.el
             };
             const host = new GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
@@ -190,6 +192,17 @@ let GuiComponent = class GuiComponent {
         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;
+    }
 };
 __decorate([
     Input(),

package/gui/gui.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":46,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":46,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":46,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":47,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":48,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":50,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":50,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":49,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":50,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}],"refreshCurrentPage":[{"__symbolic":"method"}]}}}}]