shuguang/nezha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复echarts不显示bug (#330)

Browse Source 
* angel-kanade模版增加主题切换功能

* Add files via upload

* 调整legend图例间距

* 渲染方式调整会canvas

* Update home.html
This commit is contained in:
nap0o 2024-03-02 02:20:32 -05:00 committed by GitHub
parent 77de1b44bc
commit 7f7763606d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resource/template/theme-default/home.html vendored
View File

@ -140,7 +140,7 @@
page: 'index',
defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}},
data: [],
servers: [],
groups: [],
cache: [],
chartDataList: [],
@ -148,7 +148,7 @@
},
mixins: [mixinsVue],
created() {
this.data = JSON.parse('{{.Servers}}').servers;
this.servers = JSON.parse('{{.Servers}}').servers;
this.group()
},
methods: {
@ -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)";
@ -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',
@ -236,6 +237,7 @@
}
},
legend: {
icon: 'rect',
data: chartData.map(item => item.monitor_name),
show: true,
textStyle: {
@ -249,6 +251,7 @@
bottom: 0,
itemGap: itemGap,
itemWidth: itemWidth,
itemHeight: itemHeight,
padding: [5,0,5,0]
},
xAxis: {
@ -282,7 +285,7 @@
color: fontColor
},
grid: {
top: '40',
top: '30',
bottom: '20',
left: gridLeft,
right: gridRight
@ -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

2
resource/template/theme-server-status/content-nav.html vendored
View File

@ -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>

47
resource/template/theme-server-status/home.html vendored
View File

@ -24,10 +24,12 @@
page: 'index',
defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}},
cache: [],
servers: [],
nodesTag: [],
nodesNoTag: [],
chartDataList: []
chartDataList: [],
ws: null
},
mixins: [mixinsVue],
created() {
@ -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) {
@ -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++) {
@ -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) {
@ -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',