From 7a0470e331a978ee206cd8fcf3dfd5642f14eb83 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期二, 17 三月 2026 09:23:44 +0800
Subject: [PATCH] #
---
src/main/webapp/static/js/devicePingLog/devicePingLog.js | 200 ++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 168 insertions(+), 32 deletions(-)
diff --git a/src/main/webapp/static/js/devicePingLog/devicePingLog.js b/src/main/webapp/static/js/devicePingLog/devicePingLog.js
index 5e002d9..60b73c3 100644
--- a/src/main/webapp/static/js/devicePingLog/devicePingLog.js
+++ b/src/main/webapp/static/js/devicePingLog/devicePingLog.js
@@ -49,6 +49,9 @@
el: "#app",
data: function () {
return {
+ lastOptionsData: null,
+ lastOverviewData: null,
+ lastTrendData: null,
overviewLoading: false,
detailLoading: false,
devices: [],
@@ -111,11 +114,21 @@
},
samplingConfigText: function () {
var config = this.samplingConfig || createEmptySamplingConfig();
- return "閲囨牱 " + config.intervalMs + " ms / 瓒呮椂 " + config.timeoutMs + " ms / 姣忔牱鏈� " + config.probeCount + " 娆�";
+ return this.i18n("devicePingLog.samplingConfigText", "閲囨牱 {0} ms / 瓒呮椂 {1} ms / 姣忔牱鏈� {2} 娆�", [
+ this.formatNumber(config.intervalMs),
+ this.formatNumber(config.timeoutMs),
+ this.formatNumber(config.probeCount)
+ ]);
}
},
mounted: function () {
var self = this;
+ this.refreshDocumentTitle();
+ if (window.WCS_I18N && typeof window.WCS_I18N.onReady === "function") {
+ window.WCS_I18N.onReady(function () {
+ self.refreshLocalizedState();
+ });
+ }
this.$nextTick(function () {
self.loadOptions();
self.loadOverview();
@@ -132,6 +145,126 @@
this.disposeCharts();
},
methods: {
+ formatMessage: function (text, params) {
+ var list = Array.isArray(params) ? params : [params];
+ return String(text == null ? "" : text).replace(/\{(\d+)\}/g, function (match, index) {
+ return list[index] == null ? "" : list[index];
+ });
+ },
+ i18n: function (key, fallback, params) {
+ if (window.WCS_I18N && typeof window.WCS_I18N.t === "function") {
+ var translated = window.WCS_I18N.t(key, params);
+ if (translated && translated !== key) {
+ return translated;
+ }
+ }
+ return this.formatMessage(fallback || key, params);
+ },
+ translateLegacyText: function (text) {
+ if (text == null || text === "") {
+ return text;
+ }
+ if (window.WCS_I18N && typeof window.WCS_I18N.tl === "function") {
+ return window.WCS_I18N.tl(String(text));
+ }
+ return text;
+ },
+ getCurrentLocale: function () {
+ if (window.WCS_I18N && typeof window.WCS_I18N.getLocale === "function") {
+ return window.WCS_I18N.getLocale();
+ }
+ return "zh-CN";
+ },
+ refreshDocumentTitle: function () {
+ document.title = this.i18n("devicePingLog.title", "璁惧缃戠粶鍒嗘瀽");
+ },
+ refreshLocalizedState: function () {
+ this.refreshDocumentTitle();
+ if (this.lastOptionsData) {
+ this.applyOptionsData(this.lastOptionsData);
+ }
+ if (this.lastOverviewData) {
+ this.applyOverviewData(this.lastOverviewData);
+ }
+ if (this.lastTrendData) {
+ this.applyTrendData(this.lastTrendData);
+ } else {
+ this.$forceUpdate();
+ this.updateCharts();
+ }
+ },
+ resolveStatusText: function (status) {
+ var code = status == null ? "" : String(status).toUpperCase();
+ if (code === "OK") {
+ return this.i18n("devicePingLog.status.ok", "姝ｅ父");
+ }
+ if (code === "UNSTABLE") {
+ return this.i18n("devicePingLog.status.unstable", "娉㈠姩");
+ }
+ if (code === "TIMEOUT") {
+ return this.i18n("devicePingLog.status.timeout", "瓒呮椂");
+ }
+ if (code === "ERROR") {
+ return this.i18n("devicePingLog.status.error", "寮傚父");
+ }
+ if (code === "NO_DATA") {
+ return this.i18n("devicePingLog.status.noData", "鏆傛棤鏁版嵁");
+ }
+ if (!code) {
+ return "--";
+ }
+ return this.translateLegacyText(status);
+ },
+ applyOptionsData: function (data) {
+ this.lastOptionsData = data || {};
+ this.refreshDocumentTitle();
+ this.devices = (data && data.devices) || [];
+ this.availableDays = (data && data.days) || [];
+ this.samplingConfig = Object.assign(createEmptySamplingConfig(), data && data.samplingConfig ? data.samplingConfig : {});
+ },
+ applyOverviewData: function (data) {
+ this.lastOverviewData = data || {};
+ this.overviewSummary = Object.assign(createEmptyOverviewSummary(), data && data.summary ? data.summary : {});
+ this.overviewRows = this.normalizeOverviewRows(data && data.devices ? data.devices : []);
+ },
+ applyTrendData: function (data) {
+ this.lastTrendData = data || {};
+ this.detailSummary = this.normalizeDetailSummary(data && data.summary ? data.summary : {});
+ this.series = (data && data.series) || [];
+ this.alerts = this.normalizeAlerts(data && data.alerts ? data.alerts : []);
+ this.updateCharts();
+ },
+ normalizeOverviewRows: function (rows) {
+ var self = this;
+ return (rows || []).map(function (item) {
+ var result = Object.assign({}, item);
+ result.statusText = self.resolveStatusText(item && item.status);
+ result.message = self.translateLegacyText(item && item.message);
+ result.label = self.translateLegacyText(item && item.label);
+ return result;
+ });
+ },
+ normalizeDetailSummary: function (summary) {
+ var result = Object.assign(createEmptyDetailSummary(), summary || {});
+ result.latestStatus = this.resolveStatusText(result.latestStatus);
+ return result;
+ },
+ normalizeAlerts: function (alerts) {
+ var self = this;
+ return (alerts || []).map(function (item) {
+ var result = Object.assign({}, item);
+ result.status = self.resolveStatusText(item && item.status);
+ result.message = self.translateLegacyText(item && item.message);
+ return result;
+ });
+ },
+ formatNumber: function (value) {
+ var num = Number(value || 0);
+ if (!isFinite(num)) {
+ return "0";
+ }
+ return num.toLocaleString(this.getCurrentLocale());
+ },
loadOptions: function () {
var self = this;
$.ajax({
@@ -141,15 +274,13 @@
success: function (res) {
if (res && res.code === 200) {
var data = res.data || {};
- self.devices = data.devices || [];
- self.availableDays = data.days || [];
- self.samplingConfig = Object.assign(createEmptySamplingConfig(), data.samplingConfig || {});
+ self.applyOptionsData(data);
return;
}
- self.$message.error((res && res.msg) || "璁惧閰嶇疆鍔犺浇澶辫触");
+ self.$message.error((res && res.msg) || self.i18n("devicePingLog.optionsLoadFailed", "璁惧閰嶇疆鍔犺浇澶辫触"));
},
error: function () {
- self.$message.error("璁惧閰嶇疆鍔犺浇澶辫触");
+ self.$message.error(self.i18n("devicePingLog.optionsLoadFailed", "璁惧閰嶇疆鍔犺浇澶辫触"));
}
});
},
@@ -162,19 +293,17 @@
method: "GET",
success: function (res) {
if (res && res.code === 200) {
- var data = res.data || {};
- self.overviewSummary = Object.assign(createEmptyOverviewSummary(), data.summary || {});
- self.overviewRows = data.devices || [];
+ self.applyOverviewData(res.data || {});
return;
}
self.overviewSummary = createEmptyOverviewSummary();
self.overviewRows = [];
- self.$message.error((res && res.msg) || "鎬昏鏁版嵁鍔犺浇澶辫触");
+ self.$message.error((res && res.msg) || self.i18n("devicePingLog.overviewLoadFailed", "鎬昏鏁版嵁鍔犺浇澶辫触"));
},
error: function () {
self.overviewSummary = createEmptyOverviewSummary();
self.overviewRows = [];
- self.$message.error("鎬昏鏁版嵁鍔犺浇澶辫触");
+ self.$message.error(self.i18n("devicePingLog.overviewLoadFailed", "鎬昏鏁版嵁鍔犺浇澶辫触"));
},
complete: function () {
self.overviewLoading = false;
@@ -204,12 +333,12 @@
return;
}
if (!this.detailFilters.range || this.detailFilters.range.length !== 2) {
- this.$message.warning("璇烽�夋嫨鏃堕棿鑼冨洿");
+ this.$message.warning(this.i18n("devicePingLog.selectTimeRange", "璇烽�夋嫨鏃堕棿鑼冨洿"));
return;
}
var parts = this.detailFilters.deviceKey.split("#");
if (parts.length !== 2) {
- this.$message.warning("璁惧淇℃伅鏃犳晥");
+ this.$message.warning(this.i18n("devicePingLog.invalidDevice", "璁惧淇℃伅鏃犳晥"));
return;
}
var self = this;
@@ -226,25 +355,21 @@
},
success: function (res) {
if (res && res.code === 200) {
- var data = res.data || {};
- self.detailSummary = Object.assign(createEmptyDetailSummary(), data.summary || {});
- self.series = data.series || [];
- self.alerts = data.alerts || [];
- self.updateCharts();
+ self.applyTrendData(res.data || {});
return;
}
self.detailSummary = createEmptyDetailSummary();
self.series = [];
self.alerts = [];
self.updateCharts();
- self.$message.error((res && res.msg) || "璁惧璇︽儏鍔犺浇澶辫触");
+ self.$message.error((res && res.msg) || self.i18n("devicePingLog.detailLoadFailed", "璁惧璇︽儏鍔犺浇澶辫触"));
},
error: function () {
self.detailSummary = createEmptyDetailSummary();
self.series = [];
self.alerts = [];
self.updateCharts();
- self.$message.error("璁惧璇︽儏鍔犺浇澶辫触");
+ self.$message.error(self.i18n("devicePingLog.detailLoadFailed", "璁惧璇︽儏鍔犺浇澶辫触"));
},
complete: function () {
self.detailLoading = false;
@@ -336,21 +461,21 @@
bottom: 10
}],
series: [{
- name: "骞冲潎",
+ name: this.i18n("devicePingLog.chart.latency.avg", "骞冲潎"),
type: "line",
showSymbol: false,
sampling: "lttb",
data: this.series.map(function (item) { return item.avgLatencyMs; }),
lineStyle: { width: 2 }
}, {
- name: "鏈�灏�",
+ name: this.i18n("devicePingLog.chart.latency.min", "鏈�灏�"),
type: "line",
showSymbol: false,
sampling: "lttb",
data: this.series.map(function (item) { return item.minLatencyMs; }),
lineStyle: { width: 1.5 }
}, {
- name: "鏈�澶�",
+ name: this.i18n("devicePingLog.chart.latency.max", "鏈�澶�"),
type: "line",
showSymbol: false,
sampling: "lttb",
@@ -389,14 +514,14 @@
},
yAxis: [{
type: "value",
- name: "澶辫触",
+ name: this.i18n("devicePingLog.chart.availability.failAxis", "澶辫触"),
splitLine: { lineStyle: { color: "#edf2f7" } },
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: "#7f92a5" }
}, {
type: "value",
- name: "鎴愬姛鐜�%",
+ name: this.i18n("devicePingLog.chart.availability.successRateAxis", "鎴愬姛鐜�%"),
min: 0,
max: 100,
splitLine: { show: false },
@@ -412,7 +537,7 @@
bottom: 10
}],
series: [{
- name: "澶辫触娆℃暟",
+ name: this.i18n("devicePingLog.chart.availability.failCount", "澶辫触娆℃暟"),
type: "bar",
yAxisIndex: 0,
barMaxWidth: 18,
@@ -421,7 +546,7 @@
borderRadius: [6, 6, 0, 0]
}
}, {
- name: "鎴愬姛鐜�",
+ name: this.i18n("devicePingLog.chart.availability.successRate", "鎴愬姛鐜�"),
type: "line",
yAxisIndex: 1,
showSymbol: false,
@@ -444,22 +569,33 @@
return "offline";
},
formatLatency: function (value) {
+ var num;
if (value === null || value === undefined || value === "") {
return "--";
}
- return value + " ms";
+ num = Number(value);
+ if (!isFinite(num)) {
+ return "--";
+ }
+ return num.toLocaleString(this.getCurrentLocale(), { maximumFractionDigits: 2 }) + " ms";
},
formatPercent: function (value) {
+ var num;
if (value === null || value === undefined || value === "") {
return "--";
}
- return value + "%";
+ num = Number(value);
+ if (!isFinite(num)) {
+ return "--";
+ }
+ return num.toLocaleString(this.getCurrentLocale(), { maximumFractionDigits: 2 }) + "%";
},
formatPacketSize: function (value) {
- if (value === null || value === undefined || value === "" || value < 0) {
- return "绯荤粺榛樿";
+ var num = Number(value);
+ if (!isFinite(num) || num < 0) {
+ return this.i18n("devicePingLog.systemDefaultPacketSize", "绯荤粺榛樿");
}
- return value + " B";
+ return num.toLocaleString(this.getCurrentLocale()) + " B";
}
}
});
--
Gitblit v1.9.1