338 lines
10 KiB
HTML
338 lines
10 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>
|
|
<tr>
|
|
<td>当前录制状态</td>
|
|
<td :class="collector.basic.living ? 'success' : 'warning'"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>当前上传状态</td>
|
|
<td :class="collector.basic.uploading ? 'success' : 'warning'"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>上一个稿件名</td>
|
|
<td>{{ current_workflow.name }}</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>HEVC</td>
|
|
<td :class="{warning: !config.ffmpeg.hevc, success: config.ffmpeg.hevc}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>嘤伟达GPU</td>
|
|
<td :class="{warning: !config.ffmpeg.nvidia_gpu, success: config.ffmpeg.nvidia_gpu}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>嘤特尔GPU</td>
|
|
<td :class="{warning: !config.ffmpeg.intel_gpu, success: config.ffmpeg.intel_gpu}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频比特率</td>
|
|
<td>{{ config.ffmpeg.bitrate }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频CRF</td>
|
|
<td>{{ config.ffmpeg.crf }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="current-config">
|
|
<thead>
|
|
<tr>
|
|
<td colspan="2">弹幕</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>命令</td>
|
|
<td>{{ config.danmaku.exec }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>滚动速度</td>
|
|
<td>{{ config.danmaku.speed }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>弹幕字体</td>
|
|
<td>{{ config.danmaku.font }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>字体大小</td>
|
|
<td>{{ config.danmaku.font_size }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频分辨率</td>
|
|
<td>{{ config.danmaku.resolution }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="current-config">
|
|
<thead>
|
|
<tr>
|
|
<td colspan="2">片段</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>片段时长</td>
|
|
<td>{{ config.clip.each_sec }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>超出时长</td>
|
|
<td>{{ config.clip.overflow_sec }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="current-config">
|
|
<thead>
|
|
<tr>
|
|
<td colspan="2">目录</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>当前目录</td>
|
|
<td>~</td>
|
|
</tr>
|
|
<tr>
|
|
<td><progress :value="collector.basic.disk.work.percent" max="100"></progress></td>
|
|
<td>{{ collector.basic.disk.work.free }} / {{ collector.basic.disk.work.total }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td :class="{warning: !collector.basic.disk.bili.exist, success: collector.basic.disk.bili.exist}">B站录播姬目录</td>
|
|
<td>{{ config.recorder.bili_dir }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><progress :value="collector.basic.disk.bili.percent" max="100"></progress></td>
|
|
<td :class="{warning: !collector.basic.disk.bili.exist}">{{ collector.basic.disk.bili.free }} / {{ collector.basic.disk.bili.total }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td :class="{warning: !collector.basic.disk.xigua.exist, success: collector.basic.disk.xigua.exist}">西瓜视频录播目录</td>
|
|
<td>{{ config.recorder.xigua_dir }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><progress :value="collector.basic.disk.xigua.percent" max="100"></progress></td>
|
|
<td :class="{warning: !collector.basic.disk.xigua.exist}">{{ collector.basic.disk.xigua.free }} / {{ collector.basic.disk.xigua.total }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td :class="{warning: !collector.basic.disk.output.exist, success: collector.basic.disk.output.exist}">压制输出目录</td>
|
|
<td>{{ config.recorder.output_dir }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><progress :value="collector.basic.disk.output.percent" max="100"></progress></td>
|
|
<td>{{ collector.basic.disk.output.free }} / {{ collector.basic.disk.output.total }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="upload-config">
|
|
<thead>
|
|
<tr>
|
|
<td colspan="2">上传配置<sup>Beta</sup></td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>是否开启</td>
|
|
<td :class="{warning: !config.video.enabled, success: config.video.enabled}"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频标题Pattern</td>
|
|
<td>{{ config.video.title }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频描述</td>
|
|
<td style="white-space: pre-wrap;min-width: 375px;max-width: 100vw;width: 750px;">{{ config.video.desc }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频分区</td>
|
|
<td>{{ config.video.tid }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>视频标签</td>
|
|
<td>{{ config.video.tags }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>上传人</td>
|
|
<td><a :href="'https://space.bilibili.com/'+collector.uploader.mid">{{ collector.uploader.mid }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>登录时间</td>
|
|
<td>{{ collector.uploader.login_at }}(于{{ collector.uploader.expires }}秒后过期)</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endraw %}
|
|
</body>
|
|
<script>
|
|
Vue.devtools = true
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
collector: {
|
|
basic: {
|
|
exec: {
|
|
ffmpeg: false,
|
|
danmaku: false,
|
|
},
|
|
system: {
|
|
os: "",
|
|
},
|
|
disk: {
|
|
output: {
|
|
exist: false,
|
|
percent: 0,
|
|
free: "",
|
|
total: ""
|
|
},
|
|
work: {
|
|
exist: false,
|
|
percent: 0,
|
|
free: "",
|
|
total: ""
|
|
},
|
|
bili: {
|
|
exist: false,
|
|
percent: 0,
|
|
free: "",
|
|
total: ""
|
|
},
|
|
xigua: {
|
|
exist: false,
|
|
percent: 0,
|
|
free: "",
|
|
total: ""
|
|
}
|
|
},
|
|
living: false
|
|
},
|
|
uploader: {
|
|
mid: 0,
|
|
expires: 0,
|
|
login_at: "",
|
|
},
|
|
},
|
|
config: {
|
|
danmaku: {
|
|
exec: "",
|
|
speed: 0,
|
|
font: "",
|
|
font_size: 0,
|
|
resolution: "",
|
|
},
|
|
video: {
|
|
enabled: false,
|
|
title: "",
|
|
desc: "",
|
|
tid: 0,
|
|
tags: "",
|
|
},
|
|
clip: {
|
|
each_sec: 0,
|
|
overflow_sec: 0,
|
|
},
|
|
ffmpeg: {
|
|
exec: "",
|
|
hevc: false,
|
|
nvidia_gpu: false,
|
|
intel_gpu: false,
|
|
bitrate: "",
|
|
crf: "",
|
|
},
|
|
recorder: {
|
|
bili_dir: "",
|
|
xigua_dir: "",
|
|
}
|
|
},
|
|
current_workflow: {
|
|
id: 0,
|
|
name: "",
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
axios({
|
|
url: "/api/collector/"
|
|
}).then((response) => {
|
|
this.collector.basic = response.data;
|
|
})
|
|
axios({
|
|
url: "/api/biliuploader/"
|
|
}).then((response) => {
|
|
this.collector.uploader = response.data;
|
|
})
|
|
axios({
|
|
url: "/api/bilirecorder/"
|
|
}).then((response) => {
|
|
this.current_workflow = response.data;
|
|
})
|
|
axios({
|
|
url: "/api/config/"
|
|
}).then((response) => {
|
|
this.config = response.data;
|
|
})
|
|
},
|
|
}).mount("#app")
|
|
</script>
|
|
</html> |