标签：des style blog http color io os 使用 ar
管理员登陆界面-manage-admin
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="robots" content="noindex,nofollow"> 7 <meta name="description" content="Description"> 8 <meta name="keywords" content="keyword, keyword, keyword"> 9 10 <title><?php echo $this->get_var(‘title‘)?></title> 11 12 <link href="/css/bootstrap.css" rel="stylesheet"> 13 <!-- <link href="/css/bootstrap-theme.css" rel="stylesheet">--> 14 <link href="/css/style.css" rel="stylesheet"> 15 16 <script src="/js/jquery.js"></script> 17 <script src="/js/bootstrap.js"></script> 18 <script src="/plugins/layer/layer.min.js"></script> 19 <!-- <script src="/js/core.js"></script>--> 20 <script src="/js/custom.js"></script> 21 <script type="text/javascript"> 22 function logout(){ 23 if (confirm("退出确认？")) 24 window.location = ‘<?php echo Server::getRootURL().‘logout‘;?>‘; 25 return false; 26 } 27 $(document).ready(function() { 28 $.post("/user/userMessage", //若是管理员则获取apply的个数 29 function (data){ 30 //alert("hello"); 31 if(data>0){ 32 $("#applynum").append(data); 33 } 34 else{ 35 $("#applynum").append("0"); 36 } 37 }, 38 "json"); 39 40 }); 41 </script> 42 43 </head> 44 <body> 45 <header class="container"> 46 <div class="row"> 47 <div class="col-md-6"><h1>互联网离线学习系统</h1></div> 48 <div class="col-md-6"> 49 <ul class="nav nav-pills pull-right"> 50 <li class="active"><a href="#"><i class="icon-home icon-black"></i> 首页</a></li> 51 <li><a href="#"><i class="icon-envelope icon-black"></i> 52 <?php session_start(); 53 if(isset($_SESSION[‘user_name‘])){ 54 $user_name="<span>".$_SESSION[‘user_name‘]."</span>"; 55 }else{ 56 $user_name="<span>未登录</span>"; 57 } 58 echo $user_name; 59 ?></a></li> 60 <li><a href="#"><i class="icon-envelope icon-black"></i>管理员</a></li> 61 <li><a id="message" href="/view/apply"><i class="icon-envelope icon-black"></i> 消息 <span class="badge badge-info" id="applynum"></span></a></li> 62 <li><a href="#" onClick="logout()"><i class="icon-off icon-black"></i> 退出系统</a></li> 63 </ul> 64 </div> 65 </div> 66 </header> 67 68 <div class="navbar navbar-inverse wm-navbar"> 69 <div class="container"> 70 <div class="navbar-header"> 71 <a class="navbar-brand" href="#"> 72 Internet Protocal Recognition Offline Learning System 73 </a> 74 </div> 75 </div> 76 </div> 77 <div class="container wm-container"> 78 <div class="row"> 79 <div class="col-md-3" > 80 <div class="sidebar" style="display:block;"> 81 <ul class="nav sidebar-nav"> 82 <li class="nav-title">系统功能</li> 83 <li> 84 <a href="#"> 85 <i class="glyphicon glyphicon-stats"></i> 集群管理 86 <span class="caret pull-right"></span> 87 </a> 88 <ul class="nav"> 89 <li class="navitem"><a href="/view/systemControl">系统启动控制</a></li> 90 <li class="navitem"><a href="/view/nameNodeState">NameNode查询</a></li> 91 <li class="navitem"><a href="/view/jobTrackerState">JobTracker查询</a></li> 92 </ul> 93 </li> 94 <li><a href="#"><i class="glyphicon glyphicon-list"></i> 任务管理 95 <span class="caret pull-right"></span> 96 </a> 97 <ul class="nav"> 98 <li class="navitem"><a href="/view/fileManage">HDFS管理</a></li> 99 <li class="navitem"><a href="/view/detectionManage">新建任务</a></li> 100 </ul> 101 </li> 102 <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 用户管理 103 <span class="caret pull-right"></span> 104 </a> 105 <ul class="nav"> 106 <li class="navitem"><a href="/view/userInfo">个人信息</a></li> 107 <li class="navitem"><a href="/view/password">修改密码</a></li> 108 <li class="navitem"><a href="/view/apply">用户管理</a></li> 109 </ul> 110 </li> 111 <li><a href="#"><i class="glyphicon glyphicon-thumbs-up"></i> 帮助信息 112 <span class="caret pull-right"></span> 113 </a> 114 <ul class="nav"> 115 <li class="navitem"><a href="/view/introduction" target="nav-content">系统介绍</a></li> 116 <li class="navitem"><a href="/view/connect" target="nav-content">联系我们</a></li> 117 </ul> 118 </li> 119 </ul> 120 </div> 121 </div> 122 <div class="preview-iframe" id="nav-content" > 123 <section> 124 Comming soon. 125 </section> 126 </div> 127 </div> 128 129 </div> 130 <!--<footer class="center-block text-center"> 131 <hr> 132 <p><small>Firefox 4/Chrome 10/Safari 5/Opera 11 or higher version, with 1024x768 or higher resolution for best views.<br>Copyright © 2012 by BUPT-DMTeam.All rights reserved </small></p> 133 </footer> --> 134 </body> 135 </html>
用户注册页面
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <!-- Bootstrap --> 7 <link rel="stylesheet" href="/css/bootstrap.css"> 8 <link rel="stylesheet" href="/css/style.css"> 9 <style> 10 11 body{font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;} 12 h1, .h1, h2, .h2, h3, .h3, h4, .h4, .lead {font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;} 13 pre code { background: transparent; } 14 @media (min-width: 768px) { 15 .bs-docs-home .bs-social, 16 .bs-docs-home .bs-masthead-links { 17 margin-left: 0; 18 } 19 } 20 21 .bs-docs-section p { 22 line-height: 2; 23 } 24 25 .bs-docs-section p.lead { 26 line-height: 1.4; 27 } 28 29 30 31 </style> 32 <title><?php echo $this->get_var(‘title‘);?></title> 33 34 <script src="/js/jquery.js"></script> 35 <script src="/js/bootstrap.js"></script> 36 37 <script type="text/javascript"> 38 39 //判断用户输入的用户名是否可用 40 function checkUsername(){ 41 if($("#user_name").val()!=""){ 42 $.post("/user/serviceUserNameCheck", 43 { memberid:$("#user_name").val()}, 44 function (data, textStatus){ 45 if(data.isMemberIdUsed==true){ 46 $("#user_name").addClass("ok"); 47 }else{ 48 $("#user_name").removeClass("ok"); 49 } 50 }, 51 "json"); 52 } 53 } 54 55 //检查用户的密码是否合法，目前密码的唯一要求就是不能为空 56 function checkPassword(){ 57 var password=$("#password").val(); 58 if(password==""){ 59 $("#password").removeClass("ok"); 60 } 61 else{ 62 $("#password").addClass("ok"); 63 } 64 } 65 66 function checkRePassword(){ 67 var password=$("#password").val(); 68 var rePassword=$("#repassword").val(); 69 if(rePassword==""){ 70 $("#repassword").removeClass("ok"); 71 } 72 else{ 73 if(password!=rePassword){ 74 $("#repassword").removeClass("ok"); 75 } 76 else{ 77 $("#repassword").addClass("ok"); 78 } 79 } 80 } 81 82 function checkSubmit(){ 83 var username=false; 84 var password=false; 85 var repassword=false; 86 var agree=document.getElementById("agree").checked; 87 88 if($("#user_name").hasClass("ok") && ($("#user_name").val()!="")){ 89 username=true; 90 } 91 if($("#password").hasClass("ok")){ 92 password=true; 93 } 94 if($("#repassword").hasClass("ok")){ 95 repassword=true; 96 } 97 if(username && password && repassword && agree){ 98 $("#formRegist").submit(); 99 } 100 } 101 </script> 102 </head> 103 <body> 104 <div class="navbar navbar-inverse navbar-static-top header" > 105 <div class="container"> 106 <div class="navbar-header"> 107 <a class="navbar-brand" href="#"><?php echo $this->get_var(‘logo_text‘);?></a> 108 </div> 109 <div class="collapse navbar-collapse"> 110 <ul class="nav navbar-nav"> 111 <li class="active"><a href="#">首页</a></li> 112 <li><a class="#">关于我们</a></li> 113 <li><a href="#">联系我们</a></li> 114 </ul> 115 </div> 116 </div> 117 </div> 118 <div class="container"> 119 <div class="wm-register-box well m-well center-block"> 120 <div class="panel-heading"> 121 <div class="panel-title">新用户注册</div> 122 123 </div> 124 <div class="panel-body"> 125 <form class="form-horizontal" id="formRegist" role="form" action="/user/serviceRegister" method="post"> 126 <div class="form-group"> 127 <label for="user_name" class="col-md-2 control-panel"> 128 用户名: 129 </label> 130 <div class="col-md-10"> 131 <input type="text" class="form-control" id="user_name" name="user_name" placeholder="请输入用户名" onblur="checkUsername()"> 132 </div> 133 </div> 134 <div class="form-group"> 135 <label for="password" class="col-md-2 control-panel"> 136 密码: 137 </label> 138 <div class="col-md-10"> 139 <input type="password" class="form-control" id="password" name="password" placeholder="密码" onblur="checkPassword()"> 140 <p class="help-block"> 141 最少6个字符 (只允许数字字母) 142 </p> 143 </div> 144 </div> 145 <div class="form-group"> 146 <label for="repassword" class="col-md-2 control-panel"> 147 确认密码: 148 </label> 149 <div class="col-md-10"> 150 <input type="password" class="form-control" id="repassword" name="repassword" placeholder="请再次输入密码" onblur="checkRePassword()"> 151 </div> 152 </div> 153 <div class="form-group"> 154 <label for="emailaddress" class="col-md-2 control-panel"> 155 邮箱地址: 156 </label> 157 <div class="col-md-10"> 158 <input type="email" class="form-control" id="emailaddress" name="email" placeholder="邮箱地址"> 159 <p class="help-block"> 160 例如: yourname@domain.com 161 </p> 162 </div> 163 </div> 164 165 166 <div class="form-group"> 167 <label for="role" class="col-md-2 control-panel"> 168 用户角色: 169 </label> 170 <div class="col-md-10"> 171 <label class="radio"> 172 <input type="radio" name="role" id="role" value="normal" checked> 173 普通用户 174 </label> 175 <label class="radio"> 176 <input type="radio" name="role" id="role" value="admin"> 177 管理员用户 178 </label> 179 </div> 180 </div> 181 182 <div class="form-group"> 183 <label for="describe" class="col-md-2 control-panel"> 184 备注: 185 </label> 186 <div class="col-md-10"> 187 <textarea class="form-control" id="comment" name="comment" ></textarea> 188 </div> 189 </div> 190 191 <div class="checkbox"> 192 <div class="col-md-2 control-panel"> 193 </div> 194 <div class="col-md-10"> 195 <label> 196 <input type="checkbox" id="agree"> 197 同意使用协议和所有条款 198 </label> 199 </div> 200 </div> 201 202 <div class="row"> 203 <div class="col-md-2 control-panel"> 204 </div> 205 <div class="col-md-2"> 206 <button type="button" class="btn btn-info" id="submitRegist" onClick="checkSubmit()"> 207 提交注册 208 </button> 209 </div> 210 </div> 211 </form> 212 </div> 213 </div> 214 </div> 215 </body> 216 </html>
查看用户信息界面user_info
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<meta name="description" content="Description">
<meta name="keywords" content="keyword, keyword, keyword">
<title><?php echo $this->get_var(‘title‘)?></title>
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/jquery.form.js"></script>
<script type="text/javascript">
// onsubmit="return alertUser();"
function alertUser(){
// jquery 表单提交
$("#refreshForm").ajaxSubmit(function(data) {
// 对于表单提交成功后处理，message为提交页面operation.htm的返回内容
var obj = eval ("(" + data + ")");
if(obj.retval==true){
$("#success-confirm").show();
}else{
$("#fail-confirm").show();
}
});
return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
}
$(document).ready(function(){
$("#success-confirm").hide();
$("#fail-confirm").hide();
$.ajax({
url:‘/user/getUserInfo‘,
type:‘POST‘,
success:function(data){
var obj = eval ("(" + data + ")");
$("#name").val(obj.name);
$("#role").val(obj.role);
$("#email").val(obj.email);
$("#comment").val(obj.comment);
}
});
});
</script>
</head>
<body>
<div id="subContent">
<div class="row col-md-12">
<div>
<ul class="breadcrumb">
<li><a href="#">系统功能</a> <span class="divider"></span></li>
<li><a href="#">用户管理</a> <span class="divider"></span></li>
<li class="active">个人信息</li>
</ul>
</div>
<div class="alert alert-success" id="success-confirm">
<strong>更新成功：</strong>用户数据已经更新
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-success" id="fail-confirm">
<strong>更新失败：</strong>用户数据更新失败
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="well center-block">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10"><input type="text" class="form-control" id="name"></div>
</div>
<div class="form-group">
<label for="role" class="col-sm-2 control-label">用户权限:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="role">
</div>
</div>
</form>
<form class="form-horizontal" id="refreshForm" action="/user/userBasicInfoUpdate"
method="post" onsubmit="return alertUser();">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱:</label>
<div class="col-md-10">
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group">
<label for="comment" class="col-md-2 control-label">
描述:
</label>
<div class="col-md-10">
<textarea class="form-control" id="comment" name="comment"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-2 control-label">
</div>
<div class="col-md-10">
<button type="submit" class="btn btn-success pull-right">
更新信息
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
文件管理file_manage
<!DOCTYPE html>
<html lang="zh-cn">
<html>
<HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<meta name="description" content="Description">
<meta name="keywords" content="keyword, keyword, keyword">
<title>互联网离线学习系统</title>
<link href="/css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link href="/css/style.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<SCRIPT type="text/javascript">
//global var
var uploadType="uploadMethod";
//normal js
function showConfiguration(str){
if(str=="upload"){
document.getElementById("uploadMethod").style.display="block";
document.getElementById("browseMethod").style.display="none";
uploadType="uploadMethod";
}else{
document.getElementById("uploadMethod").style.display="none";
document.getElementById("browseMethod").style.display="block";
uploadType="browseMethod";
}
}
//ztree
var setting = {
async: {
enable: true,
url:"/file/getNodes",
autoParam:["id", "name", "location"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
},
view: {
expandSpeed:"fast", //zTree 节点展开、折叠时的动画速度,设置为 "" 时，不显示动画效果
addHoverDom: addHoverDom, //用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
removeHoverDom: removeHoverDom, //用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
selectedMulti: false, //不许同时选中多个节点
dblClickExpand: false
},
check: {
enable: false
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn:true,
ShowRenameBtn:true,
removeTitle: "删除",
renameTitle: "编辑"
},
data: {
keep:{
leaf:true,
parent:true
},
simpleData: {
enable: true
}
},
callback: {
beforeDrag: zTreeBeforeDrag, //禁止拖动
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove:onRemove,
onRename:onRename,
onRightClick:OnRightClick
}
};
var urlStrOption ="";//对于树节点的增删改操作ajax异步处理的url地址
var params=""; //ajax异步处理需要传入到服务端的数据
var oldName=""; //保存当前节点编辑以前的名称
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
return childNodes;
}
function zTreeBeforeDrag(treeId, treeNodes) {
return false;
};
function beforeRemove(treeId, treeNode) {
zTree.selectNode(treeNode); //选中指定节点,单选，无返回值
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(event,treeId, treeNode){
urlStrOption=‘/file/remove‘;
var params="location="+treeNode.location;
var message=zTreeOption(urlStrOption,params);
if(message==="success"){
//var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//zTree.addNodes(treeNode, {id:treeNode.id, pId:treeNode.pId, name:treeNode.name, location:treeNode.location});
alert("删除成功");
}else{
alert("删除失败");
}
}
function beforeRename(treeId, treeNode, newName) {
oldName=treeNode.name;
if (newName.length == 0) {
alert("节点名称不能为空.");
return false;
}
return true;
}
function onRename(event, treeId, treeNode) {
if(treeNode.name!=oldName){
urlStrOption = ‘/file/rename‘;
var params = "location="+treeNode.location+"&newName="+treeNode.name+"&oldName="+oldName;
var message=zTreeOption(urlStrOption,params);
if(message==="success"){
alert("重命名成功");
}else{
alert("重命名失败");
treeNode.name=oldName;
}
}
}
//下面是添加新建按钮
function addHoverDom(treeId, treeNode) {
if(!treeNode.isParent)
return;
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.id
+ "‘ title=‘新建‘ onfocus=‘this.blur();‘></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.id);
//下面是新增文件功能
if (btn) btn.bind("click", function(){
var newDirName=window.prompt("输入新文件夹的名字");
var len=treeNode.children.length;
var newChildId=treeNode.id+len;
var location=treeNode.location+"/"+newDirName;
var validLoc=location.replace(/(\/\/)/g,"/");
zTree.addNodes(treeNode, {id:newChildId, pId:treeNode.id, name:newDirName,location:validLoc,isParent:true});
var addUrl="/file/addNode";
var params={dirname:validLoc};
var state=zTreeOption(addUrl,$.param(params));
if(state=="success")
alert("新建成功");
else
alert("新建失败");
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.id).unbind().remove(); //remove() 方法移除被选元素，包括所有文本和子节点
};
function zTreeOption(doUrl, backParams){
var tempdata ;
$.ajax({
async: false,
url: doUrl,
type: ‘post‘,
dataType: ‘text‘,
data: backParams,
success: function(data) {
tempdata = data;
}
});
return tempdata;
}
//下面是右键菜单的函数
function OnRightClick(event, treeId, treeNode) {
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
//showRMenu("root", event.clientX, event.clientY);
} else if (treeNode) {
zTree.selectNode(treeNode);
if(treeNode.isParent)
//showRMenu("Dirnode", event.clientX, event.clientY);
showRMenu("Dirnode",event.clientX,event.clientY);
else{
//showRMenu("node", event.clientX, event.clientY);
showRMenu("node",event.clientX,event.clientY);
}
}
}
function showRMenu(type, x, y) {
$("#rMenu").show();
if (type=="root") {
$("#m_refresh").hide();
$("#m_upload").hide();
$("#m_download").hide();
} else if(type=="Dirnode"){
$("#m_refresh").show();
$("#m_upload").show();
$("#m_download").show();
}else{
$("#m_refresh").hide();
$("#m_upload").hide();
$("#m_download").show();
}
rMenu.css({"position":"fixed","top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
function refreshTreeNode(){
hideRMenu();
var nodes = zTree.getSelectedNodes();
zTree.reAsyncChildNodes(nodes[0],"refresh");
}
function uploadToTreeNode(){
hideRMenu();
var pathFrom=window.prompt("输入想要上传的文件目录或者文件名：");
if(!pathFrom||pathFrom=="")
{
$("#log").html($("#log").html()+"请先输入本地上传文件路径（目录路径）！<br>");
return;
}
var nodes=zTree.getSelectedNodes();
if(nodes.length==0)
{
$("#log").html($("#log").html()+"请选择上传目的地址！<br>");
return;
}
var pathTo=nodes[0].location;
var isDir=nodes[0].isParent;
if(isDir&&pathTo){
$("#log").html("已准备就绪...<br>源路径："+pathFrom+"<br>目的路径："+pathTo+"<br>开始上传...<br>");
uploadFile(pathFrom, pathTo);
}
}
function uploadFile(pathFrom, pathTo){
$.post("/file/upload",{pathFrom:pathFrom,pathTo:pathTo},
function(data,textStatus){
data=JSON.parse(data);
if(data.isSuccess=="true")
$("#log").html($("#log").html()+"上传完毕！<br>");
else{
$("#log").html($("#log").html()+"上传失败！<br>"+data.msg);
}
});
}
function downloadFromTreeNode(){
hideRMenu();
var pathTo=window.prompt("输入本地目的文件夹或者文件名：");
if(!pathTo||pathTo=="")
{
$("#log").html("请先输入本地目的文件路径（目录路径）！");
return;
}
var nodes=zTree.getSelectedNodes();
if(nodes.length==0)
{
$("#log").html("请先选择下载目的文件！");
return;
}
var pathFrom=nodes[0].location;
if(pathFrom){
$("#log").html("已准备就绪...<br>源路径："+pathFrom+"<br>目的路径："+pathTo+"<br>开始下载...<br>");
downloadFile(pathFrom, pathTo);
}
}
function downloadFile(pathFrom, pathTo){
$.post("/file/download",{pathFrom:pathFrom,pathTo:pathTo},
function(data,textStatus){
if(data=="success")
$("#log").html($("#log").html()+"下载完毕！<br>");
else
$("#log").html($("#log").html()+"下载失败！<br>");
});
}
var zTree, rMenu;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
rMenu = $("#rMenu");
});
</SCRIPT>
</HEAD>
<BODY>
<div class="row clearfix">
<div class="col-md-12">
<div>
<ul class="breadcrumb">
<li><a href="#">系统功能</a> <span class="divider"></span></li>
<li><a href="#">任务管理</a> <span class="divider"></span></li>
<li class="active">HDFS文件管理</li>
</ul>
</div>
<div class="content-box-small box-with-header">
<div class="alert-head alert-info"><strong>文件系统</strong></div>
<div class="file-system">
<div id="treeDemo" class="ztree" ></div>
</div>
</div>
<div class="content-box-small box-with-header">
<div class="alert-head alert-info"><strong>文件修改记录</strong></div>
<div class="modify-info col-lg box-with-header">
<div id="log"></div>
</div>
</div>
</div>
</div>
<div id="rMenu" class="list-group">
<a id="m_refresh" class="list-group-item" href="#" onclick="refreshTreeNode();">刷新</a>
<a id="m_upload" class="list-group-item" href="#" onclick="uploadToTreeNode();">上传</a>
<a id="m_download" class="list-group-item" href="#" onclick="downloadFromTreeNode(true);">下载</a>
</div>
</BODY>
</HTML>
显示申请用户界面-apply--动态显示table
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="robots" content="noindex,nofollow"> 7 <meta name="description" content="Description"> 8 <meta name="keywords" content="keyword, keyword, keyword"> 9 <title><?php echo $this->get_var(‘title‘)?></title> 10 11 <link href="/css/bootstrap.css" rel="stylesheet"> 12 <link href="/css/style.css" rel="stylesheet"> 13 <script src="/js/jquery.js"></script> 14 <script src="/js/bootstrap.js"></script> 15 <script src="/plugins/layer/layer.min.js"></script> 16 17 <script type="text/javascript"> 18 19 var agreedUser = new Array(); 20 21 function agreeApply(){ 22 agreedUser=[]; 23 24 $(‘input:checkbox‘).each(function() { 25 if($(this).prop(‘checked‘)){ 26 //alert($(this).attr(‘value‘)); 27 agreedUser.push($(this).attr(‘value‘)); 28 } 29 }); 30 31 //提交给后台，添加新用户 32 $.post("/user/agreeUserApply", 33 {names:agreedUser}, 34 function (data){ 35 $.layer({ 36 title: false, 37 time: 2, 38 shade: [0], 39 closeBtn: false, 40 dialog: { 41 type: 1, 42 msg:‘操作成功‘ 43 }, 44 end: function(){ 45 $("#tbody").empty(); 46 $.post("/user/applyUserInfo", //若是管理员则获取apply的个数 47 function (data){ 48 //alert(data); 49 var obj = eval ("(" + data + ")"); 50 51 for(var i=0; i<obj.length; i++) { 52 // alert(obj[i].name+" " + obj[i].role) 53 var check="<td><input type=‘checkbox‘ name=‘"+obj[i].name+"‘ id=‘user-apply‘ value=‘"+obj[i].name+"‘></td>"; 54 var name="<td>"+obj[i].name+"</td>"; 55 var role="<td>"+obj[i].role+"</td>"; 56 var email="<td>"+obj[i].email+"</td>"; 57 var time="<td>"+obj[i].comment+"</td>"; 58 var user="<tr>"+check+name+role+email+time+"</tr>"; 59 $("#tbody").append(user); 60 } 61 }, 62 "json"); 63 } 64 }); 65 }, 66 "json"); 67 68 } 69 70 71 72 function refuseApply(){ 73 refusedUser=[]; 74 75 $(‘input:checkbox‘).each(function() { 76 if($(this).prop(‘checked‘)){ 77 //refusedUser.push($(this).attr(‘value‘)); 78 refusedUser.push($(this).attr(‘value‘)); 79 } 80 }); 81 //alert(refusedUser); 82 $.post("/user/refuseUserApply", 83 {names:refusedUser}, 84 function (data){ 85 $.layer({ 86 title: false, 87 time: 2, 88 shade: [0], 89 closeBtn: false, 90 dialog: { 91 type: 1, 92 msg:‘操作成功‘ 93 }, 94 end: function(){ 95 $("#tbody").empty(); 96 $.post("/user/applyUserInfo", //若是管理员则获取apply的个数 97 function (data){ 98 //alert(data); 99 var obj = eval ("(" + data + ")"); 100 101 for(var i=0; i<obj.length; i++) { 102 // alert(obj[i].name+" " + obj[i].role) 103 var check="<td><input type=‘checkbox‘ name=‘"+obj[i].name+"‘ id=‘user-apply‘ value=‘"+obj[i].name+"‘></td>"; 104 var name="<td>"+obj[i].name+"</td>"; 105 var role="<td>"+obj[i].role+"</td>"; 106 var email="<td>"+obj[i].email+"</td>"; 107 var time="<td>"+obj[i].comment+"</td>"; 108 var user="<tr>"+check+name+role+email+time+"</tr>"; 109 $("#tbody").append(user); 110 } 111 }, 112 "json"); 113 } 114 }); 115 }, 116 "json"); 117 } 118 119 120 function selectOption(){ 121 var test = document.getElementById("user-handle").checked; 122 123 if(test){ 124 $(‘input:checkbox‘).each(function() { 125 $(this).prop(‘checked‘, true); 126 // alert("stat "+$(this).prop(‘checked‘)); 127 }); 128 }else{ 129 $(‘input:checkbox‘).each(function() { 130 $(this).prop(‘checked‘, false); 131 // alert("stat "+$(this).prop(‘checked‘)); 132 }); 133 } 134 } 135 136 $(document).ready(function() { 137 138 $.post("/user/applyUserInfo", //若是管理员则获取apply的个数 139 function (data){ 140 //alert(data); 141 var obj = eval ("(" + data + ")"); 142 143 for(var i=0; i<obj.length; i++) { 144 // alert(obj[i].name+" " + obj[i].role) 145 var check="<td><input type=‘checkbox‘ name=‘"+obj[i].name+"‘ id=‘user-apply‘ value=‘"+obj[i].name+"‘></td>"; 146 var name="<td>"+obj[i].name+"</td>"; 147 var role="<td>"+obj[i].role+"</td>"; 148 var email="<td>"+obj[i].email+"</td>"; 149 var time="<td>"+obj[i].comment+"</td>"; 150 var user="<tr>"+check+name+role+email+time+"</tr>"; 151 $("#tbody").append(user); 152 } 153 }, 154 "json"); 155 }); 156 157 158 </script> 159 160 <body> 161 162 <div id="subContent"> 163 <div class="row col-md-12"> 164 <div> 165 <ul class="breadcrumb"> 166 <li><a href="#">系统功能</a> <span class="divider"></span></li> 167 <li><a href="#">任务管理</a> <span class="divider"></span></li> 168 <li class="active">HDFS文件管理</li> 169 </ul> 170 </div> 171 172 <div class="well center-block"> 173 174 <table class="table table-bordered table-striped"> 175 <thead> 176 <tr> 177 <th><input type="checkbox" name="selectAll" id=‘user-handle‘ onClick="selectOption()"></th> 178 <th>用户名</th> 179 <th>申请角色</th> 180 <th>邮箱</th> 181 <th>备注</th> 182 </tr> 183 184 </thead> 185 <tbody id="tbody"> 186 187 </tbody> 188 </table> 189 190 <div style="height:35px;"> 191 <span id="apply-handle" class="pull-right"> 192 <button class="btn btn-primary" type="button" onClick="agreeApply()"><i class="icon-random icon-white"></i> 同意申请</button> 193 <button class="btn btn-danger" type="button" onClick="refuseApply()"><i class="icon-lock icon-white"></i> 拒绝申请</button> 194 </span> 195 196 </div> 197 198 </div> 199 </div> 200 </div> 201 </body> 202 </html>
显示结果界面run
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<meta name="description" content="Description">
<meta name="keywords" content="keyword, keyword, keyword">
<title>互联网离线学习系统</title>
<link href="/css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link href="/css/style.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/plugins/Highcharts/js/highcharts.js"></script>
<script src="/plugins/Highcharts/js/modules/exporting.js"></script>
<script type="text/javascript">
function charts(container, name, number,title) {
$(container).highcharts({
chart: {
type: ‘column‘,
// margin: [ 50, 50, 100, 80]
},
title: {
text: title
},
xAxis: {
categories: name,
labels: {
align: ‘right‘,
style: {
fontSize: ‘13px‘,
fontFamily: ‘Verdana, sans-serif‘
}
}
},
yAxis: {
min: 0,
title: {
text: ‘条‘
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ‘<b>‘+ this.x +‘</b><br>‘+
title +":"+ Highcharts.numberFormat(this.y, 1) +
‘ 条‘;
}
},
series: [{
name: ‘The websites‘,
data: number,
dataLabels: {
enabled: true,
rotation: -90,
color: ‘#FFFFFF‘,
align: ‘right‘,
x: 4,
y: 10,
style: {
fontSize: ‘11px‘,
fontFamily: ‘Verdana, sans-serif‘
}
}
}]
});
}
function zTreeOption(doUrl, backParams){
var tempdata=false;
$.ajax({
async: false,
url: doUrl,
type: ‘post‘,
dataType: ‘text‘,
data: backParams,
success: function(data) {
tempdata = data;
}
});
return tempdata;
}
function showSafeChart(){
var url = "/detection/safeInfo";
var message=zTreeOption(url);
var data = eval("(" + message + ")");
var name=data.name;
var number=data.number;
var total = number[0] + number[1];
$("#total").text(total);
$("#safe").text(number[0]);
$("#unsafe").text(number[1]);
var chart1="#chart1";
charts(chart1, name, number, "检测结果");
}
function showUrlChart(){
var url = "/detection/urlInfo";
var message=zTreeOption(url);
var data = eval("(" + message + ")");
var name=data.name;
var number=data.number;
var chart2="#chart2";
var urlList = ["url1","url2","url3","url4","url5","url6","url7","url8","url9","url10"];
for(var i=0; i<urlList.length; i++) {
var id="<td>"+urlList[i]+"</td>";
var num="<td>"+number[i]+"</td>";
var url="<td>"+name[i]+"</td>";
var info="<tr>"+id+num+url+"</tr>";
$("#urlBody").append(info);
}
charts(chart2, urlList, number, "恶意网址");
}
function showResult(){
$("#logContent").hide();
$("#result").show();
$("#safeInfo").show();
showSafeChart();
}
function showDetails(){
$("#safeInfo").hide();
$("#urlInfo").show();
showUrlChart();
}
$(document).ready(function(){
// $("#checkBtn").hide();
$("#safeInfo").hide();
$("#urlInfo").hide();
$("#result").hide();
//$("form#startdo").submit();
/*websocket interface client*/
var ws_proto = "<?php echo Loader::loadConfigs(‘system.conf‘,‘ws_proto‘);?>";
var ws_hostaddr = "<?php $ws_host = Loader::loadConfigs(‘system.conf‘,‘ws_host‘);echo gethostbyname($ws_host);?>";
var ws_port ="<?php echo Loader::loadConfigs(‘system.conf‘,‘ws_port‘);?>";
var wsUri = ws_proto+ws_hostaddr+":"+ws_port;
websocket = new WebSocket(wsUri);
websocket.onopen = function(ev){
$("#logContent>.panel-body").append("<p>submit task request!connected!<p>");
};
websocket.onmessage = function(ev){
//alert(ev.data);
//var test = prompt("nihaoma?");
var msg = JSON.parse(ev.data);
if(msg[‘status‘]==‘connected‘){
websocket.send(‘start‘);
}else if(msg[‘status‘]==‘finished‘){
$(‘#checkBtn‘).show();
}
$(‘#logContent>.panel-body‘).append(msg[‘responseText‘]+‘<br>‘);
};
websocket.onerror = function(ev){
$(‘#logContent>.panel-body‘).append(‘Error occurred!-‘+ev.data+‘<br>‘);
};
websocket.onclosed = function(ev){
$("#logContent>.panel-body").append(‘Connection closed!-‘+ev.data+‘<br>‘);
};
//for test
//$(‘#checkBtn‘).show();
});
//detection/detect http://localhost:50070
</script>
</head>
<body>
<div>
<!--
<div>
<form id="startdo" name="startdo" action="/detection/detect" method="post"></form>
</div>
-->
<div class="row col-md-12">
<div>
<ul class="breadcrumb">
<li><a href="#">系统功能</a> <span class="divider"></span></li>
<li><a href="#">任务管理</a> <span class="divider"></span></li>
<li class="active">新建任务</li>
</ul>
</div>
<div id="logContent" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">检测日志信息</h3>
</div>
<div class="panel-body">
</div>
<input type="button" class="btn btn-success pull-right" value="查看结果" id="checkBtn" onClick="showResult()"></input>
</div>
<div>
<div id ="result" class="alert alert-info">
<strong>检测结果</strong>
</div>
<div id="safeInfo">
<table class="table table-bordered table-striped">
<thead>
<th>检测数据总数（条）</th>
<th>安全数据数目（条）</th>
<th>可疑数据数目（条）</th>
<th>恶意URL排名</th>
</thead>
<tbody id="tbody">
<tr>
<td id="total"></td>
<td id="safe"></td>
<td id="unsafe"></td>
<td> <a href="#" onClick="showDetails()">点击查看详情</a></td>
</tr>
</tbody>
<div class="col-md-12">
<table width="70%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="400px"><div id="chart1" style="height:400px; width:100%; float:center;text-align:center;">Chart1</div></td>
</tr>
</table>
</div>
</div>
<div id="urlInfo">
<table id = "urlTable" class="table table-bordered table-striped">
<thead>
<th>URL标号</th>
<th>发送可疑数据数目</th>
<th>URL全名</th>
</thead>
<tbody id="urlBody">
</tbody>
</table>
<div class="col-md-12">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%" height="400px"><div id="chart2" style="height:400px; width:100%; float:center;text-algin:center;">chart2</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
标签：des style blog http color io os 使用 ar
原文地址：http://www.cnblogs.com/hemi/p/4019984.html
