<!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">上传配置Alpha</td>
</tr>
</thead>
<tbody>
<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: {
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>