@flexem/fc-gui 3.0.0-alpha.133 → 3.0.0-alpha.135
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 +143 -14
- 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/scroll-alarm/scroll-alarm-element.d.ts +4 -0
- package/elements/scroll-alarm/scroll-alarm-element.js +143 -14
- package/elements/scroll-alarm/scroll-alarm-element.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -42286,12 +42286,8 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42286
42286
|
this.isWaitingForAlarmRefresh = true;
|
|
42287
42287
|
// 设置节流定时器,1秒后执行
|
|
42288
42288
|
this.alarmRefreshThrottleId = setTimeout(() => {
|
|
42289
|
-
//
|
|
42290
|
-
this.
|
|
42291
|
-
// 如果非自动循环模式,需要重新启动滚动
|
|
42292
|
-
if (!this.autoCycle && !this.isScrolling) {
|
|
42293
|
-
this.initScrolling();
|
|
42294
|
-
}
|
|
42289
|
+
// 收到新告警消息,实时替换当前滚动内容,不影响滚动
|
|
42290
|
+
this.replaceCurrentScrollingContent();
|
|
42295
42291
|
// 重置等待刷新标志
|
|
42296
42292
|
this.isWaitingForAlarmRefresh = false;
|
|
42297
42293
|
}, 1000);
|
|
@@ -42517,7 +42513,7 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42517
42513
|
const textContainer = document.createElement('div');
|
|
42518
42514
|
textContainer.style.cssText = `
|
|
42519
42515
|
font: ${this.fontString};
|
|
42520
|
-
color: ${this.headerFont.color || '#
|
|
42516
|
+
color: ${this.headerFont.color || '#e33c39'};
|
|
42521
42517
|
white-space: nowrap;
|
|
42522
42518
|
overflow: visible;
|
|
42523
42519
|
`;
|
|
@@ -42592,7 +42588,7 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42592
42588
|
if (this.displayedItems.length <= 0)
|
|
42593
42589
|
return;
|
|
42594
42590
|
// 每次滚动的距离
|
|
42595
|
-
const scrollStep =
|
|
42591
|
+
const scrollStep = 6; // 减小滚动步长,使滚动更平滑
|
|
42596
42592
|
// 更新位置 - 从右往左滚动
|
|
42597
42593
|
this.currentLeft -= scrollStep;
|
|
42598
42594
|
// 检查是否需要加载下一页(只有在自动循环模式下才需要预加载)
|
|
@@ -42604,9 +42600,9 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42604
42600
|
this.getAlarmData();
|
|
42605
42601
|
}
|
|
42606
42602
|
}
|
|
42607
|
-
// 当内容完全滚出容器左侧时(currentLeft + totalWidth <
|
|
42608
|
-
//
|
|
42609
|
-
if (this.currentLeft + this.totalWidth <
|
|
42603
|
+
// 当内容完全滚出容器左侧时(currentLeft + totalWidth < -50)
|
|
42604
|
+
// 说明所有内容都已经滚出视图(不开启自动循环时多滚动50px确保最后一个字完全滚出)
|
|
42605
|
+
if (this.currentLeft + this.totalWidth < -50) {
|
|
42610
42606
|
if (this.autoCycle) {
|
|
42611
42607
|
// 自动循环模式:无缝衔接回到容器右侧
|
|
42612
42608
|
if (this.hasMoreData) {
|
|
@@ -42802,7 +42798,7 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42802
42798
|
const textContainer = document.createElement('div');
|
|
42803
42799
|
textContainer.style.cssText = `
|
|
42804
42800
|
font: ${this.fontString};
|
|
42805
|
-
color: ${this.headerFont.color || '#
|
|
42801
|
+
color: ${this.headerFont.color || '#e33c39'};
|
|
42806
42802
|
white-space: nowrap;
|
|
42807
42803
|
overflow: visible;
|
|
42808
42804
|
`;
|
|
@@ -42857,9 +42853,9 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42857
42853
|
this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
|
|
42858
42854
|
// 当内容完全滚出容器左侧时(内容右边缘完全移出容器左边缘)
|
|
42859
42855
|
// currentLeft + totalWidth 表示内容右边缘的位置
|
|
42860
|
-
// 当这个值 <=
|
|
42856
|
+
// 当这个值 <= -50 时,表示内容完全不可见(不开启自动循环时多滚动50px确保最后一个字完全滚出)
|
|
42861
42857
|
const rightEdge = this.currentLeft + this.totalWidth;
|
|
42862
|
-
if (rightEdge <=
|
|
42858
|
+
if (rightEdge <= -50) {
|
|
42863
42859
|
if (this.autoCycle) {
|
|
42864
42860
|
// 自动循环模式:重置到容器右侧(使用配置宽度)
|
|
42865
42861
|
this.currentLeft = this.model.size.width;
|
|
@@ -42873,6 +42869,139 @@ class scroll_alarm_element_ScrollAlarmElement extends conditional_dynamic_displa
|
|
|
42873
42869
|
}
|
|
42874
42870
|
}
|
|
42875
42871
|
}
|
|
42872
|
+
/**
|
|
42873
|
+
* 实时替换当前滚动内容(用于告警数据变化时)
|
|
42874
|
+
*/
|
|
42875
|
+
replaceCurrentScrollingContent() {
|
|
42876
|
+
var _a, _b;
|
|
42877
|
+
// 更新查询时间范围
|
|
42878
|
+
this.updateQueryTimeRange();
|
|
42879
|
+
// 查询所有当前应该显示的数据(查询足够多的数据以确保包含所有新增/删除)
|
|
42880
|
+
const selectedStates = (_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.selectState;
|
|
42881
|
+
const timeSort = (_b = this.model.generalSetting) === null || _b === void 0 ? void 0 : _b.timeSort;
|
|
42882
|
+
// 使用一个较大的值确保能查询到所有数据,避免因新增数据导致查询不全
|
|
42883
|
+
const queryCount = Math.max(this.displayedItems.length || this.maxResultCount, 100);
|
|
42884
|
+
// 确定排序参数
|
|
42885
|
+
let sorting = 'TriggeredTime ASC'; // 默认升序
|
|
42886
|
+
if (timeSort === 0 || timeSort === '0') {
|
|
42887
|
+
sorting = 'TriggeredTime ASC'; // 升序
|
|
42888
|
+
}
|
|
42889
|
+
else if (timeSort === 1 || timeSort === '1') {
|
|
42890
|
+
sorting = 'TriggeredTime DESC'; // 降序
|
|
42891
|
+
}
|
|
42892
|
+
// 兼容处理:如果 selectedStates 为空数组或 undefined,传 undefined(不过滤)
|
|
42893
|
+
const stateFilter = (selectedStates && Array.isArray(selectedStates) && selectedStates.length > 0)
|
|
42894
|
+
? selectedStates
|
|
42895
|
+
: undefined;
|
|
42896
|
+
const input = new _tmp_config["c" /* GetAlarmsArgs */](this.alarmNames, this.startTime, this.endTime, queryCount, 0, // skipCount
|
|
42897
|
+
stateFilter, sorting);
|
|
42898
|
+
this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
|
|
42899
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
42900
|
+
if (!result.error && result.items) {
|
|
42901
|
+
const newItems = result.items;
|
|
42902
|
+
// 如果没有数据,清空显示
|
|
42903
|
+
if (newItems.length === 0) {
|
|
42904
|
+
this.displayedItems = [];
|
|
42905
|
+
this.totalWidth = 0;
|
|
42906
|
+
this.pageWidths = [];
|
|
42907
|
+
this.currentPage = 1;
|
|
42908
|
+
this.hasTriedFirstPage = false;
|
|
42909
|
+
this.hasMoreData = true;
|
|
42910
|
+
// 清空DOM
|
|
42911
|
+
if (this.allAlarmsContainer) {
|
|
42912
|
+
this.allAlarmsContainer.innerHTML = '';
|
|
42913
|
+
const containerWidth = this.model.size.width;
|
|
42914
|
+
this.currentLeft = containerWidth;
|
|
42915
|
+
this.allAlarmsContainer.style.left = `${containerWidth}px`;
|
|
42916
|
+
}
|
|
42917
|
+
return;
|
|
42918
|
+
}
|
|
42919
|
+
// 如果是首次加载或当前没有数据,直接渲染并启动滚动
|
|
42920
|
+
if (this.displayedItems.length === 0) {
|
|
42921
|
+
this.displayedItems = newItems;
|
|
42922
|
+
this.allAlarmsContainer.innerHTML = '';
|
|
42923
|
+
this.totalWidth = 0;
|
|
42924
|
+
this.pageWidths = [];
|
|
42925
|
+
// 设置 hasMoreData 状态,防止滚动时误触发 getAlarmData
|
|
42926
|
+
this.hasMoreData = result.totalCount > newItems.length;
|
|
42927
|
+
// 设置初始位置到容器右侧
|
|
42928
|
+
this.currentLeft = this.container.clientWidth;
|
|
42929
|
+
this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
|
|
42930
|
+
this.renderNewPage(newItems);
|
|
42931
|
+
// 启动滚动
|
|
42932
|
+
if (!this.isScrolling) {
|
|
42933
|
+
this.initScrolling();
|
|
42934
|
+
}
|
|
42935
|
+
return;
|
|
42936
|
+
}
|
|
42937
|
+
// 清空所有DOM元素
|
|
42938
|
+
this.allAlarmsContainer.innerHTML = '';
|
|
42939
|
+
// 获取语言设置
|
|
42940
|
+
const language = ((_c = (_b = (_a = window.abp) === null || _a === void 0 ? void 0 : _a.localization) === null || _b === void 0 ? void 0 : _b.currentLanguage) === null || _c === void 0 ? void 0 : _c.name) || 'zh-Hans';
|
|
42941
|
+
const isChinese = language === 'zh-Hans' || language === 'zh';
|
|
42942
|
+
// 重新创建所有新数据的DOM元素
|
|
42943
|
+
for (let i = 0; i < newItems.length; i++) {
|
|
42944
|
+
const alarm = newItems[i];
|
|
42945
|
+
const textContainer = document.createElement('div');
|
|
42946
|
+
textContainer.style.cssText = `
|
|
42947
|
+
font: ${this.fontString};
|
|
42948
|
+
color: ${this.headerFont.color || '#e33c39'};
|
|
42949
|
+
white-space: nowrap;
|
|
42950
|
+
overflow: visible;
|
|
42951
|
+
`;
|
|
42952
|
+
if (this.headerFont.isUnderline) {
|
|
42953
|
+
textContainer.style.textDecoration = 'underline';
|
|
42954
|
+
}
|
|
42955
|
+
const contentParts = [];
|
|
42956
|
+
// 显示触发时间
|
|
42957
|
+
if (((_d = this.model.generalSetting) === null || _d === void 0 ? void 0 : _d.showTriggerTime) && alarm.triggeredTime) {
|
|
42958
|
+
const formattedTime = moment(alarm.triggeredTime).format('YYYY/MM/DD HH:mm:ss');
|
|
42959
|
+
contentParts.push(formattedTime);
|
|
42960
|
+
}
|
|
42961
|
+
// 显示告警等级
|
|
42962
|
+
if (((_e = this.model.generalSetting) === null || _e === void 0 ? void 0 : _e.showAlarmLevel) && alarm.alarmLevel !== undefined) {
|
|
42963
|
+
const levelMap = isChinese ? ['警告', '次要', '主要', '严重'] : ['Warning', 'Minor', 'Major', 'Critical'];
|
|
42964
|
+
const alarmLevel = levelMap[alarm.alarmLevel] || (isChinese ? '警告' : 'Warning');
|
|
42965
|
+
contentParts.push(alarmLevel);
|
|
42966
|
+
}
|
|
42967
|
+
// 显示告警名称
|
|
42968
|
+
if (((_f = this.model.generalSetting) === null || _f === void 0 ? void 0 : _f.showAlarmName) && alarm.name) {
|
|
42969
|
+
contentParts.push(alarm.name);
|
|
42970
|
+
}
|
|
42971
|
+
// 显示告警内容
|
|
42972
|
+
if (((_g = this.model.generalSetting) === null || _g === void 0 ? void 0 : _g.showAlarmContent) && alarm.message) {
|
|
42973
|
+
contentParts.push(alarm.message);
|
|
42974
|
+
}
|
|
42975
|
+
// 显示告警状态
|
|
42976
|
+
if (((_h = this.model.generalSetting) === null || _h === void 0 ? void 0 : _h.showAlarmState) && alarm.state !== undefined) {
|
|
42977
|
+
const stateMap = isChinese ? ['触发/未确认', '触发/已确认', '恢复/未确认', '恢复/已确认'] : ['Triggered/Unconfirmed', 'Triggered/Confirmed', 'Restored/Unconfirmed', 'Restored/Confirmed'];
|
|
42978
|
+
const alarmState = stateMap[alarm.state] || (isChinese ? '触发/未确认' : 'Triggered/Unconfirmed');
|
|
42979
|
+
contentParts.push(alarmState);
|
|
42980
|
+
}
|
|
42981
|
+
textContainer.textContent = contentParts.join(' ');
|
|
42982
|
+
textContainer.setAttribute('data-index', i.toString());
|
|
42983
|
+
this.allAlarmsContainer.appendChild(textContainer);
|
|
42984
|
+
}
|
|
42985
|
+
// 重新计算totalWidth
|
|
42986
|
+
const allChildren = Array.from(this.allAlarmsContainer.children);
|
|
42987
|
+
let newTotalWidth = 0;
|
|
42988
|
+
allChildren.forEach(child => {
|
|
42989
|
+
newTotalWidth += child.offsetWidth + 80;
|
|
42990
|
+
});
|
|
42991
|
+
if (newTotalWidth > 0) {
|
|
42992
|
+
newTotalWidth -= 80; // 移除最后一个gap
|
|
42993
|
+
}
|
|
42994
|
+
// 更新状态
|
|
42995
|
+
this.displayedItems = newItems;
|
|
42996
|
+
this.totalWidth = newTotalWidth;
|
|
42997
|
+
this.pageWidths = [newTotalWidth]; // 重置为单页
|
|
42998
|
+
this.hasMoreData = result.totalCount > newItems.length;
|
|
42999
|
+
// 收到新告警时,重置滚动位置到容器右侧,确保新内容能被滚动出来显示
|
|
43000
|
+
this.currentLeft = this.container.clientWidth;
|
|
43001
|
+
this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
|
|
43002
|
+
}
|
|
43003
|
+
});
|
|
43004
|
+
}
|
|
42876
43005
|
}
|
|
42877
43006
|
|
|
42878
43007
|
// CONCATENATED MODULE: ./.tmp/elements/main-element.ts
|