<!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; } tr.table-header { font-size: 20px; font-weight: bold; } </style> </head> <body> {% raw %} <div id="app" v-cloak> <h1>TEST</h1> <hr> <h2>当前状态</h2> <table class="current-status-table"> <tbody> <tr class="table-header"> <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.encoding ? '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 class="table-header"> <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>VAAPI</td> <td :class="{warning: !config.ffmpeg.vaapi, success: config.ffmpeg.vaapi}"></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>视频CRF</td> <td>{{ config.ffmpeg.crf }}</td> </tr> <tr> <td>GOP</td> <td>{{ config.ffmpeg.gop }}</td> </tr> </tbody> </table> <table class="current-config"> <thead> <tr class="table-header"> <td colspan="2">弹幕</td> </tr> </thead> <tbody> <tr> <td>命令</td> <td>{{ config.danmaku.exec }}</td> </tr> <tr> <td>DANMU2ASS</td> <td :class="{warning: !config.danmaku.use_danmu2ass, success: config.danmaku.use_danmu2ass}"></td> </tr> <tr> <td>DanmakuFactory</td> <td :class="{warning: !config.danmaku.use_danmakufactory, success: config.danmaku.use_danmakufactory}"></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 class="table-header"> <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 class="table-header"> <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 class="table-header"> <td colspan="2">上传配置<sup style="background: aliceblue">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;max-width: calc(100vw - 6em);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, encoding: false, uploading: false, }, uploader: { mid: 0, expires: 0, login_at: "", }, }, config: { danmaku: { exec: "", use_danmu2ass: false, use_danmakufactory: false, 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, vaapi: false, crf: "", gop: "", }, 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>