iaun
/
cc_test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
							<html style="width:100%; height:100%;" 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);
        }

        .box-card {
            width: 450px;
        }
    </style>
</head>

<body style="width:100%; height:100%;">
    <div id="app" style="width:100%; height:100%;">
        <div style="float:left; width:200px; height: 100%;">
            <!-- 菜单项 -->
            <el-menu style="height:100%;" :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
                <!--<el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">帮助</span>
                </el-menu-item>-->
                <el-menu-item index="2">
                    <i class="el-icon-document"></i>
                    <span slot="title">提交</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-coin"></i>
                    <span slot="title">日志</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <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-item index="4">-->
                <!--<i class="el-icon-setting"></i>-->
                <!--<span @click="logout" slot="title">退出登录</span>-->
                <!--</el-menu-item>-->
            </el-menu>

        </div>
        <!-- 页面 -->
        <!--help-->
        <div v-show="activeIndex==='1'" class="right">
            <p style="margin-bottom: 20px;">当前用户：{{name}}</p>
            <p>帮助页面</p>
        </div>
        <!--submit-->
        <div v-show="activeIndex==='2'" class="right" v-loading="!submit.urlOK || !submit.keyOK">
            <p style="margin-bottom: 20px;">当前用户：{{name}}</p>
            <el-card class="box-card">
                <div slot="header">
                    <span>提交URL</span>
                </div>
                <p style="margin-bottom: 10px;">提交的URL：</p>
                <el-input @keydown.native.enter="submitSetUrl" v-model="submit.url" placeholder="e.g. http://123.123.123.123/" :disabled="submit.submitUrlDelay"></el-input>
                <p style="margin-top: 20px;">状态：<span :style="'color:'+statusColor+';font-weight:bold;'">{{statusTxt}}</span></p>
                <p style="margin-top: 20px; word-wrap: break-word; word-break: break-all;" v-show="submit.urlMsg!==''">消息：{{submit.urlMsg}}</p>
                <el-button style="margin-top: 20px;" type="primary" @click="submitSetUrl" :disabled="submit.submitUrlDelay">提交</el-button>
            </el-card>
            <el-card style="margin-top: 30px;" class="box-card">
                <!--v-if="submit.reqStatus===1 || submit.ak !== ''"-->
                <div slot="header">
                    <span>提交实验账号密码</span>
                </div>
                <p style="margin-bottom: 10px;">提交的实验邮箱：</p>
                <el-input @keydown.native.enter="submitSetKey" v-model="submit.ak" placeholder="e.g. abcdef@ghijk.com" :disabled="submit.submitKeyDelay"></el-input>
                <p style="margin: 10px 0;">提交的实验密码：</p>
                <el-input type="password" @keydown.native.enter="submitSetKey" v-model="submit.sk" placeholder="e.g. abcdefABCDEFabcdef" :disabled="submit.submitKeyDelay"></el-input>
                <el-button style="margin-top: 20px;" type="primary" @click="submitSetKey" :disabled="submit.submitKeyDelay">提交</el-button>
            </el-card>

        </div>
        <!--scoreboard-->
        <div v-show="activeIndex==='3'" class="right">
            <p style="margin-bottom: 20px;">当前用户：{{name}}</p>
            <!-- v-loading="!log.reqOK"-->
            <el-table :data="logData" 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="type" label="内容">
                </el-table-column>
            </el-table>
        </div>
        <!--details-->
        <div v-show="activeIndex==='4'" class="right">
            <p style="margin-bottom: 20px;">当前用户：{{name}}</p>
            <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="失败提交次数（不影响成绩）">
                </el-table-column>
            </el-table>
        </div>
    </div>

    <script>
        var app;
        var vue = new Vue({
            el: '#app',
            data: {
                apiUrl: '/api',
                needLogout: false,
                name: "",
                activeIndex: "",
                currentPage: "-1",
                submit: {
                    url: "",
                    reqStatus: -1,
                    urlInterval: -1,
                    urlMsg: "",
                    ak: "",
                    sk: "",
                    urlOK: false,
                    keyOK: false,
                    submitUrlDelay: false,
                    submitKeyDelay: false
                },
                log: {
                    data: [],
                    interval: -1
                },
                details: {
                    data: [],
                    interval: -1
                }
            },
            computed: {
                logData: function() {
                    for (var i = 0, j = this.log.data.length; i < j; i++) {
                        this.log.data[i]["time"] = this.formatDate(this.log.data[i]["time"]);
                        switch (this.log.data[i]["type"]) {
                            case 1:
                                this.log.data[i]["type"] = "URL结果匹配成功！！";
                                break;
                            case 2:
                                this.log.data[i]["type"] = "URL结果匹配失败";
                                break;
                            default:
                                this.log.data[i]["type"] = "";
                                break;
                        }
                    }
                    return this.log.data;
                },
                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;
                },
                statusTxt: function() {
                    switch (this.submit.reqStatus) {
                        case 0:
                            return "请求中，请等待至多10秒"
                        case 1:
                            return "成功"
                        case 2:
                            return "失败"
                        default:
                            return "未提交"
                    }
                },
                statusColor: function() {
                    switch (this.submit.reqStatus) {
                        case 1:
                            return "green"
                        case 2:
                            return "red"
                        default:
                            return "black"
                    }
                }

            },

            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);
                            }
                        });
                    });
                },
                getUser() {
                    this.req(this.apiUrl + "/user/get", "GET", null).then((data) => {
                        if (!data["msg"]) {
                            this.$message.closeAll();
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: "未知错误3"
                            });
                        }
                        else {
                            if (typeof data["msg"] === "string") {
                                this.logoutAlert(data["msg"]);
                                // this.$message.closeAll();
                                // this.$message({
                                //     type: 'error',
                                //     showClose: true,
                                //     message: data["msg"]
                                // });
                            }
                            else {
                                this.name = data["msg"]["name"];
                            }
                        }
                    }).catch(() => {
                        this.logoutAlert("服务器错误3");
                        // this.$message.closeAll();
                        // this.$message({
                        //     type: 'error',
                        //     showClose: true,
                        //     message: "服务器错误3"
                        // });
                    });

                },
                logoutAlert(msg) {
                    this.$alert(msg, '错误', {
                        showClose: false,
                        confirmButtonText: '重新登录',
                        callback: action => {
                            this.logout();
                        }
                    });
                },
                handleSelect(index) {
                    if (index === this.activeIndex) {
                        return;
                    }
                    Cookies.set("page", index);
                    this.activeIndex = index;
                    if (index === "2") { // submit
                        this.submitGetUrl();
                        this.submitGetKey();
                    }
                    else {
                        clearInterval(this.submit.timeInterval);
                    }

                    if (index === "3") { // log
                        var self = this;
                        this.log.interval = setInterval(function() { self.getLog(); }, 3000);
                        this.getLog();
                    }
                    else {
                        clearInterval(this.log.interval);
                    }

                    if (index === "4") { // details
                        var self = this;
                        this.details.interval = setInterval(function() { self.getDetails(); }, 3000);
                        this.getDetails();
                    }
                    else {
                        clearInterval(this.details.interval);
                    }
                },
                logout() {
                    Cookies.set("token", "");
                    Cookies.set("page", "");
                    location.href = "/";
                },
                submitGetUrl(statusOnly) {
                    if (!statusOnly) {
                        this.submit.urlOK = false;
                        this.submit.url = "";
                        this.submit.reqStatus = "";
                    }

                    this.req(this.apiUrl + "/url/get", "GET", null).then((data) => {
                        this.submit.urlOK = true;
                        if (data["success"] === 1 && typeof data["msg"] === 'object' && typeof data["msg"]["url"] === 'string' && typeof data["msg"]["status"] === 'number') {
                            this.submit.reqStatus = data["msg"]["status"];
                            this.submit.urlMsg = data["msg"]["msg"];
                            if (!statusOnly) {
                                this.submit.url = data["msg"]["url"];
                            }
                            if (this.submit.reqStatus === 0 && !statusOnly) {
                                var self = this;
                                this.submit.timeInterval = setInterval(function() { self.submitGetUrl(true); }, 3000);
                            }
                            if (this.submit.reqStatus !== 0) {
                                clearInterval(this.submit.timeInterval);
                            }
                        }
                    }).catch((err) => {
                        this.logoutAlert("服务器错误4");
                    });
                },
                submitGetKey() {
                    this.submit.keyOK = false;
                    this.submit.ak = "";
                    this.submit.sk = "";
                    this.req(this.apiUrl + "/key/get", "GET", null).then((data) => {
                        this.submit.keyOK = true;
                        if (data["success"] === 1 && typeof data["msg"] === 'object' && typeof data["msg"]["ak"] === 'string' && typeof data["msg"]["sk"] === 'string') {
                            this.submit.ak = data["msg"]["ak"];
                            this.submit.sk = data["msg"]["sk"];
                        }
                    }).catch((err) => {
                        this.submit.keyOK = true;
                        console.log(err);
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "未知错误4"
                        });
                    });
                },
                submitSetUrl() {
                    if (this.submit.url === "") {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "请输入URL"
                        });
                        return;
                    }
                    this.submit.submitUrlDelay = true;
                    var self = this;
                    setTimeout(function() { self.submit.submitUrlDelay = false; }, 3000);
                    this.req(this.apiUrl + "/url/set", "POST", { "url": this.submit.url }).then((data) => {
                        if (data["success"] === 1) {
                            this.$message.closeAll();
                            this.$message({
                                type: 'success',
                                showClose: true,
                                message: "提交成功"
                            });
                            var self = this;
                            this.submitGetUrl(true);
                            this.submit.timeInterval = setInterval(function() { self.submitGetUrl(true); }, 3000);
                        }
                        else {
                            this.$message.closeAll();
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: data["msg"]
                            });
                        }
                    }).catch((err) => {
                        this.logoutAlert("服务器错误5");
                    });
                },
                submitSetKey() {
                    if (this.submit.ak === "") {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "请输入邮箱"
                        });
                        return;
                    }
                    if (this.submit.sk === "") {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "请输入密码"
                        });
                        return;
                    }
                    this.submit.submitKeyDelay = true;
                    var self = this;
                    setTimeout(function() { self.submit.submitKeyDelay = false; }, 3000);
                    this.req(this.apiUrl + "/key/set", "POST", { ak: this.submit.ak, sk: this.submit.sk }).then((data) => {
                        if (data && (data["success"] === 1 || data["success"] === -1)) {
                            this.$message.closeAll();
                            this.$message({
                                type: 'success',
                                showClose: true,
                                message: "提交成功"
                            });
                        }
                    }).catch((err) => {
                        this.logoutAlert("服务器错误6");
                    });
                },
                getLog() {
                    // this.log.data = [];
                    this.req(this.apiUrl + "/log/get", "GET", null).then((data) => {
                        this.log.data = data;
                    }).catch((err) => {
                        this.logoutAlert("服务器错误7");
                    });
                },
                getDetails() {
                    this.req(this.apiUrl + "/log/get/details", "GET", null).then((data) => {
                        this.details.data = data;
                    }).catch((err) => {
                        this.logoutAlert("服务器错误8");
                    });
                },
                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());
                }
            },
            mounted: function() {
                app = this;
                this.getUser();
                var page = Cookies.get("page");
                if (page) {
                    this.handleSelect(page);
                }
                else {
                    this.handleSelect("2");
                }
                // this.getLog();
            }
        });
    </script>
</body>

</html>