@flexem/fc-gui 3.0.0-alpha.140 → 3.0.0-alpha.142
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/@flexem/fc-gui.umd.js +58 -5
- package/bundles/@flexem/fc-gui.umd.js.map +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
- package/elements/historical-curve/historical-curve.element.js +16 -1
- package/elements/scroll-alarm/scroll-alarm-element.js +4 -4
- package/elements/video/video-element.d.ts +6 -0
- package/elements/video/video-element.js +38 -0
- package/elements/video/video-element.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -57,9 +57,11 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
|
|
|
57
57
|
this.displayOption.operationButtonMargin = 6;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
+
// 初始化时间段数据(此时文本库可能未加载,先填充空文本占位)
|
|
61
|
+
this.timePeriods = this.getValidTimePeriods();
|
|
60
62
|
this.loadFirstPage();
|
|
61
63
|
this.initKeyboardListener();
|
|
62
|
-
// 订阅语种变化事件
|
|
64
|
+
// 订阅语种变化事件 和 文本库缓存更新事件
|
|
63
65
|
this.subscribeLanguageChange();
|
|
64
66
|
}
|
|
65
67
|
dispose() {
|
|
@@ -92,12 +94,25 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
|
|
|
92
94
|
* 订阅语种变化事件
|
|
93
95
|
*/
|
|
94
96
|
subscribeLanguageChange() {
|
|
97
|
+
var _a;
|
|
95
98
|
if (this.guiContext && this.guiContext.languageChanged$) {
|
|
96
99
|
this.languageChangeSubscription = this.guiContext.languageChanged$.subscribe(() => {
|
|
97
100
|
// 只更新时间段选择器的文案,不重新查询数据
|
|
98
101
|
this.updateLanguageTexts();
|
|
99
102
|
});
|
|
100
103
|
}
|
|
104
|
+
// 订阅文本库缓存更新事件,解决首次加载时文本库未就绪导致下拉选项为空的问题
|
|
105
|
+
if ((_a = this.systemTextLibraryService) === null || _a === void 0 ? void 0 : _a.cacheUpdated) {
|
|
106
|
+
const cacheSubscription = this.systemTextLibraryService.cacheUpdated.subscribe(() => {
|
|
107
|
+
this.updateLanguageTexts();
|
|
108
|
+
});
|
|
109
|
+
if (this.languageChangeSubscription) {
|
|
110
|
+
this.languageChangeSubscription.add(cacheSubscription);
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
this.languageChangeSubscription = cacheSubscription;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
101
116
|
}
|
|
102
117
|
/**
|
|
103
118
|
* 更新语种相关的文案(时间段选择器)
|
|
@@ -268,7 +268,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
|
|
|
268
268
|
this.container = document.createElement('div');
|
|
269
269
|
this.container.style.cssText = `
|
|
270
270
|
height: ${elementHeight}px;
|
|
271
|
-
width:
|
|
271
|
+
width: ${elementWidth}px;
|
|
272
272
|
background-color: ${((_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.headerFillColor) || '#ffffff'};
|
|
273
273
|
display: flex;
|
|
274
274
|
align-items: center;
|
|
@@ -279,11 +279,11 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
|
|
|
279
279
|
`;
|
|
280
280
|
this.element.appendChild(this.container);
|
|
281
281
|
// 创建一个大容器来包含所有告警项,初始位置在容器右侧(从右边开始滚入)
|
|
282
|
+
// 使用 position: relative 而非 absolute,避免 iOS Safari foreignObject 内 absolute 定位逃逸到页面左上角的 bug
|
|
282
283
|
this.allAlarmsContainer = document.createElement('div');
|
|
283
284
|
this.allAlarmsContainer.style.cssText = `
|
|
284
|
-
position:
|
|
285
|
-
|
|
286
|
-
transform: translateY(-50%);
|
|
285
|
+
position: relative;
|
|
286
|
+
flex-shrink: 0;
|
|
287
287
|
display: flex;
|
|
288
288
|
align-items: center;
|
|
289
289
|
gap: 80px;
|
|
@@ -19,6 +19,9 @@ export declare class VideoElement extends ConditionalDisplayElement {
|
|
|
19
19
|
private refreshTimer;
|
|
20
20
|
private isFullscreen;
|
|
21
21
|
private videoUrl;
|
|
22
|
+
private visibilityChangeHandler;
|
|
23
|
+
private timeUpdateWatchdog;
|
|
24
|
+
private lastTimeUpdate;
|
|
22
25
|
constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, videoService: VideoService, guiSize: Size, svgRootClass: string, signalRAppId: string);
|
|
23
26
|
dispose(): void;
|
|
24
27
|
hide(): void;
|
|
@@ -27,5 +30,8 @@ export declare class VideoElement extends ConditionalDisplayElement {
|
|
|
27
30
|
private initVideo;
|
|
28
31
|
private addVideoAddressToolTip;
|
|
29
32
|
private setAndroidVideo;
|
|
33
|
+
private initVisibilityHandler;
|
|
34
|
+
private startTimeUpdateWatchdog;
|
|
35
|
+
private clearTimeUpdateWatchdog;
|
|
30
36
|
private setIosVideo;
|
|
31
37
|
}
|
|
@@ -12,8 +12,10 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
12
12
|
this.svgRootClass = svgRootClass;
|
|
13
13
|
this.videoId = '';
|
|
14
14
|
this.isFullscreen = false;
|
|
15
|
+
this.lastTimeUpdate = 0;
|
|
15
16
|
this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
|
|
16
17
|
this.localization = injector.get(LOCALIZATION);
|
|
18
|
+
this.initVisibilityHandler();
|
|
17
19
|
this.init();
|
|
18
20
|
}
|
|
19
21
|
dispose() {
|
|
@@ -23,6 +25,10 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
23
25
|
$('div.' + this.svgRootClass + ' video').each(function () {
|
|
24
26
|
$(this).remove();
|
|
25
27
|
});
|
|
28
|
+
if (this.visibilityChangeHandler) {
|
|
29
|
+
document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
|
|
30
|
+
}
|
|
31
|
+
this.clearTimeUpdateWatchdog();
|
|
26
32
|
}
|
|
27
33
|
hide() {
|
|
28
34
|
super.hide();
|
|
@@ -121,6 +127,7 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
121
127
|
this.videoPlayer.play();
|
|
122
128
|
});
|
|
123
129
|
}
|
|
130
|
+
this.startTimeUpdateWatchdog(videoId);
|
|
124
131
|
}
|
|
125
132
|
catch (err) {
|
|
126
133
|
console.log(err);
|
|
@@ -206,6 +213,37 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
206
213
|
}
|
|
207
214
|
});
|
|
208
215
|
}
|
|
216
|
+
initVisibilityHandler() {
|
|
217
|
+
this.visibilityChangeHandler = () => {
|
|
218
|
+
if (!document.hidden && this.videoUrl && this.videoId) {
|
|
219
|
+
this.initVideo(this.videoUrl, this.videoId);
|
|
220
|
+
}
|
|
221
|
+
};
|
|
222
|
+
document.addEventListener('visibilitychange', this.visibilityChangeHandler);
|
|
223
|
+
}
|
|
224
|
+
startTimeUpdateWatchdog(videoId) {
|
|
225
|
+
this.clearTimeUpdateWatchdog();
|
|
226
|
+
this.lastTimeUpdate = Date.now();
|
|
227
|
+
const videoEl = document.getElementById(videoId);
|
|
228
|
+
if (videoEl && videoEl.tagName === 'VIDEO') {
|
|
229
|
+
videoEl.addEventListener('timeupdate', () => {
|
|
230
|
+
this.lastTimeUpdate = Date.now();
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
this.timeUpdateWatchdog = setInterval(() => {
|
|
234
|
+
if (document.hidden)
|
|
235
|
+
return;
|
|
236
|
+
if (Date.now() - this.lastTimeUpdate > 30000) {
|
|
237
|
+
this.initVideo(this.videoUrl, this.videoId);
|
|
238
|
+
}
|
|
239
|
+
}, 30000);
|
|
240
|
+
}
|
|
241
|
+
clearTimeUpdateWatchdog() {
|
|
242
|
+
if (this.timeUpdateWatchdog) {
|
|
243
|
+
clearInterval(this.timeUpdateWatchdog);
|
|
244
|
+
this.timeUpdateWatchdog = null;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
209
247
|
setIosVideo(videoUrl, videoId) {
|
|
210
248
|
const video = $('#' + this.videoId);
|
|
211
249
|
video.on('webkitendfullscreen', () => {
|
|
@@ -1 +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":
|
|
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":30,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":31,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":33,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":34,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":35,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":36,"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"}],"initVisibilityHandler":[{"__symbolic":"method"}],"startTimeUpdateWatchdog":[{"__symbolic":"method"}],"clearTimeUpdateWatchdog":[{"__symbolic":"method"}],"setIosVideo":[{"__symbolic":"method"}]}}}}]
|