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

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.
Files changed (184) hide show
  1. package/CHANGELOG.md +439 -1
  2. package/assets/img/black_first_page.png +0 -0
  3. package/assets/img/black_last_page.png +0 -0
  4. package/assets/img/black_next_page.png +0 -0
  5. package/assets/img/black_previous_page.png +0 -0
  6. package/bundles/@flexem/fc-gui.umd.js +23330 -19502
  7. package/bundles/@flexem/fc-gui.umd.js.map +1 -1
  8. package/bundles/@flexem/fc-gui.umd.min.js +5 -5
  9. package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
  10. package/communication/variable/variable-communicator.d.ts +4 -0
  11. package/communication/variable/variable-value.d.ts +4 -1
  12. package/communication/variable/variable-value.js +4 -1
  13. package/communication/variable/variable-value.metadata.json +1 -1
  14. package/config/alarm/alarm.store.d.ts +6 -0
  15. package/config/alarm/alarm.store.js +0 -0
  16. package/config/alarm/alarm.store.metadata.json +1 -0
  17. package/config/alarm/get-alarms-args.d.ts +12 -0
  18. package/config/alarm/get-alarms-args.js +13 -0
  19. package/config/alarm/get-alarms-args.metadata.json +1 -0
  20. package/config/alarm/index.d.ts +2 -0
  21. package/config/alarm/index.js +1 -0
  22. package/config/alarm/index.metadata.json +1 -0
  23. package/config/config-store.d.ts +2 -0
  24. package/config/history-data/get-history-data-args.d.ts +14 -3
  25. package/config/history-data/get-history-data-args.js +5 -3
  26. package/config/history-data/get-history-data-args.metadata.json +1 -1
  27. package/config/history-data/history-data.model.d.ts +7 -1
  28. package/config/history-data/history-data.model.js +9 -1
  29. package/config/history-data/history-data.model.metadata.json +1 -1
  30. package/config/history-data/index.d.ts +1 -1
  31. package/config/history-data/index.js +1 -1
  32. package/config/history-data/index.metadata.json +1 -1
  33. package/config/index.d.ts +1 -0
  34. package/config/index.js +1 -0
  35. package/config/index.metadata.json +1 -1
  36. package/elements/air-quality/air-quality-element.d.ts +31 -0
  37. package/elements/air-quality/air-quality-element.js +194 -0
  38. package/elements/air-quality/air-quality-element.metadata.json +1 -0
  39. package/elements/alarm/alarm-element.d.ts +69 -0
  40. package/elements/alarm/alarm-element.js +497 -0
  41. package/elements/alarm/alarm-element.metadata.json +1 -0
  42. package/elements/bar-graph-element.d.ts +10 -2
  43. package/elements/bar-graph-element.js +135 -5
  44. package/elements/bar-graph-element.metadata.json +1 -1
  45. package/elements/base/readable-element.d.ts +6 -1
  46. package/elements/base/readable-element.js +64 -2
  47. package/elements/base/readable-element.metadata.json +1 -1
  48. package/elements/base/state-control-element.d.ts +3 -1
  49. package/elements/base/state-control-element.js +3 -0
  50. package/elements/datetime-display/datetime-display-element.d.ts +1 -0
  51. package/elements/datetime-display/datetime-display-element.js +10 -2
  52. package/elements/datetime-display/datetime-display-element.metadata.json +1 -1
  53. package/elements/datetime-display/time-zone-select-json.d.ts +8 -0
  54. package/elements/datetime-display/time-zone-select-json.js +558 -0
  55. package/elements/historical-curve/historical-curve.element.d.ts +39 -3
  56. package/elements/historical-curve/historical-curve.element.js +499 -39
  57. package/elements/historical-curve/historical-curve.element.metadata.json +1 -1
  58. package/elements/main-element.d.ts +1 -0
  59. package/elements/main-element.js +59 -9
  60. package/elements/main-element.metadata.json +1 -1
  61. package/elements/meter-element.d.ts +7 -1
  62. package/elements/meter-element.js +76 -7
  63. package/elements/meter-element.metadata.json +1 -1
  64. package/elements/numerical-display/numerical-display-element.d.ts +16 -3
  65. package/elements/numerical-display/numerical-display-element.js +83 -11
  66. package/elements/numerical-display/numerical-display-element.metadata.json +1 -1
  67. package/elements/per-view-variable-communicator.d.ts +3 -0
  68. package/elements/per-view-variable-communicator.js +11 -0
  69. package/elements/per-view-variable-communicator.metadata.json +1 -1
  70. package/elements/ring-graph/ring-graph-element.d.ts +13 -1
  71. package/elements/ring-graph/ring-graph-element.js +164 -3
  72. package/elements/ring-graph/ring-graph-element.metadata.json +1 -1
  73. package/elements/scroll-alarm/scroll-alarm-element.d.ts +54 -0
  74. package/elements/scroll-alarm/scroll-alarm-element.js +517 -0
  75. package/elements/scroll-alarm/scroll-alarm-element.metadata.json +1 -0
  76. package/elements/shared/graph/graph-state-element.js +0 -3
  77. package/elements/shared/text/text-element.d.ts +9 -0
  78. package/elements/shared/text/text-element.js +33 -2
  79. package/elements/shared/text/text-element.metadata.json +1 -1
  80. package/elements/shared/text/text-state-element.d.ts +25 -2
  81. package/elements/shared/text/text-state-element.js +138 -63
  82. package/elements/shared/text/text-state-element.metadata.json +1 -1
  83. package/elements/static-elements/hyperlink-element.d.ts +24 -2
  84. package/elements/static-elements/hyperlink-element.js +101 -3
  85. package/elements/static-elements/hyperlink-element.metadata.json +1 -1
  86. package/elements/static-elements/text-element.d.ts +23 -2
  87. package/elements/static-elements/text-element.js +96 -3
  88. package/elements/static-elements/text-element.metadata.json +1 -1
  89. package/elements/switch-indicator-light/bit-switch-operator.d.ts +1 -0
  90. package/elements/switch-indicator-light/bit-switch-operator.js +19 -0
  91. package/elements/switch-indicator-light/bit-switch-operator.metadata.json +1 -1
  92. package/elements/switch-indicator-light/switch-indicator-light-element.d.ts +18 -2
  93. package/elements/switch-indicator-light/switch-indicator-light-element.js +120 -25
  94. package/elements/switch-indicator-light/switch-indicator-light-element.metadata.json +1 -1
  95. package/elements/switch-indicator-light/switch-operator.d.ts +1 -0
  96. package/elements/switch-indicator-light/word-switch-operator.d.ts +1 -0
  97. package/elements/switch-indicator-light/word-switch-operator.js +6 -0
  98. package/elements/switch-indicator-light/word-switch-operator.metadata.json +1 -1
  99. package/elements/video/video-element.d.ts +4 -0
  100. package/elements/video/video-element.js +81 -21
  101. package/elements/video/video-element.metadata.json +1 -1
  102. package/elements/view-operation/view-operation.element.d.ts +23 -2
  103. package/elements/view-operation/view-operation.element.js +103 -1
  104. package/elements/view-operation/view-operation.element.metadata.json +1 -1
  105. package/elements/weather/weater-element.js +0 -1
  106. package/gui/gui-context.d.ts +12 -2
  107. package/gui/gui-host.d.ts +1 -1
  108. package/gui/gui-view.d.ts +2 -0
  109. package/gui/gui-view.js +38 -2
  110. package/gui/gui-view.metadata.json +1 -1
  111. package/gui/gui.component.d.ts +3 -0
  112. package/gui/gui.component.js +15 -2
  113. package/gui/gui.component.metadata.json +1 -1
  114. package/localization/localization.service.d.ts +7 -0
  115. package/localization/localization.service.js +10 -3
  116. package/localization/localization.service.metadata.json +1 -1
  117. package/localization/localization.service.zh_CN.js +8 -1
  118. package/localization/localization.service.zh_CN.metadata.json +1 -1
  119. package/modal/write-value/write-value-modal-args.d.ts +5 -1
  120. package/modal/write-value/write-value-modal-args.js +3 -1
  121. package/modal/write-value/write-value-modal-args.metadata.json +1 -1
  122. package/modal/write-value/write-value-modal.component.d.ts +12 -7
  123. package/modal/write-value/write-value-modal.component.html +9 -4
  124. package/modal/write-value/write-value-modal.component.js +73 -15
  125. package/modal/write-value/write-value-modal.component.metadata.json +1 -1
  126. package/model/air-quality/air-quality-info.d.ts +23 -0
  127. package/model/air-quality/air-quality-info.js +4 -0
  128. package/model/air-quality/air-quality-info.metadata.json +1 -0
  129. package/model/air-quality/air-quality.model.d.ts +7 -0
  130. package/model/air-quality/air-quality.model.js +0 -0
  131. package/model/air-quality/air-quality.model.metadata.json +1 -0
  132. package/model/alarm/alarm.model.d.ts +13 -0
  133. package/model/alarm/alarm.model.js +0 -0
  134. package/model/alarm/alarm.model.metadata.json +1 -0
  135. package/model/bar-graph/bar-graph.d.ts +4 -0
  136. package/model/base/font-setting-model.d.ts +6 -0
  137. package/model/base/font-setting-model.metadata.json +1 -1
  138. package/model/base/readable-model.d.ts +4 -0
  139. package/model/datetime-display/datetime-display.d.ts +1 -0
  140. package/model/historical-curve/historical-curve-axis-settings.d.ts +11 -0
  141. package/model/historical-curve/historical-curve-axis-settings.js +5 -0
  142. package/model/historical-curve/historical-curve-axis-settings.metadata.json +1 -1
  143. package/model/historical-curve/historical-curve-chanel.model.d.ts +8 -0
  144. package/model/historical-curve/historical-curve.data-settings.d.ts +18 -1
  145. package/model/historical-curve/historical-curve.data-settings.metadata.json +1 -1
  146. package/model/meter/meter.d.ts +4 -0
  147. package/model/ring-graph/ring-graph.model.d.ts +8 -0
  148. package/model/scroll-alarm/scroll-alarm.model.d.ts +21 -0
  149. package/model/scroll-alarm/scroll-alarm.model.js +0 -0
  150. package/model/scroll-alarm/scroll-alarm.model.metadata.json +1 -0
  151. package/model/switch-indicator-light/bit-switch-operation.d.ts +2 -1
  152. package/model/switch-indicator-light/bit-switch-operation.js +1 -0
  153. package/model/switch-indicator-light/bit-switch-operation.metadata.json +1 -1
  154. package/model/switch-indicator-light/switch-indicator-light.d.ts +2 -0
  155. package/model/view-operation/view-operation-element.model.d.ts +7 -1
  156. package/package.json +1 -1
  157. package/public_api.js +1 -0
  158. package/remote/communication/variable/remote-variable-communicator.d.ts +22 -0
  159. package/remote/communication/variable/remote-variable-communicator.js +122 -2
  160. package/remote/communication/variable/remote-variable-communicator.metadata.json +1 -1
  161. package/remote/communication/variable/remote-variable-protocol.d.ts +5 -0
  162. package/service/index.d.ts +4 -0
  163. package/service/index.js +1 -0
  164. package/service/index.metadata.json +1 -1
  165. package/service/language.service.d.ts +37 -0
  166. package/service/language.service.js +0 -0
  167. package/service/language.service.metadata.json +1 -0
  168. package/service/released-variable/index.d.ts +1 -0
  169. package/service/released-variable/index.js +0 -0
  170. package/service/released-variable/index.metadata.json +1 -0
  171. package/service/released-variable/released-variable.service.d.ts +4 -0
  172. package/service/released-variable/released-variable.service.js +0 -0
  173. package/service/released-variable/released-variable.service.metadata.json +1 -0
  174. package/service/system-text-library.service.d.ts +76 -0
  175. package/service/system-text-library.service.js +28 -0
  176. package/service/system-text-library.service.metadata.json +1 -0
  177. package/service/text-library.service.d.ts +49 -0
  178. package/service/text-library.service.js +0 -0
  179. package/service/text-library.service.metadata.json +1 -0
  180. package/service/weather.service.d.ts +1 -0
  181. package/shared/gui-consts.d.ts +3 -0
  182. package/shared/gui-consts.js +3 -0
  183. package/shared/gui-consts.metadata.json +1 -1
  184. package/utils/data-type/fbox-data-type.service.js +40 -0
@@ -0,0 +1,497 @@
1
+ import * as d3 from 'd3';
2
+ import { SYSTEM_TEXT_LIBRARY_TYPES, ALARM_TABLE_HEADER_KEYS, TIME_PERIOD_KEYS } from '../../service';
3
+ import { ConditionalDisplayElement } from '../base/conditional-display-element';
4
+ import { GetAlarmsArgs } from '../../config';
5
+ import * as moment from 'moment';
6
+ import { LOGGER_SERVICE_TOKEN } from '../../logger';
7
+ var AlaertElementStatus;
8
+ (function (AlaertElementStatus) {
9
+ AlaertElementStatus[AlaertElementStatus["Normal"] = 0] = "Normal";
10
+ AlaertElementStatus[AlaertElementStatus["Loading"] = 1] = "Loading"; // 加载中
11
+ })(AlaertElementStatus || (AlaertElementStatus = {}));
12
+ export class AlarmElement extends ConditionalDisplayElement {
13
+ constructor(element, injector, permissionChecker, variableCommunicator, variableStore, alarmsStore, signalRAppId, systemTextLibraryService, languageService, guiContext) {
14
+ var _a;
15
+ super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
16
+ this.alarmsStore = alarmsStore;
17
+ this.systemTextLibraryService = systemTextLibraryService;
18
+ this.languageService = languageService;
19
+ this.guiContext = guiContext;
20
+ this.elementStatus = AlaertElementStatus.Loading;
21
+ this.displayOption = {
22
+ dataLimit: 500,
23
+ dataZoomHeight: 32,
24
+ marginLeft: 1,
25
+ marginRight: 20,
26
+ mobileMinWidth: 450,
27
+ operationAreaHeight: 32,
28
+ operationAreaMarginTop: 10,
29
+ operationSelectFontSize: '16px',
30
+ operationButtonWidth: 24,
31
+ operationButtonHeight: 24,
32
+ operationButtonMargin: 4
33
+ };
34
+ this.alarmNames = [];
35
+ this.alarmList = [];
36
+ this.currentAlarmList = [];
37
+ this.page = 0;
38
+ this.totalCount = 0;
39
+ this.pageSize = 5;
40
+ this.rootElement.selectAll('*').remove();
41
+ this.setStatusAsLoading();
42
+ this.logger = injector.get(LOGGER_SERVICE_TOKEN);
43
+ this.variableCommunicator = variableCommunicator;
44
+ this.pageSize = this.model.generalSetting.pageSize;
45
+ localStorage.setItem('simulate-time', moment().valueOf() + '');
46
+ // 订阅语种变化事件
47
+ this.subscribeLanguageChange();
48
+ if (this.model.filterSetting) {
49
+ this.alarmNames = this.model.filterSetting.detailsData.map(item => item.name);
50
+ this.currentTimePeriod = (_a = this.model.filterSetting) === null || _a === void 0 ? void 0 : _a.displayPeriod;
51
+ this.updateQueryTimeRange();
52
+ if (this.model.filterSetting.alarmType) {
53
+ this.refreshIntervalId = setInterval(() => {
54
+ this.loadFirstPage();
55
+ this.logger.debug(`[GUI]Refresh Alarm Table:${d3.time.format('%x %X')(new Date())}`);
56
+ }, this.model.filterSetting.refreshCycle * 60 * 1000);
57
+ }
58
+ else {
59
+ variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
60
+ alarms.forEach(alarm => {
61
+ if (this.alarmNames.indexOf(alarm.name) !== -1) {
62
+ this.getAlarmData();
63
+ return;
64
+ }
65
+ });
66
+ });
67
+ }
68
+ this.getAlarmData();
69
+ }
70
+ else {
71
+ this.totalCount = 0;
72
+ this.alarmList = [];
73
+ this.renderElement();
74
+ }
75
+ }
76
+ dispose() {
77
+ clearInterval(this.refreshIntervalId);
78
+ if (this.element) {
79
+ this.element.tooltip.hidden(true);
80
+ }
81
+ // 取消语种变化订阅
82
+ if (this.languageChangeSubscription) {
83
+ this.languageChangeSubscription.unsubscribe();
84
+ this.languageChangeSubscription = undefined;
85
+ }
86
+ this.logger.debug(`[GUI]Dispose Alarm Table Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
87
+ }
88
+ /**
89
+ * 订阅语种变化事件
90
+ */
91
+ subscribeLanguageChange() {
92
+ if (this.guiContext && this.guiContext.languageChanged$) {
93
+ this.languageChangeSubscription = this.guiContext.languageChanged$.subscribe(() => {
94
+ // 只更新文案,不重新查询数据
95
+ this.updateLanguageTexts();
96
+ });
97
+ }
98
+ }
99
+ /**
100
+ * 更新语种相关的文案(表头和时间段选择器)
101
+ */
102
+ updateLanguageTexts() {
103
+ var _a;
104
+ // 更新表头文本
105
+ const headerCells = this.$element.find('table th');
106
+ for (let col = 0; col < 4 && col < headerCells.length; col++) {
107
+ headerCells.eq(col).text(this.getHeaderTextByColumn(col));
108
+ }
109
+ // 更新时间段选择器选项
110
+ if ((_a = this.model.filterSetting) === null || _a === void 0 ? void 0 : _a.alarmType) {
111
+ const selectElement = this.rootElement.select('select');
112
+ if (!selectElement.empty()) {
113
+ // 重新生成时间段数据
114
+ const updatedTimePeriods = this.getValidTimePeriods();
115
+ this.timePeriods = updatedTimePeriods;
116
+ // 更新选项文本
117
+ const options = selectElement.selectAll('option');
118
+ options.each(function (_d, i) {
119
+ if (i < updatedTimePeriods.length) {
120
+ d3.select(this).text(updatedTimePeriods[i].name);
121
+ }
122
+ });
123
+ }
124
+ }
125
+ }
126
+ /**
127
+ * 获取当前语种的 culture 代码
128
+ */
129
+ getCurrentCulture() {
130
+ var _a, _b, _c, _e, _f, _g;
131
+ // 获取当前语种ID
132
+ 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;
133
+ // 确定要使用的语种代码(culture)
134
+ const defaultLanguage = ((_e = this.languageService) === null || _e === void 0 ? void 0 : _e.getDefaultLanguage()) || 'zh-CN';
135
+ if (currentLanguageId === null || currentLanguageId === undefined) {
136
+ // 设备未设置当前语种,使用默认语种
137
+ return defaultLanguage;
138
+ }
139
+ else {
140
+ // 设备已设置当前语种,获取对应的语种代码
141
+ const currentLanguage = (_g = (_f = this.guiContext) === null || _f === void 0 ? void 0 : _f.getLanguageCultureById) === null || _g === void 0 ? void 0 : _g.call(_f, currentLanguageId);
142
+ if (currentLanguage) {
143
+ return currentLanguage;
144
+ }
145
+ else {
146
+ // 无法获取语种代码,使用默认语种
147
+ return defaultLanguage;
148
+ }
149
+ }
150
+ }
151
+ /**
152
+ * 根据列索引获取表头翻译(从系统文本库获取多语种翻译)
153
+ * 固定4项表头,按列索引顺序:告警名称、告警内容、告警等级、时间
154
+ */
155
+ getHeaderTextByColumn(columnIndex) {
156
+ if (columnIndex < 0 || columnIndex > 3) {
157
+ return '';
158
+ }
159
+ const currentCulture = this.getCurrentCulture();
160
+ const systemType = SYSTEM_TEXT_LIBRARY_TYPES.COMPONENT_BUILTIN;
161
+ const headerKeys = [
162
+ ALARM_TABLE_HEADER_KEYS.ALARM_NAME,
163
+ ALARM_TABLE_HEADER_KEYS.ALARM_MESSAGE,
164
+ ALARM_TABLE_HEADER_KEYS.ALARM_LEVEL,
165
+ ALARM_TABLE_HEADER_KEYS.TIME
166
+ ];
167
+ // 尝试从系统文本库获取翻译
168
+ if (this.systemTextLibraryService) {
169
+ const translation = this.systemTextLibraryService.getSystemTextValue(systemType, headerKeys[columnIndex], currentCulture);
170
+ if (translation) {
171
+ return translation;
172
+ }
173
+ }
174
+ return '';
175
+ }
176
+ getValidTimePeriods() {
177
+ const timePeriods = new Array();
178
+ timePeriods.push({ key: 6, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_THIRTY_MINUTES) });
179
+ timePeriods.push({ key: 1, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_ONE_HOUR) });
180
+ timePeriods.push({ key: 7, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_EIGHT_HOURS) });
181
+ timePeriods.push({ key: 2, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_TWENTY_FOUR_HOURS) });
182
+ timePeriods.push({ key: 3, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_SEVEN_DAYS) });
183
+ timePeriods.push({ key: 4, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_THIRTY_DAYS) });
184
+ timePeriods.push({ key: 5, name: this.getTimePeriodText(TIME_PERIOD_KEYS.LAST_ONE_YEAR) });
185
+ return timePeriods;
186
+ }
187
+ /**
188
+ * 获取时间段文案(从系统文本库获取多语种翻译)
189
+ */
190
+ getTimePeriodText(textKey) {
191
+ const currentCulture = this.getCurrentCulture();
192
+ const systemType = SYSTEM_TEXT_LIBRARY_TYPES.COMPONENT_BUILTIN;
193
+ if (this.systemTextLibraryService) {
194
+ const translation = this.systemTextLibraryService.getSystemTextValue(systemType, textKey, currentCulture);
195
+ if (translation) {
196
+ return translation;
197
+ }
198
+ }
199
+ return '';
200
+ }
201
+ getAlarmData() {
202
+ this.rootElement.selectAll('*').remove();
203
+ this.setStatusAsLoading();
204
+ clearTimeout(this.getAlarmDataId);
205
+ this.getAlarmDataId = setTimeout(() => {
206
+ this.timePeriods = this.getValidTimePeriods();
207
+ if (this.model.filterSetting.alarmType) {
208
+ this.updateQueryTimeRange();
209
+ const input = new GetAlarmsArgs(this.alarmNames, this.startTime, this.endTime, this.pageSize, this.page * this.pageSize);
210
+ this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
211
+ if (!result.error) {
212
+ this.totalCount = result.totalCount;
213
+ this.alarmList = result.items.map(item => [
214
+ item.name,
215
+ item.message,
216
+ item.alarmLevel,
217
+ item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
218
+ ]);
219
+ this.renderElement();
220
+ }
221
+ });
222
+ }
223
+ else {
224
+ const input = new GetAlarmsArgs(this.alarmNames, undefined, undefined, this.pageSize, this.page * this.pageSize);
225
+ this.alarmsStore.getCurrentAlarms(input).subscribe(result => {
226
+ if (!result.error) {
227
+ this.totalCount = result.totalCount;
228
+ this.currentAlarmList = result.items;
229
+ if (!result.items.length && result.totalCount) {
230
+ this.page = 0;
231
+ this.getAlarmData();
232
+ return;
233
+ }
234
+ this.alarmList = this.currentAlarmList.map(item => [
235
+ item.name,
236
+ item.message,
237
+ item.alarmLevel,
238
+ item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
239
+ ]);
240
+ this.renderElement();
241
+ }
242
+ });
243
+ }
244
+ }, 500);
245
+ }
246
+ renderElement() {
247
+ const elementHeight = this.model.size.height;
248
+ this.element = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
249
+ this.element.setAttribute('width', this.model.size.width.toString());
250
+ this.element.setAttribute('height', elementHeight.toString());
251
+ this.$element.append(this.element);
252
+ const table = document.createElement('table');
253
+ table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
254
+ height: ${elementHeight - 39}`;
255
+ let tr = document.createElement('tr');
256
+ let fontString = '';
257
+ if (this.model.generalSetting.headerFont.isItalic) {
258
+ fontString += 'italic ';
259
+ }
260
+ if (this.model.generalSetting.headerFont.isBold) {
261
+ fontString += 'bold ';
262
+ }
263
+ fontString += this.model.generalSetting.headerFont.fontSize + ' ' + this.model.generalSetting.headerFont.fontFamily;
264
+ tr.style.cssText = `height: ${this.model.heights[0]}px;
265
+ background: ${this.model.generalSetting.headerFillColor};
266
+ color: ${this.model.generalSetting.headerFont.color};
267
+ font: ${fontString};
268
+ text-align: ${this.model.generalSetting.headerFont.textAlign};
269
+ ${this.model.generalSetting.headerFont.isUnderline ? 'text-decoration: underline' : ''};
270
+ vertical-align: middle;`;
271
+ for (let col = 0; col < 4; col++) {
272
+ const th = document.createElement('th');
273
+ th.innerHTML = this.getHeaderTextByColumn(col);
274
+ th.style.cssText = `width: ${this.model.widths[col] / this.model.size.width * 100}%;
275
+ border-style: solid;
276
+ border-color: ${this.model.generalSetting.splitLine};
277
+ border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
278
+ tr.appendChild(th);
279
+ }
280
+ table.appendChild(tr);
281
+ const levelColors = ['#3695FF', '#FFE900', '#FFA800', '#E84F4F'];
282
+ for (let row = 0; row < this.pageSize; row++) {
283
+ tr = document.createElement('tr');
284
+ tr.style.cssText = `height: ${this.model.heights[row + 1]}px;
285
+ background: ${this.model.generalSetting.tableFillColor};
286
+ font: ${this.model.generalSetting.fontStyle};
287
+ color: ${this.model.generalSetting.fontColor};
288
+ text-align: ${this.model.generalSetting.textAlign};
289
+ vertical-align: middle;`;
290
+ for (let col = 0; col < 4; col++) {
291
+ const td = document.createElement('td');
292
+ td.style.cssText = `border-style: solid;
293
+ border-color: ${this.model.generalSetting.splitLine};
294
+ border-top-width: ${this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;
295
+ border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
296
+ if (this.alarmList[row]) {
297
+ if (col !== 2) {
298
+ td.innerHTML = this.alarmList[row][col];
299
+ td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
300
+ }
301
+ else {
302
+ const alarmLevel = document.createElement('div');
303
+ let alarmHeight = parseInt(this.model.generalSetting.fontSize) + 15;
304
+ if (alarmHeight > this.model.heights[row + 1])
305
+ alarmHeight = this.model.heights[row + 1];
306
+ let margin = '0 15px';
307
+ if (this.model.generalSetting.textAlign === 'left') {
308
+ margin = '0 30px 0 0';
309
+ }
310
+ else if (this.model.generalSetting.textAlign === 'right') {
311
+ margin = '0 0 0 30px';
312
+ }
313
+ alarmLevel.style.cssText = `margin: ${margin};
314
+ border-radius: 5px;
315
+ background: ${levelColors[this.alarmList[row][col]]};
316
+ color: #ffffff;
317
+ width: ${this.model.widths[col] - 30}px;
318
+ height: ${alarmHeight}px;
319
+ max-height: ${this.model.heights[row + 1]}px;
320
+ display: flex;
321
+ justify-content: center;
322
+ align-items: center;
323
+ ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
324
+ alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
325
+ td.appendChild(alarmLevel);
326
+ }
327
+ }
328
+ else if (col === 2) {
329
+ const alarmLevel = document.createElement('div');
330
+ let margin = '0 15px';
331
+ if (this.model.generalSetting.textAlign === 'left') {
332
+ margin = '0 30px 0 0';
333
+ }
334
+ else if (this.model.generalSetting.textAlign === 'right') {
335
+ margin = '0 0 0 30px';
336
+ }
337
+ alarmLevel.style.cssText = `margin: ${margin};
338
+ width: ${this.model.widths[col] - 30}px;`;
339
+ td.appendChild(alarmLevel);
340
+ }
341
+ tr.appendChild(td);
342
+ }
343
+ table.appendChild(tr);
344
+ }
345
+ this.element.appendChild(table);
346
+ this.renderOperationArea(this.model.size.width, elementHeight - 39);
347
+ }
348
+ renderOperationArea(chartWidth, chartHeight) {
349
+ var _a;
350
+ const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
351
+ .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
352
+ .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
353
+ if ((_a = this.model.filterSetting) === null || _a === void 0 ? void 0 : _a.alarmType) {
354
+ const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
355
+ .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
356
+ const displayTimePeriod = this.rootElement.select('select').property('value');
357
+ this.updateTimeRange(displayTimePeriod);
358
+ this.getAlarmData();
359
+ });
360
+ const options = selectElement.selectAll('option').data(this.timePeriods).enter().append('option');
361
+ options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod));
362
+ }
363
+ const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
364
+ operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
365
+ .style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
366
+ .style('background-color', 'inherit')
367
+ .on('click', () => { this.loadLastPage(); });
368
+ operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
369
+ .style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
370
+ .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
371
+ .style('background-color', 'inherit')
372
+ .on('click', () => { this.loadNextPage(); });
373
+ operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
374
+ .style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
375
+ .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
376
+ .style('background-color', 'inherit')
377
+ .on('click', () => { this.loadPreviousPage(); });
378
+ operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
379
+ .style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
380
+ .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
381
+ .style('background-color', 'inherit')
382
+ .on('click', () => { this.loadFirstPage(); });
383
+ this.setStatusAsNormal();
384
+ }
385
+ updateTimeRange(timePeriodType) {
386
+ this.currentTimePeriod = +timePeriodType;
387
+ this.updateQueryTimeRange();
388
+ }
389
+ updateQueryTimeRange() {
390
+ this.endTime = moment();
391
+ switch (this.currentTimePeriod) {
392
+ case 1:
393
+ this.startTime = moment().subtract(1, 'hours');
394
+ break;
395
+ case 3:
396
+ this.startTime = moment().subtract(7, 'days');
397
+ break;
398
+ case 4:
399
+ this.startTime = moment().subtract(30, 'days');
400
+ break;
401
+ case 5:
402
+ this.startTime = moment().subtract(1, 'years');
403
+ break;
404
+ case 6:
405
+ this.startTime = moment().subtract(30, 'minutes');
406
+ break;
407
+ case 7:
408
+ this.startTime = moment().subtract(8, 'hours');
409
+ break;
410
+ default:
411
+ this.startTime = moment().subtract(1, 'days');
412
+ }
413
+ }
414
+ loadFirstPage() {
415
+ if (this.page > 0) {
416
+ this.page = 0;
417
+ this.getAlarmData();
418
+ }
419
+ }
420
+ loadNextPage() {
421
+ let last_page = Math.ceil(this.totalCount / this.pageSize);
422
+ if (last_page)
423
+ last_page--;
424
+ if (this.page < last_page) {
425
+ this.page++;
426
+ this.getAlarmData();
427
+ }
428
+ }
429
+ loadPreviousPage() {
430
+ if (this.page > 0) {
431
+ this.page--;
432
+ this.getAlarmData();
433
+ }
434
+ }
435
+ loadLastPage() {
436
+ let last_page = Math.ceil(this.totalCount / this.pageSize);
437
+ if (last_page)
438
+ last_page--;
439
+ if (this.page !== last_page) {
440
+ this.page = last_page;
441
+ this.getAlarmData();
442
+ }
443
+ }
444
+ setStatusAsNormal() {
445
+ this.elementStatus = AlaertElementStatus.Normal;
446
+ this.clearStatus();
447
+ }
448
+ setStatusAsLoading() {
449
+ this.elementStatus = AlaertElementStatus.Loading;
450
+ this.renderStatus('assets/img/loading.svg', '#226abc');
451
+ }
452
+ renderStatus(icon, stroke) {
453
+ if (this.elementStatus === AlaertElementStatus.Normal) {
454
+ this.clearStatus();
455
+ return;
456
+ }
457
+ this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
458
+ .attr('width', this.model.size.width)
459
+ .attr('height', this.model.size.height);
460
+ const document = this.$element[0].ownerDocument;
461
+ const currentRect = this.$element.find('rect#StateFrame').first();
462
+ if (!currentRect.length) {
463
+ return;
464
+ }
465
+ this.$element.find('image#StateImage').remove();
466
+ const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
467
+ if (imgObj) {
468
+ let x = Number(currentRect[0].getAttribute('width')) - 20;
469
+ const currentRectX = currentRect[0].getAttribute('x');
470
+ if (currentRectX !== null) {
471
+ x += Number(currentRectX);
472
+ }
473
+ currentRect[0].setAttribute('stroke', stroke);
474
+ currentRect[0].setAttribute('stroke-opacity', '0.5');
475
+ imgObj.href.baseVal = icon;
476
+ imgObj.setAttributeNS(null, 'id', 'StateImage');
477
+ imgObj.setAttributeNS(null, 'x', x.toString());
478
+ imgObj.setAttributeNS(null, 'y', '0');
479
+ imgObj.setAttributeNS(null, 'height', '20px');
480
+ imgObj.setAttributeNS(null, 'width', '20px');
481
+ const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
482
+ imgObj.appendChild(titleElement);
483
+ this.$element.append(imgObj);
484
+ }
485
+ }
486
+ clearStatus() {
487
+ const currentRect = this.$element.find('rect#StateFrame').first();
488
+ if (!currentRect.length) {
489
+ return;
490
+ }
491
+ const stroke = currentRect[0].getAttribute('stroke');
492
+ if (stroke) {
493
+ currentRect[0].removeAttribute('stroke');
494
+ }
495
+ this.$element.find('image#StateImage').remove();
496
+ }
497
+ }
@@ -0,0 +1 @@
1
+ [{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":55,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":56,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":57,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":58,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":59,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":60,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":62,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":63,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":64,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getHeaderTextByColumn":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]
@@ -5,17 +5,25 @@ import { ReadableElement } from './base/readable-element';
5
5
  import { VariableStore } from '../config';
6
6
  import { PermissionChecker } from '../service';
7
7
  export declare class BarGraphElement extends ReadableElement {
8
+ private static DEFAULT_MIN_VALUE;
9
+ private static DEFAULT_MAX_VALUE;
8
10
  readonly model: BarGraph;
9
11
  private readonly $barRect;
10
12
  private readonly barElement;
11
13
  private readonly $barText;
12
- private readonly defaultTransform;
14
+ private defaultTransform;
13
15
  private defaultBarColor;
14
16
  private defaultUpperLimitColor;
15
17
  private defaultLowerLimitColor;
16
18
  private barText;
19
+ private valueObj;
20
+ private isNeedUpdateScale;
21
+ private needAddNumber;
17
22
  get readVariableName(): string;
18
23
  constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
24
+ private initTransform;
19
25
  private initFrameNode;
20
- updateVariableValue(value: number): void;
26
+ private updateValueObj;
27
+ private updateScale;
28
+ updateVariableValue(value: number, variableName: any): void;
21
29
  }