1
0
forked from bot/app
LiteyukiBot/liteyuki/resources/templates/stats.html

227 lines
6.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/fonts.css">
<style>
body {
font-family: 'MiSans', serif;
background-repeat: repeat-y;
background-size: cover;
background-position: center;
background-image: url('img/bg1.jpg');
color: white;
// 10px10px0px
margin: 24px;
}
.info-box {
border-radius: 30px;
padding: 30px;
backdrop-filter: blur(30px);
background-color: rgba(0, 0, 0, 0.3);
display: flex;
margin: 0 24px 24px;
}
#cpu-chart, #mem-chart, #swap-chart {
height: 240px;
width: 240px;
margin-bottom: 20px;
}
#cpu-info, #mem-info, #swap-info {
margin: 0 40px;
align-items: center;
}
#bot-info {
margin-top: 24px;
align-items: center;
}
#hardware-info {
justify-content: center;
text-align: center;
}
#bot-icon {
border-radius: 50%;
height: 200px;
}
#bot-name, #bot-tag {
margin-left: 20px;
}
#bot-name {
font-size: 42px;
font-weight: bold;
}
#bot-tag {
margin-top: 10px;
}
.chart-label {
font-size: 30px;
max-width: 240px;
}
.tag {
font-size: 27px;
}
.tag::after {
content: "|";
display: inline-block;
margin: 0 5px;
height: 50%;
line-height: 50%;
color: #aaa;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js"></script>
</head>
<body>
<div class="info-box" id="bot-info">
<span>
<img id="bot-icon" src="https://q.qlogo.cn/g?b=qq&nk={{BOT_ID}}}&s=640" alt="BotIcon">
</span>
<span>
<span id="bot-name">
{{ BOT_NAME }}
</span>
<div id="bot-tag"></div>
</span>
</div>
<div class="info-box" id="hardware-info">
<div id="cpu-info">
<div id="cpu-chart"></div>
</div>
<div id="mem-info">
<div id="mem-chart"></div>
</div>
<div id="swap-info">
<div id="swap-chart"></div>
</div>
</div>
<div id="cpuData" style="display: none;">{{ CPUDATA | tojson }}</div>
<div id="memData" style="display: none;">{{ MEMDATA | tojson }}</div>
<div id="swapData" style="display: none;">{{ SWAPDATA | tojson }}</div>
<div id="botTag" style="display: none;">{{ BOT_TAGS | tojson }}</div>
<div id="cpuTag" style="display: none;">{{ CPU_TAGS | tojson }}</div>
<div id="memTag" style="display: none;">{{ MEM_TAGS | tojson }}</div>
<div id="swapTag" style="display: none;">{{ SWAP_TAGS | tojson }}</div>
<script>
// 环形图
{
let bgs = ["bg1.jpg"]
// 随机选择背景图片
document.body.style.backgroundImage = `url(./img/${bgs[Math.floor(Math.random() * bgs.length)]})`;
let botTags = JSON.parse(document.getElementById('botTag').innerText);
botTags.forEach(tag => {
let tagSpan = document.createElement('span');
tagSpan.innerText = tag;
tagSpan.className = 'tag';
document.getElementById('bot-tag').appendChild(tagSpan);
});
let cpuInfo = echarts.init(document.getElementById('cpu-chart'));
let memInfo = echarts.init(document.getElementById('mem-chart'));
let swapInfo = echarts.init(document.getElementById('swap-chart'));
let cpuData = JSON.parse(document.getElementById('cpuData').innerText);
let memData = JSON.parse(document.getElementById('memData').innerText);
let swapData = JSON.parse(document.getElementById('swapData').innerText);
sub_tag_data = {
cpu: JSON.parse(document.getElementById('cpuTag').innerText),
mem: JSON.parse(document.getElementById('memTag').innerText),
swap: JSON.parse(document.getElementById('swapTag').innerText)
}
// 遍历key和valuekey是cpumemswapvalue是对应的tag数组添加div标签class为chart-label
for (let key in sub_tag_data) {
let infoDiv = document.getElementById(key + '-info');
sub_tag_data[key].forEach(tag => {
let tagSpan = document.createElement('div');
tagSpan.innerText = tag;
tagSpan.className = 'chart-label';
infoDiv.appendChild(tagSpan);
});
}
function getOption(title, data) {
return {
animation: false,
title: {
text: title,
left: 'center',
top: 'center',
textStyle: {
//文字颜色
color: '#fff',
fontSize: 30
}
},
tooltip: {
show: true,
trigger: "item",
backgroundColor: "#ffffff00",
// {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
},
color: ['#a2d8f4', "#ffffff44", '#00a6ff'],
series: [
{
name: 'info',
type: 'pie',
radius: ['80%', '100%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: '50',
fontWeight: 'bold'
}
}
}
},
data: data
}
]
};
}
cpuInfo.setOption(getOption("{{ CPU }}", cpuData));
memInfo.setOption(getOption('{{ MEM }}', memData));
swapInfo.setOption(getOption('{{ SWAP }}', swapData));
}
</script>
</body>
</html>