Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修复echarts不显示bug #330

Merged
merged 6 commits into from
Mar 2, 2024
+44 −24
Merged

修复echarts不显示bug #330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
94a1bdb
angel-kanade模版增加主题切换功能
nap0o Feb 27, 2024
9213336
Merge branch 'naiba:master' into master
nap0o Mar 2, 2024
78d3058
Add files via upload
nap0o Mar 2, 2024
eaf5559
调整legend图例间距
nap0o Mar 2, 2024
6130faa
渲染方式调整会canvas
nap0o Mar 2, 2024
6128c8d
Update home.html
nap0o Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions resource/template/theme-default/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,15 +140,15 @@
page: 'index',
defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}},
data: [],
servers: [],
groups: [],
cache: [],
chartDataList: [],
activePopup: null,
},
mixins: [mixinsVue],
created() {
this.data = JSON.parse('{{.Servers}}').servers;
this.servers = JSON.parse('{{.Servers}}').servers;
this.group()
},
methods: {
Expand Down Expand Up @@ -188,8 +188,9 @@
const MaxTCPPingValue = {{.MaxTCPPingValue}} ? {{.MaxTCPPingValue}} : 300;
const isMobile = this.checkIsMobile();
const fontSize = isMobile ? 10 : 9;
const itemGap = isMobile ? 5 : 2;
const itemWidth = isMobile ? 20 : 15;
const itemGap = isMobile ? 6 : 6;
const itemWidth = isMobile ? 10 : 10;
const itemHeight = isMobile ? 10 : 10;
const gridLeft = 25;
const gridRight = 12;
const fontColor = "rgba(0, 0, 0, 0.68)";
Expand All @@ -210,10 +211,10 @@
if (avgDelay > 0.9 * MaxTCPPingValue) {
loss += 1;
}
return [new Date(item.created_at[index]).toLocaleString(), avgDelay];
return [item.created_at[index], avgDelay];
});
const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
item.monitor_name = item.monitor_name + " " + lossRate + "%";
item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
return {
name: item.monitor_name,
type: 'line',
Expand All @@ -236,6 +237,7 @@
}
},
legend: {
icon: 'rect',
data: chartData.map(item => item.monitor_name),
show: true,
textStyle: {
Expand All @@ -249,6 +251,7 @@
bottom: 0,
itemGap: itemGap,
itemWidth: itemWidth,
itemHeight: itemHeight,
padding: [5,0,5,0]
},
xAxis: {
Expand Down Expand Up @@ -282,7 +285,7 @@
color: fontColor
},
grid: {
top: '40',
top: '30',
bottom: '20',
left: gridLeft,
right: gridRight
Expand Down Expand Up @@ -357,7 +360,7 @@
return '';
},
group() {
this.groups = groupingData(this.data, "Tag")
this.groups = groupingData(this.servers, "Tag")
},
formatPercent(live, used, total) {
const percent = live ? (parseInt(used / total * 100) || 0) : -1
Expand Down
2 changes: 1 addition & 1 deletion resource/template/theme-server-status/content-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<a data-toggle="dropdown"><i class="bi bi-gear-wide-connected" style="position:relative;top:1px;margin-right:3px;font-size:1.1rem;"></i>{{tr "Feature" }}<b class="caret"></b></a>
<ul class="dropdown-menu" style="min-width:100px;">
<li><a href="/service"><i class="rss icon"></i>{{tr "Services" }}</a></li>
<li><a href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a></li>
<li><a href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a></li>
</ul>
</li>
</template>
Expand Down
47 changes: 32 additions & 15 deletions resource/template/theme-server-status/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@
page: 'index',
defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}},
cache: [],
servers: [],
nodesTag: [],
nodesNoTag: [],
chartDataList: []
chartDataList: [],
ws: null
},
mixins: [mixinsVue],
created() {
Expand All @@ -39,7 +41,18 @@
}
},
mounted() {
// 初始化时建立WebSocket连接
this.connect();
// 监听页面可见性变化
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
setTimeout(() => {
if (document.hasFocus()) {
this.connect();
}
}, 200);
}
});
},
methods: {
isWindowsPlatform(str) {
Expand Down Expand Up @@ -157,12 +170,18 @@
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
},
connect() {
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws"
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
ws.onopen = function () {
// 如果已经存在 WebSocket 连接并且处于开启状态，则不重复建立连接
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
console.log('Closing old WebSocket connection...');
this.ws.close();
}
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
this.ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');

this.ws.onopen = function () {
console.log("Connection open ...")
}
ws.onmessage = (evt) => {
this.ws.onmessage = (evt) => {
let jsonData = evt.data
const data = JSON.parse(jsonData)
for (let i = 0; i < data.servers?.length; i++) {
Expand All @@ -180,13 +199,13 @@
this.nodesNoTag = this.handleNodes(data.servers);
}
}
ws.onclose = () => {
setTimeout(function () {
this.connect()
this.ws.onclose = () => {
setTimeout(() => {
this.connect();
}, 5000);
}
ws.onerror = function () {
ws.close()
};
this.ws.onerror = () => {
this.ws.close()
}
},
handleNodes(servers) {
Expand Down Expand Up @@ -290,12 +309,10 @@
if (avgDelay > 0.9 * MaxTCPPingValue) {
loss += 1;
}
return [new Date(item.created_at[index]).toLocaleString(), avgDelay];
return [item.created_at[index], avgDelay];
});
const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
if (!item.monitor_name.includes("%")) {
item.monitor_name = item.monitor_name + " " + lossRate + "%";
}
item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
return {
name: item.monitor_name,
type: 'line',
Expand Down
Loading