laoyou2333
/
GrasscuttersWebDashboard
огледало од https://github.com/liujiaqi7998/GrasscuttersWebDashboard


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
							<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>Grasscutters 网页控制台</title>
    <meta name="viewport" content="width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,user-scalable=yes"/>
    <link rel="stylesheet" href="css/mui.min.css">
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/qrcode.min.js"></script>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">Grasscutters 网页控制台</h1>
    </header>
</head>

<body>
<div class="mui-content">
    <div class="mui-card" style="margin-bottom: 35px;">
        <div class="mui-card-header">扫描二维码也可以打开这个页面
            <a type="button" data-loading-text="请稍后" class="mui-btn"
               href="https://wmn1525.github.io/grasscutterTools/dist/index.html#/start/login">使用@wmn1525的面板</a>
        </div>
        <div id="qrcode"></div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">运行状态</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <div class="mui-text-center">
                    <h5 id="id-uptime-title">系统运行时长:</h5>
                </div>
            </div>
            <div class="mui-card-content-inner">
                <div class="mui-text-center">
                    <h5 id="id-player-num-title">在线玩家数量:</h5>
                </div>
            </div>
            <div class="mui-card-content-inner">
                <div class="mui-text-center">
                    <h5 id="id-tick-time-title">Tick耗时:</h5>
                </div>
            </div>
            <div class="mui-card-content-inner">
                <div class="mui-text-center">
                    <h5 id="id-memory-title">内存占用:0/0</h5>
                    <p id="id-memory-progressbar" class="mui-progressbar mui-progressbar-in"><span
                            style="transform: translate3d(-90%, 0px, 0px);"></span></p>
                </div>
            </div>


        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">系统信息</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner" id="id-BaseData">
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">控制台</div>
        <div class="mui-card-content">
            <div class="mui-input-row" contenteditable="true" style="margin: 10px 5px;">
                <textarea id="cmd_msg-textarea" readonly="readonly" rows="10" placeholder=""></textarea>
            </div>
        </div>
        <div class="mui-card-footer">
            <label>命令:</label>
            <input id="id-cmd-input" type="text" style="width: 80%" placeholder="在这里输入命令，不要带/">
            <button class="mui-btn mui-btn-primary" type="button" data-loading-text="请稍后" onclick="do_cmd()">执行</button>
        </div>
    </div>


    <div class="mui-card" style="margin-bottom: 35px;">
        <div class="mui-card-header">在线玩家
            <button type="button" data-loading-text="请稍后" class="mui-btn" onclick="updatePlayerList()">刷新</button>
        </div>
        <ul class="mui-table-view" id="id-player-list">

        </ul>
    </div>


</div>

<script>
    mui.init();


    function getQueryVariable(variable) {
        const query = window.location.search.substring(1);
        const vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            const pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return false;
    }

    let ServerAddress = getQueryVariable("server");
    if (ServerAddress !== false) {
        //URL解码
        ServerAddress = decodeURIComponent(ServerAddress);
    }
    if (ServerAddress === false) {
        mui.prompt("请输入服务器连接地址", "服务器连接地址", "提示", ["连接"], ContentServer);
    } else {
        ContentServer({value: ServerAddress});
    }


    var ws;

    function updatePlayerList() {
        ws.send("{\"type\":\"Player\",\"data\":\"0\"}");
    }

    function ContentServer(value) {
        const server_address = value.value;
        console.log(server_address);

        if (server_address.indexOf("ws://") < 0 && server_address.indexOf("wss://") < 0) {
            mui.alert("服务器地址不正确", "连接失败", "刷新", function () {
                location.reload();
            });
            return;
        }

        try {
            //判断server_address是否是一个有效的websocket地址
            ws = new WebSocket(server_address);
            ws.onopen = function () {
                new QRCode(document.getElementById("qrcode"), {
                    text: "https://liujiaqi7998.github.io/GrasscuttersWebDashboard/index.html?server=" + ServerAddress,
                    width: 180,
                    height: 180,
                    //居中
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
                console.log("连接成功");
                mui.toast("连接成功");
                ws.send("{\"type\":\"State\",\"data\":\"0\"}");
                ws.send("{\"type\":\"Player\",\"data\":\"0\"}");
            }
        } catch (e) {
            mui.alert(e.toString(), "连接失败", "刷新", function () {
                location.reload();
            });
            return;
        }


        ws.onmessage = function (event) {
            const server_msg = JSON.parse(event.data);
            switch (server_msg['eventName']) {
                case 'error':
                    mui.alert(server_msg['data'], "错误", "刷新", function () {
                    });
                    break;
                case 'BaseData':
                    const base_data = server_msg['data'];
                    const str_temp = "服务器名称:" + base_data['ServerName'] + "<br/>\n" +
                        "                系统:" + base_data['SystemVersion'] + "<br/>\n" +
                        "                服务器地址:" + base_data['IP'] + "<br/>\n" +
                        "                JAVA版本:" + base_data['JavaVersion'] + "<br/>\n" +
                        "                插件版本:" + base_data['GrVersion'];
                    document.getElementById("id-BaseData").innerHTML = str_temp;
                    break;
                case 'cmd_msg':
                    const cmd_msg = server_msg['data'];
                    document.getElementById("cmd_msg-textarea").value += cmd_msg + "\n";
                    break;
                case 'tick':
                    const tick_data = server_msg['data'];
                    const memory_used = tick_data['getAllocatedMemory'] - tick_data['getFreeMemory'];
                    mui("#id-memory-progressbar").progressbar().setProgress(memory_used / tick_data['getAllocatedMemory'] * 100);
                    document.getElementById("id-memory-title").innerHTML = "内存占用:" + memory_used + "/" + tick_data['getAllocatedMemory'];
                    document.getElementById("id-uptime-title").innerHTML = "系统运行时长:" + formatSecToStr(Math.ceil(tick_data['serverUptime'] / 1000));
                    document.getElementById("id-player-num-title").innerHTML = "在线玩家数量:" + tick_data['playerCount'];
                    document.getElementById("id-tick-time-title").innerHTML = "Tick耗时:" + tick_data['tickTimeElapsed'];
                    break;
                case 'PlayerList':
                    const player_list = server_msg['data'];
                    //遍历玩家列表
                    let player_list_html = "";
                    for (let i = 0; i < player_list.length; i++) {
                        const player_data = player_list[i];
                        player_list_html += "<li class=\"mui-table-view-cell\">\n" +
                            "                        <div class=\"mui-slider-cell\">\n" +
                            "                            <div class=\"mui-slider-cell-right\">\n" +
                            "                                <p class=\"mui-ellipsis\">UID:" + player_data['uid'] + "</p>\n" +
                            "                                <p class=\"mui-ellipsis\">昵称:" + player_data['nickname'] + "</p>\n" +
                            "                                <p class=\"mui-ellipsis\">签名:" + player_data['signature'] + "</p>\n" +
                            "                                <p class=\"mui-ellipsis\">等级:" + player_data['Level'] + "级</p>\n" +
                            "                                <p class=\"mui-ellipsis\">世界等级:" + player_data['worldLevel'] + "级</p>\n" +
                            "                                <p class=\"mui-ellipsis\">等级:" + player_data['Level'] + "级</p>\n" +
                            "                                <p class=\"mui-ellipsis\">坐标:" + player_data['pos'] + "</p>\n" +
                            "                                <p class=\"mui-ellipsis\">场景:" + player_data['SceneId'] + "</p>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                    </li>";
                    }
                    document.getElementById("id-player-list").innerHTML = player_list_html;
                    break;
                default:
                    break;
            }
        }
        ws.onclose = function () {
            console.log("连接关闭");
            mui.alert("与服务器断开连接", "连接失败", "刷新", function () {
                location.reload();
            });
        }
    }

    function do_cmd(e) {
        const send_msg = {
            "type": "CMD",
            "data": document.getElementById("id-cmd-input").value
        };
        const send_msg_str = JSON.stringify(send_msg);
        ws.send(send_msg_str);
    }

    function formatSecToStr(seconds) {
        let daySec = 24 * 60 * 60;
        let hourSec = 60 * 60;
        let minuteSec = 60;
        let dd = Math.floor(seconds / daySec);
        let hh = Math.floor((seconds % daySec) / hourSec);
        let mm = Math.floor((seconds % hourSec) / minuteSec);
        let ss = seconds % minuteSec;
        if (dd > 0) {
            return dd + "天" + hh + "小时" + mm + "分钟" + ss + "秒";
        } else if (hh > 0) {
            return hh + "小时" + mm + "分钟" + ss + "秒";
        } else if (mm > 0) {
            return mm + "分钟" + ss + "秒";
        } else {
            return ss + "秒";
        }
    }
</script>

</body>

</html>