iaun
/
cc_test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
							<html lang="zh">

<head>
    <title>管理员主页</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="/jquery.min.js"></script>
    <script src="/vue.js"></script>
    <script src="/elementui.js"></script>
    <script src="/js.cookie.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/elementui.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .font {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        .right {
            float: left;
            padding: 20px;
            width: calc(100% - 240px);
            overflow: auto;
            height: calc(100% - 40px);
        }
    </style>
</head>

<body>

    <div id="app">
        <div style="float:left; width:200px; height: 100%;">
            <!-- 菜单项 -->
            <el-menu style="height:100%;" :default-active="activeIndex" @select="handleSelect">
                <el-menu-item index="1">
                    <i class="el-icon-coin"></i>
                    <span slot="title">日志</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-zoom-in"></i>
                    <span slot="title">详情</span>
                </el-menu-item>
                <li style="padding: 0 20px;box-sizing: border-box;text-align: center;">
                    <el-popconfirm title="确定要退出登录吗？" @confirm="logout">
                        <el-button slot="reference" style="margin-top: 20px;">退出登录</el-button>
                    </el-popconfirm>
                </li>
            </el-menu>

        </div>
        <div class="right" v-show="activeIndex==='1'">
            <el-table :data="logData" stripe style="width: 100%;">
                <el-table-column prop="time" label="时间" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="310">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="180">
                </el-table-column>
                <el-table-column prop="msg" label="消息">
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="data.page" :page-size="data.len" :page-sizes="[10, 20, 30, 50, 100]" layout="sizes, total, prev, pager, next" :total="data.count">
            </el-pagination>
        </div>
        <div class="right" v-show="activeIndex==='2'">
            <el-table :data="detailsData" stripe style="width: 100%;">
                <el-table-column prop="name" label="姓名" width="310">
                </el-table-column>
                <el-table-column prop="time" label="首次完成时间" width="180">
                </el-table-column>
                <el-table-column prop="fail" label="失败提交次数" width="180">
                </el-table-column>
                <el-table-column prop="fail" label="查看实验账号密码">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row.id, scope.row.name)">查看</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div>
            <el-dialog :title="showKeyUser" :visible="userKey!==null" width="50%" :show-close="false">
                <el-table :data="msgData" stripe style="height: 50%;" height="50%">
                    <el-table-column prop="time" label="时间">
                    </el-table-column>
                    <el-table-column prop="msg" label="账号密码">
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose">确定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>

    <script>
        var app;
        var vue = new Vue({
            el: '#app',
            data: {
                apiUrl: '/api',
                isLoading: false,
                activeIndex: "",
                data: {
                    count: 0,
                    page: 1,
                    len: 10,
                    data: [],
                    interval: -1
                },
                details: {
                    data: [],
                    interval: -1
                },
                userKey: null,
                showKeyUser: ""
            },
            computed: {
                msgData: function() {
                    if (!this.userKey) {
                        return []
                    }
                    for (var i = 0, j = this.userKey.length; i < j; i++) {
                        if (this.userKey[i]["time"] === 0) {
                            this.userKey[i]["time"] = "";
                        }
                        else {
                            this.userKey[i]["time"] = this.formatDate(this.userKey[i]["time"]);
                        }

                    }
                    return this.userKey;
                },
                detailsData: function() {
                    for (var i = 0, j = this.details.data.length; i < j; i++) {
                        if (this.details.data[i]["time"] === 0) {
                            this.details.data[i]["time"] = "";
                        }
                        else {
                            this.details.data[i]["time"] = this.formatDate(this.details.data[i]["time"]);
                        }

                    }
                    return this.details.data;
                },
                logData: function() {
                    for (var i = 0, j = this.data.data.length; i < j; i++) {
                        if (this.data.data[i]["time"] === 0) {
                            this.data.data[i]["time"] = "";
                        }
                        else {
                            this.data.data[i]["time"] = this.formatDate(this.data.data[i]["time"]);
                        }
                        switch (this.data.data[i]["type"]) {
                            case 0:
                                this.data.data[i]["type"] = "提交URL";
                                break;
                            case 1:
                                this.data.data[i]["type"] = "URL结果匹配成功！！";
                                break;
                            case 2:
                                this.data.data[i]["type"] = "URL结果匹配失败";
                                break;
                            case 3:
                                this.data.data[i]["type"] = "提交实验账号";
                                break;
                            default:
                                this.data.data[i]["type"] = "";
                                break;
                        }

                    }
                    return this.data.data;
                },
            },
            methods: {
                req(url, method, data) {
                    data = data ? JSON.stringify(data) : "";
                    return new Promise(function(resolve, reject) {
                        $.ajax({
                            type: method,
                            url: url,
                            data: data ? data : "",
                            contentType: data ? "application/json" : "",
                            success: function(data) {
                                resolve(data);
                            },
                            error: function(err) {
                                reject(err);
                            }
                        });
                    });
                },
                getDetails() {
                    this.req(this.apiUrl + "/log/get/details", "GET", null).then((data) => {
                        this.details.data = data;
                    }).catch((err) => {
                        this.logoutAlert("服务器错误8");
                    });
                },
                logoutAlert(msg) {
                    this.$alert(msg, '错误', {
                        showClose: false,
                        confirmButtonText: '重新登录',
                        callback: action => {
                            this.logout();
                        }
                    });
                },
                logout() {
                    Cookies.set("admin_token", "");
                    location.href = "/admin";
                },
                getData() {
                    this.req(this.apiUrl + "/admin/get", "POST", { page: this.data.page, length: this.data.len }).then((data) => {
                        if (data && data["success"]) {
                            this.data.data = data["msg"]["data"];
                            this.data.count = data["msg"]["count"];
                        }
                        else {
                            logoutAlert("无法获取数据");
                        }
                    }).catch((err) => {
                        logoutAlert("未知错误");
                    });
                },
                formatDate: function(timestamp) {
                    var d = new Date(timestamp * 1000);
                    return d.getFullYear() + "-" + ((d.getMonth() + 1 >= 10) ? (d.getMonth() + 1) : "0" + (d.getMonth() + 1)) + "-" + ((d.getDate() >= 10) ? d.getDate() + "" : "0" + d.getDate()) + " " + ((d.getHours() >= 10) ? d.getHours() + "" : "0" + d.getHours()) + ":" + ((d.getMinutes() >= 10) ? d.getMinutes() + "" : "0" + d.getMinutes()) + ":" + ((d.getSeconds() >= 10) ? d.getSeconds() + "" : "0" + d.getSeconds());
                },
                handleSizeChange: function(size) {
                    this.data.len = size;
                    this.getData();
                },
                handleCurrentChange: function(page) {
                    this.data.page = page;
                    this.getData();
                },
                handleSelect: function(index) {
                    if (index === this.activeIndex) {
                        return;
                    }
                    if (index === "1") {
                        this.getData();
                        var self = this;
                        this.data.interval = setInterval(function() { self.getData(); }, 3000);
                    }
                    else {
                        clearInterval(this.data.interval);
                    }
                    if (index === "2") {
                        this.getDetails();
                        var self = this;
                        this.details.interval = setInterval(function() { self.getDetails(); }, 3000);
                    }
                    else {
                        clearInterval(this.details.interval);
                    }
                    Cookies.set("admin_page", index);
                    this.activeIndex = index;
                },
                handleClick: function(id, name) {
                    this.showKeyUser = name;
                    this.req(this.apiUrl + "/admin/key/get", "POST", { id: id }).then((data) => {
                        if (data["success"]) {
                            this.userKey = data["msg"];
                        }
                        else {
                            this.$message.closeAll();
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: data["msg"]
                            });
                        }
                    }).catch((err) => {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "服务器错误"
                        });
                    });
                },
                handleClose: function() {
                    this.userKey = null;
                }
            },
            mounted: function() {
                app = this;
                var token = Cookies.get("admin_token");
                if (token) {
                    this.req(this.apiUrl + "/admin/login/cookie", "GET", null).then((data) => {
                        if (!data || !data["success"]) {
                            Cookies.set("admin_token", "");
                            logoutAlert(data["msg"]);
                        }
                    }).catch(() => {
                        logoutAlert(data["msg"]);
                        Cookies.set("admin_token", "");
                    });
                }
                var page = Cookies.get("admin_page");
                if (page) {
                    this.handleSelect(page);
                }
                else {
                    this.handleSelect("1");
                }
                // this.getData();
                // this.getDetails();
            }
        });
    </script>
</body>

</html>