update

2024-10-31 18:23:39 +08:00
parent 4b04c1863b
commit 34a41f50ac
31 changed files with 561 additions and 223 deletions
--- a/Web/html/body/video.html
+++ b/Web/html/body/video.html
@@ -37,35 +37,15 @@
    $('#header').load("/html/header.html");
 </script>
 <script>
-    function showImage(url, imgElement) {
-        getHttpImage(url)
-            .then(imageUrl => {
-                imgElement.src = imageUrl;
-            })
-            .catch(error => {
-                console.error("Error loading image:", error);
-                // 可以在这里设置一个默认图片或者显示错误信息
-                imgElement.src = 'default-image.jpg';
-            });
-    }
-    function createRoom() {
+    function createRoom(roomId) {
        layer.open({
            type: 2,
-            title:"添加新房间",
+            title: "添加新房间",
            area: ['500px', '400px'],
-            content: '/html/ui/createConfig.html'
-        
-        });
-        // createUi("/html/ui/createConfig.html")
-        //     .then(html => {            
-        //         layer.open({
-        //             type: 1,
-        //             area: ['500px', '300px'],
-        //             content: '/html/ui/createConfig.html'
-        //         });
-        //     })
-    }
+            content: '/html/ui/createConfig.html?roomId=' + roomId

+        });
+    }
 </script>
 <script>
    layui.use(['table', 'dropdown'], function () {
@@ -93,16 +73,16 @@
            },
            cols: [[
                { type: 'checkbox', fixed: 'left' },
-                { field: 'anchorUid', title: 'UID', width: 80, sort: true, fixed: 'left' },
+                { field: 'anchorUid', title: 'UID', width: 100, sort: true, fixed: 'left', templet: '<div><a href="https://space.bilibili.com/{{= d.anchorUid}}" target="_blank">{{= d.anchorUid}}</a>' },
                { field: 'anchorName', title: '用户名', width: 100, fixed: 'left' },
                { field: 'anchorFace', title: '头像', width: 80, templet: '<div><image src="" onerror="showImage(\'{{= d.anchorFace }}\',this);"  style="width: 30px;height: 30px;"></div>' },
-                { field: 'live_room_id', title: '房间号', width: 80 },
+                { field: 'live_room_id', title: '房间号', width: 80, templet: '<div><a href="https://live.bilibili.com/{{= d.live_room_id}}" target="_blank">{{= d.live_room_id}}</a>' },
                { field: 'recordPath', title: '保存路径', width: 120 },
                { field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
                { field: 'recordLive', title: '录制视频', width: 120, sort: true },
-                { field: 'recordDanmuDate', title: '弹幕录制预定时间', width: 170, sort: true },
-                { field: 'recordLiveDate', title: '视频录制预定时间', width: 170, sort: true },
-                { field: 'recordUid', title: '录制账号', width: 120, sort: true },
+                { field: 'recordDanmuDate', title: '弹幕录制预定时间', width: 100, sort: true },
+                { field: 'recordLiveDate', title: '视频录制预定时间', width: 100, sort: true },
+                { field: 'recordUid', title: '录制账号', width: 120, sort: true, templet: '<div><a href="https://space.bilibili.com/{{= d.recordUid}}" target="_blank">{{= d.recordUid}}</a>' },
                { field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
                { field: 'sql_time', title: '添加时间', width: 100 },
                { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#toolDemo" }
@@ -133,14 +113,9 @@
            // 触发单元格工具事件
            table.on('tool(roomTable)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
-                // console.log(obj)
+                console.log(obj)
                if (obj.event === 'edit') {
-                    layer.open({
-                        title: '编辑 - id:' + data.id,
-                        type: 1,
-                        area: ['80%', '80%'],
-                        content: '<div style="padding: 16px;">自定义表单元素</div>'
-                    });
+                    createRoom(obj.data.live_room_id)
                } else if (obj.event === 'more') {
                    // 更多 - 下拉菜单
                    dropdown.render({
@@ -155,11 +130,18 @@
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'detail') {
-                                layer.msg('查看操作，当前行 ID:' + data.id);
+                                layer.msg('查看操作，当前行 ID:' + data.live_room_id);
                            } else if (menudata.id === 'del') {
-                                layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
-                                    obj.del(); // 删除对应行（tr）的DOM结构
-                                    layer.close(index);
+                                layer.confirm('真的删除行 [' + data.anchorName + '] 么', function (index) {
+                                    deleteRoomConfig(data.live_room_id)
+                                        .then(data => {
+                                            layer.msg(data.message)
+                                            if (data.status == 100) {
+                                                obj.del(); // 删除对应行（tr）的DOM结构
+                                                layer.close(index);
+                                            }
+                                        })
+
                                    // 向服务端发送删除指令
                                });
                            }
--- a/Web/html/ui/createConfig.html
+++ b/Web/html/ui/createConfig.html
@@ -1,39 +1,60 @@
-<link rel="stylesheet" href="/layui/css/layui.css">
+<head>
+    <link rel="stylesheet" href="/layui/css/layui.css">
+    <style>
+        .layui-form-label {
+            width: 120px !important;
+        }
+    </style>
+</head>

 <body>
    <input id="value" value="" type="hidden" />
-    <form class="layui-form layui-form-pane" action="" style="padding-left: 10px;padding-right: 10px;">
+    <form class="layui-form layui-form-pane" action="" lay-filter="form-filter">
        <div class="layui-form-item">
            <label class="layui-form-label">直播房间地址</label>
-            <div class="layui-input-block">
-                <input type="text" name="url" autocomplete="off" placeholder="https://live.bilibili.com/xxxxx"
+            <div class="layui-input-inline" style="width: 60%;">
+                <input type="text" id="url" name="url" autocomplete="off" placeholder="https://live.bilibili.com/xxxxx"
                    lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">录制弹幕</label>
            <div class="layui-input-block">
-                <input type="checkbox" name="recordLive" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
+                <input type="checkbox" name="recordDanmu" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">录制视频</label>
            <div class="layui-input-block">
-                <input type="checkbox" name="recordDanmu" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
+                <input type="checkbox" name="recordLive" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
+            </div>
+        </div>
+        <div class="layui-form-item" pane>
+            <label class="layui-form-label">录制日期</label>
+            <div class="layui-input-block">
+                <input type="checkbox" name="2" title="周一" lay-skin="tag">
+                <input type="checkbox" name="3" title="周二" lay-skin="tag">
+                <input type="checkbox" name="4" title="周三" lay-skin="tag">
+                <input type="checkbox" name="5" title="周四" lay-skin="tag">
+                <input type="checkbox" name="6" title="周五" lay-skin="tag">
+                <input type="checkbox" name="7" title="周六" lay-skin="tag">
+                <input type="checkbox" name="1" title="周日" lay-skin="tag">
            </div>
        </div>
        <div class="layui-form-item">
-            <label class="layui-form-label">弹幕预定录制时间</label>
+            <label class="layui-form-label">弹幕录制时间</label>
            <div class="layui-input-inline">
-                <input type="text" name="recordDanmuDate" value="* * *" placeholder="* * *" lay-verify="required" autocomplete="off" class="layui-input">
+                <input type="text" name="recordDanmuDate" id="recordDanmuDate" lay-verify="required" autocomplete="off"
+                    class="layui-input">
            </div>
            <div class="layui-form-mid layui-text-em" onclick="timeTips(this)"><i
                    class="layui-icon layui-icon-help"></i> </div>
        </div>
        <div class="layui-form-item">
-            <label class="layui-form-label">视频预定录制时间</label>
+            <label class="layui-form-label">视频录制时间</label>
            <div class="layui-input-inline">
-                <input type="text" name="recordLiveDate" value="* * *" placeholder="* * *" lay-verify="required" autocomplete="off" class="layui-input">
+                <input type="text" name="recordLiveDate"  id="recordLiveDate" lay-verify="required"
+                    autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-text-em" onclick="timeTips(this)"><i
                    class="layui-icon layui-icon-help"></i> </div>
@@ -47,7 +68,7 @@
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit lay-filter="submit-form">确认</button>
-            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+            <button id="btn_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

@@ -55,8 +76,8 @@

 </body>
 <script id="selectUser" type="text/html">
-    <select id="recordUid" name="recordUid" lay-verify="required" lay-search>
-        <option value="">直接选择或搜索选择</option>
+    <select id="recordUid" name="recordUid" lay-search>
+        <option value="">不登陆</option>
    {{#  layui.each(d.data, function(index, item){ }}
    <option value="{{= item.uid}}">[{{=item.uid}}]{{= item.uname}}</option>
     {{#  }); }}
@@ -66,41 +87,89 @@
 <script src="/layui/layui.js"></script>
 <script src="/js/jquery-3.2.1.js"></script>
 <script src="/js/httpUtils.js"></script>
+<script src="/js/CommonConfig.js"></script>
 <script>
    function timeTips(that) {
        layer.tips('填写[分钟][小时][星期],空格分割,例如预定每周6晚上8点之后才开始录制则填写:* 8 6', that);
    }
-    layui.use(['form', 'laytpl'], function () {
+    var roomId = getParam("roomId");
+
+    layui.use(['form', 'laytpl', 'laydate'], function () {
        var form = layui.form;
        var layer = layui.layer;
-        var laytpl = layui.laytpl
+        var laytpl = layui.laytpl;
+        var laydate = layui.laydate;
+        var windowsIndex;
+        form.render();
        // 提交事件
        form.on('submit(submit-form)', function (data) {
            var field = data.field; // 获取表单字段值
+            windowsIndex = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
            // 显示填写结果，仅作演示用

            // 此处可执行 Ajax 等操作
            // …
-            addRoomConfig(field)
-            .then(json=>{
-                console.log(json)
-            })
-            
+            console.log(field)
+            // addRoomConfig(field)
+            //     .then(json => {
+            //         layer.msg(json.message, function () {
+            //             if (json.status == 100) {
+            //                 close()
+            //             }
+            //         })
+
+            //     })
+
            return false; // 阻止默认 form 跳转
        });

-        function close(){
-            var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
-            parent.layer.close(index);
+        function close() {
+            parent.layer.close(windowsIndex);
        }
-        getBiliAllUser()
-            .then(data => {
-                var view = $("#selects").get(0);
-                laytpl($('#selectUser').get(0).innerHTML).render(data, function (html) {
-                    view.innerHTML=html
-                    form.render('select');
-                });
+        laydate.render({
+            elem: '#recordDanmuDate',
+            type: 'time',
+            range: true
+        });
+        laydate.render({
+            elem: '#recordLiveDate',
+            type: 'time',
+            range: true
+        });
+        function init() {
+            getUserInfo();
+            if (roomId !== null) {
+                $('#btn_reset').get(0).disabled = true;
+                editRoom()
+            }
+        }
+        function getUserInfo() {
+            getBiliAllUser()
+                .then(data => {
+                    var view = $("#selects").get(0);
+                    laytpl($('#selectUser').get(0).innerHTML).render(data, function (html) {
+                        view.innerHTML = html
+                        form.render('select');
+                    });

-            })
+                });
+        }
+        function editRoom() {
+            getRoomConfig(roomId)
+                .then(data => {
+                    if (data.status === 100) {
+                        var json = data.data;
+                        form.val('form-filter', {
+                            'url': 'https://live.bilibili.com/' + json.live_room_id,
+                            'recordLive': json.recordLive,
+                            'recordDanmu': json.recordDanmu,
+                            'recordDanmuDate': json.recordDanmuDate,
+                            'recordLiveDate': json.recordLiveDate
+                        });
+                        $('#url').get(0).disabled = true;
+                    }
+                })
+        }
+        init();
    });
 </script>
--- a/Web/index.html
+++ b/Web/index.html
@@ -1,33 +1,141 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>DD监视器</title>
-    <link rel="stylesheet" href="/layui/css/layui.css">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>DD监视器</title>
+  <link rel="stylesheet" href="/layui/css/layui.css">
 </head>

 <body>
-    <div id="header"></div>
-    <button id="btn" type="button" class="layui-btn" onclick="onButton()">默认按钮</button>
+  <div id="header"></div>
+  <button id="btn" type="button" class="layui-btn" onclick="onButton()">默认按钮</button>
+  <div class="layui-row layui-col-space15">
+
+    <div id="card"></div>
+  </div>
+</body>
+
+
+<script id="liveCard" type="text/html">
+  {{#  layui.each(d.data, function(index, item){ }}
+  <div class="layui-col-xs3">
+    <div class="layui-bg-gray" style="padding: 16px;">
+      <div class="layui-row layui-col-space15">
+        <div class="layui-card">
+          <div class="layui-card-header" ><img src="#" onerror="showImage('{{= item.anchorFace}}',this)" style="width: 40px; height: 40px;"/>  {{= item.anchorName}}
+            <span style="float: right;">直播状态：
+            {{# if(item.live){ }}
+            <span class="layui-badge-dot layui-bg-green"></span>
+            {{# } else{ }}
+            <span class="layui-badge-dot"></span>
+            {{#  }; }}
+          </span>
+          </div>
+          <div class="layui-card-body">
+            <img src="#" onerror="showImage('{{= item.cover}}',this)" style="width: 100%; height: 100%;"/><br>
+                {{= item.title}}<br>
+                直播录制状态:
+                {{# if(item.downloadVideo){ }}
+                 <span style="color: #16b777" onclick="clickVideo('{{= item.roomId}}',true)">录制中</span>
+                 {{# } else{ }}
+                 <span style="color: #FD482C" onclick="clickVideo('{{= item.roomId}}',false)">监听中</span>
+                 {{#  }; }}<br>
+                 弹幕录制状态:
+                {{# if(item.danmu){ }}
+                 <span style="color: #16b777"  onclick="clickDanmu('{{= item.roomId}}',true)">录制中</span>
+                 {{# } else{ }}
+                 <span style="color: #FD482C"  onclick="clickDanmu('{{= item.roomId}}',false)">监听中</span>
+                 {{#  }; }}<br>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {{#  }); }}
+</script>
+

 <script src="/layui/layui.js"></script>
 <script src="/js/jquery-3.2.1.js"></script>
 <script src="/js/CommonConfig.js"></script>
 <script src="/js/httpUtils.js"></script>
 <script>
-    headerModel=0;
-    $('#header').load("/html/header.html");
+  headerModel = 0;
+  $('#header').load("/html/header.html");
+  function clickVideo(roomId, status) {
+    const title = "是否" + (status ? "停止" : "启动") + "录制视频?"
+    layer.confirm(title, { icon: 3 }, function () {
+      if (status) {
+        stopLiveVideo(roomId)
+          .then(data => {
+            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) },function(){
+              location.reload();
+            });
+          })
+      } else {
+        startLiveVideo(roomId)
+          .then(data => {
+            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) },function(){
+              location.reload();
+            });
+          })
+      }
+
+    }, function () {
+
+    });
+  }
+  function clickDanmu(roomId, status) {
+    const title = "是否" + (status ? "停止" : "启动") + "录制弹幕?"
+    layer.confirm(title, { icon: 3 }, function () {
+      if (status) {
+        stopLiveDanmu(roomId)
+          .then(data => {
+            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) },function(){
+              location.reload();
+            });
+           
+          })
+      } else {
+        startLiveDanmu(roomId)
+          .then(data => {
+            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) },function(){
+              location.reload();
+            });
+          })
+      }
+    }, function () {
+      layer.msg('点击取消的回调');
+    });
+  }
 </script>
 <script>
-     function onButton(){
-        getLiveVideoList()
-        .then(data=>{
+  layui.use(['laytpl'], function () {
+    var laytpl = layui.laytpl;
+
+    function initCard() {
+      getAllLive()
+        .then(data => {
          console.log(data)
+          var view = $("#card").get(0);
+          laytpl($('#liveCard').get(0).innerHTML).render(data, function (html) {
+            view.innerHTML = html
+          });
        })
-     }
+    }
+    function init() {
+      initCard()
+    }
+    init()
+  })
+  function onButton() {
+
+  }
 </script>
 <style>

 </style>
+
 </html>
--- a/Web/js/CommonConfig.js
+++ b/Web/js/CommonConfig.js
@@ -6,4 +6,23 @@ function createUi(html){
    .then(htmlText=>{
        return htmlText;
    })
+}
+function getParam(name){
+    console.log(window.location.href)
+    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
+    if (results == null) {
+        return null;
+    } else {
+        return decodeURI(results[1]) || 0;
+    }
+}
+function showImage(url, imgElement) {
+    getHttpImage(url)
+        .then(imageUrl => {
+            imgElement.src = imageUrl;
+        })
+        .catch(error => {
+            console.log("Error loading image:", error);
+            // 可以在这里设置一个默认图片或者显示错误信息
+        });
 }
--- a/Web/js/httpUtils.js
+++ b/Web/js/httpUtils.js
@@ -40,24 +40,7 @@ function post(url,formData,isJSON) {
        throw error;  // 重新抛出错误以便外部捕获
    });
 }
-function getLiveVideoList() {
-  return get("/live/video/list");
-}
-function getHttpImage(url) {
-    const encode = encodeURI(url);
-
-    const formData = new FormData();
-    formData.append("url", encode);
-    return post("/file/img",formData,false)
-    .then(blob=>{
-        return blob;
-    })
-}
-
-function getBiliAllUser(){
-    return get("/user/list")
-}
-function addRoomConfig(json){
+function buildFormData(json){
    const formData = new FormData();

    Object.keys(json).forEach(key => {
@@ -73,5 +56,56 @@ function addRoomConfig(json){
            formData.append(key, value);
        }
    });
-    return post("/live/config/set",formData)
-}
+    return formData;
+}
+
+//----------------直播配置相关接口
+function getLiveVideoList() {
+  return get("/live/video/list");
+}
+function getHttpImage(url) {
+    const encode = encodeURI(url);
+
+    const formData = new FormData();
+    formData.append("url", encode);
+    return post("/file/img",formData,false)
+    .then(blob=>{
+        return blob;
+    })
+}
+function getBiliAllUser(){
+    return get("/user/list")
+}
+function addRoomConfig(json){
+    const formData=buildFormData(json)
+    return post("/live/config/set",formData,true)
+}
+function getRoomConfig(roomId){
+    return get("/live/config/get?roomId="+roomId)
+}
+function deleteRoomConfig(roomId){
+    return get("/live/config/delete?roomId="+roomId)
+}
+
+//----------------直播配置相关接口end
+//----------------首页相关接口
+function getAllLive(){
+    return get("/live/list")
+}
+//----------------首页相关接口end
+//----------------视频相关接口
+function startLiveVideo(roomId){
+    return get("/live/video/start?roomId="+roomId)
+}
+function stopLiveVideo(roomId){
+    return get("/live/video/stop?roomId="+roomId)
+}
+//----------------视频相关接口end
+//----------------弹幕相关接口
+function startLiveDanmu(roomId){
+    return get("/live/danmu/start?roomId="+roomId)
+}
+function stopLiveDanmu(roomId){
+    return get("/live/danmu/stop?roomId="+roomId)
+}
+//----------------弹幕相关接口end
--- a/Web/js/myjs.js
+++ b/Web/js/myjs.js
@@ -101,12 +101,3 @@ function Base64() {
        return string;
    }
 }
-function getParam(name){
-    console.log(window.location.href)
-    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
-    if (results == null) {
-        return null;
-    } else {
-        return decodeURI(results[1]) || 0;
-    }
-}