|
|
@@ -0,0 +1,322 @@
|
|
|
+<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>
|