131 lines
3.1 KiB
HTML
131 lines
3.1 KiB
HTML
<!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> |