From 2facc798cdd47eb56c12abf0f4d83331c9071aa0 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Wed, 19 May 2021 13:17:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=BD=95=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
static/device.js | 26 +++++++++++++
static/index.js | 59 +++++++++++++++++++++++++++++
templates/device.html | 30 +++++++++++++++
templates/files.html | 26 +++++++++++++
templates/index.html | 86 +++++++++++++++++++++++++++++++++++++++++++
5 files changed, 227 insertions(+)
create mode 100644 static/device.js
create mode 100644 static/index.js
create mode 100644 templates/device.html
create mode 100644 templates/files.html
create mode 100644 templates/index.html
diff --git a/static/device.js b/static/device.js
new file mode 100644
index 0000000..12ece79
--- /dev/null
+++ b/static/device.js
@@ -0,0 +1,26 @@
+function deviceUpdate(){
+ $.ajax(
+ "/stats/device",
+ {
+ success: function (res){
+ $("#memTotal").text(res.data.status.memTotal)
+ $("#memUsed").text(res.data.status.memUsed)
+ $("#memUsage").text(res.data.status.memUsage)
+ $("#diskTotal").text(res.data.status.diskTotal)
+ $("#diskUsed").text(res.data.status.diskUsed)
+ $("#diskUsage").text(res.data.status.diskUsage)
+ $("#cpu").text(res.data.status.cpu)
+ $("#memUsageP").val(res.data.status.memUsage)
+ $("#diskUsageP").val(res.data.status.diskUsage)
+ $("#cpuP").val(res.data.status.cpu)
+ $("#inSpeed").text(res.data.status.inSpeed)
+ $("#outSpeed").text(res.data.status.outSpeed)
+ $("#doCleanTime").text(res.data.status.doCleanTime)
+ $("#fileExpire").text(res.data.status.fileExpire)
+ }
+ }
+ )
+}
+
+deviceUpdate()
+setInterval(deviceUpdate,2000)
diff --git a/static/index.js b/static/index.js
new file mode 100644
index 0000000..4ad9983
--- /dev/null
+++ b/static/index.js
@@ -0,0 +1,59 @@
+function taskUpdate(){
+ $.ajax(
+ "/stats",
+ {
+ success: function (res){
+ $("#broadcaster").text(res.data.broadcast.broadcaster)
+ $("#isBroadcasting").text(res.data.broadcast.isBroadcasting)
+ $("#streamUrl").text(res.data.broadcast.streamUrl)
+ $("#delayTime").text(res.data.broadcast.delayTime)
+ $("#forceNotBroadcasting").text(res.data.config.forceNotBroadcasting)
+ $("#forceNotDownload").text(res.data.config.forceNotDownload)
+ $("#forceNotUpload").text(res.data.config.forceNotUpload)
+ $("#forceNotEncode").text(res.data.config.forceNotEncode)
+ $("#downloadOnly").text(res.data.config.downloadOnly)
+ $("#updateTime").text(res.data.broadcast.updateTime)
+ $("#encodeQueueSize").text(res.data.encodeQueueSize)
+ $("#uploadQueueSize").text(res.data.uploadQueueSize)
+ $("#download").html(function(){
+ var ret = ""
+ res.data.download.reverse().forEach(function(obj){
+ ret += "<tr><td class='time'>" + obj.datetime + "</td><td>" + obj.message + "</td></tr>"
+ })
+ return "<table>" + ret + "</table>"
+ })
+ $("#encode").html(function(){
+ var ret = ""
+ res.data.encode.reverse().forEach(function(obj){
+ ret += "<tr><td class='time'>" + obj.datetime + "</td><td>" + obj.message + "</td></tr>"
+ })
+ return "<table>" + ret + "</table>"
+ })
+ $("#upload").html(function(){
+ var ret = ""
+ res.data.upload.reverse().forEach(function(obj){
+ ret += "<tr><td class='time'>" + obj.datetime + "</td><td>" + obj.message + "</td></tr>"
+ })
+ return "<table>" + ret + "</table>"
+ })
+ $("#error").html(function(){
+ var ret = ""
+ res.data.error.reverse().forEach(function(obj){
+ ret += "<tr><td class='time'>" + obj.datetime + "</td><td>" + obj.message + "</td></tr>"
+ })
+ return "<table>" + ret + "</table>"
+ })
+ $("#operation").html(function(){
+ var ret = ""
+ res.data.operation.reverse().forEach(function(obj){
+ ret += "<tr><td class='time'>" + obj.datetime + "</td><td>" + obj.message + "</td></tr>"
+ })
+ return "<table>" + ret + "</table>"
+ })
+ }
+ }
+ )
+}
+
+taskUpdate()
+setInterval(taskUpdate,8000)
diff --git a/templates/device.html b/templates/device.html
new file mode 100644
index 0000000..8d878c7
--- /dev/null
+++ b/templates/device.html
@@ -0,0 +1,30 @@
+ <h1>机器状态</h1>
+ <table>
+ <tr>
+ <td class='title'>CPU使用率</td>
+ <td><progress id="cpuP" max="100" value="0"></progress></td>
+ <td><span id="cpu"></span>%</td>
+ </tr>
+ <tr>
+ <td class='title'>内存使用率</td>
+ <td><progress id="memUsageP" max="100" value="0"></progress></td>
+ <td><span id="memUsed"></span>/<span id="memTotal"></span>(<span id="memUsage"></span>%)</td>
+ </tr>
+ <tr>
+ <td class='title'>磁盘使用率</td>
+ <td><progress id="diskUsageP" max="100" value="0"></progress></td>
+ <td><span id="diskUsed"></span>/<span id="diskTotal"></span>(<span id="diskUsage"></span>%)</td>
+ </tr>
+ <tr>
+ <td class='title'>网络速率</td>
+ <td>↓ <span id="inSpeed"></span>/s</td>
+ <td>↑ <span id="outSpeed"></span>/s</td>
+ </tr>
+ <tr>
+ <td class='title'>文件清理</td>
+ <td>清理<span id="fileExpire"></span>天前的文件</td>
+ <td>@ <span id="doCleanTime"></span></td>
+ </tr>
+ </table>
+ <script src="/static/device.js"></script>
+
diff --git a/templates/files.html b/templates/files.html
new file mode 100644
index 0000000..40221cb
--- /dev/null
+++ b/templates/files.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="zh_CN">
+<head>
+ <title>文件</title>
+ {% include 'head.html' %}
+</head>
+<body>
+<div>
+ <h1>所有录像文件</h1>
+ <p>部分录像文件已转移至百度云，请在<a href="https://pan.baidu.com/s/1ECnwiHnsm-3dSXNJGWlR2g">这里</a>下载 提取码: ddxt</p>
+ <table>
+ <tr>
+ <td>文件名</td><td>文件大小</td><td>链接</td>
+ </tr>
+ {%for i in files %}
+ <tr>
+ <td>{{i.name}}</td><td>{{i.size}}</td><td><a href="/files/download/{{i.name}}">下载文件</a></td>
+ </tr>
+ {% endfor %}
+ </table>
+ <hr/>
+ <h3><a href="/">录播信息页</a></h3>
+ {% include 'device.html' %}
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..351910a
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh_CN">
+<head>
+ <title>录播</title>
+ {% include 'head.html' %}
+</head>
+<body>
+<div>
+ <h1>基本信息</h1>
+ <table>
+ <tr>
+ <td>主播名</td>
+ <td><span id="broadcaster"></span></td>
+ </tr>
+ <tr>
+ <td>是否正在直播</td>
+ <td><span id="isBroadcasting"></span></td>
+ </tr>
+ <tr>
+ <td>直播视频流地址</td>
+ <td><span id="streamUrl"></span></td>
+ </tr>
+ <tr>
+ <td>信息更新时间</td>
+ <td><span id="updateTime"></span></td>
+ </tr>
+ <tr>
+ <td>延迟投稿时间</td>
+ <td><span id="delayTime"></span></td>
+ </tr>
+ </table>
+ <hr/>
+ <h1>特殊设置</h1>
+ <table>
+ <tr>
+ <td>是否设置强制认为不直播</td>
+ <td><span id="forceNotBroadcasting"></span></td>
+ </tr>
+ <tr>
+ <td>是否设置强制不下载</td>
+ <td><span id="forceNotDownload"></span></td>
+ </tr>
+ <tr>
+ <td>是否设置强制不上传</td>
+ <td><span id="forceNotUpload"></span></td>
+ </tr>
+ <tr>
+ <td>是否设置强制不转码</td>
+ <td><span id="forceNotEncode"></span></td>
+ </tr>
+ <tr>
+ <td>是否设置为仅下载（不上传不转码）</td>
+ <td><span id="downloadOnly"></span></td>
+ </tr>
+ </table>
+ <hr/>
+ <h1>当前状态</h1>
+ <table>
+ <tr>
+ <td class='title'>下载日志</td>
+ <td><span id="download"></span></td>
+ </tr>
+ <tr>
+ <td class='title'>转码日志<br>队列<span id="encodeQueueSize"></span></td>
+ <td><span id="encode"></span></td>
+ </tr>
+ <tr>
+ <td class='title'>上传日志<br>队列<span id="uploadQueueSize"></span></td>
+ <td><span id="upload"></span></td>
+ </tr>
+ <tr>
+ <td class='title'>错误日志</td>
+ <td><span id="error"></span></td>
+ </tr>
+ <tr>
+ <td class='title'>操作日志</td>
+ <td><span id="operation"></span></td>
+ </tr>
+ </table>
+ <hr/>
+ <h3><a href="/files/">所有录播文件</a></h3>
+ {% include 'device.html' %}
+</div>
+<script src="../static/index.js"></script>
+</body>
+</html>
\ No newline at end of file