权限管理界面ftl格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>权限管理</title>
<#include "../common/link.ftl" >
<script>
function permissionreset(){
// window.location.href = '/permission/reload.do';
$.post('/permission/reload.do', function(obj){
if(obj.success){
$.messager.alert("温馨提示","保存成功!1s后自动关闭");
window.setTimeout(function () {
window.location.reload();
},1000)
}
else{
$.messager.popup(obj.msg);
}
});
}
</script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<#include "../common/navbar.ftl" >
<!--菜单回显-->
<#assign currentMenu="permission"/>
<#include "../common/menu.ftl" >
<div class="content-wrapper">
<section class="content-header">
<h1>权限管理</h1>
</section>
<section class="content">
<div class="box" >
<!--高级查询--->
<form class="form-inline" id="searchForm" action="/permission/list.do" method="post">
<input type="hidden" name="currentPage" id="currentPage" value="1">
<a href="javascript:permissionreset();" class="btn btn-success btn_reload" style="margin: 10px;">
<span class="glyphicon glyphicon-repeat"></span> 重新加载
</a>
</form>
<table class="table table-striped table-hover" >
<thead>
<tr>
<th>编号</th>
<th>权限名称</th>
<th>权限表达式</th>
<th>操作</th>
</tr>
</thead>
<#list (pageResult.list)! as permission>
<tr>
<td>${permission_index+1}</td>
<td>${(permission.name)!}</td>
<td>${(permission.expression)!}</td>
<td>
<a href="/permission/delete.do?id=${permission.id}" class="btn btn-danger btn-xs btn_delete" >
<span class="glyphicon glyphicon-trash"></span> 删除
</a>
</td>
</tr>
</#list>
</table>
<!--分页-->
<#include "../common/page.ftl" >
</div>
</section>
</div>
<#include "../common/footer.ftl" >
</div>
</body>
</html>
潜在客户界面ftl格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>潜在客户报表查询</title>
<#include "../common/link.ftl" >
<!--引入日期插件的样式文件-->
<link rel="stylesheet" href="/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css"/>
<!--引入日期插件的js文件-->
<script type="text/javascript" src="/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!--引入中文国际化文件-->
<script type="text/javascript" src="/js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
$(function (){
$(".btn-chart").click(function () {
//清空模态框的缓存
$('#chartModal').removeData('bs.modal');
//获取url地址
var url = $(this).data('url');
//告诉模态框图形报表url是哪个,加载内容并且放到模态框
$('#chartModal').modal({
remote : url + "?" + $("#searchForm").serialize() //加上高级查询的条件
})
$("#chartModal").modal('show');
})
$("#groupType").val("${qo.groupType!}")
$("#keyword").val("${qo.keyword!}")
$('.input-daterange').datepicker({
language: "zh-CN",
autoclose: true,
todayHighlight: true,
clearBtn: true
});
})
</script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<#include "../common/navbar.ftl" >
<#assign currentMenu="customerReport"/>
<#include "../common/menu.ftl" >
<div class="content-wrapper">
<section class="content-header">
<h1>潜在客户报表查询</h1>
</section>
<section class="content">
<div class="box">
<div style="margin: 10px;">
<#--高级查询-->
<form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
<input type="hidden" name="currentPage" id="currentPage" value="1">
<div class="form-group">
<label for="keyword">员工姓名:</label>
<input type="text" class="form-control" id="keyword" name="keyword">
</div>
<div class="form-group">
<label>时间段查询:</label>
</div>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="beginDate"
value="${(qo.beginDate?string('yyyy-MM-dd'))!}" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="endDate"
value="${(qo.endDate?string('yyyy-MM-dd'))!}" />
</div>
<div class="form-group">
<label for="status">分组类型:</label>
<select class="form-control" id="groupType" name="groupType">
<option value="e.name">员工</option>
<option value="DATE_FORMAT(c.input_time, '%Y')">年</option>
<option value="DATE_FORMAT(c.input_time, '%Y-%m')">月</option>
<option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">日</option>
<option value="c.gender">性别</option>
</select>
</div>
<button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
<button type="button" class="btn btn-info btn-chart" data-url="/customerReport/listByBar.do">
<span class="glyphicon glyphicon-stats"></span> 柱状图
</button>
<button type="button" class="btn btn-warning btn-chart" data-url="/customerReport/listByPie.do">
<span class="glyphicon glyphicon-dashboard"></span> 饼状图
</button>
</form>
</div>
<div class="box-body table-responsive no-padding ">
<table class="table table-hover table-bordered">
<tr>
<th>分组类型</th>
<th>潜在客户新增数</th>
</tr>
<#list pageResult.list as map>
<tr>
<td>${map.groupType!}</td>
<td>${map.number!}</td>
</tr>
</#list>
</table>
<#include "../common/page.ftl" >
</div>
</div>
</section>
</div>
<#include "../common/footer.ftl">
</div>
<!-- Modal模态框 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
</body>
</html>
柱状图代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '潜在客户报表',
subtext: "分组类型:${groupTypeName}"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['潜在客户数']
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ${xList}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '潜在客户数',
type: 'bar',
data: ${yList}, //[8,15,30,3]
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>