Skip to content
GitLab
Commit e2a64d42 authored by Huang's avatar Huang
Browse files

no commit message

parent 0844dd86
Hide whitespace changes
Inline Side-by-side
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysServerTotal.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/echarts.jsp"%>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="/staticViews/modules/sys//sysServerTotal.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys//sysServerTotal.css" rel="stylesheet" />
<div class="wrapper wrapper-content content-background">
<div class="ibox">
<div class="ibox-content">
<!--查询条件-->
<div class="row">
<div class="col-sm-12">
<form:form id="searchForm" modelAttribute="sysServer" action="${ctx}/sys/sysServer/total" method="post" class="form-inline">
<div class="form-group">
<input id="run" type="checkbox" value="true" name="run" checked/>自动刷新
<form:select path="totalType" class="form-control m-b">
<form:option value="" label=""/>
<form:options items="${fns:getDictList('total_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
</form:select>
<span>服务器编号：</span>
<form:input path="serverNumber" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>服务器监控地址：</span>
<form:input path="serverAddress" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>名称：</span>
<form:input path="name" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>标签名：</span>
<form:input path="label" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>类型：</span>
<form:radiobuttons class="i-checks" path="type" items="${fns:getDictList('server_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>排序（升序）：</span>
<form:input path="sort" htmlEscape="false" class=" form-control input-sm"/>
<span>描述：</span>
<form:input path="description" htmlEscape="false" maxlength="100" class=" form-control input-sm"/>
<span>备注信息：</span>
<form:input path="remarks" htmlEscape="false" maxlength="100" class=" form-control input-sm"/>
<span>在线状态on_line在线off_line离线：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>创建时间：</span>
<input id="beginCreateDate" name="beginCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.beginCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endCreateDate" name="endCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.endCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>更新时间：</span>
<input id="beginUpdateDate" name="beginUpdateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.beginUpdateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endUpdateDate" name="endUpdateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.endUpdateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
</div>
</form:form>
<br/>
</div>
</div>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<button class="btn btn-success btn-sm " onclick="$('#searchForm').toggle();$('.fa-chevron').toggle();" title="检索">
<i class="fa-chevron fa fa-chevron-up"></i><i class="fa-chevron fa fa-chevron-down" style="display:none"></i> 检索
</button>
<button class="btn btn-success btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
</div>
<div class="pull-right">
<div class="btn-group" title="其他">
<button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-th icon-th"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-type="放大"><a href="javascript:void(0)" onclick="$('body').css({zoom:Number($('body').css('zoom'))+0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">放大</a></li>
<li data-type="缩小"><a href="javascript:void(0)" onclick="$('body').css({zoom:$('body').css('zoom')-0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">缩小</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-12 echartsEval">
<div id="pie" class="main000"></div>
<echarts:pie
id="pie"
title="服务器监控数量饼图"
subtitle="服务器监控数量饼图"
orientData="${orientData}"/>
<div id="line_normal" class="main000"></div>
<echarts:line
id="line_normal"
title="服务器监控曲线"
subtitle="服务器监控曲线"
xAxisData="${xAxisData}"
yAxisData="${yAxisData}"
xAxisName="时间"
yAxisName="数量" />
</div>
</div>
<!-- 表格 -->
<table class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
<thead>
<tr>
<th>时间段</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="sysServer">
<tr>
<td>${sysServer.totalDate}</td>
<td style="text-align: right;" class="totalCount">${sysServer.totalCount}</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr id="totalRow">
<td>合计：</td>
<td id="totalCount" style="text-align: right;"><script>sumColumn("totalCount");</script></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysServerTotalMap.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
.BMapLabel {max-width: none;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="/staticViews/modules/sys//sysServerTotal.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys//sysServerTotal.css" rel="stylesheet" />
</head>
<body style="width: 100%; height: 100%;overflow: hidden">
<div class="wrapper wrapper-content" style="padding: 0px 20px 0px 20px;">
<div class="ibox">
<!--查询条件-->
<div class="row">
<div class="col-sm-12" style="z-index: 1000;background-color: white;">
<form:form id="searchForm" modelAttribute="sysServer" action="${ctx}/sys/sysServer/totalMap" method="post" class="form-inline" style="display:none">
<div class="form-group">
<input id="run" type="checkbox" value="true" name="run" checked/>自动刷新
<form:select path="totalType" class="form-control m-b">
<form:option value="" label=""/>
<form:options items="${fns:getDictList('total_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
</form:select>
<span>服务器编号：</span>
<form:input path="serverNumber" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>服务器监控地址：</span>
<form:input path="serverAddress" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>名称：</span>
<form:input path="name" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>标签名：</span>
<form:input path="label" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>类型：</span>
<form:radiobuttons class="i-checks" path="type" items="${fns:getDictList('server_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>排序（升序）：</span>
<form:input path="sort" htmlEscape="false" class=" form-control input-sm"/>
<span>描述：</span>
<form:input path="description" htmlEscape="false" maxlength="100" class=" form-control input-sm"/>
<span>备注信息：</span>
<form:input path="remarks" htmlEscape="false" maxlength="100" class=" form-control input-sm"/>
<span>在线状态on_line在线off_line离线：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>创建时间：</span>
<input id="beginCreateDate" name="beginCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.beginCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endCreateDate" name="endCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.endCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>更新时间：</span>
<input id="beginUpdateDate" name="beginUpdateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.beginUpdateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endUpdateDate" name="endUpdateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysServer.endUpdateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
</div>
</form:form>
<br/>
</div>
</div>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12" style="z-index: 1000;background-color: white;">
<div class="pull-left">
<button class="btn btn-success btn-sm " onclick="$('#searchForm').toggle();$('.fa-chevron').toggle();" title="检索">
<i class="fa-chevron fa fa-chevron-up"></i><i class="fa-chevron fa fa-chevron-down" style="display:none"></i> 检索
</button>
<button class="btn btn-success btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
</div>
<div class="pull-right">
<div class="btn-group" title="其他">
<button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-th icon-th"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-type="放大"><a href="javascript:void(0)" onclick="$('body').css({zoom:Number($('body').css('zoom'))+0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">放大</a></li>
<li data-type="缩小"><a href="javascript:void(0)" onclick="$('body').css({zoom:$('body').css('zoom')-0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">缩小</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--查询条件-->
</div>
</div>
<!--百度地图容器-->
<div style="width:100%;height:100%;position: absolute; bottom: 0px;top: 0px;">
<div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"></div>
</div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.271431,23.135336);//定义一个中心点坐标
map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
//标注点数组
var markerArr = [
<c:forEach items="${list}" var="sysServer">
{title:"${sysServer.totalDate}<br>统计${sysServer.totalCount}次"
,content:""
,point:(113.271431+${sysServer.totalCount})+"|"+(23.135336+${sysServer.totalCount}),isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
</c:forEach>
{title:"服务器监控<br>统计${sumTotalCount}次。"
,content:""
,point:"113.271431|23.135336",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
label.setStyle({
width: "300px",
color: '#fff',
borderRadius: "5px",
textAlign: "center",
height: "50px",
lineHeight: "26px"
});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();//创建和初始化地图
</script>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysUserOnlineForm.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>在线用户记录管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>
<c:if test="${action ne 'view'}">
<c:if test="${empty oaNotify.id}">新增</c:if>
<c:if test="${not empty oaNotify.id}">编辑</c:if>
</c:if>
<c:if test="${action eq 'view'}">查看</c:if>
在线用户记录管理
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<form:form id="inputForm" modelAttribute="sysUserOnline" action="${ctx}/sys/sysUserOnline/save"
method="post" class="form-horizontal content-background">
<div class="content">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">登录账号:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="登录账号" path="loginName" htmlEscape="false" maxlength="50"
class="form-control "/>
<div class="help-block">请填写登录账号</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">部门名称:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="部门名称" path="deptName" htmlEscape="false" maxlength="50"
class="form-control "/>
<div class="help-block">请填写部门名称</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">登录IP地址:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="登录IP地址" path="ipaddr" htmlEscape="false" maxlength="50"
class="form-control "/>
<div class="help-block">请填写登录IP地址</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">登录地点:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="登录地点" path="loginLocation" htmlEscape="false" maxlength="255"
class="form-control "/>
<div class="help-block">请填写登录地点</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">浏览器类型:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="浏览器类型" path="browser" htmlEscape="false" maxlength="50"
class="form-control "/>
<div class="help-block">请填写浏览器类型</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">操作系统:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="操作系统" path="os" htmlEscape="false" maxlength="50"
class="form-control "/>
<div class="help-block">请填写操作系统</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">在线状态:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:radiobuttons path="status" items="${fns:getDictList('on_line_status')}"
itemLabel="label"
itemValue="value" htmlEscape="false" class="i-checks "/>
<div class="help-block">请选择在线状态on_line在线off_line离线</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">session创建时间:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<input id="startTimestsamp" name="startTimestsamp" type="text" maxlength="20"
class="laydate-icon form-control layer-date "
value="<fmt:formatDate value="${sysUserOnline.startTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<div class="help-block">请选择session创建时间</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">session最后访问时间:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<input id="lastAccessTime" name="lastAccessTime" type="text" maxlength="20"
class="laydate-icon form-control layer-date "
value="<fmt:formatDate value="${sysUserOnline.lastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<div class="help-block">请选择session最后访问时间</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 pull-left">超时时间，单位为分钟:</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:input placeholder="超时时间，单位为分钟" path="expireTime" htmlEscape="false" maxlength="5"
class="form-control digits"/>
<div class="help-block">请填写超时时间，单位为分钟</div>
</div>
</div>
<div class="form-group">
<c:if test="${action ne 'view'}">
<a id="btnSubmit" class="btn btn-primary">保存</a>
</c:if>
<a id="btnBack" class="btn btn-default">返回</a>
<!--a class="btn btn-primary" onclick="top.closeSelectTabs()">关闭</a-->
</div>
</div>
</form:form>
</div>
</div>
</div>
<div id="messageBox">${message}</div>
<%@ include file="/WEB-INF/views/include/footJs.jsp" %>
<script src="/staticViews/viewBase.js"></script>
<script src="/staticViews/modules/sys/sysUserOnlineForm.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys/sysUserOnlineForm.css" rel="stylesheet"/>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysUserOnlineList.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>在线用户记录管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
<%@ include file="/WEB-INF/views/include/echarts.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>服务器监控管理</div>
<div class="box-tools pull-right">
<a id="btnSearchView" href="#" title="查询" class="btn btn-default btn-sm"><i
class="fa fa-filter"></i></a>
<a id="btnRefresh" title="刷新" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-repeat"></i></a>
<shiro:hasPermission name="sys:sysUserOnline:add">
<a id="btnAdd" href="${ctx}/sys/sysUserOnline/form" title="服务器监控" class="btn btn-default btn-sm"><i
class="fa fa-plus"></i></a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:del">
<a id="btnDeleteAll" href="${ctx}/sys/sysUserOnline/deleteAll" title="删除"
class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></a>
</shiro:hasPermission>
<a id="btnTotalView" href="#" title="统计" class="btn btn-default btn-sm"><i class="fa fa-file-pdf-o"></i></a>
<shiro:hasPermission name="sys:sysUserOnline:import">
<table:importExcel url="${ctx}/sys/sysUserOnline/import"></table:importExcel><!-- 导入按钮 -->
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:export">
<table:exportExcel url="${ctx}/sys/sysUserOnline/export"></table:exportExcel><!-- 导出按钮 -->
</shiro:hasPermission>
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<!-- 查询条件 -->
<form:form id="searchForm" modelAttribute="sysUserOnline" action="${ctx}/sys/sysUserOnline/" method="post"
class="form-inline">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<input id="orderBy" name="orderBy" type="hidden" value="${page.orderBy}"/>
<div class="form-group">
<span>登录账号：</span>
<form:input path="loginName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>部门名称：</span>
<form:input path="deptName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>登录IP地址：</span>
<form:input path="ipaddr" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>登录地点：</span>
<form:input path="loginLocation" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>浏览器类型：</span>
<form:input path="browser" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>操作系统：</span>
<form:input path="os" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>在线状态：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}"
itemLabel="label" itemValue="value" htmlEscape="false"/>
</div>
<div class="form-group">
<span>session创建时间：</span>
<input id="beginStartTimestsamp" name="beginStartTimestsamp" type="text" maxlength="20"
class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
-
<input id="endStartTimestsamp" name="endStartTimestsamp" type="text" maxlength="20"
class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
</div>
<div class="form-group">
<span>session最后访问时间：</span>
<input id="beginLastAccessTime" name="beginLastAccessTime" type="text" maxlength="20"
class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
-
<input id="endLastAccessTime" name="endLastAccessTime" type="text" maxlength="20"
class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
</div>
<div class="form-group">
<span>超时时间，单位为分钟：</span>
<form:input path="expireTime" htmlEscape="false" maxlength="5" class=" form-control input-sm"/>
</div>
<div class="form-group">
<button id="btnSearch" class="btn btn-primary"><i class="fa fa-search"></i> 查询</button>
<button id="btnReset" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</button>
</div>
</form:form>
<!-- 表格 -->
<table id="contentTable" class="table table-hover table-condensed dataTables-example dataTable">
<thead>
<tr>
<th><input type="checkbox" class="i-checks"></th>
<th class="sort-column loginName ">登录账号</th>
<th class="sort-column deptName ">部门名称</th>
<th class="sort-column ipaddr ">登录IP地址</th>
<th class="sort-column loginLocation hidden-xs">登录地点</th>
<th class="sort-column browser hidden-xs">浏览器类型</th>
<th class="sort-column os hidden-xs">操作系统</th>
<th class="sort-column status hidden-xs">在线状态</th>
<th class="sort-column startTimestsamp hidden-xs">session创建时间</th>
<th class="sort-column updateDate hidden-xs">更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="sysUserOnline">
<tr>
<td>
<input type="checkbox" id="${sysUserOnline.id}"
loginName="${sysUserOnline.loginName}"
deptName="${sysUserOnline.deptName}"
ipaddr="${sysUserOnline.ipaddr}"
loginLocation="${sysUserOnline.loginLocation}"
browser="${sysUserOnline.browser}"
os="${sysUserOnline.os}"
status="${sysUserOnline.status}"
class="i-checks"></td>
<td class=""><a href="${ctx}/sys/sysUserOnline/form?id=${sysUserOnline.id}&action=view">
${sysUserOnline.loginName}
</a></td>
<td class="">
${sysUserOnline.deptName}
</td>
<td class="">
${sysUserOnline.ipaddr}
</td>
<td class="hidden-xs">
${sysUserOnline.loginLocation}
</td>
<td class="hidden-xs">
${sysUserOnline.browser}
</td>
<td class="hidden-xs">
${sysUserOnline.os}
</td>
<td class="hidden-xs">
${fns:getDictLabel(sysUserOnline.status, 'on_line_status', '')}
</td>
<td class="hidden-xs">
<fmt:formatDate value="${sysUserOnline.startTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td class="hidden-xs">
<fmt:formatDate value="${sysUserOnline.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td>
<shiro:hasPermission name="sys:sysUserOnline:view">
<a href="${ctx}/sys/sysUserOnline/form?id=${sysUserOnline.id}&action=view" title="查看"><i
class="fa fa-search-plus"></i></a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:edit">
<a href="${ctx}/sys/sysUserOnline/form?id=${sysUserOnline.id}" title="修改"><i
class="fa fa-pencil"></i></a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:del">
<a href="${ctx}/sys/sysUserOnline/delete?id=${sysUserOnline.id}"
onclick="return confirmx('确认要删除该在线用户记录吗？', this.href)"
title="删除"><i class="fa fa-trash-o"></i></a>
</shiro:hasPermission>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 分页代码 -->
${page.toStringPage()}
<!-- 统计 -->
<div class="row" id="total" style="margin-top: 10px;">
<div class="col-sm-12 echartsEval">
<h4>合计：${sumTotalCount}行;
</h4>
<div id="pie" class="main000"></div>
<echarts:pie
id="pie"
title="在线用户记录数量饼图"
subtitle="在线用户记录数量饼图"
orientData="${orientData}"/>
<div id="line_normal" class="main000"></div>
<echarts:line
id="line_normal"
title="在线用户记录曲线"
subtitle="在线用户记录曲线"
xAxisData="${xAxisData}"
yAxisData="${yAxisData}"
xAxisName="时间"
yAxisName="数量"/>
</div>
</div>
</div>
</div>
</div>
<!-- 信息-->
<div id="messageBox">${message}</div>
<%@ include file="/WEB-INF/views/include/footJs.jsp" %>
<script src="/staticViews/viewBase.js"></script>
<script src="/staticViews/modules/sys/sysUserOnlineList.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys/sysUserOnlineList.css" rel="stylesheet"/>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysUserOnlineListVue.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>在线用户记录管理</title>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="/staticViews/modules/sys//sysUserOnlineList.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys//sysUserOnlineList.css" rel="stylesheet" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="rrapp">
<div class="ibox">
<!--div class="ibox-title">
<h5>在线用户记录列表 </h5>
</div-->
<div class="ibox-content">
<sys:message content="${message}"/>
<!--查询条件-->
<div class="row">
<div class="col-sm-12">
<form:form id="searchForm" modelAttribute="sysUserOnline" action="${ctx}/../rest/sys/sysUserOnline/list" method="post" class="form-inline">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<table:sortColumn id="orderBy" name="orderBy" value="${page.orderBy}" callback="sortOrRefresh();"/><!-- 支持排序 -->
<div class="form-group">
<span>登录账号：</span>
<form:input path="loginName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>部门名称：</span>
<form:input path="deptName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录IP地址：</span>
<form:input path="ipaddr" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录地点：</span>
<form:input path="loginLocation" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>浏览器类型：</span>
<form:input path="browser" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>操作系统：</span>
<form:input path="os" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>在线状态on_line在线off_line离线：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>session创建时间：</span>
<input id="beginStartTimestsamp" name="beginStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endStartTimestsamp" name="endStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>session最后访问时间：</span>
<input id="beginLastAccessTime" name="beginLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endLastAccessTime" name="endLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>超时时间，单位为分钟：</span>
<form:input path="expireTime" htmlEscape="false" maxlength="5" class=" form-control input-sm"/>
<span>创建者：</span>
<form:input path="createBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
<span>创建时间：</span>
<input id="beginCreateDate" name="beginCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endCreateDate" name="endCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>更新者：</span>
<form:input path="updateBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
</div>
</form:form>
<br/>
</div>
</div>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<button class="btn btn-success btn-sm " onclick="$('#searchForm').toggle();$('.fa-chevron').toggle();" title="检索">
<i class="fa-chevron fa fa-chevron-up"></i><i class="fa-chevron fa fa-chevron-down" style="display:none"></i> 检索
</button>
<button class="btn btn-success btn-sm " @click="search()" title="查询"><i class="fa fa-search"></i> 查询</button>
<shiro:hasPermission name="sys:sysUserOnline:add">
<table:addRow url="${ctx}/sys/sysUserOnline/form" title="在线用户记录"></table:addRow><!-- 增加按钮 -->
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:edit">
<table:editRow url="${ctx}/sys/sysUserOnline/form" title="在线用户记录" id="contentTable"></table:editRow><!-- 编辑按钮 -->
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:del">
<table:delRow url="${ctx}/sys/sysUserOnline/deleteAll" id="contentTable"></table:delRow><!-- 删除按钮 -->
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:import">
<table:importExcel url="${ctx}/sys/sysUserOnline/import"></table:importExcel><!-- 导入按钮 -->
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:export">
<table:exportExcel url="${ctx}/sys/sysUserOnline/export"></table:exportExcel><!-- 导出按钮 -->
</shiro:hasPermission>
<button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()" title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新</button>
<button class="btn btn-white btn-sm " onclick="reset()" title="重置"><i class="fa fa-refresh"></i> 重置</button>
</div>
<div class="pull-right">
<button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="top.openTab('${ctx}/sys/sysUserOnline','在线用户记录', false)" title="list"><i class="glyphicon glyphicon-repeat"></i> list</button>
<shiro:hasPermission name="sys:sysUserOnline:total">
<button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="top.openTab('${ctx}/sys/sysUserOnline/total','统计在线用户记录', false)" title="统计图表"><i class="glyphicon glyphicon-repeat"></i> 统计图表</button>
<button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="top.openTab('${ctx}/sys/sysUserOnline/totalMap','统计在线用户记录', false)" title="统计地图"><i class="glyphicon glyphicon-repeat"></i> 统计地图</button>
</shiro:hasPermission>
<button class="btn btn-success " type="button" name="toggle" title="切换" onclick="$('.table').toggle()"><i class="glyphicon glyphicon-list-alt icon-list-alt"></i></button>
<div class="btn-group" title="其他">
<button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-th icon-th"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-type="放大"><a href="javascript:void(0)" onclick="$('body').css({zoom:Number($('body').css('zoom'))+0.1})">放大</a></li>
<li data-type="缩小"><a href="javascript:void(0)" onclick="$('body').css({zoom:$('body').css('zoom')-0.1})">缩小</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 表格 -->
<div class="table" style="display:none">
<div style="border: 1px solid #e7eaec;padding: 8px;" class="row" v-for="item in page">
<div>
<input type="checkbox" :id="item.id"
loginName="${sysUserOnline.loginName}"
deptName="${sysUserOnline.deptName}"
ipaddr="${sysUserOnline.ipaddr}"
loginLocation="${sysUserOnline.loginLocation}"
browser="${sysUserOnline.browser}"
os="${sysUserOnline.os}"
status="${sysUserOnline.status}"
class="i-checks">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
登录账号:
<a href="#" v-on:onclick="openDialogView('查看在线用户记录', '${ctx}/sys/sysUserOnline/form?id='+item.id,'800px', '500px')">
{{item.loginName}}
</a></span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
部门名称:
{{item.deptName}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
登录IP地址:
{{item.ipaddr}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
登录地点:
{{item.loginLocation}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
浏览器类型:
{{item.browser}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
操作系统:
{{item.os}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
在线状态on_line在线off_line离线:
{{item.statusLabel}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
session创建时间:
{{item.startTimestsamp}}
</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
更新时间:
{{item.updateDate}}
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<shiro:hasPermission name="sys:sysUserOnline:view">
<a href="#" onclick="openDialogView('查看在线用户记录', '${ctx}/sys/sysUserOnline/form?id='+item.id,'800px', '500px')" class="btn btn-info btn-sm" title="查看"><i class="fa fa-search-plus"></i> 查看</a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:edit">
<a href="#" onclick="openDialog('修改在线用户记录', '${ctx}/sys/sysUserOnline/form?id='+item.id,'800px', '500px')" class="btn btn-success btn-sm" title="修改"><i class="fa fa-edit"></i> 修改</a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:del">
<a href="${ctx}/sys/sysUserOnline/delete?id='+item.id" onclick="return confirmx('确认要删除该在线用户记录吗？', this.href)" class="btn btn-danger btn-sm" title="删除"><i class="fa fa-trash"></i> 删除</a>
</shiro:hasPermission>
</div>
</div>
</div>
<!-- 表格 -->
<table id="contentTable" class="table table-hover table-condensed dataTables-example dataTable">
<thead>
<tr>
<th> <input type="checkbox" class="i-checks"></th>
<th class="sort-column loginName ">登录账号</th>
<th class="sort-column deptName ">部门名称</th>
<th class="sort-column ipaddr ">登录IP地址</th>
<th class="sort-column loginLocation hidden-xs">登录地点</th>
<th class="sort-column browser hidden-xs">浏览器类型</th>
<th class="sort-column os hidden-xs">操作系统</th>
<th class="sort-column status hidden-xs">在线状态on_line在线off_line离线</th>
<th class="sort-column startTimestsamp hidden-xs">session创建时间</th>
<th class="sort-column updateDate hidden-xs">更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in page" >
<td>
<input type="checkbox" :id="item.id"
loginName="${sysUserOnline.loginName}"
deptName="${sysUserOnline.deptName}"
ipaddr="${sysUserOnline.ipaddr}"
loginLocation="${sysUserOnline.loginLocation}"
browser="${sysUserOnline.browser}"
os="${sysUserOnline.os}"
status="${sysUserOnline.status}"
class="i-checks"></td>
<td class=""><a href="#" v-on:click="openDialogView('查看在线用户记录', '${ctx}/sys/sysUserOnline/form?id='+item.id,'800px', '500px')">
{{item.loginName}}
</a></td>
<td class="">
{{item.deptName}}
</td>
<td class="">
{{item.ipaddr}}
</td>
<td class="hidden-xs">
{{item.loginLocation}}
</td>
<td class="hidden-xs">
{{item.browser}}
</td>
<td class="hidden-xs">
{{item.os}}
</td>
<td class="hidden-xs">
{{item.statusLabel}}
</td>
<td class="hidden-xs">
{{item.startTimestsamp}}
</td>
<td class="hidden-xs">
{{item.updateDate}}
</td>
<td>
<shiro:hasPermission name="sys:sysUserOnline:view">
<a href="#" v-on:click="openDialogView('查看在线用户记录', '${ctx}/sys/sysUserOnline/form?id='+item.id,'800px', '500px')" class="btn btn-info btn-sm" title="查看"><i class="fa fa-search-plus"></i> </a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:edit">
<a href="#" v-on:click="openDialog('修改在线用户记录', '${ctx}/sys/sysUserOnline/form?id='+item.id,'800px', '500px')" class="btn btn-success btn-sm" title="修改"><i class="fa fa-edit"></i> </a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:edit">
<a href="#" v-on:click="top.openTab('${ctx}/sys/sysUserOnline/form?id='+item.id,'修改在线用户记录', false)" title="修改" class="btn btn-success btn-sm" title=" 修改(页签)"><i class="fa fa-edit"></i></a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:sysUserOnline:del">
<a v-bind:href="'${ctx}/sys/sysUserOnline/delete?id='+item.id" onclick="return confirmx('确认要删除该在线用户记录吗？', this.href)" class="btn btn-danger btn-sm" title="删除"><i class="fa fa-trash"></i> </a>
</shiro:hasPermission>
</td>
</tr>
</tbody>
</table>
<!-- 分页代码 -->
<div v-html="result.html">
{{result.html}}
</div>
<br/>
<br/>
</div>
</div>
</div>
<script src="/static/vue/vue.min.js"></script>
<script src="/static/common/SpringUI.js"></script>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysUserOnlineSelect.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>在线用户记录管理</title>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script type="text/javascript">
$(document).ready(function() {
laydate({
elem: '#beginStartTimestsamp', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
laydate({
elem: '#endStartTimestsamp', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
laydate({
elem: '#beginLastAccessTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
laydate({
elem: '#endLastAccessTime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
laydate({
elem: '#beginCreateDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
laydate({
elem: '#endCreateDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
});
function openWindowSelect(){
window.backup="selectData";
// 正常打开
top.layer.open({
type: 2,
area: ['800px', '720px'],
title:"选择部门",
ajaxData:{},
content: location.href ,
btn: ['确定', '关闭']
,yes: function(index, layero){ //或者使用btn1
var window = layero.find("iframe")[0].contentWindow;//h.find("iframe").contents();
//回调方法，可以选择使用
window.backup="selectData";
window.select();
//直接处理returnValue值，可以选择使用
if (window.opener) {
console.log("openSelect:"+window.opener.returnValue);
}
else if(window.parent){
if(window.parent.returnValue!=undefined)
console.log("openSelect:"+window.parent.returnValue);
}
else {
console.log("openSelect:"+window.returnValue);
}
top.layer.close(index);
},
cancel: function(index){ //或者使用btn2
//按钮【按钮二】的回调
}
});
}
function openSelect(){
var iWidth=560; //模态窗口宽度
var iHeight=300;//模态窗口高度
var iTop=(window.screen.height-iHeight-100)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.backup="selectData";
window.open(location.href, "newwindow", "dialogHeight:"+iHeight+"px; dialogWidth:"+iWidth+"px; toolbar:no; menubar:no; scrollbars:no; resizable:no; location:no; status:no;left:200px;top:100px;");
}
function selectData(){
if (window.opener) {
console.log("openSelect:"+window.opener.returnValue);
}
else {
console.log("openSelect:"+window.returnValue);
}
}
function select(){
var str="";
var ids="";
var size = $("#contentTable tbody tr td input.i-checks:checked").size();
if(size == 0 ){
top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
return;
}
if(size > 1 ){
top.layer.alert('只能选择一条数据!', {icon: 0, title:'警告'});
return;
}
var id = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("id");
var loginName = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("loginName");
var deptName = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("deptName");
var ipaddr = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("ipaddr");
var loginLocation = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("loginLocation");
var browser = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("browser");
var os = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("os");
var status = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("status");
var startTimestsamp = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("startTimestsamp");
var updateDate = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("updateDate");
var obj= '"id":id';
if(loginName==undefined) loginName="";
obj+=',"loginName":"'+loginName+'"';
if(deptName==undefined) deptName="";
obj+=',"deptName":"'+deptName+'"';
if(ipaddr==undefined) ipaddr="";
obj+=',"ipaddr":"'+ipaddr+'"';
if(loginLocation==undefined) loginLocation="";
obj+=',"loginLocation":"'+loginLocation+'"';
if(browser==undefined) browser="";
obj+=',"browser":"'+browser+'"';
if(os==undefined) os="";
obj+=',"os":"'+os+'"';
if(status==undefined) status="";
obj+=',"status":"'+status+'"';
if(startTimestsamp==undefined) startTimestsamp="";
obj+=',"startTimestsamp":"'+startTimestsamp+'"';
if(updateDate==undefined) updateDate="";
obj+=',"updateDate":"'+updateDate+'"';
if (window.opener) {
window.opener.returnValue=eval("({"+obj+"})");
if(window.opener.backup!=undefined)
eval("window.opener."+window.opener.backup+"();");
}
else if(window.parent!=undefined){
window.parent.returnValue =eval("({"+obj+"})");
if(window.parent.backup!=undefined)
eval("window.parent."+window.parent.backup+"();");
}
else {
window.returnValue =eval("({"+obj+"})");
if(window.backup!=undefined)
eval("window."+window.backup+"();");
}
window.close();
}
</script>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="ibox">
<div class="ibox-content">
<sys:message content="${message}"/>
<!--查询条件-->
<div class="row">
<div class="col-sm-12">
<form:form id="searchForm" modelAttribute="sysUserOnline" action="${ctx}/sys/sysUserOnline/" method="post" class="form-inline">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<table:sortColumn id="orderBy" name="orderBy" value="${page.orderBy}" callback="sortOrRefresh();"/><!-- 支持排序 -->
<div class="form-group">
<span>登录账号：</span>
<form:input path="loginName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>部门名称：</span>
<form:input path="deptName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录IP地址：</span>
<form:input path="ipaddr" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录地点：</span>
<form:input path="loginLocation" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>浏览器类型：</span>
<form:input path="browser" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>操作系统：</span>
<form:input path="os" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>在线状态on_line在线off_line离线：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>session创建时间：</span>
<input id="beginStartTimestsamp" name="beginStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endStartTimestsamp" name="endStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>session最后访问时间：</span>
<input id="beginLastAccessTime" name="beginLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endLastAccessTime" name="endLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>超时时间，单位为分钟：</span>
<form:input path="expireTime" htmlEscape="false" maxlength="5" class=" form-control input-sm"/>
<span>创建者：</span>
<form:input path="createBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
<span>创建时间：</span>
<input id="beginCreateDate" name="beginCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endCreateDate" name="endCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>更新者：</span>
<form:input path="updateBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
</div>
</form:form>
<br/>
</div>
</div>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()" title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新</button>
<button class="btn btn-success btn-sm " onclick="openSelect()"><i class="fa fa-refresh"></i> OpenSelect</button>
<button class="btn btn-success btn-sm " onclick="openWindowSelect()"><i class="fa fa-refresh"></i> OpenWindowSelect</button>
<button class="btn btn-success btn-sm " onclick="select()"><i class="fa fa-refresh"></i> select</button>
</div>
<div class="pull-right">
<button class="btn btn-success btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
<button class="btn btn-success btn-sm " onclick="reset()" ><i class="fa fa-refresh"></i> 重置</button>
</div>
</div>
</div>
<!-- 表格 -->
<table id="contentTable" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
<thead>
<tr>
<th> <input type="checkbox" class="i-checks"></th>
<th class="sort-column loginName">登录账号</th>
<th class="sort-column deptName">部门名称</th>
<th class="sort-column ipaddr">登录IP地址</th>
<th class="sort-column loginLocation">登录地点</th>
<th class="sort-column browser">浏览器类型</th>
<th class="sort-column os">操作系统</th>
<th class="sort-column status">在线状态on_line在线off_line离线</th>
<th class="sort-column startTimestsamp">session创建时间</th>
<th class="sort-column updateDate">更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="sysUserOnline">
<tr>
<td>
<input type="checkbox" id="${sysUserOnline.id}"
loginName="${sysUserOnline.loginName}"
deptName="${sysUserOnline.deptName}"
ipaddr="${sysUserOnline.ipaddr}"
loginLocation="${sysUserOnline.loginLocation}"
browser="${sysUserOnline.browser}"
os="${sysUserOnline.os}"
status="${sysUserOnline.status}"
class="i-checks"></td>
<td><a href="#" onclick="openDialogView('查看在线用户记录', '${ctx}/sys/sysUserOnline/form?id=${sysUserOnline.id}','800px', '500px')">
${sysUserOnline.loginName}
</a></td>
<td>
${sysUserOnline.deptName}
</td>
<td>
${sysUserOnline.ipaddr}
</td>
<td>
${sysUserOnline.loginLocation}
</td>
<td>
${sysUserOnline.browser}
</td>
<td>
${sysUserOnline.os}
</td>
<td>
${fns:getDictLabel(sysUserOnline.status, 'on_line_status', '')}
</td>
<td>
<fmt:formatDate value="${sysUserOnline.startTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td>
<fmt:formatDate value="${sysUserOnline.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td>
<!--shiro:hasPermission name="sys:sysUserOnline:view"-->
<a href="#" onclick="openDialogView('查看在线用户记录', '${ctx}/sys/sysUserOnline/form?id=${sysUserOnline.id}','800px', '500px')" class="btn btn-info btn-sm" ><i class="fa fa-search-plus"></i> 查看</a>
<!--/shiro:hasPermission-->
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 分页代码 -->
<table:page page="${page}"></table:page>
<br/>
<br/>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysUserOnlineTotal.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/echarts.jsp"%>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="/staticViews/modules/sys//sysUserOnlineTotal.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys//sysUserOnlineTotal.css" rel="stylesheet" />
<div class="wrapper wrapper-content content-background">
<div class="ibox">
<div class="ibox-content">
<!--查询条件-->
<div class="row">
<div class="col-sm-12">
<form:form id="searchForm" modelAttribute="sysUserOnline" action="${ctx}/sys/sysUserOnline/total" method="post" class="form-inline">
<div class="form-group">
<input id="run" type="checkbox" value="true" name="run" checked/>自动刷新
<form:select path="totalType" class="form-control m-b">
<form:option value="" label=""/>
<form:options items="${fns:getDictList('total_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
</form:select>
<span>登录账号：</span>
<form:input path="loginName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>部门名称：</span>
<form:input path="deptName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录IP地址：</span>
<form:input path="ipaddr" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录地点：</span>
<form:input path="loginLocation" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>浏览器类型：</span>
<form:input path="browser" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>操作系统：</span>
<form:input path="os" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>在线状态on_line在线off_line离线：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>session创建时间：</span>
<input id="beginStartTimestsamp" name="beginStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endStartTimestsamp" name="endStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>session最后访问时间：</span>
<input id="beginLastAccessTime" name="beginLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endLastAccessTime" name="endLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>超时时间，单位为分钟：</span>
<form:input path="expireTime" htmlEscape="false" maxlength="5" class=" form-control input-sm"/>
<span>创建者：</span>
<form:input path="createBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
<span>创建时间：</span>
<input id="beginCreateDate" name="beginCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endCreateDate" name="endCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>更新者：</span>
<form:input path="updateBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
</div>
</form:form>
<br/>
</div>
</div>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<button class="btn btn-success btn-sm " onclick="$('#searchForm').toggle();$('.fa-chevron').toggle();" title="检索">
<i class="fa-chevron fa fa-chevron-up"></i><i class="fa-chevron fa fa-chevron-down" style="display:none"></i> 检索
</button>
<button class="btn btn-success btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
</div>
<div class="pull-right">
<div class="btn-group" title="其他">
<button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-th icon-th"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-type="放大"><a href="javascript:void(0)" onclick="$('body').css({zoom:Number($('body').css('zoom'))+0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">放大</a></li>
<li data-type="缩小"><a href="javascript:void(0)" onclick="$('body').css({zoom:$('body').css('zoom')-0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">缩小</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-12 echartsEval">
<div id="pie" class="main000"></div>
<echarts:pie
id="pie"
title="在线用户记录数量饼图"
subtitle="在线用户记录数量饼图"
orientData="${orientData}"/>
<div id="line_normal" class="main000"></div>
<echarts:line
id="line_normal"
title="在线用户记录曲线"
subtitle="在线用户记录曲线"
xAxisData="${xAxisData}"
yAxisData="${yAxisData}"
xAxisName="时间"
yAxisName="数量" />
</div>
</div>
<!-- 表格 -->
<table class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
<thead>
<tr>
<th>时间段</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="sysUserOnline">
<tr>
<td>${sysUserOnline.totalDate}</td>
<td style="text-align: right;" class="totalCount">${sysUserOnline.totalCount}</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr id="totalRow">
<td>合计：</td>
<td id="totalCount" style="text-align: right;"><script>sumColumn("totalCount");</script></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/sysUserOnlineTotalMap.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
.BMapLabel {max-width: none;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="/staticViews/modules/sys//sysUserOnlineTotal.js" type="text/javascript"></script>
<link href="/staticViews/modules/sys//sysUserOnlineTotal.css" rel="stylesheet" />
</head>
<body style="width: 100%; height: 100%;overflow: hidden">
<div class="wrapper wrapper-content" style="padding: 0px 20px 0px 20px;">
<div class="ibox">
<!--查询条件-->
<div class="row">
<div class="col-sm-12" style="z-index: 1000;background-color: white;">
<form:form id="searchForm" modelAttribute="sysUserOnline" action="${ctx}/sys/sysUserOnline/totalMap" method="post" class="form-inline" style="display:none">
<div class="form-group">
<input id="run" type="checkbox" value="true" name="run" checked/>自动刷新
<form:select path="totalType" class="form-control m-b">
<form:option value="" label=""/>
<form:options items="${fns:getDictList('total_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
</form:select>
<span>登录账号：</span>
<form:input path="loginName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>部门名称：</span>
<form:input path="deptName" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录IP地址：</span>
<form:input path="ipaddr" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>登录地点：</span>
<form:input path="loginLocation" htmlEscape="false" maxlength="255" class=" form-control input-sm"/>
<span>浏览器类型：</span>
<form:input path="browser" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>操作系统：</span>
<form:input path="os" htmlEscape="false" maxlength="50" class=" form-control input-sm"/>
<span>在线状态on_line在线off_line离线：</span>
<form:radiobuttons class="i-checks" path="status" items="${fns:getDictList('on_line_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
<span>session创建时间：</span>
<input id="beginStartTimestsamp" name="beginStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endStartTimestsamp" name="endStartTimestsamp" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endStartTimestsamp}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>session最后访问时间：</span>
<input id="beginLastAccessTime" name="beginLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endLastAccessTime" name="endLastAccessTime" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endLastAccessTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>超时时间，单位为分钟：</span>
<form:input path="expireTime" htmlEscape="false" maxlength="5" class=" form-control input-sm"/>
<span>创建者：</span>
<form:input path="createBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
<span>创建时间：</span>
<input id="beginCreateDate" name="beginCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.beginCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/> -
<input id="endCreateDate" name="endCreateDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"
value="<fmt:formatDate value="${sysUserOnline.endCreateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<span>更新者：</span>
<form:input path="updateBy.id" htmlEscape="false" maxlength="64" class=" form-control input-sm"/>
</div>
</form:form>
<br/>
</div>
</div>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12" style="z-index: 1000;background-color: white;">
<div class="pull-left">
<button class="btn btn-success btn-sm " onclick="$('#searchForm').toggle();$('.fa-chevron').toggle();" title="检索">
<i class="fa-chevron fa fa-chevron-up"></i><i class="fa-chevron fa fa-chevron-down" style="display:none"></i> 检索
</button>
<button class="btn btn-success btn-sm " onclick="search()" ><i class="fa fa-search"></i> 查询</button>
</div>
<div class="pull-right">
<div class="btn-group" title="其他">
<button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-th icon-th"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-type="放大"><a href="javascript:void(0)" onclick="$('body').css({zoom:Number($('body').css('zoom'))+0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">放大</a></li>
<li data-type="缩小"><a href="javascript:void(0)" onclick="$('body').css({zoom:$('body').css('zoom')-0.1});$('body .echartsEval script').each(function(){eval($(this).html())});">缩小</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--查询条件-->
</div>
</div>
<!--百度地图容器-->
<div style="width:100%;height:100%;position: absolute; bottom: 0px;top: 0px;">
<div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"></div>
</div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.271431,23.135336);//定义一个中心点坐标
map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
//标注点数组
var markerArr = [
<c:forEach items="${list}" var="sysUserOnline">
{title:"${sysUserOnline.totalDate}<br>统计${sysUserOnline.totalCount}次"
,content:""
,point:(113.271431+${sysUserOnline.totalCount})+"|"+(23.135336+${sysUserOnline.totalCount}),isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
</c:forEach>
{title:"在线用户记录<br>统计${sumTotalCount}次。"
,content:""
,point:"113.271431|23.135336",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
label.setStyle({
width: "300px",
color: '#fff',
borderRadius: "5px",
textAlign: "center",
height: "50px",
lineHeight: "26px"
});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();//创建和初始化地图
</script>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/systemConfig.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>系统配置管理</title>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script type="text/javascript">
$(document).ready(function(){
$("#inputForm").validate({
rules: {
mailName: {
required: true,
email: true
}}});
});
function modifyMail(){
if($("#inputForm").valid() == false){
return;
}
$.ajax({
async: false,
url: "${ctx}/sys/systemConfig/save",
data:{"smtp":$("#smtp").val(),"port":$("#port").val(),"mailName":$("#mailName").val(),"mailPassword":$("#mailPassword").val()},
dataType: "json",
success: function (data) {
if(data.success){
top.layer.alert("更新成功！");
}else{
top.layer.alert("更新失败！");
}
}
});
}
function modifySms(){
$.ajax({
async: false,
url: "${ctx}/sys/systemConfig/save",
data:{"smsName":$("#smsName").val(),"smsPassword":$("#smsPassword").val()},
dataType: "json",
success: function (data) {
if(data.success){
top.layer.alert("更新成功！");
}else{
top.layer.alert("更新失败！");
}
}
});
}
</script>
</head>
<body>
<div class="wrapper wrapper-content">
<div class="row animated fadeInRight">
<div class="col-sm-5">
<form:form id="inputForm" modelAttribute="systemConfig" action="${ctx}/sys/systemConfig/save" method="post" class="form-horizontal">
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-envelope"></i> 系统邮箱设置
<div class="pull-right">
<a href="#" onclick="modifyMail()" style="color:white">
<i style="font-size: 20px" class="fa fa-save"></i>
</a>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<tbody>
<tr>
<td class="width-15"><label class="pull-right">邮箱服务器地址：</label></td>
<td class="width-35">
<form:input path="smtp" htmlEscape="false" maxlength="64" class="form-control "/>
</td>
</tr>
<tr>
<td class="width-15"><label class="pull-right">邮箱服务器端口：</label></td>
<td class="width-35">
<form:input path="port" htmlEscape="false" maxlength="64" class="form-control "/>
</td>
</tr>
<tr>
<td class="width-15"><label class="pull-right">系统邮箱地址：</label></td>
<td class="width-35">
<form:input path="mailName" htmlEscape="false" maxlength="64" class="form-control "/>
</td>
</tr>
<tr>
<td class="width-15"><label class="pull-right">系统邮箱密码：</label></td>
<td class="width-35">
<form:password path="mailPassword" htmlEscape="false" maxlength="64" class="form-control required"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form:form>
</div>
<div class="col-sm-5">
<form:form id="inputForm1" modelAttribute="systemConfig" action="${ctx}/sys/systemConfig/save" method="post" class="form-horizontal">
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-comment"></i> 短信设置(<a href="http://www.cnsms.cn/" target="_blank"><font color="white">企信通</font></a>)
<div class="pull-right">
<a href="#" onclick="modifySms()" style="color:white">
<i style="font-size: 20px" class="fa fa-save"></i>
</a>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td class="width-15"><label class="pull-right">短信用户名：</label></td>
<td class="width-35">
<form:input path="smsName" htmlEscape="false" maxlength="64" class="form-control "/>
</td>
</tr>
<tr>
<td class="width-15"><label class="pull-right">短信密码：</label></td>
<td class="width-35">
<form:password path="smsPassword" htmlEscape="false" maxlength="64" class="form-control "/>
</td>
</tr>
</table>
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/tagIconselect.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>图标选择</title>
<meta name="decorator" content="blank"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<style type="text/css">
.page-header {clear:both;margin:0 20px;padding-top:20px;}
.the-icons {padding:25px 10px 15px;list-style:none;}
.the-icons li {float:left;width:22%;line-height:25px;margin:2px 5px;cursor:pointer;}
.the-icons i {margin:1px 5px;font-size:16px;} .the-icons li:hover {background-color:#efefef;}
.the-icons li.active {background-color:#0088CC;color:#ffffff;}
.the-icons li:hover i{font-size:20px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#icons li").click(function(){
$("#icons li").removeClass("active");
$("#icons li i").removeClass("icon-white");
$(this).addClass("active");
$(this).children("i").addClass("icon-white");
$("#icon").val($(this).find('i').attr('class').split(" ")[1]);
});
$("#icons li").each(function(){
if ($(this).text()=="${value}"){
$(this).click();
}
});
$("#icons li").dblclick(function(){
/*if(top.$.jBox)
top.$.jBox.getBox().find("button[value='ok']").trigger("click");
else if(top.layer)
top.layer.close(top.layer.index);*/
});
});
</script>
</head>
<body>
<input type="hidden" id="icon" value="${value}" />
<div id="icons">
<h2 class="page-header">66 New Icons in 4.4</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-500px"></i> 500px</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-amazon"></i> amazon</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-balance-scale"></i> balance-scale</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-0"></i> battery-0 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-1"></i> battery-1 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-2"></i> battery-2 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-3"></i> battery-3 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-4"></i> battery-4 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-empty"></i> battery-empty</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-full"></i> battery-full</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-half"></i> battery-half</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-quarter"></i> battery-quarter</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-three-quarters"></i> battery-three-quarters</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-black-tie"></i> black-tie</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-check-o"></i> calendar-check-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-minus-o"></i> calendar-minus-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-plus-o"></i> calendar-plus-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-times-o"></i> calendar-times-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-diners-club"></i> cc-diners-club</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-jcb"></i> cc-jcb</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chrome"></i> chrome</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-clone"></i> clone</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-commenting"></i> commenting</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-commenting-o"></i> commenting-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-contao"></i> contao</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-creative-commons"></i> creative-commons</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-expeditedssl"></i> expeditedssl</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-firefox"></i> firefox</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fonticons"></i> fonticons</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-genderless"></i> genderless</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-get-pocket"></i> get-pocket</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gg"></i> gg</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gg-circle"></i> gg-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-grab-o"></i> hand-grab-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-lizard-o"></i> hand-lizard-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-paper-o"></i> hand-paper-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-peace-o"></i> hand-peace-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-pointer-o"></i> hand-pointer-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-rock-o"></i> hand-rock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-scissors-o"></i> hand-scissors-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-spock-o"></i> hand-spock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-stop-o"></i> hand-stop-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass"></i> hourglass</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-1"></i> hourglass-1 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-2"></i> hourglass-2 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-3"></i> hourglass-3 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-end"></i> hourglass-end</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-half"></i> hourglass-half</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-o"></i> hourglass-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-start"></i> hourglass-start</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-houzz"></i> houzz</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-i-cursor"></i> i-cursor</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-industry"></i> industry</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-internet-explorer"></i> internet-explorer</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map"></i> map</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-o"></i> map-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-pin"></i> map-pin</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-signs"></i> map-signs</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mouse-pointer"></i> mouse-pointer</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-object-group"></i> object-group</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-object-ungroup"></i> object-ungroup</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-odnoklassniki"></i> odnoklassniki</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-odnoklassniki-square"></i> odnoklassniki-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-opencart"></i> opencart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-opera"></i> opera</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-optin-monster"></i> optin-monster</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-registered"></i> registered</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-safari"></i> safari</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sticky-note"></i> sticky-note</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sticky-note-o"></i> sticky-note-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-television"></i> television</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-trademark"></i> trademark</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tripadvisor"></i> tripadvisor</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tv"></i> tv <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-vimeo"></i> vimeo</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wikipedia-w"></i> wikipedia-w</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-y-combinator"></i> y-combinator</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-yc"></i> yc <span class="text-muted">(alias)</span></li>
</ul>
<h2 class="page-header">Web Application Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-adjust"></i> adjust</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-anchor"></i> anchor</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-archive"></i> archive</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-area-chart"></i> area-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows"></i> arrows</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows-h"></i> arrows-h</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows-v"></i> arrows-v</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-asterisk"></i> asterisk</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-at"></i> at</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-automobile"></i> automobile <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-balance-scale"></i> balance-scale</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ban"></i> ban</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bank"></i> bank <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bar-chart"></i> bar-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bar-chart-o"></i> bar-chart-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-barcode"></i> barcode</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bars"></i> bars</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-0"></i> battery-0 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-1"></i> battery-1 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-2"></i> battery-2 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-3"></i> battery-3 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-4"></i> battery-4 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-empty"></i> battery-empty</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-full"></i> battery-full</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-half"></i> battery-half</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-quarter"></i> battery-quarter</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-battery-three-quarters"></i> battery-three-quarters</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bed"></i> bed</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-beer"></i> beer</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bell"></i> bell</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bell-o"></i> bell-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bell-slash"></i> bell-slash</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bell-slash-o"></i> bell-slash-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bicycle"></i> bicycle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-binoculars"></i> binoculars</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-birthday-cake"></i> birthday-cake</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bolt"></i> bolt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bomb"></i> bomb</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-book"></i> book</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bookmark"></i> bookmark</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bookmark-o"></i> bookmark-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-briefcase"></i> briefcase</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bug"></i> bug</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-building"></i> building</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-building-o"></i> building-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bullhorn"></i> bullhorn</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bullseye"></i> bullseye</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bus"></i> bus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cab"></i> cab <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calculator"></i> calculator</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar"></i> calendar</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-check-o"></i> calendar-check-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-minus-o"></i> calendar-minus-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-o"></i> calendar-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-plus-o"></i> calendar-plus-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-calendar-times-o"></i> calendar-times-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-camera"></i> camera</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-camera-retro"></i> camera-retro</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-car"></i> car</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-down"></i> caret-square-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-left"></i> caret-square-o-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-right"></i> caret-square-o-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-up"></i> caret-square-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cart-arrow-down"></i> cart-arrow-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cart-plus"></i> cart-plus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc"></i> cc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-certificate"></i> certificate</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check"></i> check</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check-circle"></i> check-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check-circle-o"></i> check-circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check-square"></i> check-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check-square-o"></i> check-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-child"></i> child</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle"></i> circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle-o"></i> circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle-o-notch"></i> circle-o-notch</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle-thin"></i> circle-thin</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-clock-o"></i> clock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-clone"></i> clone</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-close"></i> close <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cloud"></i> cloud</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cloud-download"></i> cloud-download</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cloud-upload"></i> cloud-upload</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-code"></i> code</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-code-fork"></i> code-fork</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-coffee"></i> coffee</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cog"></i> cog</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cogs"></i> cogs</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-comment"></i> comment</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-comment-o"></i> comment-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-commenting"></i> commenting</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-commenting-o"></i> commenting-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-comments"></i> comments</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-comments-o"></i> comments-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-compass"></i> compass</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-copyright"></i> copyright</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-creative-commons"></i> creative-commons</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-credit-card"></i> credit-card</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-crop"></i> crop</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-crosshairs"></i> crosshairs</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cube"></i> cube</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cubes"></i> cubes</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cutlery"></i> cutlery</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dashboard"></i> dashboard <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-database"></i> database</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-desktop"></i> desktop</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-diamond"></i> diamond</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dot-circle-o"></i> dot-circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-download"></i> download</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-edit"></i> edit <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ellipsis-h"></i> ellipsis-h</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ellipsis-v"></i> ellipsis-v</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-envelope"></i> envelope</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-envelope-o"></i> envelope-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-envelope-square"></i> envelope-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eraser"></i> eraser</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-exchange"></i> exchange</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-exclamation"></i> exclamation</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-exclamation-circle"></i> exclamation-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-exclamation-triangle"></i> exclamation-triangle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-external-link"></i> external-link</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-external-link-square"></i> external-link-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eye"></i> eye</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eye-slash"></i> eye-slash</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eyedropper"></i> eyedropper</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fax"></i> fax</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-feed"></i> feed <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-female"></i> female</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fighter-jet"></i> fighter-jet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-archive-o"></i> file-archive-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-audio-o"></i> file-audio-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-code-o"></i> file-code-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-excel-o"></i> file-excel-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-image-o"></i> file-image-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-movie-o"></i> file-movie-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-pdf-o"></i> file-pdf-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-photo-o"></i> file-photo-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-picture-o"></i> file-picture-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-powerpoint-o"></i> file-powerpoint-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-sound-o"></i> file-sound-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-video-o"></i> file-video-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-word-o"></i> file-word-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-zip-o"></i> file-zip-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-film"></i> film</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-filter"></i> filter</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fire"></i> fire</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fire-extinguisher"></i> fire-extinguisher</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-flag"></i> flag</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-flag-checkered"></i> flag-checkered</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-flag-o"></i> flag-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-flash"></i> flash <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-flask"></i> flask</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-folder"></i> folder</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-folder-o"></i> folder-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-folder-open"></i> folder-open</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-folder-open-o"></i> folder-open-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-frown-o"></i> frown-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-futbol-o"></i> futbol-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gamepad"></i> gamepad</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gavel"></i> gavel</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gear"></i> gear <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gears"></i> gears <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gift"></i> gift</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-glass"></i> glass</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-globe"></i> globe</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-graduation-cap"></i> graduation-cap</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-group"></i> group <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-grab-o"></i> hand-grab-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-lizard-o"></i> hand-lizard-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-paper-o"></i> hand-paper-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-peace-o"></i> hand-peace-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-pointer-o"></i> hand-pointer-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-rock-o"></i> hand-rock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-scissors-o"></i> hand-scissors-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-spock-o"></i> hand-spock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-stop-o"></i> hand-stop-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hdd-o"></i> hdd-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-headphones"></i> headphones</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-heart"></i> heart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-heart-o"></i> heart-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-heartbeat"></i> heartbeat</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-history"></i> history</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-home"></i> home</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hotel"></i> hotel <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass"></i> hourglass</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-1"></i> hourglass-1 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-2"></i> hourglass-2 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-3"></i> hourglass-3 <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-end"></i> hourglass-end</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-half"></i> hourglass-half</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-o"></i> hourglass-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hourglass-start"></i> hourglass-start</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-i-cursor"></i> i-cursor</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-image"></i> image <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-inbox"></i> inbox</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-industry"></i> industry</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-info"></i> info</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-info-circle"></i> info-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-institution"></i> institution <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-key"></i> key</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-keyboard-o"></i> keyboard-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-language"></i> language</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-laptop"></i> laptop</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-leaf"></i> leaf</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-legal"></i> legal <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-lemon-o"></i> lemon-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-level-down"></i> level-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-level-up"></i> level-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-life-bouy"></i> life-bouy <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-life-buoy"></i> life-buoy <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-life-ring"></i> life-ring</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-life-saver"></i> life-saver <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-lightbulb-o"></i> lightbulb-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-line-chart"></i> line-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-location-arrow"></i> location-arrow</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-lock"></i> lock</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-magic"></i> magic</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-magnet"></i> magnet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mail-forward"></i> mail-forward <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mail-reply"></i> mail-reply <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mail-reply-all"></i> mail-reply-all <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-male"></i> male</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map"></i> map</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-marker"></i> map-marker</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-o"></i> map-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-pin"></i> map-pin</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-map-signs"></i> map-signs</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-meh-o"></i> meh-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-microphone"></i> microphone</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-microphone-slash"></i> microphone-slash</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-minus"></i> minus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-minus-circle"></i> minus-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-minus-square"></i> minus-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-minus-square-o"></i> minus-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mobile"></i> mobile</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mobile-phone"></i> mobile-phone <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-money"></i> money</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-moon-o"></i> moon-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mortar-board"></i> mortar-board <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-motorcycle"></i> motorcycle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mouse-pointer"></i> mouse-pointer</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-music"></i> music</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-navicon"></i> navicon <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-newspaper-o"></i> newspaper-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-object-group"></i> object-group</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-object-ungroup"></i> object-ungroup</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paint-brush"></i> paint-brush</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paper-plane"></i> paper-plane</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paper-plane-o"></i> paper-plane-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paw"></i> paw</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pencil"></i> pencil</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pencil-square"></i> pencil-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pencil-square-o"></i> pencil-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-phone"></i> phone</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-phone-square"></i> phone-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-photo"></i> photo <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-picture-o"></i> picture-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pie-chart"></i> pie-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plane"></i> plane</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plug"></i> plug</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus"></i> plus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus-circle"></i> plus-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus-square"></i> plus-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus-square-o"></i> plus-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-power-off"></i> power-off</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-print"></i> print</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-puzzle-piece"></i> puzzle-piece</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-qrcode"></i> qrcode</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-question"></i> question</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-question-circle"></i> question-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-quote-left"></i> quote-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-quote-right"></i> quote-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-random"></i> random</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-recycle"></i> recycle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-refresh"></i> refresh</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-registered"></i> registered</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-remove"></i> remove <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-reorder"></i> reorder <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-reply"></i> reply</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-reply-all"></i> reply-all</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-retweet"></i> retweet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-road"></i> road</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rocket"></i> rocket</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rss"></i> rss</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rss-square"></i> rss-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-search"></i> search</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-search-minus"></i> search-minus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-search-plus"></i> search-plus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-send"></i> send <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-send-o"></i> send-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-server"></i> server</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share"></i> share</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share-alt"></i> share-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share-alt-square"></i> share-alt-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share-square"></i> share-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share-square-o"></i> share-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-shield"></i> shield</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ship"></i> ship</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-shopping-cart"></i> shopping-cart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sign-in"></i> sign-in</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sign-out"></i> sign-out</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-signal"></i> signal</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sitemap"></i> sitemap</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sliders"></i> sliders</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-smile-o"></i> smile-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-soccer-ball-o"></i> soccer-ball-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort"></i> sort</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-alpha-asc"></i> sort-alpha-asc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-alpha-desc"></i> sort-alpha-desc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-amount-asc"></i> sort-amount-asc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-amount-desc"></i> sort-amount-desc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-asc"></i> sort-asc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-desc"></i> sort-desc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-down"></i> sort-down <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-numeric-asc"></i> sort-numeric-asc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-numeric-desc"></i> sort-numeric-desc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sort-up"></i> sort-up <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-space-shuttle"></i> space-shuttle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-spinner"></i> spinner</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-spoon"></i> spoon</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-square"></i> square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-square-o"></i> square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-star"></i> star</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-star-half"></i> star-half</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-star-half-empty"></i> star-half-empty <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-star-half-full"></i> star-half-full <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-star-half-o"></i> star-half-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-star-o"></i> star-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sticky-note"></i> sticky-note</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sticky-note-o"></i> sticky-note-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-street-view"></i> street-view</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-suitcase"></i> suitcase</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sun-o"></i> sun-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-support"></i> support <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tablet"></i> tablet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tachometer"></i> tachometer</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tag"></i> tag</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tags"></i> tags</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tasks"></i> tasks</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-taxi"></i> taxi</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-television"></i> television</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-terminal"></i> terminal</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumb-tack"></i> thumb-tack</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-down"></i> thumbs-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-o-down"></i> thumbs-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-o-up"></i> thumbs-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-up"></i> thumbs-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ticket"></i> ticket</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-times"></i> times</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-times-circle"></i> times-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-times-circle-o"></i> times-circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tint"></i> tint</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-down"></i> toggle-down <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-left"></i> toggle-left <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-off"></i> toggle-off</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-on"></i> toggle-on</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-right"></i> toggle-right <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-up"></i> toggle-up <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-trademark"></i> trademark</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-trash"></i> trash</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-trash-o"></i> trash-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tree"></i> tree</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-trophy"></i> trophy</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-truck"></i> truck</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tty"></i> tty</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tv"></i> tv <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-umbrella"></i> umbrella</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-university"></i> university</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-unlock"></i> unlock</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-unlock-alt"></i> unlock-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-unsorted"></i> unsorted <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-upload"></i> upload</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-user"></i> user</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-user-plus"></i> user-plus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-user-secret"></i> user-secret</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-user-times"></i> user-times</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-users"></i> users</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-video-camera"></i> video-camera</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-volume-down"></i> volume-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-volume-off"></i> volume-off</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-volume-up"></i> volume-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-warning"></i> warning <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wheelchair"></i> wheelchair</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wifi"></i> wifi</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wrench"></i> wrench</li>
</ul>
<h2 class="page-header">Hand Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-grab-o"></i> hand-grab-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-lizard-o"></i> hand-lizard-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-down"></i> hand-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-left"></i> hand-o-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-right"></i> hand-o-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-up"></i> hand-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-paper-o"></i> hand-paper-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-peace-o"></i> hand-peace-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-pointer-o"></i> hand-pointer-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-rock-o"></i> hand-rock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-scissors-o"></i> hand-scissors-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-spock-o"></i> hand-spock-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-stop-o"></i> hand-stop-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-down"></i> thumbs-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-o-down"></i> thumbs-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-o-up"></i> thumbs-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-thumbs-up"></i> thumbs-up</li>
</ul>
<h2 class="page-header">Transportation Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ambulance"></i> ambulance</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-automobile"></i> automobile <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bicycle"></i> bicycle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bus"></i> bus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cab"></i> cab <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-car"></i> car</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fighter-jet"></i> fighter-jet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-motorcycle"></i> motorcycle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plane"></i> plane</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rocket"></i> rocket</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ship"></i> ship</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-space-shuttle"></i> space-shuttle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-subway"></i> subway</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-taxi"></i> taxi</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-train"></i> train</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-truck"></i> truck</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wheelchair"></i> wheelchair</li>
</ul>
<h2 class="page-header">Gender Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-genderless"></i> genderless</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-intersex"></i> intersex <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mars"></i> mars</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mars-double"></i> mars-double</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mars-stroke"></i> mars-stroke</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mars-stroke-h"></i> mars-stroke-h</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mars-stroke-v"></i> mars-stroke-v</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-mercury"></i> mercury</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-neuter"></i> neuter</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-transgender"></i> transgender</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-transgender-alt"></i> transgender-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-venus"></i> venus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-venus-double"></i> venus-double</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-venus-mars"></i> venus-mars</li>
</ul>
<h2 class="page-header">File Type Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file"></i> file</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-archive-o"></i> file-archive-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-audio-o"></i> file-audio-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-code-o"></i> file-code-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-excel-o"></i> file-excel-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-image-o"></i> file-image-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-movie-o"></i> file-movie-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-o"></i> file-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-pdf-o"></i> file-pdf-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-photo-o"></i> file-photo-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-picture-o"></i> file-picture-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-powerpoint-o"></i> file-powerpoint-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-sound-o"></i> file-sound-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-text"></i> file-text</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-text-o"></i> file-text-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-video-o"></i> file-video-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-word-o"></i> file-word-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-zip-o"></i> file-zip-o <span class="text-muted">(alias)</span></li>
</ul>
<h2 class="page-header">Spinner Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle-o-notch"></i> circle-o-notch</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cog"></i> cog</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gear"></i> gear <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-refresh"></i> refresh</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-spinner"></i> spinner</li>
</ul>
<h2 class="page-header">Form Control Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check-square"></i> check-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-check-square-o"></i> check-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle"></i> circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-circle-o"></i> circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dot-circle-o"></i> dot-circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-minus-square"></i> minus-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-minus-square-o"></i> minus-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus-square"></i> plus-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus-square-o"></i> plus-square-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-square"></i> square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-square-o"></i> square-o</li>
</ul>
<h2 class="page-header">Payment Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-amex"></i> cc-amex</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-diners-club"></i> cc-diners-club</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-discover"></i> cc-discover</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-jcb"></i> cc-jcb</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-mastercard"></i> cc-mastercard</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-paypal"></i> cc-paypal</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-stripe"></i> cc-stripe</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-visa"></i> cc-visa</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-credit-card"></i> credit-card</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-google-wallet"></i> google-wallet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paypal"></i> paypal</li>
</ul>
<h2 class="page-header">Chart Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-area-chart"></i> area-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bar-chart"></i> bar-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bar-chart-o"></i> bar-chart-o <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-line-chart"></i> line-chart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pie-chart"></i> pie-chart</li>
</ul>
<h2 class="page-header">Currency Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bitcoin"></i> bitcoin <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-btc"></i> btc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cny"></i> cny <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dollar"></i> dollar <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eur"></i> eur</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-euro"></i> euro <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gbp"></i> gbp</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gg"></i> gg</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gg-circle"></i> gg-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ils"></i> ils</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-inr"></i> inr</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-jpy"></i> jpy</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-krw"></i> krw</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-money"></i> money</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rmb"></i> rmb <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rouble"></i> rouble <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rub"></i> rub</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ruble"></i> ruble <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rupee"></i> rupee <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-shekel"></i> shekel <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sheqel"></i> sheqel <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-try"></i> try</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-turkish-lira"></i> turkish-lira <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-usd"></i> usd</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-won"></i> won <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-yen"></i> yen <span class="text-muted">(alias)</span></li>
</ul>
<h2 class="page-header">Text Editor Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-align-center"></i> align-center</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-align-justify"></i> align-justify</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-align-left"></i> align-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-align-right"></i> align-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bold"></i> bold</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chain"></i> chain <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chain-broken"></i> chain-broken</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-clipboard"></i> clipboard</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-columns"></i> columns</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-copy"></i> copy <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cut"></i> cut <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dedent"></i> dedent <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eraser"></i> eraser</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file"></i> file</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-o"></i> file-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-text"></i> file-text</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-file-text-o"></i> file-text-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-files-o"></i> files-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-floppy-o"></i> floppy-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-font"></i> font</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-header"></i> header</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-indent"></i> indent</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-italic"></i> italic</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-link"></i> link</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-list"></i> list</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-list-alt"></i> list-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-list-ol"></i> list-ol</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-list-ul"></i> list-ul</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-outdent"></i> outdent</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paperclip"></i> paperclip</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paragraph"></i> paragraph</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paste"></i> paste <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-repeat"></i> repeat</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rotate-left"></i> rotate-left <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rotate-right"></i> rotate-right <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-save"></i> save <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-scissors"></i> scissors</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-strikethrough"></i> strikethrough</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-subscript"></i> subscript</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-superscript"></i> superscript</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-table"></i> table</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-text-height"></i> text-height</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-text-width"></i> text-width</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-th"></i> th</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-th-large"></i> th-large</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-th-list"></i> th-list</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-underline"></i> underline</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-undo"></i> undo</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-unlink"></i> unlink <span class="text-muted">(alias)</span></li>
</ul>
<h2 class="page-header">Directional Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-double-down"></i> angle-double-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-double-left"></i> angle-double-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-double-right"></i> angle-double-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-double-up"></i> angle-double-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-down"></i> angle-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-left"></i> angle-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-right"></i> angle-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angle-up"></i> angle-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-down"></i> arrow-circle-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-left"></i> arrow-circle-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-o-down"></i> arrow-circle-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-o-left"></i> arrow-circle-o-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-o-right"></i> arrow-circle-o-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-o-up"></i> arrow-circle-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-right"></i> arrow-circle-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-circle-up"></i> arrow-circle-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-down"></i> arrow-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-left"></i> arrow-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-right"></i> arrow-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrow-up"></i> arrow-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows"></i> arrows</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows-alt"></i> arrows-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows-h"></i> arrows-h</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows-v"></i> arrows-v</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-down"></i> caret-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-left"></i> caret-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-right"></i> caret-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-down"></i> caret-square-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-left"></i> caret-square-o-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-right"></i> caret-square-o-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-square-o-up"></i> caret-square-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-caret-up"></i> caret-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-circle-down"></i> chevron-circle-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-circle-left"></i> chevron-circle-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-circle-right"></i> chevron-circle-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-circle-up"></i> chevron-circle-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-down"></i> chevron-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-left"></i> chevron-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-right"></i> chevron-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chevron-up"></i> chevron-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-exchange"></i> exchange</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-down"></i> hand-o-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-left"></i> hand-o-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-right"></i> hand-o-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hand-o-up"></i> hand-o-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-long-arrow-down"></i> long-arrow-down</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-long-arrow-left"></i> long-arrow-left</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-long-arrow-right"></i> long-arrow-right</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-long-arrow-up"></i> long-arrow-up</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-down"></i> toggle-down <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-left"></i> toggle-left <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-right"></i> toggle-right <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-toggle-up"></i> toggle-up <span class="text-muted">(alias)</span></li>
</ul>
<h2 class="page-header">Video Player Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-arrows-alt"></i> arrows-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-backward"></i> backward</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-compress"></i> compress</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-eject"></i> eject</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-expand"></i> expand</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fast-backward"></i> fast-backward</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fast-forward"></i> fast-forward</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-forward"></i> forward</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pause"></i> pause</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-play"></i> play</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-play-circle"></i> play-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-play-circle-o"></i> play-circle-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-random"></i> random</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-step-backward"></i> step-backward</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-step-forward"></i> step-forward</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-stop"></i> stop</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-youtube-play"></i> youtube-play</li>
</ul>
<h2 class="page-header">Brand Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-500px"></i> 500px</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-adn"></i> adn</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-amazon"></i> amazon</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-android"></i> android</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-angellist"></i> angellist</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-apple"></i> apple</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-behance"></i> behance</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-behance-square"></i> behance-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bitbucket"></i> bitbucket</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bitbucket-square"></i> bitbucket-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-bitcoin"></i> bitcoin <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-black-tie"></i> black-tie</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-btc"></i> btc</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-buysellads"></i> buysellads</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-amex"></i> cc-amex</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-diners-club"></i> cc-diners-club</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-discover"></i> cc-discover</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-jcb"></i> cc-jcb</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-mastercard"></i> cc-mastercard</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-paypal"></i> cc-paypal</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-stripe"></i> cc-stripe</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-cc-visa"></i> cc-visa</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-chrome"></i> chrome</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-codepen"></i> codepen</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-connectdevelop"></i> connectdevelop</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-contao"></i> contao</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-css3"></i> css3</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dashcube"></i> dashcube</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-delicious"></i> delicious</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-deviantart"></i> deviantart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-digg"></i> digg</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dribbble"></i> dribbble</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-dropbox"></i> dropbox</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-drupal"></i> drupal</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-empire"></i> empire</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-expeditedssl"></i> expeditedssl</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-facebook"></i> facebook</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-facebook-f"></i> facebook-f <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-facebook-official"></i> facebook-official</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-facebook-square"></i> facebook-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-firefox"></i> firefox</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-flickr"></i> flickr</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-fonticons"></i> fonticons</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-forumbee"></i> forumbee</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-foursquare"></i> foursquare</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ge"></i> ge <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-get-pocket"></i> get-pocket</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gg"></i> gg</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gg-circle"></i> gg-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-git"></i> git</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-git-square"></i> git-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-github"></i> github</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-github-alt"></i> github-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-github-square"></i> github-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gittip"></i> gittip <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-google"></i> google</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-google-plus"></i> google-plus</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-google-plus-square"></i> google-plus-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-google-wallet"></i> google-wallet</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-gratipay"></i> gratipay</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hacker-news"></i> hacker-news</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-houzz"></i> houzz</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-html5"></i> html5</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-instagram"></i> instagram</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-internet-explorer"></i> internet-explorer</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ioxhost"></i> ioxhost</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-joomla"></i> joomla</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-jsfiddle"></i> jsfiddle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-lastfm"></i> lastfm</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-lastfm-square"></i> lastfm-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-leanpub"></i> leanpub</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-linkedin"></i> linkedin</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-linkedin-square"></i> linkedin-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-linux"></i> linux</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-maxcdn"></i> maxcdn</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-meanpath"></i> meanpath</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-medium"></i> medium</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-odnoklassniki"></i> odnoklassniki</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-odnoklassniki-square"></i> odnoklassniki-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-opencart"></i> opencart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-openid"></i> openid</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-opera"></i> opera</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-optin-monster"></i> optin-monster</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pagelines"></i> pagelines</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-paypal"></i> paypal</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pied-piper"></i> pied-piper</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pied-piper-alt"></i> pied-piper-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pinterest"></i> pinterest</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pinterest-p"></i> pinterest-p</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-pinterest-square"></i> pinterest-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-qq"></i> qq</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ra"></i> ra <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-rebel"></i> rebel</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-reddit"></i> reddit</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-reddit-square"></i> reddit-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-renren"></i> renren</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-safari"></i> safari</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-sellsy"></i> sellsy</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share-alt"></i> share-alt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-share-alt-square"></i> share-alt-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-shirtsinbulk"></i> shirtsinbulk</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-simplybuilt"></i> simplybuilt</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-skyatlas"></i> skyatlas</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-skype"></i> skype</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-slack"></i> slack</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-slideshare"></i> slideshare</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-soundcloud"></i> soundcloud</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-spotify"></i> spotify</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-stack-exchange"></i> stack-exchange</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-stack-overflow"></i> stack-overflow</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-steam"></i> steam</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-steam-square"></i> steam-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-stumbleupon"></i> stumbleupon</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-stumbleupon-circle"></i> stumbleupon-circle</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tencent-weibo"></i> tencent-weibo</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-trello"></i> trello</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tripadvisor"></i> tripadvisor</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tumblr"></i> tumblr</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-tumblr-square"></i> tumblr-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-twitch"></i> twitch</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-twitter"></i> twitter</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-twitter-square"></i> twitter-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-viacoin"></i> viacoin</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-vimeo"></i> vimeo</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-vimeo-square"></i> vimeo-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-vine"></i> vine</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-vk"></i> vk</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wechat"></i> wechat <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-weibo"></i> weibo</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-weixin"></i> weixin</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-whatsapp"></i> whatsapp</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wikipedia-w"></i> wikipedia-w</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-windows"></i> windows</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wordpress"></i> wordpress</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-xing"></i> xing</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-xing-square"></i> xing-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-y-combinator"></i> y-combinator</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-y-combinator-square"></i> y-combinator-square <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-yahoo"></i> yahoo</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-yc"></i> yc <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-yc-square"></i> yc-square <span class="text-muted">(alias)</span></li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-yelp"></i> yelp</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-youtube"></i> youtube</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-youtube-play"></i> youtube-play</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-youtube-square"></i> youtube-square</li>
</ul>
<h2 class="page-header">Medical Icons</h2>
<ul class="the-icons">
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-ambulance"></i> ambulance</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-h-square"></i> h-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-heart"></i> heart</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-heart-o"></i> heart-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-heartbeat"></i> heartbeat</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-hospital-o"></i> hospital-o</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-medkit"></i> medkit</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-plus-square"></i> plus-square</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-stethoscope"></i> stethoscope</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-user-md"></i> user-md</li>
<li class="fa-hover col-md-3 col-sm-4"><i class="fa fa-wheelchair"></i> wheelchair</li>
</ul>
<br/><br/>
</div>
</body>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/tagTreeselect.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>数据选择</title>
<meta name="decorator" content="blank"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<%@include file="/WEB-INF/views/include/treeview.jsp" %>
<script type="text/javascript">
var key, lastValue = "", nodeList = [], type = getQueryString("type", "${url}");
var tree, setting = {view:{selectedMulti:false,dblClickExpand:false},check:{enable:"${checked}",nocheckInherit:true},
async:{enable:(type==3),url:"${ctx}/sys/user/treeData",autoParam:["id=officeId"]},
data:{simpleData:{enable:true}},callback:{<%--
beforeClick: function(treeId, treeNode){
if("${checked}" == "true"){
//tree.checkNode(treeNode, !node.checked, true, true);
tree.expandNode(treeNode, true, false, false);
}
}, --%>
onClick:function(event, treeId, treeNode){
tree.expandNode(treeNode);
},onCheck: function(e, treeId, treeNode){
var nodes = tree.getCheckedNodes(true);
for (var i=0, l=nodes.length; i<l; i++) {
tree.expandNode(nodes[i], true, false, false);
}
return false;
},onAsyncSuccess: function(event, treeId, treeNode, msg){
var nodes = tree.getNodesByParam("pId", treeNode.id, null);
for (var i=0, l=nodes.length; i<l; i++) {
try{tree.checkNode(nodes[i], treeNode.checked, true);}catch(e){}
//tree.selectNode(nodes[i], false);
}
selectCheckNode();
},onDblClick: function(){//<c:if test="${!checked}">
top.$.jBox.getBox().find("button[value='ok']").trigger("click");
//$("input[type='text']", top.mainFrame.document).focus();//</c:if>
}
}
};
function expandNodes(nodes) {
if (!nodes) return;
for (var i=0, l=nodes.length; i<l; i++) {
tree.expandNode(nodes[i], true, false, false);
if (nodes[i].isParent && nodes[i].zAsync) {
expandNodes(nodes[i].children);
}
}
}
$(document).ready(function(){
$.get("${ctx}${url}${fn:indexOf(url,'?')==-1?'?':'&'}&extId=${extId}&isAll=${isAll}&module=${module}&t="
+ new Date().getTime(), function(zNodes){
// 初始化树结构
tree = $.fn.zTree.init($("#tree"), setting, zNodes);
// 默认展开一级节点
var nodes = tree.getNodesByParam("level", 0);
for(var i=0; i<nodes.length; i++) {
tree.expandNode(nodes[i], true, false, false);
}
//异步加载子节点（加载用户）
var nodesOne = tree.getNodesByParam("isParent", true);
for(var j=0; j<nodesOne.length; j++) {
tree.reAsyncChildNodes(nodesOne[j],"!refresh",true);
}
selectCheckNode();
});
key = $("#key");
key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
key.bind('keydown', function (e){if(e.which == 13){searchNode();}});
setTimeout("search();", "300");
});
// 默认选择节点
function selectCheckNode(){
var ids = "${selectIds}".split(",");
for(var i=0; i<ids.length; i++) {
var node = tree.getNodeByParam("id", (type==3?"u_":"")+ids[i]);
if("${checked}" == "true"){
try{tree.checkNode(node, true, true);}catch(e){}
tree.selectNode(node, false);
}else{
tree.selectNode(node, true);
}
}
}
function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
searchNode(e);
}
//搜索节点
function searchNode() {
// 取得输入的关键字的值
var value = $.trim(key.get(0).value);
// 按名字查询
var keyType = "name";<%--
if (key.hasClass("empty")) {
value = "";
}--%>
// 如果和上次一次，就退出不查了。
if (lastValue === value) {
return;
}
// 保存最后一次
lastValue = value;
var nodes = tree.getNodes();
// 如果要查空字串，就退出不查了。
if (value == "") {
showAllNode(nodes);
return;
}
hideAllNode(nodes);
nodeList = tree.getNodesByParamFuzzy(keyType, value);
updateNodes(nodeList);
}
//隐藏所有节点
function hideAllNode(nodes){
nodes = tree.transformToArray(nodes);
for(var i=nodes.length-1; i>=0; i--) {
tree.hideNode(nodes[i]);
}
}
//显示所有节点
function showAllNode(nodes){
nodes = tree.transformToArray(nodes);
for(var i=nodes.length-1; i>=0; i--) {
/* if(!nodes[i].isParent){
tree.showNode(nodes[i]);
}else{ */
if(nodes[i].getParentNode()!=null){
tree.expandNode(nodes[i],false,false,false,false);
}else{
tree.expandNode(nodes[i],true,true,false,false);
}
tree.showNode(nodes[i]);
showAllNode(nodes[i].children);
/* } */
}
}
//更新节点状态
function updateNodes(nodeList) {
tree.showNodes(nodeList);
for(var i=0, l=nodeList.length; i<l; i++) {
//展开当前节点的父节点
tree.showNode(nodeList[i].getParentNode());
//tree.expandNode(nodeList[i].getParentNode(), true, false, false);
//显示展开符合条件节点的父节点
while(nodeList[i].getParentNode()!=null){
tree.expandNode(nodeList[i].getParentNode(), true, false, false);
nodeList[i] = nodeList[i].getParentNode();
tree.showNode(nodeList[i].getParentNode());
}
//显示根节点
tree.showNode(nodeList[i].getParentNode());
//展开根节点
tree.expandNode(nodeList[i].getParentNode(), true, false, false);
}
}
</script>
</head>
<body>
<div id="tree" class="ztree" style="padding:15px 20px;"></div>
</body>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userForm.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>用户管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
<%@include file="/WEB-INF/views/include/treeview.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>
<c:if test="${action ne 'view'}">
<c:if test="${empty oaNotify.id}">新增</c:if>
<c:if test="${not empty oaNotify.id}">编辑</c:if>
</c:if>
<c:if test="${action eq 'view'}">查看</c:if>
用户管理
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/user/save" method="post"
class="form-horizontal content-background">
<div class="content">
<form:hidden path="id"/>
<div class="form-unit">基本信息</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font color="red">*</font>头像</label>
<div class="col-sm-8">
<form:hidden id="nameImage" path="photo" htmlEscape="false" maxlength="255"
class="input-xlarge"/>
<sys:ckfinder input="nameImage" type="images" uploadPath="/photo" selectMultiple="false"
maxWidth="100" maxHeight="100"/>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font color="red">*</font>归属公司</label>
<div class="col-sm-8">
<sys:treeselect id="company" name="company.id" value="${user.company.id}"
labelName="company.name" labelValue="${user.company.name}"
title="公司" url="/sys/office/treeData?type=1"
cssClass="form-control required"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font color="red">*</font>归属部门</label>
<div class="col-sm-8">
<sys:treeselect id="office" name="office.id" value="${user.office.id}"
labelName="office.name" labelValue="${user.office.name}"
title="部门" url="/sys/office/treeData?type=2"
cssClass="form-control required" notAllowSelectParent="true"/>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font color="red">*</font>工号</label>
<div class="col-sm-8">
<form:input path="no" htmlEscape="false" maxlength="50"
class="form-control required"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font color="red">*</font>姓名</label>
<div class="col-sm-8">
<form:input path="name" htmlEscape="false" maxlength="50"
class="form-control required"/>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font color="red">*</font>登录名</label>
<div class="col-sm-8">
<input id="oldLoginName" name="oldLoginName" type="hidden"
value="${user.loginName}">
<form:input path="loginName" htmlEscape="false" maxlength="50"
class="form-control required userName"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><c:if
test="${empty user.id}"><font
color="red">*</font></c:if>密码</label>
<div class="col-sm-8">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="50"
minlength="3" class="form-control ${empty user.id?'required':''}"/>
<c:if test="${not empty user.id}"><span
class="help-inline">若不修改密码，请留空。</span></c:if>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><c:if
test="${empty user.id}"><font
color="red">*</font></c:if>确认密码</label>
<div class="col-sm-8">
<input id="confirmNewPassword" name="confirmNewPassword" type="password"
class="form-control ${empty user.id?'required':''}" value="" maxlength="50"
minlength="3" equalTo="#newPassword"/>
</div>
</div>
</div>
<div class="form-unit">详细信息</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">邮箱</label>
<div class="col-sm-8">
<form:input path="email" htmlEscape="false" maxlength="100"
class="form-control email"/>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">电话</label>
<div class="col-sm-8">
<form:input path="phone" htmlEscape="false" maxlength="100"
class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">手机</label>
<div class="col-sm-8">
<form:input path="mobile" htmlEscape="false" maxlength="100"
class="form-control"/>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">是否允许登录</label>
<div class="col-sm-8">
<form:select path="loginFlag" class="form-control">
<form:options items="${fns:getDictList('yes_no')}" itemLabel="label"
itemValue="value"
htmlEscape="false"/>
</form:select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">用户类型</label>
<div class="col-sm-8">
<form:select path="userType" class="form-control">
<form:option value="" label="请选择"/>
<form:options items="${fns:getDictList('sys_user_type')}" itemLabel="label"
itemValue="value" htmlEscape="false"/>
</form:select>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left"><font
color="red">*</font>用户角色</label>
<div class="col-sm-8">
<form:checkboxes path="roleIdList" items="${allRoles}" itemLabel="name"
itemValue="id"
htmlEscape="false" cssClass="i-checks required"/>
<label id="roleIdList-error" for="roleIdList"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">备注</label>
<div class="col-sm-8">
<form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200"
class="form-control"/>
</div>
</div>
<div class="col-xs-6">
</div>
</div>
<c:if test="${not empty user.id}">
<div class="row">
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">创建时间</label>
<div class="col-sm-8">
<fmt:formatDate value="${user.createDate}" type="both"
dateStyle="full"/>
</div>
</div>
<div class="col-xs-6 form-group">
<label class="control-label col-sm-4 pull-left">最后登陆</label>
<div class="col-sm-8">
IP: ${user.loginIp}&nbsp;&nbsp;&nbsp;&nbsp;时间<fmt:formatDate
value="${user.loginDate}" type="both" dateStyle="full"/>
</div>
</div>
</div>
</c:if>
<div id="iframeSave" class="form-group">
<c:if test="${action ne 'view'}">
<a id="btnSubmit" class="btn btn-primary">保存</a>
</c:if>
<a id="btnBack" class="btn btn-default">返回</a>
</div>
</form:form>
</div>
</div>
</div>
</div>
<div id="messageBox">${message}</div>
<%@ include file="/WEB-INF/views/include/footJs.jsp" %>
<script src="/staticViews/viewBase.js"></script>
<script src="/staticViews/modules/sys/userForm.js"></script>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userImageEdit.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>个人信息</title>
<meta name="decorator" content="default"/>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/webuploader-0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/webuploader-0.1.5/demo.css">
<script type="text/javascript">
// 添加全局站点信息
var BASE_URL = '/webuploader';
</script>
<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic}/webuploader-0.1.5/webuploader.js"></script>
<!-- <script type="text/javascript" src="${ctxStatic}/webuploader-0.1.5/demo.js"></script> -->
</head>
<body>
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<div class="page-container">
<p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来上传图片.</p>
<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>将照片拖到这里</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(function() {
var $ = jQuery, // just in case. Make sure it's not an other libaray.
$wrap = $('#uploader'),
// 图片容器
$queue = $('<ul class="filelist"></ul>')
.appendTo( $wrap.find('.queueList') ),
// 状态栏，包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
$info = $statusBar.find('.info'),
// 上传按钮
$upload = $wrap.find('.uploadBtn'),
// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),
// 总体进度条
$progress = $statusBar.find('.progress').hide(),
// 添加的文件数量
fileCount = 0,
// 添加的文件总大小
fileSize = 0,
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,
// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',
// 所有文件的进度信息，key为file id
percentages = {},
supportTransition = (function(){
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader实例
uploader;
if ( !WebUploader.Uploader.support() ) {
alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片'
},
dnd: '#uploader .queueList',
paste: document.body,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
disableGlobalDnd: true,
chunked: true,
// server: 'http://webuploader.duapp.com/server/fileupload.php',
server: '${ctx}/sys/user/imageUpload',
fileNumLimit: 1,//一次最多上传多少张照片
fileSizeLimit: 5 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 1 * 1024 * 1024 // 50 M
});
// 添加“添加文件”的按钮，
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
// 当有文件添加进来时执行，负责view的创建
function addFile( file ) {
var $li = $( '<li id="' + file.id + '">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap"></p>'+
'<p class="progress"><span></span></p>' +
'</li>' ),
$btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span>' +
'<span class="rotateRight">向右旋转</span>' +
'<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
$prgress = $li.find('p.progress span'),
$wrap = $li.find( 'p.imgWrap' ),
$info = $('<p class="error"></p>'),
showError = function( code ) {
switch( code ) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败，请重试';
break;
}
$info.text( text ).appendTo( $li );
};
if ( file.getStatus() === 'invalid' ) {
showError( file.statusText );
} else {
// @todo lazyload
$wrap.text( '预览中' );
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$wrap.text( '不能预览' );
return;
}
var img = $('<img src="'+src+'">');
$wrap.empty().append( img );
}, thumbnailWidth, thumbnailHeight );
percentages[ file.id ] = [ file.size, 0 ];
file.rotation = 0;
}
file.on('statuschange', function( cur, prev ) {
if ( prev === 'progress' ) {
$prgress.hide().width(0);
} else if ( prev === 'queued' ) {
$li.off( 'mouseenter mouseleave' );
$btns.remove();
}
// 成功
if ( cur === 'error' || cur === 'invalid' ) {
console.log( file.statusText );
showError( file.statusText );
percentages[ file.id ][ 1 ] = 1;
} else if ( cur === 'interrupt' ) {
showError( 'interrupt' );
} else if ( cur === 'queued' ) {
percentages[ file.id ][ 1 ] = 0;
} else if ( cur === 'progress' ) {
$info.remove();
$prgress.css('display', 'block');
} else if ( cur === 'complete' ) {
$li.append( '<span class="success"></span>' );
}
$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
});
$li.on( 'mouseenter', function() {
$btns.stop().animate({height: 30});
});
$li.on( 'mouseleave', function() {
$btns.stop().animate({height: 0});
});
$btns.on( 'click', 'span', function() {
var index = $(this).index(),
deg;
switch ( index ) {
case 0:
uploader.removeFile( file );
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if ( supportTransition ) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
// use jquery animate to rotation
// $({
// rotation: rotation
// }).animate({
// rotation: file.rotation
// }, {
// easing: 'linear',
// step: function( now ) {
// now = now * Math.PI / 180;
// var cos = Math.cos( now ),
// sin = Math.sin( now );
// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
// }
// });
}
});
$li.appendTo( $queue );
}
// 负责view的销毁
function removeFile( file ) {
var $li = $('#'+file.id);
delete percentages[ file.id ];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each( percentages, function( k, v ) {
total += v[ 0 ];
loaded += v[ 0 ] * v[ 1 ];
} );
percent = total ? loaded / total : 0;
spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
updateStatus();
}
function updateStatus() {
var text = '', stats;
if ( state === 'ready' ) {
text = '选中' + fileCount + '张图片，共' +
WebUploader.formatSize( fileSize ) + '。';
} else if ( state === 'confirm' ) {
stats = uploader.getStats();
if ( stats.uploadFailNum ) {
text = '已成功上传' + stats.successNum+ '张照片至XX相册，'+
stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '上传头像成功，请刷新页面！';
if ( stats.uploadFailNum ) {
text ='上传头像失败！';
}
}
$info.html( text );
}
function setState( val ) {
var file, stats;
if ( val === state ) {
return;
}
$upload.removeClass( 'state-' + state );
$upload.addClass( 'state-' + val );
state = val;
switch ( state ) {
case 'pedding':
$placeHolder.removeClass( 'element-invisible' );
$queue.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass( 'element-invisible' );
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass( 'element-invisible' );
$( '#filePicker2' ).removeClass( 'element-invisible');
$queue.parent().addClass('filled');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$( '#filePicker2' ).addClass( 'element-invisible' );
$progress.show();
$upload.text( '暂停上传' );
break;
case 'paused':
$progress.show();
$upload.text( '继续上传' );
break;
case 'confirm':
$progress.hide();
$upload.text( '开始上传' ).addClass( 'disabled' );
stats = uploader.getStats();
if ( stats.successNum && !stats.uploadFailNum ) {
setState( 'finish' );
return;
}
break;
case 'finish':
stats = uploader.getStats();
if ( stats.successNum ) {
// alert( '上传成功' );
} else {
// 没有成功的图片，重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
uploader.onUploadProgress = function( file, percentage ) {
var $li = $('#'+file.id),
$percent = $li.find('.progress span');
$percent.css( 'width', percentage * 100 + '%' );
percentages[ file.id ][ 1 ] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function( file ) {
fileCount++;
fileSize += file.size;
if ( fileCount === 1 ) {
$placeHolder.addClass( 'element-invisible' );
$statusBar.show();
}
addFile( file );
setState( 'ready' );
updateTotalProgress();
};
uploader.onFileDequeued = function( file ) {
fileCount--;
fileSize -= file.size;
if ( !fileCount ) {
setState( 'pedding' );
}
removeFile( file );
updateTotalProgress();
};
uploader.on( 'all', function( type ) {
var stats;
switch( type ) {
case 'uploadFinished':
setState( 'confirm' );
break;
case 'startUpload':
setState( 'uploading' );
break;
case 'stopUpload':
setState( 'paused' );
break;
}
});
uploader.onError = function( code ) {
alert( 'Eroor: ' + code );
};
$upload.on('click', function() {
if ( $(this).hasClass( 'disabled' ) ) {
return false;
}
if ( state === 'ready' ) {
uploader.upload();
} else if ( state === 'paused' ) {
uploader.upload();
} else if ( state === 'uploading' ) {
uploader.stop();
}
});
$info.on( 'click', '.retry', function() {
uploader.retry();
} );
$info.on( 'click', '.ignore', function() {
alert( 'todo' );
} );
$upload.addClass( 'state-' + state );
updateTotalProgress();
});
</script>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userIndex.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>用户管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
<%@include file="/WEB-INF/views/include/treeview.jsp" %>
</head>
<body>
<div class="row">
<div class="col-sm-2 hidden-xs" style="border-right: 1px solid #eee; padding-right: 0px;">
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title">
<i class="fa fa-edit"></i>部门
</div>
<div class="box-tools pull-right">
<a type="button" class="btn btn-box-tool" href="#"
title="机构管理" onclick="top.addTabs({title: '机构管理', url: '${ctx}/sys/office/list'});">
<i class="fa fa-edit"></i></a>
<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;">
<i class="fa fa-chevron-up"></i></button>
<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
class="fa fa-chevron-down"></i></button>
<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i
class="fa fa-refresh"></i></button>
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<div id="ztree" class="ztree leftBox-content"></div>
</div>
</div>
</div>
</div>
<div class="col-sm-10" style="padding-left: 0px;">
<iframe id="iframeContent" name="iframeContent" src="${ctx}/sys/user/list" width="100%" height="100%"
frameborder="0"></iframe>
</div>
</div>
<script type="text/javascript">
var tree;
var setting = {
data: {simpleData: {enable: true, idKey: "id", pIdKey: "pId", rootPId: '0'}},
callback: {
onClick: function (event, treeId, treeNode) {
var id = treeNode.id == '0' ? '' : treeNode.id;
$('#iframeContent').attr("src", "${ctx}/sys/user/list?office.id=" + id + "&office.name=" + treeNode.name);
}
}
};
function refreshTree() {
$.getJSON("${ctx}/sys/office/treeData", function (data) {
tree = $.fn.zTree.init($("#ztree"), setting, data);
//tree.expandAll(true);
// 展开第一级节点
var nodes = tree.getNodesByParam("level", 0);
for(var i=0; i<nodes.length; i++) {
tree.expandNode(nodes[i], true, false, false);
}
// 展开第二级节点
// nodes = tree.getNodesByParam("level", 1);
// for(var i=0; i<nodes.length; i++) {
// tree.expandNode(nodes[i], true, false, false);
// }
});
}
refreshTree();
function refresh() {//刷新
window.location = "${ctx}/sys/user/index";
}
// 工具栏按钮绑定
$('#btnExpand').click(function () {
tree.expandAll(true);
$(this).hide();
$('#btnCollapse').show();
});
$('#btnCollapse').click(function () {
tree.expandAll(false);
$(this).hide();
$('#btnExpand').show();
});
$('#btnRefresh').click(function () {
refresh();
});
</script>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userInfo.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>个人信息</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>
个人信息
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<sys:message hideType="1" content="${message}"/>
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>个人资料</h5>
<div class="ibox-tools" style="display: none">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
编辑<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a id="userImageBtn" data-toggle="modal" data-target="#register">更换头像</a>
</li>
<li><a id="userInfoBtn" data-toggle="modal" data-target="#register">编辑资料</a>
</li>
</ul>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-4" style="margin-bottom: 10px;">
<img alt="image" class="img-responsive" src="${user.photo }"/>
</div>
<div class="col-sm-8">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>姓名</strong></td>
<td>${user.name}</td>
</tr>
<tr>
<td><strong>邮箱</strong></td>
<td>${user.email}</td>
</tr>
<tr>
<td><strong>手机</strong></td>
<td>${user.mobile}</td>
</tr>
<tr>
<td><strong>电话</strong></td>
<td>${user.phone}</td>
</tr>
<tr>
<td><strong>公司</strong></td>
<td>${user.company.name}</td>
</tr>
<tr>
<td><strong>部门</strong></td>
<td>${user.office.name}</td>
</tr>
<tr>
<td><strong>备注</strong></td>
<td>${user.remarks}</td>
</tr>
</tbody>
</table>
<strong>上次登录</strong>
IP: ${user.oldLoginIp}&nbsp;&nbsp;&nbsp;&nbsp;时间：<fmt:formatDate
value="${user.oldLoginDate}" type="both" dateStyle="full"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>注册信息</h5>
<div class="ibox-tools" style="display: none">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
编辑<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a id="userPassWordBtn" data-toggle="modal" data-target="#register">更换密码</a>
</li>
<li><a href="#" data-toggle="modal" data-target="#register">更换手机号</a>
</li>
</ul>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>用户名</strong></td>
<td>${user.loginName}</td>
</tr>
<tr>
<td><strong>注册手机号码</strong></td>
<td>${user.mobile}</td>
</tr>
<tr>
<td><strong>用户角色</strong></td>
<td>${user.roleNames}</td>
</tr>
<tr>
<td><strong>用户类型</strong></td>
<td>${fns:getDictLabel(user.userType, 'sys_user_type', '无')}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--div class="col-sm-4">
<img width="100%" style="max-width:264px;" src="${user.qrCode}">
</div-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#userPassWordBtn").click(function () {
top.layer.open({
type: 2,
area: ['600px', '350px'],
title: "修改密码",
content: "${ctx}/sys/user/modifyPwd",
btn: ['确定', '关闭'],
yes: function (index, layero) {
var body = top.layer.getChildFrame('body', index);
var inputForm = body.find('#inputForm');
var btn = body.find('#btnSubmit');
var top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
inputForm.validate({
rules: {},
messages: {
confirmNewPassword: {equalTo: "输入与上面相同的密码"}
},
submitHandler: function (form) {
loading('正在提交，请稍等...');
form.submit();
},
errorContainer: "#messageBox",
errorPlacement: function (error, element) {
$("#messageBox").text("输入有误，请先更正。");
if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
error.appendTo(element.parent().parent());
} else {
error.insertAfter(element);
}
}
});
if (inputForm.valid()) {
loading("正在提交，请稍等...");
inputForm.submit();
////top.layer.close(index);//关闭对话框。
} else {
return;
}
},
cancel: function (index) {
}
});
});
$("#userInfoBtn").click(function () {
top.layer.open({
type: 2,
area: ['600px', '500px'],
title: "个人信息编辑",
content: "${ctx}/sys/user/infoEdit",
btn: ['确定', '关闭'],
yes: function (index, layero) {
var body = top.layer.getChildFrame('body', index);
var inputForm = body.find('#inputForm');
var top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
inputForm.validate();
if (inputForm.valid()) {
loading("正在提交，请稍等...");
inputForm.submit();
} else {
return;
}
////top.layer.close(index);//关闭对话框。
},
cancel: function (index) {
}
});
});
$("#userImageBtn").click(function () {
top.layer.open({
type: 2,
area: ['700px', '500px'],
title: "上传头像",
content: "${ctx}/sys/user/imageEdit",
// btn: ['确定', '关闭'],
yes: function (index, layero) {
var body = top.layer.getChildFrame('body', index);
var inputForm = body.find('#inputForm');
var top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
inputForm.validate();
if (inputForm.valid()) {
loading("正在提交，请稍等...");
inputForm.submit();
} else {
return;
}
////top.layer.close(index);//关闭对话框。
},
cancel: function (index) {
}
});
});
});
</script>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userInfoEdit.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>个人信息</title>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
</head>
<body>
<form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/user/infoEdit" method="post" class="form-horizontal form-group">
<div class="control-group">
</div>
<div class="control-group">
<label class="col-sm-3 control-label">姓名:</label>
<div class="controls">
<form:input path="name" htmlEscape="false" maxlength="50" class="form-control max-width-250 required" />
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label">邮箱:</label>
<div class="controls">
<form:input path="email" htmlEscape="false" maxlength="50" class="form-control max-width-250 email"/>
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label">电话:</label>
<div class="controls">
<form:input path="phone" htmlEscape="false" class="form-control max-width-250 " maxlength="50"/>
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label">手机:</label>
<div class="controls">
<form:input path="mobile" class="form-control max-width-250 required" htmlEscape="false" maxlength="50"/>
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label">备注:</label>
<div class="controls">
<form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200" class="form-control max-width-250 "/>
</div>
</div>
</form:form>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userList.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
<title>用户管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>用户管理</div>
<div class="box-tools pull-right">
<a id="btnSearchView" href="#" class="btn btn-sm btn-default" title="筛选"><i
class="fa fa-filter"></i>筛选</a>
<button id="btnRefresh" class="btn btn-default btn-sm" title="刷新"><i
class="glyphicon glyphicon-repeat"></i>刷新
</button>
<shiro:hasPermission name="sys:user:add">
<a id="btnAdd" href="${ctx}/sys/user/form" data-addTab="true" title="新增" class="btn btn-default btn-sm" ><i class="fa fa-plus"></i>新增</a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:user:del">
<a id="btnDeleteAll" href="${ctx}/sys/user/deleteAll" title="删除" class="btn btn-default btn-sm" ><i class="fa fa-trash-o"></i>删除</a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:user:import">
<table:importExcel url="${ctx}/sys/user/import"></table:importExcel><!-- 导入按钮 -->
</shiro:hasPermission>
<shiro:hasPermission name="sys:user:export">
<table:exportExcel url="${ctx}/sys/user/export"></table:exportExcel><!-- 导出按钮 -->
</shiro:hasPermission>
<!-- 工具功能 -->
<%@ include file="/WEB-INF/views/include/btnGroup.jsp" %>
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<!-- 查询条件 -->
<form:form id="searchForm" modelAttribute="user" action="${ctx}/sys/user/list" method="post"
class="form-inline">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<input id="orderBy" name="orderBy" type="hidden" value="${page.orderBy}"/>
<div class="form-group">
<span>归属公司：</span>
<sys:treeselect id="company" name="company.id" value="${user.company.id}"
labelName="company.name" labelValue="${user.company.name}"
title="公司" url="/sys/office/treeData?type=1"
cssClass=" form-control input-sm" allowClear="true"/>
</div>
<div class="form-group">
<span>登录名：</span>
<form:input path="loginName" htmlEscape="false" maxlength="50"
class=" form-control input-sm"/>
</div>
<div class="form-group">
<span>归属部门：</span>
<sys:treeselect id="office" name="office.id" value="${user.office.id}"
labelName="office.name" labelValue="${user.office.name}"
title="部门" url="/sys/office/treeData?type=2"
cssClass=" form-control input-sm" allowClear="true"
notAllowSelectParent="true"/>
</div>
<div class="form-group">
<span>姓&nbsp;&nbsp;&nbsp;名：</span>
<form:input path="name" htmlEscape="false" maxlength="50"
class=" form-control input-sm"/>
</div>
<div class="form-group">
<button id="btnSearch" class="btn btn-primary"><i class="fa fa-search"></i> 查询</button>
<button id="btnReset" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</button>
</div>
</form:form>
<!-- 工具栏 -->
<div class="row">
<div class="col-sm-12">
<div class="pull-left"></div>
<div class="pull-right"></div>
</div>
</div>
<table id="contentTable" class="table table-hover table-condensed dataTables-example dataTable">
<thead>
<tr>
<th><input type="checkbox" class="i-checks"></th>
<th class="sort-column login_name">登录名</th>
<th class="sort-column name">姓名</th>
<th class="sort-column phone">电话</th>
<th class="sort-column mobile">手机</th>
<th class="sort-column c.name">归属公司</th>
<th class="sort-column o.name">归属部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="user">
<tr>
<td><input type="checkbox" id="${user.id}" class="i-checks"></td>
<td><a href="#"
onclick="openDialogView('查看用户', '${ctx}/sys/user/form?id=${user.id}','800px', '680px')">${user.loginName}</a>
</td>
<td>${user.name}</td>
<td>${user.phone}</td>
<td>${user.mobile}</td>
<td>${user.company.name}</td>
<td>${user.office.name}</td>
<td>
<shiro:hasPermission name="sys:user:view">
<a id="btnView" class="btnView" href="${ctx}/sys/user/form?id=${user.id}&action=view"
title="查看"><i class="fa fa-search-plus"></i></a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:user:edit">
<a id="btnEdit" class="btnEdit" href="${ctx}/sys/user/form?id=${user.id}"
title="编辑"><i class="fa fa-pencil"></i></a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:user:del">
<a id="btnDelete" class="btnDelete" href="${ctx}/sys/user/delete?id=${user.id}"
title="删除"><i
class="fa fa-trash-o"></i> </a>
</shiro:hasPermission>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 没有信息数据 -->
<%@ include file="/WEB-INF/views/include/tableNoData.jsp" %>
<!-- 分页代码 -->
${page.toStringPage()}
</div>
</div>
</div>
<!-- 信息-->
<div id="messageBox">${message}</div>
<%@ include file="/WEB-INF/views/include/footJs.jsp" %>
<script src="/staticViews/viewBase.js"></script></body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/sys/userModifyPwd.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>修改密码</title>
<meta name="decorator" content="default"/>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script type="text/javascript">
$(document).ready(function() {
$("#oldPassword").focus();
});
</script>
</head>
<body>
<form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/user/modifyPwd" method="post" class="form-horizontal form-group">
<form:hidden path="id"/>
<sys:message hideType="1" content="${message}"/>
<div class="control-group">
</div>
<div class="control-group">
<label class="col-sm-3 control-label"><font color="red">*</font>旧密码:</label>
<div class="controls">
<input id="oldPassword" name="oldPassword" type="password" value="" maxlength="50" minlength="3" class="form-control max-width-250 required"/>
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label"><font color="red">*</font>新密码:</label>
<div class="controls">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="50" minlength="3" class="form-control max-width-250 required"/>
</div>
</div>
<div class="control-group">
<label class="control-label"><font color="red">*</font>确认新密码:</label>
<div class="controls">
<input id="confirmNewPassword" name="confirmNewPassword" type="password" value="" maxlength="50" minlength="3" class="form-control max-width-250 required" equalTo="#newPassword"></input>
</div>
</div>
<div class="form-actions">
<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>
</div>
</form:form>
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/test/one/formLeaveForm.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>请假管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>
请假管理
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<form:form id="inputForm" modelAttribute="formLeave" action="${ctx}/test/one/formLeave/save" method="post" class="form-horizontal content-background">
<div class="content">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="form-unit">基本信息</div>
<div class="form-group">
<label class="col-sm-2 pull-left">员工<font color="red">*</font></label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<sys:treeselect id="user" name="user.id" value="${formLeave.user.id}" labelName="user.name" labelValue="${formLeave.user.name}"
title="用户" url="/sys/office/treeData?type=3" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
<div class="help-block">请选择员工</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 pull-left">归属部门<font color="red">*</font></label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<sys:treeselect id="office" name="office.id" value="${formLeave.office.id}" labelName="office.name" labelValue="${formLeave.office.name}"
title="部门" url="/sys/office/treeData?type=2" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
<div class="help-block">请选择归属部门</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 pull-left">归属区域</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<sys:treeselect id="area" name="area.id" value="${formLeave.area.id}" labelName="area.name" labelValue="${formLeave.area.name}"
title="区域" url="/sys/area/treeData" cssClass="form-control " allowClear="true" notAllowSelectParent="true"/>
<div class="help-block">请选择归属区域</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 pull-left">请假开始日期<font color="red">*</font></label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<input id="beginDate" name="beginDate" type="text" maxlength="20" class="laydate-icon form-control layer-date required"
value="<fmt:formatDate value="${formLeave.beginDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<div class="help-block">请选择请假开始日期</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 pull-left">请假结束日期<font color="red">*</font></label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<input id="endDate" name="endDate" type="text" maxlength="20" class="laydate-icon form-control layer-date required"
value="<fmt:formatDate value="${formLeave.endDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<div class="help-block">请选择请假结束日期</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 pull-left">备注信息</label>
<div class="col-sm-9 col-lg-10 col-xs-12">
<form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="255" class="form-control "/>
</div>
</div>
<div class="form-group">
<c:if test="${action ne 'view'}">
<a id="btnSubmit" class="btn btn-primary">保存</a>
</c:if>
<a id="btnBack" class="btn btn-default">返回</a>
<!--a class="btn btn-primary" onclick="top.closeSelectTabs()">关闭</a-->
</div>
</div>
</form:form>
</div>
</div>
</div>
<div id="messageBox">${message}</div>
<%@ include file="/WEB-INF/views/include/footJs.jsp" %>
<script src="/staticViews/viewBase.js"></script>
<script src="/staticViews/modules/test/one/formLeaveForm.js" type="text/javascript"></script>
<link href="/staticViews/modules/test/one/formLeaveForm.css" rel="stylesheet" />
</body>
</html>
\ No newline at end of file
JeeSpringCloud/jeespring-web/src/main/webapp/WEB-INF/views/modules/test/one/formLeaveFormTwo.jsp 0 → 100644
View file @ e2a64d42
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>请假管理</title>
<%@ include file="/WEB-INF/views/include/headMeta.jsp" %>
<%@ include file="/WEB-INF/views/include/headCss.jsp" %>
<%@ include file="/WEB-INF/views/include/headJs.jsp" %>
</head>
<body>
<!-- 内容-->
<div class="wrapper">
<!-- 内容盒子-->
<div class="box box-main">
<!-- 内容盒子头部 -->
<div class="box-header">
<div class="box-title"><i class="fa fa-edit"></i>
请假管理
</div>
</div>
<!-- 内容盒子身体 -->
<div class="box-body">
<form:form id="inputForm" modelAttribute="formLeave" action="${ctx}/test/one/formLeave/save" method="post" class="form-horizontal content-background">
<div class="content">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="form-unit">基本信息</div>
<div class="row">
<div class="form-group col-xs-6">
<label class="control-label col-sm-4 pull-left">员工<font color="red">*</font></label>
<div class="col-sm-8">
<sys:treeselect id="user" name="user.id" value="${formLeave.user.id}" labelName="user.name" labelValue="${formLeave.user.name}"
title="用户" url="/sys/office/treeData?type=3" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
<div class="help-block">请选择员工</div>
</div>
</div>
<div class="form-group col-xs-6">
<label class="control-label col-sm-4 pull-left">归属部门<font color="red">*</font></label>
<div class="col-sm-8">
<sys:treeselect id="office" name="office.id" value="${formLeave.office.id}" labelName="office.name" labelValue="${formLeave.office.name}"
title="部门" url="/sys/office/treeData?type=2" cssClass="form-control required" allowClear="true" notAllowSelectParent="true"/>
<div class="help-block">请选择归属部门</div>
</div>
</div>
<div class="form-group col-xs-6">
<label class="control-label col-sm-4 pull-left">归属区域</label>
<div class="col-sm-8">
<sys:treeselect id="area" name="area.id" value="${formLeave.area.id}" labelName="area.name" labelValue="${formLeave.area.name}"
title="区域" url="/sys/area/treeData" cssClass="form-control " allowClear="true" notAllowSelectParent="true"/>
<div class="help-block">请选择归属区域</div>
</div>
</div>
<div class="form-group col-xs-6">
<label class="control-label col-sm-4 pull-left">请假开始日期<font color="red">*</font></label>
<div class="col-sm-8">
<input id="beginDate" name="beginDate" type="text" maxlength="20" class="laydate-icon form-control layer-date required"
value="<fmt:formatDate value="${formLeave.beginDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<div class="help-block">请选择请假开始日期</div>
</div>
</div>
<div class="form-group col-xs-6">
<label class="control-label col-sm-4 pull-left">请假结束日期<font color="red">*</font></label>
<div class="col-sm-8">
<input id="endDate" name="endDate" type="text" maxlength="20" class="laydate-icon form-control layer-date required"
value="<fmt:formatDate value="${formLeave.endDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
<div class="help-block">请选择请假结束日期</div>
</div>
</div>
<div class="form-group col-xs-6">
<label class="control-label col-sm-4 pull-left">备注信息</label>
<div class="col-sm-8">
<form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="255" class="form-control "/>
</div>
</div>
</div>
<div class="form-group">
<c:if test="${action ne 'view'}">
<a id="btnSubmit" class="btn btn-primary">保存</a>
</c:if>
<a id="btnBack" class="btn btn-default">返回</a>
<!--a class="btn btn-primary" onclick="top.closeSelectTabs()">关闭</a-->
</div>
</div>
</form:form>
</div>
</div>
</div>
<div id="messageBox">${message}</div>
<%@ include file="/WEB-INF/views/include/footJs.jsp" %>
<script src="/staticViews/viewBase.js"></script>
<script src="/staticViews/modules/test/one/formLeaveForm.js" type="text/javascript"></script>
<link href="/staticViews/modules/test/one/formLeaveForm.css" rel="stylesheet" />
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment