|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
<link rel="stylesheet"
|
|
|
href="<%=request.getContextPath()%>/css/bootstrap.min.css">
|
|
|
<link rel="stylesheet"
|
|
|
href="<%=request.getContextPath()%>/css/bootstrap-datetimepicker.min.css">
|
|
|
<link rel="stylesheet"
|
|
|
href="<%=request.getContextPath()%>/css/bootstrap-table.min.css">
|
|
|
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
|
|
|
<link rel="stylesheet"
|
|
|
href="<%=request.getContextPath()%>/css/bootstrap-theme.min.css">
|
|
|
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
|
|
|
<script src="<%=request.getContextPath()%>/js/echarts.min.js"></script>
|
|
|
<title>图表</title>
|
|
|
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
|
|
|
<script
|
|
|
src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker.min.js"></script>
|
|
|
<script
|
|
|
src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker.zh-CN.js"></script>
|
|
|
<script src="<%=request.getContextPath()%>/js/bootstrap-table.min.js"></script>
|
|
|
<script
|
|
|
src="<%=request.getContextPath()%>/js/bootstrap-table-zh-CN.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
|
|
|
<div id="todaydate" class=table-responsive"
|
|
|
style="width:100%; height: 450px; border: 8px solid #FFC8B4; float: left; margin-right: 12px">
|
|
|
<br>
|
|
|
<h3 class="panel-title text-center" style="color: green"><b>用车记录</b></h3>
|
|
|
<table id="prjTable" class="table text-nowrap"></table>
|
|
|
</div>
|
|
|
<div id="history"
|
|
|
style="width:100%; height: 450px; border: 8px solid #FFC8B4; float: left; ">
|
|
|
<h3 class="panel-title text-center" style="color: green"><b>维修订单</b></h3>
|
|
|
<table id="prjTable2"></table>
|
|
|
</div>
|
|
|
<div id="attodate"
|
|
|
style="width: 100%; height: 450px; border: 8px solid #FFC8B4; float: left; margin-right: 12px; margin-top: 8px">
|
|
|
<br>
|
|
|
<h3 class="panel-title text-center" style="color: green"><b>服务订单</b></h3>
|
|
|
<table id="prjTable3"></table>
|
|
|
</div>
|
|
|
<div id="pieTable" style="width: 100%;height:450px;border: 8px solid #FFC8B4;float:left;margin-top: 8px">
|
|
|
<!-- <br>
|
|
|
<h3 class="panel-title text-center" style="color: green"><b>本月统计</b></h3> -->
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
var tableData = $('#prjTable');
|
|
|
tableData.bootstrapTable({
|
|
|
url: "<%=request.getContextPath()%>/adminGetRecord",
|
|
|
dataType: "json",
|
|
|
pagination: true, //分页
|
|
|
singleSelect: false,
|
|
|
//toolbar:"#toolbar",
|
|
|
showRefresh:true,// 显示刷新按钮
|
|
|
showColumns:true, // 显示所有的列
|
|
|
//data-locale:"zh-CN", //表格汉化
|
|
|
search: false, //显示搜索框
|
|
|
striped:true,
|
|
|
sidePagination: "server", //服务端处理分页
|
|
|
pageSize:5,
|
|
|
pageList:[5,10,15,20,50],
|
|
|
sortName : 'createDate', // 排序字段
|
|
|
sortOrder : 'desc', // 排序方式
|
|
|
sortable: true, //是否启用排序
|
|
|
queryParams: function (params) {
|
|
|
return {
|
|
|
//rows: this.pageSize,
|
|
|
//page: this.pageNumber,
|
|
|
offset: params.offset, //页码
|
|
|
limit: params.limit, //页面大小
|
|
|
search : params.search, //搜索
|
|
|
order : params.order, //排序
|
|
|
ordername : params.sort, //排序
|
|
|
};
|
|
|
},
|
|
|
columns: [
|
|
|
{
|
|
|
title: '记录编号',
|
|
|
field: 'recordId',
|
|
|
align: 'left',
|
|
|
valign: 'middle',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '用户编号',
|
|
|
field: 'userId',
|
|
|
align: 'left',
|
|
|
valign: 'middle',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '单车编号',
|
|
|
field: 'bikeId',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '开始时间',
|
|
|
field: 'startDate',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '结束时间',
|
|
|
field: 'returnDate',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '支付金额',
|
|
|
field: 'payment',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
]
|
|
|
});
|
|
|
|
|
|
//修改——转换日期格式(时间戳转换为datetime格式)
|
|
|
function changeDateFormat(cellval) {
|
|
|
if (cellval != null) {
|
|
|
var date = new Date(cellval);
|
|
|
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
|
return date.getFullYear() + "/" + month + "/" + currentDate;
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<!--历史遗留 -->
|
|
|
<script type="text/javascript">
|
|
|
var tableData = $('#prjTable2');
|
|
|
tableData.bootstrapTable({
|
|
|
url: "<%=request.getContextPath()%>/adminGetComplain",
|
|
|
dataType: "json",
|
|
|
pagination: true, //分页
|
|
|
singleSelect: false,
|
|
|
//toolbar:"#toolbar",
|
|
|
showRefresh:true,// 显示刷新按钮
|
|
|
showColumns:true, // 显示所有的列
|
|
|
//data-locale:"zh-CN", //表格汉化
|
|
|
search: false, //显示搜索框
|
|
|
striped:true,
|
|
|
sidePagination: "server", //服务端处理分页
|
|
|
pageSize:5,
|
|
|
pageList:[5,10,15,20,50],
|
|
|
sortName : 'createDate', // 排序字段
|
|
|
sortOrder : 'desc', // 排序方式
|
|
|
sortable: true, //是否启用排序
|
|
|
queryParams: function (params) {
|
|
|
return {
|
|
|
//rows: this.pageSize,
|
|
|
//page: this.pageNumber,
|
|
|
offset: params.offset, //页码
|
|
|
limit: params.limit, //页面大小
|
|
|
search : params.search, //搜索
|
|
|
order : params.order, //排序
|
|
|
ordername : params.sort, //排序
|
|
|
};
|
|
|
},
|
|
|
columns: [
|
|
|
{
|
|
|
title: '保修编号',
|
|
|
field: 'complainId',
|
|
|
align: 'left',
|
|
|
valign: 'middle',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '用户编号',
|
|
|
field: 'complainUserId',
|
|
|
align: 'left',
|
|
|
valign: 'middle',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '单车编号',
|
|
|
field: 'complainBikeId',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '单车区域',
|
|
|
field: 'complainBikeArea',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '保修信息',
|
|
|
field: 'complainInfo',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
]
|
|
|
});
|
|
|
|
|
|
//修改——转换日期格式(时间戳转换为datetime格式)
|
|
|
function changeDateFormat(cellval) {
|
|
|
if (cellval != null) {
|
|
|
var date = new Date(cellval);
|
|
|
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
|
return date.getFullYear() + "/" + month + "/" + currentDate;
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
var tableData = $('#prjTable3');
|
|
|
tableData.bootstrapTable({
|
|
|
url: "<%=request.getContextPath()%>/adminGetService",
|
|
|
dataType: "json",
|
|
|
pagination: true, //分页
|
|
|
singleSelect: false,
|
|
|
//toolbar:"#toolbar",
|
|
|
showRefresh:true,// 显示刷新按钮
|
|
|
showColumns:true, // 显示所有的列
|
|
|
//data-locale:"zh-CN", //表格汉化
|
|
|
search: false, //显示搜索框
|
|
|
striped:true,
|
|
|
sidePagination: "server", //服务端处理分页
|
|
|
pageSize:5,
|
|
|
pageList:[5,10,15,20,50],
|
|
|
sortName : 'createDate', // 排序字段
|
|
|
sortOrder : 'desc', // 排序方式
|
|
|
sortable: true, //是否启用排序
|
|
|
queryParams: function (params) {
|
|
|
return {
|
|
|
//rows: this.pageSize,
|
|
|
//page: this.pageNumber,
|
|
|
offset: params.offset, //页码
|
|
|
limit: params.limit, //页面大小
|
|
|
search : params.search, //搜索
|
|
|
order : params.order, //排序
|
|
|
ordername : params.sort, //排序
|
|
|
};
|
|
|
},
|
|
|
columns: [
|
|
|
{
|
|
|
title: '服务编号',
|
|
|
field: 'serviceId',
|
|
|
align: 'left',
|
|
|
valign: 'middle',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '用户编号',
|
|
|
field: 'serviceUserId',
|
|
|
align: 'left',
|
|
|
valign: 'middle',
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '单车编号',
|
|
|
field: 'serviceBikeId',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '单车区域',
|
|
|
field: 'serviceBikeArea',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '申诉信息',
|
|
|
field: 'serviceInfo',
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
]
|
|
|
});
|
|
|
|
|
|
//修改——转换日期格式(时间戳转换为datetime格式)
|
|
|
function changeDateFormat(cellval) {
|
|
|
if (cellval != null) {
|
|
|
var date = new Date(cellval);
|
|
|
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
|
return date.getFullYear() + "/" + month + "/" + currentDate;
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<!-- 饼图统计 -->
|
|
|
<script type="text/javascript">
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChartPie = echarts.init(document.getElementById('pieTable'));
|
|
|
$.get("<%=request.getContextPath()%>/adminGetPieData",{},function(pieData){
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
title : {
|
|
|
text: '数据统计',
|
|
|
subtext: '单车统计',
|
|
|
x:'center'
|
|
|
},
|
|
|
tooltip : {
|
|
|
trigger: 'item',
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
left: 'left',
|
|
|
data:pieData.legendData
|
|
|
},
|
|
|
series : [
|
|
|
{
|
|
|
name: '访问来源',
|
|
|
type: 'pie',
|
|
|
radius : '55%',
|
|
|
center: ['50%', '60%'],
|
|
|
data:pieData.seriesData,
|
|
|
itemStyle: {
|
|
|
emphasis: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChartPie.setOption(option);
|
|
|
},"json");
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
