<!DOCTYPE html>
<html lang="zh">
<head>
<title>首页</title>
{% include 'layout/head.html' %}
<style>
table {
border: 1px solid black;
}
table tr > td {
padding: 0;
margin: 0;
border: 1px solid black;
}
td.success {
background: green;
color: white;
}
td.warning {
background: orangered;
color: white;
}
#app[v-cloak] {
display: none;
}
</style>
</head>
<body>
{% raw %}
<div id="app" v-cloak>
<h1>TEST</h1>
<hr>
<h2>当前状态</h2>
<table class="current-status-table">
<tbody>
<tr>
<td>系统</td>
<td>{{ collector.basic.system.os }}</td>
</tr>
<tr>
<td>FFMPEG状态</td>
<td :class="collector.basic.exec.ffmpeg ? 'success' : 'warning'"></td>
</tr>
<tr>
<td>弹幕工具状态</td>
<td :class="collector.basic.exec.danmaku ? 'success' : 'warning'"></td>
</tr>
</tbody>
</table>
<h2>配置状态</h2>
<table class="current-config">
<thead>
<tr>
<td colspan="2">FFMPEG</td>
</tr>
</thead>
<tbody>
<tr>
<td>命令</td>
<td>{{ config.ffmpeg.exec }}</td>
</tr>
<tr>
<td>GPU使用</td>
<td :class="{warning: !config.ffmpeg.gpu, success: config.ffmpeg.gpu}"></td>
</tr>
<tr>
<td>视频比特率</td>
<td>{{ config.ffmpeg.bitrate }}</td>
</tr>
</tbody>
</table>
</div>
{% endraw %}
</body>
<script>
Vue.devtools = true
Vue.createApp({
data() {
return {
collector: {
basic: {
exec: {
ffmpeg: false,
danmaku: false,
},
system: {
os: "",
}
}
},
config: {
danmaku: {
exec: "",
speed: 0,
font: "",
resolution: "",
},
video: {
title: "",
},
ffmpeg: {
exec: "",
gpu: false,
bitrate: "",
},
web: {
host: "",
port: 0,
}
}
}
},
created() {
axios({
url: "/api/collector/"
}).then((response) => {
this.collector.basic = response.data;
})
axios({
url: "/api/config/"
}).then((response) => {
this.config = response.data;
})
},
}).mount("#app")
</script>
</html>