页面及逻辑修改

2019-04-08 11:32:05 +08:00
parent 99d148666e
commit c3a965f284
7 changed files with 225 additions and 19 deletions
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="zh_CN">
+<head>
+    <meta charset="UTF-8">
+    <title>录播</title>
+    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+    <style type="text/css">
+        td{
+            border: solid 1px lightgrey;
+        }
+    </style>
+</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>
+    </table>
+    <h1>特殊设置</h1>
+    <table>
+        <tr>
+            <td>是否设置强制认为不直播</td>
+            <td><span id="forceNotBroadcasting"></span></td>
+        </tr>
+        <tr>
+            <td>是否设置强制不下载</td>
+            <td><span id="forceStopDownload"></span></td>
+        </tr>
+    </table>
+    <hr/>
+    <h1>当前状态</h1>
+    <table>
+        <tr>
+            <td>下载日志</td>
+            <td><span id="download"></span></td>
+        </tr>
+        <tr>
+            <td>转码日志</td>
+            <td><span id="encode"></span></td>
+        </tr>
+        <tr>
+            <td>上传日志</td>
+            <td><span id="upload"></span></td>
+        </tr>
+        <tr>
+            <td>错误日志</td>
+            <td><span id="error"></span></td>
+        </tr>
+        <tr>
+            <td>操作日志</td>
+            <td><span id="operation"></span></td>
+        </tr>
+    </table>
+    <hr/>
+</div>
+</body>
+<script src="index.js"></script>
+</html>
--- a/static/index.js
+++ b/static/index.js
@ -0,0 +1,45 @@
+function update(){
+    $.ajax(
+        "/stats",
+        {
+            success: function (res){
+                $("#broadcaster").text(res.data.broadcast.broadcaster)
+                $("#isBroadcasting").text(res.data.broadcast.isBroadcasting)
+                $("#streamUrl").text(res.data.broadcast.streamUrl)
+                $("#forceNotBroadcasting").text(res.data.config.forceNotBroadcasting)
+                $("#forceStopDownload").text(res.data.config.forceStopDownload)
+                $("#updateTime").text(res.data.broadcast.updateTime)
+                $("#download").html(function(){
+                    var ret = ""
+                    res.data.download.reverse().forEach(function(obj){
+                        ret += "<tr><td>" + 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>" + 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>" + 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>" + obj.datetime + "</td><td>" + obj.message + "</td></tr>"
+                    })
+                    return "<table>" + ret + "</table>"
+                })
+            }
+        }
+    )
+}
+update()
+setInterval(update,10000)